/* ===== Application shell (from Workspace) ===== */

/* ===== tokens (shared with the marketing site; extract to assets/css/tokens.css later) ===== */
:root{ color-scheme:dark;
  --bg-900:#070a0f; --bg-800:#0c1219; --bg-700:#111a24; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16);
  --text:#fff; --text-muted:rgba(255,255,255,.64); --text-faint:rgba(255,255,255,.42);
  --teal:#2fd4c4; --blue:#3b82f6; --red:#f87171; --grad:linear-gradient(90deg,var(--teal),var(--blue));
  --r-sm:8px; --r:12px; --r-lg:16px; --sidebar:240px; --top:60px; }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{ background:var(--bg-900); color:var(--text); font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em; color:#bfe9ff; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:#fff; color:#000; padding:10px 14px; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:6px; }
.ic{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ic-lg{ width:28px; height:28px; fill:none; stroke:url(#g); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ===== shell ===== */
.topbar{ position:sticky; top:0; z-index:20; height:var(--top); display:flex; align-items:center; gap:16px; padding:0 20px;
  background:rgba(7,10,15,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; font-size:16px; min-width:calc(var(--sidebar) - 20px); }
.brand img{ width:26px; height:26px; }
.brand small{ font-weight:600; color:var(--text-faint); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
/* unused */ .main-link-unused{ font-size:13px; font-weight:600; color:var(--text-muted); text-decoration:none; white-space:nowrap; }
.main-link:hover{ color:var(--text); }
.top-search{ flex:1; max-width:460px; }
.top-actions{ margin-left:auto; display:flex; gap:6px; }
.icon-btn{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--text-muted); cursor:pointer; }
.icon-btn[aria-disabled="true"], .icon-btn:disabled{ cursor:not-allowed; opacity:.6; }
.menu-btn{ display:inline-flex; }
/* collapsible sidebar (desktop) */

.shell-collapsed{ --sidebar:72px; }
.shell-collapsed .brand{ min-width:0; }
.shell-collapsed .sidebar{ padding-left:10px; padding-right:10px; overflow-x:hidden; }
.shell-collapsed .nav-group{ height:1px; margin:10px 8px; overflow:hidden; color:transparent; background:var(--line); }
.shell-collapsed .nav-item{ justify-content:center; padding:10px 0; }
.shell-collapsed .nav-item > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.shell-collapsed .nav-item em{ display:none; }
.bp-banner{ display:flex; gap:10px; align-items:center; padding:8px 20px; font-size:12.5px; color:var(--text-muted); border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(47,212,196,.08), rgba(59,130,246,.06)); }
.bp-banner b{ color:var(--text); }
.layout{ display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); min-height:calc(100vh - var(--top)); }
.sidebar{ position:sticky; top:var(--top); align-self:start; height:calc(100vh - var(--top)); overflow:auto; padding:14px 12px 16px; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.sidebar ul{ list-style:none; margin:0 0 6px; padding:0; }
.nav-group{ margin:14px 10px 6px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.nav-item{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px; text-decoration:none; color:var(--text-muted); font-weight:600; }
.nav-item:hover{ background:rgba(255,255,255,.05); color:var(--text); }
.nav-item[aria-current="page"]{ background:rgba(47,212,196,.10); color:var(--text); box-shadow:inset 2px 0 0 var(--teal); }
.nav-item[aria-current="page"] .ic{ color:var(--teal); }
.nav-item.is-soon{ opacity:.45; cursor:default; }
.nav-item em{ margin-left:auto; font-style:normal; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; border:1px solid var(--line-2); color:var(--text-faint); }
.nav-bottom{ margin-top:auto; padding-top:4px; border-top:1px solid var(--line); }
.nav-exit{ color:var(--text-faint); font-size:13px; }
main{ width:100%; min-width:0; }
.view{ padding:28px clamp(18px,3vw,40px) 60px; max-width:1180px; }
#view-home{ padding:0; max-width:none; }
#view-home{ container-type:inline-size; container-name:home; }
.ws-band{ border-top:1px solid var(--line); }
.ws-home{ max-width:1240px; margin:0 auto; padding:56px 28px 8px; }
@container home (max-width: 767px){ .ws-home{ padding-left:20px; padding-right:20px; } }
.ws-home .page-head{ margin-top:8px; }

/* ===== components ===== */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
h1{ font-size:26px; line-height:1.2; margin:0; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
h1:focus{ outline:none; }
.sub{ margin:6px 0 0; color:var(--text-muted); }
h2{ font-size:15px; margin:0; font-weight:800; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--text); font:inherit; font-weight:700; cursor:not-allowed; }
.btn-primary{ background:var(--grad); color:#04121a; border-color:transparent; opacity:.55; }
.btn-ghost{ opacity:.7; }
.btn-danger{ color:var(--red); border-color:rgba(248,113,113,.35); opacity:.7; }
.panel{ background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; margin-bottom:16px; }
.panel-flush{ padding:0; overflow:hidden; }
.panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.panel-head .ic{ color:var(--teal); }
.panel-head .badge, .panel-head .muted-tag, .panel-decision .panel-head .ex{ margin-left:auto; }
.panel-head.pad{ padding:18px 18px 0; }
.panel-decision{ border-color:rgba(255,255,255,.22); background:linear-gradient(180deg, rgba(59,130,246,.07), rgba(255,255,255,.012)); }
.muted, .muted-tag{ color:var(--text-muted); }
.muted-tag{ font-size:12px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.grid-3 .panel{ margin-bottom:0; }
.grid-3{ margin-bottom:16px; }
.grid-2{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; margin-bottom:16px; }
.grid-2 .panel{ margin-bottom:0; }
.empty{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:6px 2px; }
.empty-title{ margin:6px 0 0; font-weight:700; }
.empty-text{ margin:0; color:var(--text-muted); line-height:1.55; max-width:62ch; }
.ex{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:999px; border:1px dashed var(--line-2); color:var(--text-faint); vertical-align:middle; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font:700 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.02em; border:1px solid; white-space:nowrap; }
.badge i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.b-ready{ color:var(--teal); border-color:rgba(47,212,196,.4); background:rgba(47,212,196,.08); }
.b-decision{ color:#fff; border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.08); }
.b-failed{ color:var(--red); border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.07); }
.b-submitting{ color:#93c5fd; border-color:rgba(59,130,246,.45); background:rgba(59,130,246,.08); }
.b-unknown{ color:var(--text-muted); border-color:var(--line-2); border-style:dashed; }
.note{ display:block; position:relative; padding-left:40px !important; color:var(--text-muted); font-size:13px; line-height:1.55; margin:0 0 16px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--line); background:rgba(255,255,255,.02); }
.note .ic{ color:var(--text-faint); position:absolute; left:14px; top:13px; }
.toolbar{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.search{ display:flex; align-items:center; gap:8px; flex:1; min-width:180px; padding:0 12px; height:40px; border-radius:10px; border:1px solid var(--line); color:var(--text-faint); }
.search input{ flex:1; min-width:0; background:transparent; border:0; color:var(--text); font:inherit; outline:0; }
.search input:disabled{ cursor:not-allowed; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chip{ padding:7px 12px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--text-muted); font:700 11.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; cursor:pointer; }
.chip[aria-pressed="true"]{ background:rgba(47,212,196,.12); color:var(--text); border-color:rgba(47,212,196,.5); }
.table-wrap{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; }
.table th{ text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); font-weight:800; padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
.table td{ padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tr:last-child td{ border-bottom:0; }
.table tr[hidden]{ display:none; }
.rowlink{ font-weight:700; color:var(--text); text-decoration:none; }
.rowlink:hover{ text-decoration:underline; }
.pipe{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; counter-reset:s; }
.pipe li{ position:relative; padding:14px; border:1px solid var(--line); border-radius:var(--r); background:rgba(7,10,15,.5); display:flex; flex-direction:column; gap:4px; }
.pipe li:not(:last-child)::after{ content:""; position:absolute; right:-10px; top:50%; width:10px; height:1.5px; background:var(--grad); }
.pipe-ic .ic{ color:var(--teal); width:22px; height:22px; margin-bottom:4px; }
.pipe small{ color:var(--text-muted); line-height:1.45; }
.pcard{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-800); }
.pcard-cover{ height:110px; }
.pcard-body{ padding:14px 16px; }
.pcard-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pcard h2{ margin:0; font-size:15px; }
.pcard .muted{ margin:6px 0 0; font-size:13px; }
.pcard-new{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:176px; border-style:dashed; color:var(--text-muted); background:transparent; }
.pcard-new p{ margin:0; font-weight:700; color:var(--text); }
.pcard-new small{ color:var(--text-faint); }
.back{ display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); text-decoration:none; font-weight:600; margin-bottom:12px; }
.back:hover{ color:var(--text); }
.track{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.track li{ padding:12px; border-radius:var(--r); border:1px solid var(--line); display:flex; flex-direction:column; gap:8px; position:relative; }
.track li::before{ content:""; height:3px; border-radius:2px; background:var(--line-2); }
.track .t-done::before{ background:var(--grad); }
.track .t-warn::before{ background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px); opacity:.7; }
.track span{ color:var(--text-muted); font-size:12.5px; }
.lead{ margin:0 0 14px; line-height:1.6; max-width:70ch; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.op-note{ margin:0 0 14px; font-size:13px; color:var(--text-muted); }
.facts{ margin:0; padding-left:18px; color:var(--text-muted); line-height:1.7; }
.facts b{ color:var(--text); }
.legend{ padding:14px 18px 16px; border-top:1px solid var(--line); display:grid; gap:8px; font-size:13px; color:var(--text-muted); line-height:1.5; }
.legend p{ margin:0; }
.legend b{ color:var(--text); }
.assets{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.assets li{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--r); }
.assets li .ex{ margin-left:auto; }
.assets small{ display:block; color:var(--text-muted); margin-top:2px; }
.a-ic{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(47,212,196,.08); color:var(--teal); }

.ex-future{ border-style:solid; color:#93c5fd; border-color:rgba(59,130,246,.4); }
.future-box{ border-style:dashed; }
.ccover{ display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); }
.ccover .ic{ width:30px; height:30px; }
.table td .ic{ vertical-align:-4px; margin-right:6px; color:var(--teal); }
.skel{ border-radius:var(--r); margin:4px 0 12px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 18px, rgba(255,255,255,.02) 18px 36px); border:1px dashed var(--line-2); }
.doc{ display:flex; gap:12px; padding:16px; border:1px solid var(--line); border-radius:var(--r-lg); background:rgba(255,255,255,.02); }
.doc h2{ margin:0 0 4px; font-size:15px; }
.doc .muted{ margin:0 0 8px; font-size:13px; }
.qlist{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px; }
.qlist li{ display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--r); }
.qlist small{ color:var(--text-faint); white-space:nowrap; }
.tabs{ display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tabs [role=tab]{ padding:10px 14px; border:0; background:transparent; color:var(--text-muted); font:inherit; font-weight:700; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.tabs [role=tab][aria-selected=true]{ color:var(--text); border-bottom-color:var(--teal); }
.fields{ display:grid; gap:10px; }
.field{ display:grid; grid-template-columns:200px 1fr auto; gap:6px 16px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:var(--r); }
.f-label{ color:var(--text-muted); font-weight:600; }
.f-value{ font-weight:700; }
.field small{ grid-column:2; color:var(--text-faint); }
.field .ex{ grid-column:3; grid-row:1; }
.integ{ display:grid; gap:10px; }
.int{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--r); }
.int > .badge, .int > .ex{ margin-left:auto; }
.int small{ display:block; color:var(--text-muted); margin-top:2px; }
@media (max-width:600px){ .field{ grid-template-columns:1fr auto; } .field small{ grid-column:1 / -1; } .field .f-value{ grid-column:1; } .field .ex{ grid-column:2; grid-row:1; } .qlist li{ flex-direction:column; gap:2px; } }
/* ===== responsive ===== */
@media (max-width:1099px){
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-2{ grid-template-columns:1fr; }
  .pipe, .track{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pipe li:not(:last-child)::after{ display:none; }
}
@media (max-width:860px){
  .layout{ grid-template-columns:minmax(0,1fr); }
  .shell-collapsed{ --sidebar:240px; }
  .shell-collapsed .nav-group{ height:auto; margin:14px 10px 6px; color:var(--text-faint); background:none; }
  .shell-collapsed .nav-item{ justify-content:flex-start; padding:9px 10px; }
  .shell-collapsed .nav-item > span{ position:static; width:auto; height:auto; clip:auto; }
  .shell-collapsed .nav-item em{ display:inline; }
  .menu-btn{ display:inline-flex; }
  .brand{ min-width:0; }
  .top-search{ display:none; }
  .sidebar{ position:fixed; z-index:30; top:var(--top); left:0; bottom:0; height:auto; width:min(86vw,300px); background:var(--bg-900); transform:translateX(-102%); transition:transform .2s ease; visibility:hidden; }
  .sidebar.open{ transform:none; visibility:visible; box-shadow:20px 0 60px rgba(0,0,0,.6); }
}
@media (max-width:600px){
  .grid-3, .pipe, .track{ grid-template-columns:1fr; }
  .brand small{ display:none; }
  #view-production .table th:nth-child(2), #view-production .table td:nth-child(2){ display:none; }
  .bp-banner{ padding:8px 14px; }
  .topbar{ gap:10px; padding:0 14px; }
  main{ padding-top:20px; }
}
@media (prefers-reduced-motion: reduce){ .sidebar, .layout{ transition:none; } }

.nav-item{ transition:background-color .18s ease, color .18s ease, box-shadow .18s ease; }
@media (prefers-reduced-motion: reduce){ .nav-item{ transition:none; } }

html{ scroll-padding-top:calc(var(--top) + 48px); }

.top-actions .cta-join{ display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px; border:1px solid var(--line-2); font-weight:700; font-size:13px; text-decoration:none; white-space:nowrap; }
.top-actions .cta-join:hover{ background:rgba(255,255,255,.06); }
@media (max-width:600px){ .top-actions .icon-btn{ display:none; } }

/* ===== Cinematic Home (site styles, scoped to .cine) ===== */
.cine{
    color-scheme: dark;
    --bg-900:#070a0f; --bg-800:#0c1219; --bg-800-line:rgba(255,255,255,0.10);
    --text:#ffffff; --text-muted:rgba(255,255,255,0.64); --text-faint:rgba(255,255,255,0.40);
    --teal:#2fd4c4; --blue:#3b82f6; --line:rgba(255,255,255,0.14);
    --warm:#ff9a3c;
    --maxw:1240px;
  }
.cine *{ box-sizing:border-box; }
.cine{ scroll-behavior:smooth; }
.cine{ margin:0; background:transparent; color:var(--text); font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:clip; }
.cine img{ max-width:100%; display:block; }
.cine a{ color:inherit; }
.cine .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:28px; padding-right:28px; }
.cine .skip{ position:absolute; left:-9999px; top:0; background:#fff; color:#000; padding:10px 14px; z-index:100; border-radius:0 0 8px 0; }
.cine .skip:focus{ left:0; }
.cine :focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.cine .topbar{ position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:22px; padding-bottom:22px; }
.cine .brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:.01em; text-decoration:none; }
.cine .brand img{ width:30px; height:30px; }
.cine .nav{ display:flex; gap:28px; font-size:14px; font-weight:600; }
.cine .top-actions{ display:flex; align-items:center; gap:22px; }
.cine .nav-preview{ font-size:14px; font-weight:600; color:var(--text-muted); text-decoration:none; white-space:nowrap; transition:color .2s ease; }
.cine .nav-preview:hover{ color:var(--text); }

.cine .nav a{ text-decoration:none; color:var(--text-muted); transition:color .2s ease; }
.cine .nav a:hover{ color:var(--text); }
.cine .cta-ghost{ display:inline-flex; align-items:center; padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,0.04); font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; transition:border-color .2s ease, background .2s ease; }
.cine .cta-ghost:hover{ border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.08); }
.cine .hero{ position:relative; isolation:isolate; overflow:hidden; min-height:min(940px, 100svh); display:flex; flex-direction:column; }
.cine .scene, .cine .scene > *{ position:absolute; inset:0; pointer-events:none; }
.cine .scene{ z-index:-1; }
.cine .space{
    background:
      radial-gradient(60% 50% at 18% 30%, rgba(47,212,196,.10), transparent 70%),
      radial-gradient(50% 40% at 70% 18%, rgba(59,130,246,.14), transparent 70%),
      radial-gradient(40% 30% at 88% 40%, rgba(255,154,60,.06), transparent 70%),
      var(--bg-900);
  }
.cine .stars{
    background-image:
      radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
      radial-gradient(1px 1px at 27% 62%, rgba(255,255,255,.6), transparent 60%),
      radial-gradient(1.5px 1.5px at 41% 12%, rgba(200,230,255,.9), transparent 60%),
      radial-gradient(1px 1px at 56% 44%, rgba(255,255,255,.55), transparent 60%),
      radial-gradient(1px 1px at 68% 8%, rgba(255,255,255,.8), transparent 60%),
      radial-gradient(1.5px 1.5px at 79% 31%, rgba(180,220,255,.85), transparent 60%),
      radial-gradient(1px 1px at 91% 57%, rgba(255,255,255,.6), transparent 60%),
      radial-gradient(1px 1px at 6% 83%, rgba(255,255,255,.5), transparent 60%),
      radial-gradient(1px 1px at 34% 36%, rgba(255,255,255,.7), transparent 60%),
      radial-gradient(1px 1px at 62% 71%, rgba(255,255,255,.45), transparent 60%),
      radial-gradient(1px 1px at 85% 12%, rgba(255,255,255,.6), transparent 60%),
      radial-gradient(1px 1px at 48% 88%, rgba(255,255,255,.4), transparent 60%);
    background-size:420px 420px; opacity:.9;
  }
.cine .horizon{
    top:auto; height:48%;
    background:url('/assets/img/_placeholder/horizon-1500.v2.webp') center bottom / cover no-repeat;
    opacity:.95;
  }
.cine .sunrise{ background:radial-gradient(38% 22% at 78% 70%, rgba(255,154,60,.20), transparent 70%); mix-blend-mode:screen; }
.cine .scene-fade{ top:auto; height:26%; background:linear-gradient(to bottom, transparent, var(--bg-900)); }
.cine .hero-grid{
    flex:1; display:grid; align-items:center; gap:clamp(20px,3vw,48px);
    grid-template-columns:minmax(300px,1.1fr) minmax(360px,1.05fr) minmax(240px,.8fr);
    grid-template-areas:"sphere copy wall";
    padding-top:12px; padding-bottom:clamp(56px,9vh,110px);
  }
.cine .hero-visual{ grid-area:sphere; display:flex; justify-content:center; }
.cine .hero-copy{ grid-area:copy; position:relative; z-index:2; }
.cine .wall-wrap{ grid-area:wall; perspective:1100px; margin-right:-8vw; }
.cine .eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); margin:0 0 16px; }
.cine h1{ font-size:clamp(2.4rem,4.2vw,3.8rem); line-height:1.04; font-weight:800; letter-spacing:-.025em; margin:0 0 20px; }
.cine .accent{ white-space:nowrap; background:linear-gradient(90deg,var(--teal),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cine .lede{ font-size:1.08rem; line-height:1.6; color:rgba(255,255,255,.80); margin:0 0 28px; max-width:44ch; }
.cine .horizon-line{ font-size:13px; color:var(--text-faint); margin:20px 0 0; }
.cine .waitlist{ position:relative; display:flex; gap:8px; max-width:440px; padding:6px; border-radius:999px; background:rgba(7,10,15,.55); border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.cine .waitlist input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--text); font:inherit; font-size:15px; padding:10px 14px; }
.cine .waitlist input::placeholder{ color:var(--text-faint); }
.cine .waitlist:focus-within{ border-color:rgba(47,212,196,.55); }
.cine .waitlist button{ border:0; border-radius:999px; padding:11px 20px; font:inherit; font-size:14.5px; font-weight:800; color:#04121a; cursor:pointer; background:linear-gradient(90deg,var(--teal),var(--blue)); white-space:nowrap; transition:filter .2s ease, transform .2s ease; }
.cine .waitlist button:hover{ filter:brightness(1.1); }
.cine .waitlist button:active{ transform:scale(.98); }
.cine .sphere-wrap{ position:relative; width:clamp(300px, 31vw, 470px); flex:none; aspect-ratio:1/1; }
.cine .sphere-wrap::before{ content:""; position:absolute; inset:-14%; border-radius:50%; z-index:0;
    background:radial-gradient(closest-side, rgba(59,130,246,.22), rgba(47,212,196,.08) 55%, transparent 72%); }
.cine .sphere-wrap img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; }
.cine .wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; transform:rotateY(-20deg) rotateX(2deg); transform-origin:left center;
    -webkit-mask-image:linear-gradient(to right, #000 62%, transparent 100%); mask-image:linear-gradient(to right, #000 62%, transparent 100%); }
.cine .tile{ margin:0; border-radius:10px; overflow:hidden; aspect-ratio:16/10; border:1px solid rgba(255,255,255,.12); background:var(--bg-800); box-shadow:0 18px 40px rgba(0,0,0,.45); }
.cine .tile img{ width:100%; height:100%; object-fit:cover; }
.cine .wall .tile:nth-child(3n+2){ transform:translateY(14px); }
.cine section{ padding-top:96px; padding-bottom:96px; }
.cine .section-head{ max-width:640px; margin-bottom:48px; }
.cine .section-head h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); line-height:1.15; font-weight:800; letter-spacing:-.015em; margin:0 0 14px; }
.cine .section-head p{ font-size:1.05rem; line-height:1.6; color:var(--text-muted); margin:0; }
.cine .section-head .eyebrow{ color:var(--teal); font-size:12.5px; margin:0 0 14px; }
.cine .section-note{ font-size:13px; color:var(--text-faint); margin-top:14px !important; }
.cine .section-note a{ color:var(--text-muted); }
.cine .stages{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)) ; gap:0; align-items:stretch; }
.cine .stages{ grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr; }
.cine .stage{ position:relative; border:1px solid var(--line); border-radius:14px; padding:14px 14px 16px; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }
.cine .stage-visual{ height:86px; border-radius:10px; margin-bottom:14px; background:rgba(7,10,15,.6); border:1px solid rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cine .stage-visual svg{ width:100%; height:100%; }
.cine .stage-num{ font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--teal); margin:0 0 4px; }
.cine .stage h3{ font-size:15px; font-weight:800; margin:0 0 4px; letter-spacing:.01em; }
.cine .stage-desc{ font-size:13px; color:var(--text-muted); margin:0; line-height:1.45; }
.cine .stage-link{ display:flex; align-items:center; justify-content:center; }
.cine .stage-arrow svg{ width:22px; }
.cine .v-script{ width:70%; display:flex; flex-direction:column; gap:6px; }
.cine .v-script span{ height:5px; border-radius:3px; background:linear-gradient(90deg, rgba(47,212,196,.7), rgba(59,130,246,.5)); }
.cine .v-script .gap{ height:3px; background:none; }
.cine .v-visuals{ display:grid; grid-template-columns:1fr 1fr; gap:4px; width:84%; }
.cine .v-visuals img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:4px; }
.cine .audience-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bg-800-line); border:1px solid var(--bg-800-line); border-radius:14px; overflow:hidden; }
.cine .audience-card{ background:var(--bg-900); padding:26px 24px; min-height:132px; }
.cine .audience-card .icon{ width:22px; height:22px; margin-bottom:14px; color:var(--teal); }
.cine .audience-card h3{ font-size:14.5px; font-weight:700; margin:0 0 6px; }
.cine .audience-card p{ font-size:13px; color:var(--text-muted); margin:0; line-height:1.5; }
.cine .today-next{ max-width:640px; }
.cine .today-next h2{ font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.2; font-weight:800; letter-spacing:-.01em; margin:0 0 18px; }
.cine .today-next p{ font-size:1.02rem; line-height:1.65; color:var(--text-muted); margin:0; max-width:58ch; }
.cine #vision{ padding-top:72px; padding-bottom:72px; }
.cine footer{ padding-top:48px; padding-bottom:48px; border-top:1px solid var(--bg-800-line); }
.cine .footer-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.cine .footer-brand{ display:flex; align-items:center; gap:10px; }
.cine .footer-brand img{ width:26px; height:26px; }
.cine .footer-brand-text b{ display:block; font-size:14px; font-weight:700; }
.cine .footer-brand-text span{ display:block; font-size:12px; color:var(--text-faint); }
.cine .footer-copy{ font-size:12px; color:var(--text-faint); }
img[draggable="false"]{ -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
.cine .sphere-wrap{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.cine .lens{ display:none; }
.cine .lens.on{ display:block; will-change:transform, mask-image; }
.cine .lens > *{ position:absolute; inset:0; }
.cine .lens > .horizon{ top:auto; }
.js .cine .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .cine .reveal.in-view{ opacity:1; transform:none; }
.js .cine #how .stage{ opacity:.25; transition:opacity .6s ease; }
.js .cine #how .stage-arrow line{ stroke-dasharray:30; stroke-dashoffset:30; transition:stroke-dashoffset .45s ease; }
.js .cine #how .stage-arrow path{ opacity:0; transition:opacity .3s ease; }
.js .cine #how.in-view .stage{ opacity:1; }
.js .cine #how.in-view .stage-arrow line{ stroke-dashoffset:0; }
.js .cine #how.in-view .stage-arrow path{ opacity:1; }
@container cine (max-width: 1099px){.cine .nav{ display:none; }
.cine .hero-grid{ grid-template-columns:minmax(220px,.8fr) 1fr; grid-template-areas:"sphere copy" "wall wall"; }
.cine .sphere-wrap{ width:min(74%, 340px); }
.cine .wall-wrap{ margin-right:0; perspective:none; }
.cine .wall{ grid-template-columns:repeat(5,1fr); transform:none; -webkit-mask-image:none; mask-image:none; }
.cine .wall .tile:nth-child(n+6){ display:none; }
.cine .wall .tile:nth-child(3n+2){ transform:none; }
.cine .stages{ grid-template-columns:repeat(3,1fr); gap:14px; }
.cine .stage-link{ display:none; }}
@container cine (max-width: 767px){.cine .container{ padding-left:20px; padding-right:20px; }
.cine .hero{ min-height:auto; }
.cine .hero-grid{ grid-template-columns:1fr; grid-template-areas:"sphere" "copy" "wall"; gap:28px; padding-bottom:56px; }
.cine .sphere-wrap{ width:min(64vw, 300px); }
.cine .horizon{ height:34%; background-image:url('/assets/img/_placeholder/horizon-mobile-1000.v2.webp'); }
.cine .wall{ grid-template-columns:repeat(3,1fr); gap:8px; }
.cine .wall .tile:nth-child(n+4){ display:none; }
.cine .waitlist{ flex-direction:column; border-radius:18px; }
.cine .waitlist button{ width:100%; }
.cine section{ padding-top:72px; padding-bottom:72px; }
.cine .stages{ grid-template-columns:repeat(2,1fr); gap:12px; }
.cine .audience-grid{ grid-template-columns:1fr; }}
@media (prefers-reduced-motion: reduce){.cine{ scroll-behavior:auto; }
.js .cine .reveal, .js .cine #how .stage{ opacity:1 !important; transform:none !important; transition:none !important; }
.js .cine #how .stage-arrow line{ stroke-dashoffset:0 !important; transition:none !important; }
.js .cine #how .stage-arrow path{ opacity:1 !important; transition:none !important; }
.cine .lens, .cine .lens.on{ display:none !important; }}
.cine{ container-type:inline-size; container-name:cine; background:transparent; color:var(--text); }
.cine .hero{ min-height:min(880px, calc(100svh - 96px)); }
.cine .hero-grid{ padding-top:clamp(24px,5vh,56px); }
.cine section{ padding-top:72px; padding-bottom:64px; }
.cine #how{ padding-top:24px; }
.cine #vision{ padding-top:64px; padding-bottom:88px; }
.cine #audience{ background:linear-gradient(180deg, transparent, rgba(59,130,246,.035) 45%, transparent); }
@container cine (max-width: 767px){ .cine section{ padding-top:56px; padding-bottom:44px; } .cine #how{ padding-top:16px; } .cine #vision{ padding-top:48px; padding-bottom:64px; } }
/* permanent slow reflection over the facets: one blend group, two seamless layers
   (90deg repeating gradient: the period is a fixed share of the layer width, and each loop moves exactly one period) */
.cine .sphere-wrap .sheen{ position:absolute; z-index:2; inset:0.6%; border-radius:50%; overflow:hidden; pointer-events:none; mix-blend-mode:color-dodge; opacity:.62; }
.cine .sphere-wrap .sheen::before, .cine .sphere-wrap .sheen::after{ content:""; position:absolute; left:-150%; top:-100%; width:400%; height:300%; will-change:transform; }
.cine .sphere-wrap .sheen::before{
  background:repeating-linear-gradient(90deg, transparent 0 8%, rgba(110,225,215,.20) 11%, rgba(190,245,255,.30) 12.3%, rgba(245,252,255,.44) 13.1%, rgba(190,235,255,.30) 13.9%, rgba(100,150,255,.20) 15.5%, transparent 18.5% 25%);
  animation:sheen-a 20s linear infinite; }
.cine .sphere-wrap .sheen::after{
  background:repeating-linear-gradient(90deg, transparent 0 6%, rgba(160,220,255,.20) 7.1%, rgba(240,250,255,.36) 7.8%, transparent 9.6% 21%, rgba(120,235,225,.16) 23%, rgba(200,250,255,.28) 24%, transparent 26.5% 33.3333%);
  animation:sheen-b 31s linear infinite; }
@keyframes sheen-a{ from{ transform:rotate(-12deg) translateX(0); } to{ transform:rotate(-12deg) translateX(-25%); } }
@keyframes sheen-b{ from{ transform:rotate(26deg) translateX(-33.3333%); } to{ transform:rotate(26deg) translateX(0); } }
.cine .sheen-paused .sheen::before, .cine .sheen-paused .sheen::after{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .cine .sphere-wrap .sheen{ display:none !important; } }

/* ---- cinematic starfield: painted as the content area's own background (no extra compositing layer, no repaint on scroll)
        + a few slow twinkles kept behind the content ---- */
#main{ position:relative; z-index:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Ccircle cx='290' cy='358' r='0.53' fill='%23ffffff' fill-opacity='0.41'/%3E%3Ccircle cx='375' cy='121' r='0.44' fill='%23cfe3ff' fill-opacity='0.45'/%3E%3Ccircle cx='63' cy='196' r='0.34' fill='%23ffffff' fill-opacity='0.50'/%3E%3Ccircle cx='30' cy='625' r='0.54' fill='%23ffffff' fill-opacity='0.46'/%3E%3Ccircle cx='104' cy='13' r='0.44' fill='%23ffffff' fill-opacity='0.30'/%3E%3Ccircle cx='157' cy='23' r='0.43' fill='%23cfe3ff' fill-opacity='0.40'/%3E%3Ccircle cx='332' cy='409' r='0.43' fill='%23ffffff' fill-opacity='0.46'/%3E%3Ccircle cx='180' cy='635' r='0.55' fill='%23cfe3ff' fill-opacity='0.51'/%3E%3Ccircle cx='203' cy='149' r='0.39' fill='%23cfe3ff' fill-opacity='0.30'/%3E%3Ccircle cx='257' cy='539' r='0.41' fill='%23cfe3ff' fill-opacity='0.54'/%3E%3Ccircle cx='4' cy='137' r='0.53' fill='%23cfe3ff' fill-opacity='0.41'/%3E%3Ccircle cx='255' cy='50' r='0.46' fill='%23ffffff' fill-opacity='0.49'/%3E%3Ccircle cx='59' cy='214' r='0.54' fill='%23ffffff' fill-opacity='0.48'/%3E%3Ccircle cx='160' cy='68' r='0.33' fill='%23ffffff' fill-opacity='0.50'/%3E%3Ccircle cx='357' cy='287' r='0.36' fill='%23ffffff' fill-opacity='0.48'/%3E%3Ccircle cx='411' cy='78' r='0.42' fill='%23ffffff' fill-opacity='0.34'/%3E%3Ccircle cx='618' cy='512' r='0.39' fill='%23ffffff' fill-opacity='0.52'/%3E%3Ccircle cx='253' cy='544' r='0.47' fill='%23cfe3ff' fill-opacity='0.31'/%3E%3Ccircle cx='139' cy='167' r='0.50' fill='%23ffffff' fill-opacity='0.37'/%3E%3Ccircle cx='50' cy='61' r='0.45' fill='%23ffffff' fill-opacity='0.35'/%3E%3Ccircle cx='239' cy='290' r='0.54' fill='%23ffffff' fill-opacity='0.41'/%3E%3Ccircle cx='552' cy='120' r='0.36' fill='%23cfe3ff' fill-opacity='0.53'/%3E%3Ccircle cx='162' cy='124' r='0.49' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='604' cy='562' r='0.46' fill='%23ffffff' fill-opacity='0.39'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024'%3E%3Ccircle cx='561' cy='355' r='0.80' fill='%23ffffff' fill-opacity='0.77'/%3E%3Ccircle cx='523' cy='353' r='0.80' fill='%23cfe3ff' fill-opacity='0.69'/%3E%3Ccircle cx='109' cy='456' r='0.80' fill='%23ffffff' fill-opacity='0.66'/%3E%3Ccircle cx='1019' cy='339' r='0.80' fill='%23ffffff' fill-opacity='0.73'/%3E%3Ccircle cx='746' cy='458' r='0.36' fill='%23ffffff' fill-opacity='0.40'/%3E%3Ccircle cx='809' cy='576' r='0.37' fill='%23ffffff' fill-opacity='0.46'/%3E%3Ccircle cx='524' cy='227' r='0.41' fill='%23ffffff' fill-opacity='0.49'/%3E%3Ccircle cx='768' cy='773' r='0.46' fill='%23ffffff' fill-opacity='0.45'/%3E%3Ccircle cx='632' cy='794' r='0.34' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='145' cy='156' r='0.40' fill='%23ffffff' fill-opacity='0.30'/%3E%3Ccircle cx='426' cy='670' r='0.43' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='330' cy='893' r='0.48' fill='%23cfe3ff' fill-opacity='0.54'/%3E%3Ccircle cx='985' cy='213' r='0.38' fill='%23ffffff' fill-opacity='0.54'/%3E%3Ccircle cx='943' cy='929' r='0.35' fill='%23cfe3ff' fill-opacity='0.32'/%3E%3C/svg%3E"); background-size:640px 640px, 1024px 1024px; background-position:0 0, 210px 130px; }
#main > .twinkle{ position:absolute; z-index:-1; width:1.6px; height:1.6px; border-radius:50%; background:#fff; opacity:.2; pointer-events:none; animation:twinkle 9s ease-in-out infinite alternate; }
@keyframes twinkle{ from{ opacity:.12; } to{ opacity:.75; } }
@media (max-width:767px){ #main{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Ccircle cx='290' cy='358' r='0.53' fill='%23ffffff' fill-opacity='0.41'/%3E%3Ccircle cx='375' cy='121' r='0.44' fill='%23cfe3ff' fill-opacity='0.45'/%3E%3Ccircle cx='63' cy='196' r='0.34' fill='%23ffffff' fill-opacity='0.50'/%3E%3Ccircle cx='30' cy='625' r='0.54' fill='%23ffffff' fill-opacity='0.46'/%3E%3Ccircle cx='104' cy='13' r='0.44' fill='%23ffffff' fill-opacity='0.30'/%3E%3Ccircle cx='157' cy='23' r='0.43' fill='%23cfe3ff' fill-opacity='0.40'/%3E%3Ccircle cx='332' cy='409' r='0.43' fill='%23ffffff' fill-opacity='0.46'/%3E%3Ccircle cx='180' cy='635' r='0.55' fill='%23cfe3ff' fill-opacity='0.51'/%3E%3Ccircle cx='203' cy='149' r='0.39' fill='%23cfe3ff' fill-opacity='0.30'/%3E%3Ccircle cx='257' cy='539' r='0.41' fill='%23cfe3ff' fill-opacity='0.54'/%3E%3Ccircle cx='4' cy='137' r='0.53' fill='%23cfe3ff' fill-opacity='0.41'/%3E%3Ccircle cx='255' cy='50' r='0.46' fill='%23ffffff' fill-opacity='0.49'/%3E%3Ccircle cx='59' cy='214' r='0.54' fill='%23ffffff' fill-opacity='0.48'/%3E%3Ccircle cx='160' cy='68' r='0.33' fill='%23ffffff' fill-opacity='0.50'/%3E%3Ccircle cx='357' cy='287' r='0.36' fill='%23ffffff' fill-opacity='0.48'/%3E%3Ccircle cx='411' cy='78' r='0.42' fill='%23ffffff' fill-opacity='0.34'/%3E%3Ccircle cx='618' cy='512' r='0.39' fill='%23ffffff' fill-opacity='0.52'/%3E%3Ccircle cx='253' cy='544' r='0.47' fill='%23cfe3ff' fill-opacity='0.31'/%3E%3Ccircle cx='139' cy='167' r='0.50' fill='%23ffffff' fill-opacity='0.37'/%3E%3Ccircle cx='50' cy='61' r='0.45' fill='%23ffffff' fill-opacity='0.35'/%3E%3Ccircle cx='239' cy='290' r='0.54' fill='%23ffffff' fill-opacity='0.41'/%3E%3Ccircle cx='552' cy='120' r='0.36' fill='%23cfe3ff' fill-opacity='0.53'/%3E%3Ccircle cx='162' cy='124' r='0.49' fill='%23ffffff' fill-opacity='0.53'/%3E%3Ccircle cx='604' cy='562' r='0.46' fill='%23ffffff' fill-opacity='0.39'/%3E%3C/svg%3E"); background-size:640px 640px; } #main > .twinkle{ display:none; } }
@media (prefers-reduced-motion: reduce){ #main > .twinkle{ animation:none; opacity:.4; } }

/* ===== v0.7a: direction cards (hero) ===== */
.cine .dir-wrap{ perspective:none; margin-right:0; }
.cine .dir-wrap .pw-tag{ margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); }
.cine .dir-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; transform:none; -webkit-mask-image:none; mask-image:none; }
.cine .dir-card{ position:relative; display:block; aspect-ratio:4/3.4; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#0b1118; text-decoration:none; color:var(--text); transition:border-color .2s ease, transform .2s ease; }
.cine .dir-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cine .dir-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(7,10,15,0) 35%, rgba(7,10,15,.92) 100%); }
.cine .dir-card:hover, .cine .dir-card:focus-visible{ border-color:rgba(255,255,255,.32); transform:translateY(-2px); }
.cine .dir-card-text{ position:absolute; z-index:1; left:12px; right:12px; bottom:10px; display:grid; gap:3px; }
.cine .dir-card-text b{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.cine .dir-card-text span{ font-size:11.5px; line-height:1.35; color:rgba(255,255,255,.78); }
.cine .dir-card .dir-status{ position:absolute; z-index:1; top:9px; right:9px; }
/* status chips */
.cine .dir-status{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; border:1px solid currentColor; background:rgba(7,10,15,.72); white-space:nowrap; }
.cine .dir-status[data-tone="teal"]{ color:#2fd4c4; }
.cine .dir-status[data-tone="blue"]{ color:#60a5fa; }
.cine .dir-status[data-tone="purple"]{ color:#b49cff; }
.cine .dir-status[data-tone="amber"]{ color:#f5b041; }
/* lede under the headline */
.cine .hero-copy .lede{ margin-bottom:6px; }
.cine .hero-copy .lede-sub{ margin:0 0 22px; font-size:15.5px; line-height:1.55; color:var(--text-muted); max-width:42ch; }
/* ===== v0.7a: "What do you want to create?" ===== */
.cine .dir-rows{ display:grid; gap:22px; margin-top:28px; }
.cine .dir-row{ display:grid; grid-template-columns:minmax(220px,.62fr) minmax(0,2fr); gap:24px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); scroll-margin-top:calc(var(--top, 60px) + 20px); }
.cine .dir-meta{ display:grid; gap:10px; justify-items:start; }
.cine .dir-num{ font-size:40px; font-weight:800; line-height:1; letter-spacing:-.02em; color:rgba(255,255,255,.14); }
.cine .dir-meta h3{ margin:0; font-size:20px; font-weight:800; }
.cine .dir-meta p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--text-muted); }
.cine .dir-notify{ margin-top:4px; display:inline-flex; padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--text); font-size:13px; font-weight:700; text-decoration:none; }
.cine .dir-notify:hover, .cine .dir-notify:focus-visible{ background:rgba(255,255,255,.06); }
.cine .dir-frames{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:10px; }
.cine .dir-frames img{ width:100%; height:100%; object-fit:cover; border-radius:12px; display:block; background:#0d141c; }
.cine .dir-main{ aspect-ratio:16/9; }
.cine .dir-strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.cine .dir-strip img{ height:100%; min-height:0; }
/* ===== v0.7a: Today / Next ===== */
.cine .tn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:44px; }
.cine .tn-col{ padding:20px 22px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); display:grid; gap:10px; align-content:start; justify-items:start; }
.cine .tn-col .eyebrow{ margin:0; }
.cine .tn-col h3{ margin:0; font-size:22px; font-weight:800; }
.cine .tn-col p{ margin:0; color:var(--text-muted); line-height:1.55; }
.cine .tn-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; width:100%; }
.cine .tn-list li{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:16px; font-weight:700; }
/* hero balance for four cards (as in the approved mockup): wider card column, headline sized to its column */
@container cine (min-width: 1100px){
  .cine .hero-grid{ grid-template-columns:minmax(260px,.9fr) minmax(330px,1fr) minmax(380px,1.2fr); }
  /* variant A (owner choice): the sphere keeps its full size and is anchored to the right of its column,
     so on narrower screens it extends past the left edge and is cut by the hero, as in the approved mockup */
  .cine .hero-visual{ justify-content:flex-end; }
  .cine .sphere-wrap{ width:clamp(380px, 31vw, 470px); }
  .cine h1{ font-size:clamp(2rem, 2.85vw, 2.9rem); }
}
@container cine (max-width: 1099px){ .cine h1{ font-size:clamp(2rem, 4.6vw, 3.2rem); } }
/* while the sidebar changes width, the large sphere's sheen layers would be re-rasterised (the main cost of the collapse);
   hide them for that moment only */
.shell-resizing .cine .sphere-wrap .sheen{ visibility:hidden; }
/* responsive */
@container cine (max-width: 1099px){ .cine .dir-cards{ grid-template-columns:repeat(4,minmax(0,1fr)); } .cine .dir-card{ aspect-ratio:3/4; } }
@container cine (max-width: 900px){ .cine .dir-row{ grid-template-columns:1fr; } }
@container cine (max-width: 767px){ .cine .dir-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } .cine .dir-card{ aspect-ratio:4/3.6; } .cine .tn-grid{ grid-template-columns:1fr; } .cine .dir-frames{ grid-template-columns:1fr; } .cine .dir-strip img{ aspect-ratio:3/4; height:auto; } .cine .dir-num{ font-size:32px; } }
@media (prefers-reduced-motion: reduce){ .cine .dir-card{ transition:none; } .cine .dir-card:hover{ transform:none; } }


/* v0.8 Trust: About, Progress, Privacy, status line, founder footer */
.cine .status-line{ font-size:13px; line-height:1.6; color:var(--text-muted); margin:14px 0 0; max-width:440px; }
.cine .status-line a{ color:var(--teal); text-decoration:none; font-weight:600; }
.cine .status-line a:hover{ text-decoration:underline; }
.status-dot{ display:inline-block; vertical-align:1px; width:8px; height:8px; margin-right:8px; border-radius:50%; background:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,.18); }
.cine .consent{ font-size:12px; color:var(--text-faint); margin:10px 0 0 4px; }
.cine .consent a{ color:var(--text-muted); }
.prose p{ margin:0 0 10px; line-height:1.6; color:var(--text-muted); max-width:70ch; }
.prose p:last-child{ margin-bottom:0; }
.prose p b, .prose li b{ color:var(--text); }
.prose h2{ font-size:16px; margin:18px 0 6px; }
.prose .panel-head h2{ margin:0; font-size:16px; }
.prose > h2:first-child{ margin-top:0; }
.prose ul{ margin:0 0 10px; padding-left:20px; color:var(--text-muted); line-height:1.6; max-width:70ch; }
.prose a{ color:var(--teal); }
.prose .panel-head .ex{ margin-left:auto; }
.contact-list{ list-style:none; padding:0 !important; margin:12px 0 0; display:grid; gap:8px; }
.contact-list li{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.contact-list span{ min-width:72px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); }
.contact-list a{ word-break:break-all; }
.timeline{ list-style:none; margin:0 0 24px; padding:0; position:relative; display:grid; gap:0; max-width:760px; }
.timeline li{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:16px; padding:0 0 22px; position:relative; }
.timeline li::before{ content:""; position:absolute; left:139px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(47,212,196,.15); }
.timeline li::after{ content:""; position:absolute; left:143.5px; top:20px; bottom:0; width:1px; background:var(--line-2); }
.timeline li:last-child::after{ display:none; }
.timeline li > div{ padding-left:22px; min-width:0; }
.timeline time{ font-size:13px; color:var(--text-faint); padding-top:1px; font-variant-numeric:tabular-nums; }
.timeline b{ display:block; font-size:15px; }
.timeline p{ margin:4px 0 0; color:var(--text-muted); line-height:1.55; font-size:14px; }
.timeline li.next::before{ background:transparent; border:1.5px dashed var(--text-faint); box-shadow:none; width:9px; height:9px; }
.timeline li.next b{ color:var(--text-muted); }
.site-foot{ margin-top:28px; padding-top:20px; border-top:1px solid var(--line); display:grid; gap:10px; font-size:13px; color:var(--text-muted); }
.site-foot p{ margin:0; }
.site-foot b{ color:var(--text); }
.site-foot a{ color:var(--text-muted); }
.site-foot a:hover{ color:var(--text); }
.sf-links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; }
.sf-copy{ font-size:12px; color:var(--text-faint); }
@media (max-width:600px){
  .timeline li{ grid-template-columns:1fr; gap:2px; padding-left:24px; }
  .timeline li::before{ left:0; }
  .timeline li::after{ left:4.5px; }
  .timeline li > div{ padding-left:0; }
}
/* ===== CSP inline-style replacements ===== */

.csp-pos-absolute{
  position:absolute;
}

.demo-gradient-teal{
  background:linear-gradient(135deg,#1a2a55,#0f4c5c 55%,#0a1622);
}

.demo-gradient-blue{
  background:linear-gradient(135deg,#0e3a4a,#123a7a 60%,#0a1622);
}

.skeleton-h-140{ height:140px; }
.skeleton-h-90{ height:90px; }

.skeleton-w-84{ width:84%; }
.skeleton-w-56{ width:56%; }
.skeleton-w-64{ width:64%; }
.skeleton-w-90{ width:90%; }
.skeleton-w-72{ width:72%; }

.twinkle-pos-1{
  left:97%;
  top:58%;
  animation-duration:7.5s;
  animation-delay:-4.6s;
}

.twinkle-pos-2{
  left:4%;
  top:46%;
  animation-duration:11s;
  animation-delay:-2.3s;
}

.twinkle-pos-3{
  left:96%;
  top:32%;
  animation-duration:9s;
  animation-delay:0s;
}

.twinkle-pos-4{
  left:3%;
  top:74%;
  animation-duration:10s;
  animation-delay:-6.9s;
}

.twinkle-pos-5{
  left:95%;
  top:88%;
  animation-duration:8.5s;
  animation-delay:-9.2s;
}

/*
 * Mailchimp anti-bot honeypot.
 * Deliberately kept off-screen instead of display:none.
 */
.waitlist-honeypot{
  position:absolute;
  left:-5000px;
}