/* ============ THE WARM GRADE ============
   Loaded last. Ivory ground with a paper texture, deep warm-navy bands, an editorial serif for
   display, ember as the human accent beside cobalt as the system accent. The page should feel
   like a good print magazine lit by a window, not a lab. */
:root{
  --paper:#F3EDE3;            /* ivory */
  --paper-2:#EAE2D4;          /* stone */
  --white:#FBF8F2;            /* pane, warm */
  --ink:#141A2B;              /* warm navy ink */
  --ink-70:#2E3648;           /* secondary text - Ben: text must POP off the paper, not lie on it */
  --ink-45:#5E6576;           /* tertiary text, labels - AA 4.54:1 on paper */
  --bone:#F3EDE3;             /* light text on dark footage and bands */
  --navy:#0F1424;             /* the band ground */
  --cobalt:#2A45D8;           /* system accent */
  --ember:#C4742B;            /* human accent: warm moments only */
  --ember-ink:#925620;        /* ember for SMALL text only - AA 4.57:1; --ember stays the display accent */
  --sky:#E3DCCB;
  --mint:#E7E1D4;
  --champagne:#F1E3C8;
  --line:rgba(20,26,43,.1);
  --line-strong:rgba(20,26,43,.22);
  --shadow-float:0 60px 120px -40px rgba(20,26,43,.32), 0 24px 48px -24px rgba(20,26,43,.18);
  --veil:rgba(243,237,227,.72);
  --display:'Zodiak',Georgia,'Times New Roman',serif;
  --body:'General Sans',sans-serif;
  --mono:'JetBrains Mono',monospace;
}
html{color-scheme:light}
body{background:var(--paper)}
/* paper: a real texture, not flat white */
.grain{opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.28 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E")}
/* light moves: a slow warm/cobalt aurora behind everything */
.sky{display:block}
.orb{display:block;filter:none;opacity:.5;background:none !important}
.orb-a{background:radial-gradient(circle,var(--champagne) 0%,rgba(241,227,200,.35) 30%,transparent 62%) !important}
.orb-b{background:radial-gradient(circle,color-mix(in srgb,var(--cobalt) 16%,var(--paper)) 0%,transparent 62%) !important}
.orb-c{background:radial-gradient(circle,color-mix(in srgb,var(--ember) 20%,var(--paper)) 0%,transparent 62%) !important}
.orb-a{background:var(--champagne);width:70vw;height:70vw;top:-25vw;right:-18vw;animation-duration:38s}
.orb-b{background:color-mix(in srgb,var(--cobalt) 22%,var(--paper));width:56vw;height:56vw;bottom:-22vw;left:-16vw;animation-duration:44s}
.orb-c{background:color-mix(in srgb,var(--ember) 28%,var(--paper));width:40vw;height:40vw;top:36vh;left:38vw;opacity:.38;animation-duration:52s}

/* type: serif display with real weight, tighter measure, italics for emphasis */
h1,h2,h3,.hero-h,.ptitle,.sec-title,.card h1,.card h2,.scene-copy h2,.bigfoot h2,.roi-num,.stat b,.pr-metrics b,.case-metrics b,.scene-facts b,.proof-nums b,.tier-price b,.svc-proof b,.founder b,.pf-body b,.ind b,.qstrip-copy b,.reel b,.cover b,.spine-title,.reader-cover h2,.mani-line,.who-card h3,.how-steps h3,.path h2,.tier h2,.svc-body h3,.srow h3,.pubs h3,.lib-sub h3,.qq-panel h2,.faq-list summary,.sc-qs>li>span,.sc-head h2,.morph-label,.morph-copy h2,.pane-body h3,.scard h3,.pr-close,.who-note,.legal h2,.nf h1{font-family:var(--display);font-weight:500;letter-spacing:-.015em}
.card h1,.card h2,.ptitle,.hero-h{font-weight:500;letter-spacing:-.02em;line-height:1.02}
.sec-title{font-weight:500;letter-spacing:-.015em}
em,.card em,.bigfoot h2 em,.ptitle em{font-style:italic;font-weight:400;color:var(--cobalt)}
.logo{font-family:var(--display);font-weight:700;letter-spacing:.02em;font-size:21px}
.pre-logo{font-family:var(--display)}
/* fewer mono labels: kickers become small serif caps */
.kicker,.eyebrow,.srow-code,.how-when,.who-role,.case-kind,.pr-role,.path-num,.spine-num,.pane-url,.pane-live,.film-foot,.scene-label,.proof-stamp,.hero-foot,.tier-price span,.svc-who b,.where-list dt,.steps b,.field label,.roi-in label span,.cmp th,.pf-body em,.ind-go,.path-go,.ticker-track,.lib-filter button,.svc-index a,.pubs .srow-code,.qq-pill,.reader-cover small,.reader-foot .kicker,.term-line b{font-family:var(--body);letter-spacing:.14em;font-weight:500}
.qq-pill{letter-spacing:0;font-weight:500}
.pulse{background:var(--ember)}
.kicker .pulse,.eyebrow .pulse{background:var(--ember)}

/* human moments get ember, system moments keep cobalt */
.founder q{color:var(--ink);font-family:var(--display);font-style:italic;font-weight:400;font-size:16px}
.how-steps li:first-child h3{color:var(--ember)}
.svc-proof b{color:var(--ember)}
.roi-num{color:var(--ember)}
.tier-hot{outline-color:var(--ember)}
.tier-hot .srow-code{color:var(--ember)}
.path-hot{outline-color:var(--ember)}
.path-hot .path-num{color:var(--ember)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-line{background:rgba(251,248,242,.7);border-color:var(--line-strong)}
.nav.scrolled{background:rgba(243,237,227,.82)}
.qq-pill{background:var(--ember-ink);border-color:var(--ember-ink);color:var(--paper)}
.qq-pill .pulse{background:var(--paper)}

/* bands: deep warm navy, warm light inside */
.band{--ember-ink:#C4742B;--paper:#0F1424;--paper-2:#171D31;--white:#1B2238;--ink:#F3EDE3;--ink-70:#E4DED2;--ink-45:#8C8FA3;--cobalt:#697FFF;
  --line:rgba(243,237,227,.1);--line-strong:rgba(243,237,227,.24);--veil:rgba(15,20,36,.72);
  background:radial-gradient(ellipse 60% 50% at 80% 10%,rgba(200,119,44,.14),transparent 60%),radial-gradient(ellipse 50% 60% at 10% 90%,rgba(42,69,216,.16),transparent 60%),var(--paper)}
.band .btn-ink{background:var(--bone);color:var(--navy);border-color:var(--bone)}
.bigfoot.band h2 em{color:var(--ember)}

/* scenes: warm veil, and the copy sits on a darker glass so footage can be bright */
.scene-media::after{background:linear-gradient(90deg,rgba(20,26,43,.62) 0%,rgba(20,26,43,.28) 50%,rgba(20,26,43,.04) 100%),
  linear-gradient(0deg,var(--paper) 0%,transparent 22%,transparent 88%,rgba(20,26,43,.35) 100%)}
.scene.flip .scene-media::after{background:linear-gradient(270deg,rgba(20,26,43,.62) 0%,rgba(20,26,43,.28) 50%,rgba(20,26,43,.04) 100%),
  linear-gradient(0deg,var(--paper) 0%,transparent 22%,transparent 88%,rgba(20,26,43,.35) 100%)}
.scene-copy h2,.scene-copy p,.scene-copy .scene-facts li,.scene-copy .scene-facts b,.scene-copy .kicker{color:var(--bone)}
.scene-copy .scene-facts b{color:var(--bone)}
.scene-copy .btn-line{background:rgba(243,237,227,.12);color:var(--bone);border-color:rgba(243,237,227,.35)}
.scene-media video,.scene-media img{filter:none}

/* the film stage: warm window light instead of a flat field */
.film-stage::before{background:radial-gradient(ellipse 60% 70% at 78% 35%,rgba(200,119,44,.16),transparent 65%),radial-gradient(ellipse 50% 50% at 15% 95%,rgba(42,69,216,.12),transparent 65%)}
.card-right::before,.card-left::before{background:radial-gradient(ellipse at 50% 50%,rgba(243,237,227,.86),rgba(243,237,227,.5) 55%,transparent 78%)}
/* .field opacity removed: it blended labels to 4.08:1, below AA */

/* panes get a paper edge instead of a hairline */
.pane{border-color:rgba(20,26,43,.12);box-shadow:var(--shadow-float)}
.shelf-board{background:linear-gradient(180deg,#D9CDB8,#C7B99F)}

/* the last frame: sunrise over the Wasatch behind the type */
.bigfoot{position:relative;overflow:hidden}
.bigfoot-media{position:absolute;inset:0;z-index:0}
.bigfoot-media video{width:100%;height:100%;object-fit:cover;display:block;opacity:.55}
.bigfoot-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,20,36,.55),rgba(15,20,36,.35) 50%,rgba(15,20,36,.85))}
.bigfoot>*:not(.bigfoot-media){position:relative;z-index:1}