/* ============================================================================
   DoomBlock site design system
   ----------------------------------------------------------------------------
   One stylesheet for all three pages (index, privacy, account-deletion).

   The tokens below mirror AppPalette.dark in the app
   (lib/core/theme/app_palette.dart) value for value, so the site and the
   product can never disagree about what DoomBlock looks like.

   Colour discipline, carried over from lib/core/constants/app_colors.dart:
     * BLUE is the accent. Every call to action, every focus ring, every
       active state.
     * GOLD marks Pro / pricing only. It is the "earned" colour.
     * RED means DANGER and nothing else. It is never decoration. The site
       used to use red as its brand accent, which is exactly the mistake the
       palette notes in the app describe fixing: when the accent and the
       warning are the same value, the one colour the eye should read as a
       stop signal gets spent on every ordinary button.
   ========================================================================= */

:root {
  /* Surfaces: true black foundation, near-black greys stepping up */
  --bg: #000000;
  --surface: #0A0A0A;
  --card: #141414;
  --elevated: #1E1E1E;
  --modal: #1A1A1A;

  /* Brand: electric blue */
  --primary: #2979FF;
  --primary-dim: #1554CC;
  --primary-glow: rgba(41, 121, 255, 0.20);
  --primary-glow-strong: rgba(41, 121, 255, 0.40);
  --on-primary: #FFFFFF;

  /* Premium accent: cold gold */
  --gold: #FFD740;
  --gold-glow: rgba(255, 215, 64, 0.20);
  --on-gold: #000000;

  /* Text */
  --text: #FFFFFF;
  --text-2: #8A8A8E;
  --text-3: #48484A;   /* decorative marks only, too dim for text on black */
  --text-doc: #C9C9CE;

  /* Semantic */
  --success: #00C853;
  --warning: #FFAB00;
  --danger: #FF1744;
  --info: #64B5F6;

  /* Borders */
  --border: #1E1E1E;
  --border-light: #2C2C2E;

  /* Type */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw: 1140px;
  --doc-maxw: 820px;
  --radius: 16px;
  --radius-sm: 10px;
}

/* ---- Reset / base ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin: 0;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  color: var(--primary);
  margin-bottom: 14px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- The mark ----------------------------------------------------------- */
/* Ported from DoomLogoPainter (lib/core/widgets/doom_logo.dart). The painter
   works in fractions of its canvas, which is exactly an SVG viewBox, so the
   geometry transfers 1:1 at viewBox="0 0 100 100". */

.mark { color: var(--primary); display: block; flex: none; }

/* The badge breathes; the case never moves. The painter is explicit about why
   (see PulsingDoomLogo): thumping the whole mark reads as a logo bouncing, so
   the beat is spent where the meaning is, on the lock and its keyhole. */
@media (prefers-reduced-motion: no-preference) {
  .mark-beat .db-badge {
    transform-origin: 50px 58.25px;
    animation: lockbeat 1600ms ease-in-out infinite;
  }
  @keyframes lockbeat {
    0%, 62%, 100% { transform: scale(1); }
    12%           { transform: scale(1.042); }
    26%           { transform: scale(1.006); }
    38%           { transform: scale(1.030); }
  }
}

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

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.4rem;
  color: var(--text);
}
.brand:hover { text-decoration: none; color: var(--text); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links > a {
  color: var(--text-2);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.nav-links > a:hover { color: var(--text); text-decoration: none; }
.nav-links > a.active { color: var(--text); }

.nav-cta {
  background: var(--primary);
  color: var(--on-primary) !important;
  font-weight: 600;
  padding: 9px 16px !important;
}
.nav-cta:hover { background: var(--primary-dim); }

@media (max-width: 780px) {
  .hide-sm { display: none; }
  .brand { font-size: 1.2rem; }
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-dim); }

.btn-ghost { color: var(--text); border-color: var(--border-light); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: #E6C13A; }

@media (prefers-reduced-motion: no-preference) {
  .btn:active { transform: translateY(1px); }
}

.play-icon { width: 18px; height: 18px; flex: none; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ---- Sections ----------------------------------------------------------- */

.band { padding-block: clamp(64px, 9vw, 108px); position: relative; }
.band + .band { border-top: 1px solid var(--border); }

.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }

.section-title {
  font-size: clamp(2.1rem, 5.2vw, 3.2rem);
  margin-bottom: 16px;
}

.section-head p { color: var(--text-2); margin: 0; font-size: 1.06rem; }

/* ---- Hero --------------------------------------------------------------- */

.hero {
  padding-block: clamp(56px, 8vw, 96px) clamp(64px, 9vw, 104px);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.mark-wrap { position: relative; width: 84px; height: 84px; margin-bottom: 22px; }

.hero-glow {
  position: absolute;
  inset: -180px;
  background: radial-gradient(closest-side, var(--primary-glow) 0%, transparent 74%);
  pointer-events: none;
  z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: pulseglow 5.5s ease-in-out infinite; }
  @keyframes pulseglow {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
  }
}

.hero-title {
  font-size: clamp(2.9rem, 8.4vw, 5rem);
  margin-bottom: 20px;
}

.hero-title .hl { color: var(--primary); }

.hero-sub {
  color: var(--text-2);
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  max-width: 34em;
  margin: 0;
}
.hero-sub strong { color: var(--text); font-weight: 600; }

.hero-note {
  margin: 20px 0 0;
  color: var(--text-2);
  font-size: 0.92rem;
}

/* ---- Phone mock (blocking screen) --------------------------------------- */

.mock {
  position: relative;
  width: min(300px, 100%);
  margin-inline: auto;
  border-radius: 30px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
}

.mock::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 31px;
  padding: 1px;
  background: linear-gradient(160deg, var(--primary-glow-strong), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.mock-screen {
  background: var(--bg);
  border-radius: 20px;
  padding: 34px 22px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.mock-mark { width: 66px; height: 66px; }

.mock-blocked {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.5rem;
  margin-top: 12px;
}

.mock-target {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--primary);
  line-height: 1.1;
}

.mock-by, .mock-done { margin: 0; color: var(--text-2); font-size: 0.88rem; }
.mock-by b { color: var(--text-2); font-weight: 600; }
.mock-done { color: var(--text-2); }

.mock-ring { position: relative; width: 74px; height: 74px; margin: 16px 0 6px; }
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--elevated); stroke-width: 7; }
.ring-progress {
  fill: none;
  stroke: var(--primary);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 0;
}

.mock-check {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.mock-check-disc {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--success);
  display: grid; place-items: center;
}
.mock-check-disc svg { width: 26px; height: 26px; }

@media (prefers-reduced-motion: no-preference) {
  .mock .ring-progress { stroke-dashoffset: 327; }
  .mock .mock-check { opacity: 0; transform: scale(0.6); }
  .mock.in-view .ring-progress { animation: ringsweep 1400ms ease-out forwards; }
  .mock.in-view .mock-check { animation: checkpop 420ms 1250ms cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
  @keyframes ringsweep { to { stroke-dashoffset: 0; } }
  @keyframes checkpop  { to { opacity: 1; transform: scale(1); } }
}

.mock-btn {
  margin-top: 10px;
  width: 100%;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 11px;
  padding: 12px;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---- Feature cards ------------------------------------------------------ */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px;
}

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .feature:hover { transform: translateY(-3px); border-color: var(--primary-glow-strong); }
}

.ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--primary-glow);
  color: var(--primary);
  margin-bottom: 16px;
}

.feature h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.32rem;
  margin: 0 0 8px;
}

.feature p { margin: 0; color: var(--text-2); font-size: 0.98rem; }

/* ---- Split section (short-form showcase) -------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.split-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.split-list li {
  position: relative;
  padding-left: 30px;
  color: var(--text-2);
  font-size: 1rem;
}
.split-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--primary);
}
.split-list li strong { color: var(--text); font-weight: 600; }

/* Feed toggle mock */
.feeds {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding-top: 6px;
  max-width: 380px;
  margin-inline: auto;
}

.feed-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
}
.feed-row + .feed-row { border-top: 1px solid var(--border); }

.feed-logo {
  width: 22px; height: 22px; flex: none;
  color: var(--text-2);
}
.feed-logo svg { width: 100%; height: 100%; display: block; fill: currentColor; }

.feed-name { flex: 1; font-size: 0.96rem; }

.toggle {
  width: 44px; height: 26px; flex: none;
  border-radius: 999px;
  background: var(--elevated);
  position: relative;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text-3);
}
.toggle.on { background: var(--primary); }
.toggle.on::after { transform: translateX(18px); background: #fff; }

.feeds-foot {
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.85rem;
}

/* ---- Steps -------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
}

.step .n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--primary);
  display: block;
  margin-bottom: 12px;
}

.step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.28rem;
  margin: 0 0 8px;
}
.step p { margin: 0; color: var(--text-2); font-size: 0.98rem; }

/* ---- Pricing ------------------------------------------------------------ */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 18px;
  max-width: 760px;
  margin-inline: auto;
  align-items: stretch;
}

.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
}

.plan-best {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-glow) 0%, transparent 42%), var(--surface);
}

.plan-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1rem;
  color: var(--text-2);
  margin: 0 0 10px;
}
.plan-best .plan-name { color: var(--gold); }

.plan-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.1rem;
  line-height: 1;
  margin: 0;
}
.plan-price .per {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-2);
  letter-spacing: 0;
  margin-left: 6px;
}

.plan-sub { margin: 12px 0 0; color: var(--text-2); font-size: 0.96rem; }

.badge {
  align-self: flex-start;
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* Pinned to the bottom so the two cards' buttons line up even though the
   yearly card carries an extra badge row. */
.plan .btn { margin-top: auto; padding-top: 15px; width: 100%; }
.plan-sub { margin-bottom: 26px; }

.plan-includes {
  list-style: none;
  margin: 30px auto 0;
  padding: 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 26px;
  font-size: 0.97rem;
  color: var(--text-2);
}
.plan-includes li { position: relative; padding-left: 26px; }
.plan-includes li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.36em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}

.plan-terms {
  max-width: 760px;
  margin: 30px auto 0;
  color: var(--text-2);
  font-size: 0.9rem;
}
.plan-terms a { color: var(--text-2); text-decoration: underline; }

/* ---- FAQ ---------------------------------------------------------------- */

.faq { max-width: 820px; margin-inline: auto; }

.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 12px;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 22px;
  position: relative;
  font-weight: 600;
  font-size: 1.03rem;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  right: 24px; top: 25px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 29px; }

.faq .answer { padding: 0 22px 20px; color: var(--text-2); }
.faq .answer p { margin: 0 0 12px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---- Closing CTA -------------------------------------------------------- */

.closer { text-align: center; position: relative; overflow: hidden; }
.closer h2 { font-size: clamp(2.3rem, 6.5vw, 4rem); margin-bottom: 18px; }
.closer p { color: var(--text-2); max-width: 46ch; margin: 0 auto; }
.closer .cta-row { justify-content: center; }

/* ---- Footer ------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--border);
  padding-block: 44px;
  background: var(--surface);
}

.foot-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-links a { color: var(--text-2); font-size: 0.94rem; }
.foot-links a:hover { color: var(--text); }

.foot-note {
  color: var(--text-2);
  font-size: 0.86rem;
  margin: 0;
  width: 100%;
}

/* ---- Legal document pages ----------------------------------------------- */

.doc {
  max-width: var(--doc-maxw);
  padding-block: clamp(48px, 7vw, 84px) clamp(56px, 8vw, 92px);
}

.doc h1 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.01em;
  font-size: clamp(2.5rem, 7vw, 4rem);
  margin: 0 0 12px;
}

.updated { color: var(--text-2); font-size: 0.92rem; margin: 0 0 34px; }

.doc h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.6rem;
  margin: 46px 0 14px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

.doc h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 26px 0 8px;
  color: var(--text);
}

.doc p, .doc li { color: var(--text-doc); }
.doc p { margin: 0 0 16px; }
.doc strong { color: var(--text); font-weight: 600; }
.doc em { color: var(--text-2); }

.doc ul, .doc ol { padding-left: 22px; margin: 0 0 16px; }
.doc li { margin-bottom: 10px; }
.doc li > ul { margin-top: 10px; }

.lead { font-size: 1.08rem; }

/* Callouts. .callout is neutral/informational (blue); .callout-warn is for
   the genuinely consequential (irreversible deletion), and is the only place
   on the site that earns red. */
.callout {
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--primary);
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 0 0 22px;
}
.callout p:last-child { margin-bottom: 0; }

.callout-warn { border-left-color: var(--danger); }
.callout-warn strong { color: var(--danger); }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 0 0 22px;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

th, td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-doc);
}

th {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--card);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .hero-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .split-media { order: -1; }
  .mock { margin-top: 8px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 18px; }
  .cta-row .btn { width: 100%; }
  .foot-grid { flex-direction: column; align-items: flex-start; }
}