/* Creative Outbound marketing site. Extends /shared/co.css (tokens, buttons, cards, header, footer).
   Keep the look: paper, ink, one blue accent, Fraunces headlines, Inter body, Caveat only for "a person wrote this". */

:root { --gutter: 16px; --ease: cubic-bezier(.2,.7,.2,1); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: hidden; }
::selection { background: var(--accent-tint); }

/* Accessibility */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, input[type=range]:focus-visible, input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.dark a:focus-visible, .dark button:focus-visible { outline-color: #9DB2EE; }

/* Announcement bar */
.announce { position: relative; padding: 9px 44px; line-height: 1.4; }
.announce a { white-space: nowrap; }
.announce-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--dark-ink); font-size: 20px; line-height: 1; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; opacity: .75; }
.announce-x:hover { opacity: 1; background: rgba(255,255,255,.08); }
.announce[hidden] { display: none; }

/* Header */
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo .mark { width: 26px; height: 26px; flex: none; }
.nav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.head-right .login { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15px; }
.head-right .login:hover { color: var(--ink); }
.nav .nav-sm { display: none; }
.cta-short { display: none; }
@media (max-width: 940px) {
  .nav .nav-sm { display: block; border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 14px; }
  .nav a.on { box-shadow: none; text-decoration: underline; text-decoration-color: var(--accent); }
  .menu-btn { color: var(--ink); font-weight: 600; font-size: 14px; }
}
@media (max-width: 440px) {
  .logo { font-size: 17px; }
  .logo .mark { width: 22px; height: 22px; }
  .cta-full { display: none; }
  .cta-short { display: inline; }
  .site-head .wrap { gap: 10px; }
}

/* Type helpers */
.display { font-family: var(--serif); font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; font-size: clamp(40px, 6.4vw, 76px); margin: 0 0 22px; text-wrap: balance; }
.display em, h1 em, h2 em { font-style: italic; font-weight: 500; }
h2 { text-wrap: balance; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.dark .kicker { color: #A8A193; }
.prose { max-width: 64ch; }
.prose p, .prose li { color: var(--ink-2); }
.prose h2 { margin-top: 40px; font-size: clamp(24px, 2.6vw, 32px); }
.prose h3 { margin-top: 26px; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mt40 { margin-top: 40px; }
.mb0 { margin-bottom: 0; }
.ink2 { color: var(--ink-2); }
.accent { color: var(--accent); }
.nowrap { white-space: nowrap; }
.textlink { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.textlink:hover { color: var(--accent); }
.dark .textlink { color: var(--dark-ink); }
.section.tight { padding: 48px 0; }
.section.paper2 { background: var(--paper-2); }
.section.cardbg { background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.section-head .lead { margin: 0; }

/* Placeholder markers: anything we must source before launch */
.todo { background: #FFF1B8; color: #5C4500; border-radius: 4px; padding: 0 4px; font-weight: 600; white-space: nowrap; }
.todo-note { display: inline-block; font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; background: #FFF1B8; color: #5C4500; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.draft-banner { background: #FFF1B8; color: #5C4500; border-bottom: 1px solid #EBD67E; font-size: 14px; padding: 10px 0; }

/* Reveal on scroll (only when JS is on and motion is allowed) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero { padding-top: 40px; } }
.hero .lead { max-width: 40ch; margin-bottom: 26px; }
.hero-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.hero-fine { margin-top: 16px; font-size: 14px; color: var(--ink-3); }

.stage-wrap { position: relative; }
.stage { position: relative; border-radius: 22px; overflow: hidden; background: #E9DFCB; box-shadow: var(--shadow); aspect-ratio: 1 / 1; border: 1px solid var(--rule); }
.stage svg { display: block; width: 100%; height: 100%; }
.stage-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.stage-caption .hand { font-size: 22px; color: var(--accent); }
.stage-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--rule); color: var(--ink); border-radius: 999px; padding: 7px 14px; font: 600 13px var(--sans); cursor: pointer; }
.stage-btn:hover { background: var(--card); }
.stage-btn .ico { width: 10px; height: 12px; display: inline-block; }
.stage .stage-tag { position: absolute; left: 12px; top: 12px; font-size: 11px; background: rgba(255,253,248,.92); padding: 3px 9px; border-radius: 999px; color: var(--ink-3); }

/* 12-second loop. Default (no animation) = the finished frame, so reduced motion shows the full story still. */
.anim .parcel, .anim .lid, .anim .ink-mask, .anim .phone, .anim .scanline, .anim .toast, .anim .cal, .anim .slot, .anim .booked, .anim .card-out { transform-box: fill-box; }
.anim .scene { animation: co-scene 12s infinite; }
.anim .parcel { animation: co-arrive 12s var(--ease) infinite; }
.anim .lid { animation: co-lid 12s var(--ease) infinite; transform-origin: center; opacity: 0; }
.anim .ink-mask { animation: co-write 12s linear infinite; transform-origin: right center; }
.anim .phone { animation: co-phone 12s var(--ease) infinite; }
.anim .scanline { animation: co-scan 12s linear infinite; opacity: 0; }
.anim .toast { animation: co-toast 12s var(--ease) infinite; }
.anim .cal { animation: co-cal 12s var(--ease) infinite; }
.anim .slot { animation: co-slot 12s var(--ease) infinite; }
.anim .booked { animation: co-booked 12s var(--ease) infinite; }
@keyframes co-scene { 0%, 94% { opacity: 1; } 98% { opacity: 0; } 100% { opacity: 0; } }
@keyframes co-arrive { 0% { transform: translateY(-120%); } 8%, 100% { transform: none; } }
@keyframes co-lid { 0%, 20% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; transform: translate(70%, -30%) rotate(14deg); } }
@keyframes co-write { 0%, 32% { transform: scaleX(1); } 48%, 100% { transform: scaleX(0); } }
@keyframes co-phone { 0%, 50% { transform: translate(60%, 70%) rotate(8deg); opacity: 0; } 58%, 100% { transform: none; opacity: 1; } }
@keyframes co-scan { 0%, 58% { opacity: 0; transform: translateY(0); } 59% { opacity: 1; } 66% { opacity: 1; transform: translateY(46px); } 67%, 100% { opacity: 0; } }
@keyframes co-toast { 0%, 64% { opacity: 0; transform: translateY(-10px); } 68%, 100% { opacity: 1; transform: none; } }
@keyframes co-cal { 0%, 68% { opacity: 0; transform: translateX(-30px); } 74%, 100% { opacity: 1; transform: none; } }
@keyframes co-slot { 0%, 78% { opacity: 0; } 84%, 100% { opacity: 1; } }
@keyframes co-booked { 0%, 82% { opacity: 0; transform: scale(.6); } 86%, 100% { opacity: 1; transform: none; } }
.anim .card-out { animation: co-cardout 12s var(--ease) infinite; }
@keyframes co-cardout { 0%, 28% { opacity: 0; transform: translateY(-40%); } 34%, 100% { opacity: 1; transform: none; } }
.stage.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .stage:not(.force-play) .anim * { animation: none !important; }
  .stage:not(.force-play) .anim .lid, .stage:not(.force-play) .anim .scanline { opacity: 0; }
}

/* ---------- Send strip ---------- */
.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.strip figure { margin: 0; }
.strip figcaption { margin-top: 10px; font-size: 14px; line-height: 1.35; }
.strip figcaption b { display: block; font-weight: 600; }
.strip figcaption span { color: var(--ink-3); font-size: 13px; }
.strip .result { color: var(--accent); font-weight: 600; }
@media (max-width: 940px) {
  .strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
  .strip figure { flex: 0 0 62%; max-width: 240px; scroll-snap-align: start; }
}
.strip-note { margin-top: 18px; font-size: 13px; color: var(--ink-3); }

/* Photo tiles */
.photo { background: var(--paper-2); }
.photo.warm { background: #EADFC9; }
.photo.white { background: var(--card); border: 1px solid var(--rule); }
.photo .tag { font-weight: 500; }
.photo .label { position: absolute; left: 10px; top: 10px; }
.photo.wide { aspect-ratio: 4 / 3; }
.photo.wide svg { width: 58%; }

/* ---------- Point of view ---------- */
.pov { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 46px); line-height: 1.16; letter-spacing: -0.02em; max-width: 24ch; margin: 0 0 22px; font-weight: 500; }
.pov + .pov { color: var(--ink-2); }
.pov strong { font-weight: 700; color: var(--ink); }
.pov .todo { font-family: var(--sans); font-size: .6em; vertical-align: .25em; }

/* ---------- Steps ---------- */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px) { .steps3 { grid-template-columns: 1fr; } }
.step-n { font-family: var(--serif); font-size: 15px; color: var(--accent); font-weight: 700; margin: 16px 0 6px; }
.steps3 h3 { font-size: 24px; }
.steps3 p { color: var(--ink-2); }

/* ---------- Product screen mocks (stand-ins for prototype screenshots) ---------- */
.screen { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 1px 2px rgba(22,20,15,.06), 0 18px 40px rgba(22,20,15,.10); overflow: hidden; font-size: 13px; }
.screen-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.screen-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); display: inline-block; }
.screen-bar span { margin-left: 8px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.screen-body { padding: 16px; }
.screen-cap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.mock-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.mock-steps span { padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-3); font-weight: 600; font-size: 11.5px; }
.mock-steps span.on { background: var(--ink); color: var(--paper); }
.mock-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
@media (max-width: 560px) { .mock-grid { grid-template-columns: 1fr; } }
.mock-field { margin-bottom: 10px; }
.mock-field b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 4px; }
.mock-input { border: 1px solid var(--rule); border-radius: 8px; padding: 7px 10px; background: var(--card); display: flex; justify-content: space-between; gap: 8px; }
.mock-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-weight: 600; font-size: 11.5px; margin: 0 4px 4px 0; }
.mock-bar { height: 6px; background: var(--paper-2); border-radius: 99px; overflow: hidden; }
.mock-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.estimate { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 14px; }
.estimate .big { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--accent); line-height: 1; }
.estimate dl { margin: 10px 0 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; }
.estimate dt { color: var(--ink-3); }
.estimate dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.mock-table { width: 100%; font-size: 12px; }
.mock-table th { font-size: 10.5px; padding: 7px 8px; }
.mock-table td { padding: 7px 8px; }
.mini-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-right: 6px; }
.mini-dot.off { background: var(--ink-3); }
.mini-dot.warn { background: var(--warn); }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
.facts div { border-top: 1px solid var(--rule); padding-top: 10px; font-size: 14px; color: var(--ink-2); font-weight: 500; }
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.split.rev { grid-template-columns: 1fr 1.15fr; }
@media (max-width: 940px) { .split, .split.rev { grid-template-columns: 1fr; gap: 32px; } .split.rev > :first-child { order: 2; } }

/* ---------- Centurion ---------- */
.centurion { background: var(--dark); color: var(--dark-ink); padding: 96px 0; position: relative; overflow: hidden; }
.centurion::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 80% 30%, rgba(46,79,179,.25), transparent 70%); pointer-events: none; }
.centurion .wrap { position: relative; z-index: 1; }
.centurion .photo { background: #24211B; border-radius: 20px; }
.centurion .photo .tag { background: rgba(21,19,15,.8); color: #A8A193; }
.centurion p { color: #D6CFC0; font-size: clamp(17px, 1.6vw, 20px); max-width: 44ch; }
.centurion .score { font-family: var(--serif); font-size: clamp(44px, 6vw, 84px); line-height: 1; font-weight: 600; color: #fff; letter-spacing: -0.03em; margin: 28px 0 24px; }
.centurion .score span { color: #9DB2EE; }
.centurion .small { color: #A8A193; }
@media (max-width: 720px) { .centurion { padding: 64px 0; } }

/* ---------- Plays ---------- */
.play-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 940px) { .play-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .play-grid { grid-template-columns: 1fr; } }
.play-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.play-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .play-card:hover { transform: none; } }
.play-card .photo { border-radius: 0; aspect-ratio: 4 / 3; }
.play-card .photo svg { width: 56%; }
.play-card .body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.play-card h3 { font-size: 21px; margin: 0; }
.play-card .hook { color: var(--ink-2); font-size: 14.5px; margin: 0; }
.play-card .meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.play-card .res { font-weight: 700; color: var(--accent); font-size: 14px; }
.play-card .res.pending { color: var(--ink-3); font-weight: 600; }
.play-card .labels { display: flex; gap: 6px; flex-wrap: wrap; }
.play-card[hidden] { display: none; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.tab { border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 8px 15px; font: 600 14px var(--sans); cursor: pointer; }
.tab:hover { color: var(--ink); border-color: #CFC4AD; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.filters { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 16px; margin-bottom: 18px; }
.filters label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.filters select { padding: 9px 10px; }
@media (max-width: 1000px) { .filters { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .filters { grid-template-columns: 1fr 1fr; } }
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; font-size: 14px; color: var(--ink-3); }
.empty { text-align: center; padding: 48px 16px; border: 1px dashed #CFC4AD; border-radius: 16px; color: var(--ink-3); }

/* Play detail */
.pd-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; padding: 48px 0 24px; }
@media (max-width: 900px) { .pd-hero { grid-template-columns: 1fr; gap: 28px; } }
.pd-hero .photo { border-radius: 22px; }
.crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 14px; }
.crumbs a { color: var(--ink-3); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: 16px; background: var(--card); overflow: hidden; margin: 22px 0; }
.stat-row > div { padding: 16px; border-right: 1px solid var(--rule); }
.stat-row > div:last-child { border-right: 0; }
.stat-row b { display: block; font-family: var(--serif); font-size: 32px; color: var(--accent); line-height: 1.05; font-weight: 600; }
.stat-row span { font-size: 13px; color: var(--ink-3); }
.stat-row.pending b { color: var(--ink-3); }
@media (max-width: 480px) { .stat-row b { font-size: 26px; } .stat-row > div { padding: 12px; } }
.cardtpl { background: #FFFDF8; border: 1px solid var(--rule); border-radius: 6px; padding: 28px 28px 22px; box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 12px 28px rgba(22,20,15,.08); transform: rotate(-.6deg); position: relative; }
.cardtpl p { font-family: var(--hand); font-size: 25px; line-height: 1.35; color: var(--accent); margin: 0; }
.cardtpl mark { background: #FFF1B8; color: #5C4500; font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 2px 6px; border-radius: 5px; border-bottom: 2px solid #E8C94F; white-space: normal; }
.cardtpl .qr { position: absolute; right: 16px; bottom: 14px; width: 34px; height: 34px; }
.cardtpl .count { margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.blanks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; font-size: 14px; }
.blanks li { display: flex; gap: 10px; }
.blanks code { font-family: var(--sans); background: #FFF1B8; color: #5C4500; font-weight: 600; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.recipe { counter-reset: r; list-style: none; padding: 0; margin: 0; }
.recipe li { counter-increment: r; position: relative; padding: 0 0 14px 40px; color: var(--ink-2); }
.recipe li::before { content: counter(r); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; font: 700 12px var(--sans); color: var(--ink); }
.chart { width: 100%; height: auto; }
.share-card { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--card); max-width: 420px; }
.share-card .sc-img { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--paper-2); }
.share-card .sc-img .photo { border-radius: 0; aspect-ratio: 1; }
.share-card .sc-txt { padding: 16px; font-family: var(--serif); font-size: 22px; line-height: 1.1; font-weight: 600; }
.share-card .sc-foot { padding: 10px 14px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--rule); }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 10px 18px; margin: 0; font-size: 15px; }
.kv dt { color: var(--ink-3); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.kv dd { margin: 0; color: var(--ink-2); }
@media (max-width: 520px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 10px; } }

/* ---------- Creepy block ---------- */
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.rules > div { padding: 26px 26px 26px 0; border-bottom: 1px solid var(--rule); }
.rules > div:nth-child(odd) { padding-right: 36px; border-right: 1px solid var(--rule); }
.rules > div:nth-child(even) { padding-left: 36px; }
.rules h3 { font-size: 22px; }
.rules p { color: var(--ink-2); margin: 0; }
@media (max-width: 760px) { .rules { grid-template-columns: 1fr; } .rules > div, .rules > div:nth-child(odd), .rules > div:nth-child(even) { padding: 22px 0; border-right: 0; } }

/* ---------- Wall of things ---------- */
.wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 1000px) { .wall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .wall { grid-template-columns: repeat(2, 1fr); } }
.wall figure { margin: 0; }
.wall .photo { background: var(--card); border: 1px solid var(--rule); }
.wall .photo .tag { display: none; }
.wall figcaption { font-size: 13px; margin-top: 8px; line-height: 1.3; }
.wall figcaption span { display: block; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.works-with { margin-top: 28px; font-size: 14px; color: var(--ink-3); display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; }
.works-with b { color: var(--ink); font-weight: 600; }

/* ---------- Leaders strip ---------- */
.leaders { background: var(--accent-tint); border-top: 1px solid #D3DBF1; border-bottom: 1px solid #D3DBF1; padding: 44px 0; }
.leaders .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.leaders .nums { display: flex; gap: 12px 40px; flex-wrap: wrap; align-items: baseline; }
.leaders .nums div { font-size: 15px; color: var(--ink-2); }
.leaders .nums b { display: block; font-family: var(--serif); font-size: clamp(30px, 3.4vw, 42px); color: var(--accent); line-height: 1.05; font-weight: 600; }

/* ---------- Closing ask ---------- */
.ask { background: var(--card); border-top: 1px solid var(--rule); }
.ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .ask-grid { grid-template-columns: 1fr; gap: 32px; } }
.ask-form { display: grid; gap: 10px; margin: 22px 0 12px; max-width: 520px; }
.inline-field { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-field input { flex: 1 1 220px; min-height: 46px; }
.inline-field .btn { flex: 0 0 auto; }
@media (max-width: 480px) { .inline-field .btn { width: 100%; } }
.ask-out { min-height: 320px; }
.ask-empty { border: 1.5px dashed #CFC4AD; border-radius: 18px; min-height: 320px; display: grid; place-items: center; text-align: center; padding: 28px; color: var(--ink-3); }
.ask-empty .hand { font-size: 28px; color: var(--ink-3); display: block; margin-bottom: 6px; }
.suggest { background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); animation: co-pop .5s var(--ease); }
@keyframes co-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .suggest { animation: none; } }
.suggest-top { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 18px; align-items: center; }
@media (max-width: 420px) { .suggest-top { grid-template-columns: 96px 1fr; } }
.suggest-top .photo { border-radius: 12px; background: var(--card); border: 1px solid var(--rule); }
.suggest-top .photo svg { width: 86%; }
.suggest h3 { font-size: 22px; margin: 6px 0 4px; }
.suggest .for { font-size: 14px; color: var(--ink-2); margin: 0; }
.suggest .cardtpl { margin: 0 18px 18px; padding: 18px 20px; }
.suggest .cardtpl p { font-size: 21px; }
.suggest-foot { border-top: 1px solid var(--rule); padding: 16px 18px; background: var(--card); }
.ok-box { border: 1px solid #BFD9C4; background: var(--good-tint); color: #1F4A2A; border-radius: 14px; padding: 16px 18px; }
.ok-box h3 { font-size: 22px; color: #1F4A2A; }
.err { color: var(--bad); font-size: 14px; font-weight: 600; margin: 6px 0 0; }
.preview-note { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-3); }
.preview-note::before { content: "Preview"; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; background: var(--paper-2); color: var(--ink-2); padding: 2px 7px; border-radius: 999px; }

/* ---------- How it works bands ---------- */
.band { padding: 64px 0; border-top: 1px solid var(--rule); }
.band:nth-of-type(even) { background: var(--card); }
.band .num-big { font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.band h2 { font-size: clamp(28px, 3vw, 40px); }
.band p { color: var(--ink-2); font-size: 17px; max-width: 46ch; }
@media (max-width: 720px) { .band { padding: 44px 0; } .band .num-big { font-size: 46px; } }
.toc { display: flex; gap: 8px; flex-wrap: wrap; }
.toc a { font-size: 13.5px; text-decoration: none; color: var(--ink-2); border: 1px solid var(--rule); background: var(--card); padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.toc a:hover { color: var(--ink); border-color: #CFC4AD; }
.phone-mock { width: 230px; max-width: 100%; margin: 0 auto; border: 8px solid var(--ink); border-radius: 34px; background: var(--card); padding: 18px 14px; box-shadow: var(--shadow); font-size: 13px; }
.phone-mock .notch { width: 70px; height: 6px; background: var(--ink); border-radius: 99px; margin: -8px auto 14px; }
.sms { background: var(--paper-2); border-radius: 14px 14px 14px 4px; padding: 10px 12px; margin-bottom: 8px; }
.cal-mock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.cal-mock span { border: 1px solid var(--rule); border-radius: 8px; padding: 6px 4px; text-align: center; font-size: 12px; font-weight: 600; }
.cal-mock span.pick { background: var(--accent); color: #fff; border-color: var(--accent); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--rule); font-size: 13.5px; }
.timeline li:last-child { border-bottom: 0; }
.timeline .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-tint); }
.timeline .dot.next { background: var(--card); border: 2px solid var(--rule); box-shadow: none; }
.timeline time { color: var(--ink-3); font-size: 12px; }
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; } }

/* ---------- Calculator / pricing ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); border-radius: 22px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; } }
.calc-in { padding: 28px; display: grid; gap: 22px; }
.calc-out { padding: 28px; background: var(--dark); color: var(--dark-ink); display: grid; gap: 18px; align-content: start; }
.slider-row { display: grid; gap: 8px; }
.slider-row .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.slider-row label { margin: 0; }
.slider-row output { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.slider-row .hint { font-size: 12.5px; color: var(--ink-3); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--paper-2); border: 0; border-radius: 99px; padding: 0; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
input[type=range]:focus { outline: none; }
input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.out-big { font-family: var(--serif); font-size: clamp(40px, 5vw, 60px); line-height: 1; font-weight: 600; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.out-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; padding-top: 18px; border-top: 1px solid #2E2A22; }
.out-grid b { display: block; font-family: var(--serif); font-size: 26px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.out-grid span { font-size: 13px; color: #A8A193; }
.calc-out .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #A8A193; font-weight: 600; }
details.how { border: 1px solid var(--rule); border-radius: 14px; background: var(--card); margin-top: 18px; }
details.how summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
details.how summary::-webkit-details-marker { display: none; }
details.how summary::after { content: "+"; font-weight: 400; font-size: 20px; line-height: 1; color: var(--ink-3); }
details.how[open] summary::after { content: "–"; }
details.how .inner { padding: 0 18px 18px; color: var(--ink-2); font-size: 15px; }
.formula { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; line-height: 1.7; overflow-x: auto; white-space: pre-wrap; }

.price-hero { padding: 72px 0 40px; }
.price-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; background: var(--card); margin-top: 32px; }
.price-strip > div { padding: 20px; border-right: 1px solid var(--rule); font-size: 14.5px; color: var(--ink-2); }
.price-strip > div:last-child { border-right: 0; }
.price-strip b { display: block; font-family: var(--serif); font-size: 34px; color: var(--accent); font-weight: 600; line-height: 1.05; margin-bottom: 4px; }
@media (max-width: 860px) { .price-strip { grid-template-columns: 1fr 1fr; } .price-strip > div:nth-child(2) { border-right: 0; } .price-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }
@media (max-width: 420px) { .price-strip { grid-template-columns: 1fr; } .price-strip > div { border-right: 0; border-bottom: 1px solid var(--rule); } .price-strip > div:last-child { border-bottom: 0; } }
.pricer { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 880px) { .pricer { grid-template-columns: 1fr; } }
tr.hl td { background: var(--accent-tint); font-weight: 600; }
.included { columns: 2; column-gap: 40px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 620px) { .included { columns: 1; } }
.included li { break-inside: avoid; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--rule); position: relative; }
.included li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 20px 40px 20px 0; font-family: var(--serif); font-size: 21px; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 26px var(--sans); color: var(--ink-3); }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 0 22px; color: var(--ink-2); max-width: 70ch; }

/* ---------- Forms ---------- */
.form-card { background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: 28px; box-shadow: var(--shadow); }
@media (max-width: 480px) { .form-card { padding: 20px; } }
.field { margin-bottom: 16px; }
.field .hint { font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--accent); }
input[aria-invalid="true"] { border-color: var(--bad); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .choice { grid-template-columns: 1fr; } }
.choice label { margin: 0; cursor: pointer; display: block; border: 1px solid var(--rule); border-radius: 16px; padding: 18px; background: var(--card); font-weight: 400; position: relative; }
.choice label:hover { border-color: #CFC4AD; }
.choice input { position: absolute; opacity: 0; }
.choice input:checked + .c { }
.choice label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: #FBFCFF; }
.choice label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice b { display: block; font-family: var(--serif); font-size: 20px; margin-bottom: 4px; }
.choice span { color: var(--ink-2); font-size: 14.5px; }
.state[hidden] { display: none !important; }

/* Recipients: calm page */
.calm { max-width: 760px; margin: 0 auto; }
.calm .display { font-size: clamp(38px, 5.5vw, 64px); }
.opts { display: grid; gap: 14px; margin: 28px 0; }
.opt { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 18px 20px; }
@media (max-width: 560px) { .opt { grid-template-columns: 1fr; } }
.opt h3 { font-size: 20px; margin: 0 0 4px; }
.opt p { margin: 0; color: var(--ink-2); font-size: 15px; }
.stop-box { border: 1px solid var(--rule); background: var(--card); border-radius: 20px; padding: 26px; }
.btn.stop { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.stop:hover { background: #8a2f23; }

/* Booking slots */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.slot-btn { border: 1px solid var(--rule); background: var(--card); border-radius: 10px; padding: 10px 8px; font: 600 14px var(--sans); cursor: pointer; color: var(--ink); }
.slot-btn small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12px; }
.slot-btn:hover { border-color: var(--accent); }
.slot-btn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.slot-btn[aria-pressed="true"] small { color: #E6EBF8; }

/* Misc lists */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticks li { padding-left: 28px; position: relative; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.ticks li b { color: var(--ink); }
.dark .ticks li { color: #D6CFC0; }
.dark .ticks li b { color: #fff; }
.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.feature { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 22px; }
.feature h3 { font-size: 20px; }
.feature p { color: var(--ink-2); margin: 0; font-size: 15px; }
.feature .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-tint); display: grid; place-items: center; margin-bottom: 14px; color: var(--accent); }
.feature .ico svg { width: 18px; height: 18px; }
.legal-meta { font-size: 14px; color: var(--ink-3); margin-bottom: 30px; }
.doc-links { display: grid; gap: 10px; }
.doc-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; }
.doc-link:hover { border-color: #CFC4AD; }
.doc-link span { font-weight: 500; color: var(--ink-3); font-size: 13px; }
.quote-hand { font-family: var(--hand); font-size: 30px; line-height: 1.2; color: var(--accent); }

/* Footer */
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } .foot-brand { grid-column: 1 / -1; } }
.foot-brand p { max-width: 34ch; margin: 12px 0 16px; }
.site-foot .foot-grid a.btn { display: inline-flex; color: var(--paper); padding: 0 14px; }
.site-foot .plain { display: block; padding: 3px 0; color: var(--ink-3); }
.foot-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.site-foot .foot-base a { display: inline; padding: 0; color: var(--ink-2); font-weight: 600; }
.site-foot a:hover { color: var(--ink); }

@media print { .site-head, .announce, .co-hub-btn, .site-foot { display: none; } }

.anim .booked { transform-origin: center; }

/* Resources dropdown */
.nav-drop { position: relative; }
.nav-drop-btn { background: none; border: 0; padding: 0; color: var(--ink-2); font: 500 15px var(--sans); cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.nav-drop-btn:hover, .nav-drop.on .nav-drop-btn { color: var(--ink); }
.nav-drop-btn span { font-size: 10px; }
.drop { display: none; position: absolute; top: calc(100% + 14px); left: -16px; width: 300px; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; z-index: 50; }
.nav-drop.open .drop { display: grid; }
.drop a { display: block; padding: 10px 12px; border-radius: 10px; }
.drop a:hover, .drop a.on { background: var(--paper); box-shadow: none; }
.drop a b { display: block; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.drop a span { display: block; color: var(--ink-3); font-size: 13px; }
@media (max-width: 940px) {
  .nav-drop-btn { padding: 10px 0; width: 100%; justify-content: space-between; font-size: 15px; }
  .drop { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 6px 12px; background: transparent; }
  .drop a { padding: 7px 0; }
  .drop a span { display: none; }
}
@media (min-width: 941px) and (max-width: 1080px) { .nav { gap: 14px; } .nav a, .nav-drop-btn { font-size: 14px; } }

/* Blog */
.blog-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; color: var(--ink); text-decoration: none; background: var(--card); border: 1px solid var(--rule); border-radius: 22px; overflow: hidden; }
.blog-feature .photo { border-radius: 0; aspect-ratio: 4 / 3; }
.blog-feature .photo svg { width: 52%; }
.blog-feature > div:last-child { padding: 28px 28px 28px 0; }
.blog-feature h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 8px 0 12px; }
.blog-feature:hover h2 { color: var(--accent); }
@media (max-width: 820px) { .blog-feature { grid-template-columns: 1fr; gap: 0; } .blog-feature > div:last-child { padding: 22px; } }
.article { font-size: 18px; line-height: 1.7; }
.article p, .article li { color: var(--ink-2); }
.article h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 44px 0 14px; }
.article ul, .article ol { padding-left: 22px; margin: 0 0 18px; }
.article li { margin-bottom: 8px; }
.article strong { color: var(--ink); }
.article blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font-family: var(--serif); font-size: 23px; line-height: 1.35; color: var(--ink); }
.article blockquote p { color: var(--ink); }
.article .todo, .article p:has(> .todo) {}

/* Changelog */
.cl-item { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--rule); }
.cl-item time { font-weight: 600; color: var(--ink-3); font-size: 14px; padding-top: 4px; }
.cl-item h2 { font-size: 26px; margin: 10px 0 8px; }
.cl-item p { color: var(--ink-2); margin: 0; }
@media (max-width: 600px) { .cl-item { grid-template-columns: 1fr; gap: 6px; } }

.help-group[hidden], .help-item[hidden] { display: none; }

/* Illustration tag: full text on roomy tiles, short on small ones */
.photo { container-type: inline-size; }
@container (max-width: 200px) { .photo .tag-more { display: none; } }
.photo .tag { max-width: calc(100% - 20px); }
[id] { scroll-margin-top: 84px; }
@media (max-width: 440px) {
  .head-right { gap: 6px; }
  .head-right .btn.sm { padding: 0 12px; }
  .menu-btn { padding: 8px 9px; }
}
@media (max-width: 940px) {
  .nav-drop .drop { display: grid; }
  .nav-drop-btn { pointer-events: none; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; padding-bottom: 2px; }
  .nav-drop-btn span { display: none; }
}
.nav-drop-btn span { display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); font-size: 0; margin-left: 4px; }

/* ---------- /alt/: minimal manifesto homepage ---------- */
body.alt { background: #FBF9F4; }
.alt-head { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 22px clamp(16px, 4vw, 48px); }
.alt-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 4px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  font: 600 13px var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.alt-btn:hover { background: #2a2720; }
.alt-btn.ghost { background: transparent; color: var(--ink); min-height: 38px; padding: 0 16px; font-size: 12px; }
.alt-btn.ghost:hover { background: rgba(22,20,15,.05); }
.alt-hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; padding: 120px clamp(16px, 4vw, 48px) clamp(40px, 8vh, 88px);
  background: radial-gradient(1200px 700px at 75% 30%, #F3EDE0 0%, rgba(243,237,224,0) 70%), #FBF9F4; }
.alt-hero-in { position: relative; z-index: 2; max-width: 760px; }
.alt-hero h1 { font-size: clamp(56px, 10.5vw, 148px); line-height: .94; letter-spacing: -0.035em; font-weight: 600; margin: 0 0 28px; }
.alt-sub { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; color: var(--ink-2); margin: 0 0 34px; }
.alt-tag { position: absolute; right: clamp(16px, 4vw, 48px); bottom: 18px; z-index: 2; font-size: 11px; color: var(--ink-3); }
.floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.float { position: absolute; width: var(--size); transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.float-in { filter: blur(var(--blur)) drop-shadow(0 24px 30px rgba(22,20,15,.14)); transform: rotate(var(--rot)); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.float-in svg { display: block; width: 100%; height: auto; }
@keyframes drift-a { from { transform: rotate(var(--rot)) translate(0, 0); } to { transform: rotate(calc(var(--rot) + 6deg)) translate(18px, -26px); } }
@keyframes drift-b { from { transform: rotate(var(--rot)) translate(0, 0); } to { transform: rotate(calc(var(--rot) - 7deg)) translate(-22px, 20px); } }
@keyframes drift-c { from { transform: rotate(var(--rot)) translate(0, 0); } to { transform: rotate(calc(var(--rot) + 4deg)) translate(14px, 24px); } }
@media (prefers-reduced-motion: reduce) { .float-in { animation: none !important; } .float { transform: none; } }
@media (max-width: 760px) {
  .float { width: calc(var(--size) * .55); }
  .float:nth-child(1) { left: 52% !important; top: 9% !important; }
  .float:nth-child(2) { left: 62% !important; top: 30% !important; }
  .float:nth-child(3) { left: 8% !important; top: 22% !important; }
  .float:nth-child(5) { display: none; }
  .float:nth-child(6) { left: 70% !important; top: 46% !important; }
  .alt-hero { align-items: flex-end; }
}
.alt-letter { max-width: 680px; margin: 0 auto; padding: clamp(72px, 12vh, 140px) 16px 64px; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.65; }
.alt-letter:focus { outline: none; }
.alt-letter p { color: var(--ink-2); margin: 0 0 22px; }
.alt-letter strong { color: var(--ink); font-weight: 600; }
.alt-sigs { display: flex; gap: 48px; flex-wrap: wrap; margin: 44px 0 36px; }
.alt-sigs .hand { display: block; font-size: 34px; color: var(--accent); }
.alt-sigs small { color: var(--ink-3); font-size: 13px; }
.alt-backed { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 36px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.alt-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.alt-cta .alt-btn.ghost { min-height: 48px; padding: 0 22px; font-size: 13px; }
.alt-foot { max-width: 680px; margin: 0 auto; padding: 32px 16px 110px; display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--rule); }
.alt-foot a { color: var(--ink-2); text-decoration: none; }
.alt-foot a:hover { color: var(--ink); text-decoration: underline; }
.alt-soc { border: 1px solid var(--rule); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); background: var(--card); }
.alt-full { margin-left: auto; }


/* ===== Frontrunner skin (30 Oct 2026): site-only overrides. Tokens live at the end of /shared/co.css. Delete both blocks to go back. ===== */
.dark a:focus-visible, .dark button:focus-visible { outline-color: #8FC3A5; }
.skip { border-radius: 0; }
.display { font-weight: 500; letter-spacing: -0.035em; line-height: 1; color: var(--accent); }
.display em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.kicker { font: 400 12px var(--mono); letter-spacing: .02em; color: var(--ink-2); }
.kicker::before { display: none; }
.dark .kicker { color: #9FB3A7; }
.textlink { font: 400 13px var(--mono); text-transform: uppercase; letter-spacing: .02em; color: var(--accent); }
.todo-note { font-family: var(--mono); font-weight: 400; border-radius: 3px; }
.nav a.on { color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }
.head-right .login { font: 400 12.5px var(--mono); text-transform: uppercase; letter-spacing: .02em; }

/* Corner brackets around the primary call to action, like Frontrunner's GET STARTED */
.hero-cta .btn:not(.ghost), .head-right .btn:not(.ghost) { position: relative; }
.hero-cta .btn:not(.ghost)::before, .head-right .btn:not(.ghost)::before { content: ""; position: absolute; inset: -6px; pointer-events: none;
  --c: rgba(0,0,0,.45);
  background:
    linear-gradient(var(--c),var(--c)) top left / 10px 1px, linear-gradient(var(--c),var(--c)) top left / 1px 10px,
    linear-gradient(var(--c),var(--c)) top right / 10px 1px, linear-gradient(var(--c),var(--c)) top right / 1px 10px,
    linear-gradient(var(--c),var(--c)) bottom left / 10px 1px, linear-gradient(var(--c),var(--c)) bottom left / 1px 10px,
    linear-gradient(var(--c),var(--c)) bottom right / 10px 1px, linear-gradient(var(--c),var(--c)) bottom right / 1px 10px;
  background-repeat: no-repeat; }

/* Cards and app windows: white, hairline border, soft shadow */
.stage { border-radius: 12px; background: var(--paper-2); border-color: rgba(0,0,0,.08); }
.stage .stage-tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; border-radius: 3px; }
.stage-btn { border-radius: 0; font: 400 12px var(--mono); text-transform: uppercase; }
.stage-caption .hand { color: var(--accent); }
.photo.warm { background: var(--paper-2); }
.screen { border-radius: 12px; border-color: rgba(0,0,0,.08); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 48px rgba(0,0,0,.08); }
.screen-bar { background: #FBFAF9; border-bottom-color: rgba(0,0,0,.06); }
.screen-bar i:nth-child(1) { background: #EE6A5F; } .screen-bar i:nth-child(2) { background: #F5BD4F; } .screen-bar i:nth-child(3) { background: #61C454; }
.screen-bar span { font-family: var(--mono); font-weight: 400; text-transform: uppercase; font-size: 11px; }
.mock-steps span { border-radius: 3px; font: 400 10.5px var(--mono); text-transform: uppercase; }
.mock-steps span.on { background: var(--accent); color: #fff; }
.mock-field b, .calc-out .lbl { font-family: var(--mono); font-weight: 400; }
.mock-chip { border-radius: 3px; }
.step-n { font: 400 12px var(--mono); letter-spacing: .02em; }
.steps3 h3 { font-weight: 500; }
.pov { font-weight: 500; letter-spacing: -0.03em; color: var(--accent); }
.pov + .pov { color: var(--ink-3); }
.pov strong { font-weight: 500; color: var(--accent); }
.cardtpl { background: var(--card); }
.leaders { border-color: #CADBD0; }
.choice label:has(input:checked) { background: #F7FBF8; }
.slot-btn[aria-pressed="true"] small { color: var(--accent-tint); }
.tab:hover, .toc a:hover, .choice label:hover, .doc-link:hover { border-color: #CFCBC6; }
.empty, .ask-empty { border-color: #CFCBC6; }
.tab { border-radius: 0; font: 400 12px var(--mono); text-transform: uppercase; letter-spacing: .02em; }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav a, .nav-drop-btn, .head-right .login { white-space: nowrap; }
.nav-drop-btn { font: 400 12.5px var(--mono); text-transform: uppercase; letter-spacing: .02em; }
@media (min-width: 941px) { .nav { gap: 18px; } }
@media (min-width: 941px) and (max-width: 1080px) { .nav { gap: 12px; } .nav a, .nav-drop-btn { font-size: 11.5px; } }
@media (max-width: 940px) { .nav a, .nav-drop-btn { font-size: 13px; } }
.centurion::after { background: radial-gradient(600px 300px at 80% 30%, rgba(0,102,58,.28), transparent 70%); }
.centurion .score { font-weight: 500; }
.centurion .score span { color: #8FC3A5; }
.centurion .photo { border-radius: 12px; }
.announce-x { color: var(--ink-2); }
.announce-x:hover { background: rgba(0,0,0,.05); }