/* bored. — the marketing site.
   Every token here is lifted from handoff/BOREDUI/Brand.swift so the site and the app cannot
   drift apart. If a colour changes in the app, it changes here. */

:root {
  /* Accent only — the app uses purple for links and selection, never for the primary
     button. Primary actions are a black pill (--ink on --surface, flipped in dark mode). */
  --purple:    #6934ED;
  --purple-lo: #8A63F2;
  --ink:       #202124;
  --muted:     #64646B;
  --lavender:  #F3EEFF;
  --line:      #E5DCF7;
  --green:     #32A971;
  --go:        #FFD23F;
  --go-edge:   #D9A900;
  --surface:   #FFFFFF;

  /* The four-stop wordmark gradient, lifted from the app's own boot splash. */
  --grad-1: #FF5A1F;
  --grad-2: #FF3D6E;
  --grad-3: #7B3CFF;
  --grad-4: #FFD166;

  --display: "Nunito", system-ui, -apple-system, sans-serif;
  --body:    "Nunito", system-ui, -apple-system, sans-serif;

  /* The app rounds everything generously; matching it is most of the family resemblance. */
  --r-sm: 15px;
  --r-md: 24px;
  --r-lg: 32px;
  --r-xl: 44px;

  /* 1180px content max, with the 24px-per-side gutter applied as real padding on .wrap
     (below) rather than folded into this width — a "100% - Npx" width has, in practice,
     been unreliable across headless/automated renderers at narrow widths and let text run
     to the physical screen edge. Padding on a border-box element cannot do that. */
  --page: min(1180px, 100%);
}

@media (prefers-color-scheme: dark) {
  :root { --ink: #FFFFFF; --muted: #ABABB0; --lavender: #1C1C1E; --line: #38383A; --surface: #000000; }
  body .nav { background: rgba(0,0,0,.82); }
}

* { box-sizing: border-box; letter-spacing: 0; }
html { color-scheme: light dark; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, .display { font-family: var(--display); font-weight: 600; letter-spacing: 0; line-height: 0.98; margin: 0; }

p { line-height: 1.55; margin: 0; }

a { color: inherit; }

img { max-width: 100%; display: block; }

.wrap { width: var(--page); margin-inline: auto; padding-inline: 24px; }

/* ---------- nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.stuck { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 16px; }

/* The gradient wordmark: orange → pink → purple → yellow, same stops as the boot splash
   face. Rendered as a background-clipped gradient so "BORED." (including the final dot)
   reads as one mark, in the nav and the footer. */
.wordmark {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .01em;
  text-transform: uppercase; text-decoration: none;
  background: linear-gradient(100deg, var(--grad-1) 0%, var(--grad-2) 34%, var(--grad-3) 68%, var(--grad-4) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wordmark .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad-4); display: inline-block; margin-bottom: 2px; }
/* Fallback for browsers without background-clip:text support (rare, but the mark must
   still read as brand-purple rather than invisible). */
@supports not (background-clip: text) {
  .wordmark { color: var(--purple); }
  .wordmark .dot { background: var(--purple); }
}

.nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 15px; }
.nav-links a { text-decoration: none; color: var(--muted); transition: color .2s; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--purple); }
.nav-links .nav-sep { width: 1px; height: 18px; background: var(--line); display: inline-block; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---------- buttons ----------
   Primary action is a solid pill in the foreground colour with the background colour as
   text — a black pill with white text in light mode, and its mirror in dark mode, exactly
   like the app's PrimaryButton. Purple is reserved for links and selection, never for the
   button fill. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 54px; padding: 0 28px;
  border: 0; border-radius: 999px;
  font-family: var(--display); font-weight: 800; font-size: 17px;
  text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--surface);
  transition: transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s;
  box-shadow: 0 10px 24px -12px rgba(32, 33, 36, .45);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(32, 33, 36, .55); }
.btn.ghost { background: var(--lavender); color: var(--ink); box-shadow: none; }
.btn.ghost:hover { background: var(--line); }
.btn.small { height: 44px; padding: 0 20px; font-size: 15px; }
.btn.light { background: var(--surface); color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
.btn.text { background: transparent; color: var(--purple); box-shadow: none; height: auto; padding: 0; }
.btn.text:hover { transform: none; text-decoration: underline; }

/* ---------- section furniture ---------- */

section { position: relative; padding: clamp(80px, 12vw, 150px) 0; }

.eyebrow {
  font-family: var(--display); font-size: 13px; letter-spacing: 0; text-transform: uppercase;
  color: var(--purple); margin-bottom: 18px;
}

.h2 { font-size: clamp(38px, 6.4vw, 78px); }
.lede { font-size: clamp(17px, 2vw, 21px); color: var(--muted); max-width: 54ch; margin-top: 22px; }

/* ---------- hero ---------- */

.hero { padding-top: clamp(130px, 17vw, 200px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
/* Grid items default to min-width:auto, so the nowrap headline below was setting the column's
   minimum and dragging the lede and the phones out past the page gutter with it. Measured at
   375px: a 327px container with 377px children. */
.hero .wrap > * { min-width: 0; }
@media (max-width: 940px) { .hero .wrap { grid-template-columns: 1fr; gap: 44px; } }

/* The floor has to be small enough that the longest line still fits the gutter on a narrow
   phone, because the lines cannot wrap. "Find your people." at 34px is about 300px wide,
   inside the 327px a 375px screen leaves. */
.hero h1 { font-size: clamp(34px, 7.4vw, 96px); }
/* nowrap matters: each line is a mask for the slide-up reveal, so a line that wrapped inside
   its own box would be half-clipped for the whole animation. The clamp keeps the longest
   line inside the column at every width instead. */
.hero h1 .line { display: block; overflow: hidden; white-space: nowrap; }
.hero h1 .line > span { display: block; }
.hero .accent { color: var(--purple); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero-note { margin-top: 20px; font-size: 14px; color: var(--muted); }

/* The soft purple wash behind the hero, so the fold has depth without a photograph. */
.hero-glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 780px; height: 780px; right: -180px; top: -240px;
  background: radial-gradient(circle, rgba(105,52,237,.20), rgba(105,52,237,0) 68%);
}

/* ---------- phone ---------- */

.phone {
  position: relative; width: 100%; max-width: 320px; margin-inline: auto;
  border-radius: 46px; padding: 11px;
  background: linear-gradient(160deg, #2b1a5e, #120a2e);
  box-shadow: 0 46px 80px -34px rgba(33, 16, 82, .62), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.phone img { border-radius: 36px; }
.phone::after {
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; border-radius: 999px; background: #0d0722;
}

/* Capped so the offset second phone, positioned as a percentage of this box, has a bounded
   box to be a percentage of. 42% + 58% lands exactly on the right edge. */
.phone-stack { position: relative; max-width: 340px; margin-inline: auto; }
.phone-stack .phone + .phone {
  position: absolute; top: 12%; left: 42%; width: 58%; max-width: none;
  border-radius: 34px; padding: 8px;
}
.phone-stack .phone + .phone img { border-radius: 26px; }
.phone-stack .phone + .phone::after { width: 62px; height: 17px; top: 14px; }

/* ---------- three intents ---------- */

.intents { background: var(--lavender); }
.intent-shot { margin-top: 54px; }
.intent-shot .phone { max-width: 296px; }
.intent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 58px; }
@media (max-width: 880px) { .intent-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px 30px 36px;
}
.card h3 { font-size: 27px; margin-bottom: 12px; }
.card p { color: var(--muted); font-size: 16px; }
.card .glyph {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--lavender); color: var(--purple);
  display: grid; place-items: center; margin-bottom: 22px;
}
.card .glyph svg { width: 27px; height: 27px; }

/* ---------- split rows ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.split.flip > *:first-child { order: 2; }
@media (max-width: 900px) { .split, .split.flip { grid-template-columns: 1fr; }
  .split.flip > *:first-child { order: 0; } }

.feature-list { margin-top: 30px; display: grid; gap: 14px; padding: 0; list-style: none; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 16px; }
.feature-list .tick {
  flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%;
  background: var(--purple); color: #fff; display: grid; place-items: center; font-size: 12px; margin-top: 1px;
}

/* ---------- games ---------- */

.games { background: #202124; color: #fff; overflow: hidden; }
.games .eyebrow { color: var(--go); }
.games .lede { color: rgba(255,255,255,.66); }

.game-rail { display: flex; gap: 18px; margin-top: 56px; padding-bottom: 8px; will-change: transform; }
.game-chip {
  flex: 0 0 auto; width: 210px; height: 250px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1);
  padding: 26px; display: flex; flex-direction: column; justify-content: space-between;
}
.game-chip .num { font-family: var(--display); font-size: 13px; color: rgba(255,255,255,.4); }
.game-chip h3 { font-size: 26px; }
.game-chip p { font-size: 14px; color: rgba(255,255,255,.6); margin-top: 8px; }
/* Twelve chips run long; shrink the tile a touch so the rail still reads as a quick scan
   rather than an endless scroll. */
.game-chip { width: 190px; height: 226px; padding: 22px; }

/* ---------- the animated code rings ----------
   The same four counter-rotating rings the app draws around a QR (BoredCodeRings.swift),
   here with nothing to protect, so they can close in around the mark. */

.ring-stage { position: relative; width: 210px; aspect-ratio: 1; margin: 0 auto 30px; display: grid; place-items: center; }
.ring-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-stage .face { position: relative; width: 44%; }

/* ---------- safety ---------- */

.safety { background: var(--lavender); }
.safety-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 52px; }
@media (max-width: 760px) { .safety-grid { grid-template-columns: 1fr; } }

/* ---------- final cta ---------- */

.cta { background: var(--lavender); color: var(--ink); text-align: center; overflow: hidden; }
.cta h2 { font-size: clamp(42px, 8vw, 96px); }
.cta p { color: var(--muted); margin: 24px auto 0; max-width: 46ch; font-size: 18px; }
.cta .btn { margin-top: 38px; }

/* ---------- pricing ---------- */

.pricing { background: var(--surface); }
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 52px; }
@media (max-width: 760px) { .pricing-grid { grid-template-columns: 1fr; } }
.plan {
  border: 1px solid var(--line); border-radius: var(--r-xl); padding: 36px 32px;
  background: var(--lavender); display: flex; flex-direction: column; gap: 18px;
}
.plan.is-plus { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.plan.is-plus .plan-price small, .plan.is-plus .plan-list li { color: rgba(255,255,255,.68); }
.plan-name { font-family: var(--display); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--purple); }
.plan.is-plus .plan-name { color: var(--go); }
.plan-price { font-family: var(--display); font-weight: 800; font-size: 42px; }
.plan-price small { font-size: 16px; font-weight: 600; color: var(--muted); }
.plan-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 15px; }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.plan-list li::before { content: "✓"; flex: 0 0 auto; }
.plan .btn { align-self: flex-start; margin-top: 6px; }
.plan.is-plus .btn { background: var(--surface); color: var(--ink); }

/* ---------- footer ---------- */

footer { padding: 54px 0 64px; border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
footer .legal { color: var(--muted); font-size: 14px; }
footer nav { margin-left: auto; display: flex; gap: 20px; font-size: 14px; }
footer nav a { color: var(--muted); text-decoration: none; }
footer nav a:hover { color: var(--ink); }

/* ---------- the face ---------- */

.face { display: block; color: var(--ink); }
.face .eye { transform-origin: center; }

/* ---------- legal pages ---------- */

.legal-hero { padding: clamp(120px, 15vw, 170px) 0 20px; }
.legal-hero h1 { font-size: clamp(34px, 6vw, 58px); }
.legal-updated { color: var(--muted); font-size: 15px; margin-top: 14px; }

/* The "not final" banner: shown only on pages whose source markdown still has a bracketed
   placeholder like [COMPANY LEGAL NAME] left in it. */
.legal-notice {
  margin-top: 28px; padding: 18px 20px; border-radius: var(--r-md);
  background: #FFF6D9; border: 1px solid #F0D989; color: #6B5300;
  font-size: 15px; line-height: 1.5; display: flex; gap: 12px; align-items: flex-start;
}
@media (prefers-color-scheme: dark) {
  .legal-notice { background: #3A2F0A; border-color: #6B5300; color: #F5D97A; }
}
.legal-notice .icon { flex: 0 0 auto; font-size: 18px; line-height: 1; }

/* Segmented English/French control — the same light-grey pill switch the app uses. */
.lang-toggle {
  display: inline-flex; gap: 2px; margin-top: 26px; padding: 4px;
  background: var(--lavender); border-radius: 14px;
}
.lang-toggle button {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  border: 0; background: transparent; color: var(--muted);
  padding: 9px 18px; border-radius: 11px; cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

.legal-body { padding-top: 24px; padding-bottom: 100px; }
.legal-layout { display: grid; grid-template-columns: 260px 1fr; gap: 60px; align-items: start; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } }

.legal-toc { position: sticky; top: 100px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; background: var(--lavender); }
.legal-toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; font-family: var(--display); color: var(--muted); margin-bottom: 12px; }
.legal-toc ol { margin: 0; padding: 0 0 0 18px; display: grid; gap: 8px; font-size: 14.5px; }
.legal-toc a { text-decoration: none; color: var(--ink); }
.legal-toc a:hover { color: var(--purple); }
@media (max-width: 900px) { .legal-toc { position: static; } }

.legal-content { max-width: 74ch; font-size: 16.5px; line-height: 1.68; color: var(--ink); }
.legal-content h2 { font-size: 27px; margin-top: 46px; margin-bottom: 14px; line-height: 1.2; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 19px; margin-top: 28px; margin-bottom: 10px; }
.legal-content p { margin: 14px 0; color: var(--ink); }
.legal-content ul, .legal-content ol { padding-left: 22px; margin: 14px 0; display: grid; gap: 8px; }
.legal-content li { color: var(--ink); }
.legal-content a { color: var(--purple); }
.legal-content strong { font-weight: 800; }
.legal-content em { color: var(--muted); }
.legal-content hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
.legal-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.legal-content th, .legal-content td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; }
.legal-content th { background: var(--lavender); font-family: var(--display); }

/* support + legal index */
.legal-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.legal-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: var(--ink); background: var(--surface);
}
.legal-list a:hover { background: var(--lavender); }
.legal-list .name { display: block; font-family: var(--display); font-weight: 800; font-size: 18px; }
.legal-list .desc { display: block; color: var(--muted); font-size: 14.5px; margin-top: 4px; }

/* ---------- motion defaults ----------
   Mobile browsers must always show content first. Animations may enhance later, but they
   never get to hide the page. */
.reveal { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}