/* ============================================================
   LarkWard site composition layer, v2
   ------------------------------------------------------------
   Same design system, new composition. Every color, size, radius,
   shadow and duration resolves to a LarkWard Design System token
   (var(--…)). No brand value is invented here.

   What changed from v1, and why:

   ACCENT LOCK. One accent, page-wide. Indigo (--spruce-700) is
   brand, structure and every interactive surface. Sunrise
   (--dawn-500 / --dawn-800) is the single accent gesture: fine
   rules, marks, and type on dark. Green and amber are gone from
   marketing surfaces; they stay available for real product state.
   Sunrise is never body or display type on paper: #FF8C5A on
   --cream measures 2.05:1 and fails AA at every size.

   SHAPE LOCK. Two radii only. Interactive controls are pill.
   Surfaces and photography are --radius-lg. Nothing else.

   THEME LOCK. The page is light from top to bottom. Exactly one
   deliberate inversion, the closing band, where the dawn
   photograph resolves the "first light" idea. v1 inverted four
   times at random.

   NO CARDS. Hierarchy comes from hairlines, type scale and space.
   Boxes are used only where elevation means something.

   NO DECORATIVE ICONS. v1 inlined 18 icon paths on this page.
   The mark is the only SVG that survives.
   ============================================================ */

/* ---------------------------------------------------------- shell */

.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--narrow { max-width: var(--container-md); }
.container--mid { max-width: var(--container-lg); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 60;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-card);
  color: var(--text-link);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-weight: var(--weight-semibold);
  transition: top var(--duration-fast) var(--ease-calm);
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* ---------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--surface-page) 84%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 68px;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  flex: none;
}
.brand-link:hover { text-decoration: none; }
.brand-link svg { width: 27px; height: 27px; flex: none; }

.lark { color: var(--ink-900); }
.ward { color: var(--brand-primary); }

/* The mark. These were inline style attributes on the SVG paths, which the
   strict CSP (style-src 'self', no 'unsafe-inline') blocks: the mark rendered
   invisible in production. Kept as classes so the CSP stays strict. */
.mark__wing { stroke: var(--spruce-700); }
.mark__dot  { fill: var(--dawn-500); }

.site-nav { display: flex; align-items: center; gap: var(--space-8); }
.site-nav a {
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-700);
  padding-block: var(--space-2);
}
.site-nav a:hover { color: var(--brand-primary); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--brand-primary); }
/* The current page gets a hairline, not a coloured dot. */
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brand-primary);
}

.header__cta { flex: none; min-height: var(--control-h-sm); padding-inline: var(--space-5); }

/* ---------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h-md);
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-calm),
              border-color var(--duration-fast) var(--ease-calm),
              box-shadow var(--duration-fast) var(--ease-calm),
              transform var(--duration-fast) var(--ease-calm);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn--primary {
  background: var(--brand-primary);
  color: var(--text-on-spruce);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--brand-primary-hover); box-shadow: var(--shadow-md); }

.btn--secondary {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--border-strong);
}
.btn--secondary:hover { border-color: var(--ink-700); background: var(--surface-card); }

.btn--onDark { background: var(--paper); color: var(--spruce-900); }
.btn--onDark:hover { background: var(--spruce-50); }

.btn--lg { min-height: var(--control-h-lg); padding: 0 var(--space-8); font-size: var(--text-base); }

/* ---------------------------------------------------------- type */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  /* dawn-800, not dawn-700: at 12px on --cream, dawn-700 measures 3.62:1 and
     fails AA. dawn-800 measures 5.28:1. */
  color: var(--dawn-800);
  margin: 0 0 var(--space-4);
}

.d-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(2.5rem, 1.5rem + 3.4vw, 3.75rem);
  /* 1.06, not --leading-tight 1.1, because the italic emphasis line carries
     descenders (y, p) that clip at tighter values. Paired with padding-bottom
     below as descender reserve. */
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
  padding-bottom: 0.08em;
  text-wrap: balance;
}

.d-section {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.875rem, 1.25rem + 2.4vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
  padding-bottom: 0.08em;
  text-wrap: balance;
  max-width: 20ch;
}
.d-section--wide { max-width: 26ch; }

/* Emphasis is italic of the SAME family, in the brand primary. The one
   typographic signature v1 got right. Sunrise cannot be used here: it fails
   contrast on paper at every size. */
.d-hero em, .d-section em { font-style: italic; color: var(--brand-primary); }

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink-600);
  margin: var(--space-6) 0 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.lead--tight { margin-top: var(--space-5); }

.body-copy {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-700);
  margin: 0;
  max-width: 62ch;
}

/* ---------------------------------------------------------- sections */

/* overflow-x: clip, not hidden: full-bleed children use 100vw, which overhangs
   by the scrollbar width. clip contains it without creating a scroll container,
   so the sticky header keeps working. */
.section { padding-block: clamp(4.5rem, 8vw, 8rem); overflow-x: clip; }
.section--paper { background: var(--surface-card); }
.section--tint  { background: var(--spruce-50); }
.section--rule  { border-top: 1px solid var(--border-soft); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

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

.hero {
  position: relative;
  overflow-x: clip;
  background:
    radial-gradient(80% 60% at 12% 0%, color-mix(in srgb, var(--dawn-200) 46%, transparent), transparent 70%),
    linear-gradient(180deg, var(--spruce-50) 0%, var(--surface-page) 62%);
}

.hero__inner {
  position: relative;
  display: grid;
  /* 1.32fr, not 1.08fr: the headline needs roughly 25 characters of Newsreader
     per line to set in two lines rather than three. Font scale and column width
     are planned together, never separately. */
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: center;
  /* Asymmetric block padding. Equal padding left a floating band of dead space
     at the bottom of the fold with the next section's eyebrow peeking into it,
     which reads as a layout bug rather than as air. */
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(5rem, 9vw, 8rem);
}

.hero__copy { max-width: 42rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

/* Status chip. The dot is the one place a coloured dot earns its keep: it
   marks real state (pre-launch), not decoration. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  border: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-600);
}
.chip__dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  flex: none;
}

/* The photograph bleeds off the right edge of the viewport, and the device
   straddles its left edge onto the page. The overlap is what keeps this from
   reading as two unrelated blocks. */
.hero__art { position: relative; }
.hero__photo {
  margin-right: calc(50% - 50vw);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero__photo img {
  display: block;
  width: 100%;
  height: clamp(26rem, 44vw, 34rem);
  object-fit: cover;
  /* Favour the lower frame: the table, the face-down phone and the mug are the
     emotional content. The bare wall above is not. */
  object-position: 52% 64%;
}
/* Compounded with .device deliberately. .device sets position: relative and is
   declared later in this file; at equal specificity it would win and drop the
   phone back into normal flow, which stretched the hero to 1000px once already. */
.device.hero__device {
  position: absolute;
  left: -5.5rem;
  bottom: -2.75rem;
  width: 13.5rem;
}

/* ---------------------------------------------------------- device frame

   A bezel around a real rendered screen. The screens are built in the design
   system at design/app-screens.html and rendered by scripts/render-screens.mjs,
   so they are the intended iOS design rather than marketing invention. They are
   never presented as a shipped product: every placement carries the design
   preview label.
   ---------------------------------------------------------- */

.device {
  position: relative;
  border-radius: 2.5rem;
  padding: 0.5rem;
  background: linear-gradient(160deg, var(--ink-700) 0%, var(--spruce-900) 46%, var(--ink-800) 100%);
  box-shadow: var(--shadow-xl), 0 0 0 1px color-mix(in srgb, var(--ink-900) 22%, transparent);
}
.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2rem;
  background: var(--surface-page);
}

/* ---------------------------------------------------------- the exhibit */

.exhibit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  /* Centred, not start-aligned: the device is roughly twice the transcript's
     height, and top-aligning left the thread stranded in the upper corner. */
  align-items: center;
}

/* A typeset transcript, deliberately NOT a simulated phone screen. The product
   does not exist yet, so a fake screenshot would be both an AI tell and a
   claim we are not allowed to make. */
.transcript {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-6);
  border-left: 2px solid var(--border-default);
}
.transcript li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-6);
}
.transcript li + li { border-top: 1px solid var(--border-soft); }
.transcript__who {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 0.45em;
}
/* text-lg, not text-md: at 18px the raw thread read as a caption beside the
   read panel. The two halves of the exhibit have to feel like peers. */
.transcript__line {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-600);
}
.transcript li[data-self] .transcript__line { color: var(--text-strong); font-weight: var(--weight-medium); }

/* The exhibit's right half is the real product screen: raw input on the left,
   what the app actually shows on the right. */
.exhibit__device { width: min(15rem, 100%); margin-inline: auto; }

.read {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-top: 2px solid var(--brand-accent);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.read__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.read__call {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: var(--space-3) 0 0;
}
.read__reasons { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.read__reasons li {
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-700);
}
.read__foot {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-600);
}
.read__foot strong { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* Honesty label. Load-bearing, not decoration: nothing is released. */
.preview-note {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* ---------------------------------------------------------- ruled propositions */

.props { margin: 0; padding: 0; }
.prop {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1rem, 4vw, 3.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--border-default);
}
.prop:last-child { border-bottom: 1px solid var(--border-default); }
.prop h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 0;
}

/* ---------------------------------------------------------- risk index */

.risks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 6vw, 5rem);
}
/* Set large on purpose. This is the most quotable content on the page and the
   section carries no photograph, so the type has to be the visual. */
.risks li {
  padding-block: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--border-default);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.375rem, 0.9rem + 1.5vw, 2rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

/* ---------------------------------------------------------- product tour

   Two screens, side by side, each with its own claim. Deliberately not the
   competitor pattern of five callout labels pinned around one device.
   ---------------------------------------------------------- */

.tour {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.tour__notes { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.tour__device { width: min(15rem, 100%); }
.tour h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.375rem, 1rem + 1.1vw, 1.75rem);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
}
.tour p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--ink-700); margin: 0; max-width: 34ch; }

/* ---------------------------------------------------------- fairness */

.fair {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.fair__art {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.fair__art img {
  display: block;
  width: 100%;
  height: clamp(20rem, 38vw, 32rem);
  object-fit: cover;
}
.steps { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid; gap: 0; }
.steps li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-default);
}
.steps b {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--dawn-800);
}
.steps span { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink-700); }

/* ---------------------------------------------------------- data discipline

   A full-bleed letterbox photograph over the statements. By this point in the
   page four consecutive sections were hairline-ruled lists: the geometry
   differed but the texture was identical, which is layout repetition wearing a
   disguise. This section carries no rules at all.
   ---------------------------------------------------------- */

.band-photo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(11rem, 24vw, 19rem);
  overflow: hidden;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.band-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}

.strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.strip h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.625rem);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
}
.strip p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink-700); margin: 0; }

/* ---------------------------------------------------------- FAQ */

.faq { max-width: var(--container-md); }
.faq details { border-top: 1px solid var(--border-default); }
.faq details:last-of-type { border-bottom: 1px solid var(--border-default); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-6);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--ink-400);
  transition: transform var(--duration-normal) var(--ease-calm);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-700);
  margin: 0 0 var(--space-6);
  max-width: 62ch;
}

/* ---------------------------------------------------------- closing band */

/* The single deliberate theme inversion on the page. The dawn photograph is
   the "first light" idea paying off, not a random dark section. */
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-inverse);
  text-align: center;
}
.closing__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 78%;
}
/* Scrim. Heavy enough that the headline clears AA over the warm band, light
   enough that the dawn actually reads. The first pass was 82% at the top and
   buried the photograph entirely. */
.closing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--spruce-900) 72%, transparent) 0%,
    color-mix(in srgb, var(--spruce-900) 58%, transparent) 48%,
    color-mix(in srgb, var(--spruce-900) 46%, transparent) 100%);
}
.closing__inner { position: relative; padding-block: clamp(5rem, 10vw, 9rem); }
.closing__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-dark);
  margin: 0;
  padding-bottom: 0.08em;
  text-wrap: balance;
}
/* On the dark band sunrise finally becomes usable type: dawn-400 on
   spruce-900 measures 8.8:1. */
.closing__title em { font-style: italic; color: var(--dawn-400); }
.closing__sub {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--spruce-200);
  max-width: 38rem;
  margin: var(--space-6) auto 0;
}
.closing__actions { margin-top: var(--space-10); }

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

.footer { margin-top: auto; background: var(--surface-card); border-top: 1px solid var(--border-soft); }
.footer__top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-block: var(--space-12) var(--space-10);
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}
.footer__brand svg { width: 25px; height: 25px; flex: none; }
.footer__blurb {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
  max-width: 20rem;
}
.footer__col h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer__col a { font-size: var(--text-sm); color: var(--ink-700); }
.footer__col a:hover { color: var(--brand-primary); }

.footer__legal {
  border-top: 1px solid var(--border-soft);
  padding-block: var(--space-6) var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.footer__entity { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-muted); margin: 0; }
.footer__entity strong { color: var(--ink-700); font-weight: var(--weight-semibold); }
.footer__tag {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------------------------------------------------------- motion
   MOTION_INTENSITY 5. Every animation here is motivated:

   .reveal      hero entry stagger. Hierarchy: the eye is walked down the
                value proposition in the order it should be read.
   .rise-in     scroll reveal on section openers. Hierarchy.
   .exhibit     the transcript rows resolve first, then the read. Storytelling:
                that sequence IS the product (input, then judgment).
   :hover/:active on controls. Feedback.

   No marquee, no pin, no scroll hijack, no parallax.

   The hidden state below is scoped to [data-reveal-active], which only
   scripts/reveal.js sets. No script, or reduced motion, means nothing is ever
   hidden. Content is never gated behind JavaScript.
   ---------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; animation: rise var(--duration-slow) var(--ease-enter) forwards; }
  .d1 { animation-delay: 60ms; }
  .d2 { animation-delay: 150ms; }
  .d3 { animation-delay: 240ms; }
  .d4 { animation-delay: 330ms; }
}

[data-reveal-active] [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
[data-reveal-active] [data-reveal][data-revealed] {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-slow) var(--ease-enter),
              transform var(--duration-slow) var(--ease-enter);
}

/* The exhibit is the one sequenced moment on the page: the thread resolves
   line by line, then the read arrives. That order is the product. */
[data-reveal-active] .transcript li:nth-child(2)[data-revealed] { transition-delay: 70ms; }
[data-reveal-active] .transcript li:nth-child(3)[data-revealed] { transition-delay: 140ms; }
[data-reveal-active] .transcript li:nth-child(4)[data-revealed] { transition-delay: 210ms; }
[data-reveal-active] .read[data-revealed] { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
  * { animation: none !important; transition-duration: 1ms !important; }
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-10); padding-block: var(--space-12) var(--space-16); }
  .hero__copy { max-width: none; }
  .hero__copy .d-hero { max-width: 16ch; }
  /* Stacked, the device sits centred on the photo's lower edge instead of
     straddling its left. Same overlap idea, no cramped corner. */
  .hero__art { padding-bottom: 5.5rem; }
  .hero__photo { margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); border-radius: 0; }
  .hero__photo img { height: clamp(17rem, 46vw, 24rem); }
  .device.hero__device { left: 50%; transform: translateX(-50%); bottom: 0; width: 13rem; }
  .exhibit { grid-template-columns: 1fr; }
  .exhibit__device { width: min(15rem, 100%); }
  .tour { grid-template-columns: 1fr; gap: var(--space-10); }
  .fair { grid-template-columns: 1fr; gap: var(--space-8); }
  .prop { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}

@media (max-width: 760px) {
  .prop { grid-template-columns: 1fr; gap: var(--space-4); }
  .risks { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr; gap: var(--space-8); }
  .steps li { grid-template-columns: 1fr; gap: var(--space-2); }
  .transcript li { grid-template-columns: 1fr; gap: var(--space-1); }
  .transcript__who { padding-top: 0; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .site-nav { gap: var(--space-5); }
}

@media (max-width: 640px) {
  /* The header CTA duplicates the nav's Contact route at this width. Drop it
     rather than wrap the bar onto a second row. */
  .header__cta { display: none; }
  /* Stacked pills of unequal width read as ragged. Match them and gain the
     larger tap target at the same time. */
  .hero__actions { gap: var(--space-3); }
  .hero__actions .btn { flex: 1 0 100%; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------- capability duo

   Two screens side by side, each with its own claim. Distinct from .tour
   (one device plus stacked notes) so the two product sections do not read as
   the same layout twice.
   ---------------------------------------------------------- */

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}
.duo__item { display: grid; gap: var(--space-8); justify-items: start; }
.duo__device { width: min(14.5rem, 100%); }
.duo h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}
.duo p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--ink-700); margin: 0; max-width: 36ch; }

@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; gap: var(--space-12); }
}

/* ---------------------------------------------------------- controls

   Signals are meaningless alone and meaningful together, plus the one place
   name-based tracking is defeated and ours is not (Spine §8 control-surface
   integrity).

   Deliberately makes no reference to what a phone already does. An earlier cut
   opened by conceding that Apple had rebuilt Screen Time for iOS 27. Accurate,
   and the wrong thing to say on our own homepage: it tells a parent they
   already have part of this for free, and it dates the page to an OS version.
   The positioning argument still lives in the Spine; it does not belong here.
   ---------------------------------------------------------- */

.controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* The claim comparison. Not a scored bar, not a tick table: two quotes, one
   plainly longer than the other, which is the whole argument. */
.says { margin-top: clamp(2rem, 4vw, 3rem); }
/* One statement, not a comparison. The two-row "a phone can say / we can say"
   version benchmarked us against the device and conceded ground unnecessarily. */
.says__row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--border-default);
  margin: 0;
}
.says__who {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.says__what {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.625rem);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
}
.says__row--us .says__who { color: var(--dawn-800); }

.controls__aside { display: grid; gap: var(--space-8); justify-items: start; }
.controls__device { width: min(14rem, 100%); }
.controls__aside h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.5rem);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}
.controls__aside p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--ink-700); margin: 0; max-width: 38ch; }

@media (max-width: 1000px) {
  .controls { grid-template-columns: 1fr; gap: var(--space-12); }
}

/* ============================================================
   Interior pages: Company, Contact, Privacy, Terms
   ------------------------------------------------------------
   Same rules as the home page. No cards for content, hairlines
   and space instead, one accent, one theme inversion per page
   (the closing band). The founder bio keeps a surface because
   elevation there means something: it is the one human face on
   the site.
   ============================================================ */

.page-hero {
  position: relative;
  overflow-x: clip;
  background:
    radial-gradient(70% 60% at 14% 0%, color-mix(in srgb, var(--dawn-200) 40%, transparent), transparent 72%),
    linear-gradient(180deg, var(--spruce-50) 0%, var(--surface-page) 70%);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
}
.page-hero .lead { max-width: 54ch; }

/* Company facts. The Apple-verification payload: readable, quotable, plain. */
.facts { width: 100%; border-collapse: collapse; text-align: left; }
.facts th, .facts td {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-default);
  vertical-align: top;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.facts th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  width: 28%;
  padding-right: var(--space-8);
}
.facts td { color: var(--text-body); }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 1px solid var(--border-default); }
address.postal { font-style: normal; line-height: var(--leading-relaxed); color: var(--text-body); }
address.postal strong { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* Beliefs / routes: ruled two-column rows, never a card grid. */
.tenets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 4.5rem); }
.tenet { padding-block: clamp(1.5rem, 2.5vw, 2.25rem); border-top: 1px solid var(--border-default); }
.tenet h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}
.tenet p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink-700); margin: 0; }

.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--brand-primary);
  max-width: 34ch;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-bottom: 0.08em;
}

/* Contact routes. Each row is one way in, hairline separated. */
.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 4.5rem); }
.route { padding-block: clamp(1.5rem, 2.5vw, 2rem); border-top: 1px solid var(--border-default); }
.route h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}
.route p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink-700); margin: 0 0 var(--space-3); }
.route a { font-weight: var(--weight-semibold); word-break: break-word; }

/* Leadership. The one place a surface is earned: these are the only real
   faces on the site, and elevation says "this is a person, not a claim". */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.bio {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.bio__portrait {
  display: block;
  width: 100%;
  max-width: 18rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;   /* faces sit high in a 4:5 crop */
  border-radius: var(--radius-md);
  background: var(--surface-sunk);
  margin-bottom: var(--space-6);
}
.bio__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 0;
}
.bio__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--dawn-800);
  margin: var(--space-2) 0 0;
}
/* :not() keeps this off the name and role, which are also <p>. A bare `.bio p`
   (0,1,1) outranks `.bio__name` (0,1,0) and silently shrank the founder's name
   to body size once already. */
.bio p:not(.bio__name):not(.bio__role) {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-700);
  margin: var(--space-5) 0 0;
  max-width: 62ch;
}
.creds { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.creds li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-600);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

/* Legal pages */
.legal { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem); max-width: var(--container-md); }
.legal__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.legal__head h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
  padding-bottom: 0.08em;
}
.legal__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
}
.notice {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--spruce-50);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--brand-accent);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.notice p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink-700); }
.prose { max-width: 66ch; }
.prose h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
}
.prose h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.prose h3 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  margin: var(--space-8) 0 var(--space-3);
  letter-spacing: var(--tracking-normal);
}
.prose p, .prose li { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--ink-700); }
.prose ul { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose a { font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 2px; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; color: var(--ink-800); }
.back-home {
  display: inline-flex;
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.note-fine { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-muted); margin-top: var(--space-8); max-width: 62ch; }

@media (max-width: 860px) {
  .people { grid-template-columns: 1fr; }
  .bio__portrait { max-width: 14rem; }
}

@media (max-width: 760px) {
  .tenets, .routes { grid-template-columns: 1fr; }
  .facts th, .facts td { display: block; width: auto; padding-right: 0; }
  .facts th { border-bottom: none; padding-bottom: var(--space-1); }
  .facts td { border-top: none; padding-top: 0; }
  .facts tr:last-child td { border-bottom: 1px solid var(--border-default); }
}