/* Hallmark · macrostructure: Narrative Workflow (/) · Long Document (/privacy) · Conversational FAQ (/support)
 * genre: atmospheric · tone: calm, trustworthy, plain-spoken
 * theme: custom "Fam360 Web" (vibe: "family safety, quiet infrastructure"
 *   · paper oklch(11% 0.02 280) #070810 · accent oklch(58% 0.21 284) #6E5BF2 cool-indigo
 *   · Instrument Serif display + Instrument Sans body + Geist Mono labels)
 * axes: dark paper / classical-serif display / cool accent
 *   — differs from appstore/tokens.css (dark / grotesk-sans / cool) on display style
 * nav: N9 edge-aligned minimal · footer: Ft4 dense colophon — shared across all three pages,
 *   because within one site chrome consistency beats per-page rotation
 * enrichment: real App Store captures from appstore/out/6.5, no drawn device chrome
 * motion: 2 primitives — TOC active-section highlight, FAQ disclosure fade
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */

@import url('tokens.css');

/* ---------------------------------------------------------------- base ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  /* clip, never hidden — `hidden` on the root silently breaks position:sticky in Safari. */
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 400;
  font-style: normal;
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
  min-width: 0;
}

p {
  margin: 0;
}

a {
  color: var(--color-accent-lift);
  text-decoration-color: rgba(179, 166, 255, 0.4);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--color-ink);
  text-decoration-color: currentColor;
}

/* Never animate the focus ring — it has to appear the instant focus lands. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  transition: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: #fff;
  border-radius: 0 0 var(--radius-md) 0;
}

.skip:focus {
  left: 0;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.lede {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  color: var(--color-ink-muted);
  max-width: 46ch;
}

/* Placeholder that MUST be replaced before App Store submission. Loud on purpose —
   red reads as "do not ship", where amber would read as a note. See site/README.md. */
.todo {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 500;
  color: var(--color-todo);
  background: var(--color-todo-tint);
  border: 1px dashed var(--color-todo);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.45em;
  word-break: break-word;
}

/* ------------------------------------------------- nav · N9 edge-aligned ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 68px;
  padding-block: var(--space-sm);
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.nav__mark img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-md), 3vw, var(--space-xl));
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  /* Single words only — a nav link that wraps to two lines is an unhittable target. */
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.nav__links a:hover,
.nav__links a[aria-current='page'] {
  color: var(--color-ink);
}

.nav__links a[aria-current='page'] {
  box-shadow: inset 0 -1px 0 0 var(--color-accent-lift);
}

@media (max-width: 30rem) {
  .nav__inner {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .nav__links {
    gap: var(--space-lg);
  }
}

/* ------------------------------------------------------------ hero (/) ---- */

.hero {
  padding-block: clamp(var(--space-3xl), 11vw, var(--space-5xl)) var(--space-3xl);
  border-bottom: 1px solid var(--color-rule);
  position: relative;
  isolation: isolate;
}

/* A single soft indigo lift behind the headline. One gradient, not a light show. */
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  z-index: -1;
  background: radial-gradient(
    58% 74% at 22% 18%,
    rgba(110, 91, 242, 0.26) 0%,
    rgba(59, 39, 174, 0.09) 46%,
    transparent 72%
  );
  pointer-events: none;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  letter-spacing: -0.015em;
  max-width: 15ch;
  margin-block: var(--space-md) var(--space-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding-inline: var(--space-lg);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background: var(--color-accent);
  color: #fff;
}

.btn--primary:hover {
  background: #7d6cf5;
  color: #fff;
}

.btn--primary:active {
  transform: translateY(1px);
}

.btn--quiet {
  border-color: var(--color-rule-strong);
  color: var(--color-ink-muted);
}

.btn--quiet:hover {
  border-color: var(--color-ink-faint);
  color: var(--color-ink);
}

.btn--quiet:active {
  transform: translateY(1px);
}

/* ------------------------------------ stages · Narrative Workflow (/) ---- */

.stages {
  padding-block: var(--space-4xl);
}

.stage {
  padding-block: clamp(var(--space-2xl), 6vw, var(--space-4xl));
  border-bottom: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
  align-items: center;
}

.stage:last-of-type {
  border-bottom: 0;
}

.stage--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--measure);
}

/* Number sits ABOVE the heading, in the same column. The tag-left / heading-right
   two-column split is the single most reliable templated-editorial tell. */
.stage__num {
  font-family: var(--font-mono);
  font-size: var(--text-stage);
  font-weight: 500;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.55;
  display: block;
  margin-bottom: var(--space-sm);
}

.stage__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
  max-width: 18ch;
}

.stage__body {
  color: var(--color-ink-muted);
  max-width: 52ch;
}

.stage__body + .stage__body {
  margin-top: var(--space-md);
}

.stage__shot {
  margin: 0;
}

.stage__shot img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-rule-strong);
}

.stage__shot figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.code-chip {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-accent-tint);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--color-ink);
}

@media (max-width: 60rem) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage__shot {
    max-width: 340px;
  }
}

/* ------------------------------------------------- "what it doesn't do" ---- */

.plainly {
  padding-block: var(--space-4xl);
  border-top: 1px solid var(--color-rule);
  background: var(--color-paper-2);
}

.plainly__head {
  max-width: var(--measure);
  margin-bottom: var(--space-2xl);
}

.plainly__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  margin-block: var(--space-sm) var(--space-md);
}

.ledger {
  display: grid;
  /* 320px, not 260px: at the 1084px content width 260 auto-fits four columns, and six items
     across four columns leaves two empty cells with the grid's hairline background showing
     through them. 320 gives three columns, so six items make two full rows. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ledger__item {
  background: var(--color-paper-2);
  padding: var(--space-lg);
}

.ledger__key {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-lift);
  display: block;
  margin-bottom: var(--space-xs);
}

.ledger__val {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: 1.55;
}

/* ------------------------------------------------------------- CTA strip ---- */

.cta {
  padding-block: var(--space-4xl);
  text-align: center;
}

.cta__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  margin-bottom: var(--space-lg);
  max-width: 20ch;
  margin-inline: auto;
}

.cta .btn {
  margin-inline: auto;
}

/* ------------------------------------------- doc layout (/privacy) ---- */

.doc-head {
  padding-block: var(--space-3xl) var(--space-2xl);
  border-bottom: 1px solid var(--color-rule);
}

.doc-head__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  margin-block: var(--space-sm) var(--space-md);
}

.doc-head__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.doc {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
  padding-block: var(--space-3xl) var(--space-4xl);
  align-items: start;
}

.toc {
  position: sticky;
  top: 92px;
  font-size: var(--text-xs);
}

.toc__title {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-sm);
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--color-rule);
}

.toc li a {
  display: block;
  padding: 6px var(--space-sm);
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--color-ink-faint);
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.toc li a:hover {
  color: var(--color-ink);
}

/* Motion primitive 1 of 2 — the active section marker. */
.toc li a.is-active {
  color: var(--color-ink);
  border-left-color: var(--color-accent-lift);
}

.prose {
  max-width: var(--measure);
}

.prose section {
  scroll-margin-top: 92px;
  margin-bottom: var(--space-3xl);
}

.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  margin-bottom: var(--space-md);
  padding-top: var(--space-sm);
}

.prose h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--color-ink);
  margin-block: var(--space-lg) var(--space-xs);
}

.prose p {
  color: var(--color-ink-muted);
  margin-bottom: var(--space-md);
}

.prose ul {
  color: var(--color-ink-muted);
  margin-block: 0 var(--space-md);
  padding-left: 1.15em;
}

.prose li {
  margin-bottom: var(--space-xs);
}

.prose li::marker {
  color: var(--color-ink-faint);
}

.prose strong {
  color: var(--color-ink);
  font-weight: 600;
}

.callout {
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.callout p:last-child {
  margin-bottom: 0;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.table-scroll table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: var(--text-sm);
}

.table-scroll th,
.table-scroll td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
  color: var(--color-ink-muted);
}

.table-scroll th {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-faint);
  font-weight: 500;
  white-space: nowrap;
}

.table-scroll tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 60rem) {
  .doc {
    grid-template-columns: minmax(0, 1fr);
  }

  .toc {
    position: static;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
  }
}

/* ------------------------------------- FAQ · Conversational (/support) ---- */

.faq {
  padding-block: var(--space-2xl) var(--space-4xl);
  max-width: var(--doc-max);
}

.faq__group + .faq__group {
  margin-top: var(--space-3xl);
}

.faq__group-title {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-md);
}

details.qa {
  border-bottom: 1px solid var(--color-rule);
}

details.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  min-height: 44px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.25;
  color: var(--color-ink);
}

details.qa summary::-webkit-details-marker {
  display: none;
}

details.qa summary:hover {
  color: var(--color-accent-lift);
}

.qa__sign {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  position: relative;
  color: var(--color-ink-faint);
}

.qa__sign::before,
.qa__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out);
}

.qa__sign::after {
  transform: rotate(90deg);
}

details.qa[open] .qa__sign::after {
  transform: rotate(0deg);
}

.qa__body {
  padding-bottom: var(--space-lg);
  color: var(--color-ink-muted);
  max-width: 62ch;
}

.qa__body p + p {
  margin-top: var(--space-md);
}

.qa__body ol,
.qa__body ul {
  margin-block: var(--space-sm) 0;
  padding-left: 1.15em;
}

.qa__body li {
  margin-bottom: var(--space-2xs);
}

/* Motion primitive 2 of 2 — the disclosure fade. Opacity and transform only. */
details.qa[open] .qa__body {
  animation: qa-in var(--dur-mid) var(--ease-out) both;
}

@keyframes qa-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.contact-card {
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  margin-bottom: var(--space-2xl);
}

.contact-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  margin-block: var(--space-xs) var(--space-sm);
}

.contact-card p {
  color: var(--color-ink-muted);
  max-width: 54ch;
}

.contact-card__addr {
  margin-top: var(--space-lg);
  font-size: 1.05rem;
}

/* ------------------------------------------ footer · Ft4 dense colophon ---- */

.foot {
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-2xl) var(--space-3xl);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.75;
  color: var(--color-ink-faint);
}

.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
}

.foot__mark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-ink);
  margin-bottom: var(--space-2xs);
}

.foot h2 {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-xs);
  font-family: var(--font-mono);
  font-weight: 500;
}

.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot a {
  color: var(--color-ink-faint);
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  min-height: 28px;
}

.foot a:hover {
  color: var(--color-ink);
}

.foot__rule {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin-block: 0 var(--space-lg);
}

.foot__fine {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  color: var(--color-ink-faint);
}