/* Suroda design system — coded site. Light default + dark variant (DESIGN_TOKENS.md). */
:root{
  --slate:#10161F; --paper:#F4F3EE; --shu:#C63D2F;
  --steel:#8B94A3; --mist:#D8D6CD; --card:#FFFFFF;
  --ink:var(--slate); --ink-muted:var(--steel); --ink-faint:var(--steel);
  --bg:var(--paper); --bg-raised:var(--card); --bg-band:color-mix(in srgb,var(--paper) 72%,var(--mist)); --hairline:var(--mist);
  --accent:var(--shu); --accent-ink:var(--paper); --accent-quiet:color-mix(in srgb,var(--paper) 72%,var(--mist));
  --max:1120px; --gutter:40px;
  --fade:240ms cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){:root{
  --ink:var(--paper); --ink-muted:var(--steel); --ink-faint:var(--steel);
  --bg:var(--slate); --bg-raised:color-mix(in srgb,var(--slate) 94%,var(--paper)); --bg-band:color-mix(in srgb,var(--slate) 96%,var(--paper)); --hairline:var(--steel);
  --accent:var(--shu); --accent-ink:var(--paper); --accent-quiet:color-mix(in srgb,var(--slate) 84%,var(--mist));
}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace}
.eyebrow{font-family:Inter,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel)}
h1,h2,h3{font-family:Manrope,Inter,-apple-system,'Segoe UI',sans-serif;letter-spacing:-.02em;line-height:1.1;font-weight:600}
h1{font-weight:800}
p{color:var(--ink-muted)}

/* header (card-first: wordmark · ticker · Support) */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(10px)}
.hbar{display:flex;align-items:center;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:18px var(--gutter)}
.word{font-family:Manrope,Inter,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:20px;letter-spacing:.30em;text-transform:uppercase}
.hright{display:flex;align-items:center;gap:22px}
.ticker{display:flex;align-items:center;gap:10px;padding-left:22px;border-left:1px solid var(--hairline);
  font-family:Inter,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12px;font-weight:500;letter-spacing:.12em;white-space:nowrap;max-width:420px;overflow:hidden}
.ticker .lbl{color:var(--steel);text-transform:uppercase}
.ticker a{color:var(--ink);transition:opacity var(--fade)}
.btn{display:inline-block;padding:12px 22px;border-radius:9px;background:var(--accent);color:var(--accent-ink);
  font-weight:500;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--hairline);color:var(--ink)}
.btn.lg{padding:17px 32px;font-size:16px;border-radius:10px}

/* hero — beam plate behind the text. Compressed so the first product row is near the fold.
   Scrim is theme-aware: a dark overlay would sink the near-black headline. Legibility first. */
.hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:22px var(--gutter) 26px;gap:16px}
/* svh keeps portrait/mobile honest — vh counts the collapsing URL bar and inflates the hero. */
@supports (height:100svh){.hero{min-height:60svh}}
/* Full-bleed plate. The MASK feathers the photo itself into the page on all four edges, so there
   is no photo boundary at any viewport — don't go back to relying on the overlay alone. */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.45;
  background:url(/assets/suroda-hero-beam.jpg) center center/cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 88% 82% at 50% 50%, var(--slate) 42%, color-mix(in srgb,var(--slate) 35%,transparent) 72%, transparent 100%);
  mask-image:radial-gradient(ellipse 88% 82% at 50% 50%, var(--slate) 42%, color-mix(in srgb,var(--slate) 35%,transparent) 72%, transparent 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 58% 54% at 50% 46%, color-mix(in srgb,var(--bg) 58%,transparent) 0%, transparent 72%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 24%, transparent 76%, var(--bg) 100%)}
@media(max-width:720px){.hero{padding:16px var(--gutter) 20px}
  .hero::before{opacity:.27;background-position:58% center}}
/* Portrait/tall viewports. The plate is a 3:1 image, so `cover` in portrait zooms hard and can
   crop the story out. Bias the crop left to keep the SHOOTER and the BEAM in frame, and widen the
   mask so the feather reaches the narrow edges instead of leaving dead bands. Landscape unchanged. */
@media (orientation:portrait){
  .hero{min-height:56vh;padding:14px var(--gutter) 18px;gap:14px}
  .hero h1{font-size:clamp(28px,4vw,38px)}
  .hero::before{opacity:.33;background-position:9% center;
    -webkit-mask-image:radial-gradient(ellipse 130% 76% at 50% 50%, var(--slate) 46%, color-mix(in srgb,var(--slate) 32%,transparent) 78%, transparent 100%);
    mask-image:radial-gradient(ellipse 130% 76% at 50% 50%, var(--slate) 46%, color-mix(in srgb,var(--slate) 32%,transparent) 78%, transparent 100%)}
  .hero::after{background:
    radial-gradient(ellipse 78% 52% at 50% 46%, color-mix(in srgb,var(--bg) 60%,transparent) 0%, transparent 76%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%)}
}
@supports (height:100svh){@media (orientation:portrait){.hero{min-height:56svh}}}
.hero h1{font-size:clamp(28px,4vw,38px);letter-spacing:-.03em;line-height:1.02}
.lead{font-size:19px;color:var(--ink-muted);max-width:640px}
.motifwrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
#motif{width:min(620px,86vw);height:132px;display:block}
.playword{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  letter-spacing:inherit;line-height:inherit}
.playword:hover{color:var(--accent)}
.playbtn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--bg-raised);border:1px solid var(--hairline);color:var(--ink);
  border-radius:999px;padding:9px 18px 9px 14px;font:inherit;font-size:14px;font-weight:500;
  box-shadow:0 8px 24px color-mix(in srgb,var(--slate) 10%,transparent);transition:transform .15s,box-shadow .15s}
.playbtn:hover{transform:translateY(-1px);box-shadow:0 14px 32px color-mix(in srgb,var(--slate) 16%,transparent)}
.playbtn svg{color:var(--accent)}
.herolink{color:var(--accent);font-weight:500;font-size:15px}

/* video lightbox */
.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.lbback{position:absolute;inset:0;background:color-mix(in srgb,var(--slate) 72%,transparent);backdrop-filter:blur(3px)}
/* Centred card, never fullscreen. Height-capped too, so the X can't be pushed off-screen. */
.lbinner{position:relative;width:min(70vw,1000px,142vh);max-width:94vw}
.lbvideo{width:100%;aspect-ratio:16/9;display:block;border-radius:14px;background:var(--slate);
  box-shadow:0 30px 90px color-mix(in srgb,var(--slate) 55%,transparent)}
/* X lives INSIDE the player, top-right — it must be reachable at every viewport. */
.lbclose{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--slate) 66%,transparent);border:1px solid color-mix(in srgb,var(--paper) 42%,transparent);color:var(--paper);
  font-size:26px;line-height:1;cursor:pointer;backdrop-filter:blur(4px)}
.lbclose:hover{background:color-mix(in srgb,var(--slate) 90%,transparent)}
@media(max-width:720px){.lbinner{width:94vw}}
body.lbopen{overflow:hidden}

/* sections */
section.band{background:var(--bg-band)}
.sec{padding:clamp(70px,10vw,110px) 0}
/* Problem sits between the hero and the product grid — keep it tight so the tiles come up fast. */
.sec.tight{padding:clamp(22px,2.5vw,32px) 0}
.sec .inner{max-width:860px;margin:0 auto;padding:0 var(--gutter)}
.sec h2{font-size:clamp(28px,4vw,38px);margin:14px 0}
.sec .body{font-size:18px;color:var(--ink-muted);max-width:680px;margin-top:6px}
.grid{display:grid;gap:24px;margin-top:34px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--bg-raised);border:1px solid var(--hairline);border-radius:18px;padding:40px;
  box-shadow:0 12px 34px color-mix(in srgb,var(--slate) 5%,transparent)}
.card h3{font-size:20px;margin-bottom:10px} .card p{font-size:15px}
.tier{display:flex;flex-direction:column}
.price{font-size:40px;font-weight:600;letter-spacing:-.02em;margin:6px 0 4px}
.price span{font-size:15px;color:var(--ink-faint);font-weight:400}
a.card{display:flex;flex-direction:column;gap:8px;transition:transform .15s,box-shadow .15s}
a.card:hover{transform:translateY(-2px);box-shadow:0 18px 44px color-mix(in srgb,var(--slate) 9%,transparent)}
/* Products: 2x2, equal-height tiles, 1-col mobile (ADR-011) */
.products{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:34px;align-items:stretch}
.products .card{display:flex;flex-direction:column;height:100%;gap:10px}
.products .status{margin-top:auto;align-self:flex-start;font-family:Inter,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--accent-quiet);
  border-radius:999px;padding:5px 11px}
@media(max-width:720px){.products{grid-template-columns:1fr}}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.tile{background:var(--bg-raised);border:1px solid var(--hairline);border-radius:18px;padding:34px}
.tile .n{font-family:Manrope,Inter,-apple-system,'Segoe UI',sans-serif;font-size:30px;font-weight:600;color:var(--ink)} .tile .l{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-top:8px}
.triad{margin-top:22px;font-weight:500;color:var(--ink);font-size:19px;letter-spacing:-.01em}
.ctarow{display:flex;gap:16px;margin-top:26px;flex-wrap:wrap}
.pagehero{padding:120px var(--gutter) 20px;max-width:var(--max);margin:0 auto}
.pagehero h1{font-size:clamp(36px,6vw,64px);letter-spacing:-.03em;margin:12px 0}
.pagehero .lead{font-size:19px;max-width:640px}

/* draft/legal banner */
.banner{background:var(--accent-quiet);color:var(--ink);border:1px solid var(--hairline);
  border-radius:12px;padding:14px 18px;font-size:14px;margin:20px auto;max-width:820px}

/* form */
.form{display:flex;flex-direction:column;gap:14px;max-width:520px;margin-top:26px}
.form input,.form textarea{background:var(--bg-raised);border:1px solid var(--hairline);border-radius:10px;
  padding:14px 16px;font:inherit;color:var(--ink)}
.form textarea{min-height:130px;resize:vertical}

/* footer */
footer{border-top:1px solid var(--hairline);padding:40px var(--gutter)}
.fbar{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;
  font-size:14px;color:var(--ink-muted);gap:22px;flex-wrap:wrap}
.fbar .links{display:flex;gap:22px;flex-wrap:wrap}
.fbar a:hover{color:var(--ink)}

/* story */
.story .prose{max-width:680px;margin:0 auto;padding:0 var(--gutter);font-size:18px}
.story .prose p{margin:20px 0}
.videoframe{max-width:var(--max);margin:34px auto;padding:0 var(--gutter)}
.videoframe .ph{aspect-ratio:16/9;background:var(--bg-band);border:1px solid var(--hairline);border-radius:16px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:14px}
#supportpill{position:fixed;right:28px;bottom:28px;z-index:100;opacity:0;transform:translateY(12px);
  transition:opacity var(--fade),transform var(--fade);pointer-events:none}
#supportpill.show{opacity:1;transform:none;pointer-events:auto}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:860px){.g3,.g4,.tiles{grid-template-columns:1fr 1fr}.ticker{display:none}}
@media(max-width:560px){.g2,.g3,.g4,.tiles{grid-template-columns:1fr}
  #supportpill{left:0;right:0;bottom:0;border-radius:0;text-align:center}}
.word{display:inline-flex;align-items:center;gap:9px}
.wm-logo{display:block;width:30px;height:30px;flex:none}
.word .tm{font-size:.5em;font-weight:600;letter-spacing:0;vertical-align:super;margin-left:1px}
.hero-mark{display:block;width:72px;height:72px;margin:0 0 18px}
/* Hero layout fix: wordmark under H1 + tagline relocated to CTA band with scrim */
.hero-wordmark{font-family:Manrope,Inter,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:clamp(24px,4.5vw,40px);letter-spacing:.30em;text-transform:uppercase;color:var(--paper);text-align:center;margin:4px 0 0;line-height:1;text-shadow:0 2px 20px rgba(11,12,14,.6)}
.hero-wordmark .tm{font-size:.4em;font-weight:600;letter-spacing:0;vertical-align:super;margin-left:2px}
.motifwrap{gap:12px}
.motifwrap .hero-lead{order:2;color:var(--paper);max-width:600px;text-align:center;margin:0;padding:12px 18px;border-radius:8px;background:color-mix(in srgb,var(--slate) 55%,transparent);text-shadow:0 1px 10px rgba(11,12,14,.85)}
.motifwrap canvas{order:1}
.motifwrap .playbtn{order:3}
/* Hero reorder: horizontal [icon + SURODA(TM)] lockup at top; tagline scrim as direct hero child */
.hero-lockup{display:inline-flex;align-items:center;gap:14px;text-decoration:none;margin:0 0 4px}
.hero-lockup .hlk-mark{display:block;width:56px;height:56px;flex:none}
.hero-lockup .hlk-word{font-family:Manrope,Inter,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:clamp(26px,4.6vw,42px);letter-spacing:.30em;text-transform:uppercase;color:var(--paper);line-height:1;text-shadow:0 2px 20px rgba(11,12,14,.6)}
.hero-lockup .hlk-word .tm{font-size:.4em;font-weight:600;letter-spacing:0;vertical-align:super;margin-left:2px}
.hero .hero-lead{color:var(--paper);max-width:600px;text-align:center;margin:0 auto;padding:12px 18px;border-radius:8px;background:color-mix(in srgb,var(--slate) 55%,transparent);text-shadow:0 1px 10px rgba(11,12,14,.85)}
/* HERO LOCKUP — ruling: the lockup sits directly above the beam, anchored to it.
   Supersedes fbf0ab1 / 2ff3daa / 47fce71.

   Why this is proportional and not another px/vh nudge: the plate is a 3:1 photo
   drawn `cover`, so it always scales to the hero's HEIGHT and the beam lands at
   ~52% of the hero at EVERY viewport. But the hero's height is driven by its own
   content, not by min-height — measured at 64/68/64/73/83vh across 1440..360. So
   any offset expressed in vh or px drifts against the beam as the content rewraps
   (that drift is what produced the earlier placements: the gap ran 39px at 1440
   and 118px at 360).

   Landscape is exact: the hero there is a true 60vh (the copy fits inside it), so
   a vh offset tracks the beam and the lockup lands ~40px above it at 1280–1440.

   Portrait cannot be made exact by offset alone. The hero there is sized by its
   own copy, and the copy below the beam needs more room than the 48% of the hero
   left under it, so the beam drifts with however the text rewraps. A px offset is
   used because that drift follows content height, not viewport height — vh made
   it worse (the tallest phone needed the SMALLEST offset). Measured gap is now
   39/51/52/76/91px across 1440/1280/430/390/360, down from 39/51/59/92/118.

   A flex-basis:52% split was tried and does NOT work: percentage flex-basis
   resolves to auto against an indefinite height, so the block collapsed to its
   content and the lockup jumped back to the top. Making it exact needs a definite
   hero height, which on a phone forces a hero of ~110vh. Don't re-attempt without
   a ruling on that trade-off. */
.hero{justify-content:flex-start}
.hero-lockup{margin-top:calc(29vh - 78px)}
.hero h1{margin-top:calc(4vh - 16px)}
@media (orientation:portrait){
  .hero-lockup{margin-top:170px}
  .hero h1{margin-top:0}
}

/* header nav: Memberships · Login · Contact.
   Memberships and Login are secondary/outline buttons — same pill geometry as
   Contact (they share .btn), transparent fill, 1px border. Contact stays solid.
   Colour comes from --ink/--hairline, NOT a literal white: the header sits on
   --bg, so hardcoding white would make these invisible in light mode. In dark
   mode --ink resolves to paper and they read white as intended. */
.hright>.btn.ghost{border-width:1px;border-style:solid}
.hright>.btn.ghost:hover{border-color:var(--ink-muted);background:color-mix(in srgb,var(--ink) 8%,transparent)}
/* nav items hold their size; the ticker absorbs any shortfall (it already clips) */
.hright>.btn{flex:none}
@media(max-width:860px){.hright{gap:14px}}
/* narrow: wordmark on its own row, the three buttons centred beneath it */
@media(max-width:560px){
  .hbar{flex-wrap:wrap;justify-content:center;gap:10px;padding:14px 18px}
  .hright{width:100%;justify-content:center;gap:10px}
  .hright>.btn{padding:10px 16px;font-size:14px}
}
@media(max-width:400px){
  .hright{gap:8px}
  .hright>.btn{padding:9px 12px;font-size:13px}
}
/* the ticker now shares the bar with three nav items: give it less room, let it
   truncate with an ellipsis rather than clipping mid-word, and retire it earlier */
.ticker{max-width:340px}
.ticker a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1040px){.ticker{display:none}}

/* Membership storefront — tier cards. Prices public; brand red (--shu via
   --accent) is reserved for the live CTAs only. Refines the existing card
   system, does not redesign it. */
.tier-grid {
  display: grid;
  /* 2x2 at desktop: San + Kai top row, Ronin + Sensei bottom row (source order
     preserved). Width is capped by the parent .sec .inner (max-width 860px), so
     cards settle at ~380px and never stretch on wide (1400px+) viewports. */
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 44px;
  align-items: stretch;
}
@media (max-width: 560px) { .tier-grid { grid-template-columns: 1fr; } }

.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 30px 26px;
}
.tier-eyebrow {
  font-family: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel);
}
.tier-name {
  font-family: Manrope, Inter, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink);
  margin: 7px 0 18px;
}
.tier-price {
  font-family: Manrope, Inter, sans-serif;
  font-size: 46px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: var(--ink);
}
.tier-price span {
  font-size: 16px; font-weight: 500; letter-spacing: 0;
  color: var(--ink-muted); margin-left: 3px;
}
.tier-annual { margin-top: 8px; font-size: 13px; color: var(--ink-faint); }
.tier-body { margin: 20px 0 26px; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.tier-cta { margin-top: auto; }
a.tier-cta.btn { display: block; text-align: center; padding: 13px 22px; }

/* Featured — Sensei. Distinguished WITHOUT red (red is reserved for CTAs): a
   brighter border, a subtle lift, and a light "Full spectrum" badge. */
.tier-card.is-featured {
  border-color: color-mix(in srgb, var(--ink) 34%, var(--hairline));
  background: color-mix(in srgb, var(--bg-raised) 86%, var(--ink));
  box-shadow: 0 16px 48px color-mix(in srgb, var(--slate) 42%, transparent);
}
.tier-badge {
  position: absolute; top: -11px; left: 24px;
  font-family: Inter, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bg); background: var(--ink);
  padding: 5px 11px; border-radius: 999px;
}

/* Future — Ronin. Present but clearly not yet: dashed border, muted figures,
   a "Coming soon" pill, no CTA. */
.tier-card.is-soon { background: transparent; border-style: dashed; }
.tier-card.is-soon .tier-name,
.tier-card.is-soon .tier-price { color: var(--ink-muted); }
.tier-soon {
  margin-top: auto; align-self: flex-start;
  font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--steel);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 9px 16px;
}

/* Memberships page ONLY — every button on this page is black, no red anywhere.
   Scoped to the .tier-* classes, which exist solely on memberships.html, so the
   shared .btn / .btn.ghost system (header, footer, and every other page) is
   untouched. Background goes black; the border + text treatment stay from the
   existing button system (hairline border, paper text on the CTAs; the pill
   keeps its steel text). */
a.tier-cta.btn {
  background: #000;
  border-color: var(--hairline);
}
a.tier-cta.btn:hover { background: #000; }
.tier-card.is-soon .tier-soon { background: #000; }