/* Count'n Pick website. Warm Reveal, the app's own look: cool grey ground, white cards, ink
   text, one black pill for the one action, pastels for people and counters, and the warm
   gradient only on a drawn result. Display type is the app's Bricolage Grotesque Display;
   everything else is the system font. No third-party fonts or scripts. */

@font-face {
  font-family: "Bricolage Display";
  src: url("/fonts/BricolageGrotesque-Display.ttf?v=1") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  --ground: #F1F0F6;
  --surface: #FFFFFF;
  --ink: #121212;
  --soft: #6E6C78;
  --quiet: #E8E7EF;
  --rule: #E3E2EA;
  --action: #121212;
  --on-action: #FFFFFF;
  --reveal-a: #FFA978;
  --reveal-b: #F08FBC;
  --on-reveal: #121212;
  --lilac: #C7B5FF;
  --sky: #A8D5FF;
  --apricot: #FF9A3D;
  --yellow: #FFD45C;
  --display: "Bricolage Display", "Arial Narrow", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 1.5rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #121214;
    --surface: #1E1E22;
    --ink: #F4F3F8;
    --soft: #A3A1AE;
    --quiet: #2A2A30;
    --rule: #2E2E35;
    --action: #F4F3F8;
    --on-action: #121212;
    --reveal-a: #C9744F;
    --reveal-b: #C26C94;
    color-scheme: dark;
  }
}

/* Sized in rem from a fluid root, so big screens get a bigger page, not a small column. */
html { font-size: clamp(16px, 16px + (100vw - 1440px) * .006, 24px); scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 1.0625rem/1.6 var(--text); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: .4rem; }
.wrap { width: min(72rem, 100% - 2rem); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--surface); padding: .5rem 1rem; border-radius: 999px; z-index: 20; }
.skip:focus { left: 1rem; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.top .wrap { display: flex; align-items: center; gap: 1.5rem; height: 4rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 650; font-size: 1.0625rem; margin-right: auto; white-space: nowrap; }
.brand img { width: 2rem; height: 2rem; border-radius: 22.5%; }
.top nav { display: flex; gap: 1.5rem; font-size: .9375rem; }
.top nav a { text-decoration: none; color: var(--soft); }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }
.lang { font-size: .875rem; font-weight: 600; text-decoration: none; color: var(--soft); padding: .35rem .6rem; border-radius: 999px; background: var(--quiet); }
.lang:hover { color: var(--ink); }

/* The one action */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; background: var(--action); color: var(--on-action); font-weight: 600; font-size: .9375rem; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; }
.pill svg { width: 1.15em; height: 1.15em; flex: none; }
.pill.big { min-height: 3.5rem; padding: 0 1.75rem; font-size: 1.0625rem; }
.pill:hover { opacity: .88; }

/* Hero */
.hero { padding: 3.5rem 0 4rem; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; align-items: center; }
.eyebrow { margin: 0 0 1rem; font-size: .875rem; font-weight: 600; color: var(--soft); }
h1, h2, .display { font-family: var(--display); font-weight: 800; letter-spacing: -.005em; line-height: .92; margin: 0; }
h1 { font-size: clamp(3.4rem, 8.4vw, 7.5rem); }
.lede { font-size: 1.25rem; line-height: 1.5; color: var(--soft); max-width: 32rem; margin: 1.5rem 0 2rem; }
.reassure { margin: 1rem 0 0; font-size: .875rem; color: var(--soft); }
.hero-phone { justify-self: center; width: min(22rem, 100%); }

/* Sections: eyebrow, headline, one claim */
.section { padding: 5rem 0; }
.section + .section { padding-top: 1rem; }
h2 { font-size: clamp(2.6rem, 5.2vw, 4.5rem); }
.section .lead { font-size: 1.1875rem; line-height: 1.55; color: var(--soft); max-width: 34rem; margin: 1.25rem 0 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.split.flip > :first-child { order: 2; }
.phone { width: min(20rem, 100%); justify-self: center; }

/* Modes */
.modes { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; max-width: 34rem; }
.modes b { display: block; font-family: var(--display); font-size: 1.6rem; line-height: 1; margin-bottom: .3rem; }
.modes span { color: var(--soft); font-size: .9375rem; line-height: 1.45; }

/* Live demo: the app's Draw card, lilac while waiting, warm when revealed */
.demo { background: var(--surface); border-radius: 2rem; padding: 1.25rem; }
.stage { position: relative; border-radius: var(--radius); background: var(--lilac); color: #121212; aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 1.25rem; transition: background .35s ease; }
.stage.revealed { background: linear-gradient(135deg, var(--reveal-a), var(--reveal-b)); color: var(--on-reveal); }
.stage .meta { position: absolute; top: 1.1rem; left: 1.4rem; right: 1.4rem; display: flex; justify-content: space-between; font-size: .9375rem; font-weight: 600; }
.stage .result { font-family: var(--display); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; text-align: center; }
.stage .count { position: absolute; bottom: 1.1rem; left: 0; right: 0; text-align: center; font-size: .875rem; font-weight: 500; }
.roster { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.roster li { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem .3rem .3rem; border-radius: 999px; background: var(--ground); font-size: .9375rem; }
.roster li i { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .8125rem; color: #121212; }
.roster li.picked { color: var(--soft); text-decoration: line-through; }
.roster li.picked i { opacity: .45; }
.demo .pill { width: 100%; }
.demo-note { margin: .75rem 0 0; font-size: .8125rem; color: var(--soft); text-align: center; }

/* Grouped points */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.points h3 { margin: 0 0 .5rem; font-size: 1.125rem; }
.points p { margin: 0; color: var(--soft); line-height: 1.55; }
.dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .5rem; vertical-align: .05em; }

/* Plus */
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 3rem; }
.plan { border-radius: 2rem; padding: 2rem; background: var(--surface); }
.plan.plus { background: var(--lilac); color: #121212; }
.plan h3 { font-family: var(--display); font-size: 2.25rem; line-height: 1; margin: 0 0 1.25rem; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.plan li { padding-left: 1.6rem; position: relative; line-height: 1.45; }
.plan li::before { content: ""; position: absolute; left: 0; top: .5em; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; opacity: .35; }
.plan.plus li::before { opacity: 1; background: #121212; }
.plan .foot { margin: 1.5rem 0 0; font-size: .9375rem; }
.plan:not(.plus) .foot { color: var(--soft); }

/* Privacy band */
.privacy-band { background: var(--surface); border-radius: 2rem; padding: 3rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.privacy-band ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.privacy-band li b { display: block; }
.privacy-band li span { color: var(--soft); }

/* Questions */
.faq { margin-top: 2.5rem; border-top: 1px solid var(--rule); max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; font-weight: 600; font-size: 1.0625rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--soft); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 1.25rem; color: var(--soft); max-width: 40rem; }

/* Closing call */
.closing { text-align: center; padding: 5rem 0 6rem; }
.closing h2 { margin-bottom: 2rem; }

/* Footer */
footer { border-top: 1px solid var(--rule); padding: 2.5rem 0 3rem; font-size: .875rem; color: var(--soft); }
footer .row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer .more { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
footer .more b { font-weight: 600; color: var(--ink); }

/* Legal pages */
.legal-head { padding: 3.5rem 0 2rem; }
.legal-head h1 { font-size: clamp(3rem, 6vw, 5rem); }
.legal-head .meta { margin: 1rem 0 0; color: var(--soft); font-size: .9375rem; }
.summary { background: var(--surface); border-radius: var(--radius); padding: 1.75rem 2rem; margin: 0 0 3rem; }
.summary h2 { font-family: var(--text); font-size: 1.125rem; font-weight: 700; line-height: 1.3; margin: 0 0 .75rem; letter-spacing: 0; }
.summary ul { margin: 0; padding-left: 1.25rem; }
.summary li { margin: .35rem 0; }
.legal { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 3.5rem; padding-bottom: 6rem; }
.legal > * { min-width: 0; }
.legal article a { overflow-wrap: anywhere; }
.toc { position: sticky; top: 5.5rem; align-self: start; font-size: .875rem; }
.toc p { font-weight: 600; margin: 0 0 .6rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.toc a { color: var(--soft); text-decoration: none; }
.toc a:hover { color: var(--ink); }
.legal article { max-width: 44rem; }
.legal article h2 { font-family: var(--text); font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin: 3rem 0 .75rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.legal article h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal article h3 { font-size: 1.125rem; margin: 1.75rem 0 .5rem; }
.legal article p, .legal article li { color: var(--soft); }
.legal article strong { color: var(--ink); font-weight: 600; }
.legal article li { margin: .4rem 0; }
.legal article a { color: var(--ink); }
.table-wrap { overflow-x: auto; margin: 1rem 0; border-radius: 1rem; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 36rem; }
th, td { text-align: left; vertical-align: top; padding: .8rem 1rem; border-bottom: 1px solid var(--rule); }
th { color: var(--ink); font-weight: 600; }
td { color: var(--soft); }
tr:last-child td { border-bottom: 0; }
address { font-style: normal; color: var(--soft); }

/* Responsive */
@media (max-width: 960px) {
  .top nav { display: none; }
  .hero .wrap, .split, .privacy-band { grid-template-columns: 1fr; gap: 2.5rem; }
  .split.flip > :first-child { order: 0; }
  .hero { padding-top: 2rem; }
  .hero-phone { width: min(18rem, 80%); }
  .phone { width: min(17rem, 80%); }
  .points { grid-template-columns: 1fr; gap: 1.75rem; }
  .legal { grid-template-columns: 1fr; gap: 2rem; }
  .toc { position: static; }
}
@media (max-width: 640px) {
  .top .wrap { gap: .75rem; }
  .top .pill { padding: 0 1rem; font-size: .875rem; }
  .brand span { display: none; }
  .section { padding: 3.5rem 0; }
  .plans { grid-template-columns: 1fr; }
  .plan, .privacy-band { padding: 1.5rem; border-radius: 1.5rem; }
  .modes { grid-template-columns: 1fr; }
  .lede { font-size: 1.125rem; }
  .summary { padding: 1.25rem 1.25rem; }
}

/* ── Motion ─────────────────────────────────────────────────────────────────────────────
   One language: things arrive with a springy settle, a pick turns warm and pops. Every move
   sits under .motion, which site.js adds only when the visitor allows motion, so without
   JavaScript or with Reduce Motion the page is complete and still. */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --out: cubic-bezier(.22, 1, .36, 1); }

/* Buttons answer the finger */
.pill { transition: transform .25s var(--spring), opacity .2s; }
.pill:hover { opacity: 1; transform: translateY(-2px) scale(1.03); }
.pill:active { transform: scale(.97); transition-duration: .08s; }

/* Hero scene: words rise, the phone settles, names gather round it */
.hero { overflow-x: clip; }
.hero h1 .w { display: inline-block; }
.motion .hero h1 .w { opacity: 0; transform: translateY(.55em) rotate(4deg); animation: rise .7s var(--spring) forwards; animation-delay: calc(var(--i) * 80ms + 80ms); }
.motion .hero .eyebrow, .motion .hero .lede, .motion .hero .pill, .motion .hero .reassure { opacity: 0; animation: fade-up .6s var(--out) forwards; }
.motion .hero .eyebrow { animation-delay: 0ms; }
.motion .hero .lede { animation-delay: 420ms; }
.motion .hero .pill { animation-delay: 520ms; }
.motion .hero .reassure { animation-delay: 600ms; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero-visual { position: relative; justify-self: center; width: min(30rem, 100%); display: grid; place-items: center; }
.hero-visual .hero-phone { width: min(22rem, 76%); }
.motion .hero-phone { opacity: 0; transform: translateY(80px) rotate(7deg); animation: settle 1s var(--spring) 250ms forwards, float 7s ease-in-out 1.4s infinite; }
@keyframes settle { to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: none; } 50% { transform: translateY(-12px) rotate(-1.2deg); } }

.chips { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.chip { position: absolute; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .9rem .35rem .35rem; border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: .9375rem; white-space: nowrap; transition: transform .45s var(--spring), background .3s, color .3s; }
.chip i { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .8125rem; color: #121212; }
/* On the phone's edge, never over its screen content */
.chip:nth-child(1) { right: 84%; top: 6%; }
.chip:nth-child(2) { right: 85%; top: 46%; }
.chip:nth-child(3) { right: 83%; top: 86%; }
.chip:nth-child(4) { left: 85%; top: 15%; }
.chip:nth-child(5) { left: 84%; top: 55%; }
.chip:nth-child(6) { left: 85%; top: 90%; }
.chip.picked { background: linear-gradient(135deg, var(--reveal-a), var(--reveal-b)); color: var(--on-reveal); transform: scale(1.18) rotate(-3deg); z-index: 2; }
.chip.picked i { background: var(--surface) !important; }
.motion .chip { animation: pop-in .55s var(--spring) backwards, drift 6s ease-in-out infinite; animation-delay: calc(var(--i) * 110ms + 900ms), calc(var(--i) * -900ms); }
.motion .chip.picked { animation-play-state: running, paused; }
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Ticker: the four ways to draw */
.ticker { overflow: hidden; padding: 1.25rem 0; border-block: 1px solid var(--rule); }
.ticker-track { display: flex; width: max-content; gap: 2.5rem; align-items: center; font-family: var(--display); font-size: clamp(2.2rem, 4.4vw, 3.75rem); line-height: 1; white-space: nowrap; }
.ticker-track span { display: inline-flex; align-items: center; gap: 2.5rem; }
.ticker-track b { width: .45em; height: .45em; border-radius: 50%; display: inline-block; }
.motion .ticker-track { animation: ticker 28s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Demo: names flick past, then the pick pops warm with a burst of the four pastels */
.stage { overflow: hidden; }
.motion .stage .result.tick { animation: tick .09s linear; }
@keyframes tick { from { transform: translateY(35%); opacity: .3; } to { transform: none; opacity: 1; } }
.motion .stage.revealed { animation: pop .5s var(--spring); }
.motion .stage.revealed .result { animation: drop .55s var(--spring); }
@keyframes pop { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: none; } }
@keyframes drop { from { transform: translateY(-40%) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); border-radius: 50%; animation: burst .7s var(--out) forwards; }
@keyframes burst { 0% { transform: translate(0, 0) scale(.3); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
.roster li { transition: transform .3s var(--spring), color .2s, background .2s; }
.motion .roster li.just { animation: struck .45s var(--spring); }
@keyframes struck { 40% { transform: scale(1.15); background: var(--yellow); color: #121212; } 100% { transform: none; } }

/* Counter you can tap */
.mini-counter { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; padding: .75rem .75rem .75rem .9rem; border-radius: 1.5rem; background: var(--surface); max-width: 24rem; }
.mini-counter .av { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .875rem; color: #121212; flex: none; }
.mini-counter .nm { font-weight: 600; margin-right: auto; }
.mini-counter .num { font-family: var(--display); font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; overflow: hidden; display: inline-block; }
.mini-counter .num.up { animation: roll-up .3s var(--spring); }
.mini-counter .num.down { animation: roll-down .3s var(--spring); }
@keyframes roll-up { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes roll-down { from { transform: translateY(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
.mini-counter button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; font-size: 1.4rem; font-weight: 600; cursor: pointer; background: var(--quiet); color: var(--ink); transition: transform .2s var(--spring); font-family: inherit; }
.mini-counter button.plus { background: var(--lilac); color: #121212; }
.mini-counter button:active { transform: scale(.88); }
.counter-note { margin: .6rem 0 0; font-size: .8125rem; color: var(--soft); }

/* Plus mark: the app's pastel dots */
.plan.plus { position: relative; }
.dots { position: absolute; top: 2rem; right: 2rem; display: flex; }
.dots b { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 3px solid var(--lilac); margin-left: -.55rem; }
.motion .plan.plus.in .dots b { animation: bounce .6s var(--spring) backwards; animation-delay: calc(var(--i) * 90ms + 200ms); }
@keyframes bounce { from { transform: translateY(-1.2rem) scale(.4); opacity: 0; } }
.plan { transition: transform .35s var(--spring); }
.plan:hover { transform: translateY(-4px) rotate(-.4deg); }

/* Scroll scenes: copy rises in order, each phone slides in from its own side */
.motion .rv { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--out), transform .75s var(--spring); transition-delay: calc(var(--i, 0) * 70ms); }
.motion .rv-phone { opacity: 0; transform: translate(var(--from, 80px), var(--lift, 0px)) rotate(var(--turn, 6deg)); transition: opacity .6s var(--out), transform 1s var(--spring); }
.motion .split.flip .rv-phone { --from: -80px; --turn: -6deg; }
.motion .in.rv, .motion .in .rv, .motion .rv-phone.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .hero-visual { width: min(24rem, 100%); }
  .chip { font-size: .8125rem; padding: .25rem .7rem .25rem .25rem; }
  .chip i { width: 1.5rem; height: 1.5rem; font-size: .6875rem; }
  .motion .rv-phone, .motion .split.flip .rv-phone { --from: 0px; --turn: 0deg; --lift: 60px; }
}
@media (max-width: 640px) {
  .chip:nth-child(3), .chip:nth-child(6) { display: none; }
  .chip:nth-child(-n+3) { right: auto; left: 0; }
  .chip:nth-child(n+4) { left: auto; right: 0; }
  .mini-counter .num { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pill, .pill:hover, .plan:hover, .chip.picked { transform: none; }
}
main { overflow-x: clip; }