/* Nuri on niamoslabs.com · impeccable craft, studio system + Nuri accents (dark values)
 * studio carries: fonts, type scale, weights, space, shell, --col-side grid, ground, link treatment;
 *   top bar, dock, horizon and footer via /assets/components.css
 * Nuri carries: every chromatic colour (amber, sage, coral and their soft fills), capsule buttons,
 *   raised sheets (radius 20), the audience switch, the amber sun
 * decisions and measured contrast: _design/nuri-system.md
 * Linked after /assets/base.css and /assets/components.css. Dark only, like the rest of the site.
 */

/* ---------- Nuri tokens (nuri_app_1 app_colors.dart dark palette, app_radius.dart) ---------- */
:root {
  --nu-amber: #F5A623;          /* nuriAmber */
  --nu-amber-hover: #F7B444;
  --nu-amber-press: #E0961C;
  --nu-sage: #7FB49A;           /* nuriSageGreen */
  --nu-coral: #E8856A;          /* nuriCoral = statusError in dark */
  --nu-ink-on-brand: #2D2D2D;   /* inkOnBrand: dark ink on a light brand fill */
  --nu-ink-on-brand-hover: #232323; /* the dark capsule on the band, hovered; its label gets more contrast, not less */
  --nu-text-on-ink: #F3EFE8;    /* nuriTextPrimary dark */
  --nu-sheet: #2E2925;          /* sheetSurface dark */
  --nu-field: #36302A;          /* fieldFill dark */
  --nu-amber-soft: #42331D;     /* amberSoft dark */
  --nu-amber-card: #523D1E;     /* cardAmber dark */
  --nu-sage-soft: #31352E;      /* sageSoft dark */
  --nu-coral-soft: #402E27;     /* coralSoft dark */
  --nu-separator: #3A342E;      /* nuriBorder dark, used only between rows inside a sheet */

  --nu-radius-sm: 0.5rem;       /* 8, AppRadius.sm */
  --nu-radius-sheet: 1.25rem;   /* 20, AppRadius.xl */
  --nu-control-min: 3rem;       /* 48: NuriButton compact height */
  --nu-row-min: 2.75rem;        /* 44 */
  /* press and release use the shared base.css tokens: --press-scale, --dur-press, --ease-spring, --dur-spring */

  /* The studio's chromatic roles take Nuri's colours on these pages */
  --color-sun: var(--nu-amber);
  --horizon-sun: var(--nu-amber); /* components.css: the half sun on the horizon. "Nuri" means my light. */
  --color-sea: var(--nu-sage);
  --color-focus: var(--nu-amber);
}

@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: var(--nu-amber); }
}

/* Lines break only where the column forces them (Dev: no words pushed to a second line), so no
 * text-wrap: balance or pretty. A word longer than its column breaks instead of running past the edge. */
h1, h2, h3, h4, p, li, dt, dd, summary, address { overflow-wrap: break-word; }
/* Headings and leads of four words or more end on a no-break pair, bound at build time, so they never end
 * on one word. Pairs are short (16 characters at most) and short headings are left free. */
.feat__n, .ba__n, .step__n, .guide__n { flex: none; white-space: nowrap; overflow-wrap: normal; }

/* Every single-column grid gets a track that may shrink below its content's min width. Placed
 * before the media queries that set desktop columns. */
.masthead, .masthead__name, .intro, .section__head, .split, .split__main, .split__side, .modes, .mode__text,
.steps, .step, .ba, .ba__with, .plain, .faq__head, .faq__more, .guide__group, .guide__cols, .guide__col, .guide__body ol, .ticks, .answer, .toc__ask, .toc__meta, .toc__index, .support__include, .control, .doc, .why, .note, .notyet, .marks li, .band__inner, .band__body, .closing, .closing__cta, .fband, .fband__intro,
.feat, .side, .rest, .notyet, .help, .faq, .support, .sheet-list, .guide__body, .guide__steps, .wall,
.legal, .toc, .policy, .policy section, .policy section > div, .policy__body, .policy header, .policy address, .policy ul, .policy ol, .pairs, .pair, .controls, .docs, .applock, .after-list {
  grid-template-columns: minmax(0, 1fr);
}

/* Tap feedback is drawn by each control's own :active state once /assets/press.js has made :active paint
 * on iOS (it puts .press on <html>); without the script iOS keeps its own grey tap flash */
.btn, .badge, .sheet-list summary, .toc a, .switch label { touch-action: manipulation; }
.press .btn, .press .badge, .press .sheet-list summary, .press .toc a, .press .switch label { -webkit-tap-highlight-color: transparent; }

/* Rules sit between rows only: the next section's rule (or the footer's) closes each list */
.step:last-child, .ba:last-child, .feat:last-child, .rest li:last-child { border-bottom: 0; }

/* ---------- Masthead ---------- */
.masthead {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-2xl) var(--space-lg);
}
.masthead__name { display: grid; gap: var(--space-md); align-content: end; min-width: 0; }
.masthead__icon { justify-self: start; }
.masthead__icon { width: 64px; height: 64px; border-radius: var(--radius-icon); } /* px: an image, not text */
.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
  min-width: 0;
}
.wordmark--page { font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: -0.01em; }

/* The app lockup on subpages: says which app this section belongs to, and goes back to its home */
.applock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  justify-self: start;
  min-height: var(--nu-row-min);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: var(--leading-title);
  text-decoration-color: transparent;
}
.applock img { width: 40px; height: 40px; border-radius: var(--radius-icon); flex: none; }

.intro { display: grid; gap: var(--space-sm); align-content: end; min-width: 0; }
.intro__line { font-size: var(--text-lead); line-height: var(--leading-lead); }
.intro__meta { color: var(--color-ink-2); }
.intro__meta a { color: var(--nu-amber); text-decoration-color: currentColor; }
.hl { color: var(--nu-amber); }
.avail { color: var(--color-ink-2); font-size: var(--text-label); }
.avail strong { color: var(--color-ink); font-weight: var(--weight-label); }
.updated { color: var(--color-ink-2); }

/* ---------- Controls: Nuri capsules (NuriDialogAction, NuriButton.outline in dark) ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); padding-top: var(--space-2xs); }
.actions .btn { min-height: 54px; } /* the same height as Apple's badge beside it */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nu-control-min);
  padding: var(--space-3xs) var(--space-md);
  border-radius: 999px;
  font-size: var(--text-body);
  font-weight: var(--weight-label);
  line-height: var(--leading-title);
  text-align: center;
  text-decoration: none;
  transition: transform var(--dur-spring) var(--ease-spring), background-color var(--dur-quick) var(--ease-out);
}
.btn:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); transition-timing-function: var(--ease-out); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 999px; }
.btn--primary { background: var(--nu-amber); color: var(--nu-ink-on-brand); }
.btn--primary:active { background: var(--nu-amber-press); }
.btn--soft { background: var(--nu-amber-soft); color: var(--color-ink); }
.btn--soft:active { background: var(--nu-amber-card); }
.btn--dark { background: var(--nu-ink-on-brand); color: var(--nu-text-on-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--nu-amber-hover); }
  .btn--soft:hover { background: var(--nu-amber-card); }
  .btn--dark:hover { background: var(--nu-ink-on-brand-hover); }
}

/* Apple's badge is the download button: unaltered artwork, 54px tall, no wrapper fill */
.badge {
  display: inline-flex;
  border-radius: 9px;
  transition: transform var(--dur-spring) var(--ease-spring);
}
.badge img { width: auto; height: 54px; }
.badge:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.badge:focus-visible { outline-offset: 3px; border-radius: 10px; }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--space-2xl); }
/* The rule between sections sits on the content edge, like the home page's rows */
.section + .section::before, .band + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: var(--rule) solid var(--color-rule);
}
.band + .section::before { display: none; }
.section__head { display: grid; gap: var(--space-sm); padding-bottom: var(--space-lg); }
.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: -0.01em;
}
.section__lead { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--color-ink-2); }
.fineprint { color: var(--color-muted); font-size: var(--text-label); }
.fineprint a { color: var(--color-ink-2); }

/* Labels: studio size, sentence case, no tracking; the hue says which side or job */
.label { font-size: var(--text-label); font-weight: var(--weight-label); line-height: var(--leading-lead); color: var(--color-ink-2); }
.label--amber { color: var(--nu-amber); }
.label--sage { color: var(--nu-sage); }
.label--coral { color: var(--nu-coral); }

/* Real app captures, with the iPhone screen's own corner (about 55pt on a 402pt-wide screen) */
.shot {
  width: 100%;
  height: auto;
  aspect-ratio: 402 / 874;
  border-radius: 13.7% / 6.3%;
  background: var(--nu-sheet);
}

/* ---------- Index: the daily juggle ---------- */
.split { display: grid; gap: var(--space-xl); }
.split__main { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.split__side { display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.statement {
  font-family: var(--font-display);
  font-weight: 400; /* Young Serif ships 400 only; an h2's default bold would be synthesised */
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: -0.01em;
}
.split__body { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--color-ink-2); }
.asks { border-top: var(--rule) solid var(--color-rule); }
.asks li {
  padding-block: var(--space-sm);
  border-bottom: var(--rule) solid var(--color-rule);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}
.asks li:last-child { border-bottom: 0; }

/* ---------- Index: two modes, each beside its real screen ---------- */
.modes { display: grid; gap: var(--space-xl); }
.mode {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr); /* the screenshot rail is an image: px, not rem */
  gap: var(--space-md);
  align-items: start;
  align-content: start; /* the shorter column keeps its rows at the top instead of spreading them */
}
.mode__text { display: grid; gap: var(--space-xs); min-width: 0; }
.mode__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lead); line-height: var(--leading-title); }
.ticks { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }
.ticks li { padding-left: var(--space-sm); position: relative; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}
.mode--them .ticks li::before { background: var(--nu-amber); }
.mode--you .ticks li::before { background: var(--nu-sage); }
.modes__note { padding-top: var(--space-lg); }

/* ---------- Index: three steps ---------- */
.steps { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--rule) solid var(--color-rule); }
.step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
  align-content: start;
  padding-block: var(--space-md);
  border-bottom: var(--rule) solid var(--color-rule);
  color: var(--color-ink-2);
}
.step__n { grid-row: span 2; font-family: var(--font-display); font-size: var(--text-title); line-height: var(--leading-title); color: var(--nu-amber); font-variant-numeric: tabular-nums; }
.step__title { font-size: var(--text-lead); line-height: var(--leading-lead); font-weight: var(--weight-strong); color: var(--color-ink); }

/* ---------- Index: without it, with Nuri ---------- */
.ba-list { border-top: var(--rule) solid var(--color-rule); }
.ba {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  border-bottom: var(--rule) solid var(--color-rule);
}
.ba__label { display: flex; align-items: baseline; gap: var(--space-xs); font-size: var(--text-body); font-weight: var(--weight-label); line-height: var(--leading-lead); }
.ba__n { font-family: var(--font-display); font-weight: 400; font-size: var(--text-title); line-height: 1; font-variant-numeric: tabular-nums; }
.ba--amber .ba__label, .ba--amber .ba__note { color: var(--nu-amber); }
.ba--sage .ba__label, .ba--sage .ba__note { color: var(--nu-sage); }
.ba--coral .ba__label, .ba--coral .ba__note { color: var(--nu-coral); }
.ba__without { color: var(--color-ink-2); }
.ba__tag { display: block; font-size: var(--text-label); font-weight: var(--weight-label); color: var(--color-muted); }
.ba__with { display: grid; gap: var(--space-3xs); }
.ba__with .ba__tag { color: var(--color-ink-2); }
.ba__payoff { font-family: var(--font-display); font-size: var(--text-lead); line-height: var(--leading-lead); }
.ba__note { padding-top: var(--space-2xs); font-size: var(--text-label); font-weight: var(--weight-strong); }
.after-list { display: grid; gap: var(--space-md); justify-items: start; padding-top: var(--space-lg); }

/* ---------- The one band: Nuri's sage. Light fill, dark text; the focus ring turns to the ground colour
 * here (amber on sage measures 1.16:1, the ground colour 7.81:1). ---------- */
.band { background: var(--nu-sage); color: var(--nu-ink-on-brand); --color-focus: var(--color-paper); }
.band__inner { display: grid; gap: var(--space-lg); padding-block: var(--space-2xl); }
.band__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: -0.01em;
}
.band__body { display: grid; gap: var(--space-md); justify-items: start; font-size: var(--text-lead); line-height: var(--leading-lead); }
.band a:not(.btn) { text-decoration-color: currentColor; }

/* ---------- Closing: the name's meaning beside the download ---------- */
.closing { display: grid; gap: var(--space-xl); }
.closing__quote {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: -0.01em;
}
.closing__quote em { font-style: normal; color: var(--nu-amber); } /* Young Serif has no italic; colour carries the stress */
.closing__cta { display: grid; gap: var(--space-sm); align-content: start; color: var(--color-ink-2); }
.closing__cta .title { color: var(--color-ink); }

/* ---------- Features: the audience switch (CSS radios, no JS) ---------- */
.switch { display: grid; gap: var(--space-xs); justify-items: start; padding-block: var(--space-xl) 0; }
.switch__legend { font-size: var(--text-label); font-weight: var(--weight-label); color: var(--color-ink-2); }
.switch fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.switch__track {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3xs);
  padding: var(--space-3xs);
  border-radius: 999px;
  background: var(--nu-field);
  position: relative;
  isolation: isolate;
}
/* The thumb: one amber capsule that slides to the chosen side, like the app's segmented control.
 * State indication, occasional use; transform only, on the critically damped spring. */
.switch__track::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--space-3xs);
  bottom: var(--space-3xs);
  left: var(--space-3xs);
  width: calc((100% - 3 * var(--space-3xs)) / 2);
  border-radius: 999px;
  background: var(--nu-amber);
  transition: transform var(--dur-spring) var(--ease-spring);
}
body:has(#aud-them:checked) .switch__track::before { transform: translateX(calc(100% + var(--space-3xs))); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.switch label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nu-row-min);
  padding-inline: var(--space-md);
  border-radius: 999px;
  font-weight: var(--weight-label);
  color: var(--color-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), transform var(--dur-spring) var(--ease-spring);
}
.switch label:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
body:has(#aud-you:checked) .switch label[for="aud-you"],
body:has(#aud-them:checked) .switch label[for="aud-them"] { color: var(--nu-ink-on-brand); }
/* A repeat of the switch above each later band, so a reader deep in the page can flip sides where they are.
 * Its labels point at the same two radios; screen readers and the keyboard use the one at the top. */
.switch--mini { padding-block: 0 var(--space-md); }
.switch--mini label { min-height: 2.75rem; }
@supports not selector(:has(*)) { .switch__track::before { display: none; } .switch input:checked + label { background: var(--nu-amber); color: var(--nu-ink-on-brand); } .switch--mini { display: none; } }
.switch input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .switch input:not(:checked) + label:hover { color: var(--nu-amber); }
}
/* One side shows at a time below 80rem; without :has() support both sides show, which still reads */
body:has(#aud-you:checked) .side--them,
body:has(#aud-them:checked) .side--you { display: none; }
/* The side that appears settles in instead of replacing the other in one frame (opacity only) */
@media (max-width: 79.99rem) {
  .side { transition: opacity 200ms var(--ease-out), display 200ms allow-discrete; }
  body:has(#aud-them:checked) .side--them, body:has(#aud-you:checked) .side--you { @starting-style { opacity: 0; } }
}

/* ---------- Features: bands of rows, each band beside its real screen ---------- */
.fband { display: grid; gap: var(--space-lg); }
.fband__head { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.fband__intro { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.fband__head--noshot { grid-template-columns: minmax(0, 1fr); }
.fband__cols { display: none; }
.feats { margin: 0; padding: 0; list-style: none; border-top: var(--rule) solid var(--color-rule); }
.feat {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  border-bottom: var(--rule) solid var(--color-rule);
}
.feat__label { display: flex; align-items: baseline; gap: var(--space-xs); font-size: var(--text-body); font-weight: var(--weight-label); line-height: var(--leading-lead); }
.feat__n { font-family: var(--font-display); font-weight: 400; font-size: var(--text-title); line-height: 1; font-variant-numeric: tabular-nums; }
.feat--amber .feat__label, .feat--amber .side__note { color: var(--nu-amber); }
.feat--sage .feat__label, .feat--sage .side__note { color: var(--nu-sage); }
.feat--coral .feat__label, .feat--coral .side__note { color: var(--nu-coral); }
.side { display: grid; gap: var(--space-2xs); align-content: start; color: var(--color-ink-2); min-width: 0; }
.side__who { font-size: var(--text-label); font-weight: var(--weight-label); color: var(--color-muted); }
/* Below 80rem only one side shows and the switch above names it, so the per-row side label is not repeated */
@media (max-width: 79.99rem) { body:has(#aud-you) .side__who { display: none; } }
.side__head { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--color-ink); }
.side__note { font-size: var(--text-label); font-weight: var(--weight-strong); }
/* A side with nothing on it says so, quietly */
.side--absent .side__head { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-strong); color: var(--color-ink-2); }
.side--absent p:not(.side__who) { color: var(--color-muted); }
.why { display: grid; gap: var(--space-3xs); padding: var(--space-sm) var(--space-md); border-radius: var(--nu-radius-sheet); background: var(--nu-amber-soft); }
.why__label { font-size: var(--text-label); font-weight: var(--weight-label); color: var(--nu-amber); }
.why__text { font-family: var(--font-display); line-height: var(--leading-lead); }
.fband__foot { padding-top: var(--space-md); }

.rest { display: grid; border-top: var(--rule) solid var(--color-rule); }
.rest li { padding-block: var(--space-xs); border-bottom: var(--rule) solid var(--color-rule); color: var(--color-ink-2); }

.notyet { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--nu-radius-sheet); background: var(--nu-coral-soft); color: var(--color-ink-2); }
.notyet .label { color: var(--nu-coral); }
.notyet__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-title); line-height: var(--leading-title); color: var(--color-ink); }

/* ---------- Sheets: guides and questions as Nuri's raised lists ---------- */
.sheet-list { background: var(--nu-sheet); border-radius: var(--nu-radius-sheet); overflow: hidden; }
.sheet-list details + details { border-top: var(--rule) solid var(--nu-separator); }
.sheet-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--nu-row-min);
  padding: var(--space-xs) var(--space-md);
  font-weight: var(--weight-strong);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-quick) var(--ease-out);
}
.sheet-list summary::-webkit-details-marker { display: none; }
.sheet-list summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--nu-amber);
  border-bottom: 2px solid var(--nu-amber);
  transform: translateY(-0.125rem) rotate(45deg);
  transition: transform var(--dur-quick) var(--ease-out);
}
.sheet-list details[open] > summary::after { transform: translateY(0.125rem) rotate(-135deg); }
.sheet-list summary:active { background: var(--nu-amber-soft); }
@media (hover: hover) and (pointer: fine) {
  .sheet-list summary:hover { background: var(--nu-amber-soft); }
}
.sheet-list summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
/* Concentric corners: the inset ring on the first and last row follows the sheet's 20px corners */
.sheet-list details:first-child > summary:focus-visible { border-radius: calc(var(--nu-radius-sheet) - 2px) calc(var(--nu-radius-sheet) - 2px) 0 0; }
.sheet-list details:last-child:not([open]) > summary:focus-visible { border-radius: 0 0 calc(var(--nu-radius-sheet) - 2px) calc(var(--nu-radius-sheet) - 2px); }
.answer { display: grid; gap: var(--space-xs); padding: 0 var(--space-md) var(--space-md); color: var(--color-ink-2); }
.answer a { color: var(--nu-amber); text-decoration-color: currentColor; }
.sheet-list details[open] > .answer, .sheet-list details[open] > .guide__body { animation: nu-reveal 200ms var(--ease-out); }
@keyframes nu-reveal { from { opacity: 0; transform: translateY(-4px); } }
@keyframes nu-fade { from { opacity: 0; } }

/* Guides: a numbered summary with the outcome under the title */
.guide > summary { align-items: center; padding-block: var(--space-sm); }
.guide__sum { flex: 1 1 0; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-sm); align-items: baseline; min-width: 0; } /* flex 1: WebKit otherwise sizes it to its content and squeezes the title column */
.guide__n { grid-row: span 2; font-family: var(--font-display); font-size: var(--text-lead); line-height: var(--leading-title); color: var(--nu-amber); font-variant-numeric: tabular-nums; font-weight: 400; }
.guide__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lead); line-height: var(--leading-title); color: var(--color-ink); }
.guide__out { font-weight: var(--weight-body); color: var(--color-ink-2); }
.guide__body { display: grid; gap: var(--space-lg); padding: var(--space-2xs) var(--space-md) var(--space-lg); color: var(--color-ink-2); }
.guide__steps, .guide__col { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.guide__cols { display: grid; gap: var(--space-md); align-items: start; }
.guide__group { display: grid; gap: var(--space-2xs); }
.guide__group h4 { font-size: var(--text-body); font-weight: var(--weight-label); color: var(--color-ink); }
.guide__body ol { margin: 0; padding-left: 1.5rem; display: grid; gap: var(--space-2xs); }
.guide__body ol li::marker { color: var(--nu-amber); font-weight: var(--weight-label); }
.guide__body strong { color: var(--color-ink); font-weight: var(--weight-label); }
.note { display: grid; gap: var(--space-3xs); align-self: start; padding: var(--space-sm) var(--space-md); border-radius: var(--nu-radius-sm); background: var(--nu-amber-soft); color: var(--color-ink-2); }
.note strong { display: block; color: var(--nu-amber); font-size: var(--text-label); font-weight: var(--weight-label); }
/* A button or screen name, drawn as the control it names */
.ui {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.2em;
  border-radius: 0.375rem;
  background: var(--nu-field);
  color: var(--color-ink);
  font-weight: var(--weight-strong);
}
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1em; color: var(--color-ink); overflow-wrap: anywhere; }

/* Guides: the one wall a new connection hits */
.wall { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-md); border-radius: var(--nu-radius-sheet); background: var(--nu-coral-soft); color: var(--color-ink-2); }
.wall h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-title); line-height: var(--leading-title); color: var(--color-ink); }
.wall .label { color: var(--nu-coral); }
.wall strong { color: var(--color-ink); font-weight: var(--weight-label); }

/* ---------- Questions and support ---------- */
.help { display: grid; gap: var(--space-2xl); }
.faq { display: grid; gap: var(--space-lg); align-content: start; min-width: 0; }
.support { display: grid; gap: var(--space-md); align-content: start; justify-items: start; min-width: 0; color: var(--color-ink-2); }
.support__mail { font-family: var(--font-display); font-size: var(--text-lead); line-height: var(--leading-title); overflow-wrap: anywhere; color: var(--color-ink); }
.support__mail a { display: inline-flex; align-items: center; min-height: var(--nu-row-min); }
.support .btn { width: 100%; }

/* ---------- Trust ---------- */
.pairs { display: grid; gap: var(--space-xl); }
.pair { display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.marks { border-top: var(--rule) solid var(--color-rule); }
.marks li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-xs);
  padding-block: var(--space-sm);
  border-bottom: var(--rule) solid var(--color-rule);
}
.marks li:last-child { border-bottom: 0; }
.marks svg { width: 1.25rem; height: 1.25rem; margin-top: 0.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.marks--do svg { color: var(--nu-sage); }
.marks--never svg { color: var(--nu-coral); }
.plain { display: grid; gap: var(--space-sm); color: var(--color-ink-2); min-width: 0; }
.plain strong { color: var(--color-ink); font-weight: var(--weight-label); }
.dots { display: grid; gap: var(--space-xs); padding-left: 1.25rem; list-style: disc; color: var(--color-ink-2); }
.dots li::marker { color: var(--nu-sage); }
.dots strong { color: var(--color-ink); font-weight: var(--weight-label); }
.controls { display: grid; gap: 0; border-top: var(--rule) solid var(--color-rule); }
.control { display: grid; gap: var(--space-2xs); align-content: start; padding-block: var(--space-md); border-bottom: var(--rule) solid var(--color-rule); color: var(--color-ink-2); }
.control h3, .pair h3, .side-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lead); line-height: var(--leading-title); color: var(--color-ink); }
.docs { display: grid; } /* the section's own rule opens the list */
.doc:first-child { padding-top: 0; }
.plain .btn { justify-self: start; }
.plain__strong { color: var(--color-ink); font-size: var(--text-lead); line-height: var(--leading-lead); }
.doc { display: grid; gap: var(--space-2xs); align-content: start; justify-items: start; grid-template-columns: minmax(0, 1fr); padding-block: var(--space-md); border-bottom: var(--rule) solid var(--color-rule); color: var(--color-ink-2); }
.doc:last-child { border-bottom: 0; }
.doc__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lead); line-height: var(--leading-title); color: var(--color-ink); }
.doc a { font-weight: var(--weight-label); color: var(--color-ink); display: inline-flex; align-items: center; min-height: var(--nu-row-min); overflow-wrap: anywhere; }
.band .plain, .band .plain strong { color: inherit; }

.section__foot { padding-top: var(--space-lg); }
.section__lead .ink, .plus { color: var(--color-ink); font-weight: var(--weight-label); }
.faq__head { display: grid; gap: var(--space-sm); }
.faq__more { display: grid; gap: var(--space-sm); justify-items: start; color: var(--color-ink-2); }

/* ---------- Legal: privacy and terms, word for word from the Nuri site ---------- */
.legal { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl) var(--space-3xl); }
.toc { display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.toc__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lead); line-height: var(--leading-title); }
.toc ol { margin: 0; padding: 0; list-style: none; border-top: var(--rule) solid var(--color-rule); }
.toc li { border-bottom: var(--rule) solid var(--color-rule); }
.toc a {
  display: flex;
  align-items: center;
  min-height: var(--nu-row-min);
  padding-block: var(--space-2xs);
  color: var(--color-ink-2);
  text-decoration-color: transparent;
}
.toc a:active { color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .toc a:hover { color: var(--color-ink); text-decoration-color: var(--nu-amber); }
}
.toc__ask { display: grid; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--nu-radius-sheet); background: var(--nu-sheet); color: var(--color-ink-2); }
.toc__ask a { display: inline-flex; align-items: center; min-height: var(--nu-row-min); color: var(--nu-amber); font-weight: var(--weight-label); overflow-wrap: anywhere; text-decoration-color: currentColor; }
.toc__meta { display: grid; gap: var(--space-3xs); font-size: var(--text-label); color: var(--color-ink-2); }
.toc__meta strong { color: var(--color-ink); font-weight: var(--weight-label); }

.policy { display: grid; gap: var(--space-xl); min-width: 0; color: var(--color-ink-2); }
.policy header { display: grid; gap: var(--space-sm); }
.policy section { display: grid; gap: var(--space-sm); scroll-margin-top: var(--space-2xl); }
.policy__body { display: grid; gap: var(--space-xl); }
.policy section > div { display: grid; gap: var(--space-sm); }
.policy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  padding-bottom: var(--space-3xs);
}
.policy h3 { font-size: var(--text-body); font-weight: var(--weight-label); color: var(--color-ink); }
.policy h3 + p { margin-top: var(--space-3xs); }
.policy p, .policy li { max-width: 46rem; }
.policy strong { color: var(--color-ink); font-weight: var(--weight-label); }
.policy ul, .policy ol { margin: 0; display: grid; gap: var(--space-xs); padding-left: 1.25rem; }
.policy ul { list-style: disc; }
.policy li::marker { color: var(--nu-amber); }
.policy a { color: var(--nu-amber); text-decoration-color: currentColor; }
.policy address { font-style: normal; display: grid; gap: var(--space-3xs); padding: var(--space-md); border-radius: var(--nu-radius-sheet); background: var(--nu-sheet); justify-items: start; }
.policy address a { display: inline-flex; align-items: center; min-height: var(--nu-row-min); overflow-wrap: anywhere; }
.policy table { border-collapse: collapse; width: 100%; font-size: var(--text-label); }
.policy th, .policy td { text-align: left; vertical-align: top; padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0; border-bottom: var(--rule) solid var(--color-rule); }
.policy th { color: var(--color-ink); font-weight: var(--weight-label); }
.policy hr { border: 0; border-top: var(--rule) solid var(--color-rule); margin: 0; }
.policy .lede { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--color-ink); }
.policy .eyebrow { font-size: var(--text-label); font-weight: var(--weight-label); color: var(--nu-amber); }
.policy .updated-line { font-size: var(--text-label); color: var(--color-ink-2); }
.policy .callout { padding: var(--space-sm); border-radius: var(--nu-radius-sheet); background: var(--nu-amber-soft); color: var(--color-ink); }
/* The medical disclaimer's first line is set at body size in the label weight: at lead size its last word
 * ("advice.") ended alone on a line at most widths, and legal words cannot be changed */
.policy .callout--coral .lede { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-label); }
.policy .callout--coral { background: var(--nu-coral-soft); }
.policy .wordmark--doc { font-family: var(--font-display); font-weight: 400; font-size: var(--text-title); line-height: var(--leading-title); color: var(--color-ink); }

/* ---------- Footer: shared, plus the trademark line below it ---------- */
.foot { padding-block: var(--space-xl); }
.trademarks { padding-bottom: calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px)); color: var(--color-muted); font-size: var(--text-label); text-align: center; }

/* ---------- Phone: the screenshot floats, so text runs beside it and then takes the full width.
 * The float is gated on the row's own width in em (a container query), so it only happens while about
 * 12em of text fits beside the 112px screen. At 320px, or with large text, the screen sits above. ---------- */
.mode, .fband__head { container-type: inline-size; }
@media (max-width: 47.99rem) {
  .closing__quote { font-size: var(--text-lead); line-height: var(--leading-lead); letter-spacing: 0; }
  .mode, .fband__head:not(.fband__head--noshot) { display: block; }
  .mode .shot, .fband__head .shot { width: 112px; margin: var(--space-3xs) 0 var(--space-md); }
  .mode::after, .fband__head::after { content: ""; display: block; clear: both; }
  /* Each item is its own formatting context: beside the float it narrows as a whole and keeps its
     hanging bullet; once past the float it takes the full width */
  .ticks { display: block; }
  .ticks li { display: flow-root; }
  .ticks li + li { margin-top: var(--space-2xs); }
  @container (min-width: 20em) {
    .mode .shot, .fband__head .shot { float: left; margin: var(--space-3xs) var(--space-md) var(--space-sm) 0; }
    .mode__text, .fband__intro { display: block; }
    .mode__text > * + *, .fband__intro > * + * { margin-top: var(--space-xs); }
  }
}

/* ---------- Tablet ---------- */
@media (min-width: 48rem) {
  .trademarks { text-align: start; }
  .masthead__icon { width: 88px; height: 88px; }
  .mode { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } /* from 48rem the screen sits above its words, so the list keeps the column's width */
  .mode .shot { width: 144px; }
  .fband__head { grid-template-columns: 144px minmax(0, 1fr); gap: var(--space-lg); }
  .fband__head.fband__head--noshot { grid-template-columns: minmax(0, 1fr); }
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
  .ba { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: var(--space-lg); }
  .ba__label { grid-column: 1 / -1; }
  .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .rest { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .rest li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .support .btn { width: auto; }
  .guide__body { padding-left: calc(var(--space-md) + 2.5rem + var(--space-sm)); }
}

/* ---------- Laptop and up: the studio's two-column grid, right column = --col-side ---------- */
@media (min-width: 80rem) {
  .masthead {
    grid-template-columns: minmax(0, 1fr) var(--col-side);
    align-items: end;
    gap: var(--space-xl);
    padding-block: var(--space-3xl) var(--space-xl);
  }
  .masthead--page { row-gap: var(--space-lg); }
  .masthead--page .masthead__name { grid-column: 1 / -1; }
  .masthead--page .intro { grid-column: 2; }
  .wordmark--page { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: -0.02em; }

  .section { padding-block: var(--space-3xl); }
  .section__head {
    grid-template-columns: minmax(0, 1fr) var(--col-side);
    column-gap: var(--space-xl);
    align-items: end;
    padding-bottom: var(--space-xl);
  }

  .split, .help, .legal, .closing, .band__inner {
    grid-template-columns: minmax(0, 1fr) var(--col-side);
    column-gap: var(--space-xl);
  }
  .split__side { padding-top: 0; }
  .band__inner { row-gap: var(--space-lg); padding-block: var(--space-3xl); }
  .band__title { grid-column: 1; }
  .band__body { grid-column: 2; align-self: end; } /* My Photo Backup's promise band: title left, words right */
  .band__title { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: -0.02em; }
  .closing { align-items: end; }

  .mode .shot { width: 176px; } /* still above its words: beside them the list column was 396px and ended items on one word */

  /* Steps are index rows, on the same grid as the without/with rows: numeral, title, then the text in the right column */
  .step { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) var(--col-side); column-gap: var(--space-xl); align-items: baseline; padding-block: var(--space-lg); }
  .step__n { grid-row: auto; }

  .ba { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) var(--col-side); column-gap: var(--space-xl); align-items: baseline; }
  .ba__label { grid-column: auto; flex-direction: column; gap: var(--space-2xs); }

  /* Features: both sides at once, so the switch is not needed; the screen rides beside the rows */
  .switch { display: none; }
  body:has(#aud-you:checked) .side--them,
  body:has(#aud-them:checked) .side--you { display: grid; }
  .fband { grid-template-columns: 208px minmax(0, 1fr); column-gap: var(--space-xl); row-gap: 0; }
  .fband__head { display: contents; }
  .fband__head .shot { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: var(--space-lg); align-self: start; }
  .fband__intro { grid-column: 2; padding-bottom: var(--space-xl); }
  .fband--noshot { grid-template-columns: minmax(0, 1fr); }
  .fband--noshot .fband__intro { grid-column: 1; }
  .fband__cols {
    grid-column: -2;
    display: grid;
    grid-template-columns: minmax(0, 13rem) repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
    padding-bottom: var(--space-2xs);
    font-size: var(--text-label);
    font-weight: var(--weight-label);
    color: var(--color-ink-2);
  }
  .fband__cols span:first-child { grid-column: 2; }
  .feats, .fband__foot { grid-column: -2; }
  .feat { grid-template-columns: minmax(0, 13rem) repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); row-gap: var(--space-md); align-items: start; }
  .feat__label { flex-direction: column; gap: var(--space-2xs); }
  .side__who { display: none; }
  .why { grid-column: 2 / -1; }

  .after-list { grid-template-columns: minmax(0, 1fr) var(--col-side); column-gap: var(--space-xl); align-items: center; }
  .guide__sum { grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 18rem); } /* a narrower outcome column, so each title holds one line */
  .guide__sum { column-gap: var(--space-xl); }
  .guide__n { grid-row: auto; }
  .guide > summary { padding-block: var(--space-md); }
  .guide__body { grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--col-side) - var(--space-md))); column-gap: var(--space-xl); padding-right: var(--space-md); }
  .guide__body > .guide__intro { grid-column: 1; }
  /* Guides with three groups set them in three explicit columns, balanced by content in the markup
     (CSS multi-column balanced differently in WebKit and Chromium and left one column 1,100px longer) */
  .guide__body--cols { grid-template-columns: minmax(0, 1fr); }
  .guide__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .guide__body > .note { grid-column: 2; grid-row: 1 / span 3; }

  .help .faq { grid-column: 2; grid-row: 1; }
  .help .wall, .help .lead-col { grid-column: 1; grid-row: 1; }
  .help--support .support { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-lg); align-self: start; } /* stays beside the answers as they open */
  .help--support .faq { grid-column: 1; grid-row: 1; }

  .pairs { column-gap: var(--space-xl); }
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc { grid-template-columns: minmax(0, 1fr) var(--col-side); column-gap: var(--space-xl); row-gap: var(--space-2xs); align-items: baseline; padding-block: var(--space-lg); }
  .doc > p { grid-column: 2; grid-row: 1; }
  .doc > a { grid-column: 2; }

  /* The rail is taller than a laptop screen (16 sections plus the questions card), so it scrolls inside itself while it sticks */
  /* The rail runs the policy's full height. The questions card and dates come first and scroll away; the
     contents list is last and sticks, sized to the screen with its own scroll when the screen is short */
  .legal .toc { grid-column: 2; grid-row: 1; align-self: stretch; align-content: start; }
  .toc__index { position: sticky; top: var(--space-lg); display: grid; gap: var(--space-sm); max-height: calc(100vh - 2 * var(--space-lg)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .legal .policy { grid-column: 1; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .btn:active, .badge:active, .switch label:active { transform: none; }
  .switch__track::before { transition: none; }
  .sheet-list details[open] > .answer, .sheet-list details[open] > .guide__body { animation-name: nu-fade; }
}

/* Guides list: with large text the numeral moves above the title, so the title keeps the row's width */
.guides { container-type: inline-size; }
@container (max-width: 20em) {
  .guide__sum { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3xs); }
  .guide__n { grid-row: auto; }
}