/* ============================================================================
   dry-beep.css — Beep skin for the investor document.

   Loaded AFTER dry.css by /dry-beep only. dry.css keeps every layout, spacing
   and structural rule; this file changes nothing but the visual language, so
   /dry and /dry-beep differ in exactly one variable: the skin. Do not put
   copy-, structure- or behaviour-level changes here.

   The page stays ANONYMOUS. A palette is not an identifier — there is no logo,
   no wordmark and no company name here, only the dark base, the brand blue and
   the atmosphere of the main landing.

   Values are COPIED from index.html's local token block (which itself overrides
   colors_and_type.css to match the blog) rather than imported, for the same
   reason dry.css keeps its tokens local: editing the design system must not
   move a live A/B variant.
   ========================================================================== */

@font-face{ font-family:'Fixel Display'; src:url('/assets/css/fonts/FixelDisplay-Light.otf') format('opentype');    font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Fixel Display'; src:url('/assets/css/fonts/FixelDisplay-Regular.woff2') format('woff2');   font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Fixel Display'; src:url('/assets/css/fonts/FixelDisplay-Medium.otf') format('opentype');   font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Fixel Display'; src:url('/assets/css/fonts/FixelDisplay-SemiBold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }
/* No Bold cut is supplied by the design system; 700 maps to SemiBold. */
@font-face{ font-family:'Fixel Display'; src:url('/assets/css/fonts/FixelDisplay-SemiBold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  /* Base + brand, matching index.html's local overrides. */
  --bg-base:        #0C0E12;
  --brand:          #3651E8;
  --brand-hover:    #4863F0;
  --brand-pressed:  #2840C4;
  --brand-soft:     rgba(54, 81, 232, 0.12);
  /* brand-hover is only ~4:1 on these surfaces. Small brand-coloured text
     (eyebrow, chips, table values) uses this lighter tint instead so it clears
     AA; large display numbers can still use --brand-hover. */
  --brand-text:     #93A6F9;
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  #373A41;

  /* The card recipe of the main landing: a vertical surface gradient, a 1px
     top highlight and a soft drop shadow. Every panel on this page uses it. */
  --surface-gradient:  linear-gradient(180deg, #12131A 0%, #0B0B10 100%);
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-md:         0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);

  /* dry.css paints its section rhythm with five opaque fills. Here they become
     near-transparent tints instead, so the fixed atmosphere behind the page
     stays visible the whole way down — the way sections do on the main landing —
     while a whisper of the document's band structure survives. */
  --black:      rgba(255, 255, 255, 0.000);
  --ink:        rgba(255, 255, 255, 0.014);
  --cream:      rgba(255, 255, 255, 0.030);
  --paper:      rgba(255, 255, 255, 0.048);
  --navy:       rgba(54, 81, 232, 0.065);
  --navy-deep:  rgba(255, 255, 255, 0.030);

  --gold:       var(--brand);        /* the single accent becomes brand-primary */
  --gold-hover: var(--brand-hover);
  --gold-soft:  var(--brand-soft);

  --line:       rgba(255, 255, 255, 0.10);
  --line-soft:  rgba(255, 255, 255, 0.06);
  /* The design system's text-tertiary (#6B6E78) sits at ~3.6:1 on these
     surfaces — under AA, and the muted role carries risk warnings, footnotes
     and the legal footer. Lifted to clear 4.5:1 at 11.5-12.5px. */
  --muted:      #8A8D97;
  --muted-dark: #A8ABB5;   /* text-secondary — inverted role: on dark it is the LIGHTER one */
  --white:      #FFFFFF;

  --font: 'Fixel Display', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --dur:  120ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --ink doubles as the body text colour in dry.css; on a dark skin that would
   be black-on-black, so every such usage is re-pointed explicitly below. */
body{ background:var(--bg-base); color:var(--white); }

/* ============ PAGE ATMOSPHERE ============
   The brand blob pattern of beep.org, ported from index.html: a warm blob left,
   a cool blob right, both drifting on a 20s loop and melted together by a 160px
   backdrop-blur diffuser, fixed to the top of the viewport and masked out
   towards the bottom. Content sits above it on z-index 1. */
.page-atmosphere{
  position:fixed; top:0; left:0; right:0;
  height:640px; overflow:hidden; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}
.page-atmosphere__warm,
.page-atmosphere__cool{
  position:absolute; border-radius:999px; opacity:0.27;
  will-change:transform; filter:blur(80px);
}
.page-atmosphere__warm{
  width:545px; height:315px; background:#EF9A4C;
  top:-40px; left:-180px;
  animation:20s linear 0s infinite beep-glow-warm;
}
.page-atmosphere__cool{
  width:613px; height:355px; background:#3051E5;
  top:20px; right:-220px;
  animation:20s linear 0s infinite beep-glow-cool;
}
.page-atmosphere__blur{
  position:absolute; inset:0; background:rgba(0,0,0,0.01);
  -webkit-backdrop-filter:blur(160px); backdrop-filter:blur(160px);
}
@keyframes beep-glow-warm{
  0%,100%{ transform:translate(0,0); }
  25%    { transform:translate(calc(var(--glow-shift, 75vw) / 2), 50px); }
  50%    { transform:translate(var(--glow-shift, 75vw), 0); }
  75%    { transform:translate(calc(var(--glow-shift, 75vw) / 2), -50px); }
}
@keyframes beep-glow-cool{
  0%,100%{ transform:translate(0,0); }
  25%    { transform:translate(calc(var(--glow-shift, 75vw) / -2), -50px); }
  50%    { transform:translate(calc(var(--glow-shift, 75vw) * -1), 0); }
  75%    { transform:translate(calc(var(--glow-shift, 75vw) / -2), 50px); }
}
@media (prefers-reduced-motion: reduce){
  .page-atmosphere__warm,.page-atmosphere__cool{ animation:none !important; }
}
@media (max-width: 640px){
  .page-atmosphere{ height:480px; }
  .page-atmosphere__warm,.page-atmosphere__cool{ filter:blur(45px); --glow-shift:55vw; }
  .page-atmosphere__warm{ width:240px; height:200px; top:-50px; left:-60px; }
  .page-atmosphere__cool{ width:260px; height:220px; top:-10px; right:-60px; }
  .page-atmosphere__blur{ -webkit-backdrop-filter:blur(55px); backdrop-filter:blur(55px); }
}
/* Everything the reader sees rides above the atmosphere. */
.hdr,main,footer{ position:relative; z-index:1; }
/* The cookie banner keeps dry.css's position:fixed — listing it here with
   position:relative pushed it to the very end of the document, below the
   footer, so first-time visitors never saw it and never granted consent. */
.ck{ z-index:2; }

/* ============ SCROLL REVEAL ============
   Same curve and trigger as the main landing, but driven off the section
   elements themselves rather than a .reveal class, so the shared markup in
   dry.html stays untouched and nothing has to be tagged after first paint —
   tagging late made every section render, fade out, then fade back in.

   Armed by html.js-reveal, set by a tiny inline script in <head> before the
   first paint. If that script never runs, nothing is ever hidden and the
   document simply reads as static — the fail-visible default for a page whose
   whole content sits inside these sections. */
.js-reveal main > section,
.js-reveal footer.legal{
  opacity:0; transform:translateY(16px);
  transition:opacity 600ms var(--ease), transform 600ms var(--ease);
}
.js-reveal main > section.is-visible,
.js-reveal footer.legal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .js-reveal main > section,
  .js-reveal footer.legal{ opacity:1; transform:none; transition:none; }
}

/* ---------- bands ---------- */
.band{ border-top:1px solid var(--line-soft); }
.band--cream,.band--paper{ color:var(--white); }
.band--cream .note,.band--paper .note{ color:var(--muted); }
.band--cream a,.band--paper a{ color:var(--brand-hover); }
.band--ink,.band--black,.band--navy{ border-top-color:var(--line-soft); }
/* dry.css tints links on dark bands with --gold-soft. In the gold skin that was
   a light sand; here it is a 12% brand fill used behind chips, which would make
   link text all but invisible — and it outranks .btn--gold, so it swallowed the
   CTA labels too. Both are re-pointed explicitly. */
.band--navy a,.band--ink a,.band--black a{ color:var(--brand-hover); }
.band--navy .btn--gold,.band--ink .btn--gold,.band--black .btn--gold,
.band--cream .btn--gold,.band--paper .btn--gold{ color:var(--white); }

/* ---------- type ---------- */
h1,h2,h3{ letter-spacing:-0.02em; }
.h2{ border-bottom-color:var(--brand); }
.band--cream p,.band--paper p{ color:var(--muted-dark); }
.band--cream .h2,.band--paper .h2,
.band--cream h3,.band--paper h3,
.band--cream strong,.band--paper strong{ color:var(--white); }

/* ---------- accent marks ---------- */
.checks li::before{ background:var(--brand); }
/* Given its own fill so legibility does not depend on where the drifting
   atmosphere happens to sit behind it. */
.eyebrow{
  border-color:rgba(54,81,232,0.55); color:var(--brand-text);
  background:var(--brand-soft); border-radius:var(--r-sm);
}

/* ---------- buttons (weights, radius and states of the main landing) ------- */
.btn{
  border-radius:var(--r-md); font-weight:500; letter-spacing:-0.005em;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--gold{ background:var(--brand); color:var(--white); box-shadow:none; }
.btn--gold:hover{ background:var(--brand-hover); }
.btn--gold:active{ background:var(--brand-pressed); }
.btn--gold[disabled]{ background:rgba(255,255,255,0.06); color:#3F4250; }
.btn--gold[disabled]:hover{ background:rgba(255,255,255,0.06); }
/* The reference stamps a » on its CTA. That is a chevron-as-decoration the
   design system does not use, so it goes. */
.btn--gold::before{ content:none; }
.btn--ghost{ border-color:var(--border-default); border-radius:var(--r-md); }
.btn--ghost:hover{ border-color:var(--border-strong); background:rgba(255,255,255,0.03); color:var(--white); }

/* ---------- header ---------- */
/* Fully opaque on purpose: the design system rules out backdrop blur, and a
   translucent sticky header without it lets the page scroll through the bar. */
.hdr{ background:var(--bg-base); border-bottom:1px solid var(--line-soft); }
.hdr__mark{ background:var(--brand); color:var(--white); border-radius:var(--r-md); }
/* Sentence case: the design system reserves uppercase for chips, not for a
   running subtitle. */
.hdr__s{ text-transform:none; letter-spacing:0; font-size:11px; color:var(--muted); }

/* ---------- hero ---------- */
/* Transparent: the atmosphere behind the page is the hero's background now. */
.hero{ background:transparent; }
.hero__seal{
  background:var(--brand); color:var(--white);
  box-shadow:0 8px 28px rgba(54,81,232,0.35);
}

/* ---------- panels: the card recipe of the main landing ---------- */
.access,.facts,.ordered,.driver,.faq,.form,.step{
  background:var(--surface-gradient);
  border:1px solid var(--border-default);
  box-shadow:var(--surface-highlight), var(--shadow-md);
}
.access,.form{ border-radius:var(--r-lg); }
.facts,.ordered,.driver,.faq,.step{ border-radius:var(--r-lg); overflow:hidden; }
.driver,.step{ transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.driver:hover,.step:hover{ border-color:var(--border-strong); transform:translateY(-3px); }
.driver{ border-top:1px solid var(--border-default); }

/* ---------- notices ---------- */
.notice{
  background:var(--cream); border-left:3px solid var(--brand);
  border-radius:0 var(--r-md) var(--r-md) 0; color:var(--muted-dark);
}
.notice strong{ color:var(--white); }
.notice--dark{ background:rgba(255,255,255,0.04); }

/* ---------- fact table ---------- */
.facts__row{ border-bottom-color:var(--line-soft); }
.facts__row:nth-child(even){ background:rgba(255,255,255,0.02); }
.facts__row--total{ background:var(--brand-soft); border-left:3px solid var(--brand); }
.facts__k{ color:var(--muted); }
.facts__v{ color:var(--white); }
.facts__row--total .facts__v{ color:var(--brand-text); }
.facts__v--sealed{ color:var(--muted) !important; }

/* ---------- numbered list ---------- */
.ordered__row{ border-bottom-color:var(--line-soft); }
.ordered__n{ color:var(--brand-text); }
.ordered__t{ color:var(--muted-dark); }

/* ---------- value drivers ---------- */
.driver__chip{
  background:var(--brand-soft); color:var(--brand-text); border-radius:var(--r-sm);
  letter-spacing:.06em;
}
.driver p{ color:var(--muted-dark); }

/* ---------- definitions / citation ---------- */
.defs{ border-left-color:var(--brand); }
.cite{ background:rgba(255,255,255,0.03); border-color:var(--line-soft); color:var(--muted); border-radius:var(--r-sm); }

/* ---------- process steps ---------- */
.step__n{ background:var(--brand-soft); color:var(--brand-text); }

/* ---------- stats ---------- */
.stat__v{ color:var(--brand-hover); }
.stat__rule{ background:var(--brand); }
.stat__n{ color:var(--muted); }

/* ---------- trust strip ---------- */
.strip{ background:var(--navy); border-top:1px solid var(--line-soft); }

/* ---------- FAQ ---------- */
.faq details{ border-bottom-color:var(--line-soft); }
.faq summary{ color:var(--white); transition:color var(--dur) var(--ease); }
.faq summary:hover{ color:var(--brand-hover); }
.faq summary::after{ color:var(--brand-text); }
.faq__a{ color:var(--muted-dark); }

/* ---------- form ---------- */
.form h2{ color:var(--white); }
.form__sub{ color:var(--muted-dark); }
.f label{ color:var(--white); }
.f .req{ color:var(--brand-text); }
/* background-color, NOT the `background` shorthand: dry.css positions the
   select's chevron with background-repeat / -position / -size longhands, and the
   shorthand resets all of them — which tiled the arrow across the whole field. */
.f input[type=text],.f input[type=email],.f input[type=tel],.f select{
  background-color:rgba(255,255,255,0.04); border:1px solid var(--border-default);
  color:var(--white); border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease);
}
.f select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%238A8D97' d='M7 10l5 5 5-5z'/></svg>");
}
/* Native option lists render on the OS surface; without this the text is white
   on white in the open dropdown on Windows and Linux. */
.f select option{ background:#12131A; color:#FFFFFF; }
.f input:hover,.f select:hover{ border-color:var(--border-strong); }
.f input:focus,.f select:focus{ outline:2px solid var(--brand); outline-offset:-2px; border-color:var(--brand); }
.f input::placeholder{ color:var(--muted); }
.f .hint{ color:var(--muted); }
.f .err{ color:#E5484D; }
.f.is-invalid input,.f.is-invalid select{ border-color:#E5484D; }
.cb{ color:var(--muted-dark); }
.cb input{ accent-color:var(--brand); }
.cb.is-invalid{ color:#E5484D; }
.form__lock{ color:var(--muted); }
.form__lock svg{ color:var(--brand-text); }
.form__optout{ color:var(--muted); }
.form__legal{ color:var(--muted); }
.form__legal a{ color:var(--brand-hover); }
.form__state h3{ color:var(--white); }
.form__state p{ color:var(--muted-dark); }
.spinner{ border-color:var(--line); border-top-color:var(--brand); }
.ref{
  background:var(--brand-soft); border:1px solid var(--brand); color:var(--brand-text);
  border-radius:var(--r-md);
}

/* ---------- legal footer ---------- */
.legal{ background:transparent; border-top:1px solid var(--line-soft); }
.legal h3{ color:var(--white); }
.legal p{ color:var(--muted); }
.legal p strong{ color:var(--muted-dark); }
.legal__links a{ color:var(--muted-dark); }
.legal__bar{ border-top-color:var(--line-soft); color:var(--muted); }
.lang button{ color:var(--muted); }
.lang button.is-on{ color:var(--white); }

/* ---------- cookie banner ---------- */
.ck{ background:#12131A; border-top:1px solid var(--brand); }
.ck p{ color:var(--muted-dark); }