/* aimlink.ai start page.
   Built on design-tokens/aimlink.tokens.css (load it first). Components use semantic tokens only;
   component-specific sizes live here. Themes are set per section with data-theme, never from the OS.
   Motion: variant C "Through the sight" (see the motion thesis artifact). */

@layer base, components, sections, utilities;

/* ───────────────────────── Base ───────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-text);
    font-size: var(--type-body-size);
    line-height: var(--type-body-leading);
    font-weight: var(--type-body-weight);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  [data-theme] { color: var(--text); }
  img, video, svg, picture { display: block; max-width: 100%; }
  h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  button { font: inherit; color: inherit; }
  input { font: inherit; }
  :focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: 2px; }
  ::selection { background: var(--color-stone); color: var(--color-ink); }
  [data-theme="dark"] ::selection { background: var(--color-line-dark); color: var(--color-snow); }
}

/* ───────────────────────── Components ───────────────────────── */
@layer components {
  .container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Type: Teko (the app's display face), uppercase. The accent word is slanted like the onboarding headlines
     in the app; on light it sits on a lime block with dark text, on dark it is lime. */
  .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; text-wrap: balance; }
  .h1 { font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-leading); letter-spacing: var(--type-display-xl-tracking); }
  .h2 { font-size: var(--type-display-l-size); line-height: var(--type-display-l-leading); letter-spacing: var(--type-display-l-tracking); }
  .h3 { font-size: var(--type-display-m-size); line-height: var(--type-display-m-leading); letter-spacing: var(--type-display-m-tracking); }
  /* inline-block with its own line height: the block hugs the letters (an inline box would paint Teko's tall em box) */
  .h1 em, .h2 em, .h3 em, .em-block {
    display: inline-block; font-style: italic; color: var(--emphasis); background: var(--emphasis-bg);
    line-height: 0.8; padding: 0.09em 0.13em 0.03em; margin-inline: 0.02em;
  }
  .lede { font-size: var(--type-lede-size); line-height: var(--type-lede-leading); color: var(--text-muted); max-width: var(--measure-lede); text-wrap: pretty; }
  .body { color: var(--text-muted); max-width: var(--measure-body); text-wrap: pretty; }
  .small { font-size: var(--type-small-size); line-height: var(--type-small-leading); }
  .label {
    font-size: var(--type-label-size); line-height: var(--type-label-leading); font-weight: var(--type-label-weight);
    letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-subtle);
  }
  .num { font-family: var(--font-numeric); font-weight: 500; font-variant-numeric: tabular-nums; }
  .num small { font-size: 55%; }

  /* The app's icons (assets/icons/, inline sprite in index.html): 34 px symbols drawn with currentColor */
  .ic { display: block; flex: none; width: 1.5rem; height: 1.5rem; fill: none; stroke: none; }

  /* Logo: the official mark (traced into the i-mark symbol by assets/logos/build_mark.py) + the wordmark in type */
  .logo { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; color: var(--text); }
  .logo svg { width: 30px; height: 30px; flex: none; }
  .logo span { font: 500 1.75rem/1 var(--font-numeric); letter-spacing: 0.01em; padding-top: 0.2em; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 52px; padding: 0 22px; border: 0; border-radius: var(--radius-pill);
    font: 500 1rem/1 var(--font-text); white-space: nowrap; cursor: pointer;
    transition:
      background-color var(--duration-hover) var(--ease-hover),
      color var(--duration-hover) var(--ease-hover),
      box-shadow var(--duration-hover) var(--ease-hover),
      transform var(--duration-press) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .btn-primary { background: var(--action-bg); color: var(--action-fg); }
  .btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
  @media (hover: hover) and (pointer: fine) {
    .btn-primary:hover { background: var(--action-bg-hover); }
    .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--text); }
  }
  .btn:active { transform: scale(var(--motion-press-scale)); }
  .btn:disabled, .btn[aria-disabled="true"] { background: var(--line); color: var(--text-subtle); box-shadow: none; cursor: not-allowed; transform: none; }
  @media (max-width: 599.98px) { .btn { min-height: 48px; } }

  /* Icon button: arrows, close, video pause */
  .icon-btn {
    display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none;
    border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--border);
    transition:
      background-color var(--duration-hover) var(--ease-hover),
      color var(--duration-hover) var(--ease-hover),
      opacity var(--duration-hover) var(--ease-hover),
      transform var(--duration-press) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .icon-btn svg { width: 24px; height: 24px; }
  @media (hover: hover) and (pointer: fine) { .icon-btn:not(:disabled):not([aria-disabled="true"]):hover { background: var(--text); color: var(--bg); } }
  .icon-btn:not(:disabled):not([aria-disabled="true"]):active { transform: scale(var(--motion-press-scale)); }
  .icon-btn:disabled, .icon-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }

  .icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: var(--line-icon); stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .icon-20 { width: 20px; height: 20px; }

  /* Secondary link: text + arrow, underline grows from the left */
  .link-arrow {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
    font-weight: 500; color: var(--accent-text);
  }
  .link-arrow .t { position: relative; }
  .link-arrow .t::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: var(--line-underline);
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform var(--duration-hover) var(--ease-hover);
  }
  .link-arrow .icon { width: 20px; height: 20px; transition: transform var(--duration-hover) var(--ease-hover); }
  @media (hover: hover) and (pointer: fine) {
    .link-arrow:hover .t::after { transform: scaleX(1); }
    .link-arrow:hover .icon { transform: translateX(3px); }
  }
  .link-arrow:focus-visible .t::after { transform: scaleX(1); }
  .link-arrow:focus-visible .icon { transform: translateX(3px); }

  /* Ring marker around an arrow: "the latest shot is marked" */
  .ring-arrow { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--text); }
  .ring-arrow::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--accent-strong);
    opacity: 0.35; transform: scale(0.96);
    transition: opacity var(--duration-hover) var(--ease-hover), transform var(--duration-hover) var(--ease-hover);
  }
  .ring-arrow .icon { width: 20px; height: 20px; transition: transform var(--duration-hover) var(--ease-hover); }
  @media (hover: hover) and (pointer: fine) {
    .has-ring:hover .ring-arrow::before { opacity: 1; transform: none; }
    .has-ring:hover .ring-arrow .icon { transform: translateX(3px); }
  }
  .has-ring:focus-visible .ring-arrow::before { opacity: 1; transform: none; }
  .has-ring:focus-visible .ring-arrow .icon { transform: translateX(3px); }

  /* Underline that grows on the title of a linked block */
  .u-line { position: relative; }
  .u-line::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -0.04em; height: var(--line-underline);
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform var(--duration-hover) var(--ease-hover);
  }
  @media (hover: hover) and (pointer: fine) { .has-ring:hover .u-line::after { transform: scaleX(1); } }
  .has-ring:focus-visible .u-line::after { transform: scaleX(1); }

  /* Media frames */
  .media { position: relative; overflow: hidden; border-radius: var(--radius-media); background: var(--color-stone); }
  .media > picture { position: absolute; inset: 0; }
  .media img { width: 100%; height: 100%; object-fit: cover; }

  /* ISSF 10 m air pistol target (inline SVG, mm units) */
  .target { overflow: visible; }
  .target .t-paper { fill: var(--color-white); stroke: var(--color-shot-on-paper); stroke-width: 0.35; }
  .target .t-line { fill: none; stroke: var(--color-shot-on-paper); stroke-width: 0.35; }
  .target .t-black { fill: var(--color-night); }
  .target .t-line-dark { fill: none; stroke: var(--color-snow-3); stroke-width: 0.35; }
  .target .t-inner { stroke-width: 0.25; }
  .target .t-num { font: 500 4.2px var(--font-text); fill: var(--color-shot-on-paper); text-anchor: middle; dominant-baseline: central; }
  .target .t-num-dark { fill: var(--color-snow-2); }
  .target .shot { fill: var(--color-shot-on-black); }
  .target .impact { fill: none; stroke: var(--color-snow); stroke-width: 0.5; }
  .target .marker-ring { fill: none; stroke: var(--color-lime); stroke-width: 0.8; }
  .target .group-ring { fill: none; stroke: var(--color-lime); stroke-width: 0.5; stroke-dasharray: 100; stroke-dashoffset: 0; }
  .mini .m-paper { fill: var(--color-white); stroke: var(--color-shot-on-paper); stroke-width: 0.8; }
  .mini .m-line { fill: none; stroke: var(--color-shot-on-paper); stroke-width: 0.6; }
  .mini .m-black { fill: var(--color-night); }
  .mini .m-line-dark { fill: none; stroke: var(--color-snow-3); stroke-width: 0.6; }
  .mini .m-hole { fill: var(--color-shot-on-black); }
  .mini .m-impact { fill: none; stroke: var(--color-lime); stroke-width: 0.6; }

  /* Reveal: opacity + 16 px rise, 500 ms, 60 ms stagger. No blur. */
  .reveal-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(var(--motion-rise)); }
  .reveal-ready [data-reveal]:focus-within { opacity: 1; transform: none; }
  .reveal-ready [data-reveal] {
    transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--motion-stagger));
  }
}

/* ───────────────────────── Header and menus: assets/nav.css (after veo.com and cibby.app) ───────────────────────── */
@layer sections {
  /* ───────────────────────── Hero (placeholder for Inner Ten) ───────────────────────── */
  .hero {
    position: relative; isolation: isolate; overflow: clip;
    min-height: 100svh; display: grid; align-items: end;
    background: var(--bg); color: var(--text);
  }
  .hero-media { position: absolute; inset: 0; z-index: -2; }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--color-night) 55%, transparent) 0%, transparent 22%),
      linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--color-night) 50%, transparent) 40%, color-mix(in srgb, var(--color-night) 85%, transparent) 72%, var(--color-night) 100%);
  }
  .hero-content { display: grid; gap: var(--space-6); padding-top: 140px; padding-bottom: clamp(3rem, 7vw, 6rem); }
  .hero .h1 { max-width: 12ch; }
  .hero .lede { color: var(--text); opacity: 0.88; }
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
  /* Hero intro: word by word, once on load (8.3) */
  .hero .w { display: inline-block; animation: rise var(--duration-reveal) var(--ease-out) both; animation-delay: calc(120ms + var(--i) * var(--motion-stagger)); }
  .hero .lede, .hero-actions { animation: rise var(--duration-reveal) var(--ease-out) both; animation-delay: 420ms; }
  .hero-actions { animation-delay: 480ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(var(--motion-rise)); } }

  /* ───────────────────────── Target shots (the series) ───────────────────────── */
  .series { padding-block: var(--section); background: var(--bg); }
  .series-grid { display: grid; gap: var(--space-8); }
  .series-target { display: grid; place-items: center; order: -1; }
  .series-target .target { width: min(56svh, 84vw); height: auto; }
  .series-copy { display: grid; gap: var(--space-6); align-content: center; max-width: 34rem; }
  .shot-list {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) var(--space-5);
    padding-top: var(--space-5); border-top: var(--line-hairline) solid var(--line);
  }
  .shot-list li { font: 500 var(--type-numeric-m-size)/var(--type-numeric-m-leading) var(--font-numeric); font-variant-numeric: tabular-nums; }
  .series-stats { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); }
  .series-stats div { display: grid; gap: var(--space-1); }
  .series-stats dd { font: 500 var(--type-numeric-m-size)/var(--type-numeric-m-leading) var(--font-numeric); font-variant-numeric: tabular-nums; }
  .series-stats dd small { font-size: 55%; }
  .series-stats dd .unit { font-size: 40%; letter-spacing: 0.04em; margin-left: 0.15em; color: var(--text-muted); }
  .series-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
  .series .replay { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
  .series .replay[hidden] { display: none; }
  .series.is-armed .shot,
  .series.is-armed .marker,
  .series.is-armed .group-ring,
  .series.is-armed .shot-list li,
  .series.is-armed .series-stats { opacity: 0; }

  @media (min-width: 1100px) and (min-aspect-ratio: 4/3) {
    .series-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
    .series-copy { grid-column: 1 / span 4; }
    .series-target { grid-column: 6 / span 7; order: 0; }
    .series-target .target { width: min(74svh, 46vw); }
  }

  /* ───────────────────────── News ───────────────────────── */
  .news { padding-block: var(--section); background: var(--bg-alt); overflow-x: clip; }
  .news-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
  .news-arrows { display: flex; gap: var(--space-3); }
  .carousel { position: relative; }
  .carousel-stage { display: grid; justify-items: center; perspective: 1400px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .ncard {
    width: min(460px, 78vw); position: relative;
    padding-bottom: var(--space-3); background: var(--bg-alt);
    transition: transform 600ms var(--ease-in-out), opacity 600ms var(--ease-in-out);
    backface-visibility: hidden;
  }
  .carousel.is-live .ncard { grid-area: 1 / 1; }
  .carousel.is-live .ncard:not(.is-active) { cursor: pointer; }
  .carousel:not(.is-live) .carousel-stage { gap: var(--space-8); }
  .news:not(.has-carousel) .news-arrows, .carousel:not(.is-live) .carousel-dots { display: none; }
  .ncard .media { aspect-ratio: 3 / 2; }
  .ncard-meta { margin-top: var(--space-4); }
  .ncard-title { margin-top: var(--space-2); font: 500 clamp(1.9rem, 1.5rem + 1.2vw, 2.75rem)/0.98 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; }
  .ncard-title a::after { content: ""; position: absolute; inset: 0; }
  .ncard-title .u-line::after { bottom: 0; }
  @media (hover: hover) and (pointer: fine) { .ncard.is-active:hover .u-line::after { transform: scaleX(1); } }
  .ncard-title a:focus-visible { outline: none; }
  .ncard-title a:focus-visible .u-line::after { transform: scaleX(1); }
  .ncard:has(a:focus-visible) { outline: var(--line-focus) solid var(--focus); outline-offset: 6px; border-radius: var(--radius-media); }
  .carousel-dots { display: flex; justify-content: center; gap: 2px; margin-top: var(--space-6); }
  .dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
  .dot span {
    display: block; width: 28px; height: 6px; border-radius: 999px; background: var(--text-subtle);
    transform: scaleX(0.22); transition: transform 600ms var(--ease-in-out), background-color var(--duration-hover) var(--ease-hover);
  }
  .dot[aria-current="true"] span { transform: none; background: var(--text); }

  .news-list { max-width: 60rem; margin: var(--space-8) auto 0; }
  .news-list h3 { font-size: var(--type-heading-size); line-height: var(--type-heading-leading); font-weight: 500; letter-spacing: var(--type-heading-tracking); margin-bottom: var(--space-4); }
  .news-row a {
    display: grid; grid-template-columns: 8.5rem 7rem minmax(0, 1fr) auto; gap: var(--space-5); align-items: center;
    padding-block: var(--space-3); border-top: var(--line-hairline) solid var(--line); min-height: 56px;
  }
  .news-row time, .news-row .cat { color: var(--text-subtle); font-size: var(--type-small-size); }
  .news-row .title { font: 500 1.875rem/1 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
  .news-all { display: flex; justify-content: center; padding-top: var(--space-6); border-top: var(--line-hairline) solid var(--line); }
  @media (max-width: 767.98px) {
    .news-arrows { display: none; }
    .news-row a { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); }
    .news-row .meta { grid-column: 1; display: flex; gap: var(--space-3); }
    .news-row .title { grid-column: 1; }
    .news-row .ring-arrow { grid-column: 2; grid-row: 1 / span 2; }
  }
  @media (min-width: 768px) { .news-row .meta { display: contents; } }

  /* ───────────────────────── Subscribe ───────────────────────── */
  .subscribe { padding-block: var(--section); background: var(--bg); }
  .subscribe-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
  .sub-panel {
    position: relative; display: grid; align-content: center;
    min-height: 14rem; padding: clamp(1.25rem, 2.5vw, 2rem);
    border-radius: var(--radius-panel); background: var(--bg-alt);
  }
  .sub-form { display: grid; gap: var(--space-5); }
  .sub-fields { display: grid; gap: var(--space-5); }
  .field { display: grid; gap: var(--space-2); align-content: start; }
  .field label { font-size: var(--type-small-size); line-height: 1.3; font-weight: 500; }
  .field label .opt { font-weight: 400; color: var(--text-subtle); }
  .field input {
    width: 100%; min-height: 52px; padding: 0 16px;
    border: var(--line-border) solid var(--border); border-radius: var(--radius-field);
    background: var(--bg); color: var(--text); font-size: 1.0625rem;
    transition: border-color var(--duration-hover) var(--ease-hover);
  }
  @media (hover: hover) and (pointer: fine) { .field input:hover { border-color: var(--text); } }
  .field input:focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
  .field.is-invalid input { border-color: var(--error); }
  .field-error { display: none; align-items: flex-start; gap: 6px; color: var(--error); font-size: var(--type-small-size); line-height: 1.4; }
  .field.is-invalid .field-error { display: flex; }
  .field-error .icon { width: 20px; height: 20px; }
  .sub-btn { width: 100%; }
  .sub-note { color: var(--text-subtle); font-size: var(--type-small-size); }
  @media (min-width: 900px) {
    .sub-fields { grid-template-columns: 1.4fr 1fr 1fr auto; gap: var(--space-4); align-items: start; }
    .sub-btn { width: auto; margin-top: calc(var(--type-small-size) * 1.3 + var(--space-2)); }
  }
  .sub-done {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
    gap: var(--space-3); padding: var(--space-6); text-align: center; visibility: hidden;
  }
  .sub-panel.is-done .sub-done { visibility: visible; }
  .sub-panel.is-done .sub-form { visibility: hidden; }
  /* Keep the form visible until the button has morphed and faded (280 + 160 ms) */
  @media (prefers-reduced-motion: no-preference) { .sub-panel.is-done .sub-form { transition: visibility 0s linear 440ms; } }
  .sub-done .mini { width: 72px; height: 72px; overflow: visible; margin-bottom: var(--space-2); }
  .sub-done .h3 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
  .sub-done .body { margin-inline: auto; }
  .undo { min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer; color: var(--accent-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

  /* ───────────────────────── The 3 apps: phone story ───────────────────────── */
  .apps-intro { padding-top: var(--section); padding-bottom: var(--space-6); background: var(--bg-alt); }
  .apps-intro .container { display: grid; gap: var(--space-5); }

  .features { padding-block: 0 var(--section); background: var(--bg-alt); }
  .feature-stage { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: var(--gutter); }
  .feature { display: flex; flex-direction: column; gap: 32px; }
  .feature-video-window, .feature-text-window { display: contents; }
  .feature-media {
    container-type: inline-size; position: relative; display: grid; place-items: center;
    width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-media); overflow: hidden; background: var(--color-stone);
  }
  .feature-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .product { display: inline-flex; align-items: center; gap: 0.5rem; font: 500 1.75rem/1 var(--font-numeric); letter-spacing: 0.01em; color: var(--text); }
  .product svg { width: 24px; height: 24px; }
  .product .app-mark { width: 44px; height: 44px; flex: none; }
  .product span { padding-top: 0.2em; }
  .feature-text .body { max-width: 46ch; }
  .video-toggle {
    position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px;
    background: var(--color-night); color: var(--color-snow); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-snow) 20%, transparent);
    opacity: 0.85;
  }
  .video-toggle .icon { width: 20px; height: 20px; }
  .video-toggle .i-play { display: none; }
  .video-toggle[data-state="paused"] .i-play { display: block; }
  .video-toggle[data-state="paused"] .i-pause { display: none; }
  @media (hover: hover) and (pointer: fine) { .video-toggle:not(:disabled):hover { background: var(--color-night); color: var(--color-lime); opacity: 1; } }

  @media (min-width: 900px) {
    .feature-stage { padding-inline: 24px; }
    .feature { flex-direction: row; align-items: center; gap: 56px; }
    .feature-stage > .feature:nth-child(2n) { flex-direction: row-reverse; }
    .feature-media { flex: 0 0 460px; }
    .feature-text { flex: 1 1 0%; }
  }

  /* iPhone mockup, sized from the media box via cqw (real screen recordings only) */
  .phone {
    --pw: 51cqw;
    position: relative; width: var(--pw); padding: calc(var(--pw) * 0.012); border-radius: calc(var(--pw) * 0.17);
    background: linear-gradient(135deg, #8b8e93 0%, #3d3f43 16%, #26282b 50%, #424448 84%, #7e8186 100%);
    box-shadow:
      0 calc(var(--pw) * 0.05) calc(var(--pw) * 0.14) rgba(19, 32, 26, 0.24),
      0 calc(var(--pw) * 0.012) calc(var(--pw) * 0.03) rgba(19, 32, 26, 0.18),
      inset 0 0 0 calc(var(--pw) * 0.003) rgba(255, 255, 255, 0.10);
  }
  .phone::before, .phone::after { content: ""; position: absolute; width: calc(var(--pw) * 0.013); border-radius: calc(var(--pw) * 0.006); background: linear-gradient(90deg, #5d6064, #2c2e31); }
  .phone::before { left: calc(var(--pw) * -0.011); top: calc(var(--pw) * 0.40); height: calc(var(--pw) * 0.075); box-shadow: 0 calc(var(--pw) * 0.17) 0 0 #3a3c40, 0 calc(var(--pw) * 0.37) 0 0 #3a3c40; }
  .phone::after { right: calc(var(--pw) * -0.011); top: calc(var(--pw) * 0.62); height: calc(var(--pw) * 0.22); }
  .phone-bezel { padding: calc(var(--pw) * 0.03); border-radius: calc(var(--pw) * 0.158); background: #000; }
  .phone-screen { position: relative; aspect-ratio: 1180 / 2556; border-radius: calc(var(--pw) * 0.128); overflow: hidden; background: #131b23; transform: translateZ(0); }
  .phone-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .phone-island { position: absolute; left: 26.8%; top: 1.2%; width: 44.8%; height: 4.5%; border-radius: 999px; background: #000; z-index: 1; }
  .phone-island::after { content: ""; position: absolute; top: 50%; right: 9%; height: 34%; aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle at 35% 35%, #2b3a5c 0%, #0b1020 55%, #05070d 100%); }

  /* Desktop scroll story: sticky stage, scroll-scrubbed slide + crossfade */
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .has-feature-story .features { position: relative; height: 240vh; height: 240dvh; padding-block: 0; }
    .has-feature-story .feature-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; max-width: none; padding-inline: 0; overflow: hidden; }
    .has-feature-story .feature {
      --feature-stage-gutter: clamp(48px, 8vw, 160px);
      --feature-gap: clamp(32px, 5vw, 96px);
      --feature-copy-min: 240px;
      --feature-media-width: min(60dvh, calc(100vw - var(--feature-stage-gutter) - var(--feature-gap) - var(--feature-copy-min)));
      position: absolute; inset: 0;
      width: min(calc(100% - var(--feature-stage-gutter)), calc(var(--feature-media-width) + var(--feature-gap) + 500px));
      margin-inline: auto; display: grid;
      grid-template-columns: var(--feature-media-width) minmax(var(--feature-copy-min), 1fr);
      gap: var(--feature-gap); align-items: center; pointer-events: none;
    }
    .has-feature-story .feature-video-window { display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; overflow: clip; border-radius: var(--radius-media); justify-self: start; pointer-events: none; }
    .has-feature-story .video-toggle { pointer-events: auto; }
    .has-feature-story .feature:first-child .feature-video-window { background: var(--color-stone); }
    .has-feature-story .feature-text-window {
      display: flex; align-items: center; width: min(100%, 500px); overflow: hidden; overflow: clip;
      padding-inline: 6px; margin-inline-start: -6px; /* room for the focus ring */
      -webkit-mask-image: linear-gradient(transparent 0%, #000 12%, #000 88%, transparent 100%);
      mask-image: linear-gradient(transparent 0%, #000 12%, #000 88%, transparent 100%);
    }
    .has-feature-story .feature-media { width: 100%; height: 100%; border-radius: 0; will-change: transform; }
    .has-feature-story .feature-text { width: 100%; pointer-events: auto; will-change: transform, opacity; }
  }

  /* ───────────────────────── Built for: three tiles, each with its own sight ───────────────────────── */
  .builtfor { padding-block: var(--section); background: var(--bg); overflow-x: clip; }
  .builtfor-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
  .tiles { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--space-7) clamp(1rem, 2.4vw, 2.5rem); align-items: start; }
  .tile { display: grid; align-content: start; color: inherit; }
  .tile:nth-child(2) { margin-top: var(--space-7); }
  .tile:nth-child(3) { margin-top: var(--space-8); }
  .sight { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-media); background: var(--color-night); isolation: isolate; }
  .sight img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .sight-base, .sight-color { position: absolute; inset: 0; }
  /* The photo waits in the dark of the aiming mark; the sight brings it into colour */
  .tiles.is-live .sight-base img { filter: grayscale(0.85) brightness(0.42) contrast(1.05); }
  .tiles:not(.is-live) .sight-color { display: none; }
  .tile-ic {
    display: grid; place-items: center; width: 52px; height: 52px; margin-top: var(--space-4); border-radius: 14px; color: var(--color-ink);
    background: color-mix(in srgb, var(--c, var(--color-lime)) 30%, var(--color-white));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--color-lime)) 45%, transparent);
    transition: background-color var(--duration-hover) var(--ease-hover), transform 240ms var(--ease-out);
  }
  .tile-ic .ic { width: 38px; height: 38px; }
  @media (hover: hover) and (pointer: fine) { .tile:hover .tile-ic { background: var(--c, var(--color-lime)); transform: translateY(-2px); } }
  .tile.is-aimed .tile-ic { background: var(--c, var(--color-lime)); }
  .tile-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); }
  .tile-title { font: 500 clamp(2.25rem, 1.6rem + 1.5vw, 3.25rem)/0.95 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
  .tile-desc { margin-top: var(--space-2); color: var(--text-muted); max-width: 36ch; text-wrap: pretty; }
  .tile.is-aimed .ring-arrow::before { opacity: 1; transform: none; }
  .tile.is-aimed .ring-arrow .icon { transform: translateX(3px); }
  .tile.is-aimed .u-line::after { transform: scaleX(1); }
  /* The sight: a ring with four ticks and a lime centre, moved only with transform */
  .scope {
    position: absolute; left: 0; top: 0; z-index: 2; width: 100px; height: 100px; margin: -50px 0 0 -50px;
    border-radius: 50%; pointer-events: none; display: none;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-snow) 90%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-night) 35%, transparent);
  }
  .tiles.is-live .scope { display: block; }
  .scope::before, .scope::after { content: ""; position: absolute; background: color-mix(in srgb, var(--color-snow) 90%, transparent); }
  .scope::before {
    left: 50%; top: -9px; bottom: -9px; width: 1.5px; margin-left: -0.75px;
    -webkit-mask: linear-gradient(#000 0 9px, transparent 9px calc(100% - 9px), #000 calc(100% - 9px));
    mask: linear-gradient(#000 0 9px, transparent 9px calc(100% - 9px), #000 calc(100% - 9px));
  }
  .scope::after {
    top: 50%; left: -9px; right: -9px; height: 1.5px; margin-top: -0.75px;
    -webkit-mask: linear-gradient(90deg, #000 0 9px, transparent 9px calc(100% - 9px), #000 calc(100% - 9px));
    mask: linear-gradient(90deg, #000 0 9px, transparent 9px calc(100% - 9px), #000 calc(100% - 9px));
  }
  .scope-dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--color-lime); }
  @media (max-width: 899.98px) {
    .tiles {
      grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 22rem); gap: var(--space-4);
      overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
      margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
      padding-block: 6px; margin-block: -6px; /* room for the focus ring */
      scrollbar-width: none;
    }
    .tiles::-webkit-scrollbar { display: none; }
    .tile { scroll-snap-align: start; }
    .tile:nth-child(2), .tile:nth-child(3) { margin-top: 0; }
  }

  /* ───────────────────────── About ribbon ───────────────────────── */
  .about { position: relative; overflow: clip; padding-block: var(--section); background: var(--bg-alt); }
  /* Artwork from the app's onboarding (orange phones, as drawn on the dark slide, on paper), right side, wide screens only */
  .about-art { display: none; position: absolute; right: max(var(--gutter), 2vw); top: 50%; width: clamp(15rem, 27vw, 26rem); aspect-ratio: 158.94 / 160; translate: 0 -50%; pointer-events: none; }
  .about-art img { width: 100%; height: 100%; }
  .about-bubble { position: absolute; left: 76.4%; top: 74.9%; width: 24.6%; aspect-ratio: 86.46 / 79.33; }
  .about-bubble img { position: absolute; inset: 0; }
  @media (min-width: 1000px) {
    .about-art { display: block; }
    .about-head { max-width: min(52rem, calc(100% - 26rem)); }
    .about-body { max-width: min(62rem, calc(100% - 26rem)); }
  }
  .about-inner { display: grid; gap: var(--space-5); }
  .about-head { display: grid; gap: var(--space-4); max-width: 52rem; }
  .about-body { columns: 2 22rem; column-gap: var(--space-8); max-width: 62rem; color: var(--text-muted); }
  .about-body p + p { margin-top: var(--space-4); }
  .about-body p { break-inside: avoid; max-width: 28em; }

  /* ───────────────────────── Close-in: the page ends inside the sight ───────────────────────── */
  .closein { position: relative; background: var(--bg-alt); }
  .closein-stage { display: grid; justify-items: center; gap: var(--space-6); padding-block: var(--space-7) var(--section); overflow: hidden; }
  .closein-target { width: min(56svh, 84vw); }
  .closein-target .target { width: 100%; height: auto; }
  .closein-copy { text-align: center; padding-inline: var(--gutter); }
  .closein-copy .h2 { max-width: 14ch; margin-inline: auto; }
  .closein-zone { display: none; }

  /* ───────────────────────── Footer: closing statement + App Store, then the brand block; all centred, rings behind (layout after hustla.app) ───────────────────────── */
  .site-footer { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-block: var(--section) var(--space-5); background: var(--bg); color: var(--text); }
  .site-footer > .container { position: relative; }
  /* The ripple behind the footer (a shot landing under the store badges): assets/ripple/ripple.css */

  .footer-cta { display: grid; justify-items: center; gap: var(--space-5); }
  .footer-title {
    margin-bottom: var(--space-2);
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    font-size: clamp(3.75rem, 1.25rem + 9vw, 10.5rem); line-height: 0.86; letter-spacing: 0.005em;
  }
  .footer-line { display: block; }
  .footer-title em { display: inline-block; font-style: italic; color: var(--emphasis); background: var(--emphasis-bg); line-height: 0.8; padding: 0.09em 0.13em 0.03em; --fill-from: 0.6; }

  /* Store badges side by side: night with a light hairline, the dark-background treatment of Apple's and Google's badges */
  .store-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
  .store-btn {
    display: inline-flex; align-items: center; gap: 0.625rem; min-height: 54px; padding: 0 20px 0 16px;
    border-radius: var(--radius-field); background: var(--bg); color: var(--text); text-align: left; white-space: nowrap;
    box-shadow: inset 0 0 0 1px var(--text-subtle);
    transition: box-shadow var(--duration-hover) var(--ease-hover), transform var(--duration-press) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .store-btn:active { transform: scale(var(--motion-press-scale)); }
  .store-apple, .store-play { width: 22px; height: 22px; flex: none; fill: currentColor; }
  .store-txt { display: flex; flex-direction: column; line-height: 1.1; }
  .store-txt small { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; color: var(--text-muted); }
  .store-txt strong { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
  .store-arrow { display: none; }
  @media (hover: hover) and (pointer: fine) {
    .store-btn { min-width: 12rem; }
    .store-arrow {
      display: block; width: 14px; height: 14px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
      opacity: 0; transform: translateX(-4px);
      transition: opacity var(--duration-hover) var(--ease-hover), transform var(--duration-hover) var(--ease-out);
    }
    .store-btn:hover { box-shadow: inset 0 0 0 1px var(--accent-strong); }
    .store-btn:hover .store-arrow { opacity: 1; transform: none; }
  }
  .store-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-strong); }

  /* Brand block: identity | contact | follow side by side from 1000 px, the legal row underneath; stacked and centred below that */
  .footer-brand { display: grid; justify-items: center; gap: var(--space-5); margin-top: clamp(var(--space-8), 8vw, var(--space-9)); }
  .footer-id { display: grid; justify-items: center; gap: var(--space-1); }
  .footer-tag { color: var(--text-muted); font-size: var(--type-small-size); }
  .footer-contact { display: grid; justify-items: center; font-style: normal; color: var(--text-muted); font-size: var(--type-small-size); line-height: var(--type-small-leading); }
  .footer-contact a, .footer-privacy {
    display: inline-flex; align-items: center; min-height: 44px; color: var(--text);
    text-decoration: underline; text-decoration-thickness: var(--line-underline); text-underline-offset: 0.25em; text-decoration-color: var(--text-subtle);
    transition: text-decoration-color var(--duration-hover) var(--ease-hover);
  }
  .footer-privacy { color: var(--text-muted); font-size: var(--type-small-size); }
  @media (hover: hover) and (pointer: fine) { .footer-contact a:hover, .footer-privacy:hover { text-decoration-color: var(--accent-strong); } }
  .footer-contact a:focus-visible, .footer-privacy:focus-visible { text-decoration-color: var(--accent-strong); }
  .footer-follow { display: grid; justify-items: center; gap: var(--space-2); }
  .social { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
  .social a {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--line);
    transition: color var(--duration-hover) var(--ease-hover), box-shadow var(--duration-hover) var(--ease-hover);
  }
  .social svg { width: 18px; height: 18px; fill: currentColor; }
  @media (hover: hover) and (pointer: fine) { .social a:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-strong); } }
  .social a:focus-visible { color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-strong); }
  .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--space-5); }
  .footer-copy { color: var(--text-subtle); font-size: var(--type-small-size); }
  @media (min-width: 1000px) {
    .footer-brand { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
    .footer-id { justify-items: start; }
    .footer-follow { justify-items: end; }
    .footer-bottom {
      grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; margin-top: var(--space-2);
      border-top: var(--line-hairline) solid var(--line);
    }
  }
}

/* ───────────────────────── Scroll-driven motion (CSS scroll-timeline) ───────────────────────── */
@layer sections {
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      /* Footer statement: words fill 0.5 → 1 as the block scrolls in (entry range, so it completes at the page's end) */
      .footer-cta { view-timeline: --cta block; }
      .footer-title .w { animation: word-fill linear both; animation-timeline: --cta; animation-range: entry calc(10% + var(--i) * 9%) entry calc(50% + var(--i) * 9%); }

      /* Aperture: images open from the aiming mark */
      .aperture { animation: aperture linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }

      /* Close-in: the keyframes are computed by site.js (log scale), which also adds .is-live */
      .closein.is-live { height: 180svh; view-timeline: --closein block; }
      .closein.is-live .closein-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; padding: 0; gap: 0; display: grid; place-items: center; }
      .closein.is-live .closein-target { grid-area: 1 / 1; animation: closein-zoom linear both; animation-timeline: --closein; animation-range: contain 0% contain 82%; }
      .closein.is-live .closein-copy {
        grid-area: 1 / 1; position: relative; z-index: 2;
        animation: closein-copy linear both; animation-timeline: --closein; animation-range: contain 64% contain 86%;
      }
      /* The last part of the zoom fades the stage's lower edge into the footer's night */
      .closein.is-live .closein-stage::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; z-index: 1; pointer-events: none;
        background: linear-gradient(180deg, transparent, var(--color-night));
        animation: fade-in linear both; animation-timeline: --closein; animation-range: contain 70% contain 95%;
      }
      .closein.is-live .closein-zone { display: block; position: absolute; left: 0; right: 0; top: 46svh; bottom: 0; pointer-events: none; }
    }
  }
  /* Floor 0.5 keeps ink at 3.27:1; the moss italic needs 0.6 for 3.37:1 (large text, WCAG 1.4.3) */
  @keyframes word-fill { from { opacity: var(--fill-from, 0.5); } to { opacity: 1; } }
  @keyframes aperture { from { clip-path: circle(14% at 50% 50%); } to { clip-path: circle(72% at 50% 50%); } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes closein-copy { from { opacity: 0; transform: translateY(var(--motion-rise)); } to { opacity: 1; transform: none; } }
}

/* ───────────────────────── Reduced motion ───────────────────────── */
@layer utilities {
  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  @media (prefers-reduced-motion: reduce) {
    .ncard { transition: opacity var(--duration-reduced) var(--ease-out); }
    .dot span { transition: background-color var(--duration-hover) var(--ease-hover); }
    .hero .w, .hero .lede, .hero-actions { animation: none; }
    /* Header and menus: assets/nav.css */
    /* Hover and focus: colour and opacity only */
    .link-arrow .t::after, .u-line::after { transform: none; opacity: 0; transition: opacity var(--duration-hover) var(--ease-hover); }
    .link-arrow:focus-visible .t::after, .has-ring:focus-visible .u-line::after, .ncard-title a:focus-visible .u-line::after { opacity: 1; }
    .link-arrow .icon, .ring-arrow .icon, .ring-arrow::before,
    .link-arrow:focus-visible .icon, .has-ring:focus-visible .ring-arrow .icon, .has-ring:focus-visible .ring-arrow::before { transform: none; }
    /* Press: a colour change instead of the scale */
    .btn-primary:active { background: var(--action-bg-hover); }
    .btn-ghost:active { box-shadow: inset 0 0 0 1px var(--text); }
    .icon-btn:not(:disabled):not([aria-disabled="true"]):active { background: var(--text); color: var(--bg); }
  }
  @media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
    .link-arrow:hover .t::after, .has-ring:hover .u-line::after, .ncard.is-active:hover .u-line::after { opacity: 1; }
    .link-arrow:hover .icon, .has-ring:hover .ring-arrow .icon, .has-ring:hover .ring-arrow::before { transform: none; }
  }
}