/* ===========================================================================
   ServeHub — Rugged trade-built sales page
   Adapted from the Claude Design mobile prototype to a full-width responsive
   layout. All rules are scoped under `.sales` so the design system never leaks
   into the rest of the app (Tailwind, flash messages, support widget, etc).
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

.sales {
  --paper:#f3efe6;        /* warm concrete */
  --paper-2:#ece6d8;      /* recessed panel */
  --white:#ffffff;
  --ink:#17191d;          /* charcoal */
  --ink-2:#22262c;
  --ink-soft:#3a3f47;
  --steel:#6a7079;
  --steel-2:#8b9099;
  --line:#d9d3c4;         /* hairline on paper */
  --line-ink:#2e333b;     /* hairline on dark */
  --blue:#0ea5e9;
  --blue-deep:#0b6fa3;
  --blue-press:#0284c7;
  --blue-ink:#063f5c;
  --amber:#f5a31f;
  --green:#18794e;
  --red:#c14034;
  --shadow:3px 3px 0 var(--ink);
  --shadow-sm:2px 2px 0 var(--ink);
  --r:14px;
  --wrap:1120px;

  font-family:'Barlow',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* local reset — scoped, so it cannot touch layout chrome */
.sales *{box-sizing:border-box}
.sales h1,.sales h2,.sales h3,.sales h4,.sales p,.sales ul,.sales figure{margin:0}
.sales ul{list-style:none;padding:0}
.sales img{max-width:100%;display:block}

.sales .wrap{max-width:var(--wrap);margin:0 auto}

/* ---- type ---- */
.sales .mono{font-family:'JetBrains Mono',monospace}
.sales h1,.sales h2,.sales h3{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;line-height:.95;
  letter-spacing:-.01em;text-transform:uppercase;
}
.sales .eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep);
  display:inline-flex;align-items:center;gap:8px;
}
.sales .eyebrow::before{content:"";width:18px;height:2px;background:var(--amber);display:inline-block}
.sales .eyebrow.on-dark{color:var(--blue)}

/* ---- buttons ---- */
.sales .btn{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:18px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 24px;border:2px solid var(--ink);border-radius:11px;
  background:var(--white);color:var(--ink);cursor:pointer;text-decoration:none;
  transition:transform .05s ease, box-shadow .05s ease;box-shadow:var(--shadow);
}
.sales .btn.block{width:100%}
.sales .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.sales .btn-primary{background:var(--blue);color:#04222f;border-color:var(--ink)}
.sales .btn-amber{background:var(--amber);color:#3a2403}
.sales .btn-ink{background:var(--ink);color:var(--paper)}
.sales .btn-ghost{background:transparent;box-shadow:none}
.sales .btn-ghost:active{transform:none}
.sales .btn svg{width:19px;height:19px;flex:0 0 auto}
.sales .btn-sm{font-size:15px;padding:10px 16px;border-radius:9px;box-shadow:var(--shadow-sm)}
.sales .btn-sm:active{transform:translate(2px,2px)}

/* ---- nav ---- */
.sales .nav{
  position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:2px solid #000;
  padding:0 20px;       /* gutter lives on the bar, inner content matches section containers */
}
.sales .nav-in{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 0;width:100%;max-width:var(--wrap);margin:0 auto;gap:16px;
}
.sales .brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.sales .brand .mark{
  width:30px;height:30px;border-radius:8px;background:var(--blue);
  display:grid;place-items:center;border:2px solid #04222f;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);flex:0 0 auto;
}
.sales .brand .mark svg{width:17px;height:17px}
.sales .brand .name{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:23px;
  color:var(--paper);text-transform:uppercase;letter-spacing:.01em;
}
.sales .nav-links{display:none;align-items:center;gap:22px}
.sales .nav-links a{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:#c6cace;text-decoration:none;transition:color .15s;
}
.sales .nav-links a:hover{color:var(--blue)}
.sales .nav-actions{display:flex;align-items:center;gap:9px}
.sales .nav-signin{display:none}
.sales .hamburger{
  width:42px;height:42px;border:2px solid var(--line-ink);border-radius:9px;
  background:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;
}
.sales .hamburger span{display:block;width:18px;height:2px;background:var(--paper);margin:2.5px 0;border-radius:2px;transition:.2s}
.sales .hamburger.open span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.sales .hamburger.open span:nth-child(2){opacity:0}
.sales .hamburger.open span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

/* mobile menu sheet */
.sales .sheet{
  position:fixed;inset:0;z-index:55;background:rgba(8,10,13,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.sales .sheet.open{opacity:1;pointer-events:auto}
.sales .sheet-inner{
  position:absolute;top:0;left:0;right:0;background:var(--ink);
  border-bottom:3px solid var(--blue);padding:78px 22px 26px;
  transform:translateY(-12px);transition:transform .22s;
}
.sales .sheet.open .sheet-inner{transform:translateY(0)}
.sales .sheet a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;text-transform:uppercase;
  color:var(--paper);text-decoration:none;padding:13px 4px;border-bottom:1px solid var(--line-ink);
}
.sales .sheet a .mono{font-size:11px;color:var(--steel-2)}
.sales .sheet .menu-cta{margin-top:18px;display:grid;gap:10px}

/* ---- section base ---- */
.sales section{padding:60px 20px}
.sales .sec-paper{background:var(--paper)}
.sales .sec-white{background:var(--white)}
.sales .sec-ink{background:var(--ink);color:var(--paper)}
.sales .blueprint{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:22px 22px;
}

/* ---- hero ---- */
.sales .hero{
  position:relative;background:var(--ink);color:var(--paper);
  padding:48px 20px 56px;overflow:hidden;
}
.sales .hero .glow{
  position:absolute;top:-160px;right:-120px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.32),transparent 65%);pointer-events:none;
}
.sales .hero-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  display:grid;gap:36px}
.sales .h1{font-size:clamp(46px,11vw,72px);line-height:.92;margin-top:18px;color:var(--paper)}
.sales .h1 .step{color:var(--steel-2)}
/* the highlighted line gets a little top clearance: at line-height .92 an
   accented French cap (PRÊT) otherwise touches the line above it. */
.sales .h1 .paid{color:var(--blue);position:relative;display:inline-block;margin-top:6px}
.sales .h1 .paid::after{content:"";position:absolute;left:0;right:-2px;bottom:4px;height:10px;
  background:var(--amber);z-index:-1;transform:skewX(-8deg)}
.sales .lede{margin-top:18px;font-size:18px;line-height:1.45;color:#cdd0d4;max-width:46ch}
.sales .lede b{color:var(--white);font-weight:600}
.sales .hero-pitch{margin-top:16px;max-width:46ch;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:22px;line-height:1.12;text-transform:uppercase;letter-spacing:.01em;color:var(--white)}
.sales .hero-pitch b{color:var(--amber, #f5a31f)}
.sales .hero-cta{margin-top:26px;display:grid;gap:11px;max-width:420px}
.sales .or-row{display:flex;align-items:center;gap:12px;color:var(--steel-2);font-size:12px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;margin:3px 0}
.sales .or-row::before,.sales .or-row::after{content:"";flex:1;height:1px;background:var(--line-ink)}
.sales .trust-line{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;
  color:var(--steel-2);font-family:'JetBrains Mono',monospace}
.sales .trust-line span{display:inline-flex;align-items:center;gap:6px}
.sales .trust-line .dot{width:5px;height:5px;border-radius:50%;background:var(--green)}

/* stamp badge — floated, not absolute: the headline wraps *around* it, so a
   two-line h1 can never run underneath the badge at any viewport width. */
.sales .stamp{
  float:right;margin:0 0 10px 14px;width:92px;height:92px;border-radius:50%;
  border:2px dashed var(--amber);color:var(--amber);display:grid;place-items:center;text-align:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;line-height:.95;
  text-transform:uppercase;transform:rotate(9deg);background:rgba(245,163,31,.06);
}
.sales .stamp b{font-size:26px;display:block}

/* tools collapse strip — retired from the hero, kept for reuse.
   NOTE: `.chip` / `.chip.struck` below are live: the hero build card uses them. */
.sales .tools{position:relative;z-index:2}
.sales .tools-old{display:flex;flex-wrap:wrap;gap:7px}
.sales .chip{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;padding:7px 10px;
  border:1px solid var(--line-ink);border-radius:7px;color:var(--steel-2);background:var(--ink-2);
  text-transform:uppercase;
}
.sales .chip.struck{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;opacity:.7}
.sales .tools-arrow{display:flex;align-items:center;gap:9px;margin:14px 2px;color:var(--steel-2);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.sales .tools-arrow .ln{flex:1;height:1px;background:var(--line-ink)}
.sales .one-tool{
  display:flex;align-items:center;gap:12px;background:var(--blue);color:#04222f;
  border:2px solid #04222f;border-radius:12px;padding:14px 16px;box-shadow:3px 3px 0 #04222f;
}
.sales .one-tool .mk{width:34px;height:34px;border-radius:8px;background:#04222f;display:grid;place-items:center;flex:0 0 auto}
.sales .one-tool .mk svg{width:18px;height:18px}
.sales .one-tool .t{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;text-transform:uppercase;line-height:1}
.sales .one-tool .s{font-size:12.5px;font-weight:600;opacity:.8}

/* hero build card — "you tell us → ServeHub builds it → site ready".
   Pure CSS: no images, no JS, no fixed widths, so it collapses cleanly on phones. */
.sales .buildcard{
  position:relative;z-index:2;border:2px solid var(--line-ink);border-radius:14px;
  background:var(--ink-2);box-shadow:3px 3px 0 #0a0d11;overflow:hidden;
}
.sales .bc-bar{display:flex;align-items:center;gap:7px;padding:10px 13px;
  background:#101319;border-bottom:1px solid var(--line-ink)}
.sales .bc-dot{width:9px;height:9px;border-radius:50%;background:#3a3f47;flex:0 0 auto}
.sales .bc-dot:first-child{background:var(--amber)}
.sales .bc-url{margin-left:6px;min-width:0;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.04em;color:var(--steel-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sales .bc-steps{display:grid;list-style:none;margin:0;padding:0}
.sales .bc-step{display:flex;gap:12px;padding:14px;border-bottom:1px solid var(--line-ink)}
.sales .bc-step .n{
  flex:0 0 auto;width:26px;height:26px;border-radius:7px;background:#101319;
  border:1px solid var(--line-ink);display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--blue);
}
.sales .bc-step .t{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;
  line-height:1.05;text-transform:uppercase;letter-spacing:.01em;color:var(--paper)}
.sales .bc-step .d{font-size:13px;line-height:1.4;color:var(--steel-2);margin-top:4px}
.sales .bc-step .said{display:block;margin-top:6px;padding-left:9px;font-size:13px;line-height:1.45;
  font-style:italic;color:#cdd0d4;border-left:2px solid var(--blue)}
.sales .bc-step.live{background:rgba(14,165,233,.07)}
.sales .bc-step.live .n{background:var(--blue);border-color:var(--blue);color:#04222f}
.sales .bc-foot{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:12px 14px;
  border-bottom:1px solid var(--line-ink);font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--steel-2)}
.sales .bc-foot .clock{color:var(--amber);font-weight:700;padding:4px 8px;border-radius:6px;
  border:1px solid rgba(245,163,31,.45);background:rgba(245,163,31,.06)}
.sales .bc-photo{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:13px 14px}
.sales .bc-photo .k{margin-right:2px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.sales .chip.ok{border-color:var(--blue);color:#9adcfa;background:rgba(14,165,233,.12)}

/* hero stat band */
.sales .statband{
  display:grid;grid-template-columns:repeat(2,1fr);margin-top:36px;
  border-top:2px solid var(--line-ink);max-width:var(--wrap);
}
.sales .statband .st{padding:18px 20px;border-bottom:1px solid var(--line-ink)}
.sales .statband .st:nth-child(odd){border-right:1px solid var(--line-ink)}
.sales .statband .num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:36px;color:var(--blue);line-height:1}
.sales .statband .num.amber{color:var(--amber)}
.sales .statband .lbl{font-size:12px;color:var(--steel-2);font-family:'JetBrains Mono',monospace;
  text-transform:uppercase;letter-spacing:.06em;margin-top:3px}

/* trades marquee */
.sales .trades{background:var(--amber);color:#3a2403;padding:12px 0;overflow:hidden;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.sales .trades .track{display:flex;white-space:nowrap;animation:sales-scroll 30s linear infinite;width:max-content}
.sales .trades .track span{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:16px;letter-spacing:.02em;padding:0 14px;display:inline-flex;align-items:center;gap:14px}
.sales .trades .track span::after{content:"\25CF";font-size:7px;opacity:.5}
@keyframes sales-scroll{to{transform:translateX(-50%)}}

/* ---- section heading ---- */
.sales .sec-head{margin-bottom:30px;max-width:var(--wrap);margin-left:auto;margin-right:auto}
.sales .sec-head h2{font-size:clamp(34px,7vw,48px);margin-top:12px}
.sales .sec-ink .sec-head h2,.sales .sec-head.on-dark h2{color:var(--paper)}
.sales .sec-head p{margin-top:12px;font-size:16px;color:var(--steel);max-width:52ch}
.sales .sec-ink .sec-head p{color:#b6bbc2}

/* ---- workflow pipeline ---- */
.sales .pipe{position:relative;max-width:var(--wrap);margin:0 auto;padding-left:8px}
.sales .pipe .step{display:flex;gap:14px;position:relative;padding-bottom:24px}
.sales .pipe .step:last-child{padding-bottom:0}
.sales .pipe .rail{position:absolute;left:21px;top:6px;bottom:6px;width:3px;background:var(--line);z-index:0}
.sales .pipe .node{
  position:relative;z-index:1;width:44px;height:44px;flex:0 0 auto;border-radius:11px;
  background:var(--white);border:2px solid var(--ink);display:grid;place-items:center;box-shadow:var(--shadow-sm);
}
.sales .pipe .node svg{width:20px;height:20px}
.sales .pipe .step.paid .node{background:var(--blue);color:#04222f}
.sales .pipe .body .k{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--blue-deep);letter-spacing:.08em;text-transform:uppercase}
/* Automation markers. The whole workflow section turns on the reader being able
   to tell these apart at a glance: quiet blue = the software did it, solid ink =
   a human decision, amber = one click. `.you` and `.click` are pills so the human
   steps read as deliberate control rather than as gaps in the automation.
   NOTE: .k is text-transform:uppercase — Capybara must assert "AUTOMATIC". */
.sales .pipe .body .k.auto{color:var(--blue-deep)}
.sales .pipe .body .k.you,
.sales .pipe .body .k.click{display:inline-block;padding:2px 7px;border-radius:4px;letter-spacing:.06em}
.sales .pipe .body .k.you{background:var(--ink);color:var(--paper)}
.sales .pipe .body .k.click{background:var(--amber);color:var(--ink)}
.sales .pipe .body .t{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;text-transform:uppercase;line-height:1;margin-top:2px}
.sales .pipe .body .d{font-size:14px;color:var(--steel);margin-top:4px}

/* ---- feature blocks ---- */
.sales .feat{padding:64px 20px}
.sales .feat-in{max-width:var(--wrap);margin:0 auto;display:grid;gap:26px;align-items:center}
.sales .feat .idx{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:.12em;
  color:var(--blue-deep);text-transform:uppercase;display:flex;align-items:center;gap:10px}
.sales .feat .idx .big{font-size:64px;line-height:.8;-webkit-text-stroke:2px var(--ink);color:transparent;opacity:.16}
.sales .feat.sec-ink .idx .big{-webkit-text-stroke:2px var(--paper);opacity:.2}
.sales .feat.sec-ink .idx{color:var(--blue)}
.sales .feat h3{font-size:clamp(28px,5vw,36px);margin-top:8px}
.sales .feat .lead{font-size:16px;color:var(--steel);margin-top:12px;max-width:52ch}
.sales .feat.sec-ink .lead{color:#b6bbc2}
.sales .feat ul{margin-top:18px;display:grid;gap:10px}
.sales .feat li{display:flex;gap:10px;font-size:15px;font-weight:500;align-items:flex-start}
.sales .feat li svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px;color:var(--blue-deep)}
.sales .feat.sec-ink li svg{color:var(--blue)}

/* image placeholder (blueprint slot) */
.sales .shot{border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--ink);
  box-shadow:var(--shadow);position:relative}
.sales .shot .frame{
  aspect-ratio:4/3;background:#1b1f25;position:relative;display:grid;place-items:center;
  background-image:
    linear-gradient(rgba(14,165,233,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,165,233,.12) 1px,transparent 1px);
  background-size:20px 20px;
}
.sales .shot .cap{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--steel-2);text-align:center;
  letter-spacing:.04em;padding:0 20px;text-transform:uppercase;line-height:1.5}
.sales .shot .cap b{color:var(--blue);display:block;font-size:13px;margin-bottom:5px}
.sales .shot .tag{position:absolute;top:10px;left:10px;font-family:'JetBrains Mono',monospace;font-size:10px;
  background:var(--amber);color:#3a2403;padding:3px 7px;border-radius:5px;font-weight:700;letter-spacing:.05em;z-index:2}
/* real product screenshots dropped into the bordered slot */
.sales .shot img{display:block;width:100%;height:auto}
.sales .shot.portrait{max-width:330px;margin-left:auto;margin-right:auto;background:#0c1d27}

/* ── Evergreen CSS feature figures (replace live-app screenshots) ─────────── */
.sales .fig-wrap{aspect-ratio:4/3;display:grid;place-items:center;padding:26px;
  background-color:#1b1f25;
  background-image:linear-gradient(rgba(14,165,233,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.12) 1px,transparent 1px);
  background-size:20px 20px}
.sales .fig{width:100%;max-width:330px;background:var(--white);border:2px solid var(--ink);border-radius:12px;
  box-shadow:5px 5px 0 var(--ink);overflow:hidden;font-family:'Barlow',system-ui,sans-serif;color:var(--ink)}
.sales .fig-bar{display:flex;align-items:center;gap:7px;background:var(--ink);padding:9px 12px}
.sales .fig-bar .dot{width:9px;height:9px;border-radius:50%;background:#3a3f47}
.sales .fig-bar .dot.amber{background:var(--amber)}
.sales .fig-bar .ttl{margin-left:4px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.sales .fig-body{padding:14px 15px}
.sales .fig-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.sales .fig-line:last-child{border-bottom:none}
.sales .fig-line .lbl{font-size:13px;color:var(--ink-soft)}
.sales .fig-line .amt{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px}
.sales .fig-total{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:10px;border-top:2px solid var(--ink)}
.sales .fig-total .k{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;text-transform:uppercase}
.sales .fig-total .v{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:24px;color:var(--blue-deep)}
.sales .fig-stamp{display:inline-flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;font-size:14px;color:#13543a;border:2px solid #1f6a48;border-radius:8px;padding:6px 12px;transform:rotate(-4deg);background:#e6f1ea}
.sales .fig-sign{font-family:'Caveat','Segoe Script',cursive;font-size:30px;line-height:1;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:6px}
.sales .fig-chip{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  border:2px solid var(--ink);border-radius:7px;padding:5px 9px;background:var(--paper)}
.sales .fig-chip.on{background:var(--blue);color:#04222f}
.sales .fig-skel{height:9px;border-radius:5px;background:linear-gradient(90deg,#e4dfd1,#f3efe6,#e4dfd1);background-size:200% 100%;animation:figsk 1.6s linear infinite}
@keyframes figsk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sales .fig-input{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:9px;padding:8px 10px;background:var(--paper-2)}
.sales .fig-input .ph{font-size:13px;color:var(--steel)}
.sales .fig-btn{margin-top:12px;display:block;text-align:center;background:var(--blue);color:#04222f;border:2px solid var(--ink);
  border-radius:9px;padding:9px;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:14px;box-shadow:2px 2px 0 var(--ink)}
.sales .fig-wave{display:flex;align-items:center;gap:3px;height:34px}
.sales .fig-wave span{flex:1;background:var(--blue);border-radius:2px;animation:figwave 1s ease-in-out infinite}
.sales .fig-wave span:nth-child(odd){animation-delay:.15s}
.sales .fig-wave span:nth-child(3n){animation-delay:.3s}
@keyframes figwave{0%,100%{height:25%}50%{height:100%}}
.sales .fig-phone{width:170px;max-width:170px;border-radius:22px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  background:var(--white);overflow:hidden}
.sales .fig-phone .pscreen{padding:14px 12px;background:var(--paper)}
.sales .fig-notch{height:18px;background:var(--ink);display:grid;place-items:center}
.sales .fig-notch::after{content:"";width:42px;height:5px;border-radius:3px;background:#3a3f47}
.sales .fig-site{border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.sales .fig-site .nav{display:flex;gap:5px;align-items:center;background:var(--ink);padding:6px 9px}
.sales .fig-site .nav .u{flex:1;height:8px;border-radius:4px;background:#3a3f47}
.sales .fig-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px}
.sales .fig-grid3 div{height:30px;border:1.5px solid var(--line-2);border-radius:6px;background:var(--paper-2)}

/* mock UI inside some shots */
.sales .mock-phone{width:100%;height:100%;padding:24px;display:flex;flex-direction:column;gap:10px}
.sales .mock-row{height:11px;border-radius:4px;background:rgba(255,255,255,.1)}
.sales .mock-row.w70{width:70%}.sales .mock-row.w50{width:50%}.sales .mock-row.w85{width:85%}
.sales .mock-pill{align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--blue);
  border:1px solid rgba(14,165,233,.4);border-radius:20px;padding:3px 9px;text-transform:uppercase}

/* call demo */
.sales .call{border:2px solid var(--ink);border-radius:18px;background:var(--ink);box-shadow:var(--shadow);overflow:hidden}
.sales .call-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-ink)}
.sales .call-top .av{width:34px;height:34px;border-radius:9px;background:var(--blue);display:grid;place-items:center;color:#04222f;flex:0 0 auto}
.sales .call-top .av svg{width:18px;height:18px}
.sales .call-top .nm{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;color:var(--paper);text-transform:uppercase;line-height:1}
.sales .call-top .st{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--green)}
.sales .call-body{padding:16px;display:grid;gap:10px}
.sales .bub{max-width:80%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.35}
.sales .bub.them{background:var(--ink-2);color:#d6d9dd;border-bottom-left-radius:4px;justify-self:start}
.sales .bub.ai{background:var(--blue);color:#04222f;border-bottom-right-radius:4px;justify-self:end;font-weight:500}

/* tip demo */
.sales .tipcard{border:2px solid var(--ink);border-radius:18px;background:var(--white);box-shadow:var(--shadow);padding:20px;color:var(--ink)}
.sales .tipcard .inv{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:14px}
.sales .tipcard .inv .lbl{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--steel);text-transform:uppercase}
.sales .tipcard .inv .amt{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:30px}
.sales .tip-q{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:16px;margin:14px 0 9px}
.sales .tip-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.sales .tip{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;padding:11px 0;border:2px solid var(--ink);
  border-radius:9px;background:var(--white);cursor:pointer;text-align:center;transition:.12s}
.sales .tip.active{background:var(--blue);color:#04222f}
.sales .tip-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:2px solid var(--ink)}
.sales .tip-total .lbl{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:18px}
.sales .tip-total .amt{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:30px;color:var(--blue-deep)}
.sales .tip-pay{margin-top:14px}

/* ---- before / after ---- */
.sales .ba{display:grid;gap:16px;max-width:var(--wrap);margin:0 auto}
.sales .ba-card{border:2px solid;border-radius:var(--r);padding:20px;background:var(--ink-2)}
.sales .ba-card.before{border-color:#4a2a28}
.sales .ba-card.after{border-color:var(--blue);background:#0c1d27;box-shadow:3px 3px 0 var(--blue-ink)}
.sales .ba-card h4{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--paper)}
.sales .ba-card.before h4 .tg{background:#4a2a28;color:#ff9d92}
.sales .ba-card.after h4 .tg{background:var(--blue);color:#04222f}
.sales .ba-card h4 .tg{font-size:11px;font-family:'JetBrains Mono',monospace;padding:3px 7px;border-radius:5px;letter-spacing:.05em}
.sales .ba-card ul{display:grid;gap:10px}
.sales .ba-card li{display:flex;gap:9px;font-size:14.5px;color:#c6cace;align-items:flex-start}
.sales .ba-card li svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px}
.sales .ba-card.before li svg{color:var(--red)}
.sales .ba-card.after li svg{color:var(--blue)}

/* ---- price comparison: the stack, costed, next to one bill ----------------
   Every figure this styles is a competitor's published price, so the design job
   is legibility, not persuasion: the reader has to be able to add the column up
   himself and get the same number. Hence a real rule-lined ledger (.vs-rows),
   monospaced amounts that align on the right edge, and a footnote block
   (.vs-ladder / .vs-foot) that stays visible rather than collapsing behind a
   tooltip. Do not restyle the amounts into display type — they are evidence. */
.sales .vs{display:grid;gap:16px;max-width:var(--wrap);margin:0 auto}
.sales .vs-card{border:2px solid var(--ink);border-radius:var(--r);background:var(--white);
  padding:22px;box-shadow:var(--shadow)}
.sales .vs-card.us{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--blue-ink)}
.sales .vs-card h4{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:23px;
  text-transform:uppercase;display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1}
.sales .vs-card h4 .tg{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;padding:4px 8px;border-radius:6px;background:var(--paper-2);color:var(--steel)}
.sales .vs-card.us h4 .tg{background:var(--blue);color:#04222f}
.sales .vs-sub{font-size:13.5px;color:var(--steel);margin-top:7px}
.sales .vs-card.us .vs-sub{color:#b6bbc2}
.sales .vs-rows{margin-top:16px;border-top:1px solid var(--line)}
.sales .vs-card.us .vs-rows{border-top-color:var(--line-ink)}
.sales .vs-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.sales .vs-card.us .vs-row{border-bottom-color:var(--line-ink)}
.sales .vs-row .lbl{display:grid;gap:2px;min-width:0}
.sales .vs-row .lbl b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;
  text-transform:uppercase;line-height:1.1;letter-spacing:.01em}
.sales .vs-row .lbl span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--steel)}
.sales .vs-card.us .vs-row .lbl span{color:var(--steel-2)}
.sales .vs-row .amt{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:16px;white-space:nowrap}
/* the per-seat rows are the point of the whole section, so they are marked in
   amber rather than left to look like ordinary line items */
.sales .vs-row.seat{padding-left:13px;border-left:3px solid var(--amber)}
.sales .vs-row.seat .lbl b{font-weight:600;font-size:15px}
.sales .vs-card.us .vs-row .amt.free{color:var(--blue)}
.sales .vs-tot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-top:14px;padding-top:14px;border-top:2px solid var(--ink)}
.sales .vs-card.us .vs-tot{border-top-color:var(--blue)}
.sales .vs-tot .lbl{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;
  text-transform:uppercase;line-height:1.1;max-width:18ch}
.sales .vs-tot .amt{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:44px;
  line-height:.85;white-space:nowrap}
.sales .vs-card.us .vs-tot .amt{color:var(--blue)}
.sales .vs-tot .amt .per{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  color:var(--steel);margin-left:3px}
.sales .vs-card.us .vs-tot .amt .per{color:var(--steel-2)}
.sales .vs-yr{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--steel);
  margin-top:7px;text-align:right}
.sales .vs-card.us .vs-yr{color:var(--steel-2)}
.sales .vs-check{font-size:13px;line-height:1.45;color:var(--steel);margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--line)}
.sales .vs-card.us .vs-check{color:#b6bbc2;border-top-color:var(--line-ink)}

.sales .vs-seat{max-width:var(--wrap);margin:16px auto 0;display:flex;gap:13px;align-items:flex-start;
  border:2px solid var(--ink);border-radius:var(--r);background:var(--amber);padding:16px 18px;
  box-shadow:var(--shadow-sm)}
.sales .vs-seat .sm{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--ink);
  color:var(--amber);display:grid;place-items:center}
.sales .vs-seat .sm svg{width:19px;height:19px}
.sales .vs-seat b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;
  text-transform:uppercase;display:block;line-height:1;margin-bottom:5px;color:#3a2403}
.sales .vs-seat p{font-size:14.5px;line-height:1.45;color:#4a3208;font-weight:500}

.sales .vs-verdict{max-width:var(--wrap);margin:16px auto 0;border:2px solid var(--ink);
  border-radius:var(--r);background:var(--ink);color:var(--paper);padding:20px;display:grid;gap:12px;
  box-shadow:3px 3px 0 var(--blue-ink)}
.sales .vs-verdict .big{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:clamp(30px,6vw,42px);line-height:.95;text-transform:uppercase;color:var(--blue)}
.sales .vs-verdict p{font-size:14.5px;color:#c6cace;line-height:1.5;max-width:62ch}
.sales .vs-verdict p b{color:var(--paper);font-weight:600}

.sales .vs-ladder{max-width:var(--wrap);margin:16px auto 0;border:2px dashed var(--line);
  border-radius:var(--r);background:var(--paper-2);padding:16px 18px;display:grid;gap:9px}
.sales .vs-ladder .r{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);line-height:1.65}
.sales .vs-ladder .r b{color:var(--ink);letter-spacing:.05em;text-transform:uppercase}
.sales .vs-foot{max-width:var(--wrap);margin:14px auto 0;font-size:12.5px;line-height:1.55;
  color:var(--steel);display:grid;gap:8px}
/* the footnotes are the part a sceptic actually reads, so they get a readable
   measure rather than the full 1120px the ledger above them needs */
.sales .vs-foot p{max-width:96ch}
.sales .vs-foot .asof{font-family:'JetBrains Mono',monospace;color:var(--ink-soft);font-weight:500}

/* ---- pricing plans ---- */
.sales .plans{display:grid;gap:16px;max-width:var(--wrap);margin:0 auto}
.sales .plan{border:2px solid var(--ink);border-radius:var(--r);background:var(--white);padding:24px 22px;box-shadow:var(--shadow)}
.sales .plan.pro{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--blue-ink)}
.sales .plan-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;background:var(--amber);color:#3a2403;padding:4px 9px;border-radius:6px;font-weight:700}
.sales .plan-tag.pro{background:var(--blue);color:#04222f}
.sales .plan-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:27px;text-transform:uppercase;margin-top:14px;line-height:1}
.sales .plan-price{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:58px;line-height:.9;margin-top:4px;display:flex;align-items:flex-start;gap:1px}
.sales .plan-price .cur{font-size:28px;margin-top:8px}
.sales .plan-price .per{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;align-self:flex-end;margin-bottom:11px;margin-left:6px;color:var(--steel)}
.sales .plan.pro .plan-price .per{color:var(--steel-2)}
.sales .plan-note{font-size:14px;color:var(--steel);margin-top:8px}
.sales .plan.pro .plan-note{color:#b6bbc2}
.sales .plan ul{display:grid;gap:11px;margin:18px 0 22px;border-top:1px solid var(--line);padding-top:18px}
.sales .plan.pro ul{border-top-color:var(--line-ink)}
.sales .plan li{font-size:14.5px;font-weight:500;display:flex;gap:9px;align-items:flex-start}
.sales .plan li svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px}
.sales .money-note{display:flex;gap:13px;align-items:flex-start;max-width:var(--wrap);margin:22px auto 0;
  border:2px dashed var(--line);border-radius:var(--r);padding:18px;background:var(--paper-2);
  font-size:14px;line-height:1.45;color:var(--ink-soft)}
.sales .money-note b{color:var(--ink)}
.sales .money-note .mn-mark{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--green);color:#fff;
  display:grid;place-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px}

/* ---- testimonials ---- */
.sales .quotes{display:grid;gap:16px;max-width:var(--wrap);margin:0 auto}
.sales .quote{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm)}
.sales .quote .stars{color:var(--amber);font-size:14px;letter-spacing:2px}
.sales .quote p{font-size:15px;margin:10px 0 14px;font-weight:500;line-height:1.45}
.sales .quote .who{display:flex;align-items:center;gap:11px}
.sales .quote .mono-av{width:38px;height:38px;border-radius:9px;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;flex:0 0 auto}
.sales .quote .who .nm{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;line-height:1}
.sales .quote .who .rl{font-size:12px;color:var(--steel);font-family:'JetBrains Mono',monospace}

/* ---- app section ---- */
.sales .appsec{background:var(--blue);color:#04222f}
.sales .appsec-in{max-width:var(--wrap);margin:0 auto;display:grid;gap:28px;align-items:center}
.sales .appsec h2{font-size:clamp(34px,7vw,46px);color:#04222f}
.sales .appsec .lead{font-size:16px;margin-top:12px;color:#063f5c;font-weight:500;max-width:42ch}
.sales .appstore{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:var(--paper);
  border-radius:12px;padding:11px 18px;text-decoration:none;margin-top:22px;border:2px solid #04222f;box-shadow:3px 3px 0 #04222f}
.sales .appstore:active{transform:translate(3px,3px);box-shadow:0 0 0}
.sales .appstore svg{width:26px;height:26px}
.sales .appstore .s{font-size:10px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.05em;opacity:.8}
.sales .appstore .b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;text-transform:uppercase;line-height:1}
.sales .app-note{font-family:'JetBrains Mono',monospace;font-size:12px;color:#063f5c;margin-top:14px}
.sales .app-shot{border:2px solid #04222f;border-radius:18px;overflow:hidden;background:#04222f;box-shadow:4px 4px 0 #04222f}
.sales .app-shot img{display:block;width:100%;height:auto}
.sales .app-shot .frame{aspect-ratio:1/1;display:grid;place-items:center;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:20px 20px}
.sales .app-shot .cap{font-family:'JetBrains Mono',monospace;font-size:11px;color:#7fd0f3;text-align:center;text-transform:uppercase;padding:0 20px;line-height:1.5}
.sales .app-shot .cap b{display:block;color:var(--white);font-size:13px;margin-bottom:5px}

/* ---- FAQ ---- */
.sales .faq{max-width:var(--wrap);margin:0 auto;border-top:2px solid var(--ink)}
.sales .faq details{border-bottom:2px solid var(--ink)}
.sales .faq summary{list-style:none;cursor:pointer;padding:18px 2px;display:flex;justify-content:space-between;
  align-items:center;gap:14px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;text-transform:uppercase}
.sales .faq summary::-webkit-details-marker{display:none}
.sales .faq summary .pm{width:26px;height:26px;flex:0 0 auto;border:2px solid var(--ink);border-radius:7px;display:grid;place-items:center;position:relative;transition:.2s}
.sales .faq summary .pm::before,.sales .faq summary .pm::after{content:"";position:absolute;background:var(--ink)}
.sales .faq summary .pm::before{width:12px;height:2px}
.sales .faq summary .pm::after{width:2px;height:12px;transition:.2s}
.sales .faq details[open] summary .pm{background:var(--blue);border-color:var(--ink)}
.sales .faq details[open] summary .pm::after{transform:rotate(90deg);opacity:0}
.sales .faq .ans{padding:0 2px 18px;font-size:15px;color:var(--steel);line-height:1.5;max-width:80ch}
.sales .faq .ans a{color:var(--blue-deep);font-weight:600}

/* ---- Roundup / listicle ---- */
.sales .rnd{max-width:var(--wrap);margin:0 auto;display:grid;gap:20px}
.sales .rnd-item{border:2px solid var(--ink);background:#fff;padding:24px;display:grid;gap:14px}
.sales .rnd-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sales .rnd-rank{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:30px;line-height:1;color:var(--blue-deep)}
.sales .rnd-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:.01em}
.sales .rnd-badge{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:var(--blue);color:#04222f;padding:5px 10px;border:2px solid var(--ink);border-radius:6px}
.sales .rnd-price{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--steel)}
.sales .rnd-summary{font-size:15.5px;color:var(--ink);line-height:1.55;max-width:80ch}
.sales .rnd-cols{display:grid;gap:16px}
.sales .rnd-cols h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.05em;margin-bottom:8px}
.sales .rnd-cols ul{list-style:none;display:grid;gap:6px;font-size:14.5px;color:var(--steel);line-height:1.5}
.sales .rnd-pro li::before{content:"\2713\00a0";color:#1f6a48;font-weight:800}
.sales .rnd-con li::before{content:"\2013\00a0";color:#9a3b2f;font-weight:800}
.sales .rnd-link{font-family:'JetBrains Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-deep);font-weight:700}
@media(min-width:720px){.sales .rnd-cols{grid-template-columns:1fr 1fr}.sales .rnd-item{padding:30px}}

/* ---- final CTA ---- */
.sales .final{background:var(--blue);color:#04222f;text-align:center;position:relative;overflow:hidden}
.sales .final-in{position:relative;z-index:2;max-width:640px;margin:0 auto}
.sales .final h2{font-size:clamp(40px,8vw,56px);color:#04222f}
.sales .final p{font-size:16px;color:#063f5c;font-weight:500;margin:14px auto 0;max-width:42ch}
.sales .final .cta{margin-top:26px;display:grid;gap:11px;max-width:420px;margin-left:auto;margin-right:auto}
.sales .final .micro{font-family:'JetBrains Mono',monospace;font-size:12px;color:#063f5c;margin-top:16px}
.sales .final .bigstamp{position:absolute;bottom:-40px;right:-20px;font-family:'Barlow Condensed',sans-serif;
  font-weight:800;font-size:180px;color:rgba(4,34,47,.07);text-transform:uppercase;line-height:.8;pointer-events:none;z-index:1}

/* ---- footer ---- */
.sales .foot{background:var(--ink);color:var(--steel-2);padding:48px 20px 36px}
.sales .foot-in{max-width:var(--wrap);margin:0 auto}
.sales .foot .brand .name{color:var(--paper)}
.sales .foot .blurb{font-size:14px;margin-top:14px;line-height:1.5;max-width:40ch}
.sales .foot .cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 16px;margin-top:30px}
.sales .foot h5{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:12px}
.sales .foot ul{display:grid;gap:8px}
.sales .foot a{color:#c6cace;text-decoration:none;font-size:14px;font-weight:500}
.sales .foot a:hover{color:var(--blue)}
.sales .foot .tradepills{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.sales .foot .tradepills span{font-family:'JetBrains Mono',monospace;font-size:10.5px;border:1px solid var(--line-ink);
  border-radius:6px;padding:5px 8px;color:var(--steel-2);text-transform:uppercase}
.sales .foot .legal{margin-top:30px;padding-top:18px;border-top:1px solid var(--line-ink);font-size:12px;
  font-family:'JetBrains Mono',monospace;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;align-items:center}
.sales .foot .legal .locale-switch{display:flex;gap:8px}

/* ---- sticky bottom CTA ---- */
.sales .dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);border-top:2px solid var(--blue);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;
  transform:translateY(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.sales .dock-in{display:flex;align-items:center;gap:12px;max-width:var(--wrap);margin:0 auto;width:100%}
.sales .dock.show{transform:translateY(0)}
.sales .dock .d-txt{flex:1;min-width:0}
.sales .dock .d-txt .t{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;color:var(--paper);text-transform:uppercase;line-height:1}
.sales .dock .d-txt .s{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--green);margin-top:2px}
.sales .dock .btn{white-space:nowrap}

/* reveal on scroll — only arms when JS adds .js-anim, so content is visible if JS fails */
.sales.js-anim .rev{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.sales.js-anim .rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .sales.js-anim .rev{opacity:1;transform:none;transition:none}
  .sales .trades .track{animation:none}
}

/* =========================================================================
   RESPONSIVE — tablet / desktop
   ========================================================================= */
@media(min-width:760px){
  .sales section{padding:80px 32px}
  /* keep nav / feature blocks / footer gutters in lockstep with section gutters
     so all content edges line up with the body */
  .sales .nav{padding-left:32px;padding-right:32px}
  .sales .feat{padding-left:32px;padding-right:32px}
  .sales .foot{padding-left:32px;padding-right:32px}
  .sales .hero{padding:64px 32px 72px}
  .sales .hero-in{grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .sales .hero-copy{position:relative}
  .sales .statband{grid-template-columns:repeat(4,1fr)}
  .sales .statband .st{border-bottom:none}
  .sales .statband .st:nth-child(odd){border-right:none}
  .sales .statband .st:not(:last-child){border-right:1px solid var(--line-ink)}

  .sales .pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding-left:0}
  .sales .pipe .rail{left:24px;right:24px;top:21px;bottom:auto;width:auto;height:3px}
  .sales .pipe .step{flex-direction:column;gap:14px;padding-bottom:0}

  .sales .feat-in{grid-template-columns:1fr 1fr;gap:48px}
  .sales .feat .feat-visual{order:2}
  .sales .feat .feat-copy{order:1}
  .sales .feat.flip .feat-visual{order:1}
  .sales .feat.flip .feat-copy{order:2}

  .sales .ba{grid-template-columns:1fr 1fr}
  .sales .vs{grid-template-columns:1fr 1fr;align-items:start}
  .sales .vs-verdict{grid-template-columns:auto 1fr;align-items:center;gap:26px}
  .sales .plans{grid-template-columns:repeat(3,1fr);align-items:start}
  .sales .quotes{grid-template-columns:repeat(3,1fr)}
  .sales .appsec-in{grid-template-columns:1fr 1fr;gap:48px}
  .sales .appsec .app-shot{max-width:460px}

  .sales .foot-in{display:grid;grid-template-columns:1.4fr 2.6fr;gap:40px;align-items:start}
  .sales .foot .cols{margin-top:0;grid-template-columns:repeat(4,1fr)}
  .sales .foot .footer-brand-col{margin-bottom:0}
}

@media(min-width:960px){
  .sales .nav-links{display:flex}
  .sales .nav-signin{display:inline-flex}
  .sales .hamburger{display:none}
  .sales .sheet{display:none}
  .sales .dock{display:none}        /* nav CTA always visible on desktop */
  .sales .h1{font-size:clamp(60px,5vw,76px)}
  .sales .hero .glow{width:620px;height:620px;top:-200px}
}

/* ── AUTHOR + FRESHNESS BYLINE ──────────────────────────────────────────────
   Rendered by marketing/_freshness. Sits under an h1 on the dark content-page
   heroes (documentation, glossary, implementation checklist), so it defaults to
   the light-on-dark treatment; .mk-byline-on-light flips it for a paper hero. */
.sales .mk-byline{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:#aab1b8;line-height:1.5}
.sales .mk-byline time{color:#e6e9ec;font-weight:700}
.sales .mk-byline-author{color:#cdd0d4}
.sales .mk-byline-sep{color:#6b7278}
.sales .mk-byline-on-light{color:#5a6470}
.sales .mk-byline-on-light time{color:#0d1b24}
.sales .mk-byline-on-light .mk-byline-author{color:#3a434d}

/* ── CONTENT TABLES (.mk-table) ─────────────────────────────────────────────
   A REAL <table> — not a grid of divs like .vs-trow.

   Why that distinction is load-bearing: the /documentation, /glossary and
   /documentation/implementation-checklist pages had zero tables between them,
   and answer engines extract a <thead>/<tbody> far more reliably than a
   presentational grid, because the header cell is what labels the value. So
   anything that is genuinely a matrix (plan x entitlement, capability x answer,
   setting x where) is marked up as a table here, and .vs-trow is left alone for
   the head-to-head pages it was built for.

   ALWAYS wrap the table in .mk-tablewrap. It owns the horizontal scroll, which
   is what keeps a 4-column table from making the whole page scroll sideways on
   a phone. */
.sales .mk-tablewrap{margin-top:18px;overflow-x:auto;border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow-sm);background:var(--white);-webkit-overflow-scrolling:touch}
.sales .mk-table{width:100%;min-width:520px;border-collapse:collapse;font-size:14.5px;line-height:1.45}
.sales .mk-table caption{caption-side:top;text-align:left;padding:13px 15px 0;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;text-transform:uppercase;
  letter-spacing:.01em;color:var(--ink)}
.sales .mk-table thead th{background:var(--ink);color:var(--paper);text-align:left;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:12px 14px;vertical-align:bottom;white-space:nowrap}
.sales .mk-table thead th:first-child{border-top-left-radius:0}
.sales .mk-table tbody th{text-align:left;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:16px;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);
  padding:12px 14px;vertical-align:top}
.sales .mk-table td{padding:12px 14px;vertical-align:top;color:var(--ink-soft)}
.sales .mk-table tbody tr + tr th,.sales .mk-table tbody tr + tr td{border-top:2px solid var(--line)}
.sales .mk-table td + td,.sales .mk-table th + td,.sales .mk-table th + th{border-left:2px solid var(--line)}
.sales .mk-table tbody tr:nth-child(even) th,.sales .mk-table tbody tr:nth-child(even) td{background:#faf8f3}
.sales .mk-table .yes{color:#0b5e34;font-weight:700}
.sales .mk-table .no{color:var(--steel);font-weight:600}
.sales .mk-table .mono{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500}
.sales .mk-tnote{margin-top:9px;font-size:13px;line-height:1.5;color:var(--steel)}

/* ── QUESTION HEADING + DIRECT ANSWER (.mk-qa) ──────────────────────────────
   The extractable shape: an <h2>/<h3> phrased as the question a contractor
   actually types, then the answer IMMEDIATELY after it — no preamble, no "in
   this section we will", nothing between the heading and the sentence that
   answers it. .mk-a is that first paragraph; it is visually weighted so a human
   skimming gets the same payoff a model does, and any context follows in a
   plain <p> underneath. Keep .mk-a to roughly 40-60 words: long enough to be a
   real answer, short enough to be quoted whole. */
.sales .mk-qa{margin-top:26px}
.sales .mk-qa > h2,.sales .mk-qa > h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.03;color:var(--ink);margin:0}
.sales .mk-qa > h2{font-size:clamp(24px,4.6vw,31px)}
.sales .mk-qa > h3{font-size:clamp(20px,3.6vw,24px)}
.sales .mk-a{margin:11px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink);font-weight:500;
  border-left:3px solid var(--amber);padding-left:14px;max-width:64ch}
.sales .mk-qa > p + p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:64ch}
.sales .mk-qa ul{margin-top:12px;display:grid;gap:8px;max-width:64ch}
.sales .mk-qa li{font-size:15px;line-height:1.5;color:var(--ink-soft);padding-left:16px;position:relative}
.sales .mk-qa li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  background:var(--blue);border:2px solid var(--ink);border-radius:2px}

/* ── RELATED READING (.mk-related) ──────────────────────────────────────────
   Internal links, with the anchor text saying what is on the other end. A link
   whose text is "click here" tells a reader nothing and tells a model less. */
.sales .mk-related{margin-top:30px;border:2px solid var(--ink);border-radius:var(--r);
  background:var(--paper-2);box-shadow:var(--shadow-sm);padding:20px 20px 18px}
.sales .mk-related > h2,.sales .mk-related > h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:19px;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin:0}
.sales .mk-related ul{margin-top:13px;display:grid;gap:12px}
.sales .mk-related li{font-size:14.5px;line-height:1.5;color:var(--steel)}
.sales .mk-related a{font-weight:700;color:var(--blue-deep);text-decoration:none;
  border-bottom:2px solid rgba(11,111,163,.28)}
.sales .mk-related a:hover{color:var(--blue-press);border-bottom-color:var(--blue-press)}
.sales .mk-related li span{display:block;margin-top:3px;color:var(--steel)}
@media(max-width:560px){
  .sales .mk-table{font-size:13.5px}
  .sales .mk-table thead th,.sales .mk-table tbody th,.sales .mk-table td{padding:10px 11px}
}

/* ── HERO AI BUILDER ────────────────────────────────────────────────────────────
   The homepage asks for the two sentences the product is built on, before the
   signup wall rather than after it (SiteBriefsController). Ported from the Claude
   Design comp "Homepage Hero - AI Builder"; colours and type come from the tokens
   already defined above rather than the comp's own :root, so this rung of the page
   cannot drift from the rest of the design system. */
.sales .aib{margin-top:26px;max-width:620px}
.sales .aib-card{background:var(--panel, #14171c);border:2px solid #343a43;border-radius:16px;
  /* Tells the UA to paint form-control internals (caret, selection, scrollbar,
     autofill) for a dark surface. Without it the textarea keeps a light-mode
     caret and an autofilled value repaints itself white. */
  color-scheme:dark;
  padding:18px 18px 14px;box-shadow:0 24px 60px -28px rgba(0,0,0,.9);
  transition:border-color .15s ease, box-shadow .15s ease}
.sales .aib-card:focus-within{border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(14,165,233,.16), 0 24px 60px -28px rgba(0,0,0,.9)}
/* WHY VARIABLES AND NOT !important.
   The app-wide form theme in the built Tailwind sets, with !important:

       input,textarea,select{ background-color:var(--ff-input-bg)!important;
                              border:1px solid var(--ff-border)!important; ... }

   That outranks any selector I can write, which is why an explicit
   `background:#14171c` on .aib-ta still rendered white. It is variable-driven
   though, so the fix is to give this dark card its own values rather than adding
   a competing !important -- the global rule then paints exactly what we want and
   stays the single place that styles form controls. Anything else here becomes an
   arms race the next dark surface has to re-fight. */
.sales .aib-card{
  --ff-input-bg:#14171c;
  --ff-border:transparent;
  --ff-text:#ffffff;
  --ff-text-muted:#6f757e;
}
.sales .aib-field{position:relative}
.sales .aib-ta{width:100%;min-height:86px;resize:none;border:0;outline:0;/* EXPLICIT, not transparent. `transparent` relies on the card behind it and on no
     other sheet ever painting a form control -- and this page loads eleven
     stylesheets, two of them twice. An explicit dark value is the same result
     with none of that dependence. */
  background:var(--panel, #14171c);
  color:#fff;font-family:'Barlow',sans-serif;font-size:18px;line-height:1.55}
/* Chrome repaints an autofilled field with its own background; the inset shadow
   is the only way to keep it dark. */
.sales .aib-ta:-webkit-autofill,.sales .aib-ta:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #14171c inset;-webkit-text-fill-color:#fff;caret-color:#fff}
.sales .aib-ta::placeholder{color:#6f757e}
/* Animated placeholder: a real element, so it can cross-fade between trades. It is
   aria-hidden and pointer-events:none — the textarea keeps its own accessible label. */
.sales .aib-ph{position:absolute;inset:0;pointer-events:none;color:#6f757e;font-size:18px;
  line-height:1.55;transition:opacity .35s ease, transform .35s ease}
.sales .aib-ph.is-out{opacity:0;transform:translateY(-6px)}
.sales .aib-ph .cur{display:inline-block;width:2px;height:1em;background:var(--blue);
  vertical-align:-.15em;margin-left:2px;animation:aibblink 1.1s steps(1) infinite}
@keyframes aibblink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .sales .aib-ph{transition:none}
  .sales .aib-ph .cur{animation:none}
}
.sales .aib-foot{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:12px;
  border-top:1px solid #262b32}
.sales .aib-hint{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#767c86}
.sales .aib-hint b{color:var(--amber, #f5a31f);font-weight:500}
.sales .aib-go{margin-left:auto}
.sales .aib-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;align-items:center}
.sales .aib-chips-lbl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#767c86;margin-right:2px}
.sales .aib-chip{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:16px;
  text-transform:uppercase;letter-spacing:.03em;color:#d5d0c5;background:#1b1f25;
  border:1px solid #343a43;border-radius:999px;padding:6px 14px;cursor:pointer;transition:.12s ease}
.sales .aib-chip:hover{border-color:var(--blue);color:#fff;background:#1f2830}
.sales .aib-alt{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.sales .aib-alt .sep{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#6f757e}
@media (max-width:1080px){ .sales .aib{max-width:none} }