/* ============================================================
   ARTFIK AGENCY v2 — design system
   Stage: warm near-black, aurora drift, masked tech grid, grain.
   Accent: one orange system. Type: Bricolage / Hanken / Space Mono.
   Sections are ordered top-to-bottom as they appear on the site.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:        #0A0908;
  --bg-2:      #12100D;
  --bg-3:      #191613;
  --line:      rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.055);
  --text:      #F1EFE9;
  --text-2:    rgba(236,232,224,.72);
  --text-3:    rgba(236,232,224,.46);
  --orange:    #FF6B2C;
  --ember:     #FFB25A;
  --deep:      #EE3A1C;
  --grad:      linear-gradient(135deg,#FFB25A 0%,#FF6B2C 55%,#EE3A1C 100%);
  --green:     #46B26A;
  --gold:      #F5A623;
  --red:       #E5533C;

  --font-display:"Bricolage Grotesque",sans-serif;
  --font-body:"Hanken Grotesk",sans-serif;
  --font-mono:"Space Mono",monospace;

  --r-lg:18px;
  --r-md:12px;
  --r-sm:8px;
  --wrap:1168px;
  --pad:clamp(20px,4vw,32px);
  --head-h:76px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-2);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);line-height:1.08;margin:0;font-weight:700;letter-spacing:-.015em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
::selection{background:rgba(255,107,44,.32);color:#fff}

.skip-link{
  position:fixed;left:16px;top:-60px;z-index:200;
  background:var(--bg-3);border:1px solid var(--line);color:var(--text);
  padding:10px 16px;border-radius:var(--r-sm);transition:top .2s;
}
.skip-link:focus{top:16px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- 3. The stage (aurora + grid + grain) ---------- */
.stage{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.stage::before{ /* fine tech grid, fading from the top */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 68% at 50% -6%,#000 30%,transparent 78%);
          mask-image:radial-gradient(120% 68% at 50% -6%,#000 30%,transparent 78%);
}
.stage::after{ /* film grain */
  content:"";position:absolute;inset:-40%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;
  animation:grain 9s steps(6) infinite;
}
.aura{position:absolute;border-radius:50%;filter:blur(90px);opacity:.16}
.aura-1{width:620px;height:620px;left:-160px;top:-220px;
  background:radial-gradient(circle,#FF6B2C 0%,transparent 62%);
  animation:drift1 46s ease-in-out infinite alternate}
.aura-2{width:540px;height:540px;right:-180px;top:16%;opacity:.10;
  background:radial-gradient(circle,#FFB25A 0%,transparent 60%);
  animation:drift2 58s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(140px,90px) scale(1.12)}}
@keyframes drift2{from{transform:translate(0,0)}to{transform:translate(-120px,130px)}}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-2%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}
}

/* ---------- 4. Layout + shared bits ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
section{position:relative}

.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--orange);flex:none}

.sec-head{max-width:640px;margin-bottom:clamp(36px,6vw,60px)}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:16px}
.sec-head p{margin-top:16px;font-size:1.06rem;color:var(--text-2)}
.sec-head .eyebrow{margin-bottom:0}

.grad-word{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.mono{font-family:var(--font-mono)}
.tick-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.tick-list li{padding-left:26px;position:relative}
.tick-list li::before{
  content:"";position:absolute;left:0;top:8px;width:13px;height:7px;
  border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(-45deg);
}
.tick-list b{color:var(--text);font-weight:600}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:600;font-size:.98rem;
  padding:13px 24px;border-radius:999px;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn svg{flex:none}
.btn-primary{
  color:#180A03;background:var(--grad);
  box-shadow:0 8px 26px -10px rgba(255,107,44,.55),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(255,107,44,.62),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ghost{
  color:var(--text);border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.btn-ghost:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.btn-lg{padding:16px 30px;font-size:1.05rem}
.btn-sm{padding:10px 18px;font-size:.9rem}

/* ---------- 6. Header ---------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;
  border-bottom:1px solid transparent;
}
.site-head.is-scrolled{
  background:rgba(10,9,8,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}
.nav{height:var(--head-h);display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{height:44px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:14px;list-style:none;padding:0}
.nav-links a{
  text-decoration:none;color:var(--text-2);font-size:.95rem;font-weight:500;
  transition:color .15s;
}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]::after{
  content:"";display:block;height:2px;margin-top:3px;border-radius:2px;background:var(--grad);
}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav-phone{
  font-family:var(--font-mono);font-size:.82rem;color:var(--text-2);
  text-decoration:none;letter-spacing:.02em;
}
.nav-phone:hover{color:var(--text)}
/* EN | FR language switch — stays visible at every width */
.nav-lang{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  color:var(--text-2);text-decoration:none;
  min-width:38px;padding:7px 9px;border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.nav-lang:hover{color:var(--text);border-color:rgba(255,178,90,.45);background:rgba(255,255,255,.07)}
.m-nav-foot .nav-lang{align-self:flex-start;font-size:.8rem;padding:9px 14px}
.nav-signin{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--text);
  text-decoration:none;padding:9px 17px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:border-color .18s ease,background .18s ease;
}
.nav-signin:hover{border-color:rgba(255,178,90,.4);background:rgba(255,255,255,.06)}
.burger{display:none;width:44px;height:44px;position:relative;z-index:120;border-radius:var(--r-sm)}
.burger span{
  position:absolute;left:11px;right:11px;height:2px;background:var(--text);
  transition:transform .25s,opacity .2s,top .25s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)}

.m-nav{
  position:fixed;inset:0;z-index:100;background:rgba(10,9,8,.97);
  display:none;flex-direction:column;padding:110px var(--pad) 40px;
}
.m-nav.is-open{display:flex}
.m-nav a{text-decoration:none}
.m-nav-links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.m-nav-links a{
  font-family:var(--font-display);font-weight:700;font-size:2rem;color:var(--text);
  display:block;padding:10px 0;border-bottom:1px solid var(--line-soft);
}
.m-nav-links a[aria-current="page"]{color:var(--orange)}
.m-nav-foot{margin-top:auto;display:grid;gap:16px}
.m-nav-foot .nav-phone{font-size:1rem}

/* ---------- 7. Hero ---------- */
.hero{padding:calc(var(--head-h) + clamp(18px,3.5vh,40px)) 0 clamp(48px,7vw,84px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,64px);align-items:start}
.hero-copy{margin-top:clamp(24px,7vh,84px)}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.15rem);font-weight:800;letter-spacing:-.025em}
.hero-sub{margin-top:22px;font-size:1.12rem;max-width:520px}
.hero-ctas{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.trustbar{
  margin-top:36px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-family:var(--font-mono);font-size:.76rem;color:var(--text-3);letter-spacing:.04em;
}
.trustbar .stars{color:var(--gold);letter-spacing:.14em;font-size:.8rem}
.trustbar span{display:inline-flex;align-items:center;gap:8px}

/* ---------- 8. The response engine console ---------- */
.console{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 34%),var(--bg-2);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;z-index:1;
}

/* the 3D-rendered robot holding the console from above.
   robot.webp is a true alpha cutout; the wrapper's height minus the
   hold's padding-top makes the fingertips overlap the console bar. */
.console-hold{position:relative;padding-top:260px;perspective:1400px}
.robot-wrap{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(400px,96%);z-index:2;pointer-events:none;
  animation:rbob 7s ease-in-out infinite;
}
.robot-img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.5));
  transform:translate(var(--px,0px),var(--py,0px));
  transition:transform .25s ease-out;
}
.robot-glow{
  position:absolute;left:50%;top:4%;width:72%;aspect-ratio:1;
  transform:translateX(-50%);z-index:-1;
  background:radial-gradient(circle,rgba(255,107,44,.20),transparent 62%);
  filter:blur(34px);animation:rglow 4.6s ease-in-out infinite;
}
@keyframes rbob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
@keyframes rglow{0%,100%{opacity:.55}50%{opacity:1}}
.console{transition:transform .18s ease-out;will-change:transform}
.console::before{ /* top edge light */
  content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,178,90,.5),transparent);
}
.console-top{
  display:flex;align-items:center;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--line-soft);
}
.console-dots{display:flex;gap:6px}
.console-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.console-title{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.console-live{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;color:var(--green);
}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(70,178,106,.45)}55%{box-shadow:0 0 0 7px rgba(70,178,106,0)}}

/* FIXED height (never min-height): the feed fills with messages as the demo
   plays, and a growing feed would push the whole page down and snap it back
   on every loop. Messages stack from the bottom like a real chat and the
   oldest fade off the top. */
.console-feed{
  padding:20px 18px 8px;
  height:404px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 56px);
          mask-image:linear-gradient(180deg,transparent 0,#000 56px);
}
.msg{max-width:82%;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.msg.show{opacity:1;transform:none}
.msg-meta{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:6px;display:flex;gap:8px;align-items:center;
}
.msg-bubble{
  padding:11px 15px;border-radius:14px;font-size:.92rem;line-height:1.5;color:var(--text);
}
.msg-in{align-self:flex-start}
.msg-in .msg-bubble{background:rgba(255,255,255,.06);border:1px solid var(--line-soft);border-bottom-left-radius:4px}
.msg-out{align-self:flex-end;text-align:left}
.msg-out .msg-meta{justify-content:flex-end}
.msg-out .msg-bubble{
  background:linear-gradient(135deg,rgba(255,107,44,.16),rgba(238,58,28,.10));
  border:1px solid rgba(255,107,44,.30);border-bottom-right-radius:4px;
}
.msg-sys{align-self:center;max-width:100%}
.msg-sys .msg-bubble{
  background:none;border:0;padding:2px 0;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--text-3);
}
.caret{display:inline-block;width:7px;height:1em;vertical-align:-2px;background:var(--ember);animation:caret .75s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

.think{display:inline-flex;gap:5px;align-items:center;padding:4px 2px}
.think i{width:6px;height:6px;border-radius:50%;background:var(--ember);opacity:.35;animation:think 1s ease-in-out infinite}
.think i:nth-child(2){animation-delay:.16s}
.think i:nth-child(3){animation-delay:.32s}
@keyframes think{40%{opacity:1;transform:translateY(-3px)}}

.book-card{
  align-self:center;width:100%;max-width:330px;
  border:1px solid rgba(70,178,106,.35);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(70,178,106,.10),rgba(70,178,106,.04));
  padding:13px 16px;display:flex;gap:12px;align-items:center;
  opacity:0;transform:translateY(8px) scale(.98);transition:opacity .45s,transform .45s;
}
.book-card.show{opacity:1;transform:none}
.book-check{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:rgba(70,178,106,.16);border:1px solid rgba(70,178,106,.5);
  display:grid;place-items:center;color:var(--green);font-size:.85rem;
}
.book-lines b{display:block;color:var(--text);font-size:.9rem;font-weight:600}
.book-lines span{font-family:var(--font-mono);font-size:.7rem;color:var(--text-3);letter-spacing:.06em}

.console-foot{
  display:flex;gap:0;border-top:1px solid var(--line-soft);
}
.tele{
  flex:1;padding:11px 8px;text-align:center;
}
.tele + .tele{border-left:1px solid var(--line-soft)}
.tele b{display:block;font-family:var(--font-mono);font-weight:700;font-size:.98rem;color:var(--ember);letter-spacing:.02em}
.tele.ok b{color:var(--green)}
.tele span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.console-note{
  margin-top:12px;text-align:center;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
}

/* ---------- 9. Stat strip ---------- */
.stats{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.014)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.stat{padding:clamp(28px,4vw,44px) clamp(18px,3vw,40px)}
.stat + .stat{border-left:1px solid var(--line-soft)}
.stat b{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(2.2rem,4.4vw,3.3rem);
  color:var(--text);display:block;letter-spacing:-.02em;
}
.stat b em{font-style:normal;color:var(--orange)}
.stat p{margin-top:10px;font-size:.95rem}
.stat cite{
  display:block;margin-top:12px;font-style:normal;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
.stats-note{
  padding:24px 0 30px;text-align:center;
  font-family:var(--font-mono);font-size:.95rem;line-height:1.6;letter-spacing:.03em;
  color:var(--text-2);
}
@media (max-width:640px){
  .stats-note{font-size:.86rem}
}

/* ---------- 10. Problem: the leak log ---------- */
.leak{padding:clamp(28px,3.5vw,48px) 0}
.leak-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,64px);align-items:center}
.leak-points{margin-top:26px}
.leak-points{display:grid;gap:26px;margin-top:34px}
.leak-point h3{font-size:1.16rem;margin-bottom:7px}
.leak-point p{font-size:.99rem}

.log{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--bg-2);
  font-family:var(--font-mono);
}
.log-top{
  padding:12px 18px;border-bottom:1px solid var(--line-soft);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);
  display:flex;justify-content:space-between;gap:12px;
}
.log-top b{color:var(--red);font-weight:400}
.log-body{padding:10px 6px}
.log-line{
  display:grid;grid-template-columns:78px 1fr auto;gap:14px;align-items:baseline;
  padding:9px 14px;font-size:.8rem;border-radius:8px;
}
.log-line:nth-child(odd){background:rgba(255,255,255,.018)}
.log-time{color:var(--text-3);font-size:.72rem}
.log-event{color:var(--text-2)}
.log-flag{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.log-flag.miss{color:var(--red)}
.log-flag.ok{color:var(--green)}
.log-sum{
  border-top:1px solid var(--line-soft);padding:14px 20px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:.78rem;color:var(--text-3);
}
.log-sum b{color:var(--red);font-size:1.05rem;font-weight:700;letter-spacing:.02em}

/* ---------- 11. Pillars: capture / nurture / close ---------- */
.pillars{padding:clamp(28px,3.5vw,48px) 0;border-top:1px solid var(--line-soft)}
.pillars-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,90px);align-items:start}
.pillars-sticky{position:sticky;top:calc(var(--head-h) + 32px)}
.pillars-list{display:grid;gap:0}
.pillar{
  padding:clamp(28px,4vw,40px) 0;border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:74px 1fr;gap:clamp(16px,3vw,30px);
}
.pillar:last-child{border-bottom:1px solid var(--line-soft)}
.pillar-num{
  font-family:var(--font-mono);font-size:.8rem;color:var(--orange);letter-spacing:.1em;padding-top:6px;
}
.pillar h3{font-size:1.5rem;margin-bottom:10px}
.pillar p{margin-bottom:16px}
.pillar .tick-list{font-size:.95rem}

/* ---------- 12. Features bento ---------- */
.features{padding:clamp(28px,3.5vw,48px) 0;border-top:1px solid var(--line-soft)}
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(190px,auto);gap:14px}
.b-wide{grid-column:span 2}
.b-tall{grid-row:span 2}
.b-tag{
  position:absolute;top:18px;right:18px;
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line-soft);border-radius:999px;padding:4px 9px;
}
.b-card{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)),var(--bg-2);
  padding:24px;display:flex;flex-direction:column;gap:16px;
  transition:border-color .2s ease,transform .2s ease;
  position:relative;overflow:hidden;
}
.b-card:hover{border-color:rgba(255,178,90,.32);transform:translateY(-4px) perspective(700px) rotateX(1.4deg)}
.b-card h3{font-size:1.08rem;padding-right:64px}
.b-card > p{font-size:.93rem;color:var(--text-2)}
.b-art{
  margin-top:auto;border:1px solid var(--line-soft);border-radius:var(--r-md);
  background:rgba(0,0,0,.28);padding:14px;min-height:86px;
  display:flex;flex-direction:column;gap:8px;justify-content:center;
}
.b-art .mini-bubble,.svc-art .mini-bubble{
  font-size:.78rem;line-height:1.45;padding:7px 11px;border-radius:10px;max-width:88%;color:var(--text);
}
.mini-in{background:rgba(255,255,255,.07);align-self:flex-start;border-bottom-left-radius:3px}
.mini-out{background:rgba(255,107,44,.16);border:1px solid rgba(255,107,44,.28);align-self:flex-end;border-bottom-right-radius:3px}
.b-art .mini-line,.svc-art .mini-line{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--text-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.b-art .mini-line b,.svc-art .mini-line b{color:var(--green);font-weight:400}
.b-art .mini-line .gold,.svc-art .mini-line .gold{color:var(--gold);letter-spacing:.18em}
.big-timer{font-family:var(--font-mono);font-weight:700;font-size:2rem;color:var(--ember);text-align:center;letter-spacing:.02em}
.big-timer span{display:block;font-size:.62rem;font-weight:400;letter-spacing:.2em;color:var(--text-3);margin-top:4px;text-transform:uppercase}
.chan-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.chan{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--text-2);
}
.chan.on{border-color:rgba(255,107,44,.4);color:var(--ember)}
.pay-chip{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:.78rem;color:var(--text);
  border:1px solid var(--line-soft);border-radius:9px;padding:9px 12px;background:rgba(255,255,255,.02);
}
.pay-chip b{color:var(--green);font-weight:400;font-size:.68rem;letter-spacing:.12em}
.bars{display:flex;align-items:flex-end;gap:7px;height:56px;justify-content:center}
.bars i{width:14px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--ember),var(--orange));opacity:.85}
.remind-dots{display:flex;align-items:center;gap:0;justify-content:center;font-family:var(--font-mono);font-size:.66rem;color:var(--text-3);letter-spacing:.08em}
.remind-dots i{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}
.remind-dots span{padding:0 8px}
.remind-dots em{flex:1;max-width:46px;height:1px;background:var(--line);font-size:0}

/* ---------- 13. Audiences marquee ---------- */
.aud{padding:clamp(26px,3.5vw,44px) 0;border-top:1px solid var(--line-soft);overflow:hidden}
.aud .sec-head{margin-bottom:36px}
.marquee{display:flex;flex-direction:column;gap:12px}
.marquee-row{display:flex;gap:12px;width:max-content}
.marquee-row.r1{animation:mq 42s linear infinite}
.marquee-row.r2{animation:mq 42s linear infinite reverse}
.marquee:hover .marquee-row{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.aud-chip{
  flex:none;display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:999px;padding:11px 20px;
  background:rgba(255,255,255,.022);font-size:.95rem;color:var(--text);text-decoration:none;
  white-space:nowrap;
}
.aud-chip .mono{font-size:.66rem;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase}
.aud-chip:hover{border-color:rgba(255,178,90,.4)}
.aud-links{
  margin-top:26px;text-align:center;font-size:.98rem;color:var(--text-2);
}
.aud-links a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.aud-links a:hover{color:var(--text)}
.band-paper .aud-links a{color:#A33A12}

/* ---------- 14. Growth audit ---------- */
.audit{padding:clamp(28px,3.5vw,48px) 0;border-top:1px solid var(--line-soft)}
.audit-shell{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--bg-2);
  box-shadow:0 50px 110px -50px rgba(0,0,0,.85);
}
.audit-side{
  padding:clamp(28px,4vw,44px);border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:22px;
  background:
    radial-gradient(90% 70% at 0% 0%,rgba(255,107,44,.12),transparent 60%);
}
.audit-side h2{font-size:clamp(1.7rem,2.8vw,2.2rem)}
.audit-side .tick-list{font-size:.95rem}
.audit-side-foot{margin-top:auto;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;color:var(--text-3);line-height:1.8}
.audit-main{padding:clamp(26px,4vw,44px);min-height:520px;display:flex;flex-direction:column}

.audit-progress{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.audit-progress .bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.audit-progress .bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .35s ease}
.audit-progress span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--text-3)}

.audit-step h3{font-size:1.35rem;margin-bottom:18px}
.audit-opts{display:grid;gap:9px}
.audit-opt{
  text-align:left;border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 17px;background:rgba(255,255,255,.02);color:var(--text);font-size:.97rem;
  transition:border-color .15s,background .15s,transform .15s;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.audit-opt:hover{border-color:rgba(255,178,90,.45);background:rgba(255,107,44,.05)}
.audit-opt.sel{border-color:var(--orange);background:rgba(255,107,44,.10)}
.audit-opt .k{font-family:var(--font-mono);font-size:.66rem;color:var(--text-3);letter-spacing:.1em}
.audit-opts.multi .audit-opt.sel::after{content:"✓";color:var(--orange);font-weight:700}
.audit-nav{margin-top:22px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.audit-back{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;color:var(--text-3);text-transform:uppercase;padding:8px 4px}
.audit-back:hover{color:var(--text)}
.audit-hint{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--text-3)}

.audit .field{margin-bottom:13px}
.field label{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px;color:var(--text);font:inherit;font-size:.96rem;
  transition:border-color .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field ::placeholder{color:rgba(236,232,224,.32)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:var(--text-3);margin:14px 0 18px}
.consent input{width:15px;height:15px;margin-top:3px;accent-color:var(--orange)}
.form-err{color:var(--red);font-size:.82rem;min-height:1.2em;margin-top:8px}

/* audit result */
.audit-result{display:none}
.audit-result.show{display:block}
.result-top{display:flex;gap:clamp(18px,3vw,34px);align-items:center;margin-bottom:24px}
.dial{position:relative;width:132px;height:132px;flex:none}
.dial svg{transform:rotate(-90deg)}
.dial-track{stroke:rgba(255,255,255,.08)}
.dial-arc{
  stroke:url(#dialGrad);stroke-dasharray:364.42;stroke-dashoffset:364.42;
  transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1);
}
.dial-val{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
}
.dial-val b{font-family:var(--font-display);font-size:2.5rem;font-weight:800;color:var(--text);line-height:1}
.dial-val span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;color:var(--text-3);text-transform:uppercase}
.result-leak p{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.result-leak b{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--ember);display:block;margin-top:4px;
}
.result-leak small{font-size:.78rem;color:var(--text-3);display:block;margin-top:6px}
.fixes{border-top:1px solid var(--line-soft);padding-top:20px;display:grid;gap:13px;margin-bottom:26px}
.fix{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}
.fix i{
  font-family:var(--font-mono);font-style:normal;font-size:.72rem;color:var(--orange);
  border:1px solid rgba(255,107,44,.4);border-radius:6px;width:24px;height:24px;
  display:grid;place-items:center;margin-top:2px;
}
.fix b{color:var(--text);font-weight:600;display:block;font-size:.97rem}
.fix span{font-size:.88rem;color:var(--text-2)}
.result-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.result-note{margin-top:14px;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;color:var(--text-3);text-transform:uppercase}

/* ---------- 15. How it works ---------- */
.how{padding:clamp(28px,3.5vw,48px) 0;border-top:1px solid var(--line-soft)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:step}
.step{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008)),var(--bg-2);
  position:relative;
}
.step-num{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--orange)}
.step h3{font-size:1.22rem;margin:12px 0 10px}
.step p{font-size:.95rem}
.step .mono-tag{
  margin-top:18px;display:inline-block;font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  border:1px solid var(--line-soft);border-radius:999px;padding:5px 11px;
}

/* ---------- 16. Reviews ---------- */
.reviews{padding:clamp(28px,3.5vw,48px) 0;border-top:1px solid var(--line-soft)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008)),var(--bg-2);
  display:flex;flex-direction:column;gap:14px;margin:0;
}
.review .stars{color:var(--gold);font-size:.82rem;letter-spacing:.22em}
.review blockquote{margin:0;font-size:.96rem;color:var(--text-2);line-height:1.6}
.review figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.review figcaption b{color:var(--text);font-weight:600;font-size:.95rem}
.review figcaption span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.review-more{margin-top:26px;display:flex;justify-content:center}
.rating-banner{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 26px;margin-bottom:30px;
  background:linear-gradient(90deg,rgba(245,166,35,.07),transparent 55%),var(--bg-2);
}
.rating-banner b{font-family:var(--font-mono);font-size:1.6rem;color:var(--text)}
.rating-banner .stars{color:var(--gold);letter-spacing:.2em}
.rating-banner p{font-size:.9rem;color:var(--text-3)}

/* ---------- 17. Pricing ---------- */
.pricing{padding:clamp(28px,3.5vw,48px) 0;border-top:1px solid var(--line-soft)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
/* homepage teaser: two plans instead of three. A class, NOT an inline style -
   an inline grid-template-columns beats the phone media queries below and the
   second card gets clipped at 375px. */
.plans-pair{grid-template-columns:1fr 1fr;max-width:860px}
.plan{
  border:1px solid var(--line);border-radius:20px;padding:30px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)),var(--bg-2);
  display:flex;flex-direction:column;gap:0;position:relative;
}
.plan-feat{border-color:rgba(255,107,44,.45);background:linear-gradient(180deg,rgba(255,107,44,.07),rgba(255,255,255,.008) 45%),var(--bg-2)}
.plan-flag{
  position:absolute;top:-11px;left:26px;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--grad);color:#180A03;font-weight:700;border-radius:999px;padding:5px 12px;
}
.plan h3{font-size:1.25rem}
.plan-for{font-size:.88rem;color:var(--text-3);margin-top:6px;min-height:2.6em}
.plan-price{margin:20px 0 4px;display:flex;align-items:baseline;gap:8px}
.plan-price b{font-family:var(--font-mono);font-weight:700;font-size:2.3rem;color:var(--text);letter-spacing:-.02em}
.plan-price span{font-family:var(--font-mono);font-size:.72rem;color:var(--text-3);letter-spacing:.08em}
.plan-build{font-family:var(--font-mono);font-size:.7rem;color:var(--text-3);letter-spacing:.08em;padding-bottom:20px;border-bottom:1px solid var(--line-soft)}
.plan .tick-list{margin:20px 0 26px;font-size:.92rem;gap:9px}
.plan .btn{margin-top:auto;width:100%}
.plans-note{
  margin-top:22px;text-align:center;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.12em;color:var(--text-3);
}
.engine-note{
  margin-top:36px;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;
  background:var(--bg-2);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
}
.engine-note .mono{color:var(--orange);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;padding-top:4px}
.engine-note h3{font-size:1.1rem;margin-bottom:8px}
.engine-note p{font-size:.94rem}

/* ---------- "what it replaces" stack table ---------- */
.replaces{margin-top:clamp(34px,4vw,52px)}
.rep-table{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008)),var(--bg-2);
}
.rep-row{
  display:grid;grid-template-columns:1.25fr 1.5fr .75fr .6fr;
  gap:18px;align-items:center;padding:15px 22px;
  border-top:1px solid var(--line-soft);
}
.rep-row:first-child{border-top:0}
.rep-head{
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);background:rgba(0,0,0,.25);padding-top:13px;padding-bottom:13px;
}
.rep-feat{color:var(--text);font-weight:600;font-size:.97rem}
.rep-tools{font-size:.88rem;color:var(--text-3)}
.rep-cost{font-family:var(--font-mono);font-size:.88rem;color:var(--text-2);text-align:right}
.rep-yes{justify-self:end;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:#180A03;font-size:.72rem;font-weight:700}
.rep-total{
  display:grid;grid-template-columns:1.25fr 1.5fr .75fr .6fr;gap:18px;align-items:center;
  padding:20px 22px;border-top:1px solid var(--line);background:rgba(0,0,0,.3);
}
.rep-total .rep-label{grid-column:1 / 3;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.rep-total .rep-old{font-family:var(--font-mono);font-size:1rem;color:var(--text-2);text-align:right;
  text-decoration:line-through;text-decoration-color:rgba(229,83,60,.8)}
.rep-total .rep-new{justify-self:end;font-family:var(--font-mono);font-weight:700;font-size:1.15rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.rep-foot{
  margin-top:14px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--text-3);line-height:1.7;
}
/* the rep-table keeps its dark surface on the cream band (see the dark-card
   rule above), so its head/total rows keep the dark tint too */
@media (max-width:760px){
  .rep-head{display:none}
  .rep-row{grid-template-columns:1fr auto;gap:6px 14px;padding:16px 18px}
  .rep-feat{grid-column:1;font-size:1rem}
  .rep-yes{grid-column:2;grid-row:1 / span 2}
  .rep-tools{grid-column:1;font-size:.84rem}
  .rep-cost{grid-column:1;text-align:left;color:var(--ember)}
  .rep-cost::before{content:"replaces ";color:var(--text-3)}
  :lang(fr) .rep-cost::before{content:"au lieu de "}
  .rep-total{grid-template-columns:1fr auto;padding:18px}
  .rep-total .rep-label{grid-column:1 / -1;margin-bottom:6px}
  .rep-total .rep-old{grid-column:1;text-align:left}
}

/* comparison table */
.compare{margin-top:56px;overflow-x:auto}
.compare table{width:100%;border-collapse:collapse;min-width:640px}
.compare th,.compare td{
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-soft);font-size:.92rem;
}
.compare thead th{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);font-weight:400;
}
.compare tbody th{font-weight:500;color:var(--text);font-size:.92rem}
.compare td{color:var(--text-2);font-family:var(--font-mono);font-size:.8rem}
.compare td .yes{color:var(--green)}
.compare td .no{color:var(--text-3)}

/* ---------- 18. FAQ ---------- */
.faq{padding:clamp(28px,3.5vw,48px) 0;border-top:1px solid var(--line-soft)}
.faq-list{max-width:760px;display:grid;gap:0;border-top:1px solid var(--line-soft)}
.faq-groups{max-width:820px}
.faq-group + .faq-group{margin-top:clamp(40px,6vw,60px)}
.faq-group > .eyebrow{margin-bottom:18px}
.faq-group .faq-list{max-width:none}
.faq-cta{
  margin-top:clamp(44px,6vw,64px);border-top:1px solid var(--line-soft);padding-top:clamp(32px,4vw,44px);
  display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.faq-cta p{font-size:1.05rem;color:var(--text-2);max-width:440px}
.faq-cta b{color:var(--text);font-weight:600}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;
  padding:22px 4px;font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-family:var(--font-mono);color:var(--orange);font-size:1.2rem;flex:none;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 4px 24px;max-width:640px;font-size:.98rem}
.faq-item .faq-a p + p{margin-top:10px}

/* ---------- 19. Final CTA ---------- */
.cta-final{padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--line-soft);position:relative;overflow:hidden}
.cta-final::before{
  content:"";position:absolute;left:50%;top:-40%;width:900px;height:600px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,107,44,.13),transparent);pointer-events:none;
}
.cta-inner{text-align:center;max-width:720px;margin:0 auto;position:relative}
.cta-inner .eyebrow{justify-content:center}
.cta-inner .eyebrow::before{display:none}
.cta-inner h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-top:18px;letter-spacing:-.02em}
.cta-inner p{margin-top:18px;font-size:1.08rem}
.cta-inner .hero-ctas{justify-content:center}
.cta-alt{margin-top:26px;font-family:var(--font-mono);font-size:.76rem;color:var(--text-3);letter-spacing:.06em}
.cta-alt a{color:var(--text-2)}
.cta-alt a:hover{color:var(--text)}

/* ---------- 20. Footer ---------- */
.site-foot{border-top:1px solid var(--line-soft);padding:56px 0 34px;background:rgba(0,0,0,.25)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.foot-brand img{height:40px;width:auto}
.foot-brand p{margin-top:16px;font-size:.9rem;max-width:280px}
.foot-col h2{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);font-weight:400;margin-bottom:16px;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-col a{text-decoration:none;color:var(--text-2);font-size:.93rem}
.foot-col a:hover{color:var(--text)}
.foot-bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--text-3);
}
.foot-bottom a{color:var(--text-3);text-decoration:none}
.foot-bottom a:hover{color:var(--text-2)}

/* ---------- 21. Inner-page shared ---------- */
.page-hero{padding:calc(var(--head-h) + clamp(48px,8vh,84px)) 0 clamp(40px,6vw,64px)}
.page-hero h1{font-size:clamp(2.3rem,5vw,3.7rem);font-weight:800;max-width:800px;letter-spacing:-.025em}
.page-hero .eyebrow{margin-bottom:18px}
.page-hero p{margin-top:20px;font-size:1.1rem;max-width:600px}
.page-hero .hero-ctas{margin-top:28px}

/* services page blocks */
.svc{padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--line-soft)}
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.svc-grid.flip > .svc-art{order:-1}
.svc h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:14px}
.svc-grid > div > p{margin-top:14px;font-size:1rem}
.svc .tick-list{margin-top:20px;font-size:.95rem}
.svc-deliv{
  margin-top:24px;border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:16px 18px;background:rgba(255,255,255,.015);
}
.svc-deliv b{
  display:block;font-family:var(--font-mono);font-weight:400;font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:10px;
}
.svc-deliv span{font-family:var(--font-mono);font-size:.78rem;color:var(--text-2);line-height:2}
.svc-art{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),var(--bg-2);
  display:flex;flex-direction:column;gap:10px;min-height:240px;justify-content:center;
}

/* ---------- alternating "paper" service bands (homepage showcase) ----------
   A .svc section painted warm origami paper (from the v1 palette) with dark
   text. The demo screen inside stays dark, like a phone on a light page. */
.band-paper{
  background:#E7DDC8;          /* warm muted cream, gentler jump from the dark sections */
  --text:#241C13;
  --text-2:#5C5044;
  --text-3:#8C7E68;
  --line:#D3C4AB;
  --line-soft:#DBCFB8;
  color:var(--text-2);
  border-top-color:#D6CAB2;
}
.band-paper .eyebrow,.band-paper .eyebrow::before{color:var(--deep)}
.band-paper .eyebrow::before{background:var(--deep)}
.band-paper .btn-ghost{color:#1B1410;border-color:#D4C4AC;background:rgba(23,17,10,.02)}
.band-paper .btn-ghost:hover{border-color:#B89B78;background:rgba(23,17,10,.05)}
/* the demo screen re-asserts the dark theme so its bubbles stay readable */
.band-paper .svc-art{
  --text:#F1EFE9;--text-2:rgba(236,232,224,.72);--text-3:rgba(236,232,224,.46);
  --line:rgba(255,255,255,.09);--line-soft:rgba(255,255,255,.055);
  border:1px solid rgba(23,17,10,.12);
  box-shadow:0 30px 60px -34px rgba(60,38,20,.45);
}
.band-paper .svc-deliv{background:rgba(23,17,10,.03);border-color:#DCCDB8}
/* accents readable on cream: the light ember tone washes out, so use a deep burnt orange */
.band-paper .eyebrow{color:#A33A12}
.band-paper .eyebrow::before{background:#A33A12}
.band-paper .article-body a{color:#A33A12;text-decoration-color:rgba(163,58,18,.45)}
.band-paper .article-body a:hover{color:#872F0D}
.band-paper .callout{border-left-color:#A33A12}
.band-paper .article-back:hover{color:#A33A12}
/* the dark "log" terminal keeps the dark theme so its text stays readable on paper */
.band-paper .log{
  --text:#F1EFE9;--text-2:rgba(236,232,224,.72);--text-3:rgba(236,232,224,.46);
  --line:rgba(255,255,255,.09);--line-soft:rgba(255,255,255,.055);
  box-shadow:0 30px 60px -34px rgba(60,38,20,.45);
}
/* audience pills read as outlined chips on the cream band */
.band-paper .aud-chip{background:rgba(36,28,19,.035)}
/* any dark "card" component keeps the dark theme (readable) on a cream band */
.band-paper .b-card,
.band-paper .review,
.band-paper .scenario,
.band-paper .step,
.band-paper .plan,
.band-paper .founder-card,
.band-paper .engine-note,
.band-paper .rating-banner,
.band-paper .blog-card,
.band-paper .rep-table,
.band-paper .panel{
  --text:#F1EFE9;--text-2:rgba(236,232,224,.72);--text-3:rgba(236,232,224,.46);
  --line:rgba(255,255,255,.09);--line-soft:rgba(255,255,255,.055);
  border-color:rgba(23,17,10,.14);
  box-shadow:0 26px 54px -32px rgba(60,38,20,.4);
}
.band-paper .plan-feat{border-color:rgba(255,107,44,.5)}
/* ghost buttons INSIDE those dark cards must stay light — the .band-paper
   ghost override above is meant for buttons sitting directly on the cream */
.band-paper .b-card .btn-ghost,
.band-paper .review .btn-ghost,
.band-paper .scenario .btn-ghost,
.band-paper .step .btn-ghost,
.band-paper .plan .btn-ghost,
.band-paper .founder-card .btn-ghost,
.band-paper .engine-note .btn-ghost,
.band-paper .blog-card .btn-ghost,
.band-paper .panel .btn-ghost{
  color:var(--text);border-color:var(--line);background:rgba(255,255,255,.04);
}
.band-paper .b-card .btn-ghost:hover,
.band-paper .review .btn-ghost:hover,
.band-paper .scenario .btn-ghost:hover,
.band-paper .step .btn-ghost:hover,
.band-paper .plan .btn-ghost:hover,
.band-paper .founder-card .btn-ghost:hover,
.band-paper .engine-note .btn-ghost:hover,
.band-paper .blog-card .btn-ghost:hover,
.band-paper .panel .btn-ghost:hover{
  border-color:rgba(255,178,90,.45);background:rgba(255,255,255,.08);
}
.showcase-more{
  text-align:center;padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.04em;color:var(--text-3);
}
.showcase-more a{color:var(--text-2)}
.showcase-more a:hover{color:var(--text)}

/* results page scenarios */
.scenario{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008)),var(--bg-2);
}
.scenario-head{padding:20px 24px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}
.scenario-head h3{font-size:1.12rem}
.scenario-tag{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line);border-radius:999px;padding:5px 11px;
}
.scenario-body{padding:22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.scenario-col h4{
  font-family:var(--font-mono);font-weight:400;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:12px;
}
.scenario-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.88rem}
.scenario-col ul.mono-list{font-family:var(--font-mono);font-size:.78rem}
.scenario-col .leak-num{font-family:var(--font-mono);font-weight:700;font-size:1.7rem;color:var(--ember)}
.scenario-foot{padding:14px 24px;border-top:1px solid var(--line-soft);font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;color:var(--text-3)}
.scenarios{display:grid;gap:16px}

/* about page */
.about-block{padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--line-soft)}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
.principles{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.principle{border-bottom:1px solid var(--line-soft);padding:24px 0;display:grid;grid-template-columns:56px 1fr;gap:18px}
.principle .mono{color:var(--orange);font-size:.74rem;padding-top:5px}
.principle h3{font-size:1.15rem;margin-bottom:8px}
.principle p{font-size:.95rem}
.founder-card{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  background:linear-gradient(180deg,rgba(255,107,44,.06),rgba(255,255,255,.008) 50%),var(--bg-2);
}
.founder-card img{height:52px;width:auto;margin-bottom:20px}
.founder-card h3{font-size:1.3rem}
.founder-card .mono{font-size:.68rem;color:var(--text-3);letter-spacing:.16em;text-transform:uppercase;display:block;margin:6px 0 16px}
.founder-card p{font-size:.96rem}

/* contact page */
.contact-wrap{padding:clamp(40px,6vw,72px) 0 clamp(72px,10vw,110px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,48px);align-items:start}
.panel{
  border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3.4vw,36px);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),var(--bg-2);
}
.panel > h2{font-size:1.45rem;margin-bottom:8px}
.panel > .panel-sub{font-size:.95rem;margin-bottom:24px}
.contact-alt{display:grid;gap:12px;margin-top:20px}
.alt-line{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  border:1px solid var(--line-soft);border-radius:var(--r-md);padding:14px 18px;text-decoration:none;
  transition:border-color .15s;
}
.alt-line:hover{border-color:rgba(255,178,90,.4)}
.alt-line span{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.alt-line b{font-family:var(--font-mono);font-weight:400;font-size:.86rem;color:var(--text)}
.embed-frame{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-soft);background:#fff}
.embed-frame iframe{width:100%;min-height:900px;border:0;display:block;background:#fff}
.book-embed{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-soft);min-height:560px;background:#fff}
.book-embed iframe{width:100%;height:100%;min-height:640px;border:0;display:block}
.book-launch{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;
  background:var(--bg-2);text-align:center;padding:24px;
}
.book-launch p{font-size:.9rem;color:var(--text-3);max-width:300px}
.form-ok{
  border:1px solid rgba(70,178,106,.4);background:rgba(70,178,106,.07);
  border-radius:var(--r-md);padding:18px 20px;display:none;
}
.form-ok.show{display:block}
.form-ok b{color:var(--green);display:block;margin-bottom:6px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.form-ok p{font-size:.92rem}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* legal + 404 */
.legal{padding:clamp(40px,6vw,64px) 0 clamp(72px,9vw,100px);max-width:760px}
.legal h2{font-size:1.3rem;margin:36px 0 12px}
.legal p,.legal li{font-size:.97rem}
.legal ul{padding-left:20px;display:grid;gap:8px;margin:12px 0}
.err-hero{min-height:70vh;display:grid;place-items:center;text-align:center;padding:120px 0 60px}
.err-hero b{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.3em;color:var(--orange);text-transform:uppercase}
.err-hero h1{font-size:clamp(2.4rem,6vw,4rem);margin:18px 0}

/* ---------- blog ---------- */
.blog-filters{
  display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:30px 0 0;padding:0;
}
.blog-filters button{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line);background:rgba(255,255,255,.02);
  padding:9px 15px;border-radius:999px;cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.blog-filters button:hover{color:var(--text);border-color:rgba(255,178,90,.4)}
.blog-filters button[aria-pressed="true"]{
  color:#180A03;border-color:transparent;
  background:var(--grad,linear-gradient(135deg,#FFB25A,#FF6B2C,#EE3A1C));
}
.band-paper .blog-filters button{background:rgba(36,28,19,.04)}
.band-paper .blog-filters button[aria-pressed="true"]{color:#180A03}
.blog-card[hidden]{display:none}
.blog-empty{
  font-family:var(--font-mono);font-size:.82rem;color:var(--text-3);
  padding:30px 0;text-align:center;
}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-card{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008)),var(--bg-2);
  text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease;
}
.blog-card:hover{transform:translateY(-4px);border-color:rgba(255,178,90,.32)}
.blog-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg-3)}
.blog-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.blog-card:hover .blog-thumb img{transform:scale(1.05)}
.blog-card-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-cat{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.blog-card h2,.blog-card h3{font-size:1.16rem;line-height:1.28}
.blog-card p{font-size:.93rem;color:var(--text-2)}
.blog-meta{margin-top:auto;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;color:var(--text-3);display:flex;gap:14px;padding-top:8px}

/* article page */
.article{max-width:760px;margin:0 auto}
.article-back{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);text-decoration:none;display:inline-block;margin-bottom:24px}
.article-back:hover{color:var(--text)}
.article-hero{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);margin-bottom:clamp(26px,4vw,38px);aspect-ratio:16/9;background:var(--bg-3)}
.article-hero img{width:100%;height:100%;object-fit:cover;display:block}
.article-head{margin-bottom:clamp(22px,3vw,32px)}
.article-head .blog-cat{margin-bottom:14px;display:block}
.article-head h1{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.02em}
.article-meta{margin-top:18px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:var(--text-3);display:flex;gap:16px;flex-wrap:wrap}
.article-body{font-size:1.07rem;line-height:1.75;color:var(--text-2)}
.article-body > p{margin:0 0 20px}
.article-body h2{font-size:clamp(1.3rem,2.4vw,1.65rem);color:var(--text);margin:36px 0 14px;letter-spacing:-.01em}
.article-body a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.article-body strong{color:var(--text);font-weight:600}
.article-body ul{margin:0 0 22px;padding-left:22px;display:grid;gap:9px}
/* editorial pull-quote: one accent rule, no tinted box */
.callout{
  margin:38px 0;padding:2px 0 2px 26px;
  border-left:2px solid var(--orange);
}
.callout b{
  display:block;margin-bottom:11px;
  font-family:var(--font-mono);font-weight:400;font-size:.63rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);
}
.callout p{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:1.2rem;line-height:1.5;letter-spacing:-.012em;color:var(--text);
}
@media (max-width:640px){
  .callout{padding-left:20px;margin:30px 0}
  .callout p{font-size:1.08rem}
}
.article-cta{
  margin-top:clamp(40px,5vw,56px);border-top:1px solid var(--line-soft);padding-top:clamp(32px,4vw,44px);text-align:center;
}
.article-cta h3{font-size:1.4rem;margin-bottom:10px}
.article-cta p{color:var(--text-2);margin:0 auto 22px;max-width:440px}
@media (max-width:880px){
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr}
}

/* ---------- 21b. Toolkit grid ----------
   The fast path. The six .svc bands below it explain each capability properly,
   but a visitor who just landed needs the whole toolset in one screen before
   deciding to read anything. Deliberately not hexagon icons on white: this is
   the same dark card language as the rest of the page. */
.kit{padding:clamp(28px,3.5vw,48px) 0;border-top:1px solid var(--line-soft)}
.kit-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:clamp(26px,3.5vw,42px);
}
.kit-card{
  padding:26px 24px 24px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:rgba(255,255,255,.022);
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.kit-card:hover{
  border-color:rgba(255,178,90,.34);
  background:rgba(255,255,255,.045);
  transform:translateY(-3px);
}
.kit-ico{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  margin-bottom:15px;
  background:linear-gradient(135deg,rgba(255,178,90,.15),rgba(238,58,28,.11));
  border:1px solid rgba(255,178,90,.2);
}
.kit-ico svg{
  width:20px;height:20px;fill:none;stroke:#FFB25A;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.kit-card h3{font-family:var(--font-display);font-size:1.02rem;font-weight:700;margin-bottom:7px}
.kit-card p{font-size:.92rem;line-height:1.55;color:var(--text-2)}
.kit-foot{
  margin-top:clamp(22px,3vw,32px);display:flex;flex-wrap:wrap;
  align-items:center;gap:14px 22px;
}
.kit-foot p{font-size:.92rem;color:var(--text-3);margin:0;max-width:52ch}
@media (max-width:880px){ .kit-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .kit-grid{grid-template-columns:1fr} }

/* ---------- 21c. Integrations marquee ----------
   Reuses the @keyframes mq used by the audience marquee: the row is duplicated
   in the markup and translated -50%, which loops seamlessly. Edge mask stops
   logos appearing and vanishing at hard edges. Pauses on hover so a name can
   actually be read, and the reduced-motion block further down unwraps it into
   a static wrapped row. */
/* A third band tone: mouse grey, between the near-black and the cream, so the
   integrations read as their own thing. Opaque on purpose - it has to cover the
   fixed aurora stage or the gradient shows through and the grey goes uneven.
   Light enough that every brand mark can use its TRUE official colour instead
   of a lightened-for-dark substitute, which is the real win here. Text flips
   dark, same approach as .band-paper. */
.logos{
  padding:clamp(30px,3.6vw,46px) 0;
  background:#9B9894;
  border-top:1px solid rgba(0,0,0,.14);
  border-bottom:1px solid rgba(0,0,0,.14);
  --text:#1B1611;
  --text-2:#3A3128;
  --text-3:#4E4438;
}
.logos-head{text-align:center}
/* A real heading, not a mono eyebrow: white and sized like the other section
   titles so it reads as a statement rather than a label. */
.logos-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.45rem,2.7vw,2.1rem);line-height:1.15;
  letter-spacing:-.02em;text-transform:none;
  color:var(--text);margin:0;
}
.logos-head p{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);margin:0;
}
/* Spacing goes here, never as an inline `margin:` shorthand on .wrap - that
   resets the left/right `auto` that centres the container, which silently
   shifted this footnote 48px left of everything else. */
.logos-foot{margin-top:clamp(16px,2vw,22px)}
.logos-note{text-transform:none !important;letter-spacing:.02em !important;font-size:.68rem !important;opacity:.9}
.logo-track{
  overflow:hidden;margin-top:clamp(18px,2.5vw,26px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logo-row{
  display:flex;align-items:center;width:max-content;
  gap:clamp(14px,1.6vw,22px);   /* chips carry their own padding now */
  padding:6px 0;                /* room for the hover lift and shadow */
  animation:mq 40s linear infinite;
}
.logo-track:hover .logo-row{animation-play-state:paused}
/* White chips on the grey band. Brand colours are designed for white, and on a
   mid-grey most of them measure barely 1.2:1 against the background - Zapier
   orange and QuickBooks green all but disappear. The chip restores the contrast
   each mark was drawn for, and gives the strip a physical, card-like feel. */
.logo-item{
  flex:none;white-space:nowrap;display:flex;align-items:center;gap:10px;
  background:#fff;border-radius:999px;
  padding:10px clamp(16px,1.6vw,22px);
  box-shadow:0 1px 2px rgba(0,0,0,.16), 0 4px 14px -6px rgba(0,0,0,.22);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.94rem,1.4vw,1.1rem);letter-spacing:-.015em;
  transition:transform .2s ease,box-shadow .2s ease;
}
.logo-item svg{width:clamp(20px,2.1vw,25px);height:clamp(20px,2.1vw,25px);flex:none;display:block}
.logo-name{color:#1B1611}
.logo-track:hover .logo-item{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.18), 0 8px 20px -6px rgba(0,0,0,.28)}
@media (max-width:640px){
  .logo-row{gap:30px;animation-duration:30s}
}

/* ---------- 22. Reveal motion ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ---------- 23. Responsive ---------- */
@media (max-width:1120px){
  .nav .nav-phone,.nav .nav-signin{display:none}
}
@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-copy{margin-top:0}
  .hero-sub{max-width:600px}
  .console{max-width:640px}
  .console-hold{max-width:640px;margin-left:auto;margin-right:auto}
  .bento{grid-template-columns:1fr 1fr}
  .b-wide{grid-column:span 2}
  .leak-grid,.pillars-grid,.audit-shell,.svc-grid,.about-grid{grid-template-columns:1fr}
  .svc-grid.flip > .svc-art{order:0}
  .pillars-sticky{position:static;margin-bottom:8px}
  .audit-side{border-right:0;border-bottom:1px solid var(--line-soft)}
  .audit-main{min-height:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  .nav-links{display:none}
  .burger{display:block}
  .review-grid,.steps,.plans{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .scenario-body{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .stat + .stat{border-left:0;border-top:1px solid var(--line-soft)}
}
@media (max-width:640px){
  body{font-size:16px}
  .robot-wrap{width:min(320px,94%)}
  .console-hold{padding-top:210px}
  .console-feed{height:342px}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .b-wide{grid-column:auto}
  .b-tall{grid-row:auto}
  .review-grid,.steps,.plans{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .pillar{grid-template-columns:1fr;gap:8px}
  .engine-note{grid-template-columns:1fr;gap:8px}
  .result-top{flex-direction:column;align-items:flex-start}
  .nav .btn{padding:10px 16px;font-size:.88rem}
  .foot-grid{grid-template-columns:1fr}
  .log-line{grid-template-columns:64px 1fr auto;gap:8px}
}

/* ---------- 24. Mobile refinements ----------
   Roughly 80% of traffic is phones, so this block is load-bearing, not polish.

   The header was the serious one: at 360px it needed 429px of content
   (142px logo + 28px gap + 259px of nav-right), which pushed the burger to
   x=449 — completely off-canvas. `body{overflow-x:hidden}` hid the symptom, so
   the menu simply could not be opened on a phone. Everything below buys that
   width back and brings touch targets up to the 44px floor. */

@media (max-width:880px){
  .nav{gap:14px}
  .brand img{height:38px}
  .nav-right{gap:12px}
}
@media (max-width:640px){
  .nav{gap:8px}
  .brand img{height:34px}
  .nav-right{gap:8px}
  .nav .btn{padding:12px 15px;font-size:.85rem;min-height:44px}
  .btn-x{display:none}          /* trims the CTA to "Book" / "Appel" */
}

/* Touch targets. 44px is the accessibility floor and about a fingertip wide;
   footer links were 20px tall, which makes mis-taps almost guaranteed. */
@media (max-width:880px){
  .nav-lang{min-height:44px;padding:7px 11px}
  .brand{min-height:44px}
  .foot-col a{display:inline-block;padding:13px 0;line-height:1.2}
  .site-foot a[href^="tel"],.site-foot a[href^="mailto"]{display:inline-block;padding:10px 0}
  .audit-back{padding:14px 10px;min-height:44px;display:inline-flex;align-items:center}
  .m-nav-foot .nav-phone,.m-nav-foot .nav-signin,.m-nav-foot .nav-lang{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .faq-item summary{min-height:44px;display:flex;align-items:center}
  .blog-filters button{min-height:44px}
  /* standalone links that act as buttons */
  .showcase-more a,.article-back,.review-more a,.cta-alt a[href^="mailto"],.foot-bottom a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  /* Links sitting inside a sentence are deliberately left alone: WCAG 2.5.8
     exempts them, and padding them would tear open the line spacing. */
}

/* Type sized for a monitor that turns out to be too small in the hand.
   Nothing drops below 12px, and real body copy stays at 16px. */
@media (max-width:640px){
  .eyebrow{font-size:.78rem}
  .console-note{font-size:.78rem}
  .stat cite{font-size:.78rem}
  .stats-note{font-size:.9rem}
  .trustbar{font-size:.84rem}
  .audit-side-foot{font-size:.76rem;line-height:1.7}
  .plan-build{font-size:.78rem}
  .plans-note{font-size:.84rem}
  .rep-foot{font-size:.78rem}
  .result-note{font-size:.78rem}
}

/* iOS Safari zooms the whole page when you focus a field smaller than 16px.
   On the audit — the main conversion path — that reads as the page lurching,
   and people bail. 16px exactly, no smaller, regardless of the design scale. */
@media (max-width:880px){
  .field input,.field select,.field textarea{font-size:16px}
}

/* The marquee row is ~4400px wide by design. Clip it at the source instead of
   leaning on body{overflow-x:hidden} to catch it. */
.marquee{overflow:hidden}

/* ---------- 25. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .marquee-row{animation:none;flex-wrap:wrap;width:auto}
  .logo-row{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:18px}
  .logo-track{-webkit-mask-image:none;mask-image:none}
  .msg,.book-card{opacity:1;transform:none}
  .stage::after{animation:none}
}