/* ═══════════════════════════════════════════════════════════════════════════
   RAVNS — SITE STYLE GUIDE
   One system, shared by every page. Tokens and conventions come from the iOS
   app, so the site and the product look like the same thing.

   RULES (do not break these when adding pages):
   1. Color        — only the tokens in :root. Mint + green are the accents.
                     There is no cyan. Semantic amber/red are for state only.
   2. Type         — three roles: --display (headings, 800, tight tracking),
                     --sans (body), --mono (tech labels, uppercase, tracked).
   3. Tech label   — the app's ModuleLabel: .k / .pk. Mono, ~11px, 600,
                     .14em tracking, uppercase. Never set a label in sans.
   4. Tiles        — .card is the app tile: flat left edge, 3px accent stripe,
                     rounded right only. Use .card.green for the green stripe.
                     Boxed all-round cards are not part of the system.
   5. Layout       — .wrap is the 720px column. Sections are separated by
                     .phase headers, never by ad-hoc margins.
   7. Accessibility — every interactive element shows a :focus-visible ring,
                     nav/footer links meet the 44px target, --faint is for
                     hairlines and never for text (2.94:1), and inline links
                     in prose are underlined. Verified WCAG 2.1 AA.
   6. Glow is BEHIND — the ambient .glow layer is decoration only. Every
                     container that holds text (.hero, .doc, .dochead, .wrap,
                     footer) is position:relative + z-index:1 so type always
                     paints above it and stays legible. Never leave a text
                     container static: the fixed glow would wash over it.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Surfaces + ink (from the app) */
  --bg:#0E0F11; --surface:#1A1B1E; --surface2:#232427; --line:#2A2C30;
  --ink:#F4F5F4; --text:#F4F5F4; --muted:#8A8E95; --faint:#5A5E65;
  /* Accents — mint and green only */
  --mint:#BEEDF0; --green:#6CC2B3;
  /* Semantic state (never used as an accent) */
  --yellow:#F2D484; --orange:#F2B27A; --red:#F0917B;
  /* AI surface */
  --ai1:#1F2A27; --ai-stroke:#28403A;
  --radius:16px;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Menlo","Cascadia Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark}
body{
  font-family:var(--sans); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; line-height:1.55; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* ─ Focus + skip link — rule 7 ─ */
/* :focus guarantees a ring for keyboard users even where :focus-visible
   heuristics differ; :focus:not(:focus-visible) removes it for mouse clicks. */
:focus{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
.skip-link{position:fixed;left:-9999px;top:0;z-index:200;background:var(--mint);color:#000;
  font-weight:600;font-size:14px;padding:12px 18px;border-radius:0 0 12px 0}
.skip-link:focus{left:0}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;text-wrap:balance}

/* ─ Tech label (app ModuleLabel) — rule 3 ─ */
.k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.k.green{color:var(--green)}

/* Ambient glow — soft radial tints, NO filter:blur (the old filter:blur(110px) hung mobile Safari).
   Currently OFF for the flat all-black look. To bring the glow back, drop `display:none` below —
   the radial-gradient rules are cheap (zero paint cost) and safe to re-enable. */
.glow{display:none;position:fixed;border-radius:50%;z-index:0;pointer-events:none}
.glow-1{width:680px;height:680px;background:radial-gradient(circle,#265A50 0%,rgba(38,90,80,0) 66%);opacity:.5;top:-200px;left:50%;transform:translateX(-60%)}
.glow-2{width:560px;height:560px;background:radial-gradient(circle,#204A57 0%,rgba(32,74,87,0) 66%);opacity:.4;top:160px;right:-180px}

/* Page-top photo on every page beyond the index (2026-07-31): the same hero image, sunk roughly
   TWICE as deep (~.82/.89 vs the hero's .62/.74) so it's atmosphere behind the header, never
   competing with content. Pixel stops, not %, so long pages hit solid --bg fast and stay flat. */
/* The photo lives in a FIXED-HEIGHT band painted by body::before — not on body itself. `cover`
   needs a bounded box: on body it would scale to the whole document, so a long page rendered the
   image at a wildly different size than a short one. A fixed band gives every page the home hero's
   original `center 35% / cover` crop, exactly. The gradient rides in the same layer and lands on
   solid --bg at the band's bottom, so the page continues seamlessly flat. */
body.pagebg{position:relative;
  --tint-top:rgba(16,21,19,.82); --tint-mid:rgba(14,15,17,.89);   /* deep: atmosphere behind a header */
}
body.pagebg::before{
  content:"";position:absolute;top:0;left:0;right:0;height:900px;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg, var(--tint-top) 0%, var(--tint-mid) 55%, var(--bg) 100%),
    url("hero-runners.jpg") center 35% / cover no-repeat var(--bg);
}
/* Home shows more of the photo — SAME geometry, lighter tint only. */
body.pagebg.home{ --tint-top:rgba(16,21,19,.62); --tint-mid:rgba(14,15,17,.74) }

/* ─ Glass nav — identical on every page ─ */
.nav-wrap{position:fixed;top:26px;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:0 16px}
.nav{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:8px;width:100%;max-width:940px;
  padding:8px 8px 8px 66px;   /* room for the left logo (sized to the bar height) */
}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(20,21,24,.92);   /* fallback: near-solid where backdrop-filter is unsupported */
  border-radius:100px;
}
/* Frosted nav (2026-07-31): the uxsherpa.com treatment — bg at ~80% + blur(12px). History: a
   frosted nav hung mobile Safari on 2026-07-30, but that nav ALSO carried a -webkit-mask (the
   notch) — mask + backdrop-filter on one element is a known Safari killer — stacked on huge
   blurred glow divs. Both are gone now; this is a lone small-area blur. If the mobile hang ever
   returns, DELETE THIS BLOCK first — the near-solid fallback above is the complete look. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .nav::before{background:rgba(20,21,24,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.02em;font-size:16px;padding:9px 4px}
.brand img{width:26px;height:26px}
/* Brand logo the exact height of the nav bar, flush at the left. font-size:0 drops the "Ravns" wordmark. */
.nav .brand{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;margin:0;padding:0;gap:0;font-size:0;z-index:2}
.nav .brand img{height:100%;width:auto}
.nav-links{display:flex;gap:4px;margin-left:14px}
/* No highlight pill (Ryan, 2026-07-31): the active page + hover speak through TEXT COLOR alone —
   mint vs muted — no background chip behind the link. */
.nav-links a{color:var(--muted);font-size:14px;font-weight:500;padding:13px 12px;border-radius:100px;transition:.15s}
.nav-links a:hover{color:var(--mint)}
.nav-links a.active{color:var(--mint)}
.nav a.nav-cta{margin-left:auto;background:var(--mint);color:#000;font-weight:600;font-size:14px;padding:9px 18px;border-radius:100px;transition:.15s;white-space:nowrap}
.nav a.nav-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
/* Mobile nav toggle (hamburger) — injected by nav.js, hidden on desktop, pinned top-right on mobile.
   Three bars morph into an X when open. No hover/tap chrome — the icon's own motion is the feedback;
   the focus ring stays but only ever shows for keyboard users (:focus-visible never fires on tap). */
.nav-toggle{display:none;position:relative;width:44px;height:44px;margin-left:auto;
  background:transparent;border:0;color:var(--text);cursor:pointer;
  -webkit-tap-highlight-color:transparent;outline:none}
.nav-toggle:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:12px}
.nav-toggle .bar{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s ease}
.nav-toggle .bar:nth-child(1){top:15px}
.nav-toggle .bar:nth-child(2){top:21px}
.nav-toggle .bar:nth-child(3){top:27px}
.nav[data-open="true"] .nav-toggle .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav[data-open="true"] .nav-toggle .bar:nth-child(2){opacity:0;transform:scaleX(.4)}
.nav[data-open="true"] .nav-toggle .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ─ Layout — rule 5 ─ */
.wrap{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:0 22px}
.wrap.wide{max-width:940px}
section{position:relative;z-index:1}

/* ─ Section header (.phase) — the only way to open a section ─ */
.phase{margin:44px 0 16px}
.phase .pk{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  display:flex;align-items:center;gap:9px;color:var(--mint)}
.phase .pk::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.phase.cool .pk{color:var(--green)}
.phase h2{font-size:clamp(22px,4.5vw,31px);margin:8px 0 0}
.phase h2 .m{color:var(--mint)} .phase h2 .g{color:var(--green)}
.phase .sub{color:var(--text);font-size:15px;margin-top:6px;max-width:52ch}

/* ─ Hero ─ */
/* Hero photo (2026-07-31, the K2 treatment): runners at sunrise sunk under a heavy palette tint —
   ~80% ink at the top deepening to SOLID --bg at the bottom, so the image reads as texture, the
   headline stays AA-legible, and the page below continues seamlessly flat. The motion blur is in
   the PHOTOGRAPH — no CSS blur (design law). Tint carries a whisper of the brand's dark green. */
.hero{text-align:center;padding:170px 22px 90px}   /* photo lives on body.pagebg.home — one geometry site-wide */
.hero .mark{width:160px;height:160px;margin:0 auto 30px}
/* No drop-shadow: on the transparent circular PNG the filter rendered a square halo until the image
   finished decoding (a browser quirk — it vanished on the cached repaint after navigating). Clean on
   black is the look anyway. */
h1{font-size:clamp(38px,6vw,64px);line-height:1.05;letter-spacing:-.03em}
h1 .fade{color:var(--mint)}
/* Small text that sits INSIDE the photo band reads white, not muted grey: --muted is tuned for
   contrast on flat --bg, and over the image it loses legibility (Ryan, 2026-07-31). */
.lede{max-width:620px;margin:22px auto 0;color:var(--text);font-size:clamp(16px,2.1vw,19px)}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.btn{font-weight:600;font-size:15px;padding:14px 26px;border-radius:100px;transition:.15s;border:1px solid transparent}
.btn-primary{background:var(--mint);color:#000}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--mint);color:var(--mint)}
.note{margin-top:18px;font-size:13px;color:var(--text)}

/* ─ Tile — rule 4: flat left, 3px stripe, rounded right only ─ */
.card{background:var(--surface);border-radius:0 20px 20px 0;border-left:3px solid var(--mint);
  padding:18px 20px;position:relative}
.card.green{border-left-color:var(--green)}
.card.ai{background:linear-gradient(135deg,var(--ai1),var(--surface));
  border-top:1px solid var(--ai-stroke);border-right:1px solid var(--ai-stroke);border-bottom:1px solid var(--ai-stroke)}
.card h3{font-size:19px;margin:8px 0 6px}
.card p{color:var(--text);font-size:15px}

/* ─ Text layers — rule 6: always above the decorative .glow ─ */
.hero,.doc,.dochead,footer{position:relative;z-index:1}

/* ─ Legal / doc pages ─ */
.doc{max-width:720px;margin:0 auto;padding:150px 22px 90px}
.doc h1,.dochead h1{font-size:clamp(30px,5vw,44px);text-align:left;margin-bottom:8px;color:var(--mint)}
.doc .updated{font-family:var(--mono);color:var(--text);font-size:12px;margin-bottom:36px}
.doc h2{font-size:20px;font-weight:700;margin:34px 0 10px}
.doc p,.doc li{color:var(--text);font-size:16px;margin-bottom:12px}
/* SITE TEXT CONVENTION (Ryan, 2026-07-31): prose is WHITE (grey lost legibility once the photo
   band went in), and the emphasis inside it — the words that used to just go white/bold — is MINT.
   --muted survives only for chrome: inactive nav links and genuinely secondary labels. */
.doc p b,.doc li b,.doc p strong,.doc li strong{color:var(--mint);font-weight:600}
.doc ul{padding-left:22px}
.doc p a,.doc li a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}

/* ─ Footer ─ */
footer{border-top:1px solid var(--line);padding:34px 22px 60px}
.foot{max-width:940px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--text);font-size:14px}
.foot .brand{font-size:15px;color:var(--text)}
.foot .sp{margin-left:auto}
.foot a{color:var(--text);padding:11px 0;display:inline-block}.foot a:hover{color:var(--mint)}
.foot .raven{width:100%;color:var(--text);font-size:13px;margin-top:14px}

@media(max-width:720px){
  /* No-JS fallback: the link row wraps to a second line (still reachable). With JS (`.js`), the
     hamburger takes over — logo left, toggle top-right, links + Contact drop down on tap. */
  .nav{flex-wrap:wrap;border-radius:24px;padding:8px 10px}
  .nav::before{-webkit-mask:none;mask:none;border-radius:24px}
  .nav .brand{position:static;transform:none;z-index:auto}
  .nav .brand img{width:34px;height:34px}
  .nav-links{order:3;width:100%;justify-content:center;margin-left:0;flex-wrap:wrap;gap:2px}
  .nav-links a{padding:12px 10px}

  /* Enhanced (JS present): Apple-style top-right hamburger + drop-down menu. The menu ANIMATES —
     it slides in from the top while fading (translateY + opacity), and the pill grows with it
     (max-height collapse; display:none can't transition). visibility rides the transition so the
     hidden links are unreachable by keyboard when closed. */
  /* Zero the ROW gap: the collapsed link/CTA rows are 0-height, but flex still inserts the 8px
     gap per wrapped line — the closed pill sat 16px taller than the display:none era. The open
     state's spacing moves into the animated padding/margin below instead. */
  .js .nav{row-gap:0}
  /* Logo at FULL bar height, flush left — the desktop treatment. Anchored to the closed bar's
     60px (44px toggle row + 8px padding each side), NOT bottom:0, so it stays put — never
     stretches — when the menu grows the pill. Row 1 holds only the toggle (margin-left:auto),
     so the absolute logo overlaps nothing and the links below still center on the pill. */
  .js .nav .brand{position:absolute;left:0;top:0;height:60px;z-index:2}
  .js .nav .brand img{width:auto;height:100%}
  .js .nav-toggle{display:inline-block}
  .js .nav-links{display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    justify-content:flex-start;text-align:center;gap:2px;
    max-height:0;overflow:hidden;opacity:0;transform:translateY(-14px);
    visibility:hidden;pointer-events:none;
    transition:max-height .34s cubic-bezier(.22,1,.36,1),opacity .26s ease,
      transform .34s cubic-bezier(.22,1,.36,1),visibility .34s,padding-top .34s ease}
  .js .nav[data-open="true"] .nav-links{max-height:420px;opacity:1;transform:none;
    visibility:visible;pointer-events:auto;padding-top:10px}
  .js .nav a.nav-cta{order:4;width:100%;text-align:center;
    max-height:0;overflow:hidden;opacity:0;transform:translateY(-14px);
    visibility:hidden;pointer-events:none;margin:0;padding-top:0;padding-bottom:0;
    transition:max-height .34s cubic-bezier(.22,1,.36,1),opacity .26s ease,
      transform .34s cubic-bezier(.22,1,.36,1),visibility .34s,margin .34s ease,padding .34s ease}
  .js .nav[data-open="true"] a.nav-cta{max-height:52px;opacity:1;transform:none;
    visibility:visible;pointer-events:auto;margin:8px 0 2px;padding-top:9px;padding-bottom:9px}

  /* Tighter top-padding: the hamburger nav is one short row, not the old wrapped two rows. */
  .hero{padding:128px 22px 70px}
  .doc,.dochead{padding-top:128px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}