/* DafTipul STUDIO landing — page styles on top of tokens.css + base.css */
.site-header.dark{background:color-mix(in oklab,var(--pine-900) 92%,transparent);color:var(--text-on-dark)}
.site-header.dark .brand,.site-header.dark .nav-desktop a{color:var(--text-on-dark)}
.site-header.dark .brand-sub{color:var(--text-on-dark-muted)}
.site-header.dark.is-scrolled{border-block-end-color:color-mix(in oklab,var(--text-on-dark) 14%,transparent)}
.site-header.dark .burger{background:transparent;border-color:color-mix(in oklab,var(--text-on-dark) 30%,transparent)}
.site-header.dark .burger span,.site-header.dark .burger span::before,.site-header.dark .burger span::after{background:var(--text-on-dark)}
.site-header.dark .burger[aria-expanded="true"] span{background:transparent}

/* hero */
.s-hero{position:relative;overflow:hidden;padding-block:clamp(2.5rem,2rem + 4vw,6rem) clamp(3rem,2rem + 5vw,7rem);
  background:radial-gradient(60rem 30rem at 85% -10%,color-mix(in oklab,var(--pine) 55%,transparent),transparent 60%),
             radial-gradient(40rem 26rem at 0% 110%,color-mix(in oklab,var(--clay) 18%,transparent),transparent 60%),var(--pine-900)}
.s-hero::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 20c15-12 30-12 45 0s30 12 45 0 30-12 45 0' fill='none' stroke='%23FAF7F2' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/120px 40px}
.s-hero-grid{position:relative;display:grid;gap:clamp(2.5rem,2rem + 3vw,4.5rem);align-items:center}
@media (min-width:960px){.s-hero-grid{grid-template-columns:1.15fr .85fr}}
.s-hero h1{color:var(--text-on-dark);font-weight:400;max-inline-size:14ch}
.tagline{font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,1.2rem + 1.6vw,2.375rem);line-height:1.2;color:#E9B79E;margin:var(--s4) 0 var(--s5)}
.s-hero .lead{max-inline-size:36rem}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-block:var(--s6) var(--s5)}
@media (max-width:599px){.cta-row .btn{flex:1 1 100%}}
.assure{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);list-style:none;margin:0;padding:0;font-size:var(--fs-sm);color:var(--text-on-dark-muted);font-weight:600}
.assure li{display:inline-flex;align-items:center;gap:var(--s2)}
.assure li::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:var(--wa)}

/* phone mockup — live iframe of the clinic demo */
.phone-wrap{position:relative;display:grid;place-items:center;padding-block:var(--s4)}
.phone-wrap::before{content:"";position:absolute;inline-size:min(86%,360px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--sage) 45%,transparent),transparent);filter:blur(10px)}
.phone{--w:280px;--k:.6677;position:relative;inline-size:var(--w);aspect-ratio:9/19.2;border-radius:calc(var(--w)*.15);padding:calc(var(--w)*.035);background:linear-gradient(160deg,#2A3B37,#0F1F1C);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 40px 80px -20px rgba(0,0,0,.55),0 18px 30px -12px rgba(0,0,0,.4);transform:rotate(-3deg)}
.phone .screen{position:relative;inline-size:100%;block-size:100%;border-radius:calc(var(--w)*.12);overflow:hidden;background:var(--linen)}
.phone .notch{position:absolute;z-index:2;inset-block-start:calc(var(--w)*.03);inset-inline:0;margin-inline:auto;inline-size:32%;block-size:calc(var(--w)*.075);border-radius:999px;background:#0F1F1C}
.phone iframe{position:absolute;inset-block-start:0;inset-inline-start:0;border:0;inline-size:390px;block-size:calc(390px * 19.2 / 9);transform-origin:top right;transform:scale(var(--k));pointer-events:none}
@media (max-width:359px){.phone{--w:250px;--k:.5962}}
@media (min-width:960px){.phone{--w:310px;--k:.7392}}
.phone-label{position:absolute;inset-block-end:4%;inset-inline-end:0;background:var(--linen);color:var(--ink);font-weight:600;font-size:.875rem;padding:var(--s2) var(--s4);border-radius:var(--r-pill);box-shadow:var(--shadow-2);transform:rotate(2deg)}
.phone-label a{color:var(--pine);font-weight:700}

/* steps */
.s-steps{display:grid;gap:var(--s5);counter-reset:s;list-style:none;margin:0;padding:0}
@media (min-width:760px){.s-steps{grid-template-columns:repeat(3,1fr)}}
.s-steps li{background:var(--linen);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--shadow-1);position:relative}
.s-steps .n{font-family:var(--font-display);font-weight:300;font-size:3.25rem;line-height:1;color:var(--clay);display:block;margin-block-end:var(--s4)}
.s-steps h3{margin-block-end:var(--s2)}
.s-steps p{margin:0;color:var(--text-muted)}
.s-steps .when{display:inline-block;margin-block-start:var(--s4);font-size:var(--fs-sm);font-weight:700;color:var(--pine);background:var(--sage-50);border-radius:var(--r-pill);padding:var(--s1) var(--s3)}

/* before / after showcase */
.ba{display:grid;gap:var(--s5)}
@media (min-width:860px){.ba{grid-template-columns:.8fr 1.2fr;align-items:stretch}}
.ba-card{border-radius:var(--r-lg);padding:var(--s6);border:1px solid var(--line)}
.ba-before{background:var(--sand)}
.ba-after{background:var(--linen);box-shadow:var(--shadow-2);border-color:transparent}
.ba-card .lbl{display:inline-block;font-size:.8125rem;font-weight:700;border-radius:var(--r-pill);padding:2px var(--s3);margin-block-end:var(--s4)}
.ba-before .lbl{background:var(--stone);color:var(--ink-2)}
.ba-after .lbl{background:var(--pine);color:var(--linen)}
.ba ul{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s3)}
.ba li{display:flex;gap:var(--s3);align-items:baseline}
.ba-before li::before{content:"–";color:var(--text-muted)}
.ba-after li::before{content:"✓";color:var(--pine);font-weight:700}
.ba-before li{color:var(--text-muted)}
.listing{background:var(--linen);border-radius:var(--r-md);padding:var(--s4);display:flex;gap:var(--s3);align-items:center;font-size:var(--fs-sm);color:var(--text-muted);border:1px dashed var(--stone)}
.listing i{flex:none;inline-size:44px;block-size:44px;border-radius:50%;background:var(--stone)}
.listing b{display:block;color:var(--ink-2)}

/* what you get */
.tiles{display:grid;gap:var(--s4)}
@media (min-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--linen);border-radius:var(--r-lg);padding:var(--s6);border:1px solid var(--line)}
.bg-alt .tile{border-color:transparent;box-shadow:var(--shadow-1)}
.tile .ic{display:grid;place-items:center;inline-size:48px;block-size:48px;border-radius:14px;background:var(--sage-50);color:var(--pine);margin-block-end:var(--s4)}
.tile .ic svg{inline-size:24px;block-size:24px}
.tile h3{margin-block-end:var(--s2)}
.tile p{margin:0;color:var(--text-muted)}

/* pricing */
.price-wrap{display:grid;gap:var(--s6);align-items:start}
@media (min-width:960px){.price-wrap{grid-template-columns:1.1fr .9fr}}
.plan{position:relative;background:var(--linen);border-radius:var(--r-xl, 28px);padding:clamp(1.5rem,1rem + 2vw,2.75rem);box-shadow:var(--shadow-2);border:1px solid color-mix(in oklab,var(--pine) 18%,transparent)}
.draft{position:absolute;inset-block-start:var(--s5);inset-inline-end:var(--s5);background:color-mix(in oklab,var(--clay) 14%,transparent);color:var(--clay-text);font-weight:700;font-size:.8125rem;border-radius:var(--r-pill);padding:2px var(--s3);border:1px dashed var(--clay)}
.plan h3{font-family:var(--font-display);font-weight:400;font-size:1.625rem;margin-block-end:var(--s5)}
.amount{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-block-end:var(--s2)}
.amount .big{font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,2.4rem + 3vw,4.5rem);line-height:1;color:var(--ink)}
.amount .unit{font-weight:600;color:var(--text-muted)}
.monthly{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;padding-block:var(--s4);margin-block:var(--s4) var(--s5);border-block:1px solid var(--line);font-weight:600}
.monthly .mid{font-family:var(--font-display);font-weight:400;font-size:1.75rem;color:var(--pine)}
.plan ul{list-style:none;margin:0 0 var(--s6);padding:0;display:grid;gap:var(--s3)}
.plan li{display:flex;gap:var(--s3);align-items:baseline}
.plan li::before{content:"✓";color:var(--pine);font-weight:700}
.plan .fine{font-size:var(--fs-sm);color:var(--text-muted);margin:var(--s4) 0 0}
.market{background:var(--sand);border-radius:var(--r-lg);padding:var(--s6)}
.market h3{margin-block-end:var(--s4)}
.market dl{margin:0;display:grid;gap:var(--s3)}
.market dl div{display:flex;justify-content:space-between;gap:var(--s4);padding-block-end:var(--s3);border-block-end:1px dotted var(--stone)}
.market dt{color:var(--ink-2)}
.market dd{margin:0;font-weight:700;white-space:nowrap}
.market .us dt,.market .us dd{color:var(--pine)}
.market .src{font-size:.8125rem;color:var(--text-muted);margin:var(--s4) 0 0}

/* why + compliance */
.why{display:grid;gap:var(--s6)}
@media (min-width:860px){.why{grid-template-columns:repeat(3,1fr)}}
.why h3{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin-block-end:var(--s3)}
.why p{color:var(--text-muted);margin:0}
.why > div{border-block-start:2px solid var(--pine);padding-block-start:var(--s5)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-block-start:var(--s7)}
.chip{display:inline-flex;align-items:center;gap:var(--s2);background:var(--sage-50);color:var(--pine-700);font-weight:600;font-size:var(--fs-sm);border-radius:var(--r-pill);padding:var(--s2) var(--s4)}
.chip::before{content:"✓";font-weight:700}

.closing{text-align:center}
.closing h2{max-inline-size:22ch;margin-inline:auto}
.closing .lead{margin-inline:auto}
.closing .cta-row{justify-content:center}
.on-dark .phone-label a{color:var(--pine)}