/* Doublecast website. Flat colours only: no gradients, no glows (brand rule).
   The logo is white only; no orange on this site. */
:root {
  --ink: #05060A;
  --graphite: #15171C;
  --line: rgba(255, 255, 255, 0.12);
  --steel: #8A8F98;
  --paper: #F5F5F7;
  --dim: rgba(235, 235, 245, 0.68);
  --card: #0D0E12;
  --card-line: #1C1E24;
  --max: 1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

a { color: var(--paper); text-underline-offset: 3px; }
a:hover { color: #FFFFFF; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* Header */
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.brand { display: flex; align-items: center; }
.brand img { height: 18px; width: auto; display: block; }
.nav { display: flex; gap: 28px; font-size: 15px; }
.nav a { color: var(--dim); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); }

/* Hero */
.hero { padding: 120px 0 112px; border-bottom: 1px solid var(--line); text-align: center; }
.hero .wrap { display: flex; flex-direction: column; align-items: center; }
.hero .mark { height: 92px; width: auto; display: block; margin-bottom: 40px; }
.hero h1 { max-width: 13em; font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.03em; line-height: 1.04; margin-bottom: 24px; }
.hero .lead { margin-left: auto; margin-right: auto; }
.hero .actions { justify-content: center; }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel); margin: 0 0 12px;
}
h1 { font-size: clamp(36px, 6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 20px; font-weight: 700; max-width: 14em; }
.lead { font-size: 19px; color: var(--dim); max-width: 34em; margin: 0 0 32px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--line); color: var(--paper); background: var(--graphite);
}
.btn.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.primary:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }
.btn:hover { color: var(--paper); border-color: var(--steel); }
.note { font-size: 14px; color: var(--steel); margin: 14px 0 0; }

/* Sections */
section { padding: 96px 0; border-bottom: 1px solid var(--line); }
h2 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 16px; max-width: 18em; }
.section-lead { color: var(--dim); max-width: 36em; margin: 0 0 36px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--card-line); border-radius: 20px; padding: 28px; }
.card h3 { font-size: 18px; margin: 0 0 8px; }
.card p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.6; }

.facts { list-style: none; padding: 0; margin: 12px 0 0; max-width: 720px; border-top: 1px solid var(--card-line); }
.facts li { padding: 20px 0; border-bottom: 1px solid var(--card-line); font-size: 18px; }

/* Text pages (privacy, support) */
.page { padding: 64px 0 80px; }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(32px, 5vw, 44px); }
.page h2 { font-size: 22px; margin: 40px 0 10px; }
.page p, .page li { color: var(--dim); }
.page strong { color: var(--paper); }
.page ul { padding-left: 20px; }
.page .updated { color: var(--steel); font-size: 15px; margin: 0 0 32px; }
details { border-top: 1px solid var(--line); padding: 16px 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 600; color: var(--paper); }
details p { margin: 10px 0 0; }

/* Footer */
.foot { padding: 32px 0 48px; color: var(--steel); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
.foot nav { display: flex; gap: 20px; }
.foot a { color: var(--steel); text-decoration: none; }
.foot a:hover { color: var(--paper); }

@media (max-width: 520px) {
  .hero { padding: 72px 0 64px; }
  .hero .mark { height: 72px; margin-bottom: 32px; }
  section { padding: 64px 0; }
  .nav { gap: 18px; }
  .btn { width: 100%; }
}

/* Loading splash (home page, once per visit). Same timeline as the app's splash:
   back bar lights 380 ms; front bar fills bottom-up 620 ms from 220 ms;
   wordmark rises 480 ms from 760 ms; exit fade + grow 420 ms from 1240+520 ms. */
.splash { display: none; }
.js-splash .splash {
  display: flex; position: fixed; inset: 0; z-index: 100; background: #000;
  flex-direction: column; align-items: center; justify-content: center; gap: 36px;
  animation: splash-out 420ms cubic-bezier(.32, 0, .67, 0) 1760ms forwards;
}
.js-splash body { overflow: hidden; }
.splash-mark { position: relative; width: 88px; height: 144px; }
.splash-bar { position: absolute; width: 36px; height: 124px; border-radius: 18px; background: #1A1B20; overflow: hidden; }
.splash-back { left: 0; top: 0; animation: splash-light 380ms ease-out forwards; }
.splash-front { left: 52px; top: 20px; }
.splash-fill { width: 100%; height: 100%; background: var(--paper); transform: scaleY(0); transform-origin: 50% 100%;
  animation: splash-fill 620ms cubic-bezier(.65, 0, .35, 1) 220ms forwards; }
.splash-word { margin: 0; padding-left: .2em; font-size: 22px; font-weight: 700; letter-spacing: .2em; color: var(--paper);
  opacity: 0; transform: translateY(10px); animation: splash-word 480ms cubic-bezier(.33, 1, .68, 1) 760ms forwards; }
@keyframes splash-light { to { background: var(--paper); } }
@keyframes splash-fill { to { transform: scaleY(1); } }
@keyframes splash-word { to { opacity: 1; transform: none; } }
@keyframes splash-out { to { opacity: 0; transform: scale(1.08); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .js-splash .splash { animation: splash-out 250ms linear 0ms forwards; }
  .splash-back, .splash-fill, .splash-word { animation: none; }
  .splash-back { background: var(--paper); }
  .splash-fill { transform: none; }
  .splash-word { opacity: 1; transform: none; }
}

.page h3 { font-size: 17px; margin: 28px 0 6px; }

/* Forms (request page) */
.form { display: grid; gap: 18px; margin: 32px 0 0; max-width: 560px; }
.form label { display: grid; gap: 8px; font-size: 15px; font-weight: 600; }
.form label span { font-weight: 400; color: var(--steel); }
.form input, .form textarea {
  font: inherit; color: var(--paper); background: var(--card); border: 1px solid #2A2D35;
  border-radius: 12px; padding: 12px 14px; width: 100%;
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--paper); outline-offset: 1px; }
.form .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; cursor: pointer; }
button.btn { font: inherit; font-weight: 600; }

/* Sending animation: the Twin Bars filling in turn, like the splash. */
.btn.is-sending { cursor: progress; gap: 12px; }
.sending-bars { position: relative; display: inline-block; width: 14px; height: 20px; }
.sending-bars span { position: absolute; bottom: 0; width: 5px; height: 17px; border-radius: 3px; background: currentColor; opacity: .25;
  transform-origin: 50% 100%; animation: sending-bar 1s cubic-bezier(.65, 0, .35, 1) infinite; }
.sending-bars span:first-child { left: 0; top: 0; bottom: auto; }
.sending-bars span:last-child { right: 0; animation-delay: .25s; }
@keyframes sending-bar { 0%, 100% { opacity: .25; transform: scaleY(.55); } 50% { opacity: 1; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .sending-bars span { animation: none; opacity: 1; } }