/* Nessy marketing site — surface styles.
   The visual world is the Nessy design system (see assets/css/nessy-tokens.css);
   nothing here invents a color, face, radius, shadow or duration. What it adds is
   page-scale typography, which the app's 46px hero step does not reach, and the
   page-scale flat panels the system nominates in place of a hero image. */

:root{
  /* Page-scale display steps. Archivo 800, the system's tight tracking, extended
     upward for a surface read at arm's length instead of in the hand. */
  --display-1:clamp(36px,6.2vw,66px);
  --display-1-track:-0.04em;
  --display-2:clamp(27px,3.6vw,42px);
  --display-2-track:-0.03em;
  --lede:clamp(17px,1.5vw,20px);

  --ring-hero:clamp(216px,42vh,400px);
  --ring-spine:clamp(216px,min(25vw,34vh),332px);
  --ring-step:196px;

  --shell:var(--content-max); /* 1160px upstream; tracks the system rather than pinning it */
  --gutter:var(--gutter-mobile);
}
@media (min-width:760px){ :root{ --gutter:var(--gutter-web); } }

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  /* Browser surfaces belong to the design system too. */
  accent-color:var(--teal-500);
  caret-color:var(--teal-600);
  scrollbar-color:var(--ink-300) var(--paper-100);
  overflow-x:hidden;
}
::selection{background:var(--teal-100);color:var(--ink-900)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper-100)}
::-webkit-scrollbar-thumb{background:var(--ink-300);border:3px solid var(--paper-100);border-radius:var(--radius-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-400)}
a{text-underline-offset:3px;text-decoration-thickness:2px}
img{max-width:100%;height:auto}

.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:20;
  background:var(--white);color:var(--text-strong);
  border:var(--border-strong) solid var(--ink-900);border-radius:var(--radius-sm);
  padding:10px 14px;font-weight:var(--weight-bold);font-size:var(--type-body-sm-size);
  box-shadow:var(--shadow-hard-ink);transition:top var(--dur-fast) var(--ease-out);
}
/* .skip sets its own box-shadow, which outranks the system's :focus-visible rule
   at equal specificity — restate the ring here so the first Tab stop keeps it. */
.skip:focus-visible{top:12px;text-decoration:none;box-shadow:var(--ring-focus),var(--shadow-hard-ink)}

/* ---------------------------------------------------------------- top bar */

.topbar{
  position:sticky;top:0;z-index:10;
  height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  padding:0 var(--gutter);
  background:color-mix(in srgb,var(--paper-100) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:var(--border-strong) solid var(--ink-900);
}
.lockup{
  display:inline-flex;align-items:center;gap:var(--space-4);text-decoration:none;
  padding:4px 7px;margin:-4px -7px;border-radius:var(--radius-sm);
  transition:background var(--dur-fast) var(--ease-out);
}
.lockup:hover{text-decoration:none;background:var(--ink-100)}
.lockup img{display:block;flex:0 0 auto}
.wordmark{
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-size:23px;letter-spacing:-0.03em;color:var(--ink-900);line-height:1;
}
.status-pill{
  font-family:var(--font-text);font-size:var(--type-caption-size);font-weight:var(--weight-bold);
  letter-spacing:-0.005em;color:var(--ink-700);
  border:var(--border-hairline) solid var(--ink-300);border-radius:var(--radius-pill);
  padding:5px 12px;background:var(--white);
}

/* ------------------------------------------------------------------- hero */

.hero{
  max-width:var(--shell);margin:0 auto;
  padding:clamp(16px,3vh,40px) var(--gutter) clamp(32px,6vh,80px);
  min-height:calc(100svh - var(--topbar-h));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,3vh,36px);text-align:center;
}
.hero-ring{display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}
.hero-copy{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);max-width:50rem}
.hero h1{
  font-size:var(--display-1);line-height:.96;letter-spacing:var(--display-1-track);
  font-weight:var(--weight-black);color:var(--text-strong);text-wrap:balance;
}
.lede{
  font-size:var(--lede);line-height:1.5;color:var(--ink-600);
  max-width:56ch;text-wrap:pretty;
}

.plate{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--white);
  border:var(--border-strong) solid var(--ink-900);border-radius:var(--radius-md);
  box-shadow:var(--shadow-hard-ink);
  padding:14px 24px;margin-top:var(--space-2);
}
.plate-title{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--type-title-3-size);letter-spacing:-0.015em;color:var(--ink-900);
}
.plate-note{font-size:var(--type-caption-size);color:var(--text-muted)}

/* ------------------------------------------------------------------- ring */

.ring{position:relative;flex:0 0 auto;display:block}
.ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring-track{fill:none;stroke:var(--ink-100);stroke-width:10}
.ring-sweep{
  fill:none;stroke:var(--grade-a);stroke-width:10;stroke-linecap:round;
  stroke-dasharray:345.575 345.575;stroke-dashoffset:29.7;
  transition:stroke-dashoffset var(--dur-reveal) var(--ease-out),stroke var(--dur-slow) var(--ease-out);
}
.ring[data-band="b"] .ring-sweep{stroke:var(--grade-b)}
.ring[data-band="c"] .ring-sweep{stroke:var(--grade-c)}
.ring[data-band="d"] .ring-sweep{stroke:var(--grade-d)}
.ring[data-band="f"] .ring-sweep{stroke:var(--grade-f)}

.ring-face{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.ring-score{
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-size:calc(var(--ring-size,300px) * .27);line-height:1;letter-spacing:-0.03em;
  color:var(--text-strong);
}
.ring-band{
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-size:calc(var(--ring-size,300px) * .13);line-height:1;margin-top:.15em;
  color:var(--grade-a-ink);
}
.ring[data-band="b"] .ring-band{color:var(--grade-b-ink)}
.ring[data-band="c"] .ring-band{color:var(--grade-c-ink)}
.ring[data-band="d"] .ring-band{color:var(--grade-d-ink)}
.ring[data-band="f"] .ring-band{color:var(--grade-f-ink)}

.ring--hero{width:var(--ring-hero);height:var(--ring-hero);--ring-size:var(--ring-hero)}
.ring--spine{width:var(--ring-spine);height:var(--ring-spine);--ring-size:var(--ring-spine)}
.ring--step{width:var(--ring-step);height:var(--ring-step);--ring-size:var(--ring-step)}

.ring-caption{
  font-size:var(--type-caption-size);color:var(--text-muted);
  letter-spacing:.01em;
}

.chip{
  display:inline-flex;align-items:baseline;gap:6px;
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:14px;
  font-variant-numeric:tabular-nums;
  border-radius:var(--radius-pill);padding:5px 12px;
  background:var(--ink-100);color:var(--text-muted);
}
.chip--up{background:var(--teal-50);color:var(--teal-700)}
.chip--down{background:var(--red-100);color:var(--red-700)}
.chip-note{font-family:var(--font-text);font-weight:var(--weight-semibold);font-size:12.5px}
.chip[hidden]{display:none}

/* ------------------------------------------------------------------ spine */

.spine{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.spine-ring{display:none}
.step{
  padding:clamp(40px,8vh,80px) 0;
  border-top:var(--border-hairline) solid var(--line-hairline);
  display:flex;flex-direction:column;gap:var(--space-5);
}
.step:first-child{border-top:var(--border-strong) solid var(--ink-900)}
.step h2{
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-size:var(--display-2);line-height:1.04;letter-spacing:var(--display-2-track);
  color:var(--text-strong);text-wrap:balance;max-width:18ch;
}
.step p{font-size:var(--type-body-size);line-height:1.6;color:var(--ink-600);max-width:62ch}
.step-ring{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-8)}

@media (min-width:960px){
  .spine{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(32px,6vw,96px);align-items:start;
  }
  .spine-ring{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:var(--space-5);
    position:sticky;top:var(--topbar-h);
    height:calc(100svh - var(--topbar-h));
  }
  .step-ring{display:none}
  .step{
    min-height:calc(100svh - var(--topbar-h));
    justify-content:center;border-top:0;padding:var(--space-12) 0;
  }
  .step:first-child{border-top:0}
  .step h2{max-width:16ch}
  .step p{font-size:17px;line-height:1.62}
  .step:last-child{min-height:calc(84svh - var(--topbar-h))}
}

/* ---------------------------------------------------------------- parents */

.parents{background:var(--white);border-top:var(--border-strong) solid var(--ink-900)}
.parents-inner{
  max-width:var(--shell);margin:0 auto;
  padding:clamp(48px,8vh,88px) var(--gutter);
  display:flex;flex-direction:column;gap:var(--space-8);align-items:flex-start;
}
.scene{width:clamp(180px,42vw,300px);height:auto;flex:0 0 auto}
.parents-copy{display:flex;flex-direction:column;gap:var(--space-6);max-width:60ch}
.parents h2{
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-size:var(--display-2);letter-spacing:var(--display-2-track);line-height:1.05;
  color:var(--text-strong);
}
.parents p{font-size:var(--type-body-size);line-height:1.6;color:var(--ink-600)}
.parents p b{font-weight:var(--weight-semibold);font-size:17px;letter-spacing:-0.005em;color:var(--text-strong)}
.parents a{color:var(--text-link);text-decoration:underline}
@media (min-width:760px){
  .parents-inner{flex-direction:row;align-items:center;gap:clamp(32px,6vw,72px)}
}

/* ------------------------------------------------------------------ close */

.close{
  background:var(--teal-500);
  border-top:var(--border-strong) solid var(--ink-900);
  border-bottom:var(--border-strong) solid var(--ink-900);
  padding:clamp(56px,11vh,112px) var(--gutter);
  text-align:center;
}
.close-line{
  font-family:var(--font-text);font-weight:var(--weight-semibold);
  font-size:var(--lede);line-height:1.45;
  color:var(--ink-900);margin-top:var(--space-6);max-width:46ch;margin-left:auto;margin-right:auto;
}
.close h2{
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-size:var(--display-2);line-height:1.06;letter-spacing:var(--display-2-track);
  color:var(--white);max-width:22ch;margin:0 auto;text-wrap:balance;
}

/* ----------------------------------------------------------------- footer */

.footer{padding:var(--space-9) 0 var(--space-11)}
.footer-inner{
  max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start;
}
.lockup--footer .wordmark{font-size:19px}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-7)}
.footer-links a{font-size:var(--type-body-sm-size);color:var(--text-link)}
.copyright{font-size:var(--type-caption-size);color:var(--text-muted)}
@media (min-width:760px){
  .footer-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-8)}
  .footer-links{order:3;margin-left:auto}
  .copyright{order:2}
}

/* ------------------------------------------------------- document (privacy) */

.doc{max-width:var(--shell);margin:0 auto;padding:clamp(40px,7vh,80px) var(--gutter) clamp(56px,9vh,104px)}
.doc-head{padding-bottom:var(--space-9);border-bottom:var(--border-strong) solid var(--ink-900)}
.doc-index{display:none}
.doc-col{max-width:68ch}

@media (min-width:1080px){
  .doc-layout{
    display:grid;grid-template-columns:206px minmax(0,68ch);
    gap:clamp(40px,5vw,72px);justify-content:center;align-items:start;
  }
  .doc-index{
    display:block;position:sticky;top:calc(var(--topbar-h) + var(--space-9));
    padding-top:var(--space-2);
  }
  .doc-index ol{margin:0;padding:0;list-style:none;counter-reset:none}
  .doc-index li{border-top:var(--border-hairline) solid var(--line-hairline)}
  .doc-index li:first-child{border-top:var(--border-strong) solid var(--ink-900)}
  .doc-index a{
    display:block;padding:9px 0;font-size:var(--type-body-sm-size);line-height:1.3;
    color:var(--ink-600);font-weight:var(--weight-medium);text-decoration:none;
    transition:color var(--dur-fast) var(--ease-out);
  }
  .doc-index a:hover{color:var(--ink-900);text-decoration:none}
  .doc-index a[aria-current="true"]{color:var(--teal-700);font-weight:var(--weight-bold)}
}
.doc-head h1{
  font-size:var(--display-1);line-height:.98;letter-spacing:var(--display-1-track);
  font-weight:var(--weight-black);color:var(--text-strong);
}
.doc-meta{margin-top:var(--space-5);font-size:var(--type-caption-size);color:var(--text-muted)}
.doc-intro{margin-top:var(--space-7);font-size:var(--lede);line-height:1.5;color:var(--ink-600);text-wrap:pretty}

.doc-body{margin-top:var(--space-11);display:flex;flex-direction:column;gap:var(--space-11)}
.doc-body section{display:flex;flex-direction:column;gap:var(--space-6)}
.doc-body h2{
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-size:var(--type-title-2-size);line-height:1.15;letter-spacing:-0.025em;
  color:var(--text-strong);
}
.doc-body p{font-size:var(--type-body-size);line-height:1.65;color:var(--ink-600)}
.doc-body a{color:var(--text-link);text-decoration:underline}
.doc-body ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.doc-body li{
  font-size:var(--type-body-size);line-height:1.6;color:var(--ink-600);
  padding:var(--space-5) 0;border-top:var(--border-hairline) solid var(--line-hairline);
}
.doc-body li:last-child{border-bottom:var(--border-hairline) solid var(--line-hairline)}
.doc-body li b{color:var(--text-strong);font-weight:var(--weight-bold)}

.doc-summary{
  background:var(--white);border:var(--border-strong) solid var(--ink-900);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-hard-ink);
  padding:var(--card-pad-lg);
}
.doc-summary h2{font-size:var(--type-title-3-size);letter-spacing:-0.015em}
.doc-summary li{border-top-color:var(--ink-200)}
.doc-summary li:first-of-type{border-top:0;padding-top:var(--space-2)}
.doc-summary li:last-child{border-bottom:0;padding-bottom:0}