/* ============================================================
   Cadena Family Dentistry — CFD 2026 design system
   Shared by redesigned Service + Contact pages. Scoped under .cfd-page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

.cfd-page{
  --teal:#00b7c5; --teal-deep:#0098a3; --teal-dark:#0a6a72;
  --ink:#0c2b30; --slate:#3f595d; --muted:#6c8589;
  --bg:#f3fafa; --bg-2:#e7f6f6; --card:#ffffff;
  --line:rgba(0,150,163,.14); --line-2:rgba(0,150,163,.28);
  --gold:#f4b740;
  --shadow-sm:0 4px 18px -8px rgba(8,60,66,.22);
  --shadow:0 24px 60px -28px rgba(8,60,66,.40);
  --shadow-lg:0 48px 110px -40px rgba(7,76,84,.55);
  --r:26px;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif; color:var(--slate);
  background:
    radial-gradient(1100px 720px at 88% -8%, rgba(0,183,197,.16), transparent 60%),
    radial-gradient(900px 620px at -6% 26%, rgba(0,183,197,.10), transparent 55%),
    radial-gradient(1000px 800px at 50% 118%, rgba(0,152,163,.12), transparent 60%),
    linear-gradient(180deg,#f6fbfb 0%, var(--bg) 40%, #eef8f8 100%);
  position:relative; overflow:hidden; -webkit-font-smoothing:antialiased;
}
.cfd-page *{box-sizing:border-box;}
.cfd-page::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background-image:radial-gradient(rgba(0,152,163,.10) 1px, transparent 1.4px); background-size:26px 26px;
  mask-image:linear-gradient(180deg,#000,transparent 60%); -webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);}
.cfd-wrap{max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:2;}
.cfd-page h1,.cfd-page h2,.cfd-page h3,.cfd-page h4{font-family:"Sora",sans-serif; color:var(--ink); margin:0; line-height:1.12; letter-spacing:-.02em; font-weight:700;}
.cfd-page p{margin:0; line-height:1.75;}

.cfd-eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:"Sora",sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--teal-deep);}
.cfd-eyebrow::before{content:""; width:30px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--teal),rgba(0,183,197,0));}
.cfd-eyebrow.center{justify-content:center;}
.cfd-eyebrow.center::before{width:18px;}
.cfd-eyebrow.center::after{content:""; width:18px; height:2px; border-radius:2px; background:linear-gradient(270deg,var(--teal),rgba(0,183,197,0));}

/* buttons */
.cfd-btn{display:inline-flex; align-items:center; gap:10px; font-family:"Sora",sans-serif; font-weight:600; font-size:15px; padding:15px 28px; border-radius:100px; text-decoration:none; cursor:pointer; border:0; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;}
.cfd-btn-primary{color:#fff; background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deep) 100%); box-shadow:0 16px 30px -12px rgba(0,152,163,.7), inset 0 1px 0 rgba(255,255,255,.25);}
.cfd-btn-primary:hover{transform:translateY(-3px); box-shadow:0 24px 42px -14px rgba(0,152,163,.8);}
.cfd-btn-ghost{color:var(--teal-dark); background:rgba(255,255,255,.7); border:1px solid var(--line-2); backdrop-filter:blur(6px);}
.cfd-btn-ghost:hover{transform:translateY(-3px); background:#fff; box-shadow:var(--shadow-sm);}
.cfd-btn svg{width:18px;height:18px;}

/* reveal */
.cfd-reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);}
.cfd-reveal.cfd-in{opacity:1; transform:none;}
.cfd-reveal[data-d="1"]{transition-delay:.08s}.cfd-reveal[data-d="2"]{transition-delay:.16s}
.cfd-reveal[data-d="3"]{transition-delay:.24s}.cfd-reveal[data-d="4"]{transition-delay:.32s}
.cfd-reveal[data-d="5"]{transition-delay:.40s}.cfd-reveal[data-d="6"]{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){.cfd-reveal{opacity:1;transform:none;transition:none}}
.cfd-floaty{animation:cfdFloat 7s ease-in-out infinite;}
@keyframes cfdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ===== page hero ===== */
.cfd-phero{padding:116px 0 56px;}
.cfd-bc{font-family:"Sora",sans-serif; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:24px;}
.cfd-bc a{color:var(--teal-deep); text-decoration:none;} .cfd-bc a:hover{text-decoration:underline;}
.cfd-bc span{margin:0 9px; opacity:.55;}
.cfd-phero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center;}
.cfd-phero h1{font-size:clamp(34px,4.8vw,58px); font-weight:800; letter-spacing:-.035em; margin-top:14px;}
.cfd-phero h1 .accent{background:linear-gradient(120deg,var(--teal),var(--teal-deep) 60%,#0a6a72); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.cfd-phero-lede{font-size:18px; color:var(--slate); margin-top:22px; max-width:560px;}
.cfd-phero-cta{display:flex; gap:13px; flex-wrap:wrap; margin-top:30px;}
.cfd-phero-facts{display:flex; gap:13px; margin-top:32px; flex-wrap:wrap;}
.cfd-fact{display:flex; align-items:center; gap:11px; padding:12px 17px; background:rgba(255,255,255,.66); border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(8px); box-shadow:var(--shadow-sm);}
.cfd-fact-i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto; background:linear-gradient(135deg,rgba(0,183,197,.16),rgba(0,152,163,.10)); color:var(--teal-deep);}
.cfd-fact-i svg{width:20px;height:20px;}
.cfd-fact b{display:block; font-family:"Sora",sans-serif; color:var(--ink); font-size:14.5px; font-weight:700; line-height:1.2;}
.cfd-fact small{font-size:12px; color:var(--muted);}
.cfd-phero-art{position:relative;}
.cfd-phero-photo{position:relative; border-radius:30px; overflow:hidden; box-shadow:var(--shadow-lg); border:6px solid #fff; transform:rotate(1.3deg);}
.cfd-phero-photo img{display:block; width:100%; height:400px; object-fit:cover;}
.cfd-phero-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(10,106,114,.22));}
.cfd-phero-blob{position:absolute; width:300px;height:300px; right:-36px; top:-40px; z-index:-1; border-radius:50%; background:radial-gradient(circle at 40% 40%,rgba(0,183,197,.42),rgba(0,152,163,0) 70%); filter:blur(6px);}
.cfd-phero-badge{position:absolute; left:-22px; bottom:28px; display:flex; align-items:center; gap:12px; padding:14px 18px; background:rgba(255,255,255,.88); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); backdrop-filter:blur(10px);}
.cfd-phero-badge .pic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(0,183,197,.18),rgba(0,152,163,.10));color:var(--teal-deep);}
.cfd-phero-badge .pic svg{width:22px;height:22px;}
.cfd-phero-badge b{font-family:"Sora",sans-serif;color:var(--ink);font-size:15px;display:block;line-height:1.15;}
.cfd-phero-badge small{font-size:12px;color:var(--muted);}

/* ===== two-column layout ===== */
.cfd-body{padding:24px 0 70px;}
.cfd-layout{display:grid; grid-template-columns:1fr 360px; gap:46px; align-items:start;}
.cfd-aside{position:sticky; top:24px; display:flex; flex-direction:column; gap:20px;}

/* prose */
.cfd-prose{font-size:16.5px; color:var(--slate);}
.cfd-prose > *{margin:0 0 18px;}
.cfd-prose > *:last-child{margin-bottom:0;}
.cfd-prose p{line-height:1.85;}
.cfd-prose strong{color:var(--ink);}
.cfd-prose a{color:var(--teal-deep); font-weight:600;}
.cfd-prose h3,.cfd-prose h4{font-family:"Sora",sans-serif; color:var(--ink); margin:34px 0 14px; font-weight:700; line-height:1.2;}
.cfd-prose h3{font-size:23px;} .cfd-prose h4{font-size:19px;}
.cfd-prose ul,.cfd-prose ol{padding-left:0; list-style:none; display:flex; flex-direction:column; gap:11px;}
.cfd-prose ul li{position:relative; padding-left:30px;}
.cfd-prose ul li::before{content:""; position:absolute; left:2px; top:9px; width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-deep)); box-shadow:0 0 0 4px rgba(0,183,197,.14);}
.cfd-prose ol{counter-reset:cfd; }
.cfd-prose ol li{counter-increment:cfd; position:relative; padding-left:42px;}
.cfd-prose ol li::before{content:counter(cfd); position:absolute; left:0; top:-2px; width:28px;height:28px;border-radius:9px; display:grid;place-items:center; font-family:"Sora";font-size:13px;font-weight:700;color:#fff; background:linear-gradient(135deg,var(--teal),var(--teal-deep));}
.cfd-prose img{max-width:100%; height:auto; border-radius:18px; box-shadow:var(--shadow-sm);}
/* images embedded inside a body paragraph: float as a framed figure so text wraps cleanly */
.cfd-prose p:has(img){display:flow-root;}
.cfd-prose p > img{float:left; width:auto; max-width:200px; max-height:340px; margin:4px 30px 14px 0;
  padding:12px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm);}
@media (max-width:560px){ .cfd-prose p > img{float:none; display:block; margin:2px auto 16px;} }

/* cards */
.cfd-card{background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-sm);}
.cfd-card-pad{padding:26px 24px;}
.cfd-card-head{display:flex; align-items:center; gap:11px; margin-bottom:16px;}
.cfd-card-head .ci{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:#fff;}
.cfd-card-head .ci svg{width:21px;height:21px;}
.cfd-card-head h3{font-size:18px;}
.cfd-card-head p{font-size:13px;color:var(--muted);margin-top:2px;}

/* appointment form card (re-skins the preserved Web3Forms form) */
.cfd-formcard{background:linear-gradient(160deg,#ffffff,#f3fbfb); border:1px solid var(--line); border-radius:24px; padding:26px 24px; box-shadow:var(--shadow);}
.cfd-formcard .cfd-formhd{display:flex; align-items:center; gap:11px; margin-bottom:6px;}
.cfd-formcard .cfd-formhd .ci{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:#fff;flex:0 0 auto;}
.cfd-formcard .cfd-formhd .ci svg{width:22px;height:22px;}
.cfd-formcard h3{font-size:20px;}
.cfd-formcard .sub{font-size:13.5px;color:var(--muted); margin:4px 0 18px;}
.cfd-page .cf-modern-form{display:flex; flex-direction:column; gap:14px;}
.cfd-page .cf-modern-form .cf-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.cfd-page .cf-modern-form .cf-field{display:flex; flex-direction:column; gap:6px;}
.cfd-page .cf-modern-form label{font-family:"Sora",sans-serif; font-size:12.5px; font-weight:600; color:var(--ink); letter-spacing:.01em;}
.cfd-page .cf-modern-form input,.cfd-page .cf-modern-form textarea{
  font-family:"Plus Jakarta Sans",sans-serif; font-size:14.5px; color:var(--ink); width:100%;
  padding:12px 14px; border:1.5px solid var(--line-2); border-radius:13px; background:#fff; transition:border-color .2s, box-shadow .2s; outline:none;}
.cfd-page .cf-modern-form input::placeholder,.cfd-page .cf-modern-form textarea::placeholder{color:#a9bcbe;}
.cfd-page .cf-modern-form input:focus,.cfd-page .cf-modern-form textarea:focus{border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,183,197,.14);}
.cfd-page .cf-modern-form textarea{resize:vertical; min-height:108px;}
.cfd-page .cf-modern-form .cf-submit{margin-top:4px; font-family:"Sora",sans-serif; font-weight:600; font-size:15px; color:#fff; padding:14px 24px; border:0; border-radius:100px; cursor:pointer; background:linear-gradient(135deg,var(--teal),var(--teal-deep)); box-shadow:0 16px 30px -12px rgba(0,152,163,.7), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .25s, box-shadow .25s;}
.cfd-page .cf-modern-form .cf-submit:hover{transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(0,152,163,.85);}
.cfd-page .cf-modern-form .cf-status{font-size:13.5px; font-weight:600; min-height:0;}
.cfd-page .cf-modern-form .cf-status:not(:empty){padding:10px 14px; border-radius:12px; background:rgba(0,183,197,.10); color:var(--teal-dark);}

/* services side-nav */
.cfd-svnav h3{font-size:17px; margin-bottom:14px;}
.cfd-svnav ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px;}
.cfd-svnav li a{display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:12px; text-decoration:none; color:var(--slate); font-size:14px; font-weight:500; transition:background .2s,color .2s,transform .2s;}
.cfd-svnav li a::before{content:""; width:6px;height:6px;border-radius:50%; background:var(--line-2); flex:0 0 auto; transition:background .2s, transform .2s;}
.cfd-svnav li a:hover{background:rgba(0,183,197,.08); color:var(--teal-dark); transform:translateX(3px);}
.cfd-svnav li a:hover::before{background:var(--teal);}
.cfd-svnav li.is-active a{background:linear-gradient(135deg,rgba(0,183,197,.14),rgba(0,152,163,.07)); color:var(--ink); font-weight:700;}
.cfd-svnav li.is-active a::before{background:var(--teal); transform:scale(1.3);}

/* contact info cards */
.cfd-info-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.cfd-info{display:flex; gap:15px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px 22px; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s;}
.cfd-info:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.cfd-info .ci{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto; background:linear-gradient(135deg,rgba(0,183,197,.16),rgba(0,152,163,.09)); color:var(--teal-deep);}
.cfd-info .ci svg{width:24px;height:24px;}
.cfd-info .lbl{font-family:"Sora",sans-serif; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:6px;}
.cfd-info .val{font-size:15.5px; color:var(--ink); font-weight:500; line-height:1.5;}
.cfd-info .val a{color:var(--ink); text-decoration:none;} .cfd-info .val a:hover{color:var(--teal-deep);}
.cfd-info .val small{display:block; color:var(--muted); font-size:13px; font-weight:400; margin-top:3px;}

/* map frame */
.cfd-map-frame{margin-top:6px; border-radius:24px; overflow:hidden; border:6px solid #fff; box-shadow:var(--shadow); position:relative;}
.cfd-map-frame .cdfa-map-wrap{border-radius:0 !important; box-shadow:none !important; height:460px !important;}

/* contact page: left column stretches to the form's height so the map fills
   the space instead of leaving a gap; Office Hours card anchors the bottom */
.cfd-contact-left{align-self:stretch; display:flex; flex-direction:column;}
.cfd-contact-left .cfd-map-frame{flex:1 1 auto; min-height:440px; margin-top:0;}
/* absolute-fill the map so it inherits the flex-sized frame height (percentage
   heights collapse against a flex parent, so position it instead) */
.cfd-contact-left .cfd-map-frame .cdfa-map-wrap{position:absolute !important; inset:0; width:auto !important; height:auto !important;}
.cfd-contact-left .cfd-map-cap{margin:14px 4px 0; font-size:13.5px; color:var(--muted); text-align:center;}
.cfd-hours-card{margin-top:18px;}
.cfd-hours-rows{font-size:14.5px; color:var(--slate); line-height:2;}
.cfd-hours-row{display:flex; justify-content:space-between; gap:16px;}
.cfd-hours-row b{color:var(--ink); font-weight:700;}
.cfd-hours-call{margin-top:18px; width:100%; justify-content:center;}
.cfd-contact-aside{align-self:start;}

/* related services */
.cfd-related{padding:14px 0 64px;}
.cfd-related-head{text-align:center; max-width:620px; margin:0 auto 40px;}
.cfd-related-head h2{font-size:clamp(26px,3.2vw,40px); margin:14px 0 10px; font-weight:800;}
.cfd-related-head p{font-size:16px;color:var(--slate);}
.cfd-related-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.cfd-rcard{display:flex; flex-direction:column; gap:12px; padding:24px 22px; background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-sm); text-decoration:none; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;}
.cfd-rcard:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-2);}
.cfd-rcard .ri{width:48px;height:48px;border-radius:14px;display:grid;place-items:center; background:linear-gradient(135deg,rgba(0,183,197,.15),rgba(0,152,163,.08)); color:var(--teal-deep); transition:background .3s,color .3s;}
.cfd-rcard:hover .ri{background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#fff;}
.cfd-rcard .ri svg{width:24px;height:24px;}
.cfd-rcard b{font-family:"Sora",sans-serif; color:var(--ink); font-size:15.5px; line-height:1.25;}
.cfd-rcard .go{margin-top:auto; font-family:"Sora";font-size:13px; font-weight:600; color:var(--teal-deep); display:inline-flex; align-items:center; gap:6px;}
.cfd-rcard .go svg{width:15px;height:15px; transition:transform .3s;}
.cfd-rcard:hover .go svg{transform:translateX(4px);}

/* CTA band */
.cfd-cta{padding:0 0 96px;}
.cfd-cta-inner{position:relative; overflow:hidden; border-radius:34px; padding:60px 56px; text-align:center; background:linear-gradient(135deg,#f4fbfb,#e6f6f6); border:1px solid var(--line); box-shadow:var(--shadow);}
.cfd-cta-inner::before{content:""; position:absolute; width:420px;height:420px; right:-120px; top:-160px; border-radius:50%; background:radial-gradient(circle,rgba(0,183,197,.30),transparent 70%);}
.cfd-cta-inner::after{content:""; position:absolute; width:360px;height:360px; left:-130px; bottom:-180px; border-radius:50%; background:radial-gradient(circle,rgba(0,152,163,.22),transparent 70%);}
.cfd-cta-inner h2{position:relative; z-index:2; font-size:clamp(26px,3.4vw,44px); font-weight:800; margin-bottom:13px;}
.cfd-cta-inner p{position:relative; z-index:2; font-size:16.5px; color:var(--slate); max-width:520px; margin:0 auto 28px;}
.cfd-cta-actions{position:relative; z-index:2; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.cfd-cta-phone{position:relative; z-index:2; margin-top:22px; font-family:"Sora",sans-serif; color:var(--muted); font-size:14px;}
.cfd-cta-phone a{color:var(--teal-dark); font-weight:700; text-decoration:none;}

/* ============================================================
   Flagship sections (used by the enhanced Invisalign page)
   ============================================================ */
.cfd-sec{padding:64px 0;}
.cfd-sec-head{text-align:center; max-width:680px; margin:0 auto 46px;}
.cfd-sec-head h2{font-size:clamp(28px,3.6vw,44px); margin:16px 0 12px; font-weight:800;}
.cfd-sec-head p{font-size:17px; color:var(--slate);}

/* benefits grid */
.cfd-benefits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.cfd-benefit{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:30px 26px; box-shadow:var(--shadow-sm); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;}
.cfd-benefit:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.cfd-benefit .bi{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px; background:linear-gradient(135deg,rgba(0,183,197,.16),rgba(0,152,163,.09)); color:var(--teal-deep);}
.cfd-benefit:hover .bi{background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#fff;}
.cfd-benefit .bi svg{width:27px;height:27px;}
.cfd-benefit h4{font-size:18px; margin-bottom:9px;}
.cfd-benefit p{font-size:14.5px; color:var(--slate); line-height:1.65;}

/* how it works — steps */
.cfd-steps{position:relative;}
.cfd-steps-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative;}
.cfd-steps-row::before{content:""; position:absolute; top:34px; left:12%; right:12%; height:2px; background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 16px); z-index:0;}
.cfd-step{position:relative; z-index:1; text-align:center;}
.cfd-step .node{width:68px;height:68px;border-radius:20px;margin:0 auto 20px;display:grid;place-items:center; font-family:"Sora",sans-serif; font-weight:800; font-size:24px; color:#fff; background:linear-gradient(135deg,var(--teal),var(--teal-deep)); box-shadow:0 16px 30px -12px rgba(0,152,163,.7), inset 0 1px 0 rgba(255,255,255,.3); border:4px solid var(--bg);}
.cfd-step h4{font-size:17px; margin-bottom:8px;}
.cfd-step p{font-size:14px; color:var(--slate); line-height:1.6; max-width:230px; margin:0 auto;}

/* comparison */
.cfd-compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:900px; margin:0 auto;}
.cfd-compare-card{border-radius:24px; padding:30px 28px; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow-sm);}
.cfd-compare-card.win{background:linear-gradient(160deg,#0a6a72,#0098a3); border:0; box-shadow:var(--shadow-lg); color:#fff;}
.cfd-compare-card .ch{display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.cfd-compare-card.win .ch{border-bottom-color:rgba(255,255,255,.22);}
.cfd-compare-card .ch h3{font-size:20px;}
.cfd-compare-card.win .ch h3{color:#fff;}
.cfd-compare-card .ch .tag{margin-left:auto; font-family:"Sora";font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; padding:5px 11px;border-radius:100px; background:rgba(0,183,197,.12); color:var(--teal-deep);}
.cfd-compare-card.win .ch .tag{background:rgba(255,255,255,.2); color:#fff;}
.cfd-compare-card ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px;}
.cfd-compare-card li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.5;}
.cfd-compare-card li svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px;}
.cfd-compare-card.win li{color:rgba(255,255,255,.95);}
.cfd-compare-card.win li svg{color:#bff3f6;}
.cfd-compare-card li svg.x{color:#c2725f;}

/* feature split (image + text) */
.cfd-feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center;}
.cfd-feature-fig{position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); border:6px solid #fff;}
.cfd-feature-fig img{display:block; width:100%; height:440px; object-fit:cover;}
.cfd-feature-fig .ring{position:absolute; inset:auto -20px -20px auto; width:110px;height:110px;border:2px dashed var(--line-2);border-radius:50%;z-index:-1;}
.cfd-feature h2{font-size:clamp(26px,3.2vw,40px); margin:16px 0 18px; font-weight:800;}
.cfd-feature .lead{font-size:16.5px; color:var(--slate); margin-bottom:20px;}
.cfd-feature ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px;}
.cfd-feature ul li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--slate);}
.cfd-feature ul li svg{width:22px;height:22px;color:var(--teal-deep);flex:0 0 auto;margin-top:1px;}

/* FAQ */
.cfd-faq{max-width:820px; margin:0 auto;}
.cfd-faq details{background:var(--card); border:1px solid var(--line); border-radius:16px; margin-bottom:13px; box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .3s;}
.cfd-faq details[open]{box-shadow:var(--shadow);}
.cfd-faq summary{list-style:none; cursor:pointer; padding:20px 24px; font-family:"Sora",sans-serif; font-weight:600; font-size:16.5px; color:var(--ink); display:flex; align-items:center; gap:14px;}
.cfd-faq summary::-webkit-details-marker{display:none;}
.cfd-faq summary .q{margin-left:auto; width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto; background:rgba(0,183,197,.12); color:var(--teal-deep); transition:transform .3s, background .3s;}
.cfd-faq summary .q svg{width:16px;height:16px;}
.cfd-faq details[open] summary .q{transform:rotate(45deg); background:var(--teal); color:#fff;}
.cfd-faq .ans{padding:0 24px 22px; font-size:15px; color:var(--slate); line-height:1.7;}

/* responsive for flagship sections */
@media (max-width:920px){
  .cfd-benefits-grid{grid-template-columns:1fr 1fr;}
  .cfd-steps-row{grid-template-columns:1fr 1fr; gap:34px 20px;}
  .cfd-steps-row::before{display:none;}
  .cfd-feature-grid{grid-template-columns:1fr; gap:36px;}
  .cfd-feature-fig{order:-1; max-width:520px; margin:0 auto;}
}
@media (max-width:560px){
  .cfd-benefits-grid{grid-template-columns:1fr;}
  .cfd-steps-row{grid-template-columns:1fr;}
  .cfd-compare-grid{grid-template-columns:1fr;}
}

/* ===== responsive ===== */
@media (max-width:1040px){ .cfd-related-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:920px){
  .cfd-phero-grid{grid-template-columns:1fr; gap:38px;}
  .cfd-phero-art{order:-1; max-width:520px; margin:0 auto;}
  .cfd-layout{grid-template-columns:1fr; gap:34px;}
  .cfd-aside{position:static; max-width:560px;}
  .cfd-info-grid{grid-template-columns:1fr 1fr;}
  .cfd-contact-left{align-self:auto; max-width:560px;}
  .cfd-contact-left .cfd-map-frame{flex:0 0 auto; min-height:380px;}
}
@media (max-width:640px){
  .cfd-phero{padding:92px 0 44px;}
  .cfd-related-grid{grid-template-columns:1fr 1fr; gap:14px;}
  .cfd-info-grid{grid-template-columns:1fr;}
  .cfd-page .cf-modern-form .cf-row{grid-template-columns:1fr;}
  .cfd-cta-inner{padding:40px 24px;}
  .cfd-map-frame{border-width:4px;}
}