*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:var(--surface-page);
font-family:var(--font-body);
color:var(--text-primary);
}
a{color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
@media (max-width:640px){.wrap{padding:0 20px}}

/* ---- type helpers ---- */
.display{
font-family:var(--font-display);
font-weight:var(--fw-display);
letter-spacing:var(--ls-display);
line-height:var(--lh-tight);
color:var(--ink-900);
margin:0;
}
.display-lg{font-size:var(--fs-display-lg)}
.display-md{font-size:var(--fs-display-md)}
.display-sm{font-size:var(--fs-display-sm)}
.heading{font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);font-size:var(--fs-heading);color:var(--ink-900);margin:0}
.body-lg{font-size:var(--fs-body-lg);line-height:var(--lh-normal)}
.body-copy{font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--text-secondary)}
.caption{font-size:var(--fs-caption);color:var(--text-secondary)}

@media (max-width:640px){
.display-lg{font-size:44px}
.display-md{font-size:34px}
.display-sm{font-size:28px}
}

/* ---- HighlightedText ---- */
.highlight{background:var(--mint-200);padding:0 8px}

/* ---- Button ---- */
.btn{
font-family:var(--font-body);
font-weight:var(--fw-medium);
border:none;
border-radius:var(--radius-pill);
cursor:pointer;
display:inline-flex;
align-items:center;
gap:8px;
text-decoration:none;
transition:background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn:active{transform:scale(.97)}
.btn-md{padding:14px 26px;font-size:var(--fs-body)}
.btn-lg{padding:18px 34px;font-size:var(--fs-body-lg)}
.btn-sm{padding:10px 20px;font-size:var(--fs-body-sm)}
.btn-primary{background:var(--ink-900);color:var(--text-inverse)}
.btn-primary:hover{background:var(--gray-800)}
.btn-secondary{background:var(--mint);color:var(--ink-900)}
.btn-secondary:hover{background:var(--mint-hover)}
.btn-outline{background:transparent;color:var(--ink-900);border:1.5px solid var(--border-subtle)}
.btn-outline:hover{background:var(--surface-card)}
.btn-ghost{background:transparent;color:var(--ink-900)}
.btn-ghost:hover{background:var(--surface-card)}

/* ---- Pill ---- */
.pill{
font-family:var(--font-body);
font-weight:var(--fw-medium);
font-size:var(--fs-body-sm);
padding:10px 20px;
border-radius:var(--radius-pill);
backdrop-filter:blur(6px);
display:inline-flex;
align-items:center;
gap:8px;
}
.pill-dark{background:rgba(29,25,42,.55);color:#fff}
.pill-light{background:rgba(255,255,255,.7);color:var(--ink-900)}
.pill-solid{background:var(--ink-900);color:#fff}

/* ---- IconButton ---- */
.icon-btn{
width:56px;height:56px;
border-radius:var(--radius-lg);
border:none;
display:flex;align-items:center;justify-content:center;
font-size:24px;font-weight:700;font-family:var(--font-body);
cursor:pointer;
box-shadow:var(--shadow-float);
transition:transform var(--dur-fast) var(--ease-standard);
text-decoration:none;
}
.icon-btn:active{transform:scale(.94)}
.icon-mint{background:var(--mint);color:var(--ink-900)}
.icon-ink{background:var(--ink-900);color:#fff}
.icon-light{background:#fff;color:var(--ink-900)}

/* ---- StatBadge ---- */
.stat{display:flex;align-items:baseline;gap:10px}
.stat-value{font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-heading);color:var(--ink-900)}
.stat-label{font-family:var(--font-body);font-weight:var(--fw-regular);font-size:16px;color:var(--text-secondary)}

/* ---- PhotoCard-style panel (used without real photography) ---- */
.panel{
position:relative;
border-radius:var(--radius-xl);
overflow:hidden;
display:flex;
align-items:flex-end;
justify-content:center;
padding:var(--space-5);
}
.panel-caption{
position:relative;z-index:1;
font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--fs-body-sm);
padding:10px 20px;border-radius:var(--radius-pill);
background:rgba(29,25,42,.55);color:#fff;backdrop-filter:blur(6px);
}

/* ---- NavBar ---- */
.navbar{
display:flex;align-items:center;gap:40px;
padding:20px 40px;border-bottom:1px solid var(--border-subtle);
}
.navbar .wordmark{display:flex;align-items:center;text-decoration:none}
.navbar .wordmark img{height:52px;width:auto;display:block}
.navbar nav{display:flex;gap:32px}
.navbar .btn{margin-left:auto}
.navbar nav a{color:var(--text-secondary);text-decoration:none;font-size:var(--fs-body-sm);font-weight:var(--fw-medium)}
.navbar nav a:hover{color:var(--ink-900)}
@media (max-width:720px){.navbar nav{display:none}}

/* ---- sections ---- */
section{padding:var(--space-9) 40px}
@media (max-width:640px){section{padding:var(--space-7) 20px}}

.hero-panel{
border-radius:var(--radius-xl);
overflow:hidden;
min-height:520px;
background:var(--ink-900);
display:flex;align-items:stretch;justify-content:space-between;
}
@media (max-width:640px){.hero-panel{min-height:auto}}

.hero-copy{padding:56px;display:flex;flex-direction:column;justify-content:center}
@media (max-width:640px){.hero-copy{padding:32px}}

.hero-photo{flex-shrink:0;width:44%;position:relative}
@media (max-width:860px){.hero-photo{display:none}}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(29,25,42,.55),rgba(29,25,42,0) 30%);
}

/* ---- abstract marks (used where no fitting photo exists) ---- */
.panel-tinted{background:linear-gradient(160deg,var(--mint-100),var(--mist-100) 75%)}
.panel-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.panel-mark svg{width:56%;height:auto;max-width:180px}

/* ---- animated service icons (03 AI visibility, 04 AI engagement) ---- */
.icon-radar-ring{transform-box:fill-box;transform-origin:center;animation:icon-radar-spin 6s linear infinite}
.icon-radar-signal{transform-box:fill-box;transform-origin:center;animation:icon-radar-ping 2.2s ease-out infinite}
.icon-chat-dot{transform-box:fill-box;transform-origin:center;animation:icon-chat-bounce 1.2s ease-in-out infinite}

@keyframes icon-radar-spin{to{transform:rotate(360deg)}}
@keyframes icon-radar-ping{
0%{transform:scale(1);opacity:.6}
70%{transform:scale(1.8);opacity:0}
100%{transform:scale(1.8);opacity:0}
}
@keyframes icon-chat-bounce{
0%,60%,100%{transform:translateY(0)}
30%{transform:translateY(-6px)}
}
@media (prefers-reduced-motion: reduce){
.icon-radar-ring,.icon-radar-signal,.icon-chat-dot{animation:none}
}

/* ---- panel/card photography ---- */
.panel-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.offer-visual{position:relative}
.offer-visual .offer-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.offer-visual.has-photo::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(180deg,rgba(29,25,42,0) 45%,rgba(29,25,42,.6));
}
.offer-visual .step-num{position:absolute;top:24px;left:24px;font-size:40px;z-index:1}
.offer-visual.has-photo .step-num{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}

.offer-slot:not(.is-active) .icon-radar-ring,
.offer-slot:not(.is-active) .icon-radar-signal,
.offer-slot:not(.is-active) .icon-chat-dot{animation-play-state:paused}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media (max-width:860px){.grid-2{grid-template-columns:1fr}}

.grid-stats{display:flex;gap:48px;flex-wrap:wrap}

/* ---- Scroll-spy services (Klarna "everyday money app" pattern):
   the text list is one sticky block that never moves; the cards column is a
   sequence of tall slots, each holding a card sticky-pinned at the same top
   offset, so each new card physically slides up and covers the previous one
   as its slot scrolls into range. ---- */
.offer-scroll{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media (max-width:860px){.offer-scroll{grid-template-columns:1fr;display:flex;flex-direction:column}}

/* Mobile: interleave each card with its own heading/paragraph (card on top,
   text below) instead of running all five cards followed by all five text
   blocks. display:contents lifts .offer-slot/.offer-item straight into the
   .offer-scroll flex container so `order` can pair them up by index. */
@media (max-width:860px){
.offer-cards,.offer-text-sticky{display:contents}
.offer-slot[data-index="01"]{order:1}
.offer-item[data-index="01"]{order:2}
.offer-slot[data-index="02"]{order:3}
.offer-item[data-index="02"]{order:4}
.offer-slot[data-index="03"]{order:5}
.offer-item[data-index="03"]{order:6}
.offer-slot[data-index="04"]{order:7}
.offer-item[data-index="04"]{order:8}
.offer-slot[data-index="05"]{order:9}
.offer-item[data-index="05"]{order:10}
}

.offer-cards{position:relative}
.offer-slot{min-height:120vh;display:flex;align-items:flex-start}
@media (max-width:860px){.offer-slot{min-height:0;margin-bottom:32px}}
.offer-card-sticky{position:sticky;top:20vh;max-width:420px;width:100%;transform-origin:50% 0%;will-change:transform,opacity}
@media (max-width:860px){.offer-card-sticky{position:static;transform:none !important;opacity:1 !important}}

.offer-text-sticky{position:sticky;top:20vh;max-width:460px}
@media (max-width:860px){.offer-text-sticky{position:static;max-width:none}}
.offer-item{
padding:20px 0;
border-top:1px solid var(--border-subtle);
}
@media (max-width:860px){.offer-item{padding:16px 0}}
.offer-item[data-index="01"]{border-top:none}
.offer-item h3{
font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);
color:var(--muted-400);font-size:var(--fs-heading);margin:0;
transition:color var(--dur-normal) var(--ease-standard), font-size var(--dur-normal) var(--ease-standard);
}
.offer-item-trigger{
background:none;border:none;padding:0;margin:0;
font:inherit;color:inherit;letter-spacing:inherit;
text-align:left;cursor:pointer;
}
.offer-item-trigger:hover{color:var(--ink-900)}
.offer-item p{
color:var(--text-secondary);max-width:460px;
opacity:0;max-height:0;overflow:hidden;margin:0;
transition:opacity var(--dur-normal) var(--ease-standard), max-height var(--dur-normal) var(--ease-standard), margin var(--dur-normal) var(--ease-standard);
}
.offer-item.is-active h3{color:var(--ink-900);font-size:var(--fs-display-sm)}
.offer-item.is-active p{opacity:1;max-height:240px;margin-top:16px}
.offer-item.is-active p + p{margin-top:8px}

/* On mobile each heading/paragraph pair sits fixed directly under its own
   card rather than being revealed by scroll-spy, so always show it expanded
   instead of only when JS marks it "active". */
@media (max-width:860px){
.offer-item h3{color:var(--ink-900);font-size:var(--fs-display-sm)}
.offer-item p{opacity:1;max-height:none;margin-top:16px}
.offer-item p + p{margin-top:8px}
}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media (max-width:720px){.steps{grid-template-columns:1fr}}
.step-num{font-family:var(--font-display);font-weight:var(--fw-display);color:var(--mint-600);font-size:var(--fs-heading);margin-bottom:8px}

.cta-panel{
background:var(--mint-500);
border-radius:var(--radius-xl);
padding:56px;
display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}

/* ---- Footer ---- */
footer{
background:var(--ink-900);color:#fff;
padding:64px 40px 32px;font-family:var(--font-body);
}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:12px;min-width:140px}
.footer-col .title{font-weight:var(--fw-bold);font-size:var(--fs-body-sm)}
.footer-col a{color:rgba(255,255,255,.65);font-size:var(--fs-caption);text-decoration:none}
.footer-col a:hover{color:#fff}
.footer-wordmark{
text-align:right;user-select:none;
}
.footer-wordmark img{width:clamp(200px,32vw,460px);height:auto}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:24px;font-size:var(--fs-caption);color:rgba(255,255,255,.5)}

/* ---- Eyebrow label ---- */
.eyebrow{display:block;font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--mint-700);margin-bottom:12px}

/* ---- Pricing panel (dentists page offer) ---- */
.pricing-panel{background:var(--ink-900);border-radius:var(--radius-xl);padding:56px;display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center}
@media (max-width:860px){.pricing-panel{grid-template-columns:1fr}}
@media (max-width:640px){.pricing-panel{padding:32px}}
.pricing-price{font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);font-size:var(--fs-display-md);color:#fff;margin:0}
.pricing-price span{font-family:var(--font-body);font-weight:var(--fw-regular);font-size:var(--fs-body-lg);color:var(--mist-200)}
.pricing-terms{color:var(--mist-200);font-size:var(--fs-body-sm);margin-top:8px}
.pricing-list{list-style:none;padding:0;margin:28px 0;display:flex;flex-direction:column;gap:14px;max-width:460px}
.pricing-list li{display:flex;gap:10px;color:var(--mist-200);font-size:var(--fs-body);line-height:var(--lh-normal)}
.pricing-list li::before{content:"—";color:var(--mint-500);flex-shrink:0}
.pricing-recap{display:flex;flex-direction:column;gap:32px;padding-left:56px;border-left:1px solid rgba(255,255,255,.14)}
@media (max-width:860px){.pricing-recap{padding-left:0;border-left:none;padding-top:8px;border-top:1px solid rgba(255,255,255,.14)}}
.pricing-recap .stat-value{color:#fff}
.pricing-recap .stat-label{color:var(--mist-200)}

/* ---- About card (dentists page) ---- */
.about-card{border-radius:var(--radius-xl);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.about-card-figure{font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);font-size:var(--fs-display-sm);color:var(--ink-900);margin:0}
.about-card-figure span{font-family:var(--font-body);font-weight:var(--fw-regular);font-size:var(--fs-body);color:var(--text-secondary);margin-left:10px;letter-spacing:normal}
.about-card-divider{border:none;border-top:1px solid var(--mist-300);margin:0}
.about-card-stats{display:flex;flex-direction:column;gap:20px}

/* ---- FAQ accordion (native <details>, no JS) ---- */
.faq-list{display:flex;flex-direction:column;max-width:720px}
.faq-item{border-top:1px solid var(--border-subtle);padding:20px 0}
.faq-item:last-child{border-bottom:1px solid var(--border-subtle)}
.faq-item summary{
font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);
font-size:var(--fs-heading);color:var(--ink-900);cursor:pointer;list-style:none;
display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:28px;color:var(--mint-600);flex-shrink:0}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin-top:12px}

/* ---- Screenshot toggle (raw-proof disclosure under evidence query cards) ---- */
.screenshot-toggle{margin-top:var(--space-3)}
.screenshot-toggle summary{
font-family:var(--font-body);font-size:var(--fs-caption);font-weight:var(--fw-medium);
color:var(--mint-700);cursor:pointer;list-style:none;text-decoration:underline;
}
.screenshot-toggle summary::-webkit-details-marker{display:none}
.screenshot-toggle img{margin-top:var(--space-3);width:100%;height:auto;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);display:block}

/* ---- Video card (driving-schools page: hero demo embed) ---- */
.video-card{background:var(--surface-card);border-radius:var(--radius-lg);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);max-width:360px}

/* ---- Query card (dentists page: hero preview + evidence cards) ---- */
.query-card{background:var(--surface-card);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.query-card-engine{display:flex;align-items:baseline;gap:8px}
.query-input{display:inline-flex;align-items:center;gap:8px;background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:10px 18px;font-size:var(--fs-body-sm);color:var(--text-secondary);font-style:italic}
.query-input svg{flex-shrink:0}

.result-list{display:flex;flex-direction:column}
.result-row{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--border-subtle)}
.result-row:first-child{border-top:none}
.result-rank{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--mist-100);color:var(--text-secondary);font-size:var(--fs-caption);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center}
.result-row.is-top .result-rank{background:var(--mint-200);color:var(--ink-900)}
.result-name{font-weight:var(--fw-bold);color:var(--ink-900);font-size:var(--fs-body)}
.result-meta{color:var(--text-secondary);font-size:var(--fs-body-sm);margin-top:2px}
.result-row.is-gap{border-top-style:dashed;border-top-color:var(--mist-300)}
.result-row.is-gap .result-rank{background:transparent;border:1.5px dashed var(--mist-300);color:var(--muted-400)}
.result-row.is-gap .result-name{color:var(--text-secondary);font-weight:var(--fw-medium);font-style:italic}
.result-row.is-gap .result-meta{color:var(--muted-400);text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-caption)}