/* ==========================================================================
   BABY TRACKER — WEBSITE STYLESHEET
   --------------------------------------------------------------------------
   Taken verbatim from the approved single-file prototype (index.html), with
   three deliberate changes, all of them consequences of the prototype's one
   scrolling document becoming separate pages:

   1. `.page{display:none}` and `.page.is-active` are GONE, with the `pageIn`
      keyframes that went with them. In the prototype every page lived in the
      same document and the router showed one at a time. Each page is now its
      own request, so that rule would have hidden every page's entire content.

   2. `scroll-margin-top` is set on the in-page anchor targets. The prototype
      measured the sticky header in JavaScript and scrolled by hand; the
      browser does the same job from CSS, so the anchors keep working with
      scripting off.

   3. Nothing else. The tokens, type scale, components and page rules are
      unchanged, because the design is approved and this file is not the place
      to improve it.

   Sections: 1 Tokens & base  2 Components  3 Page-specific  4 Phone mockups
   ========================================================================== */

/* ==========================================================================
   1. TOKENS & BASE — taken from the Baby Tracker app foundations
   ========================================================================== */
:root{
  --orange:#F26027; --orange-text:#BF4C1F; --link:#A64219;
  --bg:#FAF7F1; --card:#FFFFFF; --raised:#F3EEE4; --border:#E9E2D6; --border-2:#DDD5C6; --hair:#EFE9DD;
  --ink:#1C1915; --ink-2:#5F584C; --ink-3:#766F62;
  --n-bg:#0F0E0C; --n-card:#1A1815; --n-raised:#211E1A; --n-border:#2F2B25; --n-ink:#F4F0E9; --n-ink-2:#ADA69A;
  --peri:#4B5BC4; --peri-ink:#2E3A8C; --sage:#137A5C; --sage-ink:#0F684E; --rose:#9C3F72;
  --caution:#B4442C; --caution-ink:#A03D27;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gutter:clamp(20px, 5vw, 80px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}
img,svg{display:block}
/*
 * `textarea` and `select` belong here too. Browsers give a textarea a
 * monospace face and a select the system UI face of their own accord, so
 * without this the admin form's long text boxes were typewriter text in the
 * middle of a page set in Manrope. The prototype had no textarea, which is why
 * the rule only ever named two elements.
 */
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1280px;margin:0 auto}
.section{padding:clamp(72px,9vw,128px) var(--gutter)}
.section--white{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section--raised{background:var(--raised);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section--night{background:var(--n-bg);color:var(--n-ink)}

/*
 * Change 3 — the sticky header's height, given to the browser instead of to a
 * scroll handler. 84px is the bar's min-height; the extra clears its border.
 */
[id]{scroll-margin-top:100px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Type */
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--link)}
.section--night .eyebrow{color:var(--orange)}
.display{font-family:var(--serif);font-weight:600;font-size:clamp(46px,6.2vw,92px);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.h2{font-family:var(--serif);font-weight:600;font-size:clamp(36px,4.4vw,62px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.02em;line-height:1.15}
.accent{font-style:italic;font-weight:500;color:var(--orange-text)}
.section--night .accent{color:var(--orange)}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;font-weight:500;color:var(--ink-2);text-wrap:pretty}
.body{font-size:16px;line-height:1.6;font-weight:500;color:var(--ink-2)}
.muted-night{color:var(--n-ink-2)}
.small{font-size:13px;line-height:1.6;font-weight:500;color:var(--ink-2)}
.tlink{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;font-size:inherit}
.tlink:hover{color:#7E3112}
.section--night .tlink,.on-night .tlink{color:var(--orange)}

/* ==========================================================================
   2. COMPONENTS
   ========================================================================== */
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 24px;border-radius:999px;border:1px solid transparent;font-size:16px;font-weight:800;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s,border-color .18s,color .18s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn[disabled]{cursor:not-allowed;transform:none}
.btn-primary{background:var(--orange);color:var(--ink);box-shadow:0 12px 28px -14px rgba(191,76,31,.9)}
.btn-primary:hover{box-shadow:0 16px 32px -14px rgba(191,76,31,1);background:#F46D37}
.btn-secondary{background:#fff;border-color:var(--border-2);color:var(--ink);font-weight:700}
.btn-secondary:hover{border-color:#C9BFAE;box-shadow:0 8px 20px -14px rgba(28,25,21,.4)}
.btn-outline{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--bg)}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-ink:hover{background:#2E2A24}
.btn-danger{background:var(--caution);color:#fff}
.btn-danger:hover{background:#9E3A24}
.btn-danger-soft{background:rgba(180,68,44,.08);border-color:rgba(180,68,44,.5);color:var(--caution-ink)}
.btn-danger-soft:hover{background:rgba(180,68,44,.14)}
.btn-locked,.btn-locked:hover{background:var(--border);color:var(--ink-3);box-shadow:none;border-color:transparent}
.btn-sm{height:44px;padding:0 18px;font-size:14px}
.btn-block{width:100%}
.btn .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;display:none}
.btn.is-busy .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Chips, pills, notices */
.chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:var(--raised);font-size:13px;font-weight:700}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:800;border:1px solid transparent}
.pill--active{background:rgba(19,122,92,.12);color:var(--sage-ink)}
.pill--active .dot{width:8px;height:8px;border-radius:50%;background:var(--sage)}
.pill--deactivated{background:var(--raised);border-color:var(--border-2);color:var(--ink-2)}
.pill--deactivated .dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--ink-3)}
.pill--pending{background:rgba(180,68,44,.10);color:var(--caution-ink)}
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;font-size:14px;line-height:1.5;font-weight:600}
.notice svg{flex-shrink:0;margin-top:1px}
.notice b{display:block;font-weight:800}
.notice--info{background:rgba(75,91,196,.08);border:1px solid rgba(75,91,196,.34);color:var(--peri-ink)}
.notice--success{background:rgba(19,122,92,.08);border:1px solid rgba(19,122,92,.34);color:var(--sage-ink)}
.notice--error{background:rgba(180,68,44,.08);border:1px solid rgba(180,68,44,.40);color:var(--caution-ink)}
.notice--neutral{background:#fff;border:1px solid var(--border-2);color:var(--ink)}
.notice--demo{background:#FFF6EF;border:1px dashed rgba(166,66,25,.55);color:#7A3414}

/* Cards */
.card{background:#fff;border:1px solid var(--border);border-radius:28px;padding:28px}
.icon-tile{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:15px;flex-shrink:0}
.it-orange{background:rgba(242,96,39,.14);color:var(--orange-text)}
.it-peri{background:rgba(75,91,196,.12);color:var(--peri)}
.it-sage{background:rgba(19,122,92,.12);color:var(--sage)}
.it-rose{background:rgba(156,63,114,.12);color:var(--rose)}
.it-caution{background:rgba(180,68,44,.10);color:var(--caution)}
.grid-auto{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.split{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 64px}
.split > *{flex:1 1 360px;min-width:0}
.split > .grow{flex:1 1 520px}

/* Fields */
.field label,.label{display:block;font-size:14px;font-weight:800}
.input{display:block;width:100%;height:58px;margin-top:8px;padding:0 18px;border-radius:16px;border:1px solid var(--border-2);background:#fff;font-size:16px;font-weight:600;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:#9C9486;font-weight:500}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(242,96,39,.28)}
.input[aria-invalid="true"]{border:1.5px solid var(--caution)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(180,68,44,.18)}
.input:disabled{background:var(--raised);color:var(--ink-3)}
.field-error{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:600;color:var(--caution-ink)}
.field-error[hidden]{display:none}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:64px}
.pw-toggle{position:absolute;right:6px;top:14px;width:46px;height:46px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pw-toggle:hover{background:var(--raised)}
.check{display:flex;align-items:flex-start;gap:12px;min-height:48px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);cursor:pointer;font-size:14px;line-height:1.5;font-weight:600;transition:border-color .15s,background .15s}
.check:hover{border-color:var(--border-2);background:#FDFBF7}
.check input{width:22px;height:22px;margin:0;flex-shrink:0;accent-color:var(--caution)}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:12px;height:48px;text-decoration:none;color:inherit}
.logo span{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.02em}

/* Site navigation */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(250,247,241,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
.site-nav__bar{max-width:1280px;margin:0 auto;padding:0 var(--gutter);min-height:84px;display:flex;align-items:center;gap:16px}
.site-nav__bar .logo{margin-right:auto}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--ink-2);text-decoration:none;transition:background .15s,color .15s}
.nav-links a:hover{color:var(--ink);background:rgba(243,238,228,.8)}
.nav-links a[aria-current="page"]{color:var(--ink);background:var(--raised)}
.nav-login{margin-left:12px}
.nav-login[aria-current="page"]{background:var(--ink);color:var(--bg)}
.menu-btn{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--border-2);background:#fff;align-items:center;justify-content:center;cursor:pointer}
.mobile-menu{display:none;border-top:1px solid var(--border);padding:4px 16px 16px}
.mobile-menu a.mm-link{display:flex;align-items:center;justify-content:space-between;height:56px;font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.mobile-menu .btn{margin-top:16px;width:100%}
@media (max-width:820px){
  .nav-links,.nav-login{display:none}
  .menu-btn{display:inline-flex}
  .nav-login-sm{display:inline-flex!important}
  .site-nav.is-open .mobile-menu{display:block}
}
.nav-login-sm{display:none!important}

/* Footer */
.site-footer{background:var(--n-bg);color:var(--n-ink);padding:clamp(56px,7vw,88px) var(--gutter) 40px}
.site-footer .cols{display:flex;flex-wrap:wrap;gap:48px clamp(40px,6vw,96px)}
.site-footer .links{flex:2 1 520px;display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.site-footer h2{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--n-ink-2)}
.site-footer ul{margin-top:16px;display:flex;flex-direction:column;gap:4px}
.site-footer li a,.site-footer li button{display:inline-flex;align-items:center;min-height:36px;color:var(--n-ink);font-size:15px;font-weight:600;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.site-footer li a:hover,.site-footer li button:hover{color:var(--orange)}
.site-footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:56px;padding-top:24px;border-top:1px solid var(--n-border);font-size:13px;font-weight:500;color:var(--n-ink-2)}

/* Dialogs (native <dialog>: focus trap + Esc built in) */
dialog.dlg{width:min(560px,calc(100% - 32px));max-width:560px;max-height:calc(100% - 32px);padding:0;border:0;border-radius:32px;background:#fff;color:var(--ink);box-shadow:0 40px 80px -30px rgba(15,14,12,.6);overflow:auto}
dialog.dlg::backdrop{background:rgba(15,14,12,.58);backdrop-filter:blur(2px)}
dialog.dlg[open]{animation:dlgIn .28s var(--ease)}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.dlg__body{padding:clamp(24px,3vw,36px)}
.dlg__title{margin-top:20px;font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.dlg__actions{display:flex;flex-wrap:wrap-reverse;gap:10px;margin-top:26px}
.dlg__actions .btn{flex:1 1 180px;height:54px;font-size:15px}
.dlg--danger{border-top:6px solid var(--caution)}
.step{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:640px){
  dialog.dlg{width:100%;max-width:100%;margin:auto 0 0;border-radius:28px 28px 0 0;max-height:92%}
  @keyframes dlgIn{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}

/* Toast */
.toast-host{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;width:min(520px,calc(100% - 32px));pointer-events:none}
.toast{display:flex;gap:10px;align-items:center;padding:14px 18px;border-radius:16px;background:var(--ink);color:var(--n-ink);font-size:14px;font-weight:600;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);animation:toastIn .3s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ==========================================================================
   3. PAGE-SPECIFIC
   ========================================================================== */
/* Home hero */
.hero{padding:clamp(28px,4vw,56px) var(--gutter) clamp(72px,8vw,120px)}
.hero__grid{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(40px,5vw,72px)}
.hero__text{flex:1 1 460px;min-width:0}
.hero__visual{flex:1.15 1 520px;min-width:0}
.badge{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 10px;border-radius:999px;background:#fff;border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--ink-2)}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.stage{position:relative;height:690px;border-radius:clamp(28px,3vw,44px);background:var(--raised);border:1px solid var(--border);overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding-top:28px}
.stage .dial{position:absolute;left:50%;top:50%;width:660px;height:660px;transform:translate(-50%,-50%)}
.stage .back{position:relative;margin-top:92px;transition:transform .5s var(--ease)}
.stage .front{position:relative;margin-left:-84px;transition:transform .5s var(--ease)}
.stage:hover .back{transform:translateY(-6px)}
.stage:hover .front{transform:translateY(-12px)}
@media (max-width:640px){
  .stage{height:470px}
  .stage .dial{width:420px;height:420px}
  .stage .back{margin-top:56px}
  .stage .front{margin-left:-44px}
  .cta-row .btn{flex:1 1 100%}
}
/* Feature tiles */
.tiles{display:grid;gap:16px;margin-top:56px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:300px;padding:24px;border-radius:28px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(28,25,21,.45)}
.tile__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tile .icon-tile{width:52px;height:52px;border-radius:16px}
.tile h3{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.02em}
.tile p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:500;color:var(--ink-2)}
.tile--feed{background:rgba(242,96,39,.08);border:1px solid rgba(242,96,39,.32)}
.tile--sleep{background:rgba(75,91,196,.08);border:1px solid rgba(75,91,196,.32)}
.tile--diaper{background:rgba(19,122,92,.08);border:1px solid rgba(19,122,92,.32)}
.tile--pump{background:rgba(156,63,114,.07);border:1px solid rgba(156,63,114,.30)}
.also{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:16px;padding:20px 24px;border-radius:24px;border:1px dashed #CFC6B6}
.also .chips{display:flex;flex-wrap:wrap;gap:8px}
/* Steps */
.steps{display:grid;gap:clamp(32px,3vw,40px);margin-top:64px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.step-col{display:flex;flex-direction:column;gap:24px}
.step-num{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--orange-text)}
.step-num::after{content:"";flex-grow:1;height:1px;background:var(--border-2)}
.mini{margin-top:auto;padding:20px;border-radius:24px;background:#fff;border:1px solid var(--border)}
.tl-row{display:flex;align-items:center;gap:14px;height:60px;border-bottom:1px solid var(--hair)}
.tl-row:last-child{border-bottom:0}
.tl-time{width:64px;font-size:13px;font-weight:700;color:var(--ink-2);flex-shrink:0}
.tl-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.tl-main{flex-grow:1;min-width:0}
.tl-main b{display:block;font-size:15px;font-weight:700}
.tl-main small{display:block;font-size:12px;font-weight:500;color:var(--ink-2)}
.avatar{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:12px;font-weight:800;flex-shrink:0}
.av-m{background:#DCE0FF;color:var(--peri-ink)}.av-a{background:rgba(242,96,39,.18);color:var(--link)}.av-n{background:rgba(19,122,92,.16);color:var(--sage)}
.bar{flex-grow:1;position:relative;height:6px;border-radius:3px;background:var(--border)}
.bar i{position:absolute;left:0;top:0;height:6px;border-radius:3px}
.bar b{position:absolute;top:-3px;height:12px;width:2px;background:var(--ink)}
/* Showcase */
.showcase{display:flex;gap:clamp(20px,3vw,48px);justify-content:safe center;align-items:center;overflow-x:auto;margin:64px calc(-1 * var(--gutter)) 0;padding:8px var(--gutter) 16px;scroll-snap-type:x mandatory}
.showcase figure{display:flex;flex-direction:column;align-items:center;gap:22px;flex-shrink:0;scroll-snap-align:center}
.showcase figcaption{text-align:center}
.showcase figcaption b{display:block;font-size:15px;font-weight:700}
.showcase figcaption span{display:block;margin-top:4px;font-size:13px;font-weight:500;color:var(--n-ink-2)}
.facts{display:grid;gap:0 40px;margin-top:72px;border-top:1px solid var(--n-border);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.facts div{padding:24px 0}
.facts h3{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--n-ink-2)}
.facts p{margin-top:10px;font-size:16px;line-height:1.55;font-weight:600}
/* Family */
.checklist{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.checklist li{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.5;font-weight:600}
.checklist .ok{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(19,122,92,.14);color:var(--sage);flex-shrink:0}
.panel{padding:clamp(18px,3vw,36px);border-radius:clamp(28px,3vw,40px);background:var(--raised);border:1px solid var(--border);display:flex;flex-direction:column;gap:14px}
.inner-card{padding:18px;border-radius:20px;background:#fff;border:1px solid var(--border)}
.duty{display:flex;align-items:center;gap:12px;min-height:68px;padding:10px 10px 10px 14px;border-radius:20px;background:#fff;border:1px solid var(--border)}
.member{display:flex;align-items:center;gap:12px;height:52px;border-top:1px solid var(--hair)}
.member:first-child{border-top:0}
.member .avatar{width:34px;height:34px;font-size:13px}
/* CTA band */
.cta-band{max-width:1312px;margin:0 auto;border-radius:clamp(28px,3vw,44px);background:var(--n-card);color:var(--n-ink);overflow:hidden;display:flex;flex-wrap:wrap;align-items:flex-end;gap:40px}
.cta-band__text{flex:1 1 480px;min-width:0;padding:clamp(36px,5vw,80px) clamp(24px,5vw,80px)}
.cta-band__phone{flex:0 1 420px;min-width:0;display:flex;justify-content:center;height:440px;overflow:hidden;margin:0 auto;padding-top:8px}
@media (max-width:640px){.cta-band__phone{height:330px}}
.store{display:inline-flex;align-items:center;gap:12px;height:62px;padding:0 22px;border-radius:18px;border:0;cursor:pointer;text-align:left;transition:transform .18s var(--ease)}
.store:hover{transform:translateY(-2px)}
.store b{display:block;font-size:16px;font-weight:800}
.store small{display:block;font-size:11px;font-weight:700;opacity:.8}
@media (max-width:640px){.store{flex:1 1 100%}}

/* About */
.ruled{margin-top:56px;border-top:1px solid var(--border-2)}
.ruled > div{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 40px;padding:28px 0;border-bottom:1px solid var(--border-2)}
.ruled .n{flex:0 0 64px;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--orange-text)}
.ruled .t{flex:1 1 320px;font-family:var(--serif);font-size:clamp(24px,2.2vw,30px);font-weight:600;letter-spacing:-.015em}
.ruled .d{flex:1 1 380px;font-size:16px;line-height:1.6;font-weight:500;color:var(--ink-2)}
.principles{margin-top:64px;border-top:1px solid var(--n-border)}
.principles > div{display:flex;flex-wrap:wrap;gap:12px 48px;padding:36px 0;border-bottom:1px solid var(--n-border)}
.principles h3{flex:1 1 360px;font-family:var(--serif);font-size:clamp(30px,3vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.principles p{flex:1 1 420px;font-size:17px;line-height:1.65;font-weight:500;color:var(--n-ink-2)}

/* Terms */
.terms-layout{display:flex;flex-wrap:wrap;align-items:flex-start;gap:40px clamp(40px,6vw,96px)}
.toc{flex:1 1 260px;max-width:300px;position:sticky;top:110px;padding:24px;border-radius:24px;background:#fff;border:1px solid var(--border)}
.toc ol{margin-top:14px;display:flex;flex-direction:column}
.toc a{display:flex;gap:12px;align-items:center;min-height:40px;padding:0 10px;margin:0 -10px;border-radius:10px;color:var(--ink-2);font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.toc a:hover{background:var(--raised);color:var(--ink)}
.toc a.is-current{background:var(--raised);color:var(--ink);font-weight:800}
.toc a span{width:18px;color:var(--orange-text)}
.toc-mobile{display:none}
.article{flex:999 1 560px;min-width:0;max-width:760px}
.article section{padding:40px 0;border-bottom:1px solid var(--border);scroll-margin-top:110px}
.article section:first-child{padding-top:0}
/*
 * `last-of-type`, not `last-child`: the "Read next" cards now follow the last
 * section instead of sitting inside it, which is what lets the sections come
 * from the database as a plain loop. With `last-child` the final section would
 * have grown a rule it never had, because something follows it.
 */
.article section:last-of-type{border-bottom:0}
.article h2{font-family:var(--serif);font-size:clamp(26px,2.4vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.article h2 span{color:var(--orange-text)}
.in-short{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--raised);font-size:15px;line-height:1.6;font-weight:600}
.in-short em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-right:8px}
.legal-ph{margin-top:18px;font-size:17px;line-height:1.75;font-weight:500;color:var(--ink-2)}
@media (max-width:820px){
  .toc{display:none}
  .toc-mobile{display:block;flex:1 1 100%;border-radius:18px;background:#fff;border:1px solid var(--border)}
  .toc-mobile summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 18px;font-size:15px;font-weight:800;cursor:pointer;list-style:none}
  .toc-mobile summary::-webkit-details-marker{display:none}
  .toc-mobile ol{padding:0 18px 14px}
  .toc-mobile a{display:flex;align-items:center;min-height:44px;color:var(--ink);font-size:15px;font-weight:600;text-decoration:none}
}

/* Login */
.minimal-head{padding:0 var(--gutter);border-bottom:1px solid var(--border);background:var(--bg)}
.minimal-head__bar{max-width:1280px;margin:0 auto;min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.login-grid{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(32px,5vw,80px)}
.login-form-col{flex:1 1 440px;min-width:0;display:flex;align-items:center}
.login-form-col > div{width:100%;max-width:460px;margin:0 auto}
.login-art{flex:1 1 480px;min-width:0;position:relative;height:780px;border-radius:clamp(28px,3vw,44px);background:var(--n-bg);overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:64px}
.login-art .dial{position:absolute;left:50%;top:46%;width:620px;height:620px;transform:translate(-50%,-50%)}
.login-art p{position:absolute;left:0;right:0;bottom:0;padding:22px clamp(20px,3vw,32px);background:linear-gradient(rgba(15,14,12,0),#0F0E0C 40%);color:var(--n-ink);font-size:15px;line-height:1.5;font-weight:600}
@media (max-width:640px){.login-art{height:340px;padding-top:28px}.login-art .dial{width:380px;height:380px}}
.form{display:flex;flex-direction:column;gap:20px;margin-top:28px}
.form-stack > * + *{margin-top:24px}

/* Account */
.app-head{padding:0 var(--gutter);background:#fff;border-bottom:1px solid var(--border)}
.app-head__bar{max-width:1120px;margin:0 auto;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.who{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink-2);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.who{display:none}}
.acct{padding:clamp(28px,4vw,56px) var(--gutter) clamp(64px,8vw,112px)}
.acct .wrap{max-width:1120px}
.overview dl{display:grid;gap:20px 32px;margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.overview dt{font-size:13px;font-weight:600;color:var(--ink-2)}
.overview dd{margin-top:6px;font-size:17px;font-weight:700;overflow-wrap:anywhere}
.status-banner{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:32px;padding:clamp(22px,3vw,32px);border-radius:28px}
.status-banner .icon-tile{width:56px;height:56px;border-radius:18px}
.status-banner > div{flex:1 1 360px;min-width:0}
.status-banner h2{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.02em}
.action-card{display:flex;flex-direction:column;padding:clamp(22px,3vw,32px);border-radius:28px;background:#fff;border:1px solid var(--border);transition:box-shadow .2s}
.action-card:hover{box-shadow:0 24px 40px -32px rgba(28,25,21,.5)}
.action-card--danger{border-color:rgba(180,68,44,.42)}
.action-card h3{margin-top:24px;font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:-.02em}
.action-card .btn{align-self:flex-start;margin-top:auto;height:52px;font-size:15px}
.bullets{margin:20px 0 28px;display:flex;flex-direction:column;gap:12px}
.bullets li{display:flex;gap:12px;font-size:15px;line-height:1.5;font-weight:600}
.bullets svg{flex-shrink:0}
.cmp{margin-top:16px;border-radius:24px;background:#fff;border:1px solid var(--border);overflow-x:auto}
.cmp table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px}
.cmp caption{text-align:left;padding:20px 24px 8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.cmp th,.cmp td{text-align:left;padding:14px 24px;border-bottom:1px solid var(--hair)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp tbody th{font-weight:600;color:var(--ink-2)}
.cmp td{font-weight:700}

/* Result */
.result{max-width:760px;margin:0 auto;padding:clamp(32px,5vw,72px) var(--gutter) clamp(64px,8vw,112px)}
.result-card{padding:clamp(28px,4vw,48px);border-radius:32px;background:#fff;border:1px solid var(--border);text-align:center}
.result-icon{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%}
.result-card h1{margin-top:22px;font-family:var(--serif);font-size:clamp(32px,4vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.result-list{margin:28px auto 0;max-width:460px;text-align:left;display:flex;flex-direction:column;gap:12px;padding:18px 20px;border-radius:18px;background:var(--raised)}
.result-list li{display:flex;gap:12px;font-size:15px;line-height:1.5;font-weight:600}
.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}

/*
 * The presenter's demo controls are gone, at the owner's request — the floating
 * button and its panel were a scaffold for showing the prototype, not part of
 * the website.
 *
 * This one rule came out of the same media query and is NOT part of that
 * scaffold: on a narrow screen the feature tiles stop holding their 300px
 * minimum and close the gap between the icon and the words. Deleting the block
 * wholesale would have quietly changed the home page on every phone.
 */
@media (max-width:640px){.tile{min-height:0;gap:28px}}

/* ==========================================================================
   4. PHONE MOCKUPS (scaled with --k; 1 = 300 × 620 px)
   ========================================================================== */
.phone{--k:1;position:relative;width:calc(300px * var(--k));height:calc(620px * var(--k));flex-shrink:0}
.phone__frame{position:absolute;left:0;top:0;width:300px;height:620px;transform:scale(var(--k));transform-origin:0 0;padding:10px;border-radius:50px;background:#1C1915;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 2px 0 1px rgba(0,0,0,.25),0 50px 90px -40px rgba(28,25,21,.55)}
.phone__screen{position:relative;width:280px;height:600px;border-radius:40px;overflow:hidden;background:var(--bg)}
.phone__screen--night{background:#0F0E0C}
.phone__content{width:390px;height:836px;transform:scale(.71795);transform-origin:0 0;font-family:var(--sans)}
.ph-hero-back{--k:.873}.ph-hero-front{--k:1}.ph-show{--k:.953}.ph-show-mid{--k:1.067}.ph-cta{--k:1}
.ph-about-hero{--k:.967}.ph-about-band{--k:.8}.ph-login{--k:1}.ph-result{--k:.7}
@media (max-width:640px){
  .ph-hero-back{--k:.56}.ph-hero-front{--k:.667}.ph-show,.ph-show-mid{--k:.787}.ph-cta{--k:.8}
  .ph-about-hero{--k:.767}.ph-about-band{--k:.5}.ph-login{--k:.633}
}