/* ============================================================
   IRONBOLT AI — SITE THEME  (assets/theme.css)

   This is the site's visual theme. It loads AFTER styles.css on
   every page and overrides it.

   HOW THE TWO STYLESHEETS SPLIT UP
     assets/styles.css  →  structure: layout, grids, components,
                           spacing rules, responsive breakpoints.
     assets/theme.css   →  appearance: colors, fonts, panel
                           treatment, buttons, shadows, motion.

   So: changing WHERE something sits → styles.css
       changing HOW something looks  → theme.css (this file)

   If a rule here and a rule in styles.css disagree, this file
   wins, because it loads second.

   Removing the <link rel="stylesheet" href="assets/theme.css">
   tag from a page returns that page to the original industrial
   theme. A full copy of the original site is archived in
   ironbolt-site-CLASSIC-theme-backup.zip.
   ============================================================ */

:root{
  /* deep blue-black void instead of industrial slate */
  --ground:#06070B;
  --ground-2:#0A0C12;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.055);

  --text:#F4F6FA;
  --dim:#A6ADBD;
  --mute:#7A8496;   /* WCAG AA: 4.8-5.3:1 on every surface it sits on */

  /* the brand ember, plus champagne for the luxury register */
  --orange:#FF7A33;
  --orange-ink:#120701;
  --orange-soft:#FFC79A;
  --champagne:#EBCB96;
  --copper:#C98A4B;
  --cold:#8FE3FF;
  --good:#5AD6A8;
  --danger:#FF6B70;

  --display:'Sora','Segoe UI',Helvetica,Arial,sans-serif;
  --body:'Inter','Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --wrap:1200px;
  --r:12px;
}

/* ── ambient light: two slow gradients behind everything ── */
body{
  background:
    radial-gradient(1100px 700px at 12% -6%, rgba(255,122,51,.10), transparent 60%),
    radial-gradient(900px 620px at 92% 8%, rgba(143,227,255,.07), transparent 60%),
    var(--ground);
  background-attachment:fixed;
  font-weight:340;
  letter-spacing:.004em;
}
/* fine grain so the flat black reads as a surface, not a void */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)' opacity='.028'/></svg>");
}
main,.hdr,.foot{position:relative;z-index:1;}

/* ── typography: big, light, tightly tracked ── */
h1,h2{
  font-family:var(--display);
  font-weight:300;
  letter-spacing:-.035em;
  font-variation-settings:normal;
}
h1{font-size:clamp(2.6rem,5.4vw,4.5rem);line-height:1.02;}
h2{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.06;}
h3{font-family:var(--display);font-weight:500;letter-spacing:-.015em;}
.lede{color:var(--dim);font-weight:320;font-size:1.08rem;line-height:1.72;}

/* small caps micro-labels */
.eyebrow,.card-k,.plan-num,.way-k,.ticket-t,.thread-hd,.step-n,.stepno,
.persona-tag,.journey-tag,.sample-script-k,.voice-tag,.cmp-plan .sub{
  font-family:var(--mono)!important;
  letter-spacing:.24em!important;
  text-transform:uppercase;
  font-size:.64rem!important;
  color:var(--mute);
}
.eyebrow{color:var(--champagne);}
.eyebrow::before{background:linear-gradient(90deg,var(--champagne),transparent)!important;}

/* ── glass surfaces ── */
.card,.plan,.callout,.book-box,.linkcard,.trade,.feat,.persona,.step,
.voice,.sample-script,.req-form,.ck-opt,.journey-step,.agenda-row,.chip{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--r);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.card:hover,.linkcard:hover,.trade:hover{
  border-color:rgba(235,203,150,.34);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  transform:translateY(-3px);
}
.sec-alt{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent);}

/* ── header: floating glass bar ── */
.hdr{
  background:rgba(6,7,11,.62);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--line-soft);
}
.nav a{
  background:transparent;border:1px solid transparent;border-radius:999px;
  letter-spacing:.14em;font-size:.66rem;color:var(--dim);
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.nav a:hover{color:var(--text);border-color:var(--line);background:rgba(255,255,255,.04);transform:none;}
.nav a.here{
  color:var(--champagne);border-color:rgba(235,203,150,.38);
  background:linear-gradient(180deg,rgba(235,203,150,.12),rgba(235,203,150,.03));
}

/* ── buttons: pill, gradient, glow ── */
.btn{border-radius:999px;font-family:var(--display);font-weight:600;letter-spacing:.005em;
     font-variation-settings:normal;font-size:.95rem;padding:15px 30px;}
.btn-primary{
  background:linear-gradient(135deg,#FFB36B,var(--orange) 46%,#E9541A);
  color:#140802;border:none;
  box-shadow:0 8px 30px rgba(255,122,51,.30),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#FFC78B,#FF8B44 46%,#F4621F);
  box-shadow:0 12px 40px rgba(255,122,51,.44),inset 0 1px 0 rgba(255,255,255,.5);
  transform:translateY(-2px);
}
.btn-ghost{
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{border-color:rgba(235,203,150,.45);background:rgba(255,255,255,.075);transform:translateY(-2px);}

/* ── hero ── */
.hero{
  background:
    radial-gradient(760px 520px at 22% 28%, rgba(255,122,51,.13), transparent 62%),
    radial-gradient(620px 460px at 82% 18%, rgba(143,227,255,.09), transparent 62%);
  border-bottom:1px solid var(--line-soft);
}
.hero h1 em,.brandline em{
  background:linear-gradient(96deg,var(--champagne),var(--orange-soft),var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;
}
.hero-fine,.tbl-note,.price-fine,.form-fine{color:var(--mute);}

/* ── the phone mock ── */
.phone,.phone-screen{border-radius:26px;}
.phone{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
}
.bub{border-radius:14px;background:rgba(255,255,255,.055);border:1px solid var(--line-soft);}

/* ── section rhythm: more air ── */
.sec{padding:112px 0;}
.page-head{padding:96px 0 68px;}
.sec-head{margin-bottom:56px;}

/* hairline dividers fade out at the ends */
.calc-rule,.contact-ways,.plan-head{
  border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent) 1;
}

/* ── plan cards ── */
.plan{padding:36px;}
.plan.is-premium{
  border-color:rgba(235,203,150,.3);
  background:
    radial-gradient(520px 300px at 50% -10%, rgba(235,203,150,.10), transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:0 0 0 1px rgba(235,203,150,.08),0 30px 70px rgba(0,0,0,.45);
}
.plan-title{
  font-family:var(--display);font-weight:300;font-variation-settings:normal;
  letter-spacing:-.04em;transform:none;
  background:linear-gradient(180deg,#FFFFFF,#CFD6E2 55%,#8C97A8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.12));
}
.plan-title.is-prem{
  background:linear-gradient(180deg,#FFF6E4,var(--champagne) 45%,#C79A54);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(235,203,150,.55)) drop-shadow(0 0 40px rgba(235,203,150,.22));
}
.plan-quote{
  border-radius:999px;border-color:rgba(235,203,150,.4);
  background:linear-gradient(180deg,rgba(235,203,150,.14),rgba(235,203,150,.04));
  font-family:var(--display);font-weight:500;font-variation-settings:normal;
}
.plan-quote span{color:var(--champagne);}
.plan-quote:hover{border-color:var(--champagne);background:linear-gradient(180deg,rgba(235,203,150,.24),rgba(235,203,150,.09));}

/* ── comparison table ── */
.cmp{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);}
.cmp th{background:rgba(255,255,255,.05);}
.cmp tbody tr:nth-child(odd){background:rgba(255,255,255,.018);}
.cmp td,.cmp th{border-color:var(--line-soft);}
td.is-prem,th.is-prem{background:rgba(235,203,150,.055);}
.mark-y{color:var(--champagne);}

/* ── voices ── */
.voice-av{border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.5);}
.voice.is-playing{
  border-color:rgba(235,203,150,.5);
  box-shadow:0 0 0 1px rgba(235,203,150,.18),0 20px 50px rgba(0,0,0,.5);
}
.voice.is-playing .voice-wave i{background:var(--champagne);}
.voice-btn{border-radius:999px;background:rgba(255,255,255,.04);}
.voice-btn:hover:not(:disabled){border-color:rgba(235,203,150,.45);background:rgba(255,255,255,.08);}
.voice-btn .ic{color:var(--champagne);}

/* ── forms ── */
.field-text input,.field-text textarea{
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:10px;
  backdrop-filter:blur(8px);
}
.field-text input:focus,.field-text textarea:focus{
  border-color:var(--champagne);outline:2px solid rgba(235,203,150,.28);
}
.req-form{padding:34px;}
.req-star{color:var(--champagne);}

/* ── closing contact band ── */
.final,.final-contact{
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(255,122,51,.13), transparent 64%),
    radial-gradient(700px 400px at 20% 90%, rgba(143,227,255,.06), transparent 64%),
    var(--ground-2);
  border-top:1px solid var(--line-soft);
}
.way a,.way b{font-family:var(--display);font-weight:400;font-size:1.06rem;}
.way a:hover{color:var(--champagne);}

/* ── footer ── */
.foot{background:rgba(0,0,0,.42);border-top:1px solid var(--line-soft);}
.foot-col h4{color:var(--champagne);letter-spacing:.2em;}

/* ── legal documents ── */
.doc-toc{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r);}
.doc-sec h2{font-size:1.35rem;font-weight:500;letter-spacing:-.01em;}
.doc-sec{border-bottom:1px solid var(--line-soft);}

/* ── cookie banner / modal ── */
.ck-banner,.ck-modal{
  background:rgba(10,12,18,.9);backdrop-filter:blur(26px) saturate(160%);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}

/* ── motion: slower, softer reveals ── */
.js .rv{transform:translateY(22px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1);}
/* must come after the line above, which now matches .rv.in on specificity, so the revealed state still wins */
.rv.in{transform:none;}

@media (prefers-reduced-motion:reduce){
  .rv{transform:none;transition:none;}
  body::before{display:none;}
}
@media (max-width:700px){
  .sec{padding:74px 0;}
  .plan,.req-form{padding:24px;}
}

/* ══════════════════════════════════════════════════════════
   POLISH PASS
   ══════════════════════════════════════════════════════════ */

/* Quiet demo link at the bottom of each plan card: a slim centred
   capsule rather than a full-bleed slab, so it reads as a refined
   invitation instead of a second primary button. */
.plan-quote{
  align-self:center;width:auto;min-width:min(300px,100%);
  padding:13px 26px;font-size:.9rem;letter-spacing:.015em;
  box-shadow:0 10px 26px rgba(0,0,0,.34);
}
.plan-quote:hover{box-shadow:0 14px 34px rgba(235,203,150,.14);}

/* Voice portraits get a champagne ring with a soft halo. */
.voice-av{
  border:1px solid rgba(235,203,150,.28) !important;
  box-shadow:0 0 0 4px rgba(235,203,150,.055),0 14px 30px rgba(0,0,0,.5);
}
.voice.is-playing .voice-av{
  border-color:rgba(255,122,51,.7) !important;
  box-shadow:0 0 0 4px rgba(255,122,51,.13),0 0 28px rgba(255,122,51,.3);
}
.voice-name{font-weight:500;letter-spacing:-.01em;}
.voice-btn{border-radius:999px;}

/* Premium card: a hairline of champagne along the top edge. */
.plan.is-premium{position:relative;overflow:hidden;}
.plan.is-premium::after{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(235,203,150,.65),transparent);
}

/* Section rules read as light, not as borders. */
.sec + .sec{border-top:1px solid rgba(255,255,255,.04);}

/* Form fields: deeper wells, champagne focus. */
.field-text input,.field-text textarea,.field-text select{
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
}
.field-text input:focus,.field-text textarea:focus,.field-text select:focus{
  border-color:rgba(235,203,150,.55);
  box-shadow:0 0 0 3px rgba(235,203,150,.1);outline:none;
}

/* Comparison table: premium column glows faintly. */
.cmp th.is-prem{
  background:linear-gradient(180deg,rgba(235,203,150,.14),rgba(235,203,150,.04));
  color:var(--champagne);
}

/* Footer wordmark sits a touch brighter against the deeper ground. */
.foot{border-top:1px solid rgba(255,255,255,.055);background:rgba(0,0,0,.35);}

/* Long non-breaking phrases (e.g. "customized&nbsp;foundation.") are wider
   than a 390px viewport at the display size, so step the headline down on
   small screens rather than letting the page scroll sideways. */
@media (max-width:560px){
  h1{font-size:clamp(2.05rem,8.4vw,2.6rem);}
  h2{font-size:clamp(1.72rem,6.9vw,2.2rem);}
}

/* ══════════════════════════════════════════════════════════
   INTERACTIVE LAYER
   Styles for the call simulator and the motion polish.
   Paired with assets/interactive.js — remove both together.
   ══════════════════════════════════════════════════════════ */

/* ── scroll progress bar ───────────────────────────────── */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none;
}
.scroll-progress i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--champagne),var(--orange) 55%,#FF9B5E);
  box-shadow:0 0 14px rgba(255,122,51,.55);
}

/* ── magnetic buttons + tilting cards ──────────────────── */
.magnetic{transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,background-color .2s ease,border-color .2s ease;will-change:transform;}
.tilts{
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
  transform-style:preserve-3d;position:relative;
}
/* a soft light that follows the cursor across the card */
.tilts::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px 260px at var(--mx,50%) var(--my,50%),rgba(235,203,150,.10),transparent 62%);
  opacity:0;transition:opacity .3s ease;z-index:0;
}
.tilts:hover::before{opacity:1;}
.tilts > *{position:relative;z-index:1;}

/* ── staggered reveals ─────────────────────────────────── */
.stagger{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.stagger-in{opacity:1;transform:none;}

/* ══════════════════════════════════════════════════════════
   CALL SIMULATOR
   ══════════════════════════════════════════════════════════ */
.sim{
  border:1px solid var(--line);border-radius:18px;padding:26px;
  background:
    radial-gradient(760px 420px at 12% -10%, rgba(255,122,51,.09), transparent 66%),
    radial-gradient(620px 380px at 92% 112%, rgba(235,203,150,.07), transparent 66%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  position:relative;overflow:hidden;
}
.sim::after{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(235,203,150,.5),transparent);
}
.sim-stage{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;align-items:stretch;}

/* — the phone — */
.sim-phone{
  border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:10px;
  background:linear-gradient(180deg,#141821,#0A0C12);
  box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07);
}
.sim-screen{
  position:relative;border-radius:18px;background:#05060A;height:100%;min-height:430px;
  overflow:hidden;border:1px solid rgba(255,255,255,.06);
}
.sim-statusbar{
  display:flex;justify-content:space-between;padding:11px 15px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.08em;color:var(--mute);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.sim-scene{
  position:absolute;inset:34px 0 0 0;padding:20px 18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility .5s;
}
.sim-scene.is-on{opacity:1;visibility:visible;transform:none;}

.sim-avatar{
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:1.35rem;font-weight:500;color:var(--dim);
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);margin-bottom:6px;
}
.sim-calllabel{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);}
.sim-callname{font-family:var(--display);font-size:1.3rem;font-weight:400;color:var(--text);}
.sim-callnum{font-family:var(--mono);font-size:.78rem;color:var(--dim);}
.sim-ring{display:flex;gap:26px;margin-top:16px;}
.sim-ring i{width:42px;height:42px;border-radius:50%;display:block;}
.sim-ring .red{background:#FF5C63;}
.sim-ring .green{background:#4ED9A4;}
.sim.is-running .sim-scene-call.is-on .sim-ring .green{animation:sim-pulse 1s ease-in-out infinite;}
@keyframes sim-pulse{0%,100%{box-shadow:0 0 0 0 rgba(78,217,164,.45);}50%{box-shadow:0 0 0 12px rgba(78,217,164,0);}}
.sim-stamp{
  position:absolute;top:26%;left:50%;transform:translate(-50%,-50%) rotate(-11deg) scale(.7);
  border:2px solid var(--danger);color:var(--danger);border-radius:6px;
  font-family:var(--display);font-weight:600;letter-spacing:.14em;font-size:1rem;
  padding:5px 13px;opacity:0;transition:opacity .3s ease,transform .3s cubic-bezier(.3,1.5,.5,1);
}
.sim-stamp.is-on{opacity:1;transform:translate(-50%,-50%) rotate(-11deg) scale(1);}

.sim-aibadge{
  display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;
  border:1px solid rgba(255,122,51,.4);background:rgba(255,122,51,.1);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-soft);
}
.sim-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:sim-blink 1.4s ease-in-out infinite;}
@keyframes sim-blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.sim-wave{display:flex;align-items:center;gap:4px;height:62px;margin:16px 0 4px;}
.sim-wave i{
  width:4px;border-radius:2px;background:var(--orange);opacity:.85;height:14%;
  animation:sim-bar 1s ease-in-out infinite;
}
.sim-wave i:nth-child(2n){animation-duration:.78s;}
.sim-wave i:nth-child(3n){animation-duration:1.22s;background:var(--orange-soft);}
.sim-wave i:nth-child(4n){animation-duration:.9s;}
.sim-wave i:nth-child(5n){animation-duration:1.4s;}
@keyframes sim-bar{0%,100%{height:16%;}50%{height:92%;}}
.sim-timer{font-family:var(--mono);font-size:1.5rem;color:var(--text);letter-spacing:.04em;}
.sim-aifoot{font-size:.78rem;color:var(--mute);text-align:center;}

.sim-scene-text{justify-content:flex-start;align-items:stretch;gap:0;padding:16px 14px;}
.sim-threadhd{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);
}
.sim-bubs{display:flex;flex-direction:column;gap:9px;overflow:hidden;}
.sim-bubrow{display:flex;flex-direction:column;gap:4px;}
.sim-bub{
  border-radius:13px;padding:10px 13px;font-size:.79rem;line-height:1.45;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  opacity:0;transform:translateY(8px) scale(.98);
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1);
}
.sim-bub.is-in{opacity:1;transform:none;}
.sim-bub-alert{border-color:rgba(255,122,51,.45);background:rgba(255,122,51,.11);}
.sim-bk{
  display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--champagne);margin-bottom:4px;
}
.sim-butime{font-family:var(--mono);font-size:.56rem;color:var(--mute);align-self:flex-end;}

/* — transcript + captured fields — */
.sim-right{display:flex;flex-direction:column;gap:14px;min-width:0;}
.sim-panel{
  border:1px solid var(--line);border-radius:14px;
  background:rgba(0,0,0,.26);padding:18px;
}
.sim-transcript{flex:1;min-height:296px;max-height:296px;overflow-y:auto;scroll-behavior:smooth;}
.sim-transcript::-webkit-scrollbar{width:5px;}
.sim-transcript::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px;}
.sim-idle{color:var(--mute);font-size:.88rem;font-style:italic;}
.sim-line{margin-bottom:15px;}
.sim-line:last-child{margin-bottom:0;}
.sim-who{
  display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:5px;
}
.sim-ai .sim-who{color:var(--orange);}
.sim-caller .sim-who{color:var(--cold);}
.sim-said{font-size:.92rem;line-height:1.6;color:var(--text);}
.sim-caller .sim-said{color:var(--dim);}
.sim-line.is-typing .sim-said::after{
  content:"";display:inline-block;width:7px;height:1em;vertical-align:-2px;margin-left:2px;
  background:var(--orange);animation:sim-caret .7s steps(1) infinite;
}
@keyframes sim-caret{0%,100%{opacity:1;}50%{opacity:0;}}

.sim-caplabel{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--champagne);margin-bottom:12px;
}
.sim-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0;}
.sim-fields li{
  border:1px solid var(--line-soft);border-radius:10px;padding:9px 11px;
  background:rgba(255,255,255,.02);transition:border-color .35s ease,background-color .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.sim-fields li.is-set{
  border-color:rgba(235,203,150,.42);background:rgba(235,203,150,.07);transform:translateY(-2px);
}
.sim-fk{
  display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute);margin-bottom:4px;
}
.sim-fv{display:block;font-size:.83rem;line-height:1.35;color:var(--dim);}
.sim-fields li.is-set .sim-fv{color:var(--text);}

/* — control bar — */
.sim-bar{
  display:flex;align-items:center;gap:18px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line-soft);flex-wrap:wrap;position:relative;
}
.sim-btn{
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  border:1px solid rgba(255,122,51,.5);border-radius:999px;padding:11px 22px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,122,51,.2),rgba(255,122,51,.07));
  color:var(--text);font-family:var(--display);font-weight:500;font-size:.9rem;
}
.sim-btn:hover{border-color:var(--orange);background:linear-gradient(180deg,rgba(255,122,51,.32),rgba(255,122,51,.13));}
.sim-btn:focus-visible{outline:2px solid var(--orange-soft);outline-offset:3px;}
.sim-ic{color:var(--orange);font-size:.78rem;line-height:1;}
.sim-status{font-size:.86rem;color:var(--dim);flex:1;min-width:220px;}
.sim-progress{position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent;border-radius:2px;overflow:hidden;}
.sim-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--champagne));
  box-shadow:0 0 10px rgba(255,122,51,.5);transition:width .2s linear,opacity .6s ease .5s;}
.sim.is-done .sim-progress i{opacity:0;}

/* — responsive — */
@media (max-width:1000px){
  .sim-stage{grid-template-columns:1fr;}
  .sim-phone{max-width:330px;margin:0 auto;}
  .sim-transcript{max-height:none;min-height:230px;}
}
@media (max-width:620px){
  .sim{padding:18px;border-radius:14px;}
  .sim-fields{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sim-status{min-width:0;font-size:.82rem;}
}

/* — motion off: nothing moves, everything is simply shown — */
@media (prefers-reduced-motion:reduce){
  .scroll-progress{display:none;}
  .magnetic,.tilts{transition:none;}
  .tilts::before{display:none;}
  .stagger{opacity:1;transform:none;transition:none;}
  .sim-scene{transition:none;}
  .sim-wave i,.sim-dot,.sim-ring .green{animation:none;}
  .sim-bub{opacity:1;transform:none;transition:none;}
  .sim-line.is-typing .sim-said::after{display:none;}
}

/* ── FAQ answers slide open (paired with smoothDetails) ── */
details.smooth .det-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .3s cubic-bezier(.22,1,.36,1);
}
details.smooth .det-inner{overflow:hidden;min-height:0;}
/* the marker morphs from + to × instead of swapping characters */
details.smooth summary::after{
  content:"+" !important;
  transition:transform .3s cubic-bezier(.22,1,.36,1),color .2s ease;
  transform-origin:50% 50%;
}
details.smooth[open] summary::after{transform:rotate(135deg);color:var(--champagne);}
details.smooth summary{transition:color .2s ease;}
details.smooth summary:hover{color:var(--orange-soft);}
@media (prefers-reduced-motion:reduce){
  details.smooth .det-body,details.smooth summary::after{transition:none;}
}

/* ── simulator: the last captured field spans the row ─── */
.sim-fields li.wide{grid-column:1/-1;}

/* ── the example lead text on How It Works ─────────────── */
.msg-card .msg-hd{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.02em;color:var(--orange);
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.msg-list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 16px;margin:0 0 14px;}
.msg-list dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mute);padding-top:3px;white-space:nowrap;
}
.msg-list dd{margin:0;font-size:.93rem;line-height:1.45;color:var(--text);}
.msg-card .msg-sum{font-size:.9rem;line-height:1.55;color:var(--dim);margin:0;}
.msg-card .msg-sum b{color:var(--text);font-weight:600;}
@media (max-width:560px){
  .msg-list{grid-template-columns:1fr;gap:2px 0;}
  .msg-list dt{padding-top:8px;}
}

/* ── the lead text, drawn as one message ───────────────── */
.bub-msg,.sim-msg{padding:12px 14px;}
.msghd,.sim-msghd{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.01em;color:var(--orange);
  padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.09);
}
.msgrow,.sim-msgrow{font-size:.74rem;line-height:1.5;color:var(--text);margin:0;}
.msgrow b,.sim-msgrow b{color:var(--dim);font-weight:500;}
.msgsum,.sim-msgsum{
  font-size:.72rem;line-height:1.5;color:var(--dim);margin:8px 0 0;
  padding-top:8px;border-top:1px solid rgba(255,255,255,.07);
}
.msgsum b,.sim-msgsum b{color:var(--text);font-weight:600;}
.sim-scene-text{overflow-y:auto;}
.sim-scene-text::-webkit-scrollbar{width:4px;}
.sim-scene-text::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px;}

/* ══════════════════════════════════════════════════════════
   TOUCH TARGETS
   WCAG 2.5.8 asks for 24x24px minimum. These are the controls
   that were under it — the hit area grows, the visual size
   does not change.
   ══════════════════════════════════════════════════════════ */

/* the SMS consent checkbox — small on purpose, but it must
   still be tappable and it carries legal weight */
.consent input[type=checkbox]{
  width:19px;height:19px;flex:0 0 19px;position:relative;cursor:pointer;
  accent-color:var(--orange);
}
.consent input[type=checkbox]::after{
  content:"";position:absolute;top:50%;left:50%;
  width:26px;height:26px;transform:translate(-50%,-50%);
}
.consent{cursor:pointer;}

/* inline arrow links used as calls to action */
.textlink{display:inline-block;padding:4px 0;}

/* the numbered contents list on each legal document */
.doc-toc a,.doc-toc li > a{display:inline-block;padding:3px 0;}

/* footer legal row */
.foot-legal a{display:inline-block;padding:4px 0;}

/* the cookie preference rows */
.ck-opt label,.ck-opt .sw{min-height:24px;}

/* ══════════════════════════════════════════════════════════
   PHONE LAYOUT PASS
   Everything below only applies on small screens. The desktop
   layout is untouched.
   ══════════════════════════════════════════════════════════ */
@media (max-width:640px){

  /* ── hero ───────────────────────────────────────────────
     The two mono strap lines were laid out side by side, so
     on a phone the first one wrapped and the second ran flush
     into the right gutter. Stacked, each gets its own line. */
  .hero-fine{
    flex-direction:column;gap:6px;font-size:.74rem;line-height:1.5;
  }
  .hero-fine span{display:block;}

  /* Both hero buttons the same full width, so the stack reads
     as deliberate instead of ragged — and each is a big target. */
  .hero .btn-row{flex-direction:column;align-items:stretch;gap:10px;}
  .hero .btn-row .btn{width:100%;justify-content:center;text-align:center;}

  /* ── voice samples ──────────────────────────────────────
     Four full-width cards meant about 1,300px of scrolling to
     see four voices. Two across halves it and still reads. */
  .voices{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px;}
  .voice{padding:16px 10px;}
  .voice-av{width:64px;height:64px;}
  .voice-name{font-size:1.02rem;}
  /* the two-line reservation exists to keep desktop cards
     aligned; on a phone it just adds a hole */
  .voice-tag{min-height:0;font-size:.64rem;letter-spacing:.04em;}
  .voice-wave{height:26px;gap:2px;}
  /* the mono face plus letter-spacing made "Listen to Jerry" wrap
     inside a half-width card, so the buttons came out ragged */
  .voice-btn{
    font-size:.7rem;letter-spacing:.01em;padding:10px 8px;gap:6px;
    width:100%;justify-content:center;white-space:nowrap;
    margin-top:auto;          /* pin to the bottom so the row lines up */
  }
  .voice-time{font-size:.62rem;}
  .voice{gap:10px;}

  /* ── footer ─────────────────────────────────────────────
     Four stacked sections made the footer taller than a phone
     screen and a half. The three link columns sit two-up. */
  .foot-top{grid-template-columns:1fr 1fr;gap:24px 20px;}
  .foot-col{gap:9px;}
  .foot-col:first-child{grid-column:1 / -1;}
  /* three link columns do not divide into two, so the last one
     spans the full width and lays its links out in a row —
     no half-empty cell */
  .foot-col:last-child{grid-column:1 / -1;}
  .foot-col:last-child{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:8px 20px;}
  .foot-col:last-child h4{flex:0 0 100%;}

  /* ── fine print ─────────────────────────────────────────
     Keep "Terms of Use" and "Privacy Policy" whole rather than
     letting them break across two lines mid-name. */
  .form-fine a,.foot-legal a,.hero-fine a{white-space:nowrap;}
  .form-fine{line-height:1.65;}

  /* ── comparison table ───────────────────────────────────
     Give the plan headers room so "IronBolt Premium" is not
     squeezed into a two-line sliver. */
  .cmp th,.cmp td{padding:11px 8px;}
  .cmp th:first-child,.cmp td:first-child{padding-left:12px;}
  .cmp-plan,.cmp th{font-size:.82rem;line-height:1.25;}

  /* a little more air between stacked sections */
  .sec{padding:64px 0;}
  .btn-row{gap:10px;}
}

/* Only genuinely tiny screens drop to one card across — 360px
   and 390px phones keep the two-up grid. */
@media (max-width:344px){
  .voices{grid-template-columns:1fr !important;}
  .voice{padding:18px 14px;}
  .voice-av{width:76px;height:76px;}
  .voice-wave{height:30px;}
}

/* Very small phones: the footer's legal row needs to wrap rather
   than push the page sideways. */
@media (max-width:360px){
  .foot-bot,.foot-legal{flex-wrap:wrap;}
  .foot-legal{gap:6px 14px;}
  h1{font-size:clamp(1.85rem,8.6vw,2.6rem);}
}

/* ══════════════════════════════════════════════════════════
   ROOM FOR THE CHAT WIDGET
   The LeadConnector bubble parks itself in the bottom-right
   corner. The only thing of ours that lives down there is the
   cookie banner, which stretches to both edges on anything
   narrower than about 1240px — so on a phone the bubble would
   land right on top of it.

   Rather than fight the widget's own CSS (whose class names
   are its business and could change), we move our banner out
   of the corner and let the bubble have it.
   ══════════════════════════════════════════════════════════ */

/* Consent has to stay clickable whatever the widget does with
   its stacking order, and the settings dialog covers the whole
   screen, so both sit above it. */
.ck-banner{z-index:2147483000;}
.ck-overlay{z-index:2147483001;}

/* NOTE: the banner does not need to dodge the bubble. The chat only
   loads once someone consents, and the banner is gone by then — they
   are never on screen at the same time. So the banner keeps the whole
   width and sits where it normally would; only the z-index below
   matters, for the settings dialog. */

/* Above ~1240px the banner is centred at its max width and the
   corner is already clear, so nothing changes. */

/* ══════════════════════════════════════════════════════════
   COOKIE BANNER ON A PHONE
   It was 300px tall and sat straight over the hero's "Book Your
   Free Demo" button, the "See How It Works" button and the phone
   number — the three things the page exists to get tapped.
   Slimmed to a strip. The choices, the settings link and the
   Privacy Policy link all stay; only the explanatory paragraph
   is trimmed to its first lines.
   ══════════════════════════════════════════════════════════ */
@media (max-width:700px){
  .ck-banner{
    padding:12px 14px;gap:9px;bottom:12px;
    border-radius:12px;
  }
  .ck-banner p{
    font-size:.78rem;line-height:1.4;margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  .ck-actions{gap:7px;width:100%;}
  .ck-actions .btn{
    flex:1 1 auto;padding:9px 12px;font-size:.82rem;white-space:nowrap;
  }
  .ck-link{font-size:.72rem;padding:6px 2px;order:3;flex:1 0 100%;text-align:left;}
}

/* Landscape phones and anything short: never let the banner eat
   more than a third of the screen. */
@media (max-height:520px){
  .ck-banner{max-height:38vh;overflow-y:auto;}
}

/* ══════════════════════════════════════════════════════════
   LIVE DEMO  (#try-it on hear-it.html)
   The call button is the loudest thing on the page on purpose.
   Everything else here borrows the existing tokens, so it sits
   inside the theme rather than beside it.
   ══════════════════════════════════════════════════════════ */
.sec-live{
  position:relative;
  background:
    radial-gradient(820px 460px at 50% -12%, rgba(255,122,51,.11), transparent 68%),
    radial-gradient(640px 420px at 88% 108%, rgba(235,203,150,.06), transparent 66%);
}
.sec-live::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(235,203,150,.45),transparent);
}

/* ── the call button ─────────────────────────────────────── */
.live-call{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:34px;}
.live-btn{
  display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  padding:20px 46px;border-radius:999px;text-align:center;
  box-shadow:0 18px 50px rgba(255,122,51,.34),0 0 0 0 rgba(255,122,51,.5);
  animation:live-pulse 2.6s cubic-bezier(.22,1,.36,1) infinite;
}
.live-btn:hover{animation-play-state:paused;}
.live-btn-k{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:.72;line-height:1;
}
.live-btn-num{
  font-family:var(--display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.5rem,3.6vw,2.05rem);line-height:1.1;
}
@keyframes live-pulse{
  0%,100%{box-shadow:0 18px 50px rgba(255,122,51,.34),0 0 0 0 rgba(255,122,51,.42);}
  55%    {box-shadow:0 18px 50px rgba(255,122,51,.34),0 0 0 20px rgba(255,122,51,0);}
}
.live-copy{
  background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer;
  color:var(--dim);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  padding:8px 16px;transition:border-color .16s ease,color .16s ease;
}
.live-copy:hover{border-color:var(--champagne);color:var(--text);}
.live-copy.is-done{border-color:var(--good);color:var(--good);}
.live-fine{
  max-width:64ch;text-align:center;margin:4px auto 0;
  font-size:.74rem;line-height:1.6;color:var(--mute);
}

/* ── steps beside the phone ──────────────────────────────── */
.live-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:38px;
  align-items:start;margin-top:48px;
}
.live-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;}
.live-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;}
.live-n{
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:.84rem;color:var(--orange);
  border:1px solid rgba(255,122,51,.4);background:rgba(255,122,51,.09);
}
.live-steps h3{font-size:1.06rem;margin-bottom:5px;}
.live-steps p{color:var(--dim);font-size:.95rem;line-height:1.6;}

/* ── the phone mockup ────────────────────────────────────── */
.live-phone{
  border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:10px;
  background:linear-gradient(180deg,#141821,#0A0C12);
  box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07);
}
.live-screen{border-radius:18px;background:#05060A;border:1px solid rgba(255,255,255,.06);padding:0 0 14px;}
.live-bar{
  display:flex;justify-content:space-between;padding:11px 15px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.08em;color:var(--mute);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.live-thread{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--mute);
  padding:11px 15px 9px;
}
.live-bub{
  margin:0 12px;border-radius:13px;padding:12px 14px;
  background:rgba(255,122,51,.1);border:1px solid rgba(255,122,51,.4);
}

/* ── try-it chips ────────────────────────────────────────── */
.live-ideas{margin-top:40px;text-align:center;}
.live-ideas-k{
  display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--champagne);margin-bottom:14px;
}
.live-ideas ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.live-ideas li{
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  font-size:.86rem;color:var(--dim);background:rgba(255,255,255,.025);
}

.live-after{
  justify-content:center;align-items:center;gap:16px;margin-top:44px;
  padding-top:30px;border-top:1px solid var(--line-soft);flex-wrap:wrap;
}
.live-after > span{color:var(--dim);font-size:1rem;}

/* ── phones: headline, button, steps, phone, fine print ──── */
@media (max-width:860px){
  .live-grid{grid-template-columns:1fr;gap:30px;}
  .live-phone{max-width:330px;margin:0 auto;}
}
@media (max-width:640px){
  .live-btn{padding:17px 26px;width:100%;}
  .live-btn-num{font-size:1.55rem;}
  .live-copy{display:none;}          /* tapping the button dials; copying is a desktop need */
  .live-fine{font-size:.7rem;}
  .live-ideas li{font-size:.8rem;padding:8px 13px;}
  .live-after{flex-direction:column;gap:12px;}
  .live-after .btn{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .live-btn{animation:none;}
}

/* the eyebrow carries a rule before it, which only centres if the
   flow box centres too */
.sec-live .sec-head .eyebrow{justify-content:center;display:flex;align-items:center;}
.sec-live .sec-head h2{margin-left:auto;margin-right:auto;}
.sec-live .live-grid{margin-top:44px;}

/* ══════════════════════════════════════════════════════════
   BY-SIZE PERSONA BLOCKS
   These were designed as full-width rows split by hairlines, so
   they had vertical padding only. The theme then gave them the
   card treatment — background, border, radius — which left the
   label ("Just you") pressed against the card edge while the body
   text sat 34px in. Give them the same 26px inset every other
   card on the site uses, so the two columns start from a
   consistent edge.
   ══════════════════════════════════════════════════════════ */
.persona{
  padding:28px 26px;
  border-top:1px solid var(--line);   /* the hairline is now the card border */
}
.persona:last-child{border-bottom:1px solid var(--line);}
.persona + .persona{margin-top:14px;}

@media (max-width:620px){
  .persona{padding:22px 20px;}
}

/* ══════════════════════════════════════════════════════════
   "US VS THEM" TABLE  (.cmp-vs on What's Included)
   Same component as the plan comparison, but its cells carry
   sentences rather than ticks, so they need to read left-aligned
   with room to breathe.
   ══════════════════════════════════════════════════════════ */
/* a global th,td rule sets the mono face for the billing tables;
   these cells are sentences, so they need the body face back */
.cmp-vs tbody td{
  text-align:left;line-height:1.5;padding:15px 20px;
  font-family:var(--body);font-size:.93rem;font-variant-numeric:normal;
}
.cmp-vs tbody td:first-child{
  font-family:var(--display);font-weight:500;color:var(--text);
  width:22%;min-width:170px;
}
.cmp-vs tbody td .mark-n,.cmp-vs tbody td .mark-y{
  display:inline-block;width:1.1em;margin-right:2px;
}
.cmp-vs tbody td:nth-child(2){color:var(--mute);}      /* the generic column reads quieter */
.cmp-vs tbody td:last-child{color:var(--dim);}
.cmp-vs thead th .nm{font-size:.92rem;}
.cmp-vs thead th:nth-child(2) .nm{color:var(--mute);font-weight:400;}
.cmp-vs table{min-width:760px;}

@media (max-width:620px){
  .cmp-vs tbody td{padding:12px 14px;font-size:.88rem;}
  .cmp-vs tbody td:first-child{min-width:130px;}
}