@font-face {
  font-family: Lobster;
  src: url('/assets/fonts/Lobster-subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f7f1e6;
  --paper-deep: #efe6d3;
  --paper-line: #dcd1bc;
  --ink: #002f3a;
  --petrol: #0f3a46;
  --petrol-deep: #0a2c36;
  --blue: #2a5db0;
  --blue-soft: #7aa3e0;
  --rust: #c9512b;
  --rust-soft: #e8a98f;
  --muted: #4c5e60;
  --cream: #f7f1e6;
  --focus: #9a5a12;
  --wordmark: Lobster, Georgia, 'Times New Roman', serif;
  --heading: 'Avenir Next', 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 14px;
  --bar-height: 74px;
  font: 400 18px/1.6 var(--body);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
p, ul, ol { margin: 0 0 1.1em; }
h1, h2, h3 { font-family: var(--heading); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 8.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
h3 { font-size: 1.28rem; }
strong { font-weight: 650; }
:target { scroll-margin-top: 1.5rem; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.skip { position: absolute; z-index: 40; top: -100px; left: 16px; padding: .6em 1em; background: var(--ink); color: var(--cream); }
.skip:focus { top: 12px; }
.eyebrow { font-family: var(--heading); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; color: var(--muted); margin: 0 0 16px; }
.lead { font-size: 1.15rem; line-height: 1.55; max-width: 34rem; }
.fine { color: var(--muted); font-size: .82rem; line-height: 1.55; }
.wordmark { font-family: var(--wordmark); font-weight: 400; letter-spacing: -.01em; }

/* Reduced motion: everything that moves stops, and nothing hides behind a reveal. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Buttons. The shadow lives on a pseudo-element and fades in, so a hover only
   touches transform and opacity. */
.button {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: .75em 1.35em; border-radius: 999px;
  background: var(--ink); color: var(--cream); border: 2px solid var(--ink);
  font-family: var(--heading); font-size: 1rem; font-weight: 650; line-height: 1.2;
  text-decoration: none; text-align: center; white-space: nowrap;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1.4), background-color .18s ease;
}
.button::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 14px 28px -12px rgba(0, 47, 58, .55); opacity: 0; transition: opacity .22s ease; z-index: -1; }
.button svg { width: 20px; height: 20px; flex: none; transition: transform .22s cubic-bezier(.2, .7, .2, 1.4); }
.button:active { transform: scale(.96); transition-duration: .08s; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--petrol-deep); text-decoration: none; transform: translateY(-2px) scale(1.03); }
  .button:hover::after { opacity: 1; }
  .button:hover svg { transform: translateY(3px); }
  .button:hover:active { transform: translateY(0) scale(.97); }
}
.button.light { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.button.light:hover { background: #fff; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .95rem; }

/* Header */
.site-header { position: relative; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px; }
.brand { text-decoration: none; line-height: 1; display: inline-flex; align-items: center; gap: 10px; }
.brand .wordmark { font-size: 2rem; }
.top-nav { display: flex; align-items: center; gap: 4px 20px; font-size: .9rem; font-weight: 600; }
.top-nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.top-nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; }
.top-nav .language { padding-left: 20px; border-left: 1px solid var(--paper-line); }
.top-nav .header-cta { display: none; min-height: 44px; padding: .5em 1.1em; font-size: .9rem; }
/* The front page carries the wordmark in the hero, so the small header keeps only the menu on phones. */
.home .site-header .brand { display: none; }
.home .header-inner { justify-content: flex-end; }

/* Hero */
.hero { position: relative; padding-block: clamp(20px, 4vw, 56px) clamp(40px, 6vw, 80px); overflow: visible; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hero-mark { margin-bottom: 10px; }
.hero-mark .wordmark { font-size: clamp(2.6rem, 11vw, 5.6rem); line-height: 1; color: var(--ink); }
.tagline { display: inline-flex; align-items: center; gap: 10px; font-family: var(--heading); font-weight: 600; font-size: 1rem; color: var(--ink); margin-bottom: 16px; }
.tagline .rays { width: 28px; height: 28px; color: var(--blue); }
.tagline .rays.flip { transform: scaleX(-1); }
.hero h1 { margin-bottom: .45em; }
.hero .lead { margin-bottom: 26px; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-bottom: 18px; }
.hero .fine { max-width: 34rem; }

/* The hero scene is four layers at different depths: a paper wash at the back,
   the figures, the objects cut out of the drawing and lifted off the table,
   and the notes in front. site.js moves them against scroll and pointer;
   without it they sit exactly where the drawing had them. */
.hero-scene { position: relative; z-index: 1; margin-inline: -20px; }
.hero-scene .scene-art { position: relative; width: 100%; }
.hero-scene img.blend, .blend {
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 52%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 52%, #000 58%, transparent 100%);
}
.scene-wash { position: absolute; inset: -6% -4%; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 52% 55%, var(--paper-deep) 0%, rgba(239, 230, 211, .7) 45%, rgba(239, 230, 211, 0) 72%); }
.scene-objects { position: absolute; inset: 0; pointer-events: none; }
.scene-objects .obj { position: absolute; mix-blend-mode: multiply; height: auto; }
/* Positions are the crop boxes from the 1400 x 933 drawing, as percentages. */
.o-mug { left: 28.86%; top: 71.17%; width: 8.86%; }
.o-phone { left: 35.86%; top: 81.67%; width: 10.86%; }
.o-speaker { left: 46.71%; top: 67.52%; width: 10.43%; }
.o-bowl { left: 58.43%; top: 74.49%; width: 15.86%; }
.notes { position: absolute; inset: 0; pointer-events: none; }
.note { position: absolute; width: clamp(28px, 6vw, 54px); color: var(--blue); opacity: .9; }
.note.rust { color: var(--rust); }
.note.ink { color: var(--ink); }
/* The drift runs on the svg and the parallax on the span, so the two transforms never fight. */
.note svg { width: 100%; height: auto; display: block; animation: drift 7s ease-in-out infinite; transform-origin: 50% 70%; }
.n1 { top: 10%; left: 8%; }
.n2 { top: 7%; right: 14%; }
.n2 svg { animation-duration: 9s; animation-delay: -3s; }
.n3 { top: 30%; right: 3%; width: clamp(22px, 4vw, 40px); }
.n3 svg { animation-duration: 8s; animation-delay: -5s; }
.n4 { bottom: 18%; left: 2%; width: clamp(22px, 4vw, 40px); }
.n4 svg { animation-duration: 10s; animation-delay: -2s; }
.n5 { top: 44%; left: 14%; width: clamp(16px, 3vw, 28px); opacity: .7; }
.n5 svg { animation-duration: 11s; animation-delay: -7s; }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg) scale(1); }
  35% { transform: translate3d(5px, -12px, 0) rotate(5deg) scale(1.08); }
  70% { transform: translate3d(-3px, -18px, 0) rotate(9deg) scale(.96); }
}

/* Reveal on scroll: only with JS present, and never under reduced motion.
   The attribute value picks the direction; elements without one rise. */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal='left'] { transform: translate3d(-56px, 0, 0); }
.js [data-reveal='right'] { transform: translate3d(56px, 0, 0); }
.js [data-reveal='pop'] { transform: scale(.92); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-delay='1'] { transition-delay: .12s; }
.js [data-reveal][data-delay='2'] { transition-delay: .24s; }
.js [data-reveal][data-delay='3'] { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}
.px { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-depth], .js [data-tilt], .js [data-drift], .js [data-zoom], .js [data-scene] { will-change: transform; }
}

/* Large faint notes behind the deeper paper sections, moving slower than the page. */
.paper-deep { position: relative; overflow: hidden; }
.paper-deep > .container { position: relative; z-index: 1; }
.deco { position: absolute; inset: 0; pointer-events: none; color: var(--ink); opacity: .05; }
.deco svg { position: absolute; width: clamp(180px, 30vw, 420px); height: auto; }
.deco-a { top: -6%; right: -4%; transform: rotate(12deg); }
.deco-b { bottom: -10%; left: -3%; width: clamp(140px, 22vw, 320px); transform: rotate(-14deg); }

/* Sections */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section-heading { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-heading p:last-child { margin-bottom: 0; }
.band { background: var(--petrol); color: var(--cream); }
.band .eyebrow { color: #b8c9c6; }
.band .fine { color: #c9d6d3; }
.band a { color: inherit; }
.paper-deep { background: var(--paper-deep); }

/* Demo board */
.demo-wrap { max-width: 460px; }
.demo { background: var(--petrol); color: var(--cream); border-radius: 22px; padding: 28px 22px 24px; box-shadow: 0 30px 60px -30px rgba(0, 47, 58, .55); position: relative; overflow: hidden; }
.demo::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.demo .cat { display: flex; justify-content: center; align-items: center; gap: 10px; font-family: var(--heading); font-weight: 700; letter-spacing: .2em; font-size: .8rem; color: var(--blue-soft); }
.demo .cat svg { width: 18px; height: 18px; }
.demo .cat svg.flip { transform: scaleX(-1); }
.demo .q { text-align: center; font-family: var(--heading); font-weight: 650; font-size: 1.15rem; line-height: 1.3; margin: 12px 0 22px; }
.board { display: flex; justify-content: center; gap: 14px; margin-bottom: 14px; }
.slot { width: 56px; text-align: center; font-family: var(--heading); font-weight: 700; font-size: 2.6rem; line-height: 1; padding-bottom: 8px; position: relative; height: 66px; }
.slot::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #4a6b72; border-radius: 2px; }
.slot span { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transform-origin: 50% 80%; }
.demo .pts { text-align: center; font-family: var(--heading); font-weight: 650; font-size: 1.05rem; position: relative; height: 1.6em; overflow: hidden; }
.demo .pts span { position: absolute; inset: 0; opacity: 0; }
.demo .answer { text-align: center; font-size: .9rem; color: #c9d6d3; opacity: 0; margin: 10px 0 0; height: 1.5em; }
.demo .speaker { display: flex; justify-content: center; margin-top: 18px; color: var(--blue-soft); }
.demo .speaker svg { width: 58px; height: 46px; }
.demo .speaker .ray { transform-origin: center; animation: pulse 1.6s ease-in-out infinite; }
.demo .speaker .ray.r2 { animation-delay: .25s; }
.demo .speaker .ray.r3 { animation-delay: .5s; }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
/* Twelve-second cycle: hidden word and five points, then a letter lands every
   three seconds and the points count down, and the answer slams in at nine.
   One percent is 120 ms. With JS the cycle restarts each time the board scrolls
   into view, so it always begins at five points. */
.slot .l1 { animation: l1 12s infinite; }
.slot .l2 { animation: l2 12s infinite; }
.slot .l3 { animation: l3 12s infinite; }
@keyframes l1 {
  0%, 25% { opacity: 0; transform: translate3d(0, -48px, 0) scale(1.7); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  26.4% { opacity: 1; transform: translate3d(0, 5px, 0) scale(.92); animation-timing-function: cubic-bezier(.2, .8, .3, 1.3); }
  27.6%, 100% { opacity: 1; transform: none; }
}
@keyframes l2 {
  0%, 50% { opacity: 0; transform: translate3d(0, -48px, 0) scale(1.7); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  51.4% { opacity: 1; transform: translate3d(0, 5px, 0) scale(.92); animation-timing-function: cubic-bezier(.2, .8, .3, 1.3); }
  52.6%, 100% { opacity: 1; transform: none; }
}
@keyframes l3 {
  0%, 75% { opacity: 0; transform: translate3d(0, -48px, 0) scale(1.7); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  76.4% { opacity: 1; transform: translate3d(0, 5px, 0) scale(.92); animation-timing-function: cubic-bezier(.2, .8, .3, 1.3); }
  77.6%, 100% { opacity: 1; transform: none; }
}
/* The bar under a slot flashes and widens when its letter hits. */
.slot:nth-child(1)::after { animation: bar1 12s infinite; }
.slot:nth-child(2)::after { animation: bar2 12s infinite; }
.slot:nth-child(3)::after { animation: bar3 12s infinite; }
@keyframes bar1 { 0%, 26.2% { transform: none; background: #4a6b72; } 26.8% { transform: scaleX(1.3) scaleY(1.6); background: #fff; } 29%, 100% { transform: none; background: var(--blue-soft); } }
@keyframes bar2 { 0%, 51.2% { transform: none; background: #4a6b72; } 51.8% { transform: scaleX(1.3) scaleY(1.6); background: #fff; } 54%, 100% { transform: none; background: var(--blue-soft); } }
@keyframes bar3 { 0%, 76.2% { transform: none; background: #4a6b72; } 76.8% { transform: scaleX(1.3) scaleY(1.6); background: #fff; } 79%, 100% { transform: none; background: var(--blue-soft); } }
/* Points: the old line slides up and out, the new one drops in from below. */
.pts .p5 { animation: p5 12s infinite; }
.pts .p4 { animation: p4 12s infinite; }
.pts .p3 { animation: p3 12s infinite; }
.pts .p0 { animation: p0 12s infinite; }
@keyframes p5 { 0%, 25.6% { opacity: 1; transform: none; } 27% { opacity: 0; transform: translate3d(0, -.9em, 0); } 100% { opacity: 0; transform: translate3d(0, -.9em, 0); } }
@keyframes p4 { 0%, 25.6% { opacity: 0; transform: translate3d(0, .9em, 0); } 27.2% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.2, .8, .3, 1.25); } 50.6% { opacity: 1; transform: none; } 52% { opacity: 0; transform: translate3d(0, -.9em, 0); } 100% { opacity: 0; transform: translate3d(0, -.9em, 0); } }
@keyframes p3 { 0%, 50.6% { opacity: 0; transform: translate3d(0, .9em, 0); } 52.2% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.2, .8, .3, 1.25); } 75.6% { opacity: 1; transform: none; } 77% { opacity: 0; transform: translate3d(0, -.9em, 0); } 100% { opacity: 0; transform: translate3d(0, -.9em, 0); } }
@keyframes p0 { 0%, 75.6% { opacity: 0; transform: scale(1.5); } 77% { opacity: 1; transform: scale(.96); animation-timing-function: cubic-bezier(.2, .8, .3, 1.3); } 78.5%, 100% { opacity: 1; transform: none; } }
.demo .answer { animation: answer 12s infinite; }
@keyframes answer { 0%, 77% { opacity: 0; transform: translate3d(0, 10px, 0); } 80%, 100% { opacity: 1; transform: none; } }
/* The board thumps and the card flashes when the answer lands. */
.demo .board { animation: thump 12s infinite; }
@keyframes thump { 0%, 75.6% { transform: none; } 76.6% { transform: scale(1.05); } 78.4%, 100% { transform: none; } }
.demo::before { animation: flash 12s infinite; }
@keyframes flash { 0%, 75.4% { opacity: 0; } 76% { opacity: .16; } 79%, 100% { opacity: 0; } }
/* With JS the board waits at frame zero until it scrolls into view. */
@media (prefers-reduced-motion: no-preference) {
  .js .demo:not(.is-live) .slot span, .js .demo:not(.is-live) .slot::after, .js .demo:not(.is-live) .pts span, .js .demo:not(.is-live) .answer, .js .demo:not(.is-live) .board, .js .demo:not(.is-live)::before { animation: none; }
  .js .demo:not(.is-live) .pts .p5 { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  /* Static frame: one letter shown, four points left. */
  .demo .slot .l1, .demo .pts .p4 { opacity: 1; transform: none; }
  .demo .answer { opacity: 0; }
  .demo .speaker .ray { opacity: 1; }
}

/* Steps with phones */
.steps-intro { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; margin-bottom: clamp(36px, 5vw, 60px); }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 320px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 20px 24px; margin-inline: -20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.steps::-webkit-scrollbar { display: none; }
.step { scroll-snap-align: center; }
.step .num { font-family: var(--heading); font-weight: 700; font-size: .85rem; color: #a33f1f; letter-spacing: .1em; margin: 0; }
.step h3 { margin: 6px 0 8px; }
.step p { font-size: .95rem; color: var(--muted); margin: 0; }
.phone { position: relative; border-radius: 40px; background: #0a2c36; padding: 9px; box-shadow: 0 32px 50px -28px rgba(0, 47, 58, .6); margin-bottom: 18px; }
.phone img { border-radius: 32px; width: 100%; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.phone::after { content: ''; position: absolute; inset: 0; border-radius: 40px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .step:hover .phone img { transform: scale(1.03); }
}

/* Cards lift under a pointer and press under a finger. Shadows sit on a pseudo-element so only opacity changes. */
.mode, .need, .marquee li { position: relative; isolation: isolate; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.mode::after, .need::after, .marquee li::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 22px 40px -22px rgba(0, 47, 58, .45); opacity: 0; transition: opacity .3s ease; z-index: -1; }
.mode:active, .need:active { transform: scale(.985); transition-duration: .1s; }
@media (hover: hover) and (pointer: fine) {
  .mode:hover, .need:hover { transform: translateY(-4px); }
  .mode:hover::after, .need:hover::after { opacity: 1; }
  .mode:hover .art img { transform: translateY(-3px) rotate(-3deg); }
  .marquee li:hover { transform: translateY(-4px); }
  .marquee li:hover::after { opacity: 1; }
  .marquee li:hover img { transform: rotate(-8deg) scale(1.08); }
}

/* Modes */
.modes { display: grid; grid-template-columns: 1fr; gap: 18px; }
.mode { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; padding: 20px; border-radius: 20px; background: #fffaf0; border: 1px solid var(--paper-line); }
.mode .art { width: 96px; aspect-ratio: 1; display: grid; place-items: center; }
.mode .art img { width: 100%; mix-blend-mode: multiply; transition: transform .35s cubic-bezier(.2, .7, .2, 1.3); }
.mode .art.pair { grid-template-columns: 1fr 1fr; gap: 0; }
.mode h3 { margin-bottom: 6px; }
.mode p { margin: 0; font-size: .95rem; color: var(--muted); }
.mode .free { display: inline-block; font-family: var(--heading); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); border: 1px solid var(--blue); border-radius: 999px; padding: 2px 9px; margin-left: 8px; vertical-align: middle; }

/* TV band */
.tv-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
/* Definite width: as a shrink-to-fit grid item the column was 0 wide until the lazy image loaded, and the page grew 350 px under the reader. */
.tv-art { position: relative; width: 100%; max-width: 520px; margin-inline: auto; }
/* On the petrol band the paper illustration keeps normal blending: multiply would sink the ink lines into the background. The mask turns the paper into a soft spotlight. */
.tv-art img { width: 100%; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 40%, transparent 100%); }
.tv-body { position: relative; }
/* A soft light behind the set breathes slowly; the letters on the screen pop in one by one after the band reveals. */
.tv-body::before { content: ''; position: absolute; inset: 10% 8% 25%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(122, 163, 224, .35), rgba(122, 163, 224, 0) 70%); animation: breathe 5s ease-in-out infinite; pointer-events: none; }
@keyframes breathe { 0%, 100% { opacity: .5; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }
/* The petrol screen fills the opening in the drawing: bezel measured at 13.75% each side, 25.7% from the top and 32.9% from the bottom of the 560 px image. */
.tv-screen { position: absolute; left: 13.75%; right: 13.75%; top: 25.7%; bottom: 32.9%; background: var(--petrol); border-radius: 3px; display: grid; place-items: center; text-align: center; color: var(--cream); padding: 6% 4%; }
.tv-screen .cat { font-family: var(--heading); font-weight: 700; letter-spacing: .2em; font-size: clamp(.55rem, 1.6vw, .8rem); color: var(--blue-soft); }
.tv-screen .word { font-family: var(--heading); font-weight: 700; font-size: clamp(1.4rem, 5vw, 2.6rem); letter-spacing: .25em; margin: 4px 0; }
.tv-screen .word span { display: inline-block; }
.js .tv-art:not(.is-in) .word span { opacity: 0; transform: translate3d(0, -.5em, 0) scale(1.5); }
.js .tv-art.is-in .word span { animation: landTV .5s cubic-bezier(.2, .8, .3, 1.3) both; }
.js .tv-art.is-in .word span:nth-child(1) { animation-delay: .5s; }
.js .tv-art.is-in .word span:nth-child(2) { animation-delay: .8s; }
.js .tv-art.is-in .word span:nth-child(3) { animation-delay: 1.1s; }
@keyframes landTV { from { opacity: 0; transform: translate3d(0, -.5em, 0) scale(1.5); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .tv-art .word span { opacity: 1; transform: none; }
}
.tv-screen .score { display: flex; gap: 18px; font-size: clamp(.55rem, 1.6vw, .8rem); font-weight: 600; }
.tv-screen .score b { color: var(--rust-soft); }
.tv-screen .score b + b, .tv-screen .score i { color: var(--blue-soft); font-style: normal; }
.tv-grid .tv-art { order: -1; }

/* Categories marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); margin-inline: -20px; }
/* The list runs on its own clock; the track around it is pushed further left by the scroll. */
.marquee .track { padding-block: 8px; }
.marquee ul { display: flex; gap: 14px; list-style: none; margin: 0; padding: 4px 0; width: max-content; animation: slide 42s linear infinite; }
.marquee:hover ul { animation-play-state: paused; }
.marquee li { display: grid; grid-template-columns: 56px auto; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; background: #fffaf0; border: 1px solid var(--paper-line); font-family: var(--heading); font-weight: 650; font-size: .95rem; white-space: nowrap; }
.marquee li img { width: 56px; mix-blend-mode: multiply; transition: transform .35s cubic-bezier(.2, .7, .2, 1.3); }
.marquee li .free { font-size: .68rem; color: var(--blue); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-left: 6px; }
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; margin-inline: 0; }
  .marquee ul { flex-wrap: wrap; width: auto; }
  .marquee li[aria-hidden='true'] { display: none; }
}

/* Needs */
.needs { display: grid; grid-template-columns: 1fr; gap: 14px; }
.need { padding: 24px; border-radius: 20px; background: #fffaf0; border: 1px solid var(--paper-line); }
.need h3 { font-size: 1.1rem; margin-bottom: 8px; }
.need p { margin: 0; font-size: .95rem; color: var(--muted); }
.need .art { width: 72px; margin-bottom: 12px; }
.need .art img { mix-blend-mode: multiply; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.price-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--paper-line); }
.price-list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--paper-line); font-size: .98rem; }
.price-list li span:last-child { font-family: var(--heading); font-weight: 700; white-space: nowrap; }
.price-list li.free span:last-child { color: var(--blue); }

/* Final CTA */
.finale { position: relative; overflow: hidden; text-align: center; padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 100px); }
.finale .celebration { max-width: 760px; margin: 0 auto 8px; }
.finale .zoom { transform-origin: 50% 60%; }
.finale .scene-wash { inset: -4% -6%; }
.finale .n1 { top: 4%; left: 6%; }
.finale .n2 { top: 10%; right: 8%; }
.finale .n3 { top: 40%; left: 1%; }
.finale .n4 { top: 32%; right: 2%; }
.finale h2 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.finale .lead { margin-inline: auto; margin-bottom: 26px; }
.finale .actions { justify-content: center; }

/* Contact and footer */
.contact { border-top: 1px solid var(--paper-line); padding-block: 40px; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px 30px; }
.contact h2 { font-size: 1.5rem; margin: 0; }
.contact p { margin: 0; font-size: .95rem; }
.site-footer { border-top: 1px solid var(--paper-line); padding-block: 28px calc(40px + var(--bar-height)); }
.footer-inner { display: flex; justify-content: space-between; align-items: baseline; gap: 14px 24px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.footer-inner p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a { padding-block: 8px; }

/* Sticky download bar (mobile). Without JS it is always present; with JS it hides while another download button is on screen. */
.dock { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(247, 241, 230, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--paper-line); display: flex; align-items: center; justify-content: space-between; gap: 14px; transition: transform .3s ease, opacity .3s ease; }
.dock .meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dock .meta img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.dock .meta div { line-height: 1.2; min-width: 0; }
.dock .meta .name { font-family: var(--wordmark); font-size: 1.3rem; display: block; }
.dock .meta small { color: var(--muted); font-size: .72rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock .button { min-height: 46px; padding: .55em 1.1em; font-size: .92rem; }
.dock.is-hidden { transform: translate3d(0, 110%, 0); opacity: 0; pointer-events: none; }

/* Document pages (help, privacy) */
.page-head { max-width: 820px; padding-block: clamp(28px, 5vw, 60px) 28px; }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); }
.document-grid { display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 64px; }
.contents { align-self: start; font-size: .84rem; line-height: 1.4; border-block: 1px solid var(--paper-line); padding-block: 18px; }
.contents p { font-family: var(--heading); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.contents ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.contents a { display: block; padding-block: 7px; }
.article { max-width: 780px; }
.article > section { border-top: 1px solid var(--paper-line); padding-block: 30px; }
.article > section:first-child { border-top: 0; padding-top: 0; }
.article h2 { font-size: 1.75rem; }
.article h3 { margin-top: 1.4rem; font-size: 1.1rem; }
.article p, .article li { font-size: .95rem; }
.article p:last-child, .article ul:last-child, .article ol:last-child { margin-bottom: 0; }
.article ul, .article ol { padding-left: 1.2em; }
.article li + li { margin-top: .45em; }
.article code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; overflow-wrap: anywhere; }
.callout { background: var(--paper-deep); border-left: 3px solid var(--petrol); padding: 18px 20px; margin-block: 22px; font-size: .92rem; border-radius: 0 12px 12px 0; }
.callout p:last-child { margin: 0; }
.simple-page { min-height: 50vh; max-width: 760px; padding-block: 56px 80px; }
.simple-page h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }

/* Larger screens */
@media (min-width: 700px) {
  .container { width: min(1180px, calc(100% - 64px)); }
  .hero-scene { margin-inline: 0; }
  .steps { grid-auto-columns: 1fr; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; overflow: visible; padding: 0; margin-inline: 0; }
  .modes { grid-template-columns: 1fr 1fr; }
  .needs { grid-template-columns: repeat(3, 1fr); }
  .price-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .contents ol { grid-template-columns: 1fr 1fr 1fr; }
  .marquee { margin-inline: 0; }
}

@media (min-width: 900px) {
  :root { --bar-height: 0px; }
  .site-header { position: sticky; top: 0; background: rgba(247, 241, 230, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(220, 209, 188, .6); }
  .header-inner { padding-block: 12px; }
  .top-nav .header-cta { display: inline-flex; }
  .home .site-header .brand { display: inline-flex; }
  .home .header-inner { justify-content: space-between; }
  .hero { padding-block: clamp(40px, 6vw, 90px) clamp(60px, 8vw, 110px); }
  .hero-grid { grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); }
  .hero-mark .wordmark { font-size: clamp(3.4rem, 5.5vw, 5.2rem); }
  .steps-intro { grid-template-columns: 1fr 1fr; gap: 56px; }
  .tv-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .tv-grid .tv-art { order: 0; }
  .document-grid { grid-template-columns: 230px minmax(0, 1fr); gap: 64px; }
  .contents { position: sticky; top: 90px; border: 0; padding: 0; }
  .contents ol { grid-template-columns: 1fr; }
  .dock { display: none; }
  .site-footer { padding-bottom: 40px; }
}

/* On phones the wordmark and the menu share too little width for one line, so the menu drops to its own line and keeps to the right. */
@media (max-width: 699px) {
  .header-inner { flex-wrap: wrap; gap: 0 20px; padding-block: 12px 6px; }
  .brand .wordmark { font-size: 1.75rem; }
  .top-nav { margin-left: auto; gap: 4px 16px; font-size: .88rem; }
  .top-nav a { min-height: 40px; }
  .top-nav .language { padding-left: 16px; }
  .home .header-inner { padding-block: 12px 4px; }
}

@media (max-width: 380px) {
  .top-nav { gap: 4px 12px; font-size: .84rem; }
  .top-nav .language { padding-left: 12px; }
  .contents ol { grid-template-columns: 1fr; }
  .dock .meta small { display: none; }
}

@media print {
  :root { font-size: 11pt; color: black; background: white; }
  .site-header, .contents, .site-footer, .actions, .skip, .dock, .demo, .notes, .marquee { display: none; }
  .container { width: 100%; }
  .document-grid, .hero-grid, .price-grid { display: block; }
  a { color: inherit; }
  h2, h3 { break-after: avoid; }
  .article > section { break-inside: avoid; }
}

/* The celebration is a short loop of the same drawing, made with Veo from the
   illustration itself. Where motion is turned down the video stops on its poster,
   which is a frame of the same drawing, so nothing is lost. */
.scene-video { display: block; width: 100%; height: auto; }