/* The Repri home page (index.html), after nor.ma; built as preview F in website/redesign-2. A white page built of large rounded panels in a cool grey;
   titles bold in two tones, the second line grey; each live demo on a calm dawn wallpaper so it stands clear of the
   white; a tabbed tour; the price as a comparison with the paid column in ink; a dark panel to close.
   Motion after Emil Kowalski: ease-out, quick, only where something happens; a press scales to 0.96. */

@font-face {
  font-family: "Google Sans";
  src: url("../assets/fonts/google-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Google Sans";
  src: url("../assets/fonts/google-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --page: #ffffff;
  --panel: #f3f4f7;
  --sheet: #ffffff;
  --ink: #15163d;          /* a very dark blue, never black */
  --ink-2: #5d6180;
  --ink-3: #9396b0;
  --line: rgb(21 22 61 / 0.08);
  --ring-off: rgb(21 22 61 / 0.22);
  --glass: rgb(255 255 255 / 0.62);
  --coral: #eb6761;
  --deep: #2246ab;
  --island: #08080a;
  --ok: #2fb457;

  --display: "Google Sans", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --text: "Google Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, Consolas, monospace;

  --shadow-border: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04);
  --shadow-border-hover: 0 0 0 1px oklch(0 0 0 / 0.09), 0 1px 2px -1px oklch(0 0 0 / 0.08), 0 2px 4px 0 oklch(0 0 0 / 0.06);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-toast: cubic-bezier(0.21, 1.02, 0.73, 1);

  /* the demos' desktop: warm sand under a palm's shadow; the 20-20-20 band: a blue haze (Unsplash, credits in
     assets/wallpapers/CREDITS.md) */
  --rd-wall: url("/assets/wallpapers/palm-shadow.webp") center 30% / cover no-repeat, #c9a77c;
  /* the blue haze (after Ikhlas's photo on Unsplash), drawn in CSS so it stays sharp at any width: a navy corner, a
     cyan glow at the top, the light coming in low on the right; fine grain blended in so the gradient never bands */
  --blue-haze:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)' opacity='.5'/></svg>") 0 0 / 200px 200px,
    radial-gradient(42% 70% at 50% -8%, #02cbf6 0%, rgb(2 203 246 / 0.55) 45%, rgb(2 203 246 / 0) 100%),
    radial-gradient(36% 80% at -4% -6%, #0f2647 0%, rgb(15 38 71 / 0.75) 40%, rgb(15 38 71 / 0) 100%),
    radial-gradient(28% 60% at 104% -4%, #0d5a8e 0%, rgb(13 90 142 / 0) 100%),
    radial-gradient(34% 70% at 106% 78%, #d6e5f6 0%, rgb(214 229 246 / 0.75) 38%, rgb(214 229 246 / 0) 100%),
    radial-gradient(30% 55% at 18% 112%, rgb(190 220 246 / 0.7) 0%, rgb(190 220 246 / 0) 100%),
    linear-gradient(180deg, #0a86c8 0%, #1d9bee 38%, #34a6ef 70%, #5fb6f0 100%);
  --blue-haze-blend: soft-light, normal, normal, normal, normal, normal, normal;
  --band-ink: #ffffff;
  --band-ink-2: rgb(255 255 255 / 0.72);
  --rs-page-ink: var(--ink);
  --rs-page-font: var(--display);
  --rs-page-ring: var(--coral);

  --wrap: 1180px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --inset: 8px;            /* how far the full-width panels sit in from the window's edge */
  --hero-max: 1400px;      /* the hero's content box */
  --hero-pad: clamp(16px, 3.5vw, 48px);   /* the hero's words, in from that box */
  /* the 20-20-20 band and the closing panel share one height: just over the band's content at every width */
  --feature-h: clamp(395px, calc(21.4vw + 168px), 462px);
  color-scheme: light;
  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; border-radius: 6px; }
.n-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.n-wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.n-panel { background: var(--panel); border-radius: 28px; }

/* ---------- buttons ---------- */
.n-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font: 500 15px/1 var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition-property: scale, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.n-btn:active { scale: 0.96; }
.n-btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.n-btn--ink { background: var(--ink); color: #fff; }
.n-btn--soft { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-border); padding-inline: 18px 22px; }
.n-btn--white { background: #fff; color: #15163d; }
.n-btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
/* glass, as the 20-20-20 strip: a navy tint, blurred, a hairline ring and a lit top edge; deeper than the strip's
   tint, as it sits where the blue is palest, so its white words keep 4.5:1 */
.n-btn--glass {
  background: rgb(8 36 92 / 0.42);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.24), inset 0 1px 0 rgb(255 255 255 / 0.3), 0 16px 36px -18px rgb(6 18 56 / 0.55);
  color: #fff;
  text-shadow: 0 1px 2px rgb(6 18 56 / 0.25);
}
@media (hover: hover) and (pointer: fine) {
  .n-btn--ink:hover { background: #262866; }
  .n-btn--soft:hover { box-shadow: var(--shadow-border-hover); }
  .n-btn--white:hover { background: #eef0ff; }
  .n-btn--glass:hover { background: rgb(8 36 92 / 0.52); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.36), 0 16px 36px -18px rgb(6 18 56 / 0.6); }
}

/* ---------- header: the name, a pill of places, the one button ---------- */
.n-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgb(255 255 255 / 0.82);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
}
.n-head__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding-inline: max(24px, env(safe-area-inset-left, 0px));
}
.n-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); justify-self: start; }
.n-brand img { width: 28px; height: 28px; border-radius: 7px; }
.n-brand svg { width: auto; height: 20px; }
.n-head .n-btn { justify-self: end; }
.n-nav { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--panel); }
.n-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition-property: color, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.n-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .n-nav a:hover { color: var(--ink); background: #fff; box-shadow: var(--shadow-border); }
}
@media (max-width: 860px) {
  .n-nav { display: none; }
  .n-head__in { grid-template-columns: 1fr auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
}

/* ---------- hero: the words above, the live desktop below, one panel ---------- */
.n-hero { margin: 0 var(--inset); padding: var(--inset); }
.n-hero > * { max-width: var(--hero-max); margin-inline: auto; }
.n-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: end;
  padding: clamp(32px, 5vw, 64px) var(--hero-pad) clamp(32px, 4vw, 48px);
}
.n-hero__lead { display: grid; justify-items: start; gap: 22px; }
.n-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-border);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: box-shadow 150ms ease-out, color 150ms ease-out;
}
@media (hover: hover) and (pointer: fine) { .n-pill:hover { color: var(--ink); box-shadow: var(--shadow-border-hover); } }
.n-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgb(47 180 87 / 0.2); flex: none; }
.n-hero h1 { font-size: clamp(40px, 5vw, 70px); line-height: 1.02; letter-spacing: -0.03em; }
.n-hero h1 span, .n-title h2 span, .n-band h2 span { color: var(--ink-3); }
.n-hero__side { display: grid; gap: 18px; justify-items: start; padding-bottom: 6px; }
.n-hero__side > p:first-child { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 28em; }
.n-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.n-note { font-size: 14px; color: var(--ink-3); }

.n-stage { margin-block: 0; }   /* its sides stay auto (from .n-hero > *), so it centres in the panel */
/* panel 28 = demo 20 + 8 inset */
.n-demo {
  min-width: 0;
  aspect-ratio: 1280 / 720;
  border-radius: 20px;
  overflow: hidden;
  background: #8fada8;
}
html[data-scenes] .n-demo { aspect-ratio: auto; background: none; }
.n-stage__cap { padding: 14px 12px 6px; text-align: center; font-size: 14px; color: var(--ink-3); }
/* every demo but the hero sits on the stage's dark backing, which a scaled scene shows as a hairline at its edges */
.ss-stage:not(.n-demo *) { background: transparent !important; }

/* Island / Notch, as preview B: two little screens on the demo's own wallpaper, each with its shape. Wide, a frosted
   panel stands on the demo's left edge, half over the grey, half over the wallpaper (clear of the island and the
   window under it); narrower, the two sit side by side under the demo */
.n-pickstage { position: relative; display: grid; gap: 16px; min-width: 0; }
.n-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 236px)); justify-content: center; gap: 12px; }
.n-picker__label { display: none; }
/* card 18 = tile 11 + 7 inset */
.n-pcard {
  display: grid;
  gap: 10px;
  padding: 7px 7px 12px;
  border: 0;
  border-radius: 18px;
  background: var(--sheet);
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--shadow-border);
  transition-property: box-shadow, scale;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.n-pcard:active { scale: 0.96; }
.n-pcard[aria-checked='true'] { box-shadow: 0 0 0 2px var(--ink), 0 8px 20px -10px rgb(0 0 0 / 0.35); }
@media (hover: hover) and (pointer: fine) { .n-pcard[aria-checked='false']:hover { box-shadow: var(--shadow-border-hover); } }
.n-pcard__tile { position: relative; display: block; aspect-ratio: 216 / 84; overflow: hidden; border-radius: 11px; background: var(--rd-wall); }
.n-pcard__tile svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.n-pdesk { fill: #fff; filter: drop-shadow(0 2px 5px rgb(0 0 0 / 0.16)); }
.n-pbar { fill: #eceef6; }
.n-ptext { fill: none; stroke: #e2e4ef; stroke-width: 3; stroke-linecap: round; }
.n-pshape { fill: var(--island); transform-box: fill-box; transform-origin: 50% 0; }
.n-part { fill: var(--coral); }
.n-pbars { fill: none; stroke: var(--ok); stroke-width: 1.8; stroke-linecap: round; }
.n-pcard__meta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 0 6px 0 8px; }
.n-pcard__meta b { font-size: 15px; font-weight: 500; line-height: 1.25; }
.n-pcard__meta > span { grid-column: 1 / -1; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.n-pcard__radio { grid-column: 2; grid-row: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--ring-off); transition: box-shadow 200ms var(--ease-out); }
.n-pcard[aria-checked='true'] .n-pcard__radio { box-shadow: inset 0 0 0 5.5px var(--ink); }
.n-chosen .n-pcard[data-style='island'][aria-checked='true'] .n-pshape { animation: n-drop 400ms var(--ease-out) both; }
.n-chosen .n-pcard[data-style='notch'][aria-checked='true'] .n-pshape { animation: n-grow 400ms var(--ease-out) both; }
@keyframes n-drop { from { transform: translateY(-35%) scale(0.72, 0.6); opacity: 0.3; } }
@media (min-width: 1360px) {
  /* the demo steps in from the panel's sides so the frosted panel can stand on its left edge */
  .n-demo { width: min(1120px, 100% - 220px); justify-self: center; }
  .n-picker {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: calc((100% - min(1120px, 100% - 220px)) / 2);
    translate: -50% -50%;
    grid-template-columns: 188px;
    gap: 10px;
    padding: 10px;
    border-radius: 26px;   /* 26 = card 16 + 10 */
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px var(--line), 0 30px 60px -28px rgb(0 0 0 / 0.45);
  }
  .n-picker__label { display: block; margin: 2px 8px 0; font-size: 13px; font-weight: 500; color: var(--ink-2); }
  .n-pcard { border-radius: 16px; }
  .n-pcard__tile { border-radius: 9px; }   /* 16 = 9 + 7 */
}
@media (max-width: 560px) {
  .n-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .n-pcard { gap: 8px; padding: 5px 5px 10px; border-radius: 15px; }
  .n-pcard__tile { border-radius: 10px; }   /* 15 = 10 + 5 */
  .n-pcard__meta { padding: 0 4px 0 6px; }
  .n-pcard__meta > span { font-size: 12px; }
}
@keyframes n-grow { from { transform: scaleY(0.12); } }

/* ---------- sections ---------- */
.n-sec { padding-top: clamp(96px, 12vw, 168px); }
.n-title { display: grid; gap: 14px; max-width: 46em; }
.n-title h2, .n-band h2 { font-size: clamp(32px, 3.9vw, 50px); line-height: 1.06; letter-spacing: -0.022em; }
/* a title's second, lighter line is its own block, balanced, so it never leaves one word alone */
.n-title h2 > br { display: none; }
.n-title h2 > span { display: block; text-wrap: balance; }
.n-title > p:not(.n-eyebrow) { font-size: 17px; color: var(--ink-2); }
.n-title a { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.n-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.n-badge { padding: 2px 9px; border-radius: 999px; background: rgb(34 70 171 / 0.08); font-size: 12px; font-weight: 500; color: var(--deep); }
.n-badge--free { background: rgb(47 180 87 / 0.1); color: #1f7a3c; }

/* the chapters, on a grey panel: 28 = chapter 20 + 8 */
.n-chapters { margin-top: clamp(28px, 3.5vw, 44px); padding: 18px 8px 8px; min-height: 240px; }
.n-chapters .ch-meta { padding-inline: 12px; }

/* the 20-20-20 rule over the same dawn: words in the sky, numbers in glass over the hills */
.n-band {
  display: grid;
  align-content: space-between;
  gap: 28px;
  min-height: var(--feature-h);
  margin: 0 var(--inset);
  /* its words start where the hero's headline does: the panel's inset, the centred hero box, the hero's own padding */
  padding: clamp(28px, 4.5vw, 64px) calc(var(--inset) + max(0px, (100% - 4 * var(--inset) - var(--hero-max)) / 2) + var(--hero-pad));
  background: var(--blue-haze);
  background-blend-mode: var(--blue-haze-blend);
  color: var(--band-ink);
}
.n-band h2 span, .n-close h2 span { color: var(--band-ink-2); }   /* the second line, a lighter tone */
/* the rule, as one frosted strip in three steps divided by hairlines; it reads left to right as the rule itself */
.n-rule {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 24px;
  background: rgb(8 36 92 / 0.16);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.28), 0 24px 60px -30px rgb(6 18 56 / 0.55);
  color: #fff;
}
.n-rule li { display: grid; align-content: start; gap: 6px; padding: 22px 28px 26px; }
.n-rule li + li { box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.2); }
.n-rule__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; font-weight: 500; color: rgb(255 255 255 / 0.82); }
.n-rule__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.n-rule__icon svg { width: 20px; height: 20px; overflow: visible; fill: none; stroke: #fff; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.n-rule b { font: 700 clamp(46px, 4.6vw, 64px)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.n-rule b em { margin-left: 0.14em; font-size: 0.42em; font-style: normal; font-weight: 500; letter-spacing: 0; color: rgb(255 255 255 / 0.82); }
.n-rule__say { font-size: 15px; line-height: 1.45; color: rgb(255 255 255 / 0.78); }
/* the icons, alive once the band is reached: the twenty minutes fill their ring, the eye blinks as the app's does, the
   sun comes up over the hills */
.n-rule__track { stroke: rgb(255 255 255 / 0.3); }
.n-rule__ring { stroke-dasharray: 53.41; stroke-dashoffset: 53.41; transform: rotate(-90deg); transform-origin: 12px 12px; transform-box: view-box; transition: stroke-dashoffset 1.6s var(--ease-out) 0.3s; }
.n-band.is-in .n-rule__ring { stroke-dashoffset: 0; }
.n-rule__pupil { fill: #fff; stroke: none; }
.n-rule__lid { transform-box: view-box; transform-origin: 12px 12px; animation: n-blink 2.6s linear infinite; }
.n-rule__sun { fill: #fff; stroke: none; opacity: 0; translate: 0 4px; transition: opacity 0.8s ease-out 0.6s, translate 0.8s var(--ease-out) 0.6s; }
.n-band.is-in .n-rule__sun { opacity: 1; translate: 0 0; }

/* ---------- the tour: tabs over one panel; each scene keeps its size while hidden, so it never rescales ---------- */
.n-tour { margin-top: clamp(28px, 3.5vw, 44px); }
.n-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
  margin: -2px;
}
.n-tabs::-webkit-scrollbar { display: none; }
.n-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 40px;
  padding: 0 16px 0 13px;
  border: 0;
  border-radius: 999px;
  background: var(--panel);
  font: 500 14px/1 var(--text);
  color: var(--ink-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition-property: background-color, color, scale;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.n-tabs button svg { width: 15px; height: 15px; fill: currentColor; }
.n-tabs button:active { scale: 0.96; }
.n-tabs button[aria-selected='true'] { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .n-tabs button[aria-selected='false']:hover { background: #e9ebf1; color: var(--ink); } }
.n-tour__panels { display: grid; margin-top: 14px; padding: 8px; }
.n-tour__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 8px 40px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease-out, visibility 0s linear 250ms;
}
.n-tour__panel[data-on] { opacity: 1; visibility: visible; transition: opacity 250ms ease-out, visibility 0s; }
/* panel 28 = demo 20 + 8 */
.n-tour__demo { min-width: 0; aspect-ratio: 760 / 400; border-radius: 20px; overflow: hidden; background: #8fada8; }
html[data-scenes] .n-tour__demo { aspect-ratio: auto; background: none; }
/* the frame clips the scene to its own corners: a scene's smaller corner, or a pale frame showing at its antialiased
   edge, drew a light hairline round the demos on the dark page */
.n-tour__demo .ss-stage, .n-demo .ss-stage { border-radius: 0; }
.n-tour__text { display: grid; gap: 12px; align-content: center; padding: 16px 32px 16px 0; }
.n-tour__text h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.02em; }
.n-tour__text > p:not(.n-eyebrow) { color: var(--ink-2); font-size: 16px; line-height: 1.55; }

.n-checks { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 15px; }
.n-checks li { position: relative; padding-left: 26px; }
.n-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><circle cx='9' cy='9' r='9'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><circle cx='9' cy='9' r='9'/></svg>") center / contain no-repeat;
  opacity: 0.08;
}
.n-checks li::after {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(0.22em + 4px);
  width: 10px;
  height: 10px;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5 6.3 11.8 13 4.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5 6.3 11.8 13 4.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

/* ---------- Home widgets ---------- */
.n-board { margin-top: clamp(28px, 3.5vw, 44px); padding: clamp(16px, 3vw, 40px); }

/* ---------- price: a comparison, the paid column a band of ink from head to foot ---------- */
.n-compare { margin-top: clamp(28px, 3.5vw, 44px); }
.n-compare table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.n-compare th, .n-compare td { padding: 16px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.n-compare thead th { vertical-align: bottom; border-bottom: 0; padding-top: 24px; padding-bottom: 20px; }
.n-compare thead th:first-child { width: 44%; }
.n-compare thead b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.n-price { display: block; margin-top: 10px; font: 700 clamp(30px, 3vw, 40px)/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.n-compare thead small { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.n-compare tbody th { font-weight: 500; }
.n-compare tbody th small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.n-compare td { text-align: center; }
.n-compare thead th:not(:first-child) { text-align: center; }
.n-compare thead th:not(:first-child) b { justify-content: center; flex-wrap: wrap; }
.n-compare .n-pro { background: var(--ink); color: #fff; border-bottom-color: rgb(255 255 255 / 0.1); }
.n-compare thead .n-pro { border-radius: 20px 20px 0 0; }
.n-compare tbody tr:last-child .n-pro { border-radius: 0 0 20px 20px; border-bottom: 0; }
.n-compare .n-pro small { color: rgb(255 255 255 / 0.6); }
.n-tag { padding: 2px 8px; border-radius: 999px; background: rgb(235 103 97 / 0.22); color: #ffb3ae; font-size: 11px; font-style: normal; font-weight: 500; }
.n-compare__group th, .n-compare__group td { padding-top: 26px; border-bottom: 0; }
.n-compare__group th { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.n-yes, .n-no { display: inline-block; width: 20px; height: 20px; overflow: hidden; text-indent: 100%; white-space: nowrap; vertical-align: middle; background: currentColor; }
.n-yes {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M4.5 10.5 8.2 14 15.5 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M4.5 10.5 8.2 14 15.5 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.n-no {
  opacity: 0.35;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 10h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 10h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center / contain no-repeat;
}

/* the claim, after it */
.n-claim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 48px;
  align-items: start;
  margin-top: 48px;
  padding: clamp(24px, 3.5vw, 40px);
}
.n-claim__text { display: grid; gap: 8px; }
.n-claim__text h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
.n-claim__text p { color: var(--ink-2); font-size: 15px; }
.n-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.n-hp { position: absolute; left: -9999px; }
/* one pill: radius 23 = button 19 + 4 */
.n-field { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-border); transition: box-shadow 150ms ease-out; }
.n-field:focus-within { box-shadow: 0 0 0 1px var(--deep), 0 0 0 4px rgb(34 70 171 / 0.12); }
.n-field input { flex: 1; width: 0; min-width: 0; height: 38px; padding: 0 12px; border: 0; background: none; font: 400 16px var(--text); color: var(--ink); outline: none; }
.n-field input::placeholder { color: var(--ink-3); }
.n-field .n-btn:disabled { opacity: 0.55; cursor: default; scale: 1; }
.n-check { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.n-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.n-check__box { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px rgb(21 22 61 / 0.25); transition: background-color 150ms ease-out, box-shadow 150ms ease-out; }
.n-check__box svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; scale: 0.25; filter: blur(4px); transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1), scale 300ms cubic-bezier(0.2, 0, 0, 1), filter 300ms cubic-bezier(0.2, 0, 0, 1); }
.n-check input:checked + .n-check__box { background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.n-check input:checked + .n-check__box svg { opacity: 1; scale: 1; filter: blur(0); }
.n-check input:focus-visible + .n-check__box { outline: 2px solid var(--deep); outline-offset: 2px; }
.n-status { font-size: 13px; color: var(--ink-3); }
.n-status a { color: var(--ink-2); text-underline-offset: 3px; }
.n-status[data-ok] { color: #1f7a3c; }

/* ---------- things that fold ---------- */
details summary { display: flex; align-items: center; gap: 14px; list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
.n-plus { position: relative; width: 14px; height: 14px; flex: none; margin-left: auto; transition: rotate 200ms var(--ease-out); }
.n-plus::before, .n-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; border-radius: 1px; background: currentColor; translate: -50% -50%; }
.n-plus::after { rotate: 90deg; }
details[open] > summary .n-plus { rotate: 45deg; }
details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 250ms var(--ease-out), opacity 200ms ease-out, content-visibility 250ms allow-discrete; }
details[open]::details-content { block-size: auto; opacity: 1; }
.n-later { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.n-later summary { font-weight: 500; transition: color 150ms ease-out; }
@media (hover: hover) and (pointer: fine) { .n-later summary:hover { color: var(--ink); } }
.n-later__body { display: grid; gap: 10px; padding-top: 14px; }
.n-later ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; margin: 0; padding: 0; list-style: none; }
.n-later b { font-weight: 500; color: var(--ink); }

.n-faq { margin-top: clamp(28px, 3.5vw, 44px); padding: 8px 28px; }
.n-faq details + details { border-top: 1px solid var(--line); }
.n-faq summary { padding-block: 22px; font-size: 17px; font-weight: 500; }
.n-faq summary svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.n-faq summary .n-plus { color: var(--ink-3); }
.n-faq__a p { padding: 0 0 22px 34px; max-width: 62ch; color: var(--ink-2); font-size: 15px; }
.n-faq__a a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- to close: the island alone in the dark, breathing slowly ---------- */
.n-close {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: end;
  min-height: var(--feature-h);
  margin: 0 var(--inset);
  /* the same column as the hero's words and the 20-20-20 band: the panel's inset, the centred hero box, its padding */
  padding: clamp(150px, 15vw, 230px) calc(var(--inset) + max(0px, (100% - 4 * var(--inset) - var(--hero-max)) / 2) + var(--hero-pad)) clamp(36px, 4.5vw, 64px);
  /* the blue haze of the 20-20-20 band */
  background: var(--blue-haze);
  background-blend-mode: var(--blue-haze-blend);
  color: #fff;
}
/* the island where it lives: centred, just under the top edge, breathing slowly. It is drawn at the app's own sizes
   in em (1em = 10 app px, so 1.75x on a laptop): 120 x 32 at rest, the 320 x 52 AlertView when it speaks */
.n-close__island {
  --grow: linear(0, 0.068, 0.22, 0.398, 0.568, 0.713, 0.826, 0.909, 0.964, 0.999, 1.017, 1.025, 1.026, 1.024, 1.019, 1.015, 1.01, 1.007, 1.004, 1.002, 1.001, 1, 0.999, 0.999, 0.999, 0.999, 1, 1, 1, 1, 1, 1, 1);
  --shrink: linear(0, 0.039, 0.13, 0.243, 0.362, 0.474, 0.575, 0.663, 0.737, 0.797, 0.846, 0.884, 0.914, 0.938, 0.955, 0.968, 0.978, 0.985, 0.99, 0.994, 0.996, 0.998, 0.999, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
  position: absolute;
  top: 0.8em;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 12em;
  height: 3.2em;
  border-radius: 1.6em;
  background: var(--island);
  font-size: clamp(10.5px, 1.25vw, 17.5px);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 18px 44px -8px rgb(6 18 56 / 0.45);
  animation: n-breathe 6s ease-in-out infinite;
  /* back to rest with the app's shrink spring, a beat after the words have gone */
  transition: width 480ms var(--shrink) 80ms, height 480ms var(--shrink) 80ms, border-radius 480ms var(--shrink) 80ms;
}
.n-close__island[data-say='welcome'] {
  width: 32em;
  height: 5.2em;
  border-radius: 2.6em;
  transition: width 640ms var(--grow), height 640ms var(--grow), border-radius 640ms var(--grow);
}
/* AlertView: margins 8, 8, 16, 8; a 36 disc; title 14 semibold over 12 secondary. Kept at the open width so nothing
   reflows while the island grows around it */
.n-wb {
  display: flex;
  align-items: center;
  flex: none;
  width: 32em;
  padding: 0.8em 1.6em 0.8em 0.8em;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  opacity: 0;
  filter: blur(4px);
  transition: opacity 120ms ease-out, filter 120ms ease-out;
}
.n-close__island[data-say='welcome'] .n-wb { opacity: 1; filter: blur(0); transition: opacity 300ms ease-out 160ms, filter 300ms ease-out 160ms; }
/* the posture nudge (ReminderView 180 x 40: the figure 24, "Sit up straight" 14 semibold), centred in the island */
.n-close__island[data-say='posture'] {
  width: 18em;
  height: 4em;
  border-radius: 2em;
  transition: width 640ms var(--grow), height 640ms var(--grow), border-radius 640ms var(--grow);
}
.n-wb { position: absolute; left: 0; top: 0; height: 5.2em; }
.n-pn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  padding: 0 1.6em 0 1.4em;
  opacity: 0;
  filter: blur(4px);
  transition: opacity 120ms ease-out, filter 120ms ease-out;
}
.n-close__island[data-say='posture'] .n-pn { opacity: 1; filter: blur(0); transition: opacity 300ms ease-out 160ms, filter 300ms ease-out 160ms; }
.n-pn__fig { flex: none; width: 2.4em; height: 2.4em; overflow: visible; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.n-pn__chair { stroke-width: 1.4; opacity: 0.55; }
.n-pn__head { fill: #fff; stroke: none; }
.n-pn b { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 1.4em; font-weight: 600; color: #fff; white-space: nowrap; }
.n-wb__disc { display: grid; place-items: center; flex: none; width: 3.6em; height: 3.6em; border-radius: 50%; background: rgb(100 210 255 / 0.2); color: #64d2ff; }
.n-wb__eye { width: 2em; height: 2em; overflow: visible; }
.n-wb__eye path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.n-wb__eye circle { fill: currentColor; }
/* the BlinkingEye: open for 2.2 s, then a blink that closes and reopens in 0.4 s */
.n-wb__lid { transform-box: view-box; transform-origin: 12px 12px; animation: n-blink 2.6s linear infinite; }
@keyframes n-blink {
  0%, 84.6% { transform: scaleY(1); }
  92.3% { transform: scaleY(0.08); }
  100% { transform: scaleY(1); }
}
.n-wb__words { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; padding: 0 1.4em 0 1em; text-align: left; }
.n-wb__words b { font-size: 1.4em; line-height: 1.36; font-weight: 600; color: #fff; white-space: nowrap; }
.n-wb__words span { font-size: 1.2em; line-height: 1.33; color: #8e8e93; white-space: nowrap; }
.n-close__side { display: grid; justify-items: end; gap: 14px; padding-bottom: 6px; text-align: right; }
@keyframes n-breathe {
  50% { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 24px 60px -6px rgb(6 18 56 / 0.6); }
}
.n-close h2 { font-size: clamp(40px, 5vw, 70px); line-height: 1.02; letter-spacing: -0.03em; }
.n-close p { font-size: 14px; color: rgb(255 255 255 / 0.92); text-shadow: 0 1px 14px rgb(6 18 56 / 0.35); }

/* ---------- footer ---------- */
.n-foot { margin-top: clamp(96px, 12vw, 160px); font-size: 14px; color: var(--ink-2); overflow: hidden; }
.n-foot__in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.n-foot__brand { display: grid; gap: 10px; justify-items: start; }
.n-foot__by { font-size: 13px; color: var(--ink-3); }
.n-social { display: flex; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.n-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; transition: translate 150ms ease-out, box-shadow 150ms ease-out, scale 150ms ease-out; }
.n-social a:active { scale: 0.96; }
.n-social svg { width: 18px; height: 18px; }
.n-social__x { background: #000; }
.n-social__in { background: #0a66c2; }
.n-social__mail { background: var(--coral); }
@media (hover: hover) and (pointer: fine) { .n-social a:hover { translate: 0 -2px; box-shadow: 0 6px 14px -6px rgb(21 22 61 / 0.45); } }
.n-foot__col { display: grid; gap: 8px; align-content: start; }
.n-foot__col p { margin-bottom: 2px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.n-foot__col a { justify-self: start; text-decoration: none; transition: color 150ms ease-out; }
@media (hover: hover) and (pointer: fine) { .n-foot__col a:hover, .n-foot__base a:hover { color: var(--ink); } }
.n-foot__base { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.n-foot__base a { text-decoration: none; transition: color 150ms ease-out; }
.n-foot__word { margin-top: 28px; color: var(--ink); opacity: 0.06; -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
.n-foot__word svg { width: 100%; height: auto; margin-bottom: -6%; }

/* ---------- the standing offer, and the toast ---------- */
.n-offer {
  position: fixed;
  z-index: 40;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 10px 30px -10px rgb(21 22 61 / 0.6);
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out), translate 300ms var(--ease-out), scale 150ms ease-out;
}
.n-offer[data-show] { opacity: 1; translate: 0 0; pointer-events: auto; }
.n-offer:active { scale: 0.96; }
.n-offer .n-dot { background: var(--coral); box-shadow: 0 0 0 3px rgb(235 103 97 / 0.3); }
.n-toasts { position: fixed; z-index: 60; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: grid; justify-items: center; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.n-toast { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.06), 0 10px 30px -10px rgb(21 22 61 / 0.3); font-size: 14px; color: var(--ink); opacity: 0; translate: 0 16px; transition: opacity 400ms var(--ease-toast), translate 400ms var(--ease-toast); }
.n-toast svg { width: 18px; height: 18px; flex: none; }
.n-toast[data-kind='ok'] svg { color: var(--ok); }
.n-toast[data-kind='error'] svg { color: var(--coral); }
.n-toast[data-state='in'] { opacity: 1; translate: 0 0; }
.n-toast[data-state='out'] { opacity: 0; translate: 0 -6px; transition-duration: 200ms; transition-timing-function: ease-out; }

/* ---------- arrivals: the hero once, in order; each section once as you reach it ---------- */
@keyframes n-in { from { opacity: 0; translate: 0 8px; filter: blur(4px); } }
.n-enter { animation: n-in 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal] { opacity: 0; translate: 0 8px; filter: blur(4px); transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out), filter 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .n-enter, .n-close__island, .n-wb__lid, .n-rule__lid { animation: none; }
  .n-rule__ring, .n-rule__sun { transition: none; }
  .n-close__island, .n-close__island[data-say], .n-wb, .n-pn, .n-close__island[data-say] .n-wb, .n-close__island[data-say] .n-pn { transition: none; }
  .js [data-reveal] { opacity: 1; translate: none; filter: none; transition: none; }
  .n-pcard, .n-tour__panel, .n-toast, .n-offer, details::details-content, .n-plus, .n-check__box svg { transition: none; }
  .n-chosen .n-pshape { animation: none !important; }
}

/* ---------- narrower ---------- */
@media (max-width: 960px) {
  .n-hero__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .n-tour__panel { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .n-tour__text { padding: 16px 12px 12px; }
}
@media (max-width: 760px) {
  /* a phone: one column, all on the left, like the hero */
  .n-close { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 120px; }
  .n-close__side { justify-items: start; text-align: left; }
  .n-rule, .n-claim { grid-template-columns: minmax(0, 1fr); }
  .n-rule li { padding: 18px 22px 20px; }
  .n-rule li + li { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2); }
  .n-later ul { grid-template-columns: minmax(0, 1fr); }
  .n-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-foot__brand { grid-column: 1 / -1; }
  .n-band { align-content: start; min-height: 640px; }
  .n-rule { margin-top: auto; }
  .n-compare th, .n-compare td { padding: 14px 10px; }
  .n-compare thead th:first-child { width: 40%; }
  .n-faq { padding: 4px 18px; }
  .n-faq__a p { padding-left: 0; }
}
@media (max-width: 560px) {
  :root { --gutter: max(16px, env(safe-area-inset-left, 0px)); --inset: 6px; }
  .n-panel { border-radius: 24px; }
  .n-hero { padding: 6px; }
  .n-demo, .n-tour__demo { border-radius: 18px; }   /* 24 = 18 + 6 */
  .n-tour__panels, .n-chapters { padding: 6px; }
  .n-chapters { padding-top: 6px; }
}

/* ---------- the dark ground (#1A1917, a warm near-black; panels a step lighter): the page takes it when the visitor's
   system is dark, so it follows their setting, and their schedule where the system switches at night ---------- */
:root[data-ground='dark'] {
  --page: #1a1917;
  --panel: #242320;
  --sheet: #2e2d2a;
  --ink: #f3f1ec;
  --ink-2: #b3afa7;
  --ink-3: #87837c;
  --line: rgb(255 255 255 / 0.08);
  --ring-off: rgb(255 255 255 / 0.25);
  --glass: rgb(36 35 32 / 0.62);
  --shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08);
  --shadow-border-hover: 0 0 0 1px oklch(1 0 0 / 0.14);
  color-scheme: dark;
}
:root[data-ground='dark'] .n-head { background: rgb(26 25 23 / 0.82); }
:root[data-ground='dark'] .n-btn--ink { color: #1a1917; }
:root[data-ground='dark'] .n-btn--white { background: #f3f1ec; }
@media (hover: hover) and (pointer: fine) {
  :root[data-ground='dark'] .n-btn--ink:hover { background: #ffffff; }
  :root[data-ground='dark'] .n-nav a:hover { background: var(--sheet); }
  :root[data-ground='dark'] .n-tabs button[aria-selected='false']:hover { background: var(--sheet); }
}
:root[data-ground='dark'] .n-tabs button[aria-selected='true'] { color: #1a1917; }
:root[data-ground='dark'] .n-badge { background: rgb(143 162 255 / 0.14); color: #b4c0ff; }
:root[data-ground='dark'] .n-badge--free { background: rgb(47 180 87 / 0.16); color: #86dba0; }
:root[data-ground='dark'] .n-compare .n-pro { background: #f3f1ec; color: #1a1917; border-bottom-color: rgb(0 0 0 / 0.08); }
:root[data-ground='dark'] .n-compare .n-pro small { color: rgb(26 25 23 / 0.6); }
:root[data-ground='dark'] .n-tag { background: rgb(235 103 97 / 0.16); color: #c2453f; }
:root[data-ground='dark'] .n-field, :root[data-ground='dark'] .n-pill { background: var(--sheet); }
:root[data-ground='dark'] .n-check__box { background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--ring-off); }
:root[data-ground='dark'] .n-check__box svg { stroke: #1a1917; }
:root[data-ground='dark'] .n-offer { background: #f3f1ec; color: #1a1917; }
:root[data-ground='dark'] .n-toast { background: var(--sheet); }
:root[data-ground='dark'] .n-pdesk { fill: #f7f6f3; }
/* the chapters' own panels */
:root[data-ground='dark'] .ch-panel { background: #2a2926; }
:root[data-ground='dark'] .ch-panel:not([data-on]):hover { background: #33322e; }
:root[data-ground='dark'] .ch-panel__peek { opacity: 0.25; }

/* ---------- the eye break (Take a break now), after Repri's BreakWindow: the window blurred and dimmed from the top
   down (veil 0.48 to 0.66 black), teal, indigo and sky glows drifting slowly, the words and a ring in the middle ---------- */
.n-break {
  --grow: linear(0, 0.068, 0.22, 0.398, 0.568, 0.713, 0.826, 0.909, 0.964, 0.999, 1.017, 1.025, 1.026, 1.024, 1.019, 1.015, 1.01, 1.007, 1.004, 1.002, 1.001, 1, 0.999, 0.999, 0.999, 0.999, 1, 1, 1, 1, 1, 1, 1);
  --shrink: linear(0, 0.039, 0.13, 0.243, 0.362, 0.474, 0.575, 0.663, 0.737, 0.797, 0.846, 0.884, 0.914, 0.938, 0.955, 0.968, 0.978, 0.985, 0.99, 0.994, 0.996, 0.998, 0.999, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  color: #fff;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* a touch darker than the app's veil: a web page behind it is far lighter than a desktop */
  background: linear-gradient(180deg, rgb(0 0 0 / 0.48), rgb(0 0 0 / 0.66));
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease-out, visibility 0s linear 400ms;
}
.n-break[data-on] { opacity: 1; visibility: visible; transition: opacity 650ms var(--ease-out), visibility 0s; }
.n-break__glow { position: absolute; inset: 0; pointer-events: none; }
.n-break__glow i { position: absolute; border-radius: 50%; animation: n-drift 15s ease-in-out infinite alternate; }
.n-break__glow i:nth-child(1) { left: -12vmax; top: -16vmax; width: 62vmax; height: 62vmax; background: radial-gradient(closest-side, rgb(45 212 191 / 0.6), rgb(45 212 191 / 0)); opacity: 0.55; animation-duration: 13s; --dx: 9vmax; --dy: 6vmax; }
.n-break__glow i:nth-child(2) { right: -18vmax; bottom: -22vmax; width: 70vmax; height: 70vmax; background: radial-gradient(closest-side, rgb(79 70 229 / 0.6), rgb(79 70 229 / 0)); opacity: 0.5; animation-duration: 17s; --dx: -10vmax; --dy: -5vmax; }
.n-break__glow i:nth-child(3) { right: 8vmax; top: 18vh; width: 55vmax; height: 55vmax; background: radial-gradient(closest-side, rgb(14 165 233 / 0.6), rgb(14 165 233 / 0)); opacity: 0.4; --dx: 7vmax; --dy: -8vmax; }
@keyframes n-drift { to { translate: var(--dx) var(--dy); } }
.n-break__body {
  position: relative;
  display: grid;
  justify-items: center;
  max-width: 720px;
  text-align: center;
  opacity: 0;
  translate: 0 24px;
  transition: opacity 200ms ease-out, translate 200ms ease-out;
}
.n-break[data-on] .n-break__body { opacity: 1; translate: 0 0; transition: opacity 500ms var(--ease-out) 220ms, translate 500ms var(--ease-out) 220ms; }
.n-break__kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64d2ff; }
.n-break__title { margin-top: 12px; font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: clamp(30px, 6vw, 40px); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.n-break__sub { margin-top: 12px; font-size: 17px; line-height: 1.3; color: rgb(255 255 255 / 0.85); }
.n-break__ring { position: relative; display: grid; place-items: center; width: clamp(150px, 40vw, 190px); aspect-ratio: 1; margin-top: 40px; }
.n-break__ring > * { grid-area: 1 / 1; }
.n-break__ring svg { width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.n-break__ring circle { fill: none; stroke-width: 5; }
.n-break__track { stroke: rgb(255 255 255 / 0.2); }
.n-break__fill { stroke: #fff; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.n-break__secs { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: clamp(46px, 12vw, 58px); font-weight: 300; font-variant-numeric: tabular-nums; }
.n-break__skip {
  min-height: 36px;
  margin-top: 40px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: #f6f4f8;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-family: inherit;
  color: #15163d;
  cursor: pointer;
  transition: scale 150ms ease-out, background-color 150ms ease-out;
}
.n-break__skip:active { scale: 0.96; }
@media (hover: hover) and (pointer: fine) { .n-break__skip:hover { background: #ffffff; } }
.n-break__skip:focus-visible { outline: 2px solid #64d2ff; outline-offset: 3px; }
.n-break__hint { margin-top: 24px; font-size: 15px; color: rgb(255 255 255 / 0.62); }
@media (hover: none) { .n-break__hint { display: none; } }   /* no Esc key on a phone */
/* the island at the top of the window: "Look away", a small ring, the time left (the app's CompactStatus, 300 x 36,
   drawn in em at 1em = 10 app px) */
.n-break__island {
  position: absolute;
  top: 0.8em;
  left: 50%;
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) 1.5em auto;
  align-items: center;
  width: 30em;
  height: 3.6em;
  padding: 0 1.4em 0 1.2em;
  border-radius: 1.8em;
  background: #08080a;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 10px 30px rgb(0 0 0 / 0.4);
  font-size: clamp(10px, 0.9vw, 12.5px);
  translate: -50% 0;
  scale: 0.4 0.9;
  opacity: 0;
  transition: scale 480ms var(--shrink), opacity 200ms ease-out;
}
.n-break[data-on] .n-break__island { scale: 1; opacity: 1; transition: scale 640ms var(--grow), opacity 200ms ease-out; }
.n-break__eye { width: 1.6em; height: 1.6em; fill: none; stroke: #64d2ff; stroke-width: 1.9; stroke-linejoin: round; }
.n-break__eye circle { fill: #64d2ff; stroke: none; }
.n-break__label { padding: 0 0.8em; font-size: 1.3em; font-weight: 600; white-space: nowrap; }
.n-break__mini { width: 1.5em; height: 1.5em; rotate: -90deg; overflow: visible; }
.n-break__mini circle { fill: none; stroke: rgb(255 255 255 / 0.2); stroke-width: 2.4; }
.n-break__mini .n-break__minifill { stroke: #64d2ff; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.n-break__time { min-width: 2.7em; padding-left: 0.6em; text-align: right; font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 1.4em; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .n-break, .n-break[data-on], .n-break__body, .n-break[data-on] .n-break__body, .n-break__island, .n-break[data-on] .n-break__island { transition: none; translate: none; }
  .n-break__island { translate: -50% 0; }
  .n-break__glow i { animation: none; }
}

/* ---------- the preview's options (not part of the site) ---------- */
.n-opts {
  position: fixed;
  z-index: 50;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 18px;
  background: rgb(21 22 61 / 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.6);
  color: #fff;
  font-size: 12px;
}
.n-opts p { margin: 0 4px 2px; font-weight: 500; color: rgb(255 255 255 / 0.6); }
.n-opts__row { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgb(255 255 255 / 0.08); }
.n-opts button {
  flex: 1;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: 500 12px/1 var(--text);
  color: rgb(255 255 255 / 0.75);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out, scale 150ms ease-out;
}
.n-opts button:active { scale: 0.96; }
.n-opts button[aria-pressed='true'] { background: #fff; color: #15163d; }

/* ---------- the privacy policy (privacy.html, built by tools/build-privacy.py): one reading column between the home
   page's header and footer; its title two-tone like the sections'; tables on a panel ---------- */
.n-doc { padding-top: clamp(56px, 8vw, 104px); }
.n-doc .n-title h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.022em; }
.n-doc .n-title h1 > br { display: none; }
.n-doc .n-title h1 > span { display: block; color: var(--ink-3); }
.n-prose { max-width: 720px; margin-top: clamp(36px, 5vw, 56px); font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.n-prose > * + * { margin-top: 16px; }
.n-prose h2 { margin-top: 52px; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -0.012em; color: var(--ink); }
.n-prose h2 + * { margin-top: 14px; }
.n-prose strong { font-weight: 600; color: var(--ink); }
.n-prose a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.n-prose ul { padding-left: 1.25em; }
.n-prose li + li { margin-top: 8px; }
.n-prose li::marker { color: var(--ink-3); }
.n-prose code { font-family: var(--mono); font-size: 0.88em; padding: 0.12em 0.4em; border-radius: 6px; background: var(--panel); color: var(--ink); }
/* a table may run wider than the words, up to the page's gutter */
.n-prose .table-wrap { width: min(960px, calc(100vw - 2 * var(--gutter))); overflow-x: auto; margin-top: 22px; padding: 6px 8px; border-radius: 20px; background: var(--panel); }
.n-prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.n-prose th, .n-prose td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.n-prose thead th { padding-block: 10px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.n-prose tbody tr:last-child td { border-bottom: 0; }
.n-prose td:first-child { color: var(--ink); }
/* on a phone, each row of a table stacks: the item, then its other columns under small labels */
@media (max-width: 640px) {
  .n-prose .table-wrap { padding: 4px 6px; }
  .n-prose table, .n-prose tbody, .n-prose tr, .n-prose td { display: block; min-width: 0; }
  .n-prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .n-prose tr { padding: 14px 12px; border-bottom: 1px solid var(--line); }
  .n-prose tbody tr:last-child { border-bottom: 0; }
  .n-prose td { padding: 0; border: 0; }
  .n-prose td:first-child { font-weight: 600; }
  .n-prose td + td { margin-top: 10px; }
  .n-prose td + td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); }
}