/* aelfred.ai home, third edition (27 Oct 2026). Louis: "from vitamins to PAINKILLER, from stylish to SERIOUS TOOL with
   style". No top bar. One line, the demo behind it, the quote, the salary. Jost for the voice of the page; Garamond
   only for the member's words; gold only where it leads somewhere. Self-hosted faces, no framework, no cookies. */
@import url("/fonts/fonts.css");
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/fonts/jost.woff) format('woff'); }

:root {
  --bg: #030608; --bg-2: #070b0d; --bg-3: #0b1013;
  --ink: #f2f4f2; --ink-2: rgba(242,244,242,.78); --ink-3: rgba(242,244,242,.62);
  --line: rgba(242,244,242,.09); --line-2: rgba(242,244,242,.16);
  --gold: #DAB542; --gold-2: #F0CC55; --gold-line: rgba(218,181,66,.32);
  --green: #00ff88; /* the app's own green (base.css), for a job done */
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'EB Garamond', Georgia, serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --gutter: clamp(16px, 5vw, 72px);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.label { margin: 0; font-size: 12.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
h2 { margin: 0; font-weight: 400; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border-radius: 999px; background: var(--gold); color: #0a0a08; font-family: var(--sans); font-weight: 500; font-size: 16px; letter-spacing: .02em; text-decoration: none; transition: background 200ms var(--ease), transform 200ms var(--ease); }
.btn:hover { background: var(--gold-2); transform: translateY(-1px); }
.btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); font-weight: 400; font-size: 16px; text-decoration: none; transition: border-color 200ms var(--ease); }
.btn-line:hover { border-color: var(--ink-2); }

/* ── hero: the line, and the demo running behind it ── */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(218,181,66,.07), transparent 70%), var(--bg); }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.demo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.demo .m { position: absolute; left: 0; top: 0; width: 76px; height: 76px; margin: -38px 0 0 -38px; opacity: 0; will-change: transform, opacity; }
.demo .m img { width: 100%; height: 100%; }
.demo .orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.demo { transform-origin: 50% 48%; will-change: transform; }
.demo .m.far { filter: blur(1.6px); }
.demo .orbits ellipse { fill: none; opacity: var(--k, 0); }
.demo .orbits .ring { stroke: rgba(218,181,66,.5); stroke-width: 1; }
.demo .orbits .ring, .demo .orbits .halo { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.33,0,.2,1); }
.hero.s3 .demo .orbits .ring, .hero.s3 .demo .orbits .halo { stroke-dashoffset: 0; }
.hero.s3 .demo .orbits .o1 { transition-delay: .06s; } .hero.s3 .demo .orbits .o2 { transition-delay: .12s; }
.demo .dust { position: absolute; left: 0; top: 0; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #F0CC55; box-shadow: 0 0 6px rgba(240,204,85,.8); opacity: 0; will-change: transform, opacity; }
.demo .m.land img { animation: land .5s ease-out; }
@keyframes land { 0% { filter: brightness(2.2) drop-shadow(0 0 10px rgba(240,204,85,.9)); } 100% { filter: none; } }
.demo .orbits .halo { stroke: rgba(218,181,66,.07); stroke-width: 6; }
.demo .orbits .comet { stroke: #F0CC55; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .8 99.2; animation: comet 9s linear infinite; filter: drop-shadow(0 0 4px rgba(240,204,85,.9)); }
.demo .orbits .comet.o1 { animation-duration: 7.5s; animation-direction: reverse; }
.demo .orbits .comet.o2 { animation-duration: 11s; }
@keyframes comet { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.demo .pulse { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1px solid rgba(240,204,85,.8); box-shadow: 0 0 40px rgba(218,181,66,.45), inset 0 0 30px rgba(218,181,66,.3); opacity: 0; pointer-events: none; }
.demo .pulse.go { animation: pulse .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pulse { 0% { transform: scale(.2); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(34); opacity: 0; } }
.hero .bloom { position: absolute; left: 50%; top: 48%; width: min(900px, 120vw); height: min(560px, 80vh); transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(218,181,66,.16), rgba(218,181,66,.05) 40%, transparent 70%); }
.hero.s3 .bloom { animation: breathe 7s 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.07); } }
.hero .veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 46% 30% at 50% 47%, rgba(3,6,8,.82), rgba(3,6,8,0) 100%); }
.hero .copy { text-align: center; display: grid; justify-items: center; gap: clamp(22px, 3vw, 36px); padding-top: 120px; padding-bottom: 110px; }
.signin-corner { position: absolute; top: clamp(16px, 2.4vw, 28px); right: var(--gutter); z-index: 3; display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); font-size: 15px; font-weight: 400; letter-spacing: .02em; text-decoration: none; background: rgba(3,6,8,.4); transition: border-color 200ms var(--ease), color 200ms var(--ease); }
.signin-corner:hover, .signin-corner:focus-visible { border-color: var(--gold-line); color: var(--gold-2); }
.hero .brand { margin: 0; display: flex; align-items: flex-end; gap: 1px; opacity: .95; }
.hero .brand img { width: 132px; height: auto; }
.hero .brand span { font-family: var(--serif); font-size: 31px; line-height: .9; color: var(--gold); letter-spacing: .01em; margin-bottom: 1px; }
.hero h1 { margin: 0; font-weight: 400; font-size: clamp(50px, 9.4vw, 136px); line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .sub { margin: 0; font-size: clamp(18px, 1.8vw, 22px); color: var(--ink-2); letter-spacing: .01em; }
/* What he is, in one line (Louis, 1 Nov 20:23); it arrives after the burst. */
.hero .sub.what { text-wrap: balance; opacity: 0; transform: translateY(8px); transition: opacity 600ms .45s var(--ease), transform 600ms .45s var(--ease); }
.hero.s3 .sub.what { opacity: 1; transform: none; }
@media (max-width: 560px) { .hero .sub.what { max-width: 26ch; } }
/* The sale (Louis, 1 Nov 20:23 and 21:06): the free week, then one price. One press in the hero, after the line. */
.hero .hero-go { opacity: 0; transform: translateY(8px); transition: opacity 600ms .8s var(--ease), transform 600ms .8s var(--ease), background 200ms var(--ease); }
.hero.s3 .hero-go { opacity: 1; transform: none; }
.offer-card .trial { margin: 14px 0 0; font-size: clamp(30px, 3.4vw, 42px); font-weight: 400; letter-spacing: -.02em; color: var(--gold); }
.hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 1px; height: 44px; background: linear-gradient(var(--gold-line), transparent); }

/* ── what he does: shown ── */
.section { padding: clamp(88px, 11vw, 150px) 0; }
.wrap.wide { max-width: 1400px; }
.flow { position: relative; display: grid; grid-template-columns: 1.05fr 2.5fr .75fr; align-items: center; gap: clamp(40px, 5vw, 80px); min-height: 600px;
  padding: clamp(36px, 4.5vw, 64px); border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(ellipse at 50% 0%, rgba(218,181,66,.06), transparent 60%), var(--bg-2); }
.src { display: grid; gap: 22px; }
.srcbox { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg-3); transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.srcbox .row1 { display: flex; align-items: center; gap: 14px; }
.srcbox img { width: 48px; height: 48px; }
.said { margin: 0; min-height: 1.5em; font-size: 17px; line-height: 1.45; color: var(--ink); opacity: .35; transition: opacity 300ms var(--ease); }
.said.live { opacity: 1; }
.wave { display: flex; align-items: center; gap: 3px; height: 38px; }
.wave i { width: 3px; height: 18%; border-radius: 2px; background: var(--gold); opacity: .55; transition: opacity 300ms; }
.talking .wave i { opacity: 1; animation: wave .9s ease-in-out infinite; }
.wave i:nth-child(2n) { animation-delay: -.3s !important; } .wave i:nth-child(3n) { animation-delay: -.6s !important; } .wave i:nth-child(5n) { animation-delay: -.15s !important; }
@keyframes wave { 0%, 100% { height: 18%; } 50% { height: 100%; } }
.bubbles { display: grid; gap: 5px; }
.bubbles i { display: block; height: 7px; width: 60px; border-radius: 4px; background: var(--line-2); }
.bubbles i:nth-child(2) { width: 42px; margin-left: 18px; background: rgba(218,181,66,.35); } .bubbles i:nth-child(3) { width: 50px; }
.talking .bubbles i:nth-child(2) { animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.dests { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tile { display: grid; grid-template-rows: auto 1fr; gap: 14px; min-height: 230px; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg-3); transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.th { display: flex; align-items: center; gap: 12px; }
.th img { width: 40px; height: 40px; }
.tile span, .arc > span { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.tile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; height: 136px; overflow: hidden; }
.tile li { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(242,244,242,.04); font-size: 15px; line-height: 1.35; color: var(--ink); animation: rise 450ms var(--ease) both; transition: opacity 400ms var(--ease), transform 400ms var(--ease); white-space: nowrap; overflow: hidden; }
.tile li span { overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--ink); }
.tile li em { flex: none; font-style: normal; font-weight: 500; color: var(--gold); }
.tile li em:empty { display: none; }
.tile li.k-map::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg) translateY(1px); background: var(--gold); }
.tile li.k-task::before { content: ""; flex: none; width: 13px; height: 13px; border: 1px solid var(--ink-3); border-radius: 4px; transform: translateY(2px); transition: background 300ms var(--ease), border-color 300ms var(--ease); }
.tile li.k-task.done::before { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23030608' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; border-color: var(--green); box-shadow: 0 0 8px rgba(0,255,136,.35); }
.tile li.k-task.done span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(0,255,136,.45); }
.tile li.out { opacity: 0; transform: translateX(14px); }
.arc { display: grid; justify-items: center; gap: 14px; padding: 26px 18px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg-3); transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.arc img { width: 60px; height: 60px; }
.stack { display: grid; gap: 4px; width: 84px; min-height: 70px; align-content: end; }
.stack i { display: block; height: 4px; border-radius: 2px; background: rgba(218,181,66,.5); animation: rise 400ms var(--ease) both; }
.hit { border-color: var(--gold-line) !important; box-shadow: 0 0 0 1px var(--gold-line), 0 0 34px rgba(218,181,66,.12); }
.chip { position: absolute; left: 0; top: 0; z-index: 3; max-width: 220px; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #0a0c0d; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; box-shadow: 0 8px 26px rgba(0,0,0,.5); }
.chip.gold { background: var(--gold); }

/* ── the member's words ── */
.quote { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quote > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; opacity: .55; filter: saturate(.7); }
.quote::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--bg) 0%, rgba(3,6,8,.4) 30%, rgba(3,6,8,.4) 70%, var(--bg) 100%); }
.quote figure { position: relative; z-index: 2; margin: 0 auto; padding: clamp(110px, 14vw, 190px) var(--gutter); text-align: center; display: grid; gap: 26px; justify-items: center; }
.quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(38px, 5.6vw, 76px); line-height: 1.1; color: var(--ink); text-wrap: balance; }
.quote figcaption { font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.quote figcaption b { color: var(--gold); font-weight: 500; }

/* ── the film: a frame waiting for his new film ── */
.film { padding: clamp(80px, 10vw, 140px) 0 0; }
.frame { position: relative; margin: 0 auto; max-width: 1100px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(218,181,66,.06), 0 0 80px rgba(218,181,66,.07); background: var(--bg-3); }
.frame > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; transform: scale(1.02); transform-origin: 30% 30%; transition: transform 1.2s var(--ease); filter: saturate(.95) brightness(.92); }
.frame .cam { position: absolute; z-index: 2; right: clamp(16px, 2.6vw, 30px); bottom: clamp(52px, 6vw, 76px); width: clamp(64px, 11vw, 132px); height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; border-radius: 50%; border: 2px solid rgba(242,244,242,.85); box-shadow: 0 12px 40px rgba(0,0,0,.55); }
.frame:hover > img:first-child { transform: scale(1.05); }
.frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,6,8,.15) 0%, rgba(3,6,8,0) 40%, rgba(3,6,8,.75) 100%), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(3,6,8,.45) 100%); pointer-events: none; }
.play { position: absolute; z-index: 3; left: 50%; top: 50%; width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px); margin: calc(clamp(64px, 8vw, 92px) / -2) 0 0 calc(clamp(64px, 8vw, 92px) / -2);
  display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: rgba(242,244,242,.1); border: 1px solid rgba(242,244,242,.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0,0,0,.4); transition: transform 300ms var(--ease), background 300ms var(--ease); }
.play svg { width: 38%; height: 38%; margin-left: 6%; }
.frame:hover .play { transform: scale(1.06); background: rgba(242,244,242,.16); }
.frame figcaption { position: absolute; z-index: 2; left: clamp(18px, 3vw, 36px); right: clamp(18px, 3vw, 36px); bottom: clamp(16px, 2.6vw, 30px); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.frame figcaption > span:first-child { display: grid; gap: 6px; text-align: left; }
.frame .who { font-size: clamp(15px, 1.6vw, 20px); color: var(--ink); }
.frame .soon { position: absolute; z-index: 3; top: clamp(14px, 2.2vw, 24px); right: clamp(14px, 2.2vw, 24px); padding: 7px 12px; border-radius: 999px; background: rgba(3,6,8,.55); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 11.5px !important;  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* ── one offer: his salary and our promise in one card ── */
.offer-card { position: relative; max-width: 760px; margin: 0 auto; padding: clamp(44px, 6vw, 72px) clamp(22px, 5vw, 72px) clamp(36px, 5vw, 56px); display: grid; justify-items: center; text-align: center;
  border: 1px solid var(--line-2); border-radius: 28px; background: radial-gradient(ellipse at 50% 0%, rgba(218,181,66,.09), transparent 60%), linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: 0 40px 120px rgba(0,0,0,.5); }
.offer-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(218,181,66,.45), rgba(218,181,66,0) 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.price { margin: 22px 0 0; display: flex; align-items: center; justify-content: center; gap: 18px; }
.price strong { display: flex; align-items: flex-start; font-weight: 400; font-size: clamp(96px, 12vw, 152px); line-height: .9; letter-spacing: -.055em; }
.price strong small { font-size: .36em; font-weight: 300; line-height: 1; margin: .14em .06em 0 0; letter-spacing: 0; color: var(--ink-2); }
.price s { font-size: clamp(22px, 2.2vw, 28px); font-weight: 300; color: var(--ink-3); text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.price span { align-self: flex-end; margin-bottom: .6em; font-size: 18px; color: var(--ink-2); }
.offer { margin: 22px 0 30px; font-size: 16px; color: var(--ink-2); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.code { position: relative; font: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: .14em; color: var(--gold); background: rgba(218,181,66,.08); border: 1px dashed var(--gold-line); border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: background 200ms var(--ease); }
.code:hover { background: rgba(218,181,66,.14); }
.code.copied::after { content: "Copied"; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 8px; }
.offer-card .btn { min-width: min(380px, 100%); min-height: 68px; padding: 0 44px; font-size: 20px; letter-spacing: .04em; box-shadow: 0 18px 50px rgba(218,181,66,.18); }
@font-face { font-family: 'Mrs Saint Delafield'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/mrs-saint-delafield.woff) format('woff'); }
.offer-card .vow { margin-top: clamp(40px, 5vw, 56px); padding-top: clamp(30px, 4vw, 44px); border-top: 1px solid var(--line); display: grid; justify-items: center; gap: 16px; width: 100%; }
.offer-card .sig { margin: 0; font-family: 'Mrs Saint Delafield', cursive; font-weight: 400; font-size: clamp(56px, 7vw, 84px); line-height: 1; color: var(--gold); transform: rotate(-4deg); }
.offer-card .vow p { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.offer-card .thanks { font-family: var(--serif); font-style: italic; font-size: 22px !important; color: var(--gold) !important; }
.fine { margin: 28px 0 0; max-width: 46ch; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.fine a { color: var(--ink-2); }

/* ── footer ── */
footer { border-top: 1px solid var(--line); background: var(--bg-2); }
footer .wrap { padding-top: 48px; padding-bottom: 56px; display: grid; gap: 28px; }
.tg { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 14px; text-decoration: none; transition: border-color 200ms var(--ease); }
.tg:hover { border-color: var(--gold-line); }
.tg img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.tg .go { margin-left: auto; font-size: 14px; color: var(--gold); }
footer .line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
footer .line > img { width: 120px; opacity: .85; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer nav a, footer nav button { font: inherit; font-size: 14px; color: var(--ink-2); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
footer nav a:hover, footer nav button:hover { color: var(--ink); }
footer .company { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
footer .company a { color: var(--ink-2); }

/* ── motion ── */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero .brand { animation: dawn .55s var(--ease) both; }
@keyframes dawn { from { opacity: 0; filter: blur(6px); transform: scale(.96); } to { opacity: .95; filter: none; transform: none; } }
.hero h1 span { display: inline-block; opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--ease), transform 450ms var(--ease), filter 450ms var(--ease); filter: blur(8px); }
.hero.s2 h1 .l1 { opacity: 1; transform: none; filter: none; }
.hero.s3 h1 .l2 { opacity: 1; transform: none; filter: none; transition-duration: 320ms; }
.hero h1 em { background: linear-gradient(100deg, var(--gold) 0%, var(--gold) 40%, #fff3c4 50%, var(--gold) 60%, var(--gold) 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero.s3 h1 em { animation: shine 1.1s .35s var(--ease) both; }
@keyframes shine { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.hero .bloom { opacity: 0; transition: opacity .8s var(--ease); }
.hero.s3 .bloom { opacity: 1; }
.hero .scroll-cue { opacity: 0; transition: opacity .6s .5s var(--ease); }
.hero.s3 .scroll-cue { opacity: 1; }
/* Header B, for the A/B look (Louis, 31 Oct 19:32-19:38): "Too much on your mind? Ask Aelfred." Only at
   /?hero=b; the atom stays the page's header. The marks drift and glide into one line, the mic settles in the middle, and "Ask Aelfred." lands in gold with A's golden burst. */
.hero.b h1 { font-size: clamp(42px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -.035em; }
.hero.b h1 .l2 { font-size: .74em; letter-spacing: -.025em; margin-top: .2em; }
.hero.b h1 span { transition-duration: 700ms; }
.hero.b .demo .orbits, .hero.b .brand { display: none; }
.hero.b .copy { padding-bottom: 24vh; }
.demo .mic { position: absolute; left: 0; top: 0; width: 80px; height: 80px; margin: -40px 0 0 -40px; opacity: 0; transform: scale(.85); filter: drop-shadow(0 0 0 rgba(240,204,85,0)); transition: opacity 600ms var(--ease), transform 600ms var(--ease), filter 1.2s var(--ease); }
.demo .mic img { width: 100%; height: 100%; }
.hero.b.s25 .demo .mic { opacity: 1; transform: none; filter: drop-shadow(0 0 14px rgba(240,204,85,.45)); }
.hero.b .demo .m.land img { animation: settle .7s ease-out; }
@keyframes settle { 0% { filter: brightness(1.5) drop-shadow(0 0 8px rgba(240,204,85,.6)); } 100% { filter: none; } }
.demo .m .woe { position: absolute; width: 46%; height: 46%; right: -14%; top: -14%; transition: opacity .5s var(--ease), transform .7s var(--ease); }
.hero.b.s3 .demo .m .woe { opacity: 0; transform: translateY(26px) rotate(30deg) scale(.4); }
.demo .junk { position: absolute; left: 0; top: 0; width: 66px; height: 66px; margin: -33px 0 0 -33px; opacity: 0; will-change: transform, opacity; }
.demo .junk img { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.demo .alarm { position: absolute; inset: -5%; background: radial-gradient(70% 65% at 50% 55%, rgba(196,33,15,.55), rgba(226,71,14,.22) 45%, rgba(90,10,4,.15) 75%, transparent 95%); opacity: 0; transition: opacity 1.1s var(--ease); }
.hero.b.s1 .demo .alarm { opacity: 1; animation: flicker 1.3s steps(6) infinite; }
.hero.b.s3 .demo .alarm { opacity: 0; animation: none; }
@keyframes flicker { 0%, 100% { opacity: .9; } 15% { opacity: .35; } 30% { opacity: 1; } 55% { opacity: .5; } 70% { opacity: 1; filter: brightness(1.6); } 85% { opacity: .6; } }
.hero.b .demo .dust { background: #ff7a2a; box-shadow: 0 0 8px rgba(255,90,30,.9); } /* embers, not gold dust, while it burns */
.hero.b.s2:not(.s3) h1 .l1 { animation: tremble .1s steps(2) 4; }
@keyframes tremble { 0% { transform: translate(-3px, 1.5px); } 50% { transform: translate(3px, -1.5px); } 100% { transform: translate(-1.5px, -3px); } }
.hero.b h1 .l2 em { opacity: 0; transition: opacity .5s .5s var(--ease); }
.hero.b.s3 h1 .l2 em { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero.b h1 .l1 { animation: none; } .demo .alarm, .demo .junk, .demo .m .woe { display: none; } }
@media (max-width: 560px) { .demo .junk { width: 40px; height: 40px; margin: -20px 0 0 -20px; } }
@media (max-width: 560px) { .hero.b .copy { padding-bottom: 22vh; } .hero.b .scroll-cue { display: none; } .demo .mic { width: 61px; height: 61px; margin: -30.5px 0 0 -30.5px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── widths ── */
@media (max-width: 980px) {
  .flow { grid-template-columns: 1fr; min-height: 0; }
  .src { grid-template-columns: 1fr 1fr; }
  .arc { grid-auto-flow: column; align-items: center; justify-content: center; gap: 16px; padding: 14px 20px; }
  .arc img { width: 40px; height: 40px; }
  .stack { width: 60px; min-height: 36px; }
}
@media (max-width: 560px) {
  .hero .veil { background: radial-gradient(ellipse 70% 26% at 50% 50%, rgba(3,6,8,.9), rgba(3,6,8,0) 100%); }
  body { font-size: 17px; }
  .demo .m { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .flow { padding: 16px 12px; gap: 34px; border-radius: 18px; }
  .src { gap: 10px; }
  .srcbox { padding: 12px; gap: 10px; }
  .srcbox img { width: 32px; height: 32px; }
  .said { font-size: 14px; min-height: 2.9em; }
  .wave { gap: 2px; } .wave i { width: 2px; } .wave i:nth-child(n+10) { display: none; }
  .bubbles i { width: 40px; }
  .dests { gap: 10px; }
  .tile { min-height: 190px; padding: 12px 10px; gap: 10px; }
  .th img { width: 28px; height: 28px; }
  .tile span { font-size: 11px; letter-spacing: .1em; }
  .tile li { padding: 7px 8px; gap: 6px; font-size: 12.5px; }
  .tile li span { font-size: 12.5px; }
  .tile ul { height: 118px; }
  .chip { font-size: 12px; max-width: 170px; padding: 6px 10px; }
  .hero .actions { width: 100%; }
  .hero .actions a { flex: 1 1 140px; }
  .tg .go { margin-left: 0; }
}

/* Polish (Louis, 2 Nov 02:11): less dead air under the hero, a line that says what the board is, shorter tiles, how the free week works. */
.section.does { padding-top: clamp(28px, 4vw, 64px); }
.does-h { margin: 0 auto clamp(26px, 3.4vw, 44px); max-width: 22ch; text-align: center; font-weight: 400; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.tile { min-height: 196px; }
.how { list-style: none; margin: 26px auto 0; padding: 0; display: grid; gap: 10px; justify-items: start; width: max-content; max-width: 100%; }
.how li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.how li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23030608' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.hero.b::after { opacity: .5; }
@media (max-width: 560px) {
  .hero.b { min-height: 80svh; }
  .hero.b .copy { padding-bottom: 18vh; }
  .tile { min-height: 150px; }
  .tile ul { height: 100px; }
}

/* His portrait follows the conversation (Louis, 2 Nov 02:17), and a bigger first button (02:14). */
.section.moods { padding-top: 0; }
.mood { max-width: 760px; margin: 0 auto; display: grid; justify-items: center; gap: 22px; }
.mood-say { margin: 0; min-height: 52px; padding: 14px 20px; border-radius: 18px 18px 4px 18px; background: var(--gold); color: #0a0a08; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
.mood-say:not(:empty) { opacity: 1; transform: none; }
.mood-pic { position: relative; width: min(100%, 560px); aspect-ratio: 3 / 2; overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: var(--bg-3); box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 80px rgba(218,181,66,.06); pointer-events: none; }
.mood-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transform: scale(1.03); transition: opacity 700ms var(--ease), transform 1.6s var(--ease); }
.mood-pic img.on { opacity: 1; transform: none; }
.hero .hero-go { min-height: 64px; padding: 0 44px; font-size: 19px; letter-spacing: .03em; box-shadow: 0 16px 44px rgba(218,181,66,.22); }
@media (max-width: 560px) {
  .hero .hero-go { min-height: 60px; width: min(320px, 86vw); font-size: 18px; }
}

/* Ask him anything: the second demo. */
.section.ask { padding-top: 0; }
.chatdemo { max-width: 620px; margin: 0 auto; border: 1px solid var(--line-2); border-radius: 26px; background: radial-gradient(ellipse at 50% 0%, rgba(218,181,66,.07), transparent 60%), var(--bg-2); box-shadow: 0 40px 120px rgba(0,0,0,.5); overflow: hidden; }
.cd-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cd-head img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.cd-head span { font-size: 15px; letter-spacing: .04em; }
.cd-head i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(0,255,136,.5); }
.cd-body { min-height: 300px; padding: 26px 20px; display: grid; align-content: start; gap: 16px; }
.cd-me { justify-self: end; max-width: 78%; margin: 0; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--gold); color: #0a0a08; font-size: 16px; line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
.cd-him { justify-self: start; max-width: 86%; display: grid; gap: 10px; }
.cd-him p { margin: 0; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--bg-3); border: 1px solid var(--line-2); font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.cd-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--gold-line); background: rgba(218,181,66,.06); opacity: 0; transform: translateY(8px) scale(.98); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.cd-card img { width: 34px; height: 34px; }
.cd-card span { display: grid; gap: 2px; }
.cd-card b { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.cd-card em { font-style: normal; font-size: 14.5px; color: var(--ink); }
.chatdemo.s1 .cd-me, .chatdemo.s2 .cd-him p, .chatdemo.s3 .cd-card { opacity: 1; transform: none; }
.cd-input { display: flex; align-items: center; gap: 12px; margin: 0 16px 16px; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-3); min-height: 50px; }
.cd-typed { flex: 1; font-size: 15.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-typed:empty::before { content: "Ask Aelfred…"; color: var(--ink-3); }
.cd-input img { width: 26px; height: 26px; }
@media (max-width: 560px) { .cd-body { min-height: 330px; padding: 20px 14px; } .cd-him p { font-size: 17px; } }

/* And the rest of the house: eight abilities, each with its mark and the words to ask. */
.section.more { padding-top: 0; }
.more-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px); }
.more-grid li { display: grid; justify-items: start; align-content: start; gap: 10px; padding: 22px 20px; border: 1px solid var(--line-2); border-radius: 18px; background: radial-gradient(ellipse at 0% 0%, rgba(218,181,66,.06), transparent 60%), var(--bg-2); transition: border-color 300ms var(--ease), transform 300ms var(--ease); }
.more-grid li:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.more-grid img { width: 52px; height: 52px; }
.more-grid b { font-weight: 500; font-size: 17px; color: var(--ink); }
.more-grid span { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 980px) { .more-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .more-grid li { padding: 16px 14px; } .more-grid img { width: 42px; height: 42px; } .more-grid span { font-size: 13.5px; } }

/* Sections come in as they are reached, like the hero: the line first, then the picture (Louis, 2 Nov 02:20). One idea, one line. */
.does-h { max-width: none; }
.reveal { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 700ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease); }
.reveal.late { transition-delay: 220ms; }
.reveal.in { opacity: 1; transform: none; filter: none; }
.more-grid.reveal li { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease), transform 600ms var(--ease), border-color 300ms var(--ease); }
.more-grid.reveal.in li { opacity: 1; transform: none; }
.more-grid.reveal.in li:nth-child(2) { transition-delay: 60ms; } .more-grid.reveal.in li:nth-child(3) { transition-delay: 120ms; } .more-grid.reveal.in li:nth-child(4) { transition-delay: 180ms; }
.more-grid.reveal.in li:nth-child(5) { transition-delay: 240ms; } .more-grid.reveal.in li:nth-child(6) { transition-delay: 300ms; } .more-grid.reveal.in li:nth-child(7) { transition-delay: 360ms; } .more-grid.reveal.in li:nth-child(8) { transition-delay: 420ms; }
@media (prefers-reduced-motion: reduce) { .reveal, .more-grid.reveal li { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* The first button: later, lower, bigger (Louis, 2 Nov 02:26). */
.hero .hero-go { margin-top: clamp(14px, 2.4vw, 30px); min-height: 72px; padding: 0 56px; font-size: 21px; transition: opacity 700ms 1.5s var(--ease), transform 700ms 1.5s var(--ease), background 200ms var(--ease); }
@media (max-width: 560px) { .hero .hero-go { min-height: 64px; font-size: 19px; margin-top: 18px; } }

/* Ask him anything: the chat, with his portrait beside it showing him doing what was asked (Louis, 2 Nov 02:41: one thing). */
.askwork { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(18px, 3vw, 40px); align-items: center; }
.askwork .chatdemo { max-width: none; margin: 0; }
.aw-pic { overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: var(--bg-3); box-shadow: 0 40px 120px rgba(0,0,0,.55); aspect-ratio: 4 / 5; pointer-events: none; }
.aw-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: opacity 250ms var(--ease); }
.aw-pic img.swap { opacity: 0; }
@media (max-width: 860px) { .askwork { grid-template-columns: 1fr; } .aw-pic { aspect-ratio: 3 / 2; } }

/* The price against a person, not an app (Louis, 2 Nov 14:16). */
.offer-card .anchor { margin: -14px 0 26px; max-width: 34ch; font-family: var(--sans); font-style: normal; font-weight: 400; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; letter-spacing: .01em; color: var(--ink); opacity: .85; text-wrap: balance; }
.hero.b h1 .just { color: var(--white, #f0f4f0); transition-delay: 0s; }
.hero.b.s3 h1 .just { opacity: 1; transform: none; filter: none; }

/* "About to explode?" vanishes and "Just Ask Aelfred." takes its place, the same size; the button is smaller (Louis, 2 Nov 14:46). */
.hero.b h1 { display: grid; justify-items: center; }
.hero.b h1 br { display: none; }
.hero.b h1 .l1, .hero.b h1 .l2 { grid-area: 1 / 1; }
.hero.b h1 .l2 { font-size: 1em; margin-top: 0; letter-spacing: -.03em; }
.hero.b.s3 h1 .l1 { opacity: 0; transform: translateY(-14px); filter: blur(8px); transition-duration: 300ms; }
.hero.b.s3 h1 .l2 { transition-delay: 250ms; }
.hero.b .hero-go { min-height: 54px; padding: 0 34px; font-size: 17px; }
@media (max-width: 560px) { .hero.b .hero-go { min-height: 50px; width: auto; font-size: 16px; } }

/* The calm is slow (Louis, 2 Nov 14:57): the question leaves quickly, then "Just Ask Aelfred." settles in, then the mic, then the button. */
.hero.b.s3 h1 .l1 { transition-duration: 350ms; }
.hero.b.s3 h1 .l2 { transition-duration: 1600ms; transition-delay: 450ms; }
.hero.b h1 .l2 em { transition: opacity 1600ms 900ms var(--ease); }
.hero.b.s3 h1 em { animation: shine 2.4s 1.8s var(--ease) both; }
.hero.b .demo .mic { transition: opacity 1400ms var(--ease), transform 1400ms var(--ease), filter 2s var(--ease); }
.hero.b .hero-go { transition: opacity 1400ms 2.6s var(--ease), transform 1400ms 2.6s var(--ease), background 200ms var(--ease); }

/* The mic is the proud reason for the order, and the line is in full light (Louis, 2 Nov 15:08). */
.hero.b .veil { transition: opacity 1.6s var(--ease); }
.hero.b.s3 .veil { opacity: .25; }
.hero.b .demo .m img { transition: filter 1.6s var(--ease); }
.hero.b.s3 .demo .m img { filter: brightness(1.18) drop-shadow(0 0 6px rgba(240,204,85,.25)); }
.demo .mic::before { content: ''; position: absolute; inset: -70%; border-radius: 50%; background: radial-gradient(circle, rgba(240,204,85,.38), rgba(240,204,85,.12) 40%, transparent 70%); opacity: 0; transition: opacity 1.8s var(--ease); z-index: -1; }
.hero.b.s25 .demo .mic::before { opacity: 1; animation: micglow 4.5s 1.8s ease-in-out infinite; }
.hero.b.s25 .demo .mic { transform: scale(1.18); filter: brightness(1.3) drop-shadow(0 0 8px rgba(255,226,140,.95)) drop-shadow(0 0 26px rgba(240,204,85,.7)); }
@keyframes micglow { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .hero.b.s25 .demo .mic::before { animation: none; } }
@media (max-width: 560px) { .hero.b.s25 .demo .mic { transform: none; } }
/* The mic's light, cut back hard: it should be lit, not blinding (Louis, 2 Nov 15:15). */
.demo .mic::before { inset: -18%; background: radial-gradient(circle, rgba(240,204,85,.09), transparent 70%); }
.hero.b.s25 .demo .mic { transform: scale(1.04); filter: brightness(1.08) drop-shadow(0 0 3px rgba(255,226,140,.35)) drop-shadow(0 0 9px rgba(240,204,85,.18)); }
.hero.b.s3 .demo .m img { filter: brightness(1.15); }
@media (max-width: 560px) { .hero.b.s25 .demo .mic { transform: none; } }

/* No hard rules between sections (Louis, 2 Nov 16:53). */
.hero::after, .hero.b .scroll-cue { display: none; }
.quote { border-top: 0; border-bottom: 0; }
/* One room, not stacked bands: soft warm light pools that straddle the section edges, so each part runs into the next. */
main { position: relative; isolation: isolate; }
main::before { content: ''; position: absolute; inset: 60vh 0 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 70vh); mask-image: linear-gradient(transparent, #000 70vh);
  background:
    radial-gradient(60% 900px at 50% 0%, rgba(218,181,66,.07), transparent 70%),
    radial-gradient(55% 700px at 20% 28%, rgba(218,181,66,.05), transparent 70%),
    radial-gradient(55% 700px at 80% 46%, rgba(46,120,80,.06), transparent 70%),
    radial-gradient(60% 800px at 50% 68%, rgba(218,181,66,.06), transparent 70%),
    radial-gradient(70% 900px at 50% 92%, rgba(218,181,66,.07), transparent 70%); }

/* The real reply (Louis, 2 Nov 18:40): her whole message, his whole answer, both to hear. */
.worry { align-items: start; }
.worry .aw-pic { position: sticky; top: 40px; }
.wb { min-height: 0; max-height: min(78vh, 760px); overflow-y: auto; gap: 22px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.w-me { justify-self: end; max-width: 88%; display: grid; justify-items: end; gap: 8px; }
.w-me p { margin: 0; padding: 14px 18px; border-radius: 18px 18px 4px 18px; background: var(--gold); color: #0a0a08; font-size: 15px; line-height: 1.5; }
.w-him { justify-self: start; max-width: 94%; display: grid; gap: 12px; padding: 16px 18px; border-radius: 18px 18px 18px 4px; background: var(--bg-3); border: 1px solid var(--line-2); }
.w-him p { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink); }
.w-him .w-cue { font-style: italic; font-size: 16px; color: var(--gold); opacity: .8; }
.w-him .cd-card { opacity: 1; transform: none; margin-top: 4px; }
.hear { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--gold-line); background: rgba(218,181,66,.06); color: var(--gold); font: inherit; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background 200ms var(--ease); }
.w-me .hear { justify-self: end; }
.hear:hover { background: rgba(218,181,66,.14); }
.hear .ic { width: 0; height: 0; border-left: 9px solid var(--gold); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.hear.on .ic { width: 9px; height: 11px; border: 0; border-left: 3px solid var(--gold); border-right: 3px solid var(--gold); }
@media (max-width: 860px) { .worry .aw-pic { position: static; } .wb { max-height: none; overflow: visible; } .w-him p { font-size: 17px; } }

/* The room (Louis, 2 Nov 20:51 and 21:00: "like the app"). One window, his portrait at the side as in the sidebar; the
   messages wear chat.css's own dress (.message.user / .message.assistant, sharp corners, EB Garamond, mono header), the
   talisman sits top right as .msg-talisman does, the thought is the brain chip, and the reply streams by the app's engine. */
.room { --serif: 'Literata', 'EB Garamond', Georgia, serif; max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 250px 1fr; border: 1px solid var(--line-2); border-radius: 3px; background: #030608; box-shadow: 0 40px 120px rgba(0,0,0,.55); overflow: hidden; }
.room-side { border-right: 1px solid var(--line); padding: 18px; display: grid; align-content: start; gap: 12px; background: #050b0e; }
.room-side img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 28%; border: 1px solid rgba(218,181,66,.25); border-radius: 2px; }
.room-side p { margin: 0; text-align: center; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.room-chat { position: relative; height: min(78vh, 720px); overflow-y: auto; padding: 21px; display: flex; flex-direction: column; gap: 21px; scrollbar-width: thin; scrollbar-color: rgba(218,181,66,.25) transparent; }
.room .message { padding: 13px 21px; position: relative; line-height: 1.6; display: none; border-radius: 1px; }
.room .message.msg-arrive { display: block; animation: msgIn .3s cubic-bezier(.22,1,.36,1) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.room .message.user { align-self: flex-end; max-width: 80%; border: 1px solid rgba(58,110,168,.28); border-right: 2px solid rgba(100,160,255,.5); background: rgb(12,22,42); }
.room .message.assistant { align-self: flex-start; max-width: 94%; border: 1px solid rgba(212,175,55,.12); border-left: 2px solid rgba(212,175,55,.6); background: #0a1510; padding-right: 72px; }
.room .message.assistant.msg-arrive { animation: msgIn .3s cubic-bezier(.22,1,.36,1) both, assistantGlow 1.8s ease forwards; }
@keyframes assistantGlow { 20% { box-shadow: 0 0 22px rgba(212,175,55,.14), inset 0 0 16px rgba(212,175,55,.04); } 100% { box-shadow: none; } }
.room .message-header { min-height: 18px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(240,244,240,.55); }
.room .msg-time { font-size: 9px; opacity: .5; letter-spacing: .04em; }
.room .message-body { font-family: var(--serif); font-size: 16px; line-height: 1.5; color: #e9ece7; white-space: pre-wrap; text-wrap: wrap; }
.room .message.user .message-body { font-size: 16px; }
.room .message-body .message-paragraph { margin: 0; }
.room .message-body .message-paragraph + .message-paragraph { margin-top: .5em; }
.room .message-body .message-paragraph-awaiting { min-height: 1lh; }
.room .message-action-line { display: flex; align-items: flex-start; }
.room .message-action-line + .message-paragraph { margin-top: 13px; }
.room .quarters-cue { color: rgba(240,244,240,.74); font-size: .86em; font-style: italic; }
.room .ael-fall { display: inline; animation: aelFall 450ms cubic-bezier(.22,1,.36,1) both; }
@keyframes aelFall { from { opacity: 0; } to { opacity: 1; } }
.room .msg-talisman { position: absolute; top: 34px; right: 9px; width: 50px; height: 50px; }
.room .msg-brain-chip { display: none; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0,255,136,.12); }
.room .message.brain-arrive .msg-brain-chip { display: block; animation: msgIn .55s .3s cubic-bezier(.22,1,.36,1) both; }
.room .msg-brain-label { display: block; margin-bottom: 2px; font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,255,136,.7); }
.room .msg-brain-text { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.5; color: rgba(240,244,240,.66); }
.room-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px 16px 22px; border-radius: 999px; border: 1px solid var(--gold-line); background: rgba(218,181,66,.1); color: var(--gold); font-family: 'Share Tech Mono', monospace; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .2s var(--ease), opacity .3s var(--ease); z-index: 2; }
.room-play span { width: 0; height: 0; border-left: 14px solid var(--gold); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.room-play:hover { background: rgba(218,181,66,.2); }
.room.playing .room-play { opacity: 0; pointer-events: none; }
.room.ended .room-play { position: sticky; top: auto; bottom: 0; left: auto; transform: none; align-self: center; margin-top: 8px; padding: 10px 20px 10px 16px; font-size: 12px; order: 9; background: rgba(3,6,8,.9); }
@media (max-width: 760px) {
  .room { grid-template-columns: 1fr; }
  .room-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 0; gap: 0; position: relative; }
  .room-side img { aspect-ratio: 16 / 9; border: 0; border-radius: 0; object-position: 50% 30%; }
  .room-side p { position: absolute; left: 0; right: 0; bottom: 10px; text-shadow: 0 1px 8px #000; }
  .room-chat { height: 64vh; padding: 14px; gap: 14px; }
  .room .message { padding: 12px 14px; } .room .message.user { max-width: 92%; } .room .message.assistant { max-width: 100%; padding-right: 14px; }
  .room .msg-talisman { position: static; float: right; width: 40px; height: 40px; margin: -4px 0 4px 8px; }
  .room .message-body { font-size: 15.5px; } .room .message.user .message-body { font-size: 15.5px; }
}

/* A place he names is a link to it, dressed as the app dresses one (styles.css .message-map-link): gold underline, a pin. */
.room .message-body-link.message-map-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(218,181,66,.45); padding-bottom: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color 220ms ease, border-bottom-color 220ms ease; }
.room .message-body-link.message-map-link::before { content: ""; display: inline-block; width: .78em; height: .78em; margin-right: .22em; vertical-align: -.06em; background-color: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.4c4.3-4.7 6.4-8.4 6.4-11.1a6.4 6.4 0 1 0-12.8 0c0 2.7 2.1 6.4 6.4 11.1z'/%3E%3Ccircle cx='12' cy='10.1' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.4c4.3-4.7 6.4-8.4 6.4-11.1a6.4 6.4 0 1 0-12.8 0c0 2.7 2.1 6.4 6.4 11.1z'/%3E%3Ccircle cx='12' cy='10.1' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.room .message-body-link.message-map-link:hover { color: var(--gold-2); border-bottom-color: var(--gold); }
/* The talisman follows the app's own rules (styles.css, atlas + normal boxes): it sits on the card, never in the text, so
   nothing moves when it comes. The stage direction's line holds its room from the first frame (min-height, gutter); his
   speech is full width; the thought keeps the same clearance; the icon fades into that waiting space once he has finished. */
.room .message.assistant { padding-right: 21px; }
.room .message-action-line { min-height: 50px; padding-right: 55px; }
.room .msg-brain-chip { padding-right: 62px; }
.room .msg-talisman { position: absolute; top: 34px; right: 9px; width: 50px; height: 50px; float: none; margin: 0; z-index: 8; opacity: 0;
  filter: saturate(1.3) brightness(1.18) contrast(1.06) drop-shadow(0 3px 14px rgba(212,175,55,.28)); }
.room .message.brain-arrive .msg-talisman { animation: cabinetTalismanIn 520ms 180ms cubic-bezier(.22,1,.36,1) forwards; }
@keyframes cabinetTalismanIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  .room .message.assistant { padding-right: 14px; }
  .room .message-action-line { min-height: 46px; padding-right: 52px; }
  .room .msg-brain-chip { padding-right: 52px; }
  .room .msg-talisman { position: absolute; float: none; top: 48px; right: 10px; width: 46px; height: 46px; margin: 0; }
}

/* One control, the app's own pill: Play in the middle of the empty room; once it is playing it sits at the foot of the
   chat as Pause / Play, then Play again (Louis, 2 Nov 21:34). */
.room[data-state="playing"] .room-play, .room[data-state="paused"] .room-play, .room[data-state="ended"] .room-play {
  opacity: 1; pointer-events: auto; position: sticky; top: auto; bottom: 0; left: auto; transform: none; align-self: center; order: 9;
  margin-top: 4px; padding: 9px 18px 9px 14px; font-size: 12px; background: rgba(3,6,8,.92); box-shadow: 0 6px 24px rgba(0,0,0,.6); flex: none; }
.room[data-state="playing"] .room-play span { width: 9px; height: 11px; border: 0; border-left: 3px solid var(--gold); border-right: 3px solid var(--gold); }
.room[data-state="paused"] .room-play span, .room[data-state="ended"] .room-play span { border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; }

.room-note { margin: 14px auto 0; max-width: 1060px; text-align: center; font-size: 13px; letter-spacing: .02em; color: var(--ink-3); }
.room-note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-line); }

/* The situations above the room (Louis, 3 Nov 14:05): Elizabeth chosen, the others blacked out until their day. */
.cases { max-width: 1060px; margin: 0 auto 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.case { display: grid; gap: 3px; justify-items: start; text-align: left; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 3px; background: #050b0e; color: var(--ink); font: inherit; cursor: pointer; }
.case b { font-family: 'Cinzel', serif; font-weight: 400; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.case span { font-size: 13.5px; color: var(--ink-2); }
.case i { font-style: normal; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.case.on { border-color: rgba(218,181,66,.6); background: rgba(218,181,66,.08); box-shadow: inset 0 -2px 0 var(--gold); }
.case.on b { color: var(--gold); }
.case[disabled] { cursor: default; background: #020405; border-color: var(--line); opacity: .45; filter: grayscale(1); }
@media (max-width: 760px) { .cases { grid-template-columns: repeat(2, 1fr); gap: 8px; } .case { padding: 10px 12px; } .case b { font-size: 12.5px; } .case span { font-size: 12.5px; } }

/* ── the company page (3 Nov 20:43: "make it look like a real company website for a product") ── */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 50; border-bottom: 1px solid transparent; transition: background 300ms var(--ease), border-color 300ms var(--ease); }
.topbar.on { background: rgba(3,6,8,.92); border-bottom-color: var(--line); }
.topbar .bar { display: flex; align-items: center; gap: 28px; height: 68px; max-width: 1280px; }
.topbar .logo img { width: 132px; height: auto; }
.topbar .links { display: flex; gap: 30px; margin-left: 28px; }
.topbar .links a, .topbar .signin { font-size: 15px; font-weight: 400; color: var(--ink-2); text-decoration: none; transition: color 200ms var(--ease); }
.topbar .links a:hover, .topbar .signin:hover { color: var(--ink); }
.topbar .acts { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.btn-sm { min-height: 40px; padding: 0 20px; font-size: 14.5px; }
@media (max-width: 860px) { .topbar .links { display: none; } .topbar .bar { height: 60px; gap: 14px; } .topbar .logo img { width: 120px; } .topbar .acts { gap: 16px; } }
.eyebrow { margin: 0 0 14px; text-align: center; font-size: 12.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.does-h { text-align: center; }
.hero .sub.what { max-width: 40ch; margin-top: -6px; }
.feats { padding-top: 0; }
.feat-grid { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.feat { padding: clamp(26px, 3vw, 38px); background: var(--bg-2); display: grid; align-content: start; gap: 10px; }
.feat img { width: 40px; height: 40px; margin-bottom: 6px; }
.feat h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.005em; }
.feat p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }
.wrap.narrow { max-width: 820px; }
.faq { padding-top: 0; }
.qa { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font-size: 18.5px; font-weight: 400; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 300; color: var(--gold); transition: transform 250ms var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { margin: 0; padding: 0 4px 24px; max-width: 64ch; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 12px; }
footer .col { display: grid; align-content: start; gap: 11px; }
footer .col h3 { margin: 0 0 6px; font-size: 12.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
footer .col a, footer .col button { justify-self: start; font: inherit; font-size: 14.5px; color: var(--ink-2); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
footer .col a:hover, footer .col button:hover { color: var(--ink); }
footer .brandcol img { width: 116px; opacity: .9; }
footer .brandcol p { margin: 4px 0 8px; font-size: 15px; color: var(--ink-2); }
footer .brandcol .btn { color: #0a0a08; justify-self: start; }
@media (max-width: 860px) { footer .cols { grid-template-columns: 1fr 1fr; } footer .brandcol { grid-column: 1 / -1; } }
footer .brandcol .btn { min-height: 40px; padding: 0 20px; border-radius: 999px; background: var(--gold); color: #0a0a08; font-size: 14.5px; font-weight: 500; }
footer .brandcol .btn:hover { background: var(--gold-2); color: #0a0a08; }
/* Before Play, the person's message already shows, dimmed, so the room is never an empty box (3 Nov 20:43). */
.room[data-state="idle"] .message.user { display: block; opacity: .5; animation: none; }
.room[data-state="idle"] .room-play { background: #0b0f10; box-shadow: 0 0 0 1px var(--gold-line), 0 18px 50px rgba(0,0,0,.6); }
.room-play { font-family: var(--sans); font-weight: 500; }
.room[data-state="idle"] .room-play { top: auto; bottom: 28px; transform: translateX(-50%); }
/* Serious, not a toy (3 Nov 20:51). The promise in the page's own type, not a script; the trust row under the hero;
   once order arrives, the marks settle into one gold set (they keep their colour while the chaos runs). */
.offer-card .sig { font-family: var(--sans); font-weight: 400; font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.01em; line-height: 1.2; color: var(--ink); transform: none; }
.trust { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 44px; padding-top: 22px; padding-bottom: 22px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 560px) { .trust-row { gap: 8px 22px; font-size: 11px; letter-spacing: .1em; } }
.demo .m img { transition: filter 1.4s var(--ease); }
.hero.b.s3 .demo .m img { filter: grayscale(1) sepia(1) saturate(2.2) hue-rotate(2deg) brightness(.92) contrast(1.05); }
.tab-serif, .case b { font-family: var(--sans); font-weight: 500; letter-spacing: .12em; }
/* Team (3 Nov 2026). */
.team-page { padding-top: clamp(130px, 14vw, 180px); }
.people { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 820px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.person { display: grid; align-content: start; gap: 8px; }
.person img { width: 280px; max-width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 10px; filter: grayscale(.15); }
.person h2 { margin: 0; font-size: 24px; font-weight: 400; letter-spacing: -.01em; }
.person .role { margin: 0; font-size: 12.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.person .bio { margin: 6px 0 4px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.person .more { justify-self: start; font-size: 15px; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.person .more:hover { color: var(--ink); }
@media (max-width: 720px) { .people { grid-template-columns: 1fr; max-width: 460px; gap: 48px; } .person img { width: 240px; } }
/* Inner pages: voice, contact (3 Nov 2026). */
.sub-page { padding-top: clamp(130px, 14vw, 180px); background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(218,181,66,.07), transparent 70%); }
.voices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 960px; margin: clamp(32px,4vw,56px) auto 0; }
.vcard { display: grid; align-content: start; gap: 12px; padding: clamp(24px,3vw,36px); border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg-2); }
.vcard.premium { border-color: rgba(218,181,66,.45); background: radial-gradient(ellipse at 50% 0%, rgba(218,181,66,.09), transparent 60%), var(--bg-2); }
.vcard .tag { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.vcard.premium .tag { color: var(--gold); }
.vcard h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 400; letter-spacing: -.01em; }
.vcard .body { margin: 0 0 8px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.listen { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px 0 16px; border-radius: 999px; border: 1px solid var(--gold-line); background: rgba(218,181,66,.06); color: var(--gold); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background 200ms var(--ease); }
.listen:hover { background: rgba(218,181,66,.14); }
.vcard.premium .listen { background: var(--gold); color: #0a0a08; border-color: var(--gold); }
.listen .dot { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.listen.on .dot { width: 9px; height: 11px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.listen:disabled { opacity: .4; cursor: default; }
.facts3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 960px; margin: clamp(40px,5vw,64px) auto 0; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.fact { display: grid; align-content: start; gap: 10px; padding: clamp(24px,3vw,34px); background: var(--bg-2); }
.fact h2 { margin: 0; font-size: 12.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.fact p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.fact strong { font-weight: 500; color: var(--ink); }
.fact .muted { color: var(--ink-3); }
@media (max-width: 860px) { .facts3 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .voices { grid-template-columns: 1fr; } }
.plate { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px,5vw,72px); max-width: 1060px; margin: 0 auto; align-items: start; }
.plate-copy { display: grid; gap: 18px; }
.plate-copy .eyebrow { text-align: left; margin: 0; }
.plate-h { margin: 0; font-size: clamp(30px,3.6vw,46px); line-height: 1.1; letter-spacing: -.02em; max-width: 16ch; }
.plate-p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 34ch; }
.plate-link { margin: 0; font-size: 18px; }
.plate-link a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.plate-link a.gold { color: var(--gold); border-bottom-color: var(--gold-line); }
.plate-box { padding: clamp(22px,3vw,36px); border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg-2); }
.form { display: grid; gap: 16px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 7px; }
.field span { font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: #0b1013; color: var(--ink); font: inherit; font-size: 16px; }
.field textarea { min-height: 150px; resize: vertical; }
.form .foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.form .btn { min-width: 160px; border: 0; cursor: pointer; }
.gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.received { display: none; gap: 12px; justify-items: start; }
.received img { width: 48px; height: 48px; }
.received h2 { margin: 0; font-size: 28px; font-weight: 400; }
.received p { margin: 0; color: var(--ink-2); }
.received a { color: var(--gold); }
.plate.is-sent .form { display: none; }
.plate.is-sent .received { display: grid; }
@media (max-width: 860px) { .plate { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form .two { grid-template-columns: 1fr; } }

/* Design's pass (3 Nov 22:20): the bar always solid, the hero leaves the trust line in view, readable type. */
.topbar { background: rgba(3,6,8,.92); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero { min-height: calc(100svh - 62px); }
/* The Cup (3 Nov 22:20). */
.cupx-hero { position: relative; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; }
.cupx-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cupx-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,6,8,.35) 0%, rgba(3,6,8,.2) 40%, rgba(3,6,8,.92) 85%, var(--bg) 100%); }
.cupx-copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: 18px; padding-top: 140px; padding-bottom: clamp(48px,6vw,72px); }
.cupx-copy h1 { margin: 0; font-weight: 400; font-size: clamp(44px,6.4vw,84px); line-height: 1; letter-spacing: -.03em; }
.cupx-sub { margin: 0; max-width: 40ch; font-size: clamp(17px,1.6vw,21px); line-height: 1.5; color: rgba(242,244,242,.85); }
.cupx-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cupx-acts .btn { min-width: 150px; }
.cupx-offer { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 16px; color: rgba(242,244,242,.85); }
.code.copied { background: rgba(218,181,66,.22); }
.cupx-sec { padding: clamp(56px,7vw,96px) 0 0; }
.cupx-last { padding-bottom: clamp(80px,10vw,130px); }
.cupx-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; max-width: 1000px; margin: clamp(32px,4vw,48px) auto 0; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.cupx-steps article { display: grid; align-content: start; gap: 10px; padding: clamp(24px,3vw,34px); background: var(--bg-2); }
.cupx-step { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cupx-step img { width: 44px; height: 44px; }
.cupx-step span { font-size: 12.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.cupx-steps h3 { margin: 0; font-size: 20px; font-weight: 500; }
.cupx-steps p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cupx-fine { margin: 18px auto 0; max-width: 1000px; text-align: center; font-size: 13.5px; color: var(--ink-3); }
.cupx-host { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px,4vw,56px); align-items: center; max-width: 1000px; margin: 0 auto; padding: clamp(26px,3.5vw,44px); border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg-2); }
.cupx-host > img { width: 100%; max-width: 300px; justify-self: end; aspect-ratio: 4/5; height: auto; object-fit: cover; object-position: 50% 20%; border-radius: 12px; border: 1px solid var(--line); }
.cupx-txt { display: grid; gap: 14px; }
.cupx-txt .eyebrow { text-align: left; margin: 0; }
.cupx-txt p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.cupx-txt .cupx-big { font-size: clamp(28px,3vw,40px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.cupx-txt a { color: var(--ink-2); }
.cupx-txt a.gold { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.cupx-small { font-size: 13.5px !important; color: var(--ink-3) !important; }
.cupx-trophy { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px,4vw,56px); align-items: center; max-width: 1000px; margin: 0 auto; }
.cupx-frame-col { display: grid; gap: 10px; }
.cupx-frame { overflow: hidden; border-radius: 18px; border: 1px solid var(--line-2); background: var(--bg-2); box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 80px rgba(218,181,66,.07); aspect-ratio: 4/3; }
.cupx-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.cupx-full { justify-self: center; font-size: 13.5px; color: var(--ink-3); text-underline-offset: 3px; text-decoration-color: var(--gold-line); }
.cupx-salary { max-width: 640px; margin: 0 auto; padding: clamp(36px,5vw,56px) clamp(22px,5vw,56px); display: grid; justify-items: center; text-align: center; border: 1px solid var(--line-2); border-radius: 24px; background: radial-gradient(ellipse at 50% 0%, rgba(218,181,66,.09), transparent 60%), linear-gradient(180deg, #0b1013, #070b0d); box-shadow: 0 40px 120px rgba(0,0,0,.5); }
.cupx-salary .eyebrow { margin-bottom: 10px; }
.cupx-price { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 14px; line-height: 1; }
.cupx-price s { font-size: clamp(20px,2vw,26px); font-weight: 300; color: var(--ink-3); text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.cupx-price strong { font-weight: 400; font-size: clamp(56px,7vw,88px); letter-spacing: -.04em; }
.cupx-price span { font-size: 17px; color: var(--ink-2); }
.cupx-salary .cupx-offer { justify-content: center; margin-top: 18px; }
.cupx-salary .cupx-small { margin: 8px 0 0; }
.cupx-salary .btn { margin-top: 22px; min-width: 200px; min-height: 58px; font-size: 18px; }
@media (max-width: 860px) { .cupx-steps, .cupx-host, .cupx-trophy { grid-template-columns: 1fr; } .cupx-host > img { justify-self: start; max-width: 260px; } }
/* News from Aelfred: the mailing list box in every footer (3 Nov 2026). */
.news { display: grid; gap: 8px; margin-top: 14px; max-width: 340px; }
.news label { font-size: 14px; color: var(--ink-2); }
.news-row { display: flex; gap: 8px; }
.news-row input { flex: 1; min-width: 0; min-height: 42px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-3); color: var(--ink); font: inherit; font-size: 14.5px; }
.news-row input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
footer .col .news-row button { justify-self: auto; min-height: 42px; padding: 0 18px; border: 1px solid var(--gold-line); border-radius: 999px; background: transparent; color: var(--gold); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
footer .col .news-row button:hover { background: rgba(218,181,66,.1); }
footer .brandcol .news-note { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.news.done .news-row { display: none; }
footer .brandcol .news.done .news-note { color: var(--gold); font-size: 14px; }
footer .gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* The bar is part of the picture (Louis, 5 Nov: "our nav bar looks amatur and WEBSITE like whilst his looks like actual
   computer programs / video games, more like a movie"). No box over the page until it moves; the words in small tracked
   capitals, a gold hairline under the one you point at; Sign in is its only action (Louis, 5 Nov: "just login on the top
   bar no extrra purchase button there"). */
.topbar { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background 400ms var(--ease); }
.topbar.on { background: rgba(3,6,8,.74); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); }
.topbar .links { gap: 36px; margin-left: 44px; }
.topbar .links a, .topbar .signin { position: relative; padding: 6px 0; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,244,242,.68); }
.topbar .links a::after { content: ""; position: absolute; left: 0; right: .2em; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
.topbar .links a:hover::after, .topbar .links a:focus-visible::after { transform: scaleX(1); }
.topbar .links a:hover, .topbar .signin:hover, .topbar .links a:focus-visible, .topbar .signin:focus-visible { color: var(--ink); }
/* For keyboards: the first Tab offers to jump past the bar (Tesla does the same). */
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 2px; background: var(--gold); color: #0a0c0d; font-size: 14px; text-decoration: none; }
.skip:focus { top: 12px; }
/* Phill's word in gold (Louis, 5 Nov: "gold on smarter?"). */
.quote blockquote em { color: var(--gold); }

/* Few words, more pictures (Louis, 5 Nov: "Musk almost no words is what we need"): the reassurances as the house's marks. */
.how.marked li { gap: 12px; }
.how.marked li::before { display: none; }
.how.marked li img { flex: none; width: 24px; height: 24px; }
/* About (Louis, 5 Nov: the team only in the footer, "perhaps combine with careers"). */
.join-us { margin: clamp(56px, 8vw, 96px) auto 0; display: grid; gap: 14px; justify-items: center; text-align: center; }
.join-us h2 { margin: 0; font-weight: 400; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; }
.join-us p { margin: 0; color: var(--ink-2); }

/* The footer regrouped, nothing cut (Louis, 5 Nov: "its really about reogranizing"): Product and Company as columns, the
   papers as one quiet row, the company line in full; /legal/ gathers the papers and the registered details too. */
footer .cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
footer .papers-bar { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 18px; border-top: 1px solid var(--line); }
footer .papers-bar a, footer .papers-bar button { font: inherit; font-size: 13px; color: var(--ink-3); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
footer .papers-bar a:hover, footer .papers-bar button:hover { color: var(--ink); }
.legal-page .papers { display: grid; gap: 14px; margin: clamp(28px, 4vw, 44px) 0; }
.legal-page .papers a { font-size: 18px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.legal-page .papers a:hover { color: var(--gold-2); }
.legal-page .company-details { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.legal-page .company-details a { color: var(--ink-2); }

/* About is one page for everything about joining us (Louis, 5 Nov): who makes him, work with us, the Android beta. */
.join-us + .join-us { margin-top: clamp(40px, 6vw, 64px); }