/* ==========================================================================
   CitedEdge — citededge.com
   Design system: "editorial instrument"
   Warm paper, logo blue, high-contrast serif display, mono data labels,
   no background column rules. No gradient hero, no centred-slab layout.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --paper:        #FBFBF9;   /* taken from the logo background */
  --paper-2:      #F3F2ED;
  --paper-3:      #EDECE6;
  --ink:          #101720;
  --ink-soft:     #38424F;
  --muted:        #6E7783;
  --graphite:     #A9AFB8;
  --blue:         #2E37FE;   /* taken from the logo mark */
  --blue-dark:    #0C16DF;
  --blue-deep:    #080B45;
  --blue-tint:    #E6E7FE;
  --blue-wash:    #EBECFE;   /* light blue card fill, reads off both paper tones */
  --blue-wash-line: #CED0F8;
  --amber:        #9C5620;

  --rule:         rgba(16,23,32,.10);
  --rule-strong:  rgba(16,23,32,.17);
  --rule-inv:     rgba(251,251,249,.16);

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans:  'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shell: 1220px;
  --pad:   clamp(20px, 5vw, 56px);

  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Newsreader is variable (opsz 6..72, wght 500..800). It is used instead of a
   high-contrast display serif because its lowercase "f" is conventional: no
   overhanging ball terminal colliding with the next letter.
   --serif-vf stays defined so every heading rule can keep referencing it. */
:root{ --serif-vf:normal; }
h1,h2,h3,h4{ font-variation-settings:var(--serif-vf); }
i,em,cite,address,var,dfn{ font-style:normal; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18.5px;
  line-height:1.6;
  font-weight:450;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--blue); color:var(--paper); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 18px;
}
.skip:focus{ left:12px; top:12px; }

:where(a,button,input,textarea):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:2px;
}

/* ── layout helpers ─────────────────────────────────────────────────────── */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.mono-label{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
}

/* ── page texture: grain ────────────────────────────────────────────────── */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.32; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
/* the fixed vertical hairline overlay (.rules) was removed by request —
   the page now sits on plain paper with no column rules behind it */

.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120; pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--blue-dark),var(--blue));
  box-shadow:0 0 12px rgba(46,55,254,.55);
}

/* ── reveal on scroll ───────────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .78s var(--ease-out), transform .78s var(--ease-out);
  transition-delay:calc(var(--rd, 0) * 90ms);
}
.reveal.in{ opacity:1; transform:none; }

/* hero load-in uses data-d for stagger */
.hero .reveal[data-d="0"]{ --rd:0 } .hero .reveal[data-d="1"]{ --rd:1 }
.hero .reveal[data-d="2"]{ --rd:2 } .hero .reveal[data-d="3"]{ --rd:3 }
.hero .reveal[data-d="4"]{ --rd:4 }

/* ══════════════════════════ BUTTONS ══════════════════════════ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.62em;
  padding:17px 30px;
  border:0; border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-family:var(--sans);
  font-size:16px; font-weight:650; letter-spacing:-.005em;
  cursor:pointer;
  isolation:isolate;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s;
  box-shadow:
    0 10px 24px -14px rgba(46,55,254,.5),
    0 1px 3px -1px rgba(16,23,32,.2);
}
.btn svg{ width:16px; height:16px; flex:none; transition:transform .4s var(--ease-out); }
.btn > span{ position:relative; z-index:2; }

/* flat cobalt: no bloom, no sheen, no gradient on the button face */
.btn-glow:hover{
  background:var(--blue-dark);
  transform:translateY(-2px);
  box-shadow:
    0 18px 38px -16px rgba(46,55,254,.55),
    0 2px 6px -2px rgba(16,23,32,.22);
}
.btn-glow:hover svg{ transform:translateX(4px); }
.btn-glow:active{ transform:translateY(0); }

.btn-lg{ padding:21px 38px; font-size:18px; }
.btn-sm{ padding:12px 19px; font-size:13.2px; font-weight:650; letter-spacing:.008em; }
.btn-sm svg{ width:14px; height:14px; }
.btn-block{ width:100%; justify-content:center; margin-top:6px; }

/* ══════════════════════════ TRADEMARK ══════════════════════════ */
/* The wordmark PNG is cropped tight to the ink, and the final "e" starts 22.9%
   down from the top. Anchoring the TM at bottom:77% therefore rests it exactly
   on that letter's top edge, at any logo size. --tm sets the type size. */
.wordmark{ position:relative; display:inline-block; line-height:0; }
.wordmark img{ display:block; }
.tm{
  position:absolute; left:calc(100% + .22em); bottom:77%;
  font-family:var(--sans); font-weight:650; line-height:1;
  font-size:var(--tm,7px); letter-spacing:.03em;
  color:currentColor; white-space:nowrap;
}
.brand .tm,.foot-brand .tm{ color:var(--blue); }

/* superscript mark for running text and button labels */
.tm-sup{
  font-size:.5em; font-weight:650; letter-spacing:.03em;
  vertical-align:baseline; position:relative; top:-.62em;
  margin-left:.1em; line-height:0;
}

/* ══════════════════════════ HEADER ══════════════════════════ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .35s, box-shadow .35s, background .35s;
}
.site-header.stuck{
  border-bottom-color:var(--rule);
  box-shadow:0 10px 30px -26px rgba(16,23,32,.55);
}
.header-inner{
  display:flex; align-items:center; gap:28px;
  height:78px;
  transition:height .35s var(--ease);
}
.site-header.stuck .header-inner{ height:66px; }

.brand{ flex:none; display:block; }
.brand img{ height:22px; width:auto; transition:height .35s var(--ease); }
.site-header.stuck .brand img{ height:19px; }

.nav{ display:flex; gap:30px; margin-left:auto; }
.nav a{
  position:relative;
  font-size:15.2px; font-weight:550; color:var(--ink-soft);
  padding-block:4px;
  transition:color .25s;
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--blue);
  transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease-out);
}
.nav a:hover{ color:var(--blue); }
.nav a:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:12px; flex:none; }

/* flex, not grid: auto grid rows stretch inside the fixed height and push the
   two bars ~20px apart, which stops them meeting to form the X when open */
.burger{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid var(--rule-strong); border-radius:8px;
  background:transparent; cursor:pointer; padding:0;
}
.burger i{ display:block; width:17px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.burger i + i{ margin-top:5px; }
.burger[aria-expanded="true"] i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.mobile-nav{
  border-top:1px solid var(--rule);
  padding:14px var(--pad) 26px;
  display:grid; gap:2px;
  background:var(--paper);
}
.mobile-nav[hidden]{ display:none; }
@media (min-width:721px){ .mobile-nav{ display:none !important; } }
.mobile-nav a{ padding:14px 2px; font-size:18px; font-weight:550; border-bottom:1px solid var(--rule); }
.mobile-nav .mobile-cta{
  margin-top:16px; border:0; border-radius:999px;
  background:var(--blue); color:#fff; text-align:center;
  padding:17px; font-size:15.4px; font-weight:650;
  box-shadow:0 12px 28px -14px rgba(46,55,254,.7);
}

/* ══════════════════════════ 1 · HERO ══════════════════════════ */
.hero{ position:relative; z-index:2; padding-top:clamp(56px,7.5vw,104px); }
.hero-bloom{
  position:absolute; top:-160px; right:-8%; width:min(720px,70vw); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(46,55,254,.13), rgba(46,55,254,0) 62%);
  pointer-events:none; z-index:-1;
  filter:blur(6px);
}
.hero-head{ padding-bottom:clamp(26px,3.2vw,44px); }
.hero-grid{
  display:grid;
  grid-template-columns:1fr minmax(0,.86fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
  padding-bottom:clamp(48px,6vw,84px);
}

.eyebrow{
  display:flex; align-items:center; gap:10px;
  margin:0 0 26px;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.185em; text-transform:uppercase;
  color:var(--blue);
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none;
  box-shadow:0 0 0 0 rgba(46,55,254,.5);
  animation:ping 2.4s var(--ease-out) infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(46,55,254,.5); }
  70%{ box-shadow:0 0 0 9px rgba(46,55,254,0); }
  100%{ box-shadow:0 0 0 0 rgba(46,55,254,0); }
}

h1{
  margin:0;
  max-width:20ch;
  font-family:var(--serif); font-weight:650;
  font-variation-settings:var(--serif-vf);
  font-size:clamp(3rem,6.4vw,5.9rem);
  line-height:.99;
  letter-spacing:-.021em;
  text-wrap:balance;
}
h1 b{ font-weight:inherit; color:var(--blue); }

.lede{
  margin:0 0 34px;
  max-width:33em;
  font-size:clamp(19px,1.5vw,22px);
  line-height:1.55;
  font-weight:450;
  color:var(--ink-soft);
}

.hero-copy{ display:flex; flex-direction:column; height:100%; }
.hero-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }


/* ── the answer panel (signature element) ───────────────────────────────── */
.hero-panel{ position:relative; }
.panel{
  position:relative;
  background:#fff;
  border:1px solid var(--rule-strong);
  border-radius:16px;
  box-shadow:
    0 1px 2px rgba(16,23,32,.05),
    0 26px 54px -30px rgba(16,23,32,.34),
    0 60px 90px -70px rgba(46,55,254,.5);
  overflow:hidden;
}
.panel::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(46,55,254,.045), transparent 26%);
}
.panel-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--rule);
  background:var(--paper);
}
.panel-tag{
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--rule-strong); border-radius:4px;
  padding:3px 7px;
}
.panel-live{
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
}
.panel-live i{
  width:6px; height:6px; border-radius:50%; background:var(--blue);
  animation:blink 1.5s steps(1,end) infinite;
}
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.22} }

.panel-prompt{
  display:flex; align-items:center; gap:10px;
  padding:16px;
  border-bottom:1px solid var(--rule);
  color:var(--muted);
}
.panel-prompt svg{ width:15px; height:15px; flex:none; }
.panel-prompt p{
  margin:0; font-size:15.4px; font-weight:500; color:var(--ink);
  min-height:1.5em;
}
.panel-prompt p::after{
  content:''; display:inline-block; width:1.5px; height:1em;
  background:var(--blue); margin-left:2px; vertical-align:-.14em;
  animation:caret .9s steps(1,end) infinite;
}
.panel-prompt.done p::after{ display:none; }
@keyframes caret{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

.panel-body{ padding:18px 16px 16px; }
.panel-answer{
  margin:0 0 16px;
  font-size:15.4px; line-height:1.55; color:var(--ink-soft);
  min-height:1.5em;
}

.panel-results{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.res{
  position:relative;
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 14px;
  border:1px solid var(--rule);
  border-radius:11px;
  background:var(--paper);
  opacity:0; transform:translateY(10px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out), border-color .3s, box-shadow .3s;
}
.res.on{ opacity:1; transform:none; }
.res-rank{
  font-family:var(--mono); font-size:11px; font-weight:500;
  color:var(--graphite); padding-top:2px; flex:none;
}
.res-main{ min-width:0; }
.res-name{ margin:0 0 3px; font-size:15.4px; font-weight:650; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.res-desc{ margin:0; font-size:13.6px; line-height:1.48; color:var(--muted); }
.res-badge{
  font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-tint);
  border-radius:4px; padding:3px 6px;
}
.res-tick{ width:19px; height:19px; flex:none; color:var(--blue); margin-left:auto; }
.res-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.res-chips span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  color:var(--ink-soft); background:#fff;
  border:1px solid var(--rule-strong); border-radius:20px;
  padding:3px 8px;
}
.res-win{
  border-color:rgba(46,55,254,.34);
  background:linear-gradient(180deg,#fff,var(--blue-tint));
  box-shadow:0 10px 24px -18px rgba(46,55,254,.7);
}
.blurred{ filter:blur(2.6px); user-select:none; }

.panel-foot{
  display:flex; align-items:center; gap:8px;
  margin:15px 0 0; padding-top:13px;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  opacity:0; transition:opacity .5s var(--ease-out);
}
.panel-foot.on{ opacity:1; }
.panel-foot svg{ width:13px; height:13px; }

/* ── engine marquee ─────────────────────────────────────────────────────── */
.engines{ border-top:1px solid var(--rule); padding:26px 0 34px; }
.engines-head{ margin-bottom:16px; }
.marquee{ position:relative; overflow:hidden; }
.marquee::before,.marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:110px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,var(--paper),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--paper),transparent); }
/* driven by Element.animate in app.js: enough copies are cloned to cover the
   viewport plus one set, and the shift is exactly one set width, so the loop
   never shows a gap. It does not pause on hover. */
.marquee-track{ display:flex; width:max-content; will-change:transform; }
.marquee-set{ display:flex; align-items:center; gap:clamp(38px,5vw,78px); padding-right:clamp(38px,5vw,78px); }
.engine{
  display:flex; align-items:center; gap:11px;
  font-size:18.5px; font-weight:650; letter-spacing:-.01em;
  color:var(--ink); opacity:.5;
  transition:opacity .3s, color .3s;
  white-space:nowrap;
}
.engine svg{ width:21px; height:21px; flex:none; }
.engine:hover{ opacity:1; color:var(--blue); }

/* ══════════════════════════ SHARED SECTION SHELL ══════════════════════════ */
.sec{ position:relative; z-index:2; padding:clamp(66px,7.6vw,114px) 0; }
.sec-tint{ background:var(--paper-2); border-block:1px solid var(--rule); }

/* rails removed: section content now runs from the shell edge like every other
   section, so the whole page shares one left alignment */
.sec-grid{ display:block; }
/* sections span the full shell; individual text blocks keep their own
   reading measure so line length stays comfortable */
.sec-body{ max-width:none; }

/* the removed "Section 0X" labels are replaced by a plain blue rule, so the
   sections keep their rhythm without exposing internal headings */
h2{
  position:relative;
  margin:0 0 28px; padding-top:30px;
  max-width:28ch;
  font-family:var(--serif); font-weight:650;
  font-variation-settings:var(--serif-vf);
  font-size:clamp(2.2rem,4.1vw,3.55rem);
  line-height:1.1;
  letter-spacing:-.019em;
  text-wrap:balance;
}
h2::before{
  content:''; position:absolute; top:0; left:0;
  width:46px; height:3px; border-radius:3px; background:var(--blue);
}
h2 b{ font-weight:inherit; color:var(--blue); }

h3{
  margin:0 0 10px;
  font-family:var(--sans); font-weight:650;
  font-size:21.5px; line-height:1.3; letter-spacing:-.014em;
}

.lead{
  margin:0 0 28px;
  font-size:clamp(19px,1.5vw,22px);
  line-height:1.55; font-weight:450; color:var(--ink-soft);
  max-width:32em;
}
.body{ margin:0 0 26px; color:var(--ink-soft); max-width:34em; }

.sec-tint 
.statement{
  margin:38px 0 0; padding-left:22px;
  border-left:2px solid var(--blue);
  font-size:clamp(19px,1.55vw,22.5px);
  line-height:1.5; font-weight:550;
  letter-spacing:-.011em; color:var(--ink);
  max-width:31em;
}

/* ── graphic: ten links → three names ───────────────────────────────────── */
.collapse-graphic{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(16px,2.6vw,34px);
  align-items:center;
  margin:38px 0 0;
  padding:clamp(22px,3vw,32px);
  background:#fff; border:1px solid var(--rule); border-radius:14px;
}
.cg-col{ min-width:0; }
.cg-col .mono-label{ margin-bottom:14px; font-size:10px; }
.cg-links{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.cg-links li{
  height:8px; border-radius:4px; background:var(--paper-3);
  position:relative; overflow:hidden;
  width:calc(100% - var(--w,0px));
  transition:opacity .5s var(--ease-out);
}
.cg-links li:nth-child(1){ --w:6% } .cg-links li:nth-child(2){ --w:18% }
.cg-links li:nth-child(3){ --w:10% } .cg-links li:nth-child(4){ --w:26% }
.cg-links li:nth-child(5){ --w:14% } .cg-links li:nth-child(6){ --w:32% }
.cg-links li:nth-child(7){ --w:22% } .cg-links li:nth-child(8){ --w:40% }
.cg-links li:nth-child(9){ --w:30% } .cg-links li:nth-child(10){ --w:46% }
.cg-links li::after{
  content:''; position:absolute; left:0; top:50%; height:1px; width:0;
  background:var(--graphite); transform:translateY(-50%);
  transition:width .6s var(--ease-out);
}
.in .cg-links li::after{ width:100%; }
.in .cg-links li:nth-child(n+4){ opacity:.42; }
.in .cg-links li:nth-child(n+8){ opacity:.2; }
.cg-links li:nth-child(1)::after{ transition-delay:.05s } .cg-links li:nth-child(2)::after{ transition-delay:.1s }
.cg-links li:nth-child(3)::after{ transition-delay:.15s } .cg-links li:nth-child(4)::after{ transition-delay:.2s }
.cg-links li:nth-child(5)::after{ transition-delay:.25s } .cg-links li:nth-child(6)::after{ transition-delay:.3s }
.cg-links li:nth-child(7)::after{ transition-delay:.35s } .cg-links li:nth-child(8)::after{ transition-delay:.4s }
.cg-links li:nth-child(9)::after{ transition-delay:.45s } .cg-links li:nth-child(10)::after{ transition-delay:.5s }
.cg-page{ margin-top:12px; font-size:9.5px; color:var(--graphite); text-decoration:line-through; }

.cg-arrow{ color:var(--blue); }
.cg-arrow svg{ width:72px; height:22px; }
.cg-path{ stroke-dasharray:64; stroke-dashoffset:64; transition:stroke-dashoffset .9s var(--ease-out) .25s; }
.in .cg-path{ stroke-dashoffset:0; }

.cg-names{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.cg-names li{ display:flex; align-items:center; gap:11px; }
.cg-rank{ font-family:var(--mono); font-size:10.5px; color:var(--blue); flex:none; }
.cg-bar{
  height:12px; border-radius:6px; flex:1;
  background:linear-gradient(90deg,var(--blue),rgba(46,55,254,.28));
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease-out);
}
.cg-names li:nth-child(1) .cg-bar{ transition-delay:.45s }
.cg-names li:nth-child(2) .cg-bar{ transition-delay:.58s; opacity:.6 }
.cg-names li:nth-child(3) .cg-bar{ transition-delay:.71s; opacity:.38 }
.in .cg-bar{ transform:scaleX(1); }
.cg-reasons{ margin-top:12px; font-size:9.5px; color:var(--blue); }

/* ── the stakes: specialist vs question mark ────────────────────────────── */
.stake-pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,2vw,22px);
  margin-top:34px;
}
.stake{
  position:relative; overflow:hidden;
  padding:clamp(22px,2.6vw,28px);
  background:var(--paper); border:1px solid var(--rule-strong);
  border-radius:14px;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
}
.sec-tint .stake{ background:#fff; }
.stake header{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.stake-ico{ width:26px; height:26px; flex:none; }
.stake h3{ margin:0; font-size:20px; }
.stake-sample{
  margin:0 0 18px; padding:15px 17px;
  background:var(--paper-2); border-radius:10px;
  font-size:15px; line-height:1.52; font-weight:450; color:var(--ink-soft);
  border-left:2px solid var(--rule-strong);
}
.sec-tint .stake-sample{ background:var(--paper-2); }
.stake-good .stake-ico{ color:var(--blue); }
.stake-good{ border-color:rgba(46,55,254,.3); }
.stake-good .stake-sample{ border-left-color:var(--blue); }
.stake-bad .stake-ico{ color:var(--amber); }
.stake-bad .stake-sample{ border-left-color:var(--amber); }
.stake:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -34px rgba(16,23,32,.42); }

/* mouse-tracked spotlight (applied to .spot elements) */
.spot{ position:relative; }
.spot::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(46,55,254,.09), transparent 62%);
  opacity:0; transition:opacity .4s;
}
.spot:hover::after{ opacity:1; }

/* ══════════════════════════ 5 · HOW IT WORKS (4 boxes) ══════════════════════════ */
.how-head{ max-width:40em; margin-bottom:clamp(38px,5vw,58px); }
.how-head .lead{ margin-bottom:0; }
.how-head .mono-label{ margin-bottom:20px; }
.how-head h2{ margin-bottom:16px; }

/* a sequence, not a checklist: four equal boxes on one row, joined by
   chevrons in the gaps. 2x2 on tablet, single column on phones. */
.how-grid{
  position:relative;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
  align-items:stretch;
}

.box{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(20px,2.1vw,26px);
  background:var(--blue-wash);
  border:1px solid var(--blue-wash-line);
  border-radius:14px;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .35s, background .35s;
}
.sec-tint .box{ background:var(--blue-wash); }
/* chevron joining each box to the next, sitting in the grid gap */
.box:not(:last-child)::after{
  content:''; position:absolute; z-index:3;
  left:100%; right:auto; top:32px; margin-left:5px;
  width:8px; height:8px;
  border-right:2px solid var(--blue); border-top:2px solid var(--blue);
  border-radius:1px;
  transform:rotate(45deg); opacity:.42;
}
.box-top{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:16px; margin-bottom:18px;
  border-bottom:1px solid var(--blue-wash-line);
}
.box-num{
  font-family:var(--serif); font-weight:650;
  font-size:38px; line-height:.9; letter-spacing:-.02em;
  color:var(--blue);
  transition:color .35s;
}
.box-badge{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px;
  border:1px solid rgba(46,55,254,.22); border-radius:11px;
  background:#fff;
  transition:background .35s, border-color .35s, transform .5s var(--ease-out);
}
.box-ico{ width:24px; height:24px; color:var(--blue); transition:transform .5s var(--ease-out); }
.box h3{ position:relative; font-size:22px; margin-bottom:10px; }
.box p{ position:relative; margin:0; color:var(--ink-soft); font-size:15.8px; line-height:1.58; font-weight:450; }
.box-rule{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--blue),rgba(46,55,254,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.box:hover{
  transform:translateY(-5px);
  background:#E2E3FD;
  border-color:rgba(46,55,254,.32);
  box-shadow:0 30px 60px -38px rgba(16,23,32,.4), 0 0 0 4px rgba(46,55,254,.05);
}
.box:hover .box-badge{ background:var(--blue); border-color:var(--blue); transform:translateY(-2px); }
.box:hover .box-badge .box-ico{ color:#fff; transform:scale(1.06); }
.box:hover .box-rule{ transform:scaleX(1); }

/* ── the extra pillar line, revealed on hover ─────────────────────────────
   It is an absolutely positioned continuation of the card, so revealing it
   never resizes the grid row and never nudges the other three cards. */
.box-more{
  position:absolute; z-index:4;
  left:-1px; right:-1px; top:100%;
  max-height:0; overflow:hidden; opacity:0;
  pointer-events:none;
  background:#E2E3FD;
  border:1px solid rgba(46,55,254,.32); border-top:0;
  border-radius:0 0 14px 14px;
  box-shadow:0 30px 60px -38px rgba(16,23,32,.4);
  transition:max-height .5s var(--ease-out), opacity .32s, padding .5s var(--ease-out);
  padding:0 clamp(20px,2.1vw,26px);
}
.box-more p{
  margin:0; padding-bottom:clamp(18px,2vw,22px);
  color:var(--ink-soft); font-size:15.2px; line-height:1.56; font-weight:450;
}
.box:hover{ z-index:6; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.box:hover .box-more{ max-height:26em; opacity:1; padding-top:16px; }

/* small caret so it is obvious there is more to read; flips up on hover */
.box > p::after{
  content:''; display:inline-block; vertical-align:middle;
  width:6px; height:6px; margin-left:9px;
  border-right:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue);
  transform:rotate(45deg) translateY(-2px); opacity:.45;
  transition:transform .45s var(--ease-out), opacity .3s;
}
.box:hover > p::after{ transform:rotate(-135deg) translateY(1px); opacity:1; }

/* touch devices have no hover: show the line inline instead of hiding it */
@media (hover:none){
  .box-more{
    position:static; max-height:none; overflow:visible; opacity:1;
    background:none; border:0; box-shadow:none; border-radius:0;
    padding:14px 0 0;
  }
  .box-more p{ padding-bottom:0; }
  .box > p::after{ display:none; }
}

/* ══════════════════════════ 5b · HOW CITEDEDGE WORKS (3 steps) ══════════════ */
/* sits between two untinted sections, so a hairline keeps them apart.
   the raised z-index lets the hover panel sit over the section below it
   instead of being painted over and cut off. */
.how-after{ border-top:1px solid var(--rule); z-index:5; }
/* the shared .statement rule only reaches tinted sections, so restate it here */
.how-after .statement{
  margin:34px 0 0; padding-left:22px;
  border-left:2px solid var(--blue);
  font-size:clamp(19px,1.55vw,22.5px);
  line-height:1.5; font-weight:550;
  letter-spacing:-.011em; color:var(--ink);
  max-width:31em;
}

.steps-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
  align-items:stretch;
}
.step{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(24px,2.4vw,32px);
  background:#fff;
  border:1px solid var(--rule);
  border-radius:14px;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .35s;
}
.step-top{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:16px; margin-bottom:18px;
  border-bottom:1px solid var(--rule);
}
.step-num{
  font-family:var(--serif); font-weight:650;
  font-size:clamp(40px,4vw,54px); line-height:.86; letter-spacing:-.03em;
  color:var(--blue);
}
.step-top .mono-label{ margin:0; color:var(--muted); }
.step h3{ position:relative; font-size:23px; margin-bottom:11px; }
.step p{ position:relative; margin:0; color:var(--ink-soft); font-size:16.2px; line-height:1.6; font-weight:450; }
.step:hover{
  transform:translateY(-5px);
  border-color:rgba(46,55,254,.3);
  box-shadow:0 30px 60px -38px rgba(16,23,32,.4);
}
.step:hover .box-rule{ transform:scaleX(1); }

/* ══════════════════════════ 8b · READY / CTA STRIP ══════════════════════════ */
.cta-strip{
  position:relative; z-index:2;
  background:var(--paper);
  border-top:1px solid var(--rule);
  padding:clamp(54px,6vw,84px) 0;
}
.cta-strip-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(28px,4vw,64px);
}
.cta-strip-copy{ max-width:40em; }
.cta-strip h2{
  font-size:clamp(1.85rem,2.9vw,2.6rem);
  margin-bottom:18px; max-width:22ch;
}
.cta-strip .lead{ margin-bottom:0; max-width:36em; }
.cta-strip-action{ flex:none; }

/* ══════════════════════════ 8 · FAQ ══════════════════════════ */
.acc{ border-top:1px solid var(--rule-strong); max-width:56em; }
.acc-item{ border-bottom:1px solid var(--rule-strong); }
.acc-q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:24px 4px; background:none; border:0; cursor:pointer; text-align:left;
  font-size:clamp(18.4px,1.45vw,21px); font-weight:600; letter-spacing:-.012em;
  transition:color .3s;
}
.acc-q:hover{ color:var(--blue); }
.acc-q i{
  position:relative; width:16px; height:16px; flex:none; margin-top:6px;
}
.acc-q i::before,.acc-q i::after{
  content:''; position:absolute; left:0; top:50%; width:16px; height:1.6px;
  background:var(--blue); transition:transform .4s var(--ease-out);
}
.acc-q i::after{ transform:rotate(90deg); }
.acc-q[aria-expanded="true"] i::after{ transform:rotate(0deg); }
.acc-a{
  overflow:hidden; height:0;
  transition:height .5s var(--ease-out);
}
.acc-a > div{ padding:0 60px 26px 4px; }
.acc-a p{
  margin:0; color:var(--ink-soft); font-size:17.6px; line-height:1.68; font-weight:450; max-width:42em;
}

/* ══════════════════════════ 9 · AUDIT ══════════════════════════ */
.audit{
  position:relative; z-index:2; overflow:hidden;
  background:var(--blue-deep); color:var(--paper);
  padding:clamp(72px,8vw,116px) 0;
}
.audit-bloom{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(61,71,255,.42), transparent 55%),
    radial-gradient(70% 100% at 100% 100%, rgba(46,55,254,.5), transparent 60%);
}
.audit-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(34px,5vw,72px); align-items:start;
}
.audit .mono-label{ color:rgba(251,251,249,.55); margin-bottom:22px; }
.audit h2{ color:var(--paper); margin-bottom:22px; font-size:clamp(2rem,3.4vw,3rem); max-width:20ch; }
.audit h2::before{ background:#A3A8FF; }
.audit h2 b{ color:#A3A8FF; }   /* bright sky blue: readable on the navy band */
.audit-body{ margin:0 0 36px; color:rgba(251,251,249,.86); font-size:clamp(17.6px,1.4vw,20px); line-height:1.62; font-weight:450; max-width:34em; }

a
.audit-form{
  background:var(--paper);
  border-radius:18px;
  padding:clamp(26px,3vw,38px);
  box-shadow:0 40px 80px -40px rgba(8,11,69,.7);
  color:var(--ink);
}
.form-title{
  margin:0 0 24px; padding-bottom:18px;
  border-bottom:1px solid var(--rule);
  font-family:var(--serif); font-weight:650; font-variation-settings:var(--serif-vf);
  font-size:29px; letter-spacing:-.016em;
}
.field{ position:relative; margin-bottom:16px; }
.field input,.field textarea{
  width:100%; padding:24px 16px 11px;
  font-family:var(--sans); font-size:17.5px; font-weight:500; color:var(--ink);
  background:#fff;
  border:1px solid var(--rule-strong); border-radius:10px;
  transition:border-color .3s, box-shadow .3s;
  resize:vertical;
}
.field textarea{ min-height:92px; line-height:1.55; }
.field label{
  position:absolute; left:15px; top:16px;
  font-size:16.6px; color:var(--muted);
  pointer-events:none;
  transform-origin:left top;
  transition:transform .28s var(--ease-out), color .28s;
}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(46,55,254,.12);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-9px) scale(.72);
  color:var(--blue);
}
.field.invalid input,.field.invalid textarea{ border-color:var(--amber); box-shadow:0 0 0 4px rgba(156,86,32,.1); }

.form-note{ margin:14px 0 0; font-size:13.6px; color:var(--muted); text-align:center; }
.form-error{ margin:12px 0 0; font-size:13px; color:var(--amber); text-align:center; }

.form-done{ text-align:center; padding:clamp(30px,4vw,56px) 8px; color:var(--blue); }
.form-done svg{ width:52px; height:52px; margin:0 auto 20px; }
.form-done h3{ font-family:var(--serif); font-weight:650; font-variation-settings:var(--serif-vf); font-size:32px; color:var(--ink); margin-bottom:8px; }
.form-done p{ margin:0; color:var(--ink-soft); }

/* ══════════════════════════ ABOUT ══════════════════════════ */
.about{ position:relative; z-index:2; padding:clamp(62px,7vw,96px) 0; background:var(--paper-2); border-bottom:1px solid var(--rule); }
.about-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px); align-items:start;
}
.about-inner{ max-width:40em; }
.about-inner h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); margin-bottom:24px; }
.about-lead{
  margin:0 0 22px;
  font-family:var(--serif); font-weight:650;
  font-size:clamp(23px,2.5vw,33px);
  line-height:1.24; letter-spacing:-.016em; color:var(--ink);
}
.about-body + .about-body{ margin-top:18px; }

/* the logo fills what was dead space on the right. it sits still and centres
   itself against the paragraph rather than tracking the scroll. */
.about-mark{ align-self:center; justify-self:center; }
/* the mark stands on its own here: no card, no shadow */
.about-mark-inner{ padding:6px 0 0; }
.about-mark-inner .wordmark{ width:100%; max-width:300px; }
.about-mark-inner img{ width:100%; height:auto; }
.about .mono-label{ margin-bottom:22px; }
/* the opening statement carries the serif; the rest is body copy so the
   section does not become a wall of display type */
.about-body{
  margin:0;
  font-family:var(--sans); font-weight:450;
  font-size:clamp(17.4px,1.35vw,18.8px);
  line-height:1.68; letter-spacing:-.004em; color:var(--ink-soft);
  max-width:36em;
}

/* ══════════════════════════ FOOTER ══════════════════════════ */
/* minimal and light: logo, links, phone, email. Cobalt accents only. */
.site-footer{
  position:relative; z-index:2;
  background:var(--paper); color:var(--ink);
  border-top:1px solid var(--rule-strong);
  padding:clamp(44px,5vw,64px) 0 24px;
}
.footer-grid{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px,4vw,56px); flex-wrap:wrap;
  padding-bottom:clamp(28px,3.4vw,42px);
  border-bottom:1px solid var(--rule);
}
.foot-brand{ flex:none; display:block; }
.foot-brand img{ height:26px; width:auto; }

.foot-links{ display:flex; gap:30px; }
.foot-links a{
  position:relative;
  font-size:16px; font-weight:550; color:var(--ink);
  padding-block:3px;
  transition:color .25s;
}
.foot-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.foot-links a:hover{ color:var(--blue); }
.foot-links a:hover::after{ transform:scaleX(1); }

.foot-contact{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.foot-contact a{
  font-family:var(--serif); font-weight:650;
  font-size:21px; color:var(--blue);
  transition:color .25s;
}
.foot-contact a:hover{ color:var(--blue-dark); text-decoration:underline; text-underline-offset:4px; }

.foot-base{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:22px; flex-wrap:wrap;
  font-size:13.8px; color:var(--muted);
}
.foot-base .mono-label{ color:var(--graphite); }

/* ══════════════════════════ THE COST OF INVISIBILITY ══════════════════════════ */
/* the emotional low point of the page, so it goes dark and full bleed */
.cost{
  position:relative; z-index:2; overflow:hidden;
  background:var(--ink); color:var(--paper);
  padding:clamp(76px,8.5vw,124px) 0;
}
.cost-bloom{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(90% 130% at 10% 0%, rgba(46,55,254,.44), transparent 58%),
    radial-gradient(70% 110% at 100% 100%, rgba(156,86,32,.15), transparent 60%);
}
.cost-inner{ position:relative; z-index:1; max-width:42em; }
.cost h2{ color:var(--paper); }
.cost h2::before{ background:#A3A8FF; }
.cost h2 b{ color:#A3A8FF; }
.cost-body{
  margin:0;
  font-size:clamp(19px,1.7vw,24px); line-height:1.55; font-weight:450;
  color:rgba(251,251,249,.87);
}

/* ══════════════════════════ WHAT IS AN AI X-RAY ══════════════════════════ */
.what-grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.what-copy .statement{ margin-top:32px; }

/* the X-Ray card: the report the section is describing, shown rather than told */
.xray{
  margin:0; overflow:hidden;
  background:#fff;
  border:1px solid var(--rule-strong); border-radius:16px;
  box-shadow:
    0 1px 2px rgba(16,23,32,.05),
    0 30px 60px -34px rgba(16,23,32,.36),
    0 60px 90px -70px rgba(46,55,254,.5);
}
.xray-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; border-bottom:1px solid var(--rule); background:var(--paper);
}
.xray-table{ width:100%; border-collapse:collapse; }
.xray-table th,.xray-table td{ text-align:left; padding:13px 18px; border-bottom:1px solid var(--rule); }
.xray-table thead th{
  padding-block:11px;
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.xray-table tbody th{ font-family:var(--sans); font-size:15.4px; font-weight:600; color:var(--ink); }
.xray-table tbody tr:last-child th,.xray-table tbody tr:last-child td{ border-bottom:0; }

.pill{
  display:inline-block; white-space:nowrap;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:20px; padding:5px 10px; border:1px solid transparent;
}
.pill-hit{  color:var(--blue);  background:var(--blue-tint);        border-color:rgba(46,55,254,.22); }
.pill-warn{ color:var(--muted); background:var(--paper-2);          border-color:var(--rule-strong); }
.pill-miss{ color:var(--amber); background:rgba(156,86,32,.08);     border-color:rgba(156,86,32,.22); }

.xray-foot{
  display:flex; align-items:center; gap:20px;
  padding:16px 18px; background:var(--paper); border-top:1px solid var(--rule);
}
.xray-gap{ display:grid; gap:5px; flex:none; }
.xray-gap .mono-label{ font-size:9.5px; }
.xray-gap-num{ font-family:var(--serif); font-weight:650; font-size:31px; line-height:1; color:var(--amber); }
.xray-bar{ flex:1; height:8px; border-radius:6px; background:var(--paper-3); overflow:hidden; }
.xray-bar i{
  display:block; height:100%; width:0; border-radius:6px;
  background:linear-gradient(90deg,var(--amber),rgba(156,86,32,.4));
  transition:width 1.4s var(--ease-out);
}

/* ══════════════════════════ v2 tweaks ══════════════════════════ */
.about-lead-after{ margin:26px 0 0; }
.audit h2{ max-width:none; }
/* v2 comparison cards hold one short sentence each, so the nested tinted
   box from v1 is dropped and the sentence becomes the card body */
.stake-sample,
.sec-tint .stake-sample{
  margin:0; padding:0; background:none; border-left:0;
  font-size:clamp(17px,1.4vw,19.5px); line-height:1.5;
  font-weight:500; color:var(--ink);
}
.stake{ padding:clamp(24px,2.8vw,32px); }
.stake-pair + .body{ margin-top:30px; }
.stake{ min-height:0; }
.stake header{ margin-bottom:16px; }

/* Who we are sits between two tinted sections, so it takes plain paper to
   keep the light/dark rhythm going */
.about{ background:var(--paper); }

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
/* only two nav links, so they stay inline until phone widths */
@media (max-width:720px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .header-actions .btn-sm{ display:none; }
}

@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-panel{ max-width:560px; }
  .what-grid{ grid-template-columns:1fr; }
  .xray{ max-width:560px; }
  .audit-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .about-mark{ max-width:420px; justify-self:start; }
  .footer-grid{ gap:26px; }
  /* tablet: 2 x 2 */
  .how-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .box:nth-child(2)::after{ display:none; }
  .cta-strip-inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:860px){
  body{ font-size:17.6px; }
  /* phones: single column, chevrons rotate to point down between boxes */
  .how-grid{ grid-template-columns:1fr; }
  .box:not(:last-child)::after{
    left:50%; right:auto; top:auto; margin-left:0;
    bottom:-11px;
    transform:translateX(-50%) rotate(135deg);
  }
  .box:nth-child(2)::after{ display:block; }
  .steps-grid{ grid-template-columns:1fr; }
  .stake-pair{ grid-template-columns:1fr; }
  .collapse-graphic{ grid-template-columns:1fr; gap:22px; }
  .cg-arrow{ justify-self:center; transform:rotate(90deg); }
  .acc-a > div{ padding-right:20px; }
  .xray-table th,.xray-table td{ padding:12px 14px; }
}

@media (max-width:600px){
  .footer-grid{ flex-direction:column; align-items:flex-start; }
  .foot-contact{ gap:14px; flex-direction:column; align-items:flex-start; }
  .marquee::before,.marquee::after{ width:48px; }
    .xray-foot{ flex-direction:column; align-items:flex-start; gap:12px; }
  .xray-bar{ width:100%; flex:none; }
}

/* ══════════════════════════ MOTION PREFERENCE ══════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .res{ opacity:1 !important; transform:none !important; }
  .panel-foot{ opacity:1 !important; }
  .cg-path{ stroke-dashoffset:0 !important; }
  .cg-bar{ transform:scaleX(1) !important; }
}

@media print{
  .grain,.scroll-progress,.site-header,.hero-bloom,.audit-bloom,.cost-bloom{ display:none !important; }
  body{ background:#fff; }
  .cost{ background:#fff; color:#000; }
  .cost h2,.cost-body{ color:#000; }
}