/* ============================================================
   COLLAR & KEY: WEBSITE STYLES
   Built on the Collar & Key design system (v3).

   Two layers live in this file:
     1. TOKENS   : copied from the app design system. Do not edit
                   these to restyle the site; edit layer 2.
     2. SITE     : marketing-site components built on those tokens.

   THE LAYOUT LAW (inherited from the app's "Continuous Fields"):
   The page is ONE continuous sheet. Sections are full-bleed TONAL
   ZONES that butt directly against each other with NO gap. The
   change in background tone (paper / bone / ink) IS the section
   divider. Rows inside a zone divide by a hairline, never a heavy
   bar. Red is reserved for eyebrows + safety. Geometry stays
   brutalist: zero radius on zones, hard rectangles.
   ============================================================ */

/* ============================================================
   1. TOKENS: COLOR
   Brutalist black & white with a single signal red. Neutrals are
   kept truly neutral (no warm/cool tint) so the contrast stays
   crisp and editorial.
   ============================================================ */

:root {
  /* --- Base ink ramp (black -> white) --- */
  --ck-black:    #1B1922;   /* soft ink, the default text colour */
  --ck-ink-900:  #141414;
  --ck-ink-800:  #1F1F1F;
  --ck-ink-700:  #3D3D3D;
  --ck-ink-600:  #5C5C5C;
  --ck-ink-500:  #767676;
  --ck-ink-400:  #9A9A9A;
  --ck-ink-300:  #C9C9C9;
  --ck-ink-200:  #E2E2E2;
  --ck-ink-100:  #EFEFEF;
  --ck-ink-050:  #F6F6F6;
  --ck-white:    #FFFFFF;

  /* Structural surfaces */
  --ck-canvas:      #EAE8E1;   /* bone */
  --ck-surface-ink: #0A0A0A;   /* always-dark surfaces: mastheads, bands */

  /* --- Signal red (the only chromatic color) --- */
  --ck-red:        #E5071E;
  --ck-red-bright: #FF1F36;
  --ck-red-dark:   #A30410;
  --ck-red-tint:   #FCE6E8;

  /* --- Semantic aliases: author against these --- */
  /* Body copy sits on BOTH paper and bone. ink-500 clears AA on white
     (4.54:1) but only reaches 3.70:1 on bone, so secondary text is one
     step darker than the app's own value. The alias flips correctly in
     dark mode, where ink-600 is the light end of the ramp. */
  --text-primary:   var(--ck-black);
  --text-secondary: var(--ck-ink-600);
  --text-tertiary:  var(--ck-ink-500);
  --text-inverse:   var(--ck-white);
  --text-accent:    var(--ck-red);

  /* Eyebrows are 11px bold, i.e. small text rather than large, so the red
     is darkened on light zones to clear AA. Full-strength --ck-red is
     kept for ink zones and for fills, where it already passes. */
  --eyebrow-color:  var(--ck-red-dark);

  --surface-page:   var(--ck-white);
  --surface-muted:  var(--ck-ink-050);

  --border-color:  var(--ck-black);
  --border-soft:   var(--ck-ink-200);
  --border-hair:   var(--ck-ink-100);

  --focus-ring: var(--ck-red);
  --link:       var(--ck-black);
  --link-hover: var(--ck-red);

  /* --- Typography --- */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-3xs: 10px;  --text-2xs: 11px;  --text-xs: 12px;  --text-sm: 14px;
  --text-md:  16px;  --text-lg:  18px;  --text-xl: 22px;  --text-2xl: 28px;
  --text-3xl: 36px;  --text-4xl: 48px;  --text-5xl: 64px; --text-6xl: 88px;

  --leading-tight:   1.06;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-label:   0.16em;

  /* --- Spacing (4px grid) --- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 48px;  --space-10: 64px; --space-11: 80px; --space-12: 96px;
  --space-13: 128px;

  --container-sm: 640px;
  --container-md: 860px;
  --container-lg: 1180px;

  /* --- Effects --- */
  --radius-sm: 8px;    /* controls: buttons, inputs, chips */
  --radius-md: 12px;
  --radius-pill: 999px;

  --shadow-hard: 0 1px 2px rgba(10,10,10,0.05), 0 3px 10px rgba(10,10,10,0.07);
  --shadow-hard-lg: 0 4px 14px rgba(10,10,10,0.09), 0 12px 30px rgba(10,10,10,0.10);
  --shadow-overlay: 0 16px 40px -8px rgba(10,10,10,0.32);

  --ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 100ms;  --dur-base: 160ms;  --dur-slow: 280ms;
}

/* ============================================================
   DARK THEME: flips the ink ramp; mastheads stay dark via
   --ck-surface-ink. Red signal unchanged.
   Follows the OS by default; [data-ck-theme] wins in both
   directions so an explicit toggle can override the OS.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-ck-theme="light"]) {
    --ck-black:   #F3F3F4;
    --ck-ink-900: #E6E6E8;
    --ck-ink-800: #2A2A30;
    --ck-ink-700: #3A3A42;
    --ck-ink-600: #C2C2C8;
    --ck-ink-500: #A2A2AA;
    --ck-ink-400: #86868E;
    --ck-ink-300: #57575F;
    --ck-ink-200: #313138;
    --ck-ink-100: #26262B;
    --ck-ink-050: #201F24;
    --ck-white:   #1B1B20;
    --ck-canvas:      #070709;
    --ck-surface-ink: #08080A;
    --ck-red-tint:    #2A0E11;
    --eyebrow-color:  var(--ck-red-bright);
  }
}

:root[data-ck-theme="dark"] {
  --eyebrow-color: var(--ck-red-bright);
  --ck-black:   #F3F3F4;
  --ck-ink-900: #E6E6E8;
  --ck-ink-800: #2A2A30;
  --ck-ink-700: #3A3A42;
  --ck-ink-600: #C2C2C8;
  --ck-ink-500: #A2A2AA;
  --ck-ink-400: #86868E;
  --ck-ink-300: #57575F;
  --ck-ink-200: #313138;
  --ck-ink-100: #26262B;
  --ck-ink-050: #201F24;
  --ck-white:   #1B1B20;
  --ck-canvas:      #070709;
  --ck-surface-ink: #08080A;
  --ck-red-tint:    #2A0E11;
}

/* ============================================================
   2. SITE: BASE
   ============================================================ */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ck-red); color: #FFFFFF; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

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

hr.ck-rule { border: 0; border-top: 1px solid var(--border-hair); margin: 0; }

/* Skip link: first tab stop, invisible until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1200;
  background: var(--ck-red);
  color: #FFFFFF;
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
  color: #FFFFFF;
}

/* ============================================================
   TYPE ROLES
   ============================================================ */

.ck-masthead {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  margin: 0;
}

.ck-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
}

/* The signature red eyebrow. Uppercase, wide-tracked, small. */
.ck-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--eyebrow-color);
  margin: 0 0 var(--space-4);
}
.ck-eyebrow--muted { color: var(--text-secondary); }

.ck-lede {
  font-size: clamp(var(--text-lg), 2.2vw, var(--text-xl));
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0;
}

/* ============================================================
   ZONES: the full-bleed tonal sections that make up a page.
   Adjacent zones differ in TONE; that difference is the divider.
   ============================================================ */

.zone {
  padding: clamp(var(--space-10), 9vw, var(--space-13)) var(--space-5);
}
.zone--tight { padding-block: clamp(var(--space-9), 6vw, var(--space-11)); }

.zone--paper { background: var(--ck-white); color: var(--text-primary); }
.zone--bone  { background: var(--ck-canvas); color: var(--text-primary); }

/* Ink zones are always dark, in both themes, because they are the brand's
   fixed points. Their tokens are pinned rather than inherited. */
.zone--ink {
  background: var(--ck-surface-ink);
  color: #F3F3F4;
  --text-primary: #F3F3F4;
  --text-secondary: #A2A2AA;
  --text-tertiary: #86868E;
  --border-hair: #1F1F1F;
  --border-soft: #2A2A30;
  --link: #F3F3F4;
}
.zone--ink a { color: #F3F3F4; }
.zone--ink a:hover { color: var(--ck-red-bright); }
.zone--ink .ck-eyebrow { color: var(--ck-red-bright); }

/* In dark mode the bone/paper tones converge, so a hairline seam
   draws the boundary that tonal alternation no longer can. */
@media (prefers-color-scheme: dark) {
  :root:not([data-ck-theme="light"]) .zone--bone { border-block: 1px solid var(--ck-ink-200); }
}
:root[data-ck-theme="dark"] .zone--bone { border-block: 1px solid var(--ck-ink-200); }

.wrap    { max-width: var(--container-lg); margin-inline: auto; }
.wrap-md { max-width: var(--container-md); margin-inline: auto; }
.wrap-sm { max-width: var(--container-sm); margin-inline: auto; }

/* ============================================================
   SITE HEADER: continuous ink masthead, flows into the page
   ============================================================ */

.site-header {
  background: var(--ck-surface-ink);
  color: #F3F3F4;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  max-width: var(--container-lg);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-5);
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #F3F3F4;
  flex: none;
}
.brand:hover { color: #F3F3F4; }
/* The mark's tile is the same ink as the masthead, so the tile itself is
   invisible and only the letterforms read. The artwork's letters occupy
   about 43% of the tile height, so the box is sized up to 40px to land
   the CK at roughly the wordmark's optical size. */
.brand__mark { width: 40px; height: 40px; display: block; flex: none; margin-left: -4px; }
.brand__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  padding: var(--space-3) 0;
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A2A2AA;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: #F3F3F4; }
/* Active marker is a red underline, never a filled block. */
.site-nav a[aria-current="page"] {
  color: #F3F3F4;
  border-bottom-color: var(--ck-red);
}

/* The nav collapses to a horizontal scroll row on narrow screens;
   a disclosure menu would be more machinery than five links earn. */
@media (max-width: 720px) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-bottom: 0;
  }
  .site-nav {
    margin-left: 0;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav ul { gap: var(--space-5); padding-bottom: var(--space-1); }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  background: var(--ck-surface-ink);
  color: #F3F3F4;
  padding: clamp(var(--space-10), 10vw, var(--space-13)) var(--space-5) clamp(var(--space-11), 10vw, var(--space-13));
  --text-secondary: #A2A2AA;
}
.hero .ck-eyebrow { color: var(--ck-red-bright); }
.hero__title {
  font-size: clamp(var(--text-4xl), 10vw, var(--text-6xl));
  max-width: 15ch;
}
.hero__lede {
  margin-top: var(--space-7);
  color: #A2A2AA;
  font-size: clamp(var(--text-lg), 2.2vw, var(--text-xl));
  line-height: var(--leading-relaxed);
  max-width: 58ch;
}
.hero__actions {
  margin-top: var(--space-9);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* Page-level hero for interior pages: shorter, same field. */
.page-hero {
  background: var(--ck-surface-ink);
  color: #F3F3F4;
  padding: clamp(var(--space-9), 7vw, var(--space-12)) var(--space-5);
  --text-secondary: #A2A2AA;
}
.page-hero .ck-eyebrow { color: var(--ck-red-bright); }
.page-hero__title { font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl)); }
.page-hero__lede {
  margin-top: var(--space-6);
  color: #A2A2AA;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 60ch;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-7);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-snap),
              color var(--dur-base) var(--ease-snap),
              border-color var(--dur-base) var(--ease-snap);
}

.btn--primary {
  background: var(--ck-red);
  border-color: var(--ck-red);
  color: #FFFFFF;
}
.btn--primary:hover {
  background: var(--ck-red-bright);
  border-color: var(--ck-red-bright);
  color: #FFFFFF;
}

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn--ghost:hover {
  background: currentColor;
  color: var(--ck-surface-ink);
}
/* On an ink field the inversion needs an explicit light fill. */
.zone--ink .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover {
  background: #F3F3F4;
  color: #0A0A0A;
}

/* ============================================================
   STATUS NOTE: the "not yet on the stores" honesty band
   ============================================================ */

.status-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.status-note__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ck-red);
  flex: none;
}

/* ============================================================
   GRIDS & FEATURE CARDS
   Cards here are hairline-ruled rectangles, not shadowed bricks;
   the zone tone already did the separating.
   ============================================================ */

.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }

.feature {
  padding: var(--space-7);
  background: var(--ck-white);
  border: 1px solid var(--border-soft);
}
.zone--bone .feature { background: var(--ck-white); }
.zone--ink .feature {
  background: #101014;
  border-color: #26262B;
}

.feature__icon {
  width: 28px;
  height: 28px;
  display: block;
  margin-bottom: var(--space-5);
  color: var(--ck-red);
}
.feature__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}
.feature__body {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   ROWS: a vertical run on one continuous surface, divided by a
   hairline only. Used for the deep feature list and the FAQ.
   ============================================================ */

.rows { display: flex; flex-direction: column; }
.rows > * + * { border-top: 1px solid var(--border-hair); }

.row {
  display: grid;
  grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
  gap: var(--space-6) var(--space-9);
  padding: var(--space-8) 0;
  align-items: start;
}
@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-7) 0; }
}
/* Label and body are pinned to their columns rather than auto-placed, so a
   row can hold several paragraphs without the later ones falling under the
   label. */
.row__label {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}
.row__body { grid-column: 2; margin: 0; color: var(--text-secondary); line-height: var(--leading-relaxed); }
.row__body + .row__body { margin-top: var(--space-4); }
.row__body strong { color: var(--text-primary); font-weight: 600; }
/* Single column below 720px, so the pinned columns must be released. Placed
   after the rules above to win on equal specificity. */
@media (max-width: 720px) {
  .row__label, .row__body { grid-column: 1; }
}

/* ============================================================
   PRINCIPLES: numbered editorial list for the mission page
   ============================================================ */

.principles { counter-reset: principle; list-style: none; margin: 0; padding: 0; }
.principles > li {
  counter-increment: principle;
  padding: var(--space-8) 0;
  display: grid;
  grid-template-columns: 6ch minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
.principles > li + li { border-top: 1px solid var(--border-hair); }
.principles > li::before {
  content: counter(principle, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-display);
  color: var(--ck-red);
  line-height: 1;
}
@media (max-width: 560px) {
  .principles > li { grid-template-columns: 1fr; gap: var(--space-3); }
}
.principles h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}
.principles p { margin: 0; color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* ============================================================
   FAQ
   ============================================================ */

.faq { border-top: 1px solid var(--border-hair); }
.faq details { border-bottom: 1px solid var(--border-hair); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-6) var(--space-8) var(--space-6) 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--eyebrow-color);
}
.faq details[open] summary::after { content: "\2212"; } /* minus */
.faq details > p {
  margin: 0 0 var(--space-6);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 70ch;
}

/* ============================================================
   CALLOUT: used for safety / consent / legal emphasis
   ============================================================ */

.callout {
  padding: var(--space-7);
  background: var(--surface-muted);
  border-left: 3px solid var(--ck-red);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.zone--ink .callout { background: #101014; }

/* ============================================================
   PROSE: long-form legal / policy documents
   ============================================================ */

.prose { max-width: 72ch; }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: var(--space-11) 0 var(--space-4);
  scroll-margin-top: 96px;
}
.prose h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: var(--space-8) 0 var(--space-3);
}
.prose p, .prose li { color: var(--text-secondary); line-height: var(--leading-relaxed); }
.prose p { margin: var(--space-4) 0; }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose ul, .prose ol { margin: var(--space-4) 0; padding-left: var(--space-6); }
.prose li { margin: var(--space-2) 0; }
.prose a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ck-red); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
}
.prose th, .prose td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-hair);
  vertical-align: top;
  color: var(--text-secondary);
}
.prose th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
  border-bottom-color: var(--border-color);
}
.table-scroll { overflow-x: auto; }

.toc {
  padding: var(--space-6) var(--space-7);
  background: var(--surface-muted);
  margin: var(--space-8) 0;
}
.toc h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
}
.toc ol { margin: 0; padding-left: var(--space-6); }
.toc li { margin: var(--space-1) 0; }

/* ============================================================
   STEPS: ordered walk-through (account deletion)
   ============================================================ */

.steps { counter-reset: step; list-style: none; margin: var(--space-6) 0; padding: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--space-6) var(--space-9);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ck-red);
  color: #FFFFFF;
  font-weight: 700;
  font-size: var(--text-xs);
  border-radius: var(--radius-pill);
}

/* ============================================================
   FORMS
   ============================================================ */

.form {
  padding: var(--space-8);
  background: var(--ck-white);
  border: 1px solid var(--border-soft);
  margin: var(--space-8) 0;
}
.zone--bone .form { background: var(--ck-white); }

.field { margin-bottom: var(--space-7); }

.field > label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.field .req { color: var(--ck-red); }
.field .hint {
  display: block;
  margin-top: var(--space-2);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
}

.field input[type="email"],
.field input[type="text"],
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-primary);
  background: var(--ck-white);
  border: 1.5px solid var(--ck-ink-300);
  border-radius: var(--radius-sm);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--ck-black);
}

.field--checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.field--checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--ck-red);
}
.field--checkbox label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.field--checkbox label strong { color: var(--text-primary); font-weight: 600; }

.field-error {
  display: none;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ck-red);
}
.field-error.is-shown { display: block; }

.form-note {
  display: none;
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--ck-red-tint);
  border-left: 3px solid var(--ck-red);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.form-note.is-shown { display: block; }

.form-fallback {
  margin: var(--space-6) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--ck-surface-ink);
  color: #A2A2AA;
  padding: var(--space-11) var(--space-5) var(--space-8);
  font-size: var(--text-sm);
}
.site-footer__inner {
  max-width: var(--container-lg);
  margin-inline: auto;
  display: grid;
  gap: var(--space-9);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.site-footer a { color: #A2A2AA; }
.site-footer a:hover { color: var(--ck-red-bright); }
.site-footer h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #F3F3F4;
  margin: 0 0 var(--space-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: var(--space-2) 0; }
.site-footer__brand p { margin: var(--space-4) 0 0; max-width: 34ch; line-height: var(--leading-relaxed); }
.site-footer__legal {
  max-width: var(--container-lg);
  margin: var(--space-10) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid #1F1F1F;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: #8F8F96; /* #767676 reaches only 4.36:1 on the ink field */
}

/* The 18+ mark. Red because age gating is a safety statement. */
.age-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ck-red-bright);
}

/* ============================================================
   APP PREVIEW: a static rendering of the app's own masthead +
   rows, so the site shows the product's real visual language
   rather than a stock device photo.
   ============================================================ */

.preview {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  border: 1px solid var(--border-soft);
  background: var(--ck-white);
  overflow: hidden;
  box-shadow: var(--shadow-hard-lg);
}
.preview__bar {
  background: var(--ck-surface-ink);
  padding: var(--space-6) var(--space-5) var(--space-5);
}
.preview__eyebrow {
  display: block;
  font-weight: 700;
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ck-red-bright);
  margin-bottom: var(--space-2);
}
.preview__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  text-transform: uppercase;
  color: #F3F3F4;
}
.preview__rows { display: flex; flex-direction: column; }
.preview__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}
.preview__row + .preview__row { border-top: 1px solid var(--border-hair); }
.preview__check {
  width: 20px;
  height: 20px;
  flex: none;
  border: 1.5px solid var(--ck-ink-300);
}
.preview__check--done {
  border-color: var(--ck-black);
  background: var(--ck-black);
}
.preview__label { font-size: var(--text-sm); font-weight: 500; }
.preview__row--done .preview__label { color: var(--text-tertiary); text-decoration: line-through; }
.preview__meta {
  margin-left: auto;
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex: none;
}
.preview__meta--due { color: var(--ck-red); }
.preview__foot {
  background: var(--ck-canvas);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-hair);
}

/* Split layout: copy beside the preview. */
.split {
  display: grid;
  gap: clamp(var(--space-8), 6vw, var(--space-12));
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

/* ============================================================
   UTILITIES
   ============================================================ */

.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-7 > * + * { margin-top: var(--space-7); }
.mt-7 { margin-top: var(--space-7); }
.mt-9 { margin-top: var(--space-9); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}