/* Session Edits site · J-281 "Premiere" look, colourway G9 "Reef" (same tokens as the portal, J-277).
   Source of truth: hq/artifacts/se-interface-options.html (Premiere + G9) and reel-service/portal/public/app.css.
   Shared by every page; index.html adds its section styles inline. To recolour, edit the PALETTE block only. */

/* ================= PALETTE (G9 Reef) ================= */
:root{
  --bg:#03141c;            /* deep ocean */
  --fg:#eefbff;
  --muted:#8aa6b0;         /* 7.0:1 on --bg */
  --c1:#ffb199;            /* peach  */
  --c2:#ff7f6e;            /* coral  */
  --c3:#6fd6cf;            /* lagoon */
  --c1r:255 177 153; --c2r:255 127 110; --c3r:111 214 207;
  --solid:#0a2029;
  --sec:#08202a;
  --on:#03141c;            /* text on the gradient (≥8:1 at every stop) */
  --on-ts:0 1px 0 rgba(255,255,255,.3);
  --eyb:#ff8f7a; --x:#ff9eae; --xr:255 158 174;
}
:root{
  --grad:linear-gradient(100deg,var(--c1) 0%,var(--c2) 50%,var(--c3) 100%);
  --tgrad:linear-gradient(95deg,var(--c1),var(--c2) 55%,var(--c3));
  --card:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.2);
  --inp:rgba(0,0,0,.25);
  --inp-line:rgba(255,255,255,.12);
  --wash:rgba(255,255,255,.06);
  --ring:var(--fg); --ring-gap:var(--bg);
  --sans:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --r:22px; --r-sm:14px; --max:1120px;
  --spring:cubic-bezier(.34,1.56,.64,1); --settle:cubic-bezier(.25,1,.5,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--sans);overflow-x:hidden;position:relative;isolation:isolate;min-height:100vh}
/* aurora on a fixed layer so it never stretches on long pages */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(90% 45% at 0% 0%,rgb(var(--c1r) / .16),transparent 62%),
    radial-gradient(85% 45% at 100% 6%,rgb(var(--c3r) / .18),transparent 62%),
    radial-gradient(70% 35% at 50% 108%,rgb(var(--c2r) / .12),transparent 70%)}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--fg);text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:6px}
::selection{background:rgb(var(--c2r) / .35)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
@media (min-width:600px){.wrap{padding:0 24px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:999px;z-index:200;font-weight:600}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

h1,h2,h3{font-family:var(--sans);font-weight:700;line-height:1;margin:0;letter-spacing:-.04em;text-wrap:balance}
h1 em,h2 em,blockquote em,.grad{font-style:normal;background:var(--tgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
b,strong{font-weight:650}
code{font-family:var(--mono);font-size:.88em}
.eyebrow{font:600 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--eyb);margin:0 0 16px}

/* ================= buttons (same anatomy as the portal) =================
   .btn-primary gradient + top light + two-tone glow · .btn-sec glass with gradient border · .btn-ghost quiet.
   States: hover (brightness + glow bloom, arrow nudges 3px), pressed (scale .97, 90ms), focus (offset-gap ring), disabled. */
.btn{--_bg:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.1));--_fg:var(--fg);--_bd:0 solid transparent;
  --_sh:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.14);
  --_shh:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.24);
  --_sha:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.14);
  appearance:none;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:1px 22px 0;margin:0;border-radius:999px;border:var(--_bd);background:var(--_bg);color:var(--_fg);box-shadow:var(--_sh);
  font:650 15.5px/1.15 var(--sans);letter-spacing:-.01em;text-decoration:none;text-align:center;white-space:nowrap;
  cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  transition:transform .22s var(--spring),box-shadow .2s var(--settle),filter .2s var(--settle),background-color .2s var(--settle),color .2s var(--settle)}
.btn-primary{--_bg:var(--grad);--_fg:var(--on);text-shadow:var(--on-ts);
  --_sh:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.1),0 10px 28px -10px rgb(var(--c2r) / .9),0 2px 6px -2px rgb(var(--c3r) / .6);
  --_shh:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.16),0 16px 40px -8px rgb(var(--c2r) / .95),0 4px 14px -2px rgb(var(--c3r) / .7);
  --_sha:inset 0 2px 6px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.1),0 4px 12px -6px rgb(var(--c2r) / .8)}
.btn-sec{--_bg:linear-gradient(var(--sec),var(--sec)) padding-box,var(--grad) border-box;--_fg:var(--fg);--_bd:1.5px solid transparent;padding:0 20.5px 0;
  --_sh:0 8px 22px -14px rgb(var(--c3r) / .8);--_shh:0 10px 28px -10px rgb(var(--c2r) / .6);--_sha:inset 0 2px 6px rgba(0,0,0,.4)}
.btn-ghost{--_bg:transparent;--_fg:var(--fg);--_sh:inset 0 0 0 1px rgba(255,255,255,.16);--_shh:inset 0 0 0 1px rgba(255,255,255,.26);--_sha:inset 0 0 0 1px rgba(255,255,255,.26)}
.btn:hover{filter:brightness(1.08) saturate(1.1);box-shadow:var(--_shh)}
.btn-ghost:hover{filter:none;background:var(--wash)}
.btn:active{transform:scale(.97);box-shadow:var(--_sha);filter:brightness(.96);transition-duration:.09s,.12s,.12s,.12s,.12s}
.btn:focus-visible{outline:none;box-shadow:var(--_sh),0 0 0 2px var(--ring-gap),0 0 0 4px var(--ring)}
.btn:disabled,.btn[disabled]{opacity:.38;cursor:not-allowed;filter:saturate(.6);box-shadow:var(--_sh);transform:none}
.btn .arr{width:14px;height:14px;flex:none;transition:transform .25s var(--spring)}
.btn:hover .arr{transform:translateX(3px)}
.btn-sm{min-height:40px;padding:1px 16px 0;font-size:14px;gap:6px}
.btn-sm.btn-sec{padding:0 14.5px}
/* hero CTA sheen: one per screen, off under reduced motion */
.shine::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);opacity:0}
@media (prefers-reduced-motion:no-preference){.shine::before{opacity:1;animation:se-sheen 4.2s var(--settle) infinite}}
@keyframes se-sheen{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}

/* ================= legal pages (privacy, terms) ================= */
.legal-top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.legal-top .wrap{max-width:760px;height:60px;display:flex;align-items:center}
.legal-top a{display:flex;align-items:center;gap:9px;text-decoration:none;font:700 17px/1 var(--sans);letter-spacing:-.02em;color:var(--fg)}
.legal-top svg{width:24px;height:24px;flex:none}
.legal{max-width:760px;margin:0 auto;padding:8px 16px 0}
@media (min-width:600px){.legal{padding:16px 24px 0}}
.legal h1{font-size:clamp(38px,8vw,56px);line-height:.98;margin:36px 0 10px}
.legal h2{font-size:clamp(22px,4vw,27px);letter-spacing:-.03em;line-height:1.15;margin:44px 0 10px}
.legal h3{font:650 16px/1.3 var(--sans);letter-spacing:-.01em;color:var(--fg);margin:28px 0 6px}
.legal p,.legal li{color:color-mix(in srgb,var(--fg) 78%,var(--muted))}
.legal li{margin:6px 0}
.legal li::marker{color:var(--c2)}
.legal strong{color:var(--fg)}
.legal .updated,.legal .meta{color:var(--muted);font:400 13px/1.5 var(--mono);margin:4px 0 0}
.legal .todo{color:var(--c1);font-size:14px}
.legal code{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.legal blockquote{margin:18px 0;padding:6px 20px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--c2),inset 0 1px 0 rgba(255,255,255,.06)}
.legal hr{border:0;height:1px;background:var(--line);margin:40px 0}
.legal .tbl{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.legal table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line);color:color-mix(in srgb,var(--fg) 78%,var(--muted))}
.legal th{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);background:rgba(255,255,255,.03)}
.legal tr:last-child td{border-bottom:0}
.legal ul.ticks{list-style:none;padding-left:0}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.legal-nav a{font:600 14px/1 var(--sans);text-decoration:none;color:var(--muted);padding:9px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);transition:background .2s var(--settle),color .2s var(--settle)}
.legal-nav a:hover{color:var(--fg);background:var(--wash)}
.legal .print-btn{margin:10px 0 0}
.legal-foot{border-top:1px solid var(--line);margin-top:64px;padding:32px 0 48px;color:var(--muted);font-size:14px}
.legal-foot .wrap{max-width:760px}
.legal-foot a{color:var(--muted)}
.legal-foot a:hover{color:var(--fg)}

/* reduced motion: no smooth scroll, sheen, press travel or transitions */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.btn:active{transform:none}}

@media print{
  :root{--bg:#fff;--fg:#000;--muted:#333;--line:#999;--card:#fff}
  body::before{display:none}
  body{font-size:12pt;line-height:1.5}
  .legal p,.legal li,.legal th,.legal td{color:#111}
  .legal-top,.legal-foot,.print-btn,.no-print{display:none!important}
  .legal h1{margin-top:0}
}