@import url('./fonts.css');

:root {
  --paper: #ffffff;
  --ink: #182444;
  --engraving: #06175c;
  --muted: #485168;
  --light-colour: #981bff;
  --focus: #4f8cf0;
  --font-display: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --headline-weight: 700;
  --headline-tracking: -0.02em;
  --gutter: calc(clamp(24px, 5vw, 96px) * var(--gutter-scale, 1));
  --art-top: 100px;
  --art-height: min(52dvh, 58vw);
  --headline-size: min(96px, 5dvh, calc((100vw - 2 * var(--gutter)) / 13.2));
  --badge-height: clamp(40px, 4.889dvh, 64px);
  --copy-top: 58dvh;
  --footer-height: 56px;
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; font: 400 16px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
p, h1 { margin: 0; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
::selection { background: var(--ink); color: var(--paper); }
.skip-link { position: fixed; z-index: 5; left: 16px; top: 12px; padding: 12px 20px; background: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.world { position: absolute; inset: 0 0 auto; height: 100dvh; overflow: hidden; pointer-events: none; }
#signal-field { display: block; width: 100%; height: 100%; opacity: 0; }
.field-ready #signal-field { opacity: 1; }
.topbar { position: absolute; z-index: 3; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 18px var(--gutter); }
/* The header has no backdrop or full-width fade. Only glyphs get a soft halo. */
.wordmark { text-shadow: 0 0 7px var(--paper), 0 0 14px var(--paper); }
.wordmark { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font: 600 23px/1 var(--font-display); text-transform: uppercase; }
.logomark { width: 39.5px; height: 40px; fill: currentColor; }
.topbar-right { display: flex; align-items: center; gap: 30px; }
/* The disc shows the emitted hue; its quiet white surround is the 44px target. */
.colour-toggle, .tilt-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 9px; border: 1px solid rgb(24 36 68 / .14); border-radius: 50%; background: var(--paper); }
.tilt-toggle svg { width: 24px; height: 24px; }
.tilt-toggle[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.colour-toggle span { width: 24px; height: 24px; border-radius: 50%; background: var(--light-colour); }
.colour-toggle:hover, .tilt-toggle:hover { border-color: var(--ink); }
.colour-toggle:active, .tilt-toggle:active { transform: scale(.96); }
.legal-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero { position: relative; height: calc(100dvh - var(--footer-height)); min-height: var(--hero-min-height, 0px); overflow-x: clip; }
.hero-art { position: absolute; top: var(--art-top); left: 50%; width: calc(var(--art-height) * 1.5); height: var(--art-height); transform: translateX(-50%); touch-action: none; }
.artwork { display: block; width: 100%; height: 100%; object-fit: contain; mask-image: linear-gradient(black 85%, transparent 100%); }
.field-ready .artwork { visibility: hidden; }
.hero-copy { position: absolute; top: var(--copy-top); left: 50%; transform: translateX(-50%); z-index: 2; width: calc(100% - 2 * var(--gutter)); margin: 0; text-align: center; }
.eyebrow { font: 400 clamp(11px, 1.23dvh, 18px)/1.5 var(--font-display); text-transform: uppercase; margin-bottom: clamp(10px, 1.333dvh, 20px); }
h1 { font: var(--headline-weight) calc(var(--headline-size) * var(--type-scale, 1))/1.1 var(--font-display); text-transform: uppercase; letter-spacing: var(--headline-tracking); text-wrap: balance; }
h1 > span { display: block; white-space: nowrap; }
.hero-subline { max-width: 40em; margin: clamp(12px, 1.555dvh, 24px) auto 0; color: var(--muted); font: 400 clamp(15px, 1.556dvh, 22px)/1.5 var(--font-body); text-wrap: pretty; }
.eyebrow, h1, .hero-subline { text-shadow: 0 0 6px var(--paper), 0 0 15px var(--paper), 0 0 26px var(--paper); }
.store-badges { display: flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; gap: 5px; margin: clamp(10px, 1.333dvh, 20px) auto 0; scroll-margin-top: 32px; }
.store-link { position: relative; border: 0; border-radius: 0; background: transparent; font: inherit; display: grid; place-items: center; min-height: 64px; padding: 10px 7px; }
.apple-badge { display: block; height: calc(var(--badge-height, 44px) * var(--badge-scale, 1)); width: auto; }
.google-link { padding: 0; }
.google-badge { display: block; width: auto; height: calc(var(--badge-height, 44px) * 1.488095 * var(--badge-scale, 1)); }
.legal-footer { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 24px; min-height: 56px; padding: 6px var(--gutter); color: var(--muted); }
.legal-footer p { font: 400 11px/1.5 var(--font-display); text-transform: uppercase; }
.legal-footer > div { display: flex; gap: 26px; }
.legal-footer a { display: inline-flex; align-items: center; min-height: 44px; font: 400 11px/1.5 var(--font-display); text-transform: uppercase; }
@media (max-width: 767px) {
  :root { --art-top: 108px; --art-height: calc((100vw - 16px) / 1.5); --gutter: calc(22px * var(--gutter-scale, 1)); --footer-height: 0px; --badge-height: clamp(40px, 11.8vw, 50px); --headline-size: min(28.7px, calc((100vw - 44px) / 13.2)); }
  .topbar { height: 68px; padding-top: 12px; padding-bottom: 12px; }
  .topbar-right { gap: 18px; }
  .wordmark { font-size: 19px; gap: 11px; }
  .logomark { width: 33.5px; height: 34px; }
  .hero-copy { width: calc(100% - 44px); }
  .eyebrow { font-size: 11px; margin-bottom: 10px; }
  h1 { line-height: 1.14; }
  .hero-subline { font-size: 14px; max-width: none; margin-top: 10px; }
  .store-badges { margin-top: 6px; gap: 0; }
  .store-link { min-height: 44px; padding-block: 0; }
  /* Phones: no legal footer on the hero; /privacy and /terms stay live. */
  .legal-footer { display: none; }
  .legal-footer p { max-width: 46ch; }
  .legal-footer > div { gap: 28px; }
}
@media (max-width: 365px) {
  .topbar-right { gap: 10px; }
  .apple-badge { height: 40px; }
  .google-badge { height: 59.524px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.still .hero-art { touch-action: auto; }

/* Capture-only registration proof; no composition override. */
.head-silhouette .topbar, .head-silhouette .hero-copy, .head-silhouette .legal-footer { visibility: hidden; }

/* Permission feedback stays available to assistive technology. */
.tilt-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Short landscape can scroll beyond the viewport canvas. Fade its edge before
   the document continues to the links; normal viewport ray styling is intact. */
.hero-scrolls .world { mask-image: linear-gradient(black calc(100% - 48px), transparent); }

/* Positioned chips leave the official badge geometry untouched. */
.badge-tip { position: absolute; z-index: 4; top: calc(50% + var(--badge-height) * var(--badge-scale, 1) / 2 + 6px); left: 50%; transform: translateX(-50%); width: max-content; padding: 5px 8px; border-radius: 3px; background: var(--ink); color: var(--paper); font: 400 11px/1.4 var(--font-display); text-transform: uppercase; white-space: nowrap; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.badge-tip::before { content: ''; position: absolute; bottom: 100%; left: calc(50% - 4px); border: 4px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.store-link[data-tip-open] .badge-tip { visibility: visible; opacity: 1; }
@media (max-width: 365px) { .badge-tip { top: calc(50% + 26px); } }

.still .badge-tip { transition: none; }

/* Founder comparison only; fitHero gates this class on capture/tune URLs. */
@media (min-width: 1024px) { .chest-wide-copy .hero-subline { max-width: 56em; } }