/* ============================================================
   XP ONE — Production Design System
   Brutalist · Gold · Noir · Blanc
   Zero external dependency — system fonts only — bulletproof
   ============================================================ */

:root{
  /* Surfaces */
  --bg:#FAFAF7;
  --bg-2:#F4F3EE;
  --bg-3:#EEEDE6;
  --paper:#FFFFFF;

  /* Dark surfaces */
  --bg-dark:#080808;
  --bg-dark-2:#0F0F0F;
  --bg-dark-3:#161616;

  /* Ink (text on light) */
  --ink:#0A0A0A;
  --ink-2:#1A1A1A;
  --ink-3:#3B3B3B;
  --ink-4:#6B6B6B;
  --ink-5:#6B6B66;
  --line:rgba(10,10,10,0.10);
  --line-strong:rgba(10,10,10,0.18);
  --line-d:rgba(255,255,255,0.08);
  --line-d-strong:rgba(255,255,255,0.16);

  /* Gold lingot palette (saturated for white bg) */
  --grad-1:#B8862F;
  --grad-2:#8B6314;
  --grad-3:#5C4416;
  --grad-4:#2D1F08;
  --gold-glow:#D4A84A;
  --gold-bright:#E5BD68;
  --positive:#7A8A5E;

  /* Easings */
  --easeOut:cubic-bezier(0.2,0.7,0.2,1);
  --easeInOut:cubic-bezier(0.4,0,0.2,1);

  /* Layout */
  --maxw:1320px;
  --maxw-prose:760px;
  --pad-x:32px;
  --radius:0px; /* brutalist — no rounding */
}

/* Dark sections inherit brighter gold tokens */
.section-dark, .dark{
  --grad-1:#E5BD68;
  --grad-2:#C9A14E;
  --grad-3:#A07E1C;
}

/* ============================================================
   Reset + base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI","Inter",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.5;letter-spacing:-0.013em;
  font-variant-ligatures:common-ligatures contextual;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;color:inherit;font:inherit;padding:0}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse}

.mono{font-family:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code","Roboto Mono",Consolas,Menlo,monospace}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.narrow{max-width:var(--maxw-prose);margin:0 auto;padding:0 var(--pad-x)}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   Gradient text utilities (gold)
   ============================================================ */
.grad{
  background:linear-gradient(95deg, var(--grad-1) 0%, var(--grad-2) 50%, var(--grad-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.grad-warm{
  background:linear-gradient(95deg, var(--grad-1) 0%, var(--grad-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   Navbar (sticky, brutalist)
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,247,0.85);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-0.025em;font-size:17px}
.nav-brand img{width:24px;height:24px}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14px;color:var(--ink-3);font-weight:500}
.nav-links a{transition:color .15s var(--easeOut)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta{display:flex;gap:10px;align-items:center}
@media(max-width:880px){.nav-links{display:none}}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;font-weight:700;font-size:14px;letter-spacing:-0.01em;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:transform .15s var(--easeOut), background .15s var(--easeOut), color .15s var(--easeOut);
}
.btn:hover{transform:translateY(-1px);background:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-gold{
  background:linear-gradient(95deg,var(--grad-1),var(--grad-2));
  border-color:transparent;color:#fff;
}
.btn-gold:hover{filter:brightness(1.08)}
.btn-lg{padding:14px 22px;font-size:15px}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding:120px 0 100px;position:relative}
.hero-eyebrow{
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;
  font-size:12px;letter-spacing:0.06em;color:var(--ink-4);
  text-transform:uppercase;margin-bottom:24px;
  display:inline-flex;align-items:center;gap:10px;
}
.hero-eyebrow::before{
  content:'';width:7px;height:7px;background:var(--grad-2);border-radius:50%;
  box-shadow:0 0 8px var(--grad-2);animation:pulseFade 1.6s infinite;
}
@keyframes pulseFade{0%,100%{opacity:.5}50%{opacity:1}}

.hero h1, .h-display{
  font-size:clamp(48px, 8.5vw, 128px);
  font-weight:900;line-height:0.95;letter-spacing:-0.053em;margin-bottom:32px;
}
.hero p, .h-sub{
  font-size:clamp(17px, 1.5vw, 21px);
  color:var(--ink-3);max-width:640px;line-height:1.5;letter-spacing:-0.013em;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.hero-meta{
  margin-top:28px;font-family:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;
  font-size:12px;color:var(--ink-4);letter-spacing:0.04em;
}

/* ============================================================
   Sections
   ============================================================ */
section{position:relative}
.sec{padding:120px 0;border-top:1.5px solid var(--ink)}
.sec-dark{
  padding:140px 0;background:var(--bg-dark);color:#fff;
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  position:relative;overflow:hidden;
}
.sec-dark p{color:rgba(255,255,255,0.7)}
.sec-eyebrow{
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;
  font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:18px;
}
.sec-h{font-size:clamp(36px,5vw,72px);font-weight:900;letter-spacing:-0.045em;line-height:1;margin-bottom:24px}
.sec-sub{font-size:18px;color:var(--ink-3);max-width:640px;line-height:1.55;letter-spacing:-0.013em}
.sec-dark .sec-eyebrow{color:rgba(255,255,255,0.5)}
.sec-dark .sec-h{color:#fff}
.sec-dark .sec-sub{color:rgba(255,255,255,0.7)}

/* ============================================================
   Agents grid (6 AI Agents)
   ============================================================ */
.agents{display:grid;grid-template-columns:1fr;gap:0;border:1.5px solid var(--ink);margin-top:64px}
@media(min-width:760px){.agents{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.agents{grid-template-columns:repeat(3,1fr)}}
.agent{padding:40px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.agent-num{font-family:ui-monospace,monospace;font-size:11px;color:var(--ink-5);letter-spacing:0.08em;margin-bottom:18px}
.agent-name{font-size:24px;font-weight:900;letter-spacing:-0.03em;margin-bottom:10px}
.agent-role{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--grad-2);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:18px;font-weight:600}
.agent-desc{font-size:14.5px;color:var(--ink-3);line-height:1.55}

/* ============================================================
   Stats / numbers
   ============================================================ */
.stats{display:grid;grid-template-columns:1fr;gap:0;border:1.5px solid var(--ink);margin-top:64px}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:36px 28px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat-v{font-size:48px;font-weight:900;letter-spacing:-0.04em;line-height:1;margin-bottom:8px}
.stat-l{font-family:ui-monospace,monospace;font-size:11px;color:var(--ink-4);letter-spacing:0.06em;text-transform:uppercase}

/* ============================================================
   Testimonials
   ============================================================ */
.testis{display:grid;grid-template-columns:1fr;gap:0;border:1.5px solid var(--ink);margin-top:64px}
@media(min-width:880px){.testis{grid-template-columns:1fr 1fr}}
.testi{padding:40px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.testi-q{font-size:18px;font-weight:500;line-height:1.5;letter-spacing:-0.018em;color:var(--ink);margin-bottom:24px}
.testi-q::before{content:'"';color:var(--grad-2)}
.testi-q::after{content:'"';color:var(--grad-2)}
.testi-who{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-4)}
.testi-who strong{color:var(--ink);font-weight:600}

/* ============================================================
   Pricing
   ============================================================ */
.pricing-grid{display:grid;grid-template-columns:1fr;gap:0;border:1.5px solid var(--line-d-strong)}
@media(min-width:900px){.pricing-grid{grid-template-columns:repeat(3,1fr)}}
.price-card{padding:52px 36px;border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d);display:flex;flex-direction:column;position:relative;transition:background .3s var(--easeOut)}
.price-card:last-child{border-right:none}
.price-card:hover{background:rgba(255,255,255,0.03)}
.price-card.featured{background:linear-gradient(180deg,rgba(212,168,74,0.09) 0%,rgba(212,168,74,0.02) 100%)}
.price-card.featured:hover{background:linear-gradient(180deg,rgba(212,168,74,0.13) 0%,rgba(212,168,74,0.04) 100%)}
.price-tag{position:absolute;top:24px;right:24px;font-family:ui-monospace,monospace;font-size:10px;background:linear-gradient(95deg,var(--gold-bright),var(--grad-1));color:#fff;padding:5px 9px;letter-spacing:0.06em;text-transform:uppercase;font-weight:700}
.price-id{font-family:ui-monospace,monospace;font-size:11px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:14px}
.price-card.featured .price-id{color:var(--gold-bright)}
.price-name{font-size:32px;font-weight:900;letter-spacing:-0.035em;line-height:1;margin-bottom:18px}
.price-amt{font-size:clamp(56px,6vw,72px);font-weight:900;letter-spacing:-0.05em;line-height:1;display:flex;align-items:baseline;gap:4px}
.price-amt .cent{font-size:0.42em;color:rgba(255,255,255,0.5);font-weight:700}
.price-amt .per{font-size:0.28em;color:rgba(255,255,255,0.5);font-weight:500;margin-left:6px;letter-spacing:-0.02em}
.price-alt{margin-top:10px;font-family:ui-monospace,monospace;font-size:12px;color:rgba(255,255,255,0.5)}
.price-alt .annual{color:var(--positive)}
.price-founding{margin-top:16px;padding:10px 12px;background:rgba(212,168,74,0.10);border-left:2px solid var(--gold-glow);font-family:ui-monospace,monospace;font-size:11.5px;color:rgba(212,168,74,0.95)}
.price-founding .v{color:var(--gold-glow);font-weight:700}
.price-feats{display:flex;flex-direction:column;gap:11px;margin:36px 0;flex:1;padding-top:32px;border-top:1px solid var(--line-d)}
.price-feats li{font-size:14px;color:rgba(255,255,255,0.78);display:flex;gap:12px;align-items:flex-start;letter-spacing:-0.005em;line-height:1.5}
.price-feats li::before{content:'+';color:var(--gold-bright);font-weight:900;flex-shrink:0;font-family:ui-monospace,monospace;font-size:16px;line-height:1.2}
.price-cta{display:block;text-align:center;padding:14px 22px;font-weight:700;font-size:14px;border:1.5px solid rgba(255,255,255,0.3);color:#fff;transition:all .2s var(--easeOut)}
.price-cta:hover{background:#fff;color:var(--bg-dark);border-color:#fff}
.price-cta.primary{background:linear-gradient(95deg,var(--gold-bright),var(--grad-1));border-color:transparent;color:#fff}
.price-cta.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ============================================================
   Manifesto block (dark)
   ============================================================ */
.manifesto-text{font-size:clamp(36px,5.5vw,80px);font-weight:900;line-height:1.04;letter-spacing:-0.04em;max-width:1100px}
.manifesto-text .dim{color:rgba(255,255,255,0.32)}

/* ============================================================
   Comparison tables
   ============================================================ */
.compare{width:100%;border:1.5px solid var(--ink);margin:48px 0;background:var(--paper);overflow-x:auto;display:block}
.compare table{width:100%;min-width:640px}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
.compare th{font-family:ui-monospace,monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-4);font-weight:600;background:var(--bg-2)}
.compare td.win{background:rgba(184,134,47,0.08);font-weight:600;color:var(--ink)}
.compare td.lose{color:var(--ink-4)}
.compare td .ok{color:var(--positive);font-weight:700}
.compare td .ko{color:#B85C3E;font-weight:700}

/* ============================================================
   FAQ
   ============================================================ */
.faq{margin:48px 0}
.faq details{border-bottom:1px solid var(--line);padding:24px 0;cursor:pointer}
.faq details[open]{padding-bottom:32px}
.faq summary{list-style:none;font-size:19px;font-weight:700;letter-spacing:-0.02em;display:flex;justify-content:space-between;align-items:center;gap:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:24px;font-weight:300;color:var(--grad-2);transition:transform .2s var(--easeOut)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-body{margin-top:14px;color:var(--ink-3);line-height:1.65;font-size:15.5px}
.faq-body p+p{margin-top:12px}

/* ============================================================
   Blog index
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:1fr;gap:0;border:1.5px solid var(--ink);margin-top:48px}
@media(min-width:760px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{padding:32px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px;transition:background .2s var(--easeOut)}
.blog-card:hover{background:var(--bg-2)}
.blog-tag{font-family:ui-monospace,monospace;font-size:11px;color:var(--grad-2);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
.blog-card h3{font-size:21px;font-weight:800;letter-spacing:-0.028em;line-height:1.2}
.blog-card p{font-size:14px;color:var(--ink-3);line-height:1.55;flex:1}
.blog-meta{font-family:ui-monospace,monospace;font-size:11px;color:var(--ink-5);letter-spacing:0.04em;display:flex;justify-content:space-between}

/* Article body (long-form) */
.article{padding:80px 0 120px;background:var(--paper)}
.article-head{margin-bottom:48px;padding-bottom:32px;border-bottom:1.5px solid var(--ink)}
.article-tag{display:inline-block;font-family:ui-monospace,monospace;font-size:11px;color:var(--grad-2);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;font-weight:600}
.article h1{font-size:clamp(36px,5vw,64px);font-weight:900;letter-spacing:-0.045em;line-height:1.05;margin-bottom:20px}
.article-lede{font-size:21px;color:var(--ink-3);line-height:1.55;letter-spacing:-0.013em}
.article-meta{margin-top:24px;font-family:ui-monospace,monospace;font-size:12px;color:var(--ink-4);letter-spacing:0.04em}
.article-body{font-size:17.5px;line-height:1.7;color:var(--ink-2)}
.article-body h2{font-size:32px;font-weight:900;letter-spacing:-0.035em;line-height:1.1;margin:64px 0 20px;padding-top:32px;border-top:1px solid var(--line)}
.article-body h3{font-size:22px;font-weight:800;letter-spacing:-0.025em;margin:40px 0 14px}
.article-body p+p,.article-body ul+p,.article-body ol+p{margin-top:20px}
.article-body ul,.article-body ol{margin:20px 0 20px 24px;padding-left:0}
.article-body ul li,.article-body ol li{margin-bottom:8px;list-style-position:outside}
.article-body ul li{list-style-type:'— ';padding-left:8px}
.article-body ol li{list-style:decimal}
.article-body strong{font-weight:700;color:var(--ink)}
.article-body a{color:var(--grad-2);border-bottom:1px solid var(--grad-2);font-weight:500;transition:opacity .15s}
.article-body a:hover{opacity:0.6}
.article-body blockquote{margin:32px 0;padding:20px 24px;border-left:3px solid var(--grad-2);background:var(--bg-2);font-size:18px;font-style:italic;color:var(--ink-2)}
.article-body code{font-family:ui-monospace,monospace;font-size:0.88em;background:var(--bg-3);padding:2px 6px}
.article-body pre{background:var(--bg-dark);color:#E5E5E5;padding:20px;margin:24px 0;overflow-x:auto;font-size:13.5px;line-height:1.5}
.article-body pre code{background:none;padding:0;color:inherit}
.article-body img{margin:32px 0;border:1.5px solid var(--ink)}
.article-body table{width:100%;margin:32px 0;border:1.5px solid var(--ink)}
.article-body th,.article-body td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:14.5px}
.article-body th{background:var(--bg-2);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-4)}

.article-cta{margin:64px 0 0;padding:36px;border:1.5px solid var(--ink);background:var(--bg-2);text-align:center}
.article-cta h3{font-size:24px;font-weight:900;letter-spacing:-0.03em;margin-bottom:8px}
.article-cta p{color:var(--ink-3);margin-bottom:18px}

/* Table of contents */
.toc{background:var(--bg-2);border:1.5px solid var(--ink);padding:24px 28px;margin:32px 0}
.toc-h{font-family:ui-monospace,monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-4);margin-bottom:14px}
.toc ol{margin:0;padding:0}
.toc li{padding:6px 0;border-bottom:1px dotted var(--line);font-size:14.5px;list-style:decimal-leading-zero;list-style-position:inside}
.toc li:last-child{border:none}
.toc a{color:var(--ink-2)}
.toc a:hover{color:var(--grad-2)}

/* ============================================================
   Footer
   ============================================================ */
.foot{background:var(--bg-dark);color:#fff;padding:80px 0 40px;border-top:1.5px solid var(--ink)}
.foot p{color:rgba(255,255,255,0.7)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:48px;margin-bottom:48px}
@media(min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.foot-brand h4{font-size:24px;font-weight:900;letter-spacing:-0.03em;margin-bottom:12px}
.foot-brand h4 .grad{background:linear-gradient(95deg,var(--gold-bright),var(--grad-1));-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-brand p{font-size:14px;line-height:1.55;color:rgba(255,255,255,0.65);max-width:320px}
.foot-col h5{font-family:ui-monospace,monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.5);margin-bottom:18px}
.foot-col ul li{margin-bottom:10px}
.foot-col a{font-size:14px;color:rgba(255,255,255,0.78);transition:color .15s}
.foot-col a:hover{color:var(--gold-bright)}
.foot-base{padding-top:32px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;font-family:ui-monospace,monospace;font-size:12px;color:rgba(255,255,255,0.5);letter-spacing:0.04em}

/* ============================================================
   Forms
   ============================================================ */
input[type=email],input[type=text],textarea{display:block;width:100%;padding:14px 16px;border:1.5px solid var(--ink);background:var(--paper);font-size:15px;letter-spacing:-0.01em;transition:border-color .15s var(--easeOut)}
input:focus,textarea:focus{outline:none;border-color:var(--grad-2)}

/* ============================================================
   Utility
   ============================================================ */
.eyebrow{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-4)}
.dim{color:var(--ink-4)}
.center{text-align:center}
.flex{display:flex}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-48{margin-bottom:48px}.mb-64{margin-bottom:64px}

/* ============================================================
   Reveal-on-scroll (progressive enhancement)
   ============================================================ */
/* The hidden start state only exists where a script can bring it back.
   With JS off — or in a browser without the `scripting` media feature —
   the content is simply visible, never blank. */
@media (scripting: enabled){
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--easeOut), transform .8s var(--easeOut)}
}
.reveal.on{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* Print */
@media print{
  .nav,.foot,.btn,.price-cta,.article-cta{display:none}
  body{background:#fff;color:#000}
  .article{padding:0}
  a{color:#000;text-decoration:underline}
}

/* ============================================================
   CRO + MOTION LAYER · top 1% B2B SaaS feel
   Linear / Vercel / Stripe-grade interactions
   ============================================================ */

/* Scroll progress bar (top of page, gold) */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--gold-bright),var(--grad-1),var(--grad-2));
  transition:width .15s linear;pointer-events:none;
}

/* Hero word-stagger reveal (load-time animation) */
.word-stagger .w{
  display:inline-block;opacity:0;transform:translateY(20px);
  animation:wordIn .7s var(--easeOut) forwards;
}
.word-stagger .w:nth-child(1){animation-delay:0.05s}
.word-stagger .w:nth-child(2){animation-delay:0.18s}
.word-stagger .w:nth-child(3){animation-delay:0.31s}
.word-stagger .w:nth-child(4){animation-delay:0.44s}
.word-stagger .w:nth-child(5){animation-delay:0.57s}
.word-stagger .w:nth-child(6){animation-delay:0.70s}
@keyframes wordIn{
  to{opacity:1;transform:none}
}

/* Hero sub-fade-in (delayed) */
.hero-fade{opacity:0;animation:heroFade .9s var(--easeOut) .9s forwards}
.hero-fade-2{opacity:0;animation:heroFade .9s var(--easeOut) 1.1s forwards}
.hero-fade-3{opacity:0;animation:heroFade .9s var(--easeOut) 1.3s forwards}
@keyframes heroFade{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none}}

/* Gradient shimmer on hero gold text */
.grad-shimmer{
  background-size:200% auto;
  animation:shimmer 4.5s linear infinite;
}
@keyframes shimmer{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}

/* Magnetic cursor-follow gold orb (hero/dark sections background) */
.magnetic-orb{
  position:absolute;top:0;left:0;pointer-events:none;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,168,74,0.30) 0%,rgba(184,134,47,0.12) 30%,transparent 65%);
  transform:translate(-50%,-50%);filter:blur(20px);
  opacity:0;transition:opacity .4s var(--easeOut);
  mix-blend-mode:screen;z-index:0;
}
.magnetic-orb.on{opacity:1}
.hero,.sec-dark{position:relative}
.hero > .container,.sec-dark > .container{position:relative;z-index:1}

/* Tabular numerals for animated counters */
[data-count]{font-variant-numeric:tabular-nums}

/* Hover lifts on cards (subtle but premium) */
.agent,.blog-card,.testi{transition:transform .25s var(--easeOut), background .25s var(--easeOut), border-color .25s var(--easeOut), box-shadow .25s var(--easeOut)}
.agent:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(212,168,74,0.04),transparent);
}
.dark .agent:hover{background:linear-gradient(180deg,rgba(212,168,74,0.08),transparent)}
.blog-card:hover{transform:translateY(-2px)}
.price-card{transition:transform .25s var(--easeOut), background .3s var(--easeOut)}
.price-card:not(.featured):hover{transform:translateY(-3px)}
.price-card.featured:hover{transform:translateY(-3px) scale(1.005)}

/* Button magnetic lift */
.btn{transition:transform .15s var(--easeOut), background .15s var(--easeOut), color .15s var(--easeOut), box-shadow .2s var(--easeOut)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(10,10,10,0.15)}
.btn-gold:hover,.price-cta.primary:hover{box-shadow:0 8px 28px rgba(184,134,47,0.35)}

/* Link underline animation */
.nav-links a{position:relative}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;
  background:linear-gradient(90deg,var(--grad-1),var(--grad-2));
  transition:width .25s var(--easeOut);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}

/* Pulsing dot indicator (live / online) */
.live-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#4ADE80;box-shadow:0 0 0 0 rgba(74,222,128,0.7);
  animation:livePulse 1.8s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,0.6)}
  70%{box-shadow:0 0 0 12px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}

/* ============================================================
   Logo bar / "Replaces these tools" marquee
   ============================================================ */
.tools-bar{
  padding:32px 0;background:var(--bg-2);
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  overflow:hidden;position:relative;
}
.tools-bar::before,.tools-bar::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.tools-bar::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.tools-bar::after{right:0;background:linear-gradient(-90deg,var(--bg-2),transparent)}
.tools-bar-h{
  text-align:center;font-family:ui-monospace,monospace;font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-4);
  margin-bottom:18px;
}
.tools-marquee{
  display:flex;gap:64px;animation:marquee 30s linear infinite;
  width:max-content;
}
.tools-marquee:hover{animation-play-state:paused}
.tools-marquee span{
  font-size:22px;font-weight:700;letter-spacing:-0.025em;color:var(--ink-3);
  position:relative;white-space:nowrap;
}
.tools-marquee span::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:2px;
  background:var(--grad-2);transform:scaleX(0.95) rotate(-3deg);
  opacity:0.7;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============================================================
   Star ratings
   ============================================================ */
.stars{display:inline-flex;gap:2px;color:var(--gold-glow);font-size:14px;letter-spacing:0.1em}
.stars::before{content:'★★★★★'}

/* Testimonial author with initials avatar */
.testi-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--grad-1),var(--grad-2));
  color:#fff;font-weight:800;font-size:14px;letter-spacing:-0.02em;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

/* ============================================================
   Founding 100 live counter + progress bar
   ============================================================ */
.founding{
  background:var(--bg-dark-2);border:1.5px solid rgba(212,168,74,0.25);
  padding:28px 32px;margin:24px auto;max-width:680px;
  display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;
  position:relative;overflow:hidden;
}
.founding::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center top,rgba(212,168,74,0.10),transparent 60%);
  pointer-events:none;
}
.founding-h{
  font-family:ui-monospace,monospace;font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-glow);
  display:inline-flex;align-items:center;gap:8px;font-weight:700;
}
.founding-count{font-size:32px;font-weight:900;letter-spacing:-0.035em;color:#fff;line-height:1}
.founding-count span{color:var(--gold-bright)}
.founding-bar{
  width:100%;max-width:380px;height:6px;background:rgba(255,255,255,0.08);
  position:relative;overflow:hidden;
}
.founding-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--grad-1),var(--gold-bright),var(--grad-1));
  background-size:200% 100%;animation:shimmer 3s linear infinite;
  transition:width 1.2s var(--easeOut);
}
.founding-cta{font-size:13.5px;color:rgba(255,255,255,0.7)}
.founding-cta strong{color:var(--gold-bright)}

/* ============================================================
   ROI Calculator widget
   ============================================================ */
.roi{
  border:1.5px solid var(--ink);background:var(--paper);
  display:grid;grid-template-columns:1fr;gap:0;
  margin:48px 0;overflow:hidden;
}
@media(min-width:880px){.roi{grid-template-columns:1fr 1fr}}
.roi-input{padding:48px 40px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.roi-output{
  padding:48px 40px;background:var(--bg-dark);color:#fff;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.roi-output::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 600px 300px at 50% 50%,rgba(212,168,74,0.10),transparent 70%);
  pointer-events:none;
}
.roi-output > *{position:relative;z-index:1}
.roi-eyebrow{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-4);margin-bottom:12px}
.roi-h{font-size:28px;font-weight:900;letter-spacing:-0.03em;line-height:1.1;margin-bottom:24px}
.roi-label{font-size:13.5px;color:var(--ink-3);margin-bottom:8px;font-weight:500}
.roi-control{margin-bottom:24px}
.roi-control input[type=range]{
  width:100%;accent-color:var(--grad-2);height:6px;
}
.roi-control input[type=number]{
  width:100%;padding:12px 14px;border:1.5px solid var(--ink);font-size:18px;
  font-weight:700;letter-spacing:-0.02em;
}
.roi-value{
  font-family:ui-monospace,monospace;font-size:14px;color:var(--grad-2);
  font-weight:700;margin-top:6px;
}
.roi-output .roi-eyebrow{color:rgba(255,255,255,0.5)}
.roi-savings{
  font-size:64px;font-weight:900;letter-spacing:-0.045em;line-height:1;
  background:linear-gradient(95deg,var(--gold-bright),var(--grad-1),var(--gold-bright));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 5s linear infinite;
  margin-bottom:8px;
}
.roi-per{
  font-family:ui-monospace,monospace;font-size:12px;
  color:rgba(255,255,255,0.55);letter-spacing:0.06em;text-transform:uppercase;
  margin-bottom:20px;
}
.roi-note{font-size:13.5px;color:rgba(255,255,255,0.7);line-height:1.55}

/* ============================================================
   Pricing toggle (Monthly / Annual)
   ============================================================ */
.price-toggle{
  display:inline-flex;align-items:center;gap:0;
  border:1.5px solid rgba(255,255,255,0.25);
  font-family:ui-monospace,monospace;font-size:12px;letter-spacing:0.04em;
  text-transform:uppercase;font-weight:600;
}
.price-toggle button{
  padding:10px 18px;background:transparent;color:rgba(255,255,255,0.6);
  transition:all .2s var(--easeOut);
}
.price-toggle button.on{background:#fff;color:var(--bg-dark)}
.price-toggle .save{
  font-size:10px;background:var(--positive);color:#fff;
  padding:2px 6px;margin-left:6px;letter-spacing:0.04em;font-weight:700;
}

/* ============================================================
   Sticky CTA bar (appears after hero scroll)
   ============================================================ */
.sticky-cta{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,140%);
  z-index:80;background:var(--bg-dark);color:#fff;
  border:1.5px solid rgba(212,168,74,0.4);
  padding:14px 22px;display:flex;align-items:center;gap:18px;
  font-size:14px;font-weight:500;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  transition:transform .5s var(--easeOut);
  max-width:calc(100vw - 32px);
}
.sticky-cta.on{transform:translate(-50%,0)}
.sticky-cta .sc-text{display:flex;flex-direction:column;gap:2px}
.sticky-cta .sc-h{font-weight:700;letter-spacing:-0.015em}
.sticky-cta .sc-sub{font-size:11.5px;color:rgba(255,255,255,0.6);font-family:ui-monospace,monospace;letter-spacing:0.04em}
.sticky-cta .btn{padding:9px 16px;font-size:13px}
.sticky-cta .sc-x{
  background:transparent;color:rgba(255,255,255,0.5);font-size:18px;line-height:1;
  padding:4px 8px;margin-left:4px;
}
.sticky-cta .sc-x:hover{color:#fff}
@media(max-width:580px){
  .sticky-cta{flex-wrap:wrap;justify-content:center;text-align:center}
  .sticky-cta .sc-text{align-items:center}
}

/* ============================================================
   Live activity ticker (social proof)
   ============================================================ */
.live-ticker{
  position:fixed;bottom:24px;left:24px;z-index:75;
  background:var(--paper);border:1.5px solid var(--ink);
  padding:14px 18px;display:flex;align-items:center;gap:12px;
  font-size:13px;max-width:320px;
  box-shadow:0 14px 40px rgba(0,0,0,0.10);
  transform:translateX(-140%);transition:transform .5s var(--easeOut);
}
.live-ticker.on{transform:translateX(0)}
.live-ticker .lt-text{flex:1}
.live-ticker .lt-text strong{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.live-ticker .lt-text span{font-size:11.5px;color:var(--ink-4)}
@media(max-width:580px){.live-ticker{display:none}}

/* ============================================================
   Trust badges row
   ============================================================ */
.trust-row{
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:center;
  font-family:ui-monospace,monospace;font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-4);
  padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.trust-badge{display:inline-flex;align-items:center;gap:8px}
.trust-badge::before{
  content:'';width:10px;height:10px;display:inline-block;
  background:var(--positive);border-radius:50%;
}

/* Magnetic gold cursor (desktop only, decorative) */
.magnetic-cursor{
  position:fixed;width:14px;height:14px;border-radius:50%;
  background:rgba(212,168,74,0.5);pointer-events:none;
  z-index:99;mix-blend-mode:difference;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .2s var(--easeOut), background .2s var(--easeOut);
  opacity:0;
}
.magnetic-cursor.on{opacity:1}
.magnetic-cursor.large{transform:translate(-50%,-50%) scale(3);background:rgba(212,168,74,0.4)}
@media(hover:none){.magnetic-cursor{display:none}}

/* Print */
@media print{
  .nav,.foot,.btn,.price-cta,.article-cta,.sticky-cta,.live-ticker,.scroll-progress,.magnetic-cursor,.magnetic-orb{display:none}
  body{background:#fff;color:#000}
  .article{padding:0}
  a{color:#000;text-decoration:underline}
}

/* Mobile responsive */
@media(max-width:640px){
  :root{--pad-x:20px}
  .sec,.sec-dark{padding:80px 0}
  .hero{padding:80px 0 60px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .price-card{padding:40px 24px}
  .agent{padding:32px 24px}
  .stat{padding:28px 22px}
  .stat-v{font-size:36px}
  .article-body{font-size:16.5px}
  .article-body h2{font-size:26px;margin:48px 0 16px;padding-top:24px}
  .magnetic-orb{width:320px;height:320px}
}

/* ============================================================
   ACCESSIBILITY, FALLBACKS & NEW COMPONENTS — added 31/08/2026
   Rule: every recent CSS feature is wrapped in @supports with an
   acceptable visual fallback. Safari is the judge.
   ============================================================ */

/* ---------- Focus: never invisible, never removed ---------- */
:focus-visible{
  outline:3px solid var(--gold-glow);
  outline-offset:3px;
  border-radius:2px;
  /* Several components use `transition:all`, which would fade the ring in
     over 200 ms. Focus must be instant. */
  transition:none;
}
.section-dark :focus-visible,.dark :focus-visible,.sec-dark :focus-visible,.nav :focus-visible{
  outline-color:var(--gold-bright);
}
/* Browsers without :focus-visible (older Safari) keep a real focus ring */
@supports not selector(:focus-visible){
  a:focus,button:focus,input:focus,textarea:focus,select:focus,[tabindex]:focus{
    outline:3px solid var(--gold-glow);outline-offset:3px;
  }
}
/* Restore what the reset removed on form controls */
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--gold-glow);outline-offset:2px;border-color:var(--grad-2);
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;left:8px;top:-64px;z-index:1000;
  background:var(--ink);color:#fff;padding:12px 20px;
  font-size:14px;font-weight:600;letter-spacing:0.02em;
  transition:top .15s var(--easeOut);
}
.skip-link:focus{top:8px}

/* ---------- [hidden] must always win ---------- */
[hidden]{display:none !important}

/* ---------- Mobile navigation (the desktop nav is hidden under 880px) ---------- */
.nav-toggle{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);background:transparent;
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:currentColor;position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor;
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-panel{display:none}
@media(max-width:880px){
  .nav-toggle{display:inline-flex}
  .nav-cta .btn-ghost{display:none}
  .nav-panel{
    display:block;position:fixed;inset:64px 0 auto 0;z-index:90;
    background:var(--paper);border-bottom:1px solid var(--line-strong);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .28s var(--easeOut),visibility 0s linear .28s;
  }
  .nav-panel.open{max-height:80vh;overflow-y:auto;visibility:visible;transition:max-height .28s var(--easeOut)}
  .nav-panel a{
    display:block;padding:16px 32px;font-size:17px;font-weight:500;
    border-bottom:1px solid var(--line);
  }
  .nav-panel a[aria-current="page"]{color:var(--grad-1);font-weight:700}
  html.nav-open,html.nav-open body{overflow:hidden}
}
@media(min-width:881px){
  .nav-panel{display:none !important}
}

/* ---------- Currency toggle ---------- */
.cur-toggle{
  display:inline-flex;border:1px solid var(--line-strong);
  margin-left:12px;vertical-align:middle;
}
.sec-dark .cur-toggle,.dark .cur-toggle{border-color:var(--line-d-strong)}
.cur-toggle button{
  padding:10px 18px;font-size:13px;font-weight:600;letter-spacing:0.04em;
  min-height:44px;transition:background .18s var(--easeOut),color .18s var(--easeOut);
}
.cur-toggle button + button{border-left:1px solid var(--line-strong)}
.sec-dark .cur-toggle button + button,.dark .cur-toggle button + button{border-left-color:var(--line-d-strong)}
.cur-toggle button.on{background:var(--grad-1);color:#0A0A0A}
.toggles-row{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;
}

/* ---------- Guarantee badge (replaces the free trial) ---------- */
.guarantee{
  display:flex;gap:16px;align-items:flex-start;
  border:1px solid var(--line-strong);padding:20px 24px;
  max-width:720px;margin:32px auto 0;text-align:left;
}
.sec-dark .guarantee,.dark .guarantee{border-color:var(--line-d-strong)}
.guarantee-mark{
  flex:none;width:36px;height:36px;border:1px solid var(--grad-1);
  display:flex;align-items:center;justify-content:center;
  color:var(--grad-1);font-size:15px;font-weight:700;
}
.guarantee-t{font-weight:700;font-size:15px;letter-spacing:-0.01em}
.guarantee-s{font-size:13px;color:var(--ink-4);margin-top:4px;line-height:1.55}
.sec-dark .guarantee-s,.dark .guarantee-s{color:var(--ink-5)}

/* ---------- Source note under any figure ---------- */
.src-note{
  font-size:12px;color:var(--ink-4);letter-spacing:0.02em;margin-top:12px;
}
.sec-dark .src-note,.dark .src-note{color:var(--ink-5)}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--bg-dark);color:#F4F3EE;
  border-top:1px solid var(--line-d-strong);
  padding:20px 24px;
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;
  transform:translateY(100%);transition:transform .3s var(--easeOut);
}
.cookie-banner.on{transform:translateY(0)}
.cookie-banner p{font-size:13.5px;line-height:1.6;max-width:640px;margin:0}
.cookie-banner a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:2px}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions button{
  padding:12px 20px;font-size:13px;font-weight:600;min-height:44px;
  border:1px solid var(--line-d-strong);color:#F4F3EE;
}
.cookie-actions button.primary{background:var(--gold-bright);color:#0A0A0A;border-color:var(--gold-bright)}
@media(prefers-reduced-motion:reduce){
  .cookie-banner{transition:none}
}

/* ---------- Graceful degradation for recent effects ---------- */
/* backdrop-filter: without support, the bar becomes fully opaque instead of
   an unreadable translucent strip. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:var(--bg) !important}
}
/* background-clip:text: without support, gradient text would render invisible.
   Fall back to a solid gold that passes contrast on both grounds. */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .grad,.sec-h .grad,.foot-brand h4 .grad,.pt-panel-copy h3 .grad,.mseq-stat-v.gold{
    background:none !important;color:var(--grad-2) !important;
  }
  .sec-dark .grad,.dark .grad{color:var(--gold-bright) !important}
}
/* mix-blend-mode on the decorative cursor: drop it rather than risk an
   opaque black dot over the content. */
@supports not (mix-blend-mode:difference){
  .magnetic-cursor{display:none}
}

/* ---------- Touch targets ---------- */
.nav-links a,.foot-col a,.price-cta,.btn,.pt-tab{min-height:44px}
.pt-tab,.price-toggle button{display:inline-flex;align-items:center;justify-content:center}

/* ---------- Motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important}
  .scroll-progress,.magnetic-orb,.magnetic-cursor{display:none !important}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- Print ---------- */
@media print{
  .nav,.sticky-cta,.cookie-banner,.scroll-progress,.nav-panel{display:none !important}
  body{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}

/* Footer headings promoted to <h2> so the document outline never skips a level.
   These selectors carry the exact styling the old h4/h5 had. */
.foot-brand .foot-brand-h{font-size:28px;font-weight:700;letter-spacing:-0.03em;line-height:1.1}
.foot-brand .foot-brand-h .grad{background:linear-gradient(95deg,var(--gold-bright),var(--grad-1));-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-col .foot-col-h{
  font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-5);margin-bottom:14px;
}

/* ============================================================
   CONTRAST — WCAG 2.1 AA, verified with axe-core
   Every value below was computed, not eyeballed. Ratios in comments.
   ============================================================ */

/* Dark sections must remap the ink scale: --ink-4/-5 are tuned for a light
   ground and drop to 3.7:1 on #080808, which fails. */
.section-dark,.dark,.sec-dark,.foot{
  --ink-3:#D6D6D0;   /* 13.9:1 on #080808 */
  --ink-4:#A8A8A2;   /*  8.4:1 */
  --ink-5:#8E8E88;   /*  6.1:1 */
}

/* Ghost button: --ink is near-black and disappears on a dark ground. */
.sec-dark .btn-ghost,.dark .btn-ghost,.foot .btn-ghost{
  color:#F4F3EE;border-color:var(--line-d-strong);
}
.sec-dark .btn-ghost:hover,.dark .btn-ghost:hover{background:#F4F3EE;color:var(--bg-dark)}

/* Gold surfaces carry BLACK text, never white: white on --grad-1 is 3.2:1
   and on --gold-bright only 1.8:1. Black gives 6.1:1 and 11.1:1. */
.price-cta.primary,.price-tag,.btn-gold,.cur-toggle button.on,.price-toggle button.on{
  color:#0A0A0A;
}
.price-cta.primary:hover,.btn-gold:hover{color:#0A0A0A}
.save{background:var(--positive);color:#0A0A0A}  /* 5.3:1, was white at 3.7:1 */

/* Price cards were written for dark sections only (white text on transparent).
   Dropped into a light section they render white-on-white — invisible.
   This restores them wherever the surrounding section is light. */
.sec:not(.sec-dark) .pricing-grid,
.container > .pricing-grid{border-color:var(--line-strong)}
.sec:not(.sec-dark) .price-card{border-right-color:var(--line);border-bottom-color:var(--line)}
.sec:not(.sec-dark) .price-card:hover{background:rgba(10,10,10,0.03)}
.sec:not(.sec-dark) .price-id{color:var(--ink-4)}
.sec:not(.sec-dark) .price-card.featured .price-id{color:var(--grad-2)}
.sec:not(.sec-dark) .price-amt .cent,
.sec:not(.sec-dark) .price-amt .per,
.sec:not(.sec-dark) .price-alt{color:var(--ink-4)}
.sec:not(.sec-dark) .price-feats{border-top-color:var(--line)}
.sec:not(.sec-dark) .price-feats li{color:var(--ink-2)}
.sec:not(.sec-dark) .price-feats li::before{color:var(--grad-2)}
.sec:not(.sec-dark) .price-cta{border-color:var(--ink);color:var(--ink)}
.sec:not(.sec-dark) .price-cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Roadmap status chips: the gold-on-cream pairing landed at 4.34:1. */
.rm-status.flag{color:#6E5210}          /* 5.9:1 on #EDE6D7 */
.rm-tag,.agent-num,.blog-meta,.post-meta{color:var(--ink-4)}

/* Final contrast pass — cases where a light island sits inside a dark section,
   or a more specific older rule was still winning. */

/* The billing badge: .price-toggle .save outranked the generic .save rule. */
.price-toggle .save,.cur-toggle .save{background:var(--positive);color:#0A0A0A}

/* .compare is a white table. Inside a dark section it inherits the dark ink
   scale and renders light grey on white — reset the scale for the island. */
.compare{
  --ink-3:#3B3B3B;
  --ink-4:#5F5F5A;   /* 6.0:1 on #FFFFFF, 5.4:1 on #F4F3EE */
  --ink-5:#6B6B66;
  color:var(--ink);
}
.sec-dark .compare caption,.dark .compare caption{color:var(--ink)}

/* Bold text inside prose that sits on a dark ground. */
.sec-dark .article-body strong,.dark .article-body strong,
.sec-dark .testi-who strong,.dark .testi-who strong,
.sec-dark p strong,.dark p strong{color:#F4F3EE}

/* effects.css loads after site.css, so its `transition:all` on .pt-tab and the
   toggle buttons was still winning at equal specificity and fading the focus
   ring in. Element+pseudo-class raises specificity enough to stop that. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  transition:none;
  outline:3px solid var(--gold-glow);
  outline-offset:3px;
}
.sec-dark a:focus-visible,.sec-dark button:focus-visible,
.dark a:focus-visible,.dark button:focus-visible,
.nav a:focus-visible,.nav button:focus-visible,
.foot a:focus-visible,.foot button:focus-visible{outline-color:var(--gold-bright)}

/* Source notes must stay small wherever they sit. Hero-level `p` rules were
   winning and blowing them up to 21px, which read as body copy. */
p.src-note,.hero p.src-note,.hero-copy p.src-note,.container p.src-note,.sec p.src-note{
  font-size:12px;line-height:1.5;color:var(--ink-4);letter-spacing:0.02em;margin-top:12px;
}
.sec-dark p.src-note,.dark p.src-note{color:var(--ink-5)}

/* ============================================================
   VISUAL FIXES — 04/09/2026, from the automated visual sweep
   ============================================================ */

/* Article tables now sit in .compare like every other table on the site.
   .compare table has min-width:640px, so on a phone it scrolls instead of
   being silently cropped. The wrapper is focusable, because a region that
   scrolls must be reachable with a keyboard (WCAG 2.1.1). */
.article-body .compare{margin:32px 0}
.article-body .compare table{font-size:14.5px}
.compare:focus-visible{outline:3px solid var(--gold-glow);outline-offset:2px}

/* Long unbreakable product names ("LaGrowthMachine") pushed past the viewport
   in display headings at 375px. */
h1,h2,h3,.sec-h,.h-display,.price-name,.grad{overflow-wrap:anywhere}

/* Touch targets: the logo is the primary "go home" affordance and the sticky
   bar's close button is the only way to dismiss it — both were 26px tall. */
.nav-brand{min-height:44px;display:inline-flex;align-items:center;gap:10px}
.sticky-cta .sc-x{
  width:44px;height:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;
}

/* ============================================================
   REVUE VISUELLE 04/09/2026 — correctifs
   Chaque bloc porte le défaut qu'il ferme, constaté au pixel.
   ============================================================ */

/* --- 1. Tableaux : le défaut n°1 de tout l'audit ---------------
   .compare gardait min-width:640px avec overflow-x:auto. Sur un
   téléphone de 390px, 45% du tableau était hors écran, coupé en
   plein mot, sans rien pour signaler qu'on pouvait faire défiler :
   la colonne du concurrent, la colonne CONSENT du cookie policy,
   la colonne PURPOSE des sous-traitants — invisibles.
   Sous 640px on n'essaie plus de faire tenir une grille : chaque
   ligne devient une carte libellé/valeur. Le data-label vient du
   <thead> de la table elle-même. */
.article-body .compare table{margin:0;border:0}   /* le cadre appartient au conteneur, pas à la table */
.compare table{min-width:0}
@media(min-width:641px){ .compare table{min-width:560px} }

@media(max-width:640px){
  .compare{overflow-x:visible;border:0;background:transparent;padding:0}
  .compare table{display:block;width:100%}
  .compare thead{display:none}
  .compare tbody,.compare tr,.compare td{display:block;width:auto}
  .compare tr{
    border:1.5px solid var(--ink);background:var(--paper);
    margin-bottom:14px;
  }
  .compare td{border-bottom:1px solid var(--line);padding:12px 16px;font-size:14.5px}
  .compare tr td:last-child{border-bottom:0}
  .compare td[data-label]::before{
    content:attr(data-label);display:block;
    font:700 10.5px/1.4 ui-monospace,"SF Mono",Consolas,monospace;
    text-transform:uppercase;letter-spacing:0.08em;
    color:var(--ink-4);margin-bottom:5px;
  }
  .compare td.win{box-shadow:inset 3px 0 0 var(--grad-1)}
  .compare caption{caption-side:top;text-align:left;padding:0 0 10px}
}
/* Entre 641 et 900px le défilement reste possible : il doit se voir. */
@media(min-width:641px){
  .compare{
    background:
      linear-gradient(to right,var(--paper) 30%,rgba(255,255,255,0)),
      linear-gradient(to left,var(--paper) 30%,rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%,rgba(10,10,10,0.16),rgba(10,10,10,0)),
      radial-gradient(farthest-side at 100% 50%,rgba(10,10,10,0.16),rgba(10,10,10,0)) 100% 0;
    background-repeat:no-repeat;
    background-size:40px 100%,40px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
}
.compare caption{caption-side:top;text-align:left;padding:0 0 10px;font-size:12px;color:var(--ink-4)}
.compare thead th{border-bottom:1.5px solid var(--ink);background:var(--bg-3);color:var(--ink-3)}

/* --- 2. Pied de page : 5 colonnes dans une grille de 4 --------
   La colonne Legal retombait seule sur une deuxième rangée, avec
   ~1000px de noir vide à sa droite, sur les 34 pages. */
@media(min-width:760px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.foot-grid{grid-template-columns:1.6fr repeat(4,1fr);gap:32px}}

/* --- 3. .narrow imbriqué dans .container ----------------------
   `margin:0 auto` décalait le corps du texte à x=340 sous un titre
   calé à x=92 : un paragraphe n'était plus aligné avec son propre
   titre. On garde la mesure de lecture, on retire le centrage —
   uniquement quand .narrow est IMBRIQUÉ (les pages légales, qui
   utilisent `class="container narrow"` sur un seul élément, restent
   centrées comme prévu). */
.container > .narrow{margin-inline:0}

/* --- 4. Boutons invisibles sur fond noir ----------------------
   .btn utilise var(--ink) en fond ET en bordure : sur une section
   sombre cela donnait 1,03:1 contre le fond. Seul le libellé
   subsistait, et primaire/secondaire étaient indiscernables. */
.sec-dark .btn,.dark .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.sec-dark .btn:hover,.dark .btn:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:#0A0A0A}
.sec-dark .btn-gold,.dark .btn-gold{background:linear-gradient(95deg,var(--gold-bright),var(--grad-1));border-color:transparent;color:#0A0A0A}

/* --- 5. Curseur natif ----------------------------------------
   Piste en pilule et pastille ronde de 13px : la seule géométrie
   arrondie d'une direction artistique à angles droits, et très en
   dessous d'une cible tactile utilisable. */
.roi-control input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:24px;background:transparent;border-radius:0;
}
.roi-control input[type=range]::-webkit-slider-runnable-track{
  height:6px;background:var(--line-strong);border-radius:0;
}
.roi-control input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-8px;border-radius:0;
  background:var(--grad-1);border:2px solid var(--ink);cursor:pointer;
}
.roi-control input[type=range]::-moz-range-track{height:6px;background:var(--line-strong);border-radius:0}
.roi-control input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:0;
  background:var(--grad-1);border:2px solid var(--ink);cursor:pointer;
}
.sec-dark .roi-control input[type=range]::-webkit-slider-runnable-track,
.dark .roi-control input[type=range]::-webkit-slider-runnable-track{background:var(--line-d-strong)}
.sec-dark .roi-control input[type=range]::-moz-range-track,
.dark .roi-control input[type=range]::-moz-range-track{background:var(--line-d-strong)}
@media(max-width:880px){
  .roi-control input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-11px}
  .roi-control input[type=range]::-moz-range-thumb{width:28px;height:28px}
}

/* --- 6. Liens du CTA de fin d'article -------------------------
   .article-cta est frère de .article-body : ses liens n'héritaient
   d'aucune couleur et se lisaient comme du texte mort. */
.article-cta a:not(.btn){color:var(--grad-2);border-bottom:1px solid var(--grad-2);font-weight:500}
.article-cta a:not(.btn):hover{opacity:.65}
.article-cta p{max-width:56ch;margin-left:auto;margin-right:auto;text-align:left}

/* --- 7. Coupure de mot -----------------------------------------
   `overflow-wrap:anywhere` corrigeait le débordement mais coupait
   « LaGrowthMac / hine » en plein titre. break-word ne casse un mot
   que s'il ne peut vraiment pas tenir. */
h1,h2,h3,.sec-h,.h-display,.price-name,.grad{overflow-wrap:break-word;hyphens:manual}
h1,h2,h3,.sec-h,.blog-card h3,.article h1{text-wrap:balance}

/* --- 8. Rampe du dégradé or -----------------------------------
   La rampe complète (#B8862F → #5C4416) était écrasée sur la boîte
   de chaque élément : sur un mot de 8 lettres, la fin du mot virait
   au brun foncé et le titre semblait bicolore. */
.grad{background-image:linear-gradient(95deg,#C9A227 0%,#A8801F 100%)}
.sec-dark .grad,.dark .grad{background-image:linear-gradient(95deg,var(--gold-bright),var(--grad-1))}

/* --- 9. Badge « 2 months free » ------------------------------
   Olive : la seule teinte verte d'un site noir / or / blanc. */
.price-toggle .save,.cur-toggle .save{background:rgba(212,168,74,0.20);color:var(--grad-3)}
.sec-dark .price-toggle .save,.dark .price-toggle .save{color:var(--gold-bright)}

/* --- 10. Barre CTA collante sur mobile ------------------------
   270x290px, titre sur 4 lignes, croix empilée sous le bouton :
   un tiers de l'écran d'un téléphone. */
@media(max-width:580px){
  .sticky-cta{
    left:12px;right:12px;width:auto;transform:none;
    flex-wrap:nowrap;align-items:center;gap:12px;padding:12px 44px 12px 16px;
    text-align:left;
  }
  .sticky-cta .sc-h{font-size:13px;line-height:1.3}
  .sticky-cta .sc-sub{display:none}
  .sticky-cta .btn{flex:none;white-space:nowrap}
  .sticky-cta .sc-x{position:absolute;top:4px;right:4px}
}

/* --- 11. Manifeste : 3,3:1, lu comme du texte désactivé ------- */
.manifesto-text .dim{color:rgba(255,255,255,0.46)}

/* --- 12. Listes ordonnées imbriquées --------------------------
   Le niveau 2 repartait à « 1. » avec le même marqueur décimal que
   le niveau 1 : impossible de distinguer une étape d'un sous-point. */
.article-body ol ol{margin:12px 0 12px 22px}
.article-body ol ol li{list-style:lower-alpha}
.article-body ol ol ol li{list-style:lower-roman}

/* --- 13. FAQ : filet doublé et trou de 92px sous le titre ----- */
.article-body .faq{margin-top:24px}
.faq details:last-of-type{border-bottom:0}
.faq details:first-of-type{border-top:1px solid var(--line)}

/* --- 14. Filets doublés sur la grille du blog ----------------- */
@media(min-width:1100px){.blog-card:nth-child(3n){border-right:0}}
@media(min-width:760px) and (max-width:1099px){.blog-card:nth-child(2n){border-right:0}}
@media(max-width:759px){.blog-card{border-right:0}}
.blog-card:last-child{border-bottom:0}

/* --- 15. Cellule de grille vide et bordée ---------------------
   8 items sur 3 colonnes laissaient un cadre vide de 836x270px.
   Le dernier orphelin occupe la place restante au lieu de la
   laisser dessinée sur du néant. */
@media(min-width:1100px){
  .agents > *:last-child:nth-child(3n+1){grid-column:span 3}
  .agents > *:last-child:nth-child(3n+2){grid-column:span 2}
}
@media(min-width:760px) and (max-width:1099px){
  .agents > *:last-child:nth-child(2n+1){grid-column:span 2}
}

/* --- 16. Débordement horizontal de la home -------------------
   Le marquee (3271px) élargissait le document à 1522px ; masqué par
   overflow-x:hidden sur <html>, mais c'est le symptôme qu'on masque,
   pas la cause. */
.tools-bar{overflow:hidden}

/* --- 17. Chapô d'article sur mobile --------------------------- */
@media(max-width:640px){
  .article-lede{font-size:18px;line-height:1.5}
}

/* --- 18. Guillemets typographiques ---------------------------- */
.testi-q::before{content:'\201C'}
.testi-q::after{content:'\201D'}

/* --- 19. Bouton fantôme sur fond sombre -----------------------
   La règle .sec-dark .btn ci-dessus repeignait aussi .btn-ghost en
   blanc plein : les deux boutons devenaient identiques, primaire et
   secondaire indiscernables. */
.sec-dark .btn-ghost,.dark .btn-ghost{
  background:transparent;border-color:rgba(255,255,255,0.38);color:#F4F3EE;
}
.sec-dark .btn-ghost:hover,.dark .btn-ghost:hover{background:#F4F3EE;color:var(--bg-dark);border-color:#F4F3EE}

/* --- 20. Légende « PER MONTH » du calculateur -----------------
   Elle était à 49px de la valeur qu'elle qualifie et à 37px du bloc
   suivant : elle se lisait comme le titre du bloc d'après. */
.roi-per{margin-top:2px;margin-bottom:26px}