/* ==== Cinematic theme (live 13 Nov 2026) ===========================================================================
   One layer over every page except the home page (which it copies): the home page's blue-to-teal gradient, soft glows
   behind the page, big tight headings, borderless cards that lift and catch a spotlight under the pointer, gradient
   buttons, glass bars and sheets that rise in. It only changes looks, never layout or behaviour.
   Every rule sits under html.ld-cine, which the loader in each page's <head> adds (not with ?preview=off). */

/* ---- tokens --------------------------------------------------------------------------------------------------------- */
html.ld-cine{
  --cine-a:#2563eb; --cine-b:#0f766e; --cine-c:#0d9488;
  --cine-glow:rgba(15,118,110,.11); --cine-glow-2:rgba(59,147,230,.09);
  --cine-grad:linear-gradient(120deg,#1d6fd6,#0e7f71);   /* the home page's gradient, a shade deeper so white text passes 4.5:1 at both ends */
  --cine-text-grad:linear-gradient(100deg,var(--cine-a) 0%,var(--cine-b) 55%,var(--cine-c) 100%);
  --spot:rgba(15,118,110,.075);
  --hair:rgba(15,23,42,.075);
  --card-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 34px -26px rgba(15,23,42,.40);
  --lift:0 2px 4px rgba(15,23,42,.04),0 26px 56px -30px rgba(15,118,110,.50);
  --sheet-shadow:0 60px 140px -40px rgba(2,6,23,.55);
  --glass:rgba(243,245,249,.78);
  --glass-panel:rgba(255,255,255,.80);
  --cine-ease:cubic-bezier(.2,.7,.2,1);
  --r-xl:22px; --r-lg:18px; --r-md:14px; --r-sm:10px;
  --grid-op:0;
}
@media (prefers-color-scheme: dark){
  html.ld-cine:not([data-theme="light"]){
    --cine-a:#60a5fa; --cine-b:#2dd4bf; --cine-c:#5eead4;
    --cine-glow:rgba(45,212,191,.12); --cine-glow-2:rgba(59,147,230,.11);
    --spot:rgba(45,212,191,.085);
    --hair:rgba(255,255,255,.065);
    --card-shadow:0 1px 0 rgba(255,255,255,.035) inset,0 18px 46px -30px rgba(0,0,0,.9);
    --lift:0 1px 0 rgba(255,255,255,.05) inset,0 28px 60px -30px rgba(45,212,191,.30);
    --sheet-shadow:0 60px 140px -40px rgba(0,0,0,.9);
    --glass:rgba(5,7,12,.74);
    --glass-panel:rgba(13,16,23,.82);
    --grid-op:1;
  }
}
html.ld-cine[data-theme="dark"]{
  --cine-a:#60a5fa; --cine-b:#2dd4bf; --cine-c:#5eead4;
  --cine-glow:rgba(45,212,191,.12); --cine-glow-2:rgba(59,147,230,.11);
  --spot:rgba(45,212,191,.085);
  --hair:rgba(255,255,255,.065);
  --card-shadow:0 1px 0 rgba(255,255,255,.035) inset,0 18px 46px -30px rgba(0,0,0,.9);
  --lift:0 1px 0 rgba(255,255,255,.05) inset,0 28px 60px -30px rgba(45,212,191,.30);
  --sheet-shadow:0 60px 140px -40px rgba(0,0,0,.9);
  --glass:rgba(5,7,12,.74);
  --glass-panel:rgba(13,16,23,.82);
  --grid-op:1;
}

/* ---- the stage: glows behind every page, a faint grid at the top in dark mode -------------------------------------- */
html.ld-cine body{position:relative;isolation:isolate;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html.ld-cine body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(1100px 620px at 96% -12%,var(--cine-glow),transparent 70%),
             radial-gradient(900px 560px at -10% -6%,var(--cine-glow-2),transparent 70%)}
html.ld-cine body::after{content:'';position:fixed;left:0;right:0;top:0;height:560px;z-index:-1;pointer-events:none;opacity:var(--grid-op);
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 90% at 60% 0%,#000,transparent 75%);mask-image:radial-gradient(70% 90% at 60% 0%,#000,transparent 75%)}
html.ld-cine ::selection{background:rgba(45,212,191,.28)}
html.ld-cine .grad, html.ld-cine .cine-grad{background:var(--cine-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media (forced-colors: active){ html.ld-cine .grad, html.ld-cine .cine-grad{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText} }

/* scroll progress (added by cine.js on the content pages) */
html.ld-cine .cine-prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;pointer-events:none}
html.ld-cine .cine-prog span{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--cine-a),var(--cine-b),var(--cine-c));box-shadow:0 0 12px var(--cine-glow)}

/* preview badge (cine.js): says the new look is a preview and how to leave it */
html.ld-cine .cine-badge{position:fixed;z-index:400;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;
  padding:7px 8px 7px 14px;border-radius:999px;font:600 12px/1.2 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#e2e8f0;
  background:rgba(8,12,20,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 34px -14px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
html.ld-cine .cine-badge i{width:8px;height:8px;border-radius:50%;background:linear-gradient(120deg,#60a5fa,#2dd4bf);box-shadow:0 0 10px rgba(45,212,191,.8)}
html.ld-cine .cine-badge a{color:#0b1220;background:#e2e8f0;text-decoration:none;border-radius:999px;padding:5px 11px;font-weight:700}
html.ld-cine .cine-badge a:hover{background:#fff}
@media print{ html.ld-cine .cine-badge, html.ld-cine .cine-prog{display:none} html.ld-cine [data-cine-rv]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important} }

/* ---- shared pieces: buttons, links, focus ------------------------------------------------------------------------- */
html.ld-cine .btn:not(.ghost):not(.danger):not(.secondary),
html.ld-cine .header-trial-btn, html.ld-cine .auth-submit:not(.secondary), html.ld-cine .mine-btn.primary:not(.danger-fill), html.ld-cine .rp-go, html.ld-cine .shift-save{
  position:relative;overflow:hidden;isolation:isolate;border-color:transparent!important;color:#fff!important;background:var(--cine-grad)!important;
  box-shadow:0 12px 28px -14px rgba(15,159,138,.85);transition:transform .25s var(--cine-ease),box-shadow .25s,filter .25s}
html.ld-cine .btn:not(.ghost):not(.danger):not(.secondary)::after,
html.ld-cine .header-trial-btn::after, html.ld-cine .auth-submit:not(.secondary)::after{content:'';position:absolute;inset:0;z-index:-1;transform:translateX(-120%) skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transition:transform .8s}
html.ld-cine .btn:not(.ghost):not(.danger):not(.secondary):hover,
html.ld-cine .header-trial-btn:hover, html.ld-cine .auth-submit:not(.secondary):hover:not(:disabled){transform:translateY(-1px);filter:none;opacity:1;box-shadow:0 18px 36px -14px rgba(15,159,138,.95)}
html.ld-cine .btn:not(.ghost):not(.danger):not(.secondary):hover::after,
html.ld-cine .header-trial-btn:hover::after, html.ld-cine .auth-submit:not(.secondary):hover::after{transform:translateX(120%) skewX(-20deg)}
html.ld-cine .auth-submit:disabled{filter:saturate(.4);opacity:.7;transform:none}
html.ld-cine .btn.ghost{background:var(--glass-panel);border-color:var(--gold-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,border-color .25s,transform .25s var(--cine-ease)}
html.ld-cine .btn.ghost:hover{background:var(--gold-soft);border-color:var(--gold);transform:translateY(-1px)}
@media (prefers-reduced-motion: reduce){
  html.ld-cine .btn, html.ld-cine .header-trial-btn, html.ld-cine .auth-submit{transition:none}
  html.ld-cine .btn::after, html.ld-cine .header-trial-btn::after, html.ld-cine .auth-submit::after{display:none}
}

/* ==== content pages: Pro, charts, indicators, learn, data, AI connector, legal, methodology, research, 404 ========== */
/* the top bar becomes a glass strip that stays at the top */
html.ld-cine body > .topnav{position:sticky;top:0;z-index:60;border-bottom-color:var(--hair);
  background:var(--glass);box-shadow:0 0 0 100vmax var(--glass);clip-path:inset(0 -100vmax);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
html.ld-cine body > .topnav .brand{font-size:15px;letter-spacing:-.02em}
html.ld-cine body > .topnav .nav-link{border-radius:999px;transition:color .2s,background .2s}

/* headings in the home page's style */
html.ld-cine article{padding-top:clamp(44px,7vw,84px)}
html.ld-cine article > .kicker, html.ld-cine .page-head .kicker, html.ld-cine .eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:800;letter-spacing:.16em;margin:0 0 18px}
html.ld-cine article > .kicker::before, html.ld-cine .eyebrow::before{content:'';width:30px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cine-a),var(--cine-b))}
html.ld-cine article > h1, html.ld-cine .rs-head h1, html.ld-cine .page-head h1, html.ld-cine .rs-post h1{font-size:clamp(38px,5.8vw,68px);font-weight:800;letter-spacing:-.046em;line-height:1.0;
  margin:0 0 20px;text-wrap:balance}
html.ld-cine .rs-post h1{font-size:clamp(32px,4.8vw,54px)}
html.ld-cine article > .lead, html.ld-cine .lede{font-size:clamp(16.5px,1.4vw,19px);line-height:1.6;color:var(--muted);margin-bottom:28px}
html.ld-cine article h2, html.ld-cine .content h2, html.ld-cine .rs-body h2{font-size:clamp(25px,2.8vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:clamp(52px,7vw,76px) 0 14px}
html.ld-cine article h3, html.ld-cine .content h3{letter-spacing:-.015em}
html.ld-cine article p, html.ld-cine article li{line-height:1.7}

/* cards and panels: no hard borders, a soft shadow, lift and a spotlight on hover */
html.ld-cine article .card, html.ld-cine article .stat, html.ld-cine .live:not(.badge), html.ld-cine .faq details, html.ld-cine .table-wrap, html.ld-cine .embed-box,
html.ld-cine .locked-chart, html.ld-cine article .cta, html.ld-cine .dash-go, html.ld-cine .content .card, html.ld-cine .rs-item, html.ld-cine .rs-lock, html.ld-cine .auth-card, html.ld-cine .flow .step{
  border-color:var(--hair);border-radius:var(--r-lg);box-shadow:var(--card-shadow);
  background:radial-gradient(520px circle at var(--mx,30%) var(--my,-40%),var(--spot),transparent 55%),var(--panel)}
html.ld-cine article .card, html.ld-cine article .stat, html.ld-cine .rs-item, html.ld-cine .faq details, html.ld-cine .flow .step{transition:transform .4s var(--cine-ease),box-shadow .4s,border-color .4s}
html.ld-cine article .card:hover, html.ld-cine article .stat:hover, html.ld-cine .rs-item:hover, html.ld-cine .flow .step:hover{transform:translateY(-4px);box-shadow:var(--lift);border-color:var(--gold-border)}
html.ld-cine .cards, html.ld-cine .stat-row{gap:16px}
html.ld-cine article .card{padding:22px 22px 18px}
html.ld-cine article .card b{font-size:16px;letter-spacing:-.01em;margin-bottom:6px}
html.ld-cine article .stat{padding:20px 20px 18px}
html.ld-cine article .stat b{font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-bottom:4px;
  background:var(--cine-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* the live reading boxes on the indicator pages */
html.ld-cine .live:not(.badge){padding:24px 24px 14px;border-radius:var(--r-xl);
  background:radial-gradient(60% 70% at 92% 0%,var(--cine-glow),transparent 72%),radial-gradient(45% 60% at 0% 0%,var(--cine-glow-2),transparent 70%),var(--panel)}
html.ld-cine .live-val{font-size:clamp(34px,5.4vw,56px);letter-spacing:-.045em;line-height:1.02;margin-top:8px;
  background:var(--cine-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:fit-content}
html.ld-cine .spark .line{stroke-width:2.2;filter:drop-shadow(0 0 6px var(--cine-glow))}
html.ld-cine .spark .area{fill:var(--gold-soft)}
html.ld-cine .spark .grid{stroke:var(--hair)}

/* tables: lighter rules, no tinted header, a row tint on hover */
html.ld-cine .table-wrap{border-radius:var(--r-lg);overflow:hidden;overflow-x:auto}
html.ld-cine .table-wrap th, html.ld-cine article th, html.ld-cine .content th{background:transparent;color:var(--dim);font-size:10.5px;letter-spacing:.1em;border-bottom:1px solid var(--hair);padding-top:14px;padding-bottom:12px}
html.ld-cine .table-wrap td, html.ld-cine article td, html.ld-cine .content td{border-bottom-color:var(--hair)}
html.ld-cine .table-wrap tbody tr, html.ld-cine .table-wrap tr{transition:background .2s}
html.ld-cine .table-wrap tbody tr:hover td{background:var(--gold-soft)}

/* questions open with a turning plus, as on the home page */
html.ld-cine .faq details{padding:0 20px;margin:10px 0;border-radius:var(--r-md)}
html.ld-cine .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;list-style:none;letter-spacing:-.01em}
html.ld-cine .faq summary::-webkit-details-marker{display:none}
html.ld-cine .faq summary::after{content:'+';flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--gold-border);color:var(--gold);
  font-size:19px;font-weight:500;transition:transform .35s cubic-bezier(.3,.7,.2,1),background .35s,color .35s}
html.ld-cine .faq details[open] summary::after{transform:rotate(135deg);background:var(--gold);color:var(--panel)}
html.ld-cine .faq details p{margin:0 0 16px}
html.ld-cine .faq details:hover{border-color:var(--gold-border)}

/* call-outs */
html.ld-cine .dash-go{border:0;padding:20px 22px;background:radial-gradient(70% 120% at 100% 0%,var(--cine-glow),transparent 70%),radial-gradient(50% 120% at 0% 100%,var(--cine-glow-2),transparent 70%),var(--panel);
  box-shadow:var(--card-shadow),inset 0 0 0 1px var(--gold-border)}
html.ld-cine .dash-go .dg-dot{box-shadow:0 0 0 4px var(--gold-soft-2),0 0 12px var(--gold);animation:cinePulse 2.4s ease-out infinite}
html.ld-cine article .cta{border:0;box-shadow:var(--card-shadow),inset 0 0 0 1px var(--gold-border);padding:24px;border-radius:var(--r-xl)}
html.ld-cine .locked-chart{border:0}
html.ld-cine .toc a{border-color:var(--hair);background:var(--glass-panel);color:var(--text);transition:border-color .2s,color .2s,background .2s}
html.ld-cine .toc a:hover{border-color:var(--gold-border);color:var(--gold);background:var(--gold-soft)}
html.ld-cine .badge.free, html.ld-cine .free-pill{border:1px solid var(--gold-border)}
html.ld-cine .chart-list li, html.ld-cine .guide-list li{border-bottom-color:var(--hair);transition:padding .3s var(--cine-ease)}
html.ld-cine .chart-list li:hover, html.ld-cine .guide-list li:hover{padding-left:6px}
html.ld-cine .guide-list a{font-weight:700;letter-spacing:-.01em}

/* product screenshots float on a glow */
html.ld-cine .shot{position:relative}
html.ld-cine .shot::before{content:'';position:absolute;z-index:-1;inset:8% 6% -6%;border-radius:40px;background:radial-gradient(55% 55% at 50% 50%,rgba(15,159,138,.30),rgba(42,120,214,.16) 50%,transparent 75%);filter:blur(40px)}
html.ld-cine .shot img{border-radius:var(--r-lg);border-color:var(--hair);box-shadow:0 40px 90px -46px rgba(15,23,42,.55)}

/* methodology flow */
html.ld-cine .flow .step{border-radius:var(--r-md)}
html.ld-cine .flow .step.out{background:var(--cine-grad);color:#fff;box-shadow:0 16px 36px -18px rgba(15,159,138,.8)}
html.ld-cine .flow .step.out b, html.ld-cine .flow .step.out span{color:#fff}

/* legal: the contents list as a glass rail */
html.ld-cine{scroll-padding-top:84px}
html.ld-cine .layout .toc{top:88px;padding:14px 12px 12px;border-radius:var(--r-lg);box-shadow:var(--card-shadow);border-color:var(--hair);background:var(--glass-panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.ld-cine .layout .toc li a{border-radius:8px;transition:background .2s,color .2s}
html.ld-cine .layout .toc li a.active{background:var(--gold-soft-2);color:var(--gold)}
html.ld-cine .page-head{padding-top:clamp(36px,6vw,72px)}
html.ld-cine .content .card > h2:first-child, html.ld-cine .content .card > h2:first-of-type, html.ld-cine article .card > h2:first-child{margin-top:4px}
html.ld-cine .toc-mobile{border-radius:var(--r-md);box-shadow:var(--card-shadow);border-color:var(--hair)}

/* research */
html.ld-cine .rs-item{border:0;padding:24px 26px}
html.ld-cine .rs-item h2{font-size:clamp(19px,1.8vw,23px);letter-spacing:-.025em;margin:8px 0 6px}
html.ld-cine .rs-list{gap:16px}
html.ld-cine .chip{border-radius:999px}
html.ld-cine .rs-body p{font-size:16.5px;line-height:1.75}
html.ld-cine .rs-lock{border:0;box-shadow:var(--card-shadow),inset 0 0 0 1px var(--gold-border);
  background:radial-gradient(70% 120% at 100% 0%,var(--cine-glow),transparent 70%),var(--panel)}
html.ld-cine .rs-byline .brand-mark{box-shadow:0 0 0 3px var(--gold-soft-2)}

/* the footer ends on a big line, as on the home page */
html.ld-cine .site-footer{border-top-color:var(--hair)}
html.ld-cine .site-footer .sf-brand{flex:1 1 100%;max-width:none;padding:clamp(18px,3vw,36px) 0 clamp(18px,3vw,30px);border-bottom:1px solid var(--hair);margin-bottom:6px}
html.ld-cine .site-footer .sf-brand p{font-size:clamp(24px,3.6vw,44px);font-weight:800;letter-spacing:-.045em;line-height:1.05;color:var(--text-strong);max-width:820px;margin-top:16px}
html.ld-cine .site-footer .sf-bottom{border-top-color:var(--hair)}

/* sections rise into view as you scroll (cine.js marks them; without JS everything shows) */
html.ld-cine.ld-cine-rv [data-cine-rv]{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .9s var(--cine-ease) var(--d,0s),transform .9s var(--cine-ease) var(--d,0s),filter .9s ease var(--d,0s)}
html.ld-cine.ld-cine-rv [data-cine-rv].in{opacity:1;transform:none;filter:none}

/* ==== the dashboard ================================================================================================= */
/* sidebar: quieter rules, a glass research card, pill nav items */
html.ld-cine .sidebar-head{border-bottom-color:var(--hair)}
html.ld-cine .research-card{border:0;border-radius:var(--r-md);padding:12px;
  background:radial-gradient(120% 140% at 100% 0%,rgba(45,212,191,.20),transparent 60%),linear-gradient(135deg,rgba(42,120,214,.12),rgba(15,159,138,.12));
  box-shadow:inset 0 0 0 1px var(--gold-border),var(--card-shadow);transition:transform .35s var(--cine-ease),box-shadow .35s}
html.ld-cine .research-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--gold),var(--lift)}
html.ld-cine .nav-search{border-radius:var(--r-sm);border-color:var(--hair);padding:8px 11px;box-shadow:var(--card-shadow)}
html.ld-cine .navitem{border-radius:8px;transition:background .2s,color .2s,padding .25s var(--cine-ease)}
html.ld-cine .navitem:hover{padding-left:10px}
html.ld-cine .navitem.active{background:linear-gradient(90deg,var(--gold-soft-2),transparent);box-shadow:inset 2px 0 0 var(--gold)}
html.ld-cine .navcat-title{letter-spacing:.1em}

/* header: glass search and controls */
html.ld-cine .ss-box{border:1px solid var(--hair);border-radius:var(--r-md);background:var(--glass-panel);box-shadow:var(--card-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.ld-cine .ss-box:focus-within{border-color:var(--gold-border);box-shadow:0 0 0 4px var(--gold-soft-2),var(--card-shadow)}
html.ld-cine .ss-panel, html.ld-cine .health-panel, html.ld-cine .news-panel, html.ld-cine .help-menu, html.ld-cine .export-menu, html.ld-cine .range-pop, html.ld-cine .chart-ctx{
  border-color:var(--hair);border-radius:var(--r-md);box-shadow:0 30px 70px -30px rgba(2,6,23,.55),0 0 0 1px var(--hair);
  background:var(--glass-panel);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);animation:cinePop .22s var(--cine-ease)}
html.ld-cine .health-btn, html.ld-cine .theme-toggle{border-color:var(--hair);background:var(--glass-panel);box-shadow:var(--card-shadow);transition:border-color .2s,transform .2s var(--cine-ease),color .2s}
html.ld-cine .health-btn:hover, html.ld-cine .theme-toggle:hover{border-color:var(--gold-border);transform:translateY(-1px)}
html.ld-cine .header-trial-btn{border-radius:999px;padding:0 16px}
html.ld-cine .header-live .badge.live{display:inline-flex;align-items:center;gap:7px}
html.ld-cine .header-live .badge.live::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;animation:cinePulse 2.4s ease-out infinite}

/* the four sections: floating cards; the open one keeps the gradient and catches a sheen */
html.ld-cine .primary-tabs{gap:12px;margin:4px 0 16px}
html.ld-cine .primary-tab{border:0;border-radius:var(--r-lg);min-height:62px;padding:11px 16px;box-shadow:var(--card-shadow),inset 0 0 0 1px var(--hair);overflow:hidden;
  background:radial-gradient(360px circle at var(--mx,20%) var(--my,-60%),var(--spot),transparent 55%),var(--panel);
  transition:transform .35s var(--cine-ease),box-shadow .35s,background .35s}
html.ld-cine .primary-tab:hover{transform:translateY(-3px);box-shadow:var(--lift),inset 0 0 0 1px var(--gold-border)}
html.ld-cine .primary-tab .pt-icon{border-radius:12px;background:var(--gold-soft-2);color:var(--gold);transition:transform .35s var(--cine-ease)}
html.ld-cine .primary-tab:hover .pt-icon{transform:scale(1.06) rotate(-3deg)}
html.ld-cine .primary-tab.on{background:var(--cine-grad);box-shadow:0 18px 40px -16px rgba(15,159,138,.8),inset 0 1px 0 rgba(255,255,255,.18)}
html.ld-cine .primary-tab.on .pt-icon{background:rgba(255,255,255,.2);color:#fff}
html.ld-cine .primary-tab.on::after{content:'';position:absolute;inset:0;transform:translateX(-120%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:cineSheen 1.1s var(--cine-ease) .15s 1 both;pointer-events:none}

/* "Newly released" and the watchlist: borderless chips with a coloured edge */
html.ld-cine .released-wrap{border:0;border-radius:var(--r-lg);padding:14px 16px 12px;box-shadow:var(--card-shadow),inset 0 0 0 1px var(--hair)}
html.ld-cine .glance-label{letter-spacing:.12em}
html.ld-cine .rel-item, html.ld-cine .stat-tile{border:0;border-radius:12px;box-shadow:inset 3px 0 0 var(--stat-color,var(--gold)),inset 0 0 0 1px var(--hair);
  background:linear-gradient(135deg,color-mix(in srgb,var(--stat-color,var(--gold)) 7%,transparent),transparent 60%),var(--bg);
  transition:transform .3s var(--cine-ease),box-shadow .3s}
html.ld-cine .stat-tile{background:linear-gradient(135deg,color-mix(in srgb,var(--stat-color,var(--gold)) 7%,transparent),transparent 60%),var(--panel);box-shadow:inset 3px 0 0 var(--stat-color,var(--gold)),var(--card-shadow),inset 0 0 0 1px var(--hair)}
html.ld-cine .rel-item:hover, html.ld-cine .stat-tile:hover{transform:translateY(-3px);box-shadow:inset 3px 0 0 var(--stat-color,var(--gold)),inset 0 0 0 1px var(--gold-border),var(--lift)}
html.ld-cine .rel-val, html.ld-cine .stat-val{letter-spacing:-.01em}

/* the bank switcher: a segmented bar with a soft gradient on the open bank */
html.ld-cine .bank-tabs{border:0;border-radius:var(--r-lg);padding:6px;box-shadow:var(--card-shadow),inset 0 0 0 1px var(--hair)}
html.ld-cine .bank-tab{border-radius:12px;transition:background .3s,color .3s,box-shadow .3s}
html.ld-cine .bank-tab:hover{background:var(--gold-soft);border-color:transparent}
html.ld-cine .bank-tab.active{border-color:transparent;background:linear-gradient(120deg,rgba(42,120,214,.13),rgba(15,159,138,.17));box-shadow:inset 0 0 0 1px var(--gold-border),0 10px 24px -16px rgba(15,159,138,.7)}

/* banners */
html.ld-cine .banner{border-radius:var(--r-md);box-shadow:var(--card-shadow)}
html.ld-cine .mom-banner{border-left-width:3px;padding:12px 16px}

/* panels and chart tiles */
html.ld-cine .panel{border:0;border-radius:var(--r-lg);box-shadow:var(--card-shadow),inset 0 0 0 1px var(--hair)}
html.ld-cine .panel.card{background:radial-gradient(420px circle at var(--mx,30%) var(--my,-40%),var(--spot),transparent 55%),var(--panel);
  transition:transform .35s var(--cine-ease),box-shadow .35s}
html.ld-cine .panel.card:hover{transform:translateY(-3px);box-shadow:var(--lift),inset 0 0 0 1px var(--gold-border)}
html.ld-cine .grid{gap:16px}
html.ld-cine .card-title{letter-spacing:-.005em}
html.ld-cine .card-val .v{letter-spacing:-.02em}
html.ld-cine .expand-btn{border-color:var(--hair);border-radius:8px;transition:color .2s,border-color .2s,background .2s,transform .2s var(--cine-ease)}
html.ld-cine .expand-btn:hover{background:var(--gold-soft);transform:translateY(-1px)}
html.ld-cine .ranges button{border-radius:999px;transition:color .2s,background .2s}
html.ld-cine .ranges button.on{background:var(--gold-soft-2);box-shadow:inset 0 0 0 1px var(--gold-border);border-color:transparent}
html.ld-cine #sections .grid > .panel.card{animation:cineRise .55s var(--cine-ease) backwards}
html.ld-cine #sections .grid > .panel.card:nth-child(2){animation-delay:.04s}
html.ld-cine #sections .grid > .panel.card:nth-child(3){animation-delay:.08s}
html.ld-cine #sections .grid > .panel.card:nth-child(n+4){animation-delay:.12s}

/* the Global Liquidity hero: the home page's glow, a gradient figure and a glowing line */
html.ld-cine #hero{padding:24px 24px 18px;border-radius:var(--r-xl);
  background:radial-gradient(60% 70% at 92% 0%,var(--cine-glow),transparent 72%),radial-gradient(45% 60% at 0% 0%,var(--cine-glow-2),transparent 70%),var(--panel)}
html.ld-cine #hero .card-title{font-size:17px;letter-spacing:-.02em}
html.ld-cine #hero .card-val .v{font-size:clamp(32px,3.2vw,44px);font-weight:800;letter-spacing:-.045em;
  background:var(--cine-text-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html.ld-cine #hero .chartbox svg path[fill="none"]{filter:drop-shadow(0 0 5px var(--cine-glow))}
html.ld-cine #hero .hero-free{box-shadow:0 0 14px -4px var(--gold)}

/* section headings: the home page's kicker */
html.ld-cine .section-head{align-items:center;margin:40px 0 16px}
html.ld-cine .section-title{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-strong)}
html.ld-cine .section-title::before{content:'';width:24px;height:2px;border-radius:2px;flex:none;background:linear-gradient(90deg,var(--cine-a),var(--cine-b))}
html.ld-cine .section-count{font-weight:700;color:var(--gold);background:var(--gold-soft);border-radius:999px;padding:1px 8px;font-size:10px}
html.ld-cine .subcat-head{border-top:1px solid var(--hair);letter-spacing:.1em}
html.ld-cine .view-title{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.035em;line-height:1.1}

/* chips, toggles, toolbars */
html.ld-cine .tag-chip, html.ld-cine .mine-tab, html.ld-cine .toolbar-btn, html.ld-cine .view-toggle, html.ld-cine .section-toggle, html.ld-cine .mine-btn:not(.primary), html.ld-cine .tile-unlock-btn{
  border-color:var(--hair);box-shadow:var(--card-shadow);transition:border-color .2s,color .2s,background .2s,transform .25s var(--cine-ease)}
html.ld-cine .tag-chip{border-radius:999px;padding:6px 13px}
html.ld-cine .tag-chip:hover, html.ld-cine .toolbar-btn:hover, html.ld-cine .mine-btn:not(.primary):hover{transform:translateY(-1px);border-color:var(--gold-border)}
html.ld-cine .tag-chip.on, html.ld-cine .mine-tab[aria-selected="true"], html.ld-cine .mine-tab.on{background:linear-gradient(120deg,rgba(42,120,214,.12),rgba(15,159,138,.16));border-color:var(--gold-border);color:var(--gold)}
html.ld-cine .view-toggle{border-radius:999px;padding:3px}
html.ld-cine .view-toggle button{border-radius:999px}
html.ld-cine .view-toggle button[aria-pressed="true"]{background:var(--cine-grad);color:#fff}
html.ld-cine .toolbar-btn, html.ld-cine .mine-btn{border-radius:999px}
html.ld-cine .tile-unlock-btn{border-radius:999px;border-color:var(--gold-border)}
html.ld-cine .tile-unlock-btn:hover{background:var(--cine-grad);color:#fff;border-color:transparent}

/* sheets: a blurred backdrop, rounded glass sheets that rise in */
html.ld-cine .modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.ld-cine .modal, html.ld-cine .auth-card, html.ld-cine .terms-card{border:0;border-radius:var(--r-xl);
  background:radial-gradient(60% 50% at 92% 0%,var(--cine-glow),transparent 72%),radial-gradient(45% 45% at 0% 0%,var(--cine-glow-2),transparent 70%),var(--panel);
  box-shadow:var(--sheet-shadow),inset 0 0 0 1px var(--gold-border)}
html.ld-cine .modal-overlay.open .modal, html.ld-cine .auth-overlay.open .auth-card, html.ld-cine .terms-overlay.open .terms-card{animation:cineSheet .45s cubic-bezier(.2,.8,.2,1) backwards}
html.ld-cine .modal-title{font-size:19px;font-weight:800;letter-spacing:-.025em}
html.ld-cine .modal-close, html.ld-cine .rp-x{border-radius:999px;border-color:var(--hair);transition:transform .3s var(--cine-ease),color .2s,border-color .2s}
html.ld-cine .modal-close:hover{transform:rotate(90deg);border-color:var(--gold-border)}
html.ld-cine .modal-close.modal-export-btn:hover{transform:translateY(-1px)}
html.ld-cine .upgrade-price{letter-spacing:-.03em}
html.ld-cine .settings-section{border-color:var(--hair)}
html.ld-cine .auth-tabs{border-radius:999px}

/* toasts and tips */
html.ld-cine .toast{border:0;border-radius:var(--r-md);background:var(--glass-panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 50px -24px rgba(2,6,23,.6),inset 0 0 0 1px var(--gold-border),inset 3px 0 0 var(--gold);animation:cinePop .3s var(--cine-ease)}
html.ld-cine .toast-wrap{z-index:450}
html.ld-cine .tip{border-radius:12px;box-shadow:0 18px 40px -18px rgba(2,6,23,.7)}

/* custom charts, alerts, my dashboards, comparisons */
html.ld-cine .custom-chart-card, html.ld-cine .cmp-panel, html.ld-cine .pos-panel, html.ld-cine .mine-item{border-radius:var(--r-lg)}
html.ld-cine .pos-panel{border:0;box-shadow:var(--card-shadow),inset 0 0 0 1px var(--gold-border);
  background:radial-gradient(60% 80% at 100% 0%,var(--cine-glow),transparent 70%),var(--panel)}
html.ld-cine .alert-row{border-radius:12px}
html.ld-cine .mine-empty, html.ld-cine .view-lock, html.ld-cine .empty-note{border-radius:var(--r-lg)}
html.ld-cine .view-lock{border:0;box-shadow:var(--card-shadow),inset 0 0 0 1px var(--gold-border);
  background:radial-gradient(70% 120% at 100% 0%,var(--cine-glow),transparent 70%),radial-gradient(50% 120% at 0% 100%,var(--cine-glow-2),transparent 70%),var(--panel)}
html.ld-cine .view-lock-icon{background:var(--cine-grad);color:#fff;box-shadow:0 14px 30px -14px rgba(15,159,138,.9)}

/* the dashboard footer */
html.ld-cine .app-footer, html.ld-cine .main .site-footer{border-top-color:var(--hair)}

/* ---- motion ---------------------------------------------------------------------------------------------------------- */
@keyframes cineRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cineSheet{from{opacity:0;transform:translateY(22px) scale(.975)}to{opacity:1;transform:none}}
@keyframes cinePop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cineSheen{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(120%) skewX(-20deg)}}
@keyframes cinePulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion: reduce){
  html.ld-cine *, html.ld-cine *::before, html.ld-cine *::after{animation:none!important;transition:none!important}
  html.ld-cine.ld-cine-rv [data-cine-rv]{opacity:1;transform:none;filter:none}
}

/* ---- phones ---------------------------------------------------------------------------------------------------------- */
@media (max-width:860px){
  html.ld-cine .primary-tabs{gap:8px}
  html.ld-cine .primary-tab{min-height:0;border-radius:var(--r-md)}
  html.ld-cine #hero{padding:18px 16px 14px}
  html.ld-cine .bank-tabs{border-radius:var(--r-md)}
}
@media (max-width:640px){
  html.ld-cine article > h1, html.ld-cine .rs-head h1, html.ld-cine .page-head h1{font-size:clamp(34px,10vw,44px)}
  html.ld-cine .site-footer .sf-brand p{font-size:clamp(22px,7vw,30px)}
  html.ld-cine article .card:hover, html.ld-cine article .stat:hover, html.ld-cine .rs-item:hover, html.ld-cine .panel.card:hover, html.ld-cine .primary-tab:hover{transform:none}
  html.ld-cine .cine-badge{left:12px;bottom:calc(12px + env(safe-area-inset-bottom));font-size:11px;padding:6px 6px 6px 12px}
}