/* ==========================================================================
   SpeakVeil — Impeccable + Taste Design Stylesheet
   Quiet luxury, gallery-airy editorial spacing, single Clay accent (#D97757),
   and hardware-accelerated GSAP motion graphics (transform & opacity only).
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Warm Paper palette (from brand.css) */
  --paper: #fcfcfb;
  --paper-2: #f5f3ef;
  --paper-3: #ece9e2;
  --surface: #ffffff;

  /* Warm Ink palette */
  --ink: #1f1e1b;
  --ink-2: #1a1917;
  --ink-3: #262522;
  --ink-deep: #141412;

  /* Text tokens */
  --fg: #1f1e1b;
  --muted: #5f5a53;
  --subtle: #6b665e;
  --cream: #f2f0eb;
  --muted-dark: #b4b1a9;

  /* Single Accent Rule: Clay is the ONLY accent */
  --clay: #d97757;
  --clay-dark: #a84a29;
  --clay-tint: #fdf1ea;
  --clay-tint-2: #f9dccd;

  /* Hairlines */
  --line: rgba(31, 30, 27, 0.12);
  --line-strong: rgba(31, 30, 27, 0.2);
  --line-dark: rgba(242, 240, 235, 0.12);
  --line-dark-strong: rgba(242, 240, 235, 0.22);

  /* Fonts */
  --display: "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;
  --ui: "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;

  /* Easing (Motion Design tokens) */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Elevation (tinted to warm ink, never zero-offset neon glow) */
  --shadow-soft: 0 24px 60px -18px rgba(31, 30, 27, 0.1),
                 0 4px 14px -4px rgba(31, 30, 27, 0.05),
                 0 0 0 1px rgba(31, 30, 27, 0.08);
  --shadow-stage: 0 40px 100px -24px rgba(20, 20, 18, 0.28),
                  0 12px 32px -8px rgba(20, 20, 18, 0.16),
                  0 0 0 1px rgba(31, 30, 27, 0.1);
}

html[data-site-theme="ink"] {
  --paper: #141412;
  --paper-2: #1a1917;
  --paper-3: #22211e;
  --surface: #1f1e1b;
  --fg: #f2f0eb;
  --muted: #b4b1a9;
  --subtle: #9a958b;
  --line: rgba(242, 240, 235, 0.11);
  --line-strong: rgba(242, 240, 235, 0.2);
  --clay-tint: rgba(217, 119, 87, 0.14);
  --clay-tint-2: rgba(217, 119, 87, 0.26);
}

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

/* Browser surfaces themed per Impeccable craft-floor */
::selection {
  background: var(--clay-tint-2);
  color: var(--ink);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--paper);
  color: var(--fg);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  caret-color: var(--clay);
}

body {
  background-color: var(--paper);
  color: var(--fg);
  position: relative;
  transition: background-color 240ms var(--ease-out-quart), color 240ms var(--ease-out-quart);
}

/* Static film grain on fixed pseudo-element only (Performance Guardrail) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.11  0 0 0 0 0.10  0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

html[data-site-theme="ink"] body::before {
  mix-blend-mode: screen;
  opacity: 0.03;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.22em;
}

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* ==========================================================================
   Typography (Impeccable Craft Floor: max 6rem display, 65ch body measure)
   ========================================================================== */

.display-hero {
  font-family: var(--display);
  font-weight: 680;
  font-size: clamp(2.6rem, 5.4vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

.display-section {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(2.1rem, 3.7vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.034em;
  text-wrap: balance;
}

.display-hero em,
.display-section em {
  font-style: normal;
  color: var(--clay-dark);
}

html[data-site-theme="ink"] .display-hero em,
html[data-site-theme="ink"] .display-section em,
.on-ink .display-hero em,
.on-ink .display-section em {
  color: var(--clay);
}

.body-lg {
  font-size: clamp(1.0625rem, 1.25vw, 1.22rem);
  font-weight: 450;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

.on-ink .body-lg {
  color: var(--muted-dark);
}

.num-tabular {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Official 5-Bar Mark (from brand.css: 150, 300, 480 [Clay], 250, 110)
   Animated strictly via transform: scaleY()
   ========================================================================== */

.pw-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
}

.pw-mark i {
  display: block;
  width: 3.5px;
  height: 22px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.pw-mark i:nth-child(1) { transform: scaleY(0.31); }
.pw-mark i:nth-child(2) { transform: scaleY(0.62); }
.pw-mark i:nth-child(3) { transform: scaleY(1); background: var(--clay); }
.pw-mark i:nth-child(4) { transform: scaleY(0.52); }
.pw-mark i:nth-child(5) { transform: scaleY(0.23); }

/* ==========================================================================
   Minimalist Header (Quiet Luxury)
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 68px;
  display: flex;
  align-items: center;
  /* Opaque, not frosted: WebKit let body text read through the 86% fill as
     it scrolled under the header. --paper follows the theme. */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-nav a {
  font-size: 0.92rem;
  font-weight: 450;
  color: var(--muted);
  transition: color 180ms var(--ease-out-quart);
}

.header-nav a:hover {
  color: var(--fg);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.surface-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  transition: border-color 180ms var(--ease-out-quart), color 180ms var(--ease-out-quart);
}

.surface-switch:hover {
  color: var(--fg);
  border-color: var(--clay);
}

.surface-switch-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
}

/* Tactile Buttons (No neon glow, -1px active press) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out-quart), background-color 160ms var(--ease-out-quart), border-color 160ms var(--ease-out-quart), color 160ms var(--ease-out-quart);
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn-ink {
  background: var(--ink);
  color: var(--cream);
}

html[data-site-theme="ink"] .btn-ink,
.on-ink .btn-ink {
  background: var(--cream);
  color: var(--ink-deep);
}

.btn-ink:hover {
  background: var(--clay-dark);
  color: #ffffff;
}

html[data-site-theme="ink"] .btn-ink:hover,
.on-ink .btn-ink:hover {
  background: var(--clay);
  color: #ffffff;
}

.btn-clay {
  background: var(--clay);
  color: var(--ink-deep);
}

.btn-clay:hover {
  background: #e58a6b;
}

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--fg);
  background: transparent;
}

.on-ink .btn-ghost {
  border-color: var(--line-dark-strong);
  color: var(--cream);
}

.btn-ghost:hover {
  border-color: var(--clay);
}

.btn-lg {
  min-height: 52px;
  padding: 0 28px;
  font-size: 1rem;
}

/* ==========================================================================
   1. Asymmetric Split Hero (Taste Design Rule 4 + Live GSAP Stage)
   ========================================================================== */

.hero-section {
  padding: clamp(36px, 6vw, 96px) 0 clamp(72px, 9vw, 128px);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 85% 20%, rgba(217, 119, 87, 0.16), transparent 70%),
    var(--ink-deep);
  color: var(--cream);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Subtle 70-bar Ghost Waveform at bottom of stage (from mac-film/index.html) */
.ghost-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 10px;
  pointer-events: none;
  z-index: 1;
}

.ghost-wave i {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: rgba(31, 30, 27, 0.055);
  transform-origin: bottom;
}

.ghost-wave i.cl {
  background: rgba(217, 119, 87, 0.18);
}

html[data-site-theme="ink"] .ghost-wave i,
.on-ink .ghost-wave i {
  background: rgba(242, 240, 235, 0.06);
}

html[data-site-theme="ink"] .ghost-wave i.cl,
.on-ink .ghost-wave i.cl {
  background: rgba(217, 119, 87, 0.24);
}

/* Right Column: Authored GSAP Mac Mail + Keycap + Capsule Motion Stage */
.hero-motion-stage {
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  padding: clamp(20px, 3vw, 34px);
  box-shadow: var(--shadow-stage);
  position: relative;
  overflow: hidden;
}

/* The Live Mail Window inside Hero (from loop-mac/index.html) */
.gsap-mail-win {
  position: relative;
  z-index: 2;
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(31, 30, 27, 0.12);
  overflow: hidden;
}

.gsap-win-tb {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 8px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.gsap-win-tb i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(140, 134, 124, 0.45);
  display: block;
}

.gsap-win-tb b {
  margin: 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  transform: translateX(-18px);
}

.gsap-mail-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 46px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.gsap-mail-row b {
  width: 68px;
  color: var(--muted);
  font-weight: 500;
}

.gsap-mail-body {
  padding: 26px 24px;
  min-height: 156px;
  font-size: clamp(1.15rem, 1.6vw, 1.42rem);
  line-height: 1.42;
  font-weight: 450;
  color: var(--fg);
  position: relative;
}

.gsap-caret-idle {
  position: absolute;
  left: 24px;
  top: 29px;
  width: 3px;
  height: 1.25em;
  background: var(--clay);
  border-radius: 2px;
}

/* Word spans for SV.land */
.w {
  position: relative;
  display: inline-block;
  white-space: pre;
}

.w i.c {
  position: absolute;
  right: -5px;
  top: 0.1em;
  width: 3px;
  height: 1.08em;
  background: var(--clay);
  border-radius: 2px;
  opacity: 0;
}

/* Physical Keycaps & Black Listening Capsule Row below Mail Window */
.gsap-controls-deck {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.gsap-keys-pair {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.gsap-keycap {
  display: grid;
  place-items: center;
  height: 58px;
  padding: 0 22px;
  border-radius: 14px;
  background-color: #ffffff;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(214, 205, 185, 0.28));
  border: 1.5px solid rgba(31, 30, 27, 0.16);
  box-shadow: 0 6px 0 #d9d5ca, 0 14px 24px rgba(31, 30, 27, 0.12);
  font-family: var(--ui);
  font-weight: 600;
  font-size: 1.15rem;
  color: #1f1e1b;
}

.gsap-keycap--shortcut {
  min-width: 190px;
  letter-spacing: 0.01em;
}

/* The Black Listening Capsule (from brand.css .capsule) */
.gsap-capsule {
  position: relative;
  background: #141412;
  border-radius: 999px;
  height: 54px;
  width: 210px;
  box-shadow: 0 16px 40px rgba(20, 20, 18, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  cursor: pointer;
}

.gsap-capsule-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.gsap-bars9 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
}

.gsap-bars9 i {
  display: block;
  width: 4px;
  height: 28px;
  border-radius: 99px;
  background: #f2f0eb;
  transform-origin: center;
  transform: scaleY(0.2);
}

.gsap-bars9 i:nth-child(5) {
  background: var(--clay);
}

.gsap-capsule-write {
  color: #f2f0eb;
  font-size: 0.9rem;
  font-weight: 550;
  opacity: 0;
  visibility: hidden;
}

.gsap-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.24);
  border-top-color: var(--clay);
}

.hero-stage-footer {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--muted);
}

.stage-mode-pills {
  display: inline-flex;
  gap: 6px;
}

.stage-mode-pill {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  transition: background-color 160ms var(--ease-out-quart), color 160ms var(--ease-out-quart), border-color 160ms var(--ease-out-quart);
}

.stage-mode-pill.is-active,
.stage-mode-pill:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}



/* ==========================================================================
   2. Where it types: kinds of app, one sample each
   ========================================================================== */

.matrix-section {
  padding: clamp(72px, 9vw, 120px) 0;
  border-bottom: 1px solid var(--line);
}

.kind-board {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) 1.2fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}

.kind-title {
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 10px;
}

.kind-intro > p {
  color: var(--muted);
  font-size: 0.98rem;
  margin-bottom: 18px;
  max-width: 46ch;
}

.kind-list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.kind-btn {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 4px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 180ms var(--ease-out-quart);
}

.kind-btn small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--subtle);
}

.kind-btn:hover,
.kind-btn.is-selected {
  color: var(--fg);
}

.kind-btn.is-selected small {
  color: var(--clay-dark);
}

html[data-site-theme="ink"] .kind-btn.is-selected small {
  color: var(--clay);
}

.kind-output {
  padding: clamp(28px, 4vw, 52px);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 280px;
}

.kind-sample {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.3vw, 2.05rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--fg);
  max-width: 34ch;
}

.kind-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-size: 0.86rem;
  color: var(--muted);
}

.kind-meta strong {
  color: var(--fg);
  font-weight: 600;
}

.matrix-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
  flex-shrink: 0;
}

.matrix-style-tag {
  font-size: 0.8rem;
  color: var(--clay-dark);
  font-weight: 600;
}

html[data-site-theme="ink"] .matrix-style-tag {
  color: var(--clay);
}

/* ==========================================================================
   3. Choreographed Motion Graphic Sections (Asymmetric 2-Col, Hairline Specs)
   ========================================================================== */

.feature-section {
  padding: clamp(80px, 10vw, 136px) 0;
  border-bottom: 1px solid var(--line);
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}

.feature-grid--reverse {
  grid-template-columns: 1.15fr 1fr;
}

/* Hairline Specification List (Replaces Noisy Boxed Sub-Cards per Impeccable distill) */
.spec-list {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

.spec-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 16px;
  align-items: baseline;
}

.spec-row dt {
  font-size: 0.94rem;
  font-weight: 650;
  color: var(--fg);
}

.spec-row dd {
  font-size: 0.94rem;
  color: var(--muted);
}

.spec-row dd strong {
  color: var(--fg);
  font-weight: 600;
}

/* Live GSAP Meeting Notetaker Motion Graphic (from mac-film S3) */
.gsap-notetaker-stage {
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-soft);
}

.nt-window {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(31, 30, 27, 0.08);
}

.nt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.nt-title {
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.nt-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--clay-tint);
  color: var(--clay-dark);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

html[data-site-theme="ink"] .nt-live-pill {
  color: #f0a183;
}

.nt-live-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
}

.nt-turns {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 210px;
}

.nt-turn {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: baseline;
}

.nt-who {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

.nt-who i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--subtle);
}

.nt-turn--you .nt-who {
  color: var(--clay-dark);
}

html[data-site-theme="ink"] .nt-turn--you .nt-who {
  color: var(--clay);
}

.nt-turn--you .nt-who i {
  background: var(--clay);
}

.nt-text {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--fg);
}

.nt-footer {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--muted);
}

.nt-stop-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  font-size: 0.8rem;
}

.nt-stop-chip b {
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

/* The card's two moments: live (You and Them, the Stop button) and after Stop
   (Speaker 1 and Speaker 2, the after-Stop note). Each pair sits in one grid
   cell and cross-fades; without script the live state shows. */
.nt-state,
.nt-name {
  display: inline-grid;
  justify-items: start;
  align-items: center;
}

.nt-state > *,
.nt-name > * {
  grid-area: 1 / 1;
}

.nt-after-note {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}

#ntThemDone,
#ntAfterNote,
.nt-who--late > * {
  opacity: 0;
}

/* Live GSAP One-Click Send + Dictionary Stage (from mac-film S4) */
.gsap-send-stage {
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.send-history-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.send-menu-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.send-pill-btn {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  transition: background-color 160ms var(--ease-out-quart), color 160ms var(--ease-out-quart), border-color 160ms var(--ease-out-quart);
}

.send-pill-btn.is-active {
  background: var(--clay-tint);
  border-color: var(--clay);
  color: var(--clay-dark);
}

/* Hover only where a pointer exists, so a tap on a phone does not leave a pill looking selected. */
@media (hover: hover) {
  .send-pill-btn:hover {
    background: var(--clay-tint);
    border-color: var(--clay);
    color: var(--clay-dark);
  }
}

html[data-site-theme="ink"] .send-pill-btn.is-active {
  color: var(--clay);
}

.send-chat-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 20px 22px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.send-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
  font-weight: 600;
}

.send-chat-body {
  padding: 16px 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--fg);
}

/* ==========================================================================
   4. Clean Gallery App Tour (Titles & Captions Outside Frame per Taste Design §9A)
   ========================================================================== */

.gallery-section {
  padding: clamp(80px, 10vw, 136px) 0;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.gallery-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 28px;
}

.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.gallery-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.gallery-tabs::-webkit-scrollbar {
  display: none;
}

.gallery-tab {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--surface);
  white-space: nowrap;
  transition: background-color 160ms var(--ease-out-quart), color 160ms var(--ease-out-quart), border-color 160ms var(--ease-out-quart);
}

.gallery-tab.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

html[data-site-theme="ink"] .gallery-tab.is-active {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--ink-deep);
}

.gallery-stage {
  background: #141412;
  border-radius: 28px;
  border: 1px solid rgba(242, 240, 235, 0.14);
  padding: clamp(20px, 3.5vw, 44px);
  box-shadow: var(--shadow-stage);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
}

/* A definite width (the column, or 520px tall at the slide's ratio) lets the
   width/height attributes reserve the height before the lazy image loads, so
   the page does not grow under an anchor scroll. app.js sets --w and --h per slide. */
.gallery-stage img {
  --w: 1600;
  --h: 1293;
  width: min(100%, calc(520px * var(--w) / var(--h)));
  height: auto;
  border-radius: 14px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}

.gallery-stage.is-ios img {
  width: min(100%, calc(500px * var(--w) / var(--h)));
  border-radius: 34px;
}

/* Gallery Caption placed cleanly OUTSIDE and BELOW the stage per Taste Design §9A */
.gallery-caption-row {
  margin-top: 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.gallery-caption-title {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.gallery-caption-desc {
  font-size: 0.96rem;
  color: var(--muted);
  max-width: 62ch;
}

/* ==========================================================================
   5. Private by Architecture (Dark Ink Stage + Live GSAP SVG from mac-film S5)
   ========================================================================== */

.privacy-section {
  background: #141412;
  color: var(--cream);
  padding: clamp(88px, 11vw, 148px) 0;
  border-bottom: 1px solid rgba(242, 240, 235, 0.12);
}

.privacy-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.privacy-facts {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.privacy-fact {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--cream);
}

/* Icons line up with the first line of their text, not the middle of a long
   paragraph: the text starts half a line-gap down from the 42px icon's top. */
.privacy-fact > span:last-child {
  padding-top: calc((42px - 1.55em) / 2);
}

.privacy-fact-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(217, 119, 87, 0.14);
  border: 1.5px solid rgba(217, 119, 87, 0.5);
  color: var(--clay);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.privacy-art-wrap {
  background: #1a1917;
  border: 1px solid rgba(242, 240, 235, 0.12);
  border-radius: 28px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.privacy-art-svg {
  width: 100%;
  max-width: 460px;
  height: auto;
  overflow: visible;
}

/* ==========================================================================
   6. Pricing by platform
   ========================================================================== */

.pricing-section {
  padding: clamp(88px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--line);
}

.pricing-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 48px;
}

.billing-switch {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
}

.billing-option {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}

.billing-option.is-active {
  background: var(--ink);
  color: var(--cream);
}

html[data-site-theme="ink"] .billing-option.is-active {
  background: var(--clay);
  color: var(--ink-deep);
}

.pricing-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.pricing-col {
  padding: clamp(28px, 3.5vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
}

.pricing-col:last-child {
  border-right: none;
}

.pricing-col--featured {
  background: #141412;
  color: var(--cream);
}

.pricing-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.pricing-tier-title {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.pricing-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--clay);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.pricing-summary {
  font-size: 0.9rem;
  color: var(--muted);
  min-height: 44px;
  margin-bottom: 24px;
}

.pricing-col--featured .pricing-summary {
  color: var(--muted-dark);
}

.pricing-figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

/* Reserve the comparison inside the summary's existing 24px bottom margin.
   It adds no row height, so Free and paid plans retain their monthly baselines. */
.pricing-comparison-slot {
  position: relative;
  height: 0;
  font-size: 0.875rem;
  line-height: 20px;
  color: var(--muted);
}

.pricing-comparison-slot > [data-comparison] {
  position: absolute;
  bottom: 4px;
  white-space: nowrap;
}

.pricing-comparison-slot s {
  margin-right: 6px;
  font-size: 1.25rem;
  text-decoration-thickness: 1.5px;
}

@media (max-width: 480px) {
  .pricing-comparison-slot s {
    font-size: 1.125rem;
  }
}

.pricing-col--featured .pricing-comparison-slot {
  color: var(--muted-dark);
}

.pricing-saving {
  color: var(--fg);
  font-weight: 650;
}

.pricing-col--featured .pricing-saving {
  color: var(--cream);
}

.pricing-price {
  font-family: var(--display);
  font-weight: 650;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.pricing-cadence {
  font-size: 0.88rem;
  color: var(--muted);
}

.pricing-col--featured .pricing-cadence {
  color: var(--muted-dark);
}

.pricing-subnote {
  font-size: 0.8rem;
  color: var(--subtle);
  margin-bottom: 28px;
}

.pricing-col--featured .pricing-subnote {
  color: var(--clay);
}

.pricing-list {
  list-style: none;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-col--featured .pricing-list {
  border-top-color: rgba(242, 240, 235, 0.14);
}

/* Billing details under a plan's list: small print, not a benefit. */
.pricing-fineprint {
  margin: -16px 0 32px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--subtle);
}

.pricing-col--featured .pricing-fineprint {
  color: var(--muted-dark);
}

.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.pricing-list li::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 0.22em;
  flex-shrink: 0;
  background: var(--clay);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / contain no-repeat;
}

/* ==========================================================================
   7. Quiet FAQ & Editorial Footer
   ========================================================================== */

.faq-section {
  padding: clamp(72px, 9vw, 120px) 0;
  border-bottom: 1px solid var(--line);
}

.faq-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.faq-accordion {
  border-top: 1px solid var(--line);
}

.faq-row {
  border-bottom: 1px solid var(--line);
}

.faq-trigger {
  width: 100%;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 550;
  color: var(--fg);
}

.faq-plus {
  color: var(--clay);
  font-size: 1.25rem;
  transition: transform 180ms var(--ease-out-quart);
}

.faq-row.is-open .faq-plus {
  transform: rotate(45deg);
}

.faq-content {
  display: none;
  padding-bottom: 22px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}

.faq-row.is-open .faq-content {
  display: block;
}

.site-footer {
  padding: 56px 0 44px;
  background: var(--paper-2);
  font-size: 0.88rem;
  color: var(--muted);
}

/* Product Film Lightbox Modal */
/* A <dialog> opened with showModal(): the browser keeps the page behind it inert
   and sends Escape to it even from inside the player's own controls. */
.film-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  color: inherit;
  background: rgba(14, 14, 12, 0.88);
  backdrop-filter: blur(14px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.film-modal[open] {
  display: flex;
}

.film-modal::backdrop {
  background: transparent;
}

.film-modal-dialog {
  width: 100%;
  max-width: 1040px;
  background: #141412;
  border: 1px solid rgba(242, 240, 235, 0.18);
  border-radius: 22px;
  padding: 16px;
}

.film-modal-dialog.is-vertical {
  max-width: 420px;
}

.film-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--cream);
  font-size: 0.9rem;
  font-weight: 600;
}

.film-modal-close {
  padding: 6px 14px;
  border-radius: 999px;
  background: #262522;
  color: var(--cream);
  font-size: 0.82rem;
}

.film-modal video {
  width: 100%;
  max-height: 78vh;
  border-radius: 12px;
  background: #000;
}

/* Focus stop after the player: Tab past its last control lands here and goes back to Close. */
.film-modal-guard {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  outline: none;
}

/* Responsive Collapse (< 980px & < 768px per Taste Design Rule 7) */
@media (max-width: 980px) {
  .hero-grid,
  .feature-grid,
  .feature-grid--reverse,
  .privacy-split,
  .pricing-table,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .pricing-col {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

}

@media (max-width: 720px) {
  .header-nav {
    display: none;
  }

  .spec-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ==========================================================================
   Pricing extras, availability note, privacy connections
   ========================================================================== */

.pricing-platform {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--subtle);
  margin-bottom: 6px;
}

.pricing-col--featured .pricing-platform {
  color: var(--muted-dark);
}

.pricing-foot {
  margin-top: 28px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 78ch;
}

.pricing-foot a,
.ledger-foot a,
.faq-content a,
.inline-link {
  color: var(--clay-dark);
  text-decoration: underline;
}

.on-ink .ledger-foot a,
html[data-site-theme="ink"] .pricing-foot a,
html[data-site-theme="ink"] .faq-content a,
html[data-site-theme="ink"] .inline-link {
  color: var(--clay);
}

/* ==========================================================================
   Legal and support pages
   ========================================================================== */

.legal-main {
  padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px);
}

.legal {
  max-width: 68ch;
}

.legal h1 {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin-bottom: 10px;
}

.legal .updated {
  font-size: 0.86rem;
  color: var(--subtle);
  margin-bottom: 36px;
}

.legal .lede {
  font-size: 1.12rem;
  color: var(--muted);
  margin-bottom: 28px;
}

.legal h2 {
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.legal h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 26px 0 6px;
}

.legal p,
.legal li {
  font-size: 1rem;
  line-height: 1.68;
  color: var(--fg);
  margin: 10px 0;
}

.legal ul {
  padding-left: 1.3rem;
}

.legal a {
  color: var(--clay-dark);
  text-decoration: underline;
}

html[data-site-theme="ink"] .legal a {
  color: var(--clay);
}

.legal code {
  font-family: var(--mono);
  font-size: 0.88em;
  overflow-wrap: anywhere;
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: 5px;
}


.legal .contact-card {
  margin: 8px 0 32px;
  padding: 22px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--surface);
}

.legal .contact-card p {
  margin: 4px 0;
}

/* The legal pages carry their tabs (Privacy, Terms, Support, Refunds) in the
   sticky header. Each tab runs to the header's bottom hairline, so the current
   tab's bar sits on that line. */
.site-header--legal .header-inner {
  align-self: stretch;
}

.legal-nav {
  display: flex;
  align-self: stretch;
  gap: 0 22px;
  font-size: 0.92rem;
  white-space: nowrap;
}

.legal-nav a {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--muted);
  transition: color 180ms var(--ease-out-quart);
}

.legal-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}

.legal-nav a:hover {
  color: var(--fg);
}

.legal-nav a:hover::after {
  background: var(--line-strong);
}

.legal-nav a[aria-current="page"] {
  color: var(--fg);
}

.legal-nav a[aria-current="page"]::after {
  background: var(--fg);
}

.legal-main {
  scroll-margin-top: 68px;
}

@media (max-width: 980px) {
  .pricing-table {
    grid-template-columns: 1fr;
  }

  .kind-board {
    grid-template-columns: 1fr;
  }

  .kind-list {
    border-right: none;
  }

  /* The sample sits in a filled, rounded card, so it keeps side and bottom
     padding when the board stacks; with none, the text touched the card edge. */
  .kind-output {
    padding: 24px 22px;
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .header-right .btn {
    display: none;
  }
}

/* On a phone the tabs drop to a second header row: the brand and buttons fill a
   60px first row, and the tabs fill a 40px second row that ends on the hairline. */
@media (max-width: 720px) {
  .site-header--legal .header-inner {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .site-header--legal .brand-wordmark,
  .site-header--legal .header-right {
    min-height: 59px;
  }

  .site-header--legal .legal-nav {
    order: 3;
    flex-basis: 100%;
    height: 40px;
    gap: 0 18px;
  }

  .site-header--legal .legal-nav a {
    padding-bottom: 6px;
  }

  .legal-main {
    scroll-margin-top: 100px;
  }
}

@media (max-width: 720px) {
  .nt-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ==========================================================================
   L36 redesign: hero on ink, download, how it works, languages,
   connection ledger, comparison, final call to action, footer
   ========================================================================== */

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 3000;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink-deep);
  color: var(--cream);
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid var(--paper); }
::-webkit-scrollbar-track { background: var(--paper); }

.apple-glyph {
  width: 17px;
  height: 17px;
  fill: currentColor;
  flex-shrink: 0;
  margin-top: -2px;
}

.btn-xl {
  min-height: 58px;
  padding: 0 30px;
  font-size: 1.06rem;
}

.btn-icon {
  min-height: 42px;
  width: 42px;
  padding: 0;
}

.btn-icon svg,
.text-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.download-btn {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 18px 40px -14px rgba(217, 119, 87, 0.55);
}

.download-btn:hover {
  transform: translateY(-1px);
}

.soon-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px dashed currentColor;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

a:not(.is-placeholder) > .soon-tag {
  display: none;
}

/* Header: the download button stays visible at every width */
.header-cta {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.9rem;
}

/* Hero */
.on-ink {
  --fg: var(--cream);
  --muted: var(--muted-dark);
  --subtle: #9a958b;
  --line: var(--line-dark);
  --line-strong: var(--line-dark-strong);
  color: var(--cream);
}

.hero-copy .display-hero {
  color: var(--cream);
  max-width: 13ch;
}

.on-ink .display-hero em,
.on-ink .display-section em {
  color: var(--clay);
}

.hero-lede {
  margin-top: 22px;
  font-size: clamp(1.06rem, 1.3vw, 1.24rem);
  line-height: 1.6;
  color: var(--muted-dark);
  max-width: 46ch;
}

.hero-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 18px 0 16px;
  border-radius: 14px;
  background: #0b0b0a;
  color: #f2f0eb;
  border: 1px solid rgba(242, 240, 235, 0.32);
  transition: border-color 160ms var(--ease-out-quart), transform 160ms var(--ease-out-quart);
}

.appstore-badge .apple-glyph {
  width: 24px;
  height: 24px;
}

.appstore-badge:hover {
  border-color: var(--clay);
}

.appstore-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.appstore-text small {
  font-size: 0.68rem;
  font-weight: 500;
}

.appstore-text b {
  font-size: 1.18rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.hero-reqs {
  margin-top: 18px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.86rem;
  color: var(--muted-dark);
}

.hero-reqs li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-reqs li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clay);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: rgba(242, 240, 235, 0.3);
  text-underline-offset: 0.28em;
}

.text-link:hover {
  text-decoration-color: var(--clay);
}

.hero-films {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

.hero-motion-stage {
  background: #1c1b19;
  border: 1px solid rgba(242, 240, 235, 0.12);
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* The Mail window in the hero is always a real light-mode window... */
.hero-section .gsap-mail-win,
.hero-section .gsap-mail-win * {
  --surface: #ffffff;
  --paper-2: #f5f3ef;
  --fg: #1f1e1b;
  --muted: #5f5a53;
  --line: rgba(31, 30, 27, 0.12);
  --line-strong: rgba(31, 30, 27, 0.2);
}

.hero-section .gsap-mail-win {
  color: #1f1e1b;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}

/* ...and a dark one when the visitor picks dark. */
html[data-site-theme="ink"] .hero-section .gsap-mail-win,
html[data-site-theme="ink"] .hero-section .gsap-mail-win * {
  --surface: #262522;
  --paper-2: #1f1e1b;
  --fg: #f2f0eb;
  --muted: #b4b1a9;
  --line: rgba(242, 240, 235, 0.11);
  --line-strong: rgba(242, 240, 235, 0.2);
}

html[data-site-theme="ink"] .hero-section .gsap-mail-win {
  color: #f2f0eb;
}

.stage-menubar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -6px -4px 16px;
  font-size: 0.78rem;
  color: var(--muted-dark);
}

.stage-menubar-left {
  display: inline-flex;
  gap: 7px;
}

.stage-menubar-left i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(242, 240, 235, 0.16);
}

.stage-menubar-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cream);
}

.offline-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: rgba(217, 119, 87, 0.14);
  border: 1px solid rgba(217, 119, 87, 0.4);
  color: #f0a183;
  font-weight: 600;
}

.offline-pill svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.pw-mark--sm {
  height: 16px;
  gap: 2px;
}

.pw-mark--sm i {
  width: 3px;
  height: 16px;
}

.gsap-keys-pair {
  background: none;
  border: 0;
  padding: 0;
}

.hero-section .gsap-capsule {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.hero-section .hero-stage-footer {
  color: var(--muted-dark);
  border-top-color: rgba(242, 240, 235, 0.12);
}

.stage-caption {
  font-weight: 550;
}

.on-ink .stage-mode-pill {
  min-height: 44px;
  border-color: rgba(242, 240, 235, 0.22);
  color: var(--muted-dark);
}

.on-ink .stage-mode-pill.is-active,
.on-ink .stage-mode-pill:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink-deep);
}

.ios-loop-frame {
  max-width: 260px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
  aspect-ratio: 576 / 1024;
  background: #0b0b0a;
}

.ios-loop-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section heads */
.section-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: 20px 56px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.feature-lede {
  margin-top: 18px;
}

/* How it works */
.how-section {
  padding: clamp(80px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--line);
}

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-strong);
}

.step {
  padding: 28px 28px 8px 0;
  position: relative;
}

.step + .step {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--clay);
  color: var(--clay-dark);
  font-weight: 650;
  font-size: 0.9rem;
  margin-bottom: 18px;
}

html[data-site-theme="ink"] .step-num {
  color: var(--clay);
}

.step h3 {
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 8px;
}

.step p {
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 36ch;
}

/* Meetings / handoff small parts that used to be inline styles */
.nt-sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
}

.nt-footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nt-timer {
  font-weight: 600;
  color: var(--fg);
}

.send-history-text {
  font-size: 0.88rem;
}

.send-history-text strong {
  color: var(--fg);
  margin-right: 8px;
}

.send-history-text span,
.send-chat-foot {
  color: var(--muted);
}

.send-history-meta,
.send-chat-status {
  font-size: 0.78rem;
  color: var(--clay-dark);
  font-weight: 600;
}

html[data-site-theme="ink"] .send-history-meta,
html[data-site-theme="ink"] .send-chat-status {
  color: var(--clay);
}

.send-chat-foot {
  font-size: 0.78rem;
}

.send-pill-btn {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* The line that was dictated: the same words as the card below, shown in full.
   The bar grows to fit; the meta sits on the first line's baseline. */
.send-history-bar {
  align-items: baseline;
}

.send-history-text {
  flex: 1;
  min-width: 0;
  line-height: 1.5;
}

.send-history-meta {
  flex: none;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .send-history-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

.gallery-caption-platform {
  font-size: 0.84rem;
  color: var(--muted);
}

.gallery-arrows {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.gallery-tab {
  min-height: 40px;
}

/* Languages */
.languages-section {
  padding: 0 0 clamp(80px, 10vw, 136px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.lang-band {
  display: flex;
  gap: clamp(28px, 4vw, 56px);
  width: max-content;
  padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 64px);
  font-size: clamp(2rem, 4.6vw, 4.2rem);
  font-weight: 450;
  letter-spacing: -0.03em;
  color: #8f8a81;
  white-space: nowrap;
  animation: lang-drift 60s linear infinite;
}

html[data-site-theme="ink"] .lang-band {
  color: #74706a;
}

.lang-band span:nth-child(4n + 2) {
  color: var(--clay-dark);
}

html[data-site-theme="ink"] .lang-band span:nth-child(4n + 2) {
  color: var(--clay);
}

@keyframes lang-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-35%, 0, 0); }
}

.lang-groups {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 72px);
}

.lang-group h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 1.05rem;
  font-weight: 650;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 18px;
}

.lang-count {
  color: var(--clay-dark);
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

html[data-site-theme="ink"] .lang-count {
  color: var(--clay);
}

.lang-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lang-list li {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg);
  background: var(--surface);
}

.lang-list--extra li {
  border-style: dashed;
  border-color: var(--clay);
  background: var(--clay-tint);
}

.lang-note {
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 48ch;
}

/* Privacy ledger */
.privacy-section .display-section {
  color: var(--cream);
}

.privacy-facts {
  list-style: none;
}

.ledger {
  margin-top: clamp(56px, 7vw, 88px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(242, 240, 235, 0.14);
}

.ledger-head {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 16px 56px;
  align-items: end;
  margin-bottom: 28px;
}

.ledger-head h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--cream);
}

.ledger-head p {
  color: var(--muted-dark);
  font-size: 0.98rem;
  max-width: 60ch;
}

.ledger-table-wrap,
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ledger-table,
.compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.ledger-table th,
.ledger-table td {
  padding: 18px 24px 18px 0;
  vertical-align: top;
  border-bottom: 1px solid rgba(242, 240, 235, 0.12);
  font-size: 0.95rem;
  line-height: 1.5;
}

.ledger-table thead th {
  font-size: 0.8rem;
  font-weight: 600;
  color: #9a958b;
  padding-top: 0;
  border-bottom-color: rgba(242, 240, 235, 0.22);
}

.ledger-table tbody th {
  font-weight: 650;
  color: var(--cream);
  width: 22%;
}

.ledger-table tbody th span {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #f0a183;
}

.ledger-table td {
  color: var(--muted-dark);
}

.ledger-table td:nth-child(2) {
  width: 32%;
}

.ledger-foot {
  margin-top: 22px;
  font-size: 0.92rem;
  color: var(--muted-dark);
  max-width: 72ch;
}

.privacy-fact span:last-child {
  max-width: 40ch;
}

/* Comparison */
.compare-section {
  padding: clamp(80px, 10vw, 136px) 0;
  border-bottom: 1px solid var(--line);
}

.compare-table {
  min-width: 620px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.compare-table th,
.compare-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 0.96rem;
  vertical-align: middle;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.compare-table thead th {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--muted);
  padding-top: 22px;
  padding-bottom: 18px;
}

.compare-table thead th.compare-us {
  color: var(--fg);
  font-size: 1.05rem;
}

.compare-table tbody th {
  font-weight: 600;
  color: var(--fg);
  width: 34%;
}

.compare-table td {
  color: var(--muted);
}

.compare-table td.compare-us {
  color: var(--fg);
  font-weight: 550;
  background: var(--clay-tint);
}

.compare-table thead th.compare-us {
  background: var(--clay-tint);
}

.mark {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: -3px;
  border-radius: 50%;
}

.mark-yes {
  background: var(--clay);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/><path d='M6.5 12.5l3.5 3.5 7.5-8' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><mask id='m'><circle cx='12' cy='12' r='11' fill='white'/><path d='M6.5 12.5l3.5 3.5 7.5-8' stroke='black' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></mask><rect width='24' height='24' mask='url(%23m)'/></svg>") center / contain no-repeat;
}

.mark-no {
  border: 1.5px solid var(--subtle);
  position: relative;
}

.mark-no::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 1.5px;
  background: var(--subtle);
  transform: translateY(-50%);
}

.mark-mid {
  border: 1.5px dashed var(--subtle);
}

.compare-foot {
  margin-top: 18px;
  font-size: 0.86rem;
  color: var(--muted);
  max-width: 78ch;
}

/* Pricing additions */
.pricing-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-ctas .btn {
  width: 100%;
}

.pricing-col--featured .btn-ghost {
  border-color: rgba(242, 240, 235, 0.3);
  color: var(--cream);
}

.pricing-col--featured .pricing-tier-title,
.pricing-col--featured .pricing-price {
  color: var(--cream);
}

a.is-placeholder {
  cursor: help;
}

/* Final call to action */
.final-cta {
  background:
    radial-gradient(60% 80% at 15% 100%, rgba(217, 119, 87, 0.18), transparent 70%),
    var(--ink-deep);
  padding: clamp(88px, 11vw, 150px) 0;
}

.final-cta .display-section {
  color: var(--cream);
  max-width: 16ch;
}

.final-cta .body-lg {
  margin-top: 18px;
}

.final-cta .btn-ghost {
  border-color: rgba(242, 240, 235, 0.3);
  color: var(--cream);
}

/* Footer */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
}

.footer-brand p {
  margin-top: 12px;
  max-width: 32ch;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-col h2 {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--fg);
  margin-bottom: 6px;
}

.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--muted);
}

@media (pointer: coarse) {
  .footer-col a {
    min-height: 44px;
  }
}

.footer-col a:hover {
  color: var(--fg);
}

/* Download page */
.dl-hero {
  padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 7vw, 96px);
}

.dl-hero .display-hero {
  max-width: 14ch;
}

.dl-main {
  padding: clamp(56px, 8vw, 112px) 0;
}

.dl-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}

.dl-steps {
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--line-strong);
}

.dl-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.dl-steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--clay);
  color: var(--clay-dark);
  font-weight: 650;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

html[data-site-theme="ink"] .dl-steps li::before {
  color: var(--clay);
}

.dl-steps h3 {
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.dl-steps p {
  color: var(--muted);
  font-size: 0.97rem;
  max-width: 60ch;
}

.dl-section-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}

.req-list {
  border-top: 1px solid var(--line-strong);
}

.req-list div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}

.req-list dt {
  font-weight: 650;
}

.req-list dd {
  color: var(--muted);
}

.dl-aside + .dl-aside {
  margin-top: 48px;
}

.dl-aside p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 10px;
}

.dl-aside .appstore-badge {
  margin-top: 18px;
}

/* Thank-you page */
.thanks-action,
.thanks-note {
  grid-column: 2;
  margin-top: 16px;
}

/* Portal link switch. site-config.js sets html[data-portal] to "on" or "off". */
html:not([data-portal="on"]) [data-portal-on],
html[data-portal="on"] [data-portal-off] {
  display: none;
}

.thanks-hint:not(:empty) {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 52ch;
}

/* Reduced motion: hold every loop still */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lang-band { animation: none; }
  .btn, .download-btn:hover { transition: none; transform: none; }
}

/* Responsive */
.header-nav a {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .header-nav { gap: 18px; }
  .header-nav a:nth-child(6) { display: none; }
}

@media (max-width: 960px) {
  .site-header .header-nav { display: none; }
}

@media (max-width: 980px) {
  .section-head,
  .ledger-head,
  .lang-groups,
  .dl-grid {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .step,
  .step + .step {
    padding: 22px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .hero-copy .display-hero {
    max-width: 16ch;
  }
}

@media (max-width: 720px) {
  .header-right .btn.header-cta {
    display: inline-flex;
  }

  #siteThemeLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .surface-switch {
    width: 40px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
  }

  .site-header {
    height: 60px;
  }

  .hero-section {
    padding-top: 28px;
  }

  .hero-lede {
    margin-top: 16px;
  }

  .hero-actions {
    margin-top: 22px;
    gap: 10px;
  }

  .hero-actions .btn-xl,
  .hero-actions .appstore-badge {
    width: 100%;
    justify-content: center;
  }

  .hero-actions .appstore-badge {
    min-height: 52px;
  }

  .hero-reqs {
    margin-top: 14px;
    font-size: 0.82rem;
  }

  .gsap-keycap { height: 48px; padding: 0 16px; }
  .gsap-keycap--shortcut { min-width: 140px; }
  .gsap-capsule { width: 170px; height: 48px; }

  .stage-menubar { margin-bottom: 12px; }

  .ledger-table thead {
    display: none;
  }

  .ledger-table,
  .ledger-table tbody,
  .ledger-table tr,
  .ledger-table th,
  .ledger-table td {
    display: block;
    width: 100% !important;
  }

  .ledger-table tr {
    padding: 16px 0;
    border-bottom: 1px solid rgba(242, 240, 235, 0.12);
  }

  .ledger-table th,
  .ledger-table td {
    border: 0;
    padding: 4px 0;
  }

  .compare-table {
    min-width: 0;
  }

  .compare-table thead th:first-child {
    display: none;
  }

  .compare-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .compare-table tbody th {
    grid-column: 1 / -1;
    width: auto;
    border-bottom: 0;
    padding: 16px 16px 4px;
    font-size: 0.9rem;
  }

  .compare-table thead tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .compare-table th,
  .compare-table td {
    padding: 10px 16px 16px;
    font-size: 0.88rem;
  }

  .mark {
    display: block;
    margin: 0 0 6px;
  }

  .req-list div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .gallery-stage {
    min-height: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .brand-wordmark span:last-child {
    font-size: 0.95rem;
  }

  .header-cta span {
    display: none;
  }

  .header-cta {
    width: 40px;
    padding: 0;
  }
}

section[id],
[id="first-launch"],
[id="requirements"],
[id="iphone"],
[id="pricing-note"] {
  scroll-margin-top: 84px;
}

/* iPhone app launch switch. site-config.js sets html[data-ios] to "on" or
   "off"; with no script the page stays in the off state. */
html:not([data-ios="on"]) [data-ios-on],
html[data-ios="on"] [data-ios-off] {
  display: none !important;
}

/* Mac checkout switch, set the same way from POLAR_CHECKOUT. */
html:not([data-checkout="on"]) [data-checkout-on],
html[data-checkout="on"] [data-checkout-off] {
  display: none !important;
}

.hero-ios-soon {
  color: var(--cream);
  opacity: 0.78;
  font-size: 0.95rem;
}

/* Enterprise strip under the plan table. It uses the table's surface and the
   strong line token, so it follows the light and dark themes with no overrides. */
.pricing-enterprise {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 3.5vw, 42px);
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  background: var(--surface);
}

.pricing-enterprise .pricing-summary {
  min-height: 0;
  margin-bottom: 0;
  max-width: 34ch;
}

.pricing-enterprise .pricing-list {
  margin-bottom: 0;
  border-top: none;
  padding-top: 0;
}

.pricing-enterprise-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  text-align: center;
}

.pricing-enterprise-cta .pricing-subnote {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .pricing-enterprise {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .pricing-enterprise-cta {
    text-align: left;
  }
}

/* ==========================================================================
   Mobile menu (960px and below). Markup is shared by every page; the state
   lives in assets/js/menu.js. Transform and opacity only.
   ========================================================================== */

.menu-toggle,
.site-menu {
  display: none;
}

@media (max-width: 960px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    color: var(--fg);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 180ms var(--ease-out-quart), transform 160ms var(--ease-out-quart);
  }

  .menu-toggle:hover,
  .menu-toggle[aria-expanded="true"] {
    border-color: var(--clay);
  }

  .menu-toggle:active {
    transform: scale(0.96);
  }

  .menu-toggle svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  .menu-toggle line {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 240ms var(--ease-out-expo), opacity 160ms var(--ease-out-quart);
  }

  .menu-toggle[aria-expanded="true"] .mt-a { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .mt-b { opacity: 0; transform: scaleX(0.2); }
  .menu-toggle[aria-expanded="true"] .mt-c { transform: translateY(-4px) rotate(-45deg); }

  .surface-switch {
    width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
  }

  /* With the text label hidden, the dot becomes a half-filled circle: the usual
     light/dark sign. The filled half swaps sides with the theme. */
  .surface-switch-dot {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--clay);
    background: linear-gradient(90deg, var(--clay) 50%, transparent 50%);
  }

  html[data-site-theme="ink"] .surface-switch-dot {
    background: linear-gradient(270deg, var(--clay) 50%, transparent 50%);
  }

  #siteThemeLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .site-menu {
    display: block;
    position: fixed;
    top: var(--menu-top, 60px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    border-top: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease-out-quart), transform 240ms var(--ease-out-expo), visibility 0s linear 240ms;
  }

  .menu-open .site-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 200ms var(--ease-out-quart), transform 240ms var(--ease-out-expo), visibility 0s;
  }

  .site-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 8px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }

  .site-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-menu-list li + li {
    border-top: 1px solid var(--line);
  }

  .site-menu-list a {
    display: flex;
    align-items: center;
    min-height: 60px;
    font-size: 1.5rem;
    font-weight: 620;
    letter-spacing: -0.025em;
    color: var(--fg);
    -webkit-tap-highlight-color: transparent;
  }

  .site-menu-list a:active {
    color: var(--clay-dark);
  }

  html[data-site-theme="ink"] .site-menu-list a:active {
    color: var(--clay);
  }

  .site-menu-cta {
    width: 100%;
  }

  .site-menu-close {
    align-self: center;
    min-height: 44px;
    padding: 0 20px;
    font-size: 0.95rem;
    font-weight: 550;
    color: var(--muted);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .site-menu-close:hover {
    color: var(--fg);
  }

  /* Lock scrolling on body only. Body's overflow then passes to the viewport.
     Setting it on html as well made body its own scroll box, so the sticky header
     (and the menu button in it) scrolled away when the menu opened mid-page. */
  .menu-open body {
    overflow: hidden;
  }
}

/* The legal pages wrap their header onto two rows on a phone. The generic 60px
   header height set earlier in this file would clip it, and the second row would
   spill out under the hairline. Let the header grow to fit both rows. */
@media (max-width: 720px) {
  .site-header.site-header--legal {
    height: auto;
    min-height: 60px;
  }
}

/* The header Download button is the first thing to give way to the menu button on a phone;
   the same button sits at the foot of the menu. */
@media (max-width: 480px) {
  .header-right .btn.header-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle,
  .menu-toggle line,
  .site-menu,
  .menu-open .site-menu {
    transition: none;
  }
}

/* Native plan choices keep platform and billing separate, including without JS. */
.pricing-header { margin-bottom: 28px; }
.pricing-separate { margin-top: 12px; color: var(--fg); font-weight: 600; }
.pricing-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 32px; margin-bottom: 28px; }
.pricing-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.pricing-choice legend { margin-bottom: 8px; font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.pricing-radio { display: block; position: relative; cursor: pointer; }
.pricing-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pricing-radio span { pointer-events: none; display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 84px; padding: 8px 20px; border-radius: 999px; font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.pricing-radio input:checked + span { background: var(--ink); color: var(--cream); }
html[data-site-theme="ink"] .pricing-radio input:checked + span { background: var(--clay); color: var(--ink-deep); }
.pricing-radio input:hover + span { text-decoration: underline; text-underline-offset: 4px; }
.pricing-radio input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 3px; }
.pricing-radio input:active + span { transform: scale(0.98); }
.pricing-section:has(#pricingMac:checked) #iphone-plans,
.pricing-section:has(#pricingIphone:checked) #mac-plans,
html:not([data-pricing-ready]) .pricing-billing,
html:not([data-ios="on"]) .pricing-section:has(#pricingIphone:checked) .pricing-billing { display: none; }
.pricing-table--iphone { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing-col { min-width: 0; }
.pricing-col:last-child { border-bottom: none; }
.pricing-purchase { max-width: 72ch; margin-bottom: 20px; color: var(--muted); }
.pricing-qualification { margin-top: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); max-width: 85ch; font-size: 0.95rem; color: var(--muted); }
.pricing-qualification strong { color: var(--fg); }
.pricing-qualification a, .on-ink .feature-lede a, .on-ink .body-lg a, .privacy-fact a, .compare-table a { text-decoration: underline; text-underline-offset: 3px; }
.pricing-coming-soon { padding: clamp(24px, 4vw, 48px); border: 1px dashed var(--line-strong); border-radius: 24px; background: var(--surface); }
.pricing-coming-soon h3 { font-size: 1.6rem; font-weight: 650; margin-bottom: 12px; }
.pricing-coming-soon p { max-width: 55ch; margin-bottom: 20px; color: var(--muted); }
.hero-platform-note, .walkthrough-note { color: var(--muted-dark); font-size: 0.85rem; margin-top: 16px; }
.walkthrough-note { margin-top: 10px; }
.recording-reminder { margin-top: 18px; font-weight: 600; color: var(--fg); }
.film-explanation, .film-error { margin-top: 12px; font-size: 0.88rem; color: var(--cream); max-width: 70ch; }
.film-error a { text-decoration: underline; }
.film-modal-close { min-width: 64px; min-height: 44px; }
.film-modal-dialog { max-height: calc(100dvh - 48px); overflow-y: auto; }
.film-modal video { display: block; max-height: 65dvh; }
@media (max-width: 980px) {
  .pricing-table, .pricing-table--iphone { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .pricing-radio input:checked + span { outline: 2px solid Highlight; }
}

/* Give compact demo and gallery controls the same keyboard/touch target floor. */
.billing-option, .gallery-tab { min-height: 44px; }

.site-menu .text-link, .pricing-coming-soon .text-link { color: var(--fg); text-decoration-color: currentColor; }