/* ---------- Brand theme (from the business card) ----------
   Navy  #172856  logo wordmark   -> text + accents
   Gold  #EEB51E  logo arrows     -> small highlights
   Yellow #FFD54F card band       -> hero label, warm tints
   Overrides style.css tokens for this page only. */
:root{
  --navy-1:#F1F6FF;          /* tinted sections + hero: light blue */
  --navy-2:#E3ECFD;
  --navy-3:#CFDDFA;
  --text:#172856;            /* logo navy */
  --text-mute:#5B6A7C;       /* 5.2:1 on tints, WCAG AA */
  --gold:#2350C9;            /* primary accent: brand blue */
  --gold-soft:rgba(35,80,201,0.09);
  --cyan:#172856;
  --cyan-soft:rgba(23,40,86,0.09);
  --line:rgba(23,40,86,0.11);
  --line-soft:rgba(23,40,86,0.07);
  --sun:#FFEB5A;             /* lemon yellow accent (~15% of the page) */
  --sun-deep:#E8C81A;
  --sun-soft:#FFF8C7;
}
/* ============================================================================
   Supplemental styles — MOBILE FIRST. style.css itself is not modified.

   Every rule below states the phone layout first; `min-width` queries add back
   what larger screens can afford. Breakpoints: 561px (large phone), 641px
   (tablet), 901px (desktop). 901px is deliberate — style.css is desktop-first
   and switches at max-width:900px, so the two never overlap on the same pixel.

   The PATCHES block at the end fixes places where style.css's desktop-first
   defaults break on a phone and cannot be reached any other way.
   ============================================================================ */

/* ---------- Brand / nav chrome ---------- */
.brand-logo{ height:38px; width:auto; display:block; }
.brand-logo-footer{ height:30px; }
/* style.css has `.nav-links a{padding-bottom:3px; border-bottom:1px solid transparent}`,
   which outranks `.nav-cta` (0,1,1 vs 0,1,0) — so the pill lost its bottom border and
   got squashed to a 3px bottom pad, making it collide with the nav's bottom rule.
   Same declarations at a higher specificity restore the full pill. */
.nav-links a.nav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; line-height:1; min-height:44px;
  border:1px solid var(--gold); border-radius:100px;
}
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta:focus-visible{
  background:var(--gold-soft); border-color:var(--gold);
}
.nav-item{position:relative;}
/* Phone: the dropdown is an inline accordion inside the slide-down panel */
.nav-dropdown-toggle{
  cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  background:none; border:none; appearance:none; -webkit-appearance:none;
  font:inherit; text-transform:uppercase; letter-spacing:0.07em; color:inherit;
  line-height:inherit;
  width:100%; justify-content:space-between; padding:13px 0; min-height:44px;
  border-bottom:1px solid var(--line-soft);
}
.nav-dropdown-toggle::after{content:"▾"; font-size:9px; color:var(--text-mute);}
.nav-dropdown-menu{
  display:none; padding:0 0 4px 14px; background:transparent;
}
.nav-item.open .nav-dropdown-menu{display:block;}
.nav-dropdown-menu a{
  display:block; padding:12px 14px; min-height:44px;
  border-bottom:none !important; border-radius:8px;
  text-transform:none; letter-spacing:0.02em; font-size:13.5px;
}
.nav-dropdown-menu a:hover{background:var(--navy-1); color:var(--gold);}
/* Desktop: lift it back into a hover dropdown */
@media (min-width:901px){
  .brand-logo{ height:50px; }
  .brand-logo-footer{ height:32px; }
  .nav-links a.nav-cta{padding:10px 22px; min-height:0;}
  .nav-dropdown-toggle{
    width:auto; justify-content:flex-start; padding:0; min-height:0; border-bottom:none;
  }
  .nav-dropdown-menu{
    display:block; position:absolute; top:calc(100% + 14px); left:0; min-width:230px;
    background:var(--navy-0); border:1px solid var(--line); border-radius:14px;
    padding:8px; box-shadow:var(--shadow);
    opacity:0; visibility:hidden; transform:translateY(4px);
    transition:opacity .15s, transform .15s, visibility .15s;
    z-index:60;
  }
  .nav-item:hover .nav-dropdown-menu,
  .nav-item:focus-within .nav-dropdown-menu{opacity:1; visibility:visible; transform:translateY(0);}
  .nav-dropdown-menu a{padding:11px 14px; min-height:0; font-size:12.5px;}
}

/* ---------- Shared list / FAQ components ---------- */
.plain-list{list-style:none; margin:26px auto 0; padding:0; max-width:760px; text-align:left; display:flex; flex-direction:column; gap:13px;}
.plain-list li{font-size:14.5px; color:var(--text-soft); padding-left:20px; position:relative;}
.plain-list li::before{content:""; position:absolute; left:0; top:7px; width:6px; height:6px; background:var(--cyan);}

.faq-list{margin-top:12px;}
.faq-item{background:var(--navy-0); border:1px solid var(--line-soft); border-radius:14px; box-shadow:var(--shadow); padding:18px 18px; margin-bottom:12px;}
.faq-item summary{cursor:pointer; font-family:'Source Serif 4', serif; font-size:15.5px; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; color:var(--gold); font-family:'IBM Plex Mono', monospace; flex-shrink:0;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{color:var(--text-soft); font-size:14.5px; margin:12px 0 0; max-width:70ch;}
@media (min-width:561px){
  .plain-list{margin-top:32px; gap:14px;}
  .plain-list li{font-size:15px; padding-left:22px;}
  .faq-item{border-radius:16px; padding:22px 26px; margin-bottom:14px;}
  .faq-item summary{font-size:16.5px; gap:20px;}
  .faq-item p{margin-top:14px;}
}

/* ---------- Team ---------- */
/* One measure for every section head. style.css caps .section-head at 660px,
   which was too tight for the team intro and left each section a different
   width; 760px suits the longest of them and keeps all of them identical. */
.section-head{max-width:760px;}
.team-row{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:26px 22px;
}
.team-member{width:104px; text-align:center;}
.team-avatar{
  width:72px; height:72px; margin:0 auto 12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:3px solid var(--navy-0); box-shadow:var(--shadow);
  background:linear-gradient(145deg, var(--gold), var(--cyan));
  color:#fff; font-family:'IBM Plex Mono', monospace;
  font-size:19px; font-weight:600; letter-spacing:0.06em;
}
/* A photo fills the circle; the gradient underneath shows only while it loads */
.team-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.team-avatar:has(img){background:var(--navy-2);}
.team-member:nth-child(2) .team-avatar{background:linear-gradient(145deg, #3A5BB8, #2350C9);}
.team-member:nth-child(3) .team-avatar{background:linear-gradient(145deg, #172856, #2350C9);}
.team-member:nth-child(4) .team-avatar{background:linear-gradient(145deg, #2350C9, #172856);}
.team-member:nth-child(5) .team-avatar{background:linear-gradient(145deg, #2350C9, #3A5BB8);}
.team-name{
  font-family:'Source Serif 4', serif; font-weight:600; font-size:14px;
  color:var(--text); margin:0 0 4px; line-height:1.3;
}
.team-role{
  font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--text-mute); margin:0; line-height:1.45;
}
@media (min-width:561px){
  .team-row{gap:32px 34px;}
  .team-member{width:132px;}
  .team-avatar{width:86px; height:86px; margin-bottom:14px; font-size:22px;}
  .team-name{font-size:15px;}
  .team-role{font-size:10.5px; letter-spacing:0.08em;}
}
@media (min-width:901px){
  .team-row{gap:36px 46px;}
  .team-member{width:148px;}
  .team-avatar{width:96px; height:96px; margin-bottom:15px; font-size:24px;}
  .team-name{font-size:15.5px;}
  .team-role{font-size:11px;}
}

/* ---------- Secure VM ---------- */
.vm-specs{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.vm-specs li{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--gold); background:var(--gold-soft); border-radius:100px; padding:6px 12px;
}
.vm-specs li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold);}
#secure-vm .grid-card h3{font-family:'Source Serif 4', serif; font-size:19px; font-weight:600; margin:0;}
#secure-vm .grid-card p{color:var(--text-soft); font-size:14.5px; line-height:1.6; margin:0;}

/* ---------- Hero ---------- */
.hero{padding:14px 0 56px;}
/* Centred column, matching the .section-head.center treatment used below */
.hero-copy{margin-left:auto; margin-right:auto; text-align:center;}
/* Eyebrow as a solid chip so it reads as a clear label, not floating text */
.hero-copy .eyebrow{
  background:var(--gold-soft); color:var(--gold);
  border:1px solid rgba(35,80,201,0.20); border-radius:100px;
  padding:7px 13px; margin:0 0 18px; font-weight:600;
  letter-spacing:0.08em; font-size:11px; line-height:1.45;
  justify-content:center; text-align:center;
}
/* Triangle mosaic echoing the diagonal of the logo mark, anchored bottom-right;
   fades out diagonally so the top-left corner stays clean behind the headline.
   Kept faint on phones, where the text spans the full width. */
.hero-mosaic{
  position:absolute; top:0; right:0; bottom:0;
  width:100%; z-index:0; pointer-events:none;
  background:url("hero-mosaic.svg") right bottom / cover no-repeat;
  opacity:0.12;
  -webkit-mask-image:radial-gradient(115% 115% at 100% 100%, #000 0%, #000 18%, rgba(0,0,0,0.38) 50%, transparent 76%);
          mask-image:radial-gradient(115% 115% at 100% 100%, #000 0%, #000 18%, rgba(0,0,0,0.38) 50%, transparent 76%);
}
/* Eyebrow doubling as a link through to the point-of-view page */
.eyebrow-link{text-decoration:none; cursor:pointer; transition:color .15s ease;}
.eyebrow-link .eyebrow-arrow{display:inline-block; margin-left:2px; transition:transform .18s ease;}
.eyebrow-link:hover,
.eyebrow-link:focus-visible{color:var(--cyan);}
.eyebrow-link:hover .eyebrow-arrow,
.eyebrow-link:focus-visible .eyebrow-arrow{transform:translateX(4px);}
/* Dominant headline. The clamp floor governs phones, the vw term takes over
   around 600px, and the ceiling holds from ~1170px. */
.hero-title{
  font-size:clamp(29px, 4.8vw, 56px); line-height:1.1; letter-spacing:-0.02em;
  margin:0 0 18px; color:var(--text);
}
.hero-title em{font-style:normal; color:var(--gold);}
/* Two-beat headline: the change (quiet, muted) then the benefit (loud, branded) */
.hero-title-problem{
  display:block; font-size:clamp(18px, 2.5vw, 30px); line-height:1.3;
  letter-spacing:-0.01em; font-weight:500; color:var(--text-mute);
  margin:0 0 12px;
}
.hero-title-promise{display:block;}
/* Gold chip on the promise that does the selling */
.hero-title .hl{
  color:var(--gold); background:var(--gold-soft);
  border-radius:10px; padding:0 .14em; white-space:nowrap;
}
/* Body copy: readable measure, clear separation from headline */
.hero p.lede{font-size:16px; line-height:1.6; color:var(--text-soft); max-width:62ch; margin:0 auto 18px;}
/* Ask field — the visitor names their bottleneck before reading further */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.hero-ask{
  display:flex; align-items:center; gap:8px;
  max-width:660px; margin:22px auto 0; padding:8px 8px 8px 16px;
  background:var(--navy-0); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.hero-ask:focus-within{
  border-color:var(--gold);
  box-shadow:0 6px 24px rgba(15,45,90,0.10), 0 0 0 4px var(--gold-soft);
}
/* font-size stays at 16px on every breakpoint: iOS Safari zooms the whole page
   when a focused input is under 16px, which throws the layout off. */
.hero-ask input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:'Inter', sans-serif; font-size:16px; color:var(--text);
  padding:11px 0; text-align:left;
}
.hero-ask input::placeholder{color:var(--text-mute);}
.hero-ask button{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; cursor:pointer;
  border:0; border-radius:13px; background:var(--gold); color:#fff;
  transition:background .18s ease, transform .18s ease;
}
.hero-ask button:hover{background:var(--cyan); transform:translateY(-1px);}
.hero-ask button svg{width:19px; height:19px; display:block;}
/* Italic positioning line, set apart in accent color */
.hero-tagline{
  font-family:'Source Serif 4', serif; font-style:italic; font-size:17px;
  color:var(--gold); line-height:1.5; max-width:54ch; margin:0 auto 28px;
  padding-top:20px; position:relative;
}
/* Short centred rule replaces the left rule, which cannot work on centred text */
.hero-tagline::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:56px; height:3px; background:var(--gold); border-radius:2px;
}
.hero-tagline em{font-style:italic;}
.hero-ctas{gap:12px; justify-content:center;}
@media (min-width:561px){
  .hero-copy .eyebrow{font-size:12px; padding:7px 15px 7px 13px; margin-bottom:22px; letter-spacing:0.10em;}
  .hero p.lede{font-size:17.5px; line-height:1.62; margin-bottom:20px;}
  .hero-ask{gap:10px; padding:9px 9px 9px 22px; border-radius:22px; margin:26px auto 0;}
  .hero-ask input{padding:12px 0;}
  .hero-ask button{border-radius:14px;}
  .hero-tagline{font-size:18.5px; padding-top:22px; margin-bottom:32px;}
  .hero-ctas{gap:14px;}
}
@media (min-width:901px){
  .hero{padding:28px 0 96px;}
  .hero-title{line-height:1.06; margin-bottom:22px;}
  .hero-title-problem{margin-bottom:16px;}
  .hero-mosaic{width:min(58%, 760px); opacity:0.13;}
}

/* Hero with the Waggle mascot: stacked on phones (mascot under the copy),
   copy left + mascot right from 901px. */
.hero-inner.hero-split{grid-template-columns:1fr; gap:26px;}
.hero-waggle{
  margin:0 auto; width:min(52vw, 210px); position:relative; isolation:isolate;
  transform:translateX(-8.7%);   /* phones: put the head, not the canvas, on the centre line */
}
/* The GIF's artwork is not centred in its canvas: the head spans x 126-465 of 504
   (centre 58.7%) and the bottom 67px of 495 are empty. The glow and the caption
   are placed against the head, not the canvas. */
.waggle-art{display:block; position:relative; isolation:isolate;}
.waggle-art::before{
  content:""; position:absolute; z-index:-1; border-radius:50%;
  left:18.7%; width:80%; top:14%; aspect-ratio:1;
  background:radial-gradient(closest-side, rgba(255,255,255,0.95), rgba(255,255,255,0.6) 60%, transparent);
}
.hero-waggle img{display:block; width:100%; height:auto;}
@media (min-width:901px){
  .hero-inner.hero-split{grid-template-columns:minmax(0,1.3fr) minmax(0,0.7fr); gap:48px; align-items:center;}
  .hero-split .hero-copy{text-align:left; margin-left:0; max-width:none;}
  .hero-split .hero-copy .eyebrow{justify-content:flex-start;}
  .hero-split p.lede{margin-left:0;}
  .hero-split .hero-ask{margin-left:0;}
  .hero-waggle{width:100%; max-width:320px; margin:0 auto; transform:none;}
}

.waggle-status{
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  /* up into the empty bottom band (67/504 of the width, leaving ~1.5% air) and
     centred under the head (58.7% - 50% = 8.7% of the width) */
  margin-top:-11.8%; transform:translateX(8.7%);
}
.waggle-name{
  font-family:'Source Serif 4', serif; font-weight:700; font-size:28px; line-height:1.15;
  letter-spacing:-0.01em; color:var(--text);
}
.waggle-conn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Inter', sans-serif; font-size:16px; font-weight:500; color:var(--text-soft);
}
/* green status dot with a soft halo, like a "live" presence indicator */
.waggle-dot{
  width:10px; height:10px; border-radius:50%; background:#22A559; flex-shrink:0;
  box-shadow:0 0 0 5px rgba(34,165,89,0.18);
  animation:waggle-live 2.4s ease-in-out infinite;
}
@keyframes waggle-live{
  0%, 100%{box-shadow:0 0 0 5px rgba(34,165,89,0.18);}
  50%{box-shadow:0 0 0 7px rgba(34,165,89,0.10);}
}
@media (prefers-reduced-motion:reduce){ .waggle-dot{animation:none;} }
@media (min-width:901px){ .waggle-name{font-size:30px;} }

/* Hero heading, two tiers: the category (small label) above the promise (big line) */
.hero-title-kicker{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 14px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.14em; line-height:1.4; color:var(--gold);
}
.hero-title-kicker::before{content:""; width:22px; height:2px; background:var(--gold); border-radius:2px; flex-shrink:0;}
.hero-title .hero-title-promise{display:block;}
@media (min-width:561px){ .hero-title-kicker{font-size:13px; margin-bottom:18px;} }

/* Hero sub-line: the offer in one sentence, right under the promise */
.hero-sub{
  margin:0 auto; max-width:660px;
  font-family:'Inter', sans-serif; font-size:18px; font-weight:600; line-height:1.45; color:var(--text);
}
.hero-sub strong{color:var(--gold); font-weight:700;}
@media (min-width:561px){ .hero-sub{font-size:20px;} }
@media (min-width:901px){ .hero-split .hero-sub{margin-left:0;} }
.hero-sub + .hero-promise{margin-top:8px;}
/* Educate first: one quiet link into the story instead of sales buttons */
.hero-learn-wrap{margin:24px 0 0;}
.hero-learn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:16px; font-weight:600; color:var(--gold); text-decoration:none;
  border-bottom:1px solid rgba(35,80,201,0.3); padding-bottom:2px;
}
.hero-learn span{display:inline-block; transition:transform .2s ease;}
.hero-learn:hover, .hero-learn:focus-visible{border-bottom-color:var(--gold);}
.hero-learn:hover span, .hero-learn:focus-visible span{transform:translateY(3px);}
@media (prefers-reduced-motion:reduce){ .hero-learn span{transition:none;} }
/* Hero actions + proof row (replace the old ask box) */
.hero-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px;}
.hero-actions .btn{justify-content:center; padding:15px 24px;}
.hero-proof{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px;
}
.hero-proof li{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--text-soft);}
.hero-proof li::before{
  content:"\2713"; width:18px; height:18px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(34,165,89,0.14); color:#16733F; font-size:11px; font-weight:700;
}
@media (max-width:560px){
  .hero-actions .btn{flex:1 1 100%;}
}
@media (min-width:901px){
  .hero-split .hero-actions, .hero-split .hero-proof{justify-content:flex-start;}
  .hero-actions{margin-top:30px;}
}
/* One-line confidence promise under the sub-line */
.hero-promise{
  margin:16px auto 0; max-width:660px;
  font-family:'Source Serif 4', serif; font-style:italic; font-size:16px; line-height:1.5;
  color:var(--text-soft);
}
@media (min-width:561px){ .hero-promise{font-size:17px; margin-top:18px;} }
@media (min-width:901px){ .hero-split .hero-promise{margin-left:0;} }

/* ---------- How Waggle works ---------- */
.wg{background:var(--navy-0);}
.wg-grid{display:grid; grid-template-columns:1fr; gap:36px; align-items:center;}
.wg-copy{text-align:left;}
.wg-copy h2{font-size:clamp(26px, 3vw, 38px); line-height:1.16; font-weight:600; margin:0 0 14px;}
.wg-lede{color:var(--text-soft); font-size:16px; line-height:1.6; margin:0 0 26px; max-width:52ch;}
.wg-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px;}
.wg-steps li{display:flex; gap:16px; align-items:flex-start; position:relative;}
/* thin line joining the numbers, so the three steps read as one flow */
.wg-steps li:not(:last-child)::after{
  content:""; position:absolute; left:17px; top:38px; bottom:-16px; width:2px; background:var(--gold-soft);
}
.wg-num{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:#fff; font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:14px;
}
.wg-steps h3{font-family:'Source Serif 4', serif; font-size:18px; font-weight:600; margin:5px 0 3px; color:var(--text);}
.wg-steps p{margin:0; color:var(--text-soft); font-size:14.5px; line-height:1.55;}
.wg-trust{list-style:none; margin:26px 0 0; padding:18px 0 0; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:10px 22px;}
.wg-trust li{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--text);}
.wg-trust li::before{
  content:"\2713"; width:18px; height:18px; border-radius:50%; flex-shrink:0;
  background:rgba(34,165,89,0.14); color:#16733F; font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Chat mock-up */
.wg-chat{
  margin:0; background:var(--navy-0); border:1px solid var(--line); border-radius:22px;
  box-shadow:0 24px 60px rgba(15,45,90,0.12); overflow:hidden; position:relative;
}
.wg-chat-head{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line-soft);}
.wg-chat-head p{margin:0; flex:1; min-width:0; font-size:15px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wg-chat-head p span{color:var(--text-soft);}
.wg-av{width:44px; height:44px; border-radius:12px; background:var(--gold-soft); flex-shrink:0; object-fit:cover;}
.wg-av.sm{width:32px; height:32px; border-radius:50%;}
.wg-active{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  font-size:13px; font-weight:600; color:#16733F; background:rgba(34,165,89,0.10);
  border:1px solid rgba(34,165,89,0.22); border-radius:100px; padding:5px 12px;
}
.wg-active i{width:7px; height:7px; border-radius:50%; background:#22A559;}
.wg-chat-body{
  padding:18px 16px 8px; display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(180deg, var(--navy-0), var(--navy-1));
}
.wg-row{display:flex; align-items:flex-end; gap:10px;}
.wg-me{justify-content:flex-end;}
.wg-indent{padding-left:42px;}
.wg-bubble{
  max-width:82%; padding:10px 14px; border-radius:16px; font-size:14.5px; line-height:1.5; color:var(--text);
  background:var(--gold-soft); border:1px solid rgba(35,80,201,0.14); border-bottom-right-radius:6px;
}
.wg-bubble.wg-bot{background:var(--navy-0); border:1px solid var(--line); border-bottom-right-radius:16px; border-bottom-left-radius:6px;}
.wg-you{
  width:32px; height:32px; border-radius:50%; flex-shrink:0; background:var(--text); color:#fff;
  font-size:10.5px; font-weight:600; display:flex; align-items:center; justify-content:center;
}
.wg-run{
  display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border-radius:14px;
  background:var(--navy-0); border:1px dashed rgba(35,80,201,0.35); font-size:14px; color:var(--text-soft);
}
.wg-run b{color:var(--gold); font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:13px;}
.wg-spin{
  width:13px; height:13px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--gold-soft); border-top-color:var(--gold);
  animation:wg-spin 1s linear infinite;
}
@keyframes wg-spin{to{transform:rotate(360deg);}}
.wg-card{
  width:100%; max-width:340px; background:var(--navy-0); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; box-shadow:0 6px 16px rgba(15,45,90,0.06);
}
.wg-card-k{margin:0 0 6px; font-size:12px; color:var(--text-mute);}
.wg-card-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.wg-card-name{margin:0; font-size:16px; font-weight:600; color:var(--text);}
.wg-card-due{margin:2px 0 0; font-size:13.5px; font-weight:600; color:#C0392B;}
.wg-flag{font-size:12px; font-weight:600; color:#B42318; background:#FDECEA; border-radius:8px; padding:4px 9px; white-space:nowrap;}
.wg-chat-input{
  margin:8px 16px 0; padding:12px 14px; border:1px solid var(--line); border-radius:14px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:14px; color:var(--text-mute); background:var(--navy-0);
}
.wg-send{color:var(--gold); font-size:16px;}
.wg-note{
  margin:0; padding:10px 16px 12px; text-align:right;
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-mute);
}

/* The conversation plays once when it scrolls into view (JS adds .wg-anim / .wg-play).
   Without JS, or with reduced motion, everything is simply shown. */
.wg-anim .wg-step{opacity:0; transform:translateY(10px);}
.wg-anim.wg-play .wg-step{
  animation:wg-in .45s ease-out forwards; animation-delay:calc(var(--d) * 0.9s + 0.2s);
}
@keyframes wg-in{to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){
  .wg-anim .wg-step{opacity:1; transform:none;}
  .wg-anim.wg-play .wg-step{animation:none;}
  .wg-spin{animation:none;}
}

@media (min-width:561px){
  .wg-chat-head{padding:16px 20px;}
  .wg-chat-body{padding:22px 20px 10px;}
  .wg-chat-input{margin:10px 20px 0;}
  .wg-note{padding:10px 20px 14px;}
}
@media (min-width:901px){
  .wg-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:64px;}
  .wg-lede{font-size:17px;}
}

/* ---------- Why owners lose sight: cause -> effect chain ---------- */
.vz-chain{list-style:none; margin:0 auto; padding:0; max-width:1060px; display:grid; grid-template-columns:1fr; gap:34px;}
.vz-step{
  position:relative; background:var(--navy-0); border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px 22px; text-align:left;
}
.vz-k{
  display:inline-block; margin-bottom:10px; padding:4px 10px; border-radius:6px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em;
  color:#B42318; background:#FDECEA;
}
.vz-step:last-child .vz-k{color:var(--text); background:var(--navy-2);}
.vz-step h3{font-family:'Source Serif 4', serif; font-size:19px; font-weight:600; line-height:1.3; margin:0 0 8px;}
.vz-step p{margin:0; color:var(--text-soft); font-size:14.5px; line-height:1.55;}
/* arrow from each step to the next: down on phones, right on desktop */
.vz-step:not(:last-child)::after{
  content:"\2193"; position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--navy-0); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--text-mute); z-index:1;
}
.vz-close{max-width:64ch; margin:36px auto 0; text-align:center; font-size:16px; line-height:1.65; color:var(--text-soft);}
.vz-close strong{color:var(--text);}
.vz-src{max-width:64ch; margin:14px auto 0; text-align:center; font-size:12.5px; line-height:1.6; color:var(--text-mute);}
.vz-src a{color:var(--text-mute); text-decoration:underline; text-underline-offset:2px;}
.vz-src a:hover{color:var(--gold);}

/* ---------- The StandScale model: three stacked layers ---------- */
.md-stack{max-width:1000px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.md-layer{
  display:grid; grid-template-columns:1fr; gap:14px; text-align:left;
  background:var(--navy-0); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px 20px;
}
.md-side{display:flex; align-items:flex-start; gap:14px;}
.md-num{
  flex-shrink:0; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-soft); color:var(--gold); font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:16px;
}
.md-layer h3{font-family:'Source Serif 4', serif; font-size:21px; font-weight:600; line-height:1.25; margin:2px 0 8px; color:var(--text);}
.md-price{
  display:inline-block; padding:4px 10px; border-radius:100px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--text-soft); background:var(--navy-2);
}
.md-price.md-free{color:#16733F; background:rgba(34,165,89,0.12);}
.md-body p{margin:0 0 10px; color:var(--text-soft); font-size:15px; line-height:1.6;}
.md-body ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.md-body li{position:relative; padding-left:24px; font-size:14.5px; line-height:1.5; color:var(--text);}
.md-body li::before{
  content:"\2713"; position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:50%;
  background:var(--gold-soft); color:var(--gold); font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
/* the top layer is where the value shows up, so it carries the brand colour */
.md-top{background:linear-gradient(135deg, #2350C9 0%, #172856 100%); border-color:transparent; box-shadow:0 18px 40px rgba(35,80,201,0.25);}
.md-top h3, .md-top .md-body li{color:#fff;}
.md-top .md-body p{color:rgba(255,255,255,0.82);}
.md-top .md-num{background:rgba(255,255,255,0.16); color:#fff;}
.md-top .md-price{background:rgba(255,255,255,0.16); color:#fff;}
.md-top .md-body li::before{background:rgba(255,255,255,0.2); color:#fff;}
.md-foot{max-width:70ch; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:var(--text-mute);}
.md-foot::before{
  content:"\2191"; display:inline-flex; vertical-align:middle; margin:-3px 10px 0 0;
  width:24px; height:24px; border-radius:50%; background:var(--gold-soft); color:var(--gold);
  align-items:center; justify-content:center; font-weight:700;
}

/* ---------- TCO calculator ---------- */
.tco-card{
  max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr;
  background:var(--navy-0); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 18px 46px rgba(15,45,90,0.10); overflow:hidden; text-align:left;
}
.tco-inputs{background:var(--navy-1); padding:24px 20px; display:flex; flex-direction:column; gap:14px; border-bottom:1px solid var(--line-soft);}
.tco-k{margin:0 0 2px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold);}
.tco-field{display:flex; flex-direction:column; gap:6px;}
.tco-field span{font-size:13.5px; color:var(--text-soft);}
.tco-field input{
  width:100%; font:inherit; font-size:16px; font-weight:600; color:var(--text);
  background:var(--navy-0); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
.tco-field input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft);}
.tco-hint{margin:2px 0 0; font-size:12.5px; color:var(--text-mute); font-style:italic;}
/* ---------- Summary cards ---------- */
.tco-bill{
  max-width:1000px; margin:0 auto; text-align:left;
  background:var(--navy-0); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 18px 46px rgba(15,45,90,0.10); padding:24px 20px;
}
.tco-bill .tco-k{margin-bottom:14px;}
.tco-bill-row{display:grid; grid-template-columns:1fr; gap:10px; align-items:stretch;}
.tco-bill-item{
  display:flex; flex-direction:column; gap:4px; padding:16px 18px;
  border-radius:14px; background:var(--navy-1); border:1px solid var(--line-soft);
}
.tco-bill-name{font-size:13.5px; font-weight:600; color:var(--text-soft);}
.tco-bill-amt{font-family:'Source Serif 4', serif; font-size:32px; font-weight:600; line-height:1.1; color:var(--text);}
.tco-bill-amt small{font-family:'Inter', sans-serif; font-size:15px; font-weight:500; color:var(--text-soft); margin-left:2px;}
.tco-bill-note{font-size:13px; line-height:1.5; color:var(--text-mute);}
.tco-bill-note .nw{white-space:nowrap;}
.tco-bill-op{
  justify-self:center; align-self:center; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-soft); color:var(--gold); font-size:18px; font-weight:700;
}
.tco-bill-item:first-child .tco-bill-amt{color:#16733F;}
.tco-bill-total{background:linear-gradient(135deg, #2350C9 0%, #172856 100%); border-color:transparent;}
.tco-bill-total .tco-bill-name, .tco-bill-total .tco-bill-note, .tco-bill-total .tco-bill-amt small{color:rgba(255,255,255,0.85);}
.tco-bill-total .tco-bill-amt{color:#fff;}
.tco-bill-foot{margin:14px 0 0; font-size:13.5px; line-height:1.55; color:var(--text-soft);}
.tco-bill-foot a{color:var(--gold); font-weight:600; text-decoration:none; white-space:nowrap;}
.tco-bill-foot a:hover{text-decoration:underline;}
.tco-compare-head{max-width:760px; margin:48px auto 20px; text-align:center;}
.tco-compare-head h3{font-family:'Source Serif 4', serif; font-size:24px; font-weight:600; margin:0 0 8px;}
.tco-compare-head p{margin:0; color:var(--text-soft); font-size:15.5px; line-height:1.6;}
.tco-group{
  margin:8px 0 -2px; padding-top:10px; border-top:1px solid var(--line);
  font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--text);
}
.tco-head + .tco-group{border-top:0; padding-top:0;}
@media (min-width:561px){ .tco-bill{padding:28px 30px;} }
@media (min-width:901px){
  .tco-bill-row{grid-template-columns:1fr auto 1fr auto 1.15fr; gap:14px;}
  .tco-bill{padding:30px 34px;}
}
/* Currency switch */
.tco-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.tco-cur{display:inline-flex; padding:3px; border-radius:100px; background:var(--navy-0); border:1px solid var(--line);}
.tco-cur button{
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; border:0; border-radius:100px;
  padding:6px 12px; min-height:32px; background:transparent; color:var(--text-soft);
}
.tco-cur button[aria-pressed="true"]{background:var(--gold); color:#fff;}
.tco-cur button:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
@media (min-width:901px){
}
.tco-out{padding:24px 20px; display:flex; flex-direction:column; gap:16px;}
.tco-bar-label{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:7px; font-size:14px; color:var(--text-soft);}
.tco-bar-label b{font-size:17px; color:var(--text); white-space:nowrap;}
.tco-bar{height:14px; border-radius:7px; background:var(--navy-2); overflow:hidden;}
.tco-bar i{display:block; height:100%; width:0; border-radius:7px; background:#8C9AB3; transition:width .45s ease;}
.tco-bar.ours i{background:var(--gold);}
.tco-save{
  display:flex; flex-direction:column; gap:2px; padding:18px; border-radius:14px;
  background:rgba(34,165,89,0.08); border:1px solid rgba(34,165,89,0.2);
}
.tco-save .tco-save-k{font-size:14px; font-weight:600; color:var(--text-soft);}
.tco-save strong{font-family:'Source Serif 4', serif; font-size:34px; line-height:1.15; color:#16733F;}
.tco-save-lead{margin:6px 0 0; font-size:14.5px; line-height:1.55; color:var(--text);}
.tco-save-why{list-style:none; margin:12px 0 0; padding:12px 0 0; border-top:1px solid rgba(34,165,89,0.2); display:flex; flex-direction:column; gap:9px;}
.tco-save-why li{position:relative; padding-left:24px; font-size:13.5px; line-height:1.5; color:var(--text-soft);}
.tco-save-why li::before{
  content:"\2713"; position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%;
  background:rgba(34,165,89,0.18); color:#16733F; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.tco-save-why b{color:var(--text); font-weight:600;}
.tco-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;}
.tco-link{color:var(--gold); font-weight:600; font-size:14.5px; text-decoration:none;}
.tco-link span{display:inline-block; transition:transform .18s ease;}
.tco-link:hover span, .tco-link:focus-visible span{transform:translateX(4px);}
.tco-fine{margin:0; font-size:12.5px; line-height:1.55; color:var(--text-mute);}
.tco-fine a{color:var(--text-mute); text-decoration:underline; text-underline-offset:2px;}
@media (prefers-reduced-motion:reduce){ .tco-bar i{transition:none;} }

/* ---------- Industries ---------- */
.ind-grid{display:grid; grid-template-columns:1fr; gap:16px;}
.ind-card{
  background:var(--navy-0); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:24px 22px; display:flex; flex-direction:column; gap:10px; text-align:left;
}
.ind-card .card-icon{
  width:46px; height:46px; border-radius:14px; background:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; color:var(--gold);
}
.ind-card .card-icon svg{width:22px; height:22px;}
.ind-card h3{font-family:'Source Serif 4', serif; font-size:19px; font-weight:600; margin:4px 0 0;}
.ind-card > p{margin:0; color:var(--text-soft); font-size:14.5px; line-height:1.55;}
.ind-card .ind-ask{
  margin-top:auto; padding:12px 14px; border-radius:12px; background:var(--navy-1); border:1px dashed rgba(35,80,201,0.28);
  font-size:14px; line-height:1.45; color:var(--text);
}
.ind-ask span{
  display:block; margin-bottom:4px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--gold);
}

/* ---------- Engagement path ---------- */
.eng-path{list-style:none; margin:0 auto 28px; padding:0; max-width:1060px; display:grid; grid-template-columns:1fr; gap:16px;}
.eng-step{
  position:relative; background:var(--navy-0); border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px 22px; display:flex; flex-direction:column; gap:8px; text-align:left;
  border-top:4px solid var(--gold-soft);
}
.eng-step:nth-child(2){border-top-color:rgba(35,80,201,0.45);}
.eng-step:nth-child(3){border-top-color:var(--gold);}
.eng-when{font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold);}
.eng-step h3{font-family:'Source Serif 4', serif; font-size:20px; font-weight:600; line-height:1.3; margin:0;}
.eng-step p{margin:0; color:var(--text-soft); font-size:14.5px; line-height:1.55;}
.eng-cost{
  margin-top:auto; align-self:flex-start; padding:5px 11px; border-radius:100px;
  font-size:12.5px; font-weight:600; color:#16733F; background:rgba(34,165,89,0.10);
}
#offerings .sprint-callout{max-width:1060px; margin-left:auto; margin-right:auto;}

@media (min-width:561px){
  .md-layer{padding:26px 26px;}
  .tco-inputs, .tco-out{padding:30px 30px;}
  .ind-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (min-width:901px){
  .vz-chain{grid-template-columns:repeat(3, 1fr); gap:40px;}
  .vz-step:not(:last-child)::after{content:"\2192"; left:auto; right:-34px; top:50%; bottom:auto; transform:translateY(-50%);}
  .md-layer{grid-template-columns:320px 1fr; gap:28px; align-items:start; padding:28px 32px;}
  .tco-card{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);}
  .tco-inputs{border-bottom:0; border-right:1px solid var(--line-soft);}
  .tco-inputs, .tco-out{padding:34px 36px;}
  .ind-grid{grid-template-columns:repeat(4, 1fr); gap:18px;}
  .eng-path{grid-template-columns:repeat(3, 1fr); gap:20px;}
}

/* ---------- Secure VM: own-infrastructure option ---------- */
.md-more{display:inline-block; margin-top:12px; font-size:14px; font-weight:600; color:var(--gold); text-decoration:none;}
.md-more:hover{text-decoration:underline;}
.vm-alt{
  max-width:1060px; margin:28px auto 0; padding:22px 20px; text-align:left;
  background:var(--navy-0); border:1px dashed rgba(35,80,201,0.35); border-radius:var(--radius);
  display:flex; flex-direction:column; gap:16px;
}
.vm-alt-head h3{font-family:'Source Serif 4', serif; font-size:20px; font-weight:600; margin:0 0 4px;}
.vm-alt-head p{margin:0; color:var(--text-soft); font-size:14.5px; line-height:1.55;}
.vm-alt-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px;}
.vm-alt-list li{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; background:var(--navy-1);}
.vm-alt-list b{font-size:14.5px; color:var(--text);}
.vm-alt-list span{font-size:13.5px; color:var(--text-soft);}
@media (min-width:641px){ .vm-alt-list{grid-template-columns:repeat(3, 1fr);} }
@media (min-width:901px){
  .vm-alt{flex-direction:row; align-items:center; gap:28px; padding:24px 30px;}
  .vm-alt-head{flex:0 0 280px;}
  .vm-alt-list{flex:1;}
}

/* ---------- Hero typography system (final) ----------
   One serif for the headline, one sans for everything else, one accent colour,
   a steady vertical rhythm. Same words as before. */
.hero .hero-copy{max-width:720px;}
.hero .hero-title{margin:0; letter-spacing:-0.022em; line-height:1.06; text-wrap:balance;}
.hero .hero-title em{font-style:normal; color:var(--gold);}           /* was italic via style.css */
.hero .hero-title-kicker{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 18px;
  padding:6px 12px; border-radius:100px; background:var(--navy-0); border:1px solid var(--line);
  font-family:'Inter', sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--gold); box-shadow:0 2px 8px rgba(15,45,90,0.05);
}
.hero .hero-title-kicker::before{width:7px; height:7px; border-radius:50%; background:var(--gold);}
.hero .hero-sub{
  margin:22px 0 0; max-width:none;
  font-family:'Inter', sans-serif; font-size:19px; font-weight:600; line-height:1.4; color:var(--text);
}
.hero .hero-sub strong{color:var(--gold); font-weight:700;}
.hero .hero-sub + .hero-promise,
.hero .hero-promise{
  margin:6px 0 0; max-width:56ch;
  font-family:'Inter', sans-serif; font-style:normal; font-size:16.5px; font-weight:400; line-height:1.6; color:var(--text-soft);
}
.hero .hero-learn-wrap{margin:28px 0 0;}
.hero .hero-learn{font-size:15.5px;}
.hero .hero-proof{
  margin:28px 0 0; padding-top:20px; border-top:1px solid var(--line);
  gap:10px 20px; max-width:none;
}
.hero .hero-proof li{font-size:13.5px;}
@media (max-width:900px){
  .hero .hero-copy{margin-left:auto; margin-right:auto;}
  .hero .hero-promise{margin-left:auto; margin-right:auto;}
  .hero .hero-proof{margin-left:auto; margin-right:auto;}
}
@media (min-width:561px){
  .hero .hero-sub{font-size:21px;}
  .hero .hero-promise{font-size:17px;}
}

/* Hero: ticked list sits right under the Rs 0 line, then the learn link */
.hero .hero-sub + .hero-proof{margin-top:16px; padding-top:0; border-top:0;}
.hero .hero-proof + .hero-learn-wrap{margin-top:26px;}
/* 'Try Waggle for a month' now closes the How Waggle Works story */
.wg-try{
  margin:22px 0 0; padding:14px 18px; border-radius:14px;
  background:var(--gold-soft); border-left:3px solid var(--gold);
  font-size:15.5px; line-height:1.55; color:var(--text);
}
.wg-try strong{color:var(--gold); font-weight:700;}

/* Hero label in the card's yellow */
.hero .hero-title-kicker{background:transparent; border:0; box-shadow:none; padding:0; gap:10px; color:var(--gold); letter-spacing:0.12em;}
.hero .hero-title-kicker::before{display:block; width:22px; height:3px; border-radius:2px; background:var(--sun-deep);}

/* Lemon-yellow accents (~15%): section labels, hero glow, the Waggle trial note */
.vertical-label{background:transparent !important; color:var(--gold) !important; padding:0 !important; border-radius:0; font-weight:600; letter-spacing:0.14em; gap:10px; margin-bottom:20px;}
.vertical-label::before{content:""; width:22px; height:3px; border-radius:2px; background:var(--sun-deep); flex-shrink:0;}
.hero::before{background:radial-gradient(circle, var(--sun-soft) 0%, transparent 70%) !important; opacity:1;}
.wg-try{background:var(--sun-soft); border-left-color:var(--sun-deep);}
.wg-try strong{color:var(--text);}

/* ============================================================================
   PATCHES — style.css is desktop-first and off-limits, so these re-state a few
   of its defaults at phone size. Each one is a real mobile defect, not taste.
   ============================================================================ */

/* 1. Section rhythm: style.css jumps 100px -> 68px only below 640px, leaving
      tablets at desktop spacing. Ramp it instead. */
section{padding:60px 0;}
/* 2. Sticky nav is ~82px tall on a phone and ~104px on desktop, but style.css
      sets scroll-margin-top:76px — so every in-page anchor landed underneath
      the nav. Clear the real height at each size. */
section{scroll-margin-top:57px;}
/* 3. .cta-band's own 110px padding (0,1,0) always beat `section` (0,0,1), so it
      never got the mobile reduction. */
.cta-band{padding:64px 0;}
/* 6. Footer columns: a 56px gap is most of a phone's width. */
.footer-links{gap:26px 30px;}
/* 7. Long unbroken strings (the contact address) overflowed at 320px. */
.footer-col a, .footer-bottom span{overflow-wrap:anywhere;}
/* 8. The menu button was a ~31px tap target. */
.nav-toggle{min-height:44px; min-width:44px; align-items:center; justify-content:center;}
/* 9. The slide-down nav panel used a 32px gutter while .wrap uses 20px here. */
@media (max-width:640px){
  .nav-links{padding-left:20px; padding-right:20px;}
}
@media (min-width:641px){
  section{padding:84px 0;}
  .cta-band{padding:88px 0;}
  .footer-links{gap:40px 44px;}
}
@media (min-width:901px){
  section{padding:100px 0; scroll-margin-top:23px;}
  .cta-band{padding:110px 0;}
  .footer-links{gap:56px;}
}

/* ---------- Problem, fit, what changes ---------- */
.hero-lede{max-width:46ch; margin:16px auto 14px; font-size:16px; line-height:1.6; color:var(--text-soft);}
@media (min-width:561px){ .hero-lede{font-size:17.5px;} }
@media (min-width:901px){ .hero-split .hero-lede{margin-left:0;} }
#problem .vz-step:last-child .vz-k{color:#B42318; background:#FDECEA;}
#problem .vz-step::after{display:none !important;}
#problem .vz-chain{gap:18px;}
.pb-signs{max-width:860px; margin:34px auto 0; padding:22px 24px; border-radius:var(--radius); background:var(--sun-soft); border-left:4px solid var(--sun-deep); text-align:left;}
.pb-signs-k{margin:0 0 10px; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--text);}
.pb-signs ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:8px 28px;}
.pb-signs li{position:relative; padding-left:22px; font-size:15px; line-height:1.5; color:var(--text);}
.pb-signs li::before{content:"\2713"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700;}
.sys-grid{list-style:none; margin:0 auto; padding:0; max-width:1100px; display:grid; grid-template-columns:1fr; gap:16px;}
.sys-card{background:var(--navy-0); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 22px; display:flex; flex-direction:column; gap:8px; text-align:left; border-top:4px solid var(--gold);}
.sys-card:nth-child(4){border-top-color:var(--sun-deep);}
.sys-k{font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold);}
.sys-card h3{font-family:'Source Serif 4', serif; font-size:19px; font-weight:600; line-height:1.3; margin:0;}
.sys-card p{margin:0; color:var(--text-soft); font-size:14.5px; line-height:1.55;}
.sys-steer{max-width:760px; margin:30px auto 0; padding:18px 22px; border-radius:var(--radius); background:var(--navy-0); border:1px solid var(--line-soft); text-align:center; font-size:16px; line-height:1.6; color:var(--text-soft);}
.sys-steer strong{color:var(--text);}
.fit-other{background:transparent; border-style:dashed; box-shadow:none;}
.fit-check{max-width:1060px; margin:28px auto 0; display:grid; grid-template-columns:1fr; gap:16px;}
.fit-col{background:var(--navy-0); border:1px solid var(--line-soft); border-radius:var(--radius); padding:22px 24px; text-align:left;}
.fit-col h3{font-family:'Source Serif 4', serif; font-size:18px; font-weight:600; margin:0 0 12px;}
.fit-col ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.fit-col li{position:relative; padding-left:24px; font-size:14.5px; line-height:1.5; color:var(--text-soft);}
.fit-yes li::before{content:"\2713"; position:absolute; left:0; color:#16733F; font-weight:700;}
.fit-no li::before{content:"\2013"; position:absolute; left:2px; color:var(--text-mute); font-weight:700;}
.fit-yes{border-top:4px solid #16733F;}
.fit-no{border-top:4px solid var(--navy-3);}
.bf-list{list-style:none; margin:0 auto; padding:0; max-width:900px; display:grid; gap:12px;}
.bf-list li{display:grid; grid-template-columns:1fr; gap:6px; padding:16px 20px; background:var(--navy-0); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow); text-align:left;}
.bf-was{font-size:14.5px; line-height:1.5; color:var(--text-mute);}
.bf-now{font-size:15px; line-height:1.5; color:var(--text); font-weight:600;}
.bf-arrow{display:none; color:var(--gold); font-weight:700;}
#changes .vz-src{margin-top:24px;}
@media (min-width:641px){
  .pb-signs ul{grid-template-columns:repeat(2, 1fr);}
  .fit-check{grid-template-columns:repeat(2, 1fr);}
  .bf-list li{grid-template-columns:1fr 28px 1fr; align-items:center; gap:14px;}
  .bf-arrow{display:block; text-align:center;}
}
@media (min-width:561px){ .sys-grid{grid-template-columns:repeat(2, 1fr);} }
@media (min-width:901px){
  .sys-grid{grid-template-columns:repeat(4, 1fr); gap:18px;}
  #fit .fit-grid{grid-template-columns:repeat(3, 1fr);}
}

/* ---------- Steering / Operations (2026-10-29) ---------- */
.sys-more{margin-top:auto; padding-top:6px; font-size:13.5px; font-weight:600; color:var(--gold); text-decoration:none;}
.sys-more:hover{text-decoration:underline;}
.st-grid{display:grid; grid-template-columns:1fr; gap:32px; align-items:center;}
.st-copy{text-align:left;}
.st-copy h2{font-size:clamp(26px, 3vw, 38px); line-height:1.16; font-weight:600; margin:0 0 14px;}
.st-shot a{display:block; cursor:zoom-in;}
.st-lede{margin:0 0 22px; font-size:16px; line-height:1.65; color:var(--text-soft);}
.st-steps{list-style:none; margin:0; padding:0; counter-reset:st; display:grid; gap:14px;}
.st-steps li{counter-increment:st; position:relative; padding-left:44px; display:flex; flex-direction:column; gap:3px;}
.st-steps li::before{content:counter(st); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; background:var(--gold); color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center;}
.st-steps b{font-size:16px; color:var(--text);}
.st-steps span{font-size:14.5px; line-height:1.55; color:var(--text-soft);}
.st-shot{margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 18px 46px rgba(15,45,90,0.16); background:#fff;}
.st-shot img{display:block; width:100%; height:auto;}
.st-shot figcaption{padding:10px 14px; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-mute); border-top:1px solid var(--line-soft); background:var(--navy-1);}
.st-rhythm{list-style:none; margin:36px auto 0; padding:0; max-width:1100px; display:grid; grid-template-columns:1fr; gap:14px;}
.st-rhythm li{background:var(--navy-0); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; display:flex; flex-direction:column; gap:4px; text-align:left;}
.st-when{font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold);}
.st-rhythm b{font-family:'Source Serif 4', serif; font-size:18px; font-weight:600; color:var(--text);}
.st-rhythm li span:last-child{font-size:14px; line-height:1.5; color:var(--text-soft);}
.st-quote{max-width:720px; margin:26px auto 0; padding:16px 22px; border-radius:var(--radius); background:var(--sun-soft); text-align:center; font-size:16px; line-height:1.6; color:var(--text-soft);}
.st-quote strong{color:var(--text);}
.op-grid{list-style:none; margin:0 auto; padding:0; max-width:1060px; display:grid; grid-template-columns:1fr; gap:12px;}
.op-grid li{background:var(--navy-0); border:1px solid var(--line-soft); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:3px; text-align:left;}
.op-grid b{font-size:15.5px; color:var(--text);}
.op-grid span{font-size:14px; color:var(--text-soft);}
@media (min-width:561px){ .op-grid{grid-template-columns:repeat(2, 1fr);} }
@media (min-width:901px){
  #system .sys-3{grid-template-columns:repeat(3, 1fr);}
  .st-grid{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:48px;}
  .st-rhythm{grid-template-columns:repeat(3, 1fr);}
  .op-grid{grid-template-columns:repeat(3, 1fr);}
}

/* ---------- Hero: Steering review-rhythm card (2026-10-29) ---------- */
.hero-steer{margin:0 auto; width:100%; max-width:470px; position:relative;}
.hs-card{background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 22px 50px rgba(15,45,90,0.14); padding:20px; text-align:left; font-family:'Inter', sans-serif; color:var(--text);}
.hs-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:14px;}
.hs-k{margin:0; font-family:'IBM Plex Mono', monospace; font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold);}
.hs-title{margin:3px 0 0; font-family:'Source Serif 4', serif; font-size:21px; font-weight:600; line-height:1.2;}
.hs-pill{flex-shrink:0; font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--navy-1); border:1px solid var(--line-soft); color:var(--text-soft);}
.hs-score{padding:12px 14px; border-radius:12px; background:var(--navy-1); margin-bottom:14px;}
.hs-score-row{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-soft);}
.hs-score-row b{margin-left:auto; font-family:'IBM Plex Mono', monospace; font-size:20px; color:var(--text);}
.hs-bar{height:6px; margin-top:9px; border-radius:6px; background:#fff; overflow:hidden;}
.hs-bar i{display:block; height:100%; border-radius:6px; background:var(--gold);}
.hs-chip{display:inline-block; font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; white-space:nowrap;}
.hs-amber{background:#FBF1E1; color:#865606;}
.hs-green{background:#E7F5EC; color:#16733F;}
.hs-grey{background:#EEF0F3; color:#4F596A;}
.hs-cal{display:grid; grid-template-columns:repeat(5, 1fr); gap:5px; margin-bottom:14px;}
.hs-dow{font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-mute); text-align:center; padding-bottom:2px;}
.hs-day{display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0 7px; border-radius:8px; border:1px solid var(--line-soft); background:#fff;}
.hs-day b{font-size:12px; font-weight:600; color:var(--text);}
.hs-today{border-color:var(--gold); box-shadow:inset 0 2px 0 var(--gold);}
.hs-marks{display:flex; gap:3px; height:8px; align-items:center;}
.hs-m{display:block; width:7px; height:7px; border-radius:50%;}
.hs-d{background:#3BA88F;}
.hs-t{background:var(--gold); width:12px; border-radius:4px;}
.hs-s{background:#172856; width:12px; border-radius:4px;}
.hs-list{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.hs-list li{display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--line-soft); border-radius:10px;}
.hs-tag{font-family:'IBM Plex Mono', monospace; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; text-align:center; padding:4px 0; border-radius:6px;}
.hs-tag-d{background:#E0F1EE; color:#1A6359;}
.hs-tag-t{background:var(--navy-2); color:var(--gold);}
.hs-tag-s{background:#172856; color:#fff;}
.hs-what{display:flex; flex-direction:column; min-width:0;}
.hs-what b{font-size:13.5px; font-weight:600;}
.hs-what small{font-size:11.5px; color:var(--text-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hs-foot{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line-soft); font-size:13px; line-height:1.5; color:var(--text-soft);}
.hs-foot b{color:var(--text);}
.hs-cap{margin-top:10px; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-mute);}
@media (max-width:420px){ .hs-list li{grid-template-columns:54px minmax(0,1fr);} .hs-list .hs-chip{grid-column:2; justify-self:start;} }
@media (min-width:901px){
  .hero-inner.hero-split{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); align-items:start;}
  .hero-split .hero-copy{padding-top:4px;}
  .hero-split .hero .hero-title-kicker, .hero-split .hero-title-kicker{margin-left:0 !important;}
}
/* The kicker sits inside the h1: as inline content it inherited the headline's
   tall line box (~50px of empty space above it). Make it its own block line. */
.hero .hero-title-kicker{display:flex !important; width:fit-content; margin-left:auto; margin-right:auto; line-height:1.3;}
@media (min-width:901px){
  .hero-split .hero-title-kicker{margin-left:0;}
  .hero-steer{margin:0 0 0 auto;}
}
/* Waggle mascot, now in Part 3 above the chat */
.wg-side{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0;}
.wg-side .wg-chat{width:100%;}
.wg-mascot{width:min(44vw, 180px) !important; margin:0 auto 6px !important;}
@media (min-width:901px){ .wg-mascot{width:190px !important; transform:translateX(-8.7%) !important;} .wg-mascot .waggle-name{font-size:24px;} }

/* ---------- Hero: 3-in-1 strip (2026-10-29) ---------- */
.h3{display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:6px; margin:4px auto 20px; max-width:560px;}
.h3-badge{flex:0 0 100%; align-self:center; text-align:center; margin:0 0 4px;}
.h3-badge span{display:inline-block; padding:4px 12px; border-radius:999px; background:var(--sun); color:var(--text); font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;}
.h3-item{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:1px; padding:9px 10px; border-radius:12px; background:#fff; border:1px solid var(--line); text-decoration:none; text-align:center; transition:border-color .15s, box-shadow .15s;}
.h3-item:hover{border-color:var(--gold); box-shadow:0 6px 18px rgba(35,80,201,0.12);}
.h3-item b{font-size:14.5px; font-weight:700; color:var(--text);}
.h3-item small{font-size:11.5px; line-height:1.3; color:var(--text-mute);}
@media (min-width:901px){ .h3-item small{white-space:nowrap;} }
.h3-plus{align-self:center; font-size:18px; font-weight:700; color:var(--gold);}
@media (min-width:561px){ .h3-item b{font-size:15.5px;} .h3-item small{font-size:12.5px;} }
@media (min-width:901px){
  .hero-split .h3{margin-left:0; justify-content:flex-start; flex-wrap:nowrap; max-width:620px; gap:8px;}
  .hero-split .h3-badge{flex:0 0 auto; margin:0 4px 0 0; align-self:center;}
  .h3-item{flex:1 1 auto; text-align:left; padding:10px 14px;}
}

/* ---------- Growth-arrow label mark + 3-in-1 kicker pill (2026-10-29) ---------- */
.vertical-label::before{content:""; width:18px; height:18px; border-radius:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EEB51E' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14.5 7H21v6.5'/%3E%3C/svg%3E") center/contain no-repeat !important; flex-shrink:0;}
.hero .hero-title-kicker::before{display:none !important;}
.hero .hero-title-kicker{gap:10px !important; align-items:center;}
.hk-pill{display:inline-block; padding:4px 12px; border-radius:999px; background:var(--sun); color:var(--text); font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:700; letter-spacing:0.1em;}

/* ---------- Hero: "From hub to helm" animated diagram (2026-10-29) ---------- */
.hero-hh{margin:0 auto; width:100%; max-width:500px; text-align:center;}
.hh-svg{display:block; width:100%; height:auto; overflow:visible; font-family:'Inter', sans-serif;}
.hh-line{stroke:#E0832B; stroke-width:2; stroke-dasharray:5 6; fill:none; animation:hh-flow 1.1s linear infinite; transition:stroke .7s, opacity .7s;}
@keyframes hh-flow{to{stroke-dashoffset:-22;}}
.hh-node rect{fill:#fff; stroke:rgba(23,40,86,0.16); stroke-width:1.2; filter:drop-shadow(0 4px 10px rgba(15,45,90,0.08));}
.hh-node > text{font-size:13.5px; font-weight:600; fill:#172856; text-anchor:middle;}
.hh-badge{transition:opacity .5s, transform .5s;}
.hh-warn circle{fill:#E0832B;} .hh-warn text{fill:#fff; font-size:12px; font-weight:800; text-anchor:middle;}
.hh-ok circle{fill:#16733F;} .hh-ok path{fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.hh-q rect{fill:#FFF3E3; stroke:#F2C28B;} .hh-q text{font-size:11.5px; font-weight:600; fill:#8A4B0F; text-anchor:middle;}
.hh-q{transition:opacity .5s;}
.hh-core{opacity:0; transform:scale(.6); transform-box:view-box; transform-origin:240px 250px; transition:opacity .7s .25s, transform .7s .25s;}
.hh-core > circle{fill:#fff; stroke:#2350C9; stroke-width:2.5; filter:drop-shadow(0 10px 24px rgba(35,80,201,0.22));}
.hh-core-name{font-family:'Source Serif 4', serif; font-size:17px; font-weight:700; fill:#172856; text-anchor:middle;}
.hh-core-row text{font-size:12px; font-weight:600; fill:#3C4E63;}
.hh-dir{opacity:0; transition:opacity .6s .6s;}
.hh-dir line{stroke:#EEB51E; stroke-width:3; stroke-linecap:round;}
.hh-dir text{font-size:12px; font-weight:700; fill:#172856;}
.hh-you{transform-box:view-box; transform-origin:240px 250px; transition:transform .8s cubic-bezier(.5,0,.2,1);}
.hh-you-dot{fill:#172856;}
.hh-you text{font-family:'Source Serif 4', serif; font-size:19px; font-weight:700; fill:#fff; text-anchor:middle;}
.hh-pulse{fill:none; stroke:#E0832B; stroke-width:2; transform-box:fill-box; transform-origin:center; animation:hh-pulse 1.8s ease-out infinite;}
.hh-pulse2{animation-delay:.9s;}
@keyframes hh-pulse{from{transform:scale(1); opacity:.7;} to{transform:scale(1.6); opacity:0;}}
/* state B: the system runs, you steer */
.hero-hh[data-state="b"] .hh-line{stroke:#2350C9; opacity:.55;}
.hero-hh[data-state="b"] .hh-warn{opacity:0;}
.hero-hh .hh-ok{opacity:0;}
.hero-hh[data-state="b"] .hh-ok{opacity:1;}
.hero-hh[data-state="b"] .hh-q{opacity:0;}
.hero-hh[data-state="b"] .hh-core{opacity:1; transform:scale(1);}
.hero-hh[data-state="b"] .hh-dir{opacity:1;}
.hero-hh[data-state="b"] .hh-you{transform:translateY(-176px) scale(.74);}
.hero-hh[data-state="b"] .hh-pulse{display:none;}
.hh-cap{position:relative; min-height:3em; margin:6px auto 0; max-width:40ch; font-size:15px; line-height:1.5; color:var(--text-soft);}
.hh-cap b{color:var(--text);}
.hh-cap span{position:absolute; inset:0; transition:opacity .5s;}
.hh-cap-b{opacity:0;}
.hero-hh[data-state="b"] .hh-cap-a{opacity:0;}
.hero-hh[data-state="b"] .hh-cap-b{opacity:1;}
.hh-toggle{display:inline-flex; gap:4px; margin-top:12px; padding:4px; border-radius:999px; background:#fff; border:1px solid var(--line);}
.hh-toggle button{border:0; background:transparent; min-height:36px; padding:0 16px; border-radius:999px; font:600 13px 'Inter', sans-serif; color:var(--text-soft); cursor:pointer;}
.hh-toggle button[aria-pressed="true"]{background:var(--text); color:#fff;}
.hh-toggle button[data-hh="b"][aria-pressed="true"]{background:var(--gold);}
@media (prefers-reduced-motion:reduce){
  .hh-line, .hh-pulse{animation:none;}
  .hh-core, .hh-dir, .hh-you, .hh-q, .hh-badge, .hh-cap span{transition:none;}
}
@media (min-width:901px){ .hero-hh{margin:0 0 0 auto;} }

/* ---------- Hero: auto-playing hub-to-helm animation (2026-10-29) ---------- */
/* framed as a card so the video's flat background reads as intentional against the hero glow */
.hero-anim{margin:0 auto; width:100%; max-width:470px; border-radius:20px; overflow:hidden; background:#F1F6FF; border:1px solid var(--line); box-shadow:0 22px 50px rgba(15,45,90,0.12);}
.hero-anim-vid, .hero-anim img{display:block; width:100%; height:auto;}
@media (min-width:901px){ .hero-anim{margin:0 0 0 auto;} }

/* ---------- B2B hub: fit check + partners (2026-10-29) ---------- */
.fit-cta{margin:22px 0 0; text-align:center;}
.fit-cta a{font-weight:600; font-size:15.5px; color:var(--gold); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;}
.pt-who{list-style:none; margin:0 auto 26px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:900px;}
.pt-who li{padding:7px 14px; border-radius:999px; background:var(--navy-1); border:1px solid var(--line-soft); font-size:13.5px; font-weight:600; color:var(--text);}
.pt-steps{list-style:none; margin:0 auto; padding:0; max-width:1060px; display:grid; grid-template-columns:1fr; gap:14px;}
.pt-steps li{display:flex; gap:14px; align-items:flex-start; background:var(--navy-0); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; text-align:left;}
.pt-n{flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--gold); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center;}
.pt-steps h3{font-family:'Source Serif 4', serif; font-size:18px; font-weight:600; margin:2px 0 6px;}
.pt-steps p{margin:0; font-size:14.5px; line-height:1.55; color:var(--text-soft);}
.pt-listen{max-width:860px; margin:24px auto 0; padding:14px 20px; border-radius:var(--radius); background:var(--sun-soft); text-align:center; font-size:14.5px; line-height:1.6; color:var(--text-soft);}
.pt-listen b{color:var(--text);}
.pt-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:24px;}
.pt-actions .btn svg, .fc-send .btn svg{width:18px; height:18px; margin-right:8px; vertical-align:-3px;}
.fc-grid{display:grid; grid-template-columns:1fr; gap:20px; max-width:1060px; margin:0 auto; text-align:left;}
.fc, .fc-side{background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 14px 34px rgba(15,45,90,0.10); padding:22px;}
.fc-k{margin:0 0 14px; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold);}
.fc-fields{display:grid; grid-template-columns:1fr; gap:12px;}
.fc-f{display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600; color:var(--text);}
.fc-f small{font-weight:400; color:var(--text-mute);}
.fc-f input, .fc-f select, .fc-f textarea{font:400 15px 'Inter', sans-serif; color:var(--text); background:#fff; border:1px solid rgba(23,40,86,0.22); border-radius:10px; padding:10px 12px; min-height:44px; box-sizing:border-box; width:100%;}
.fc-f textarea{resize:vertical; min-height:64px;}
.fc-f input:focus, .fc-f select:focus, .fc-f textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);}
.fc-err{margin:12px 0 0; font-size:13.5px; color:#B42318;}
.fc-go{margin-top:16px;}
.fc-result{margin-top:18px; padding:16px 18px; border-radius:14px; background:var(--navy-1); border:1px solid var(--line-soft);}
.fc-verdict{margin:0 0 6px; font-family:'Source Serif 4', serif; font-size:19px; font-weight:600; color:var(--text);}
.fc-verdict.good{color:#16733F;} .fc-verdict.early{color:#865606;}
.fc-why{margin:0 0 14px; font-size:14.5px; line-height:1.55; color:var(--text-soft);}
.fc-send{display:flex; flex-wrap:wrap; gap:10px;}
.fc-fine{margin:12px 0 0 !important; font-size:12px !important; color:var(--text-mute) !important; max-width:none !important;}
.fc-side{display:flex; flex-direction:column; gap:6px;}
.fc-side .qr-cta{margin:0; max-width:none;}
.fc-mail{margin:10px 0 0 !important; font-size:14px !important; max-width:none !important;}
.fc-mail a{color:var(--gold); font-weight:600;}
#contact .cta-note{margin-top:24px;}
/* .cta-band p centres and indents every paragraph; the form cards are left-aligned */
#contact .fc p, #contact .fc-side p{max-width:none; text-align:left; margin:0 0 10px; font-size:inherit;}
#contact .fc-k{margin-bottom:14px; font-size:11px;}
#contact .fc-verdict{margin-bottom:6px; font-size:19px;}
#contact .fc-why{margin-bottom:14px; font-size:14.5px;}
#contact .fc-err{margin-top:12px; font-size:13.5px;}
#contact .fc-fine{margin:12px 0 0; font-size:12px;}
#contact .fc-mail{margin:10px 0 0; font-size:14px;}
@media (min-width:641px){ .fc-fields{grid-template-columns:repeat(2, 1fr);} .fc-wide{grid-column:1 / -1;} }
@media (min-width:901px){
  .fc-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,0.75fr); align-items:start;}
  .pt-steps{grid-template-columns:repeat(3, 1fr);}
  .fc{padding:28px;}
}

/* ---------- Products ---------- */
.pd-path{list-style:none; margin:0 auto 34px; padding:0; max-width:900px; display:grid; grid-template-columns:1fr; gap:10px;}
.pd-path a{display:flex; align-items:center; gap:12px; height:100%; padding:12px 16px; border-radius:14px; background:var(--navy-0); border:1px solid var(--line); text-decoration:none; color:var(--text); transition:border-color .15s, box-shadow .15s;}
.pd-path a:hover{border-color:var(--gold); box-shadow:0 6px 18px rgba(35,80,201,0.12);}
.pd-path a[aria-current="page"]{background:var(--gold); border-color:var(--gold); color:#fff;}
.pd-path a[aria-current="page"] small{color:#fff;}
.pd-path i{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700; font-size:14px; background:var(--sun); color:var(--text);}
.pd-path span{display:flex; flex-direction:column; line-height:1.3;}
.pd-path b{font-size:15.5px;}
.pd-path small{font-size:12.5px; color:var(--text-mute);}
.pd-list{list-style:none; margin:0 auto; padding:0; max-width:1100px; display:grid; gap:22px;}
.pd-card{display:grid; grid-template-columns:1fr; gap:24px; align-items:center; padding:24px 20px; background:var(--navy-0); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); text-align:left; scroll-margin-top:91px;}
.pd-tag{display:inline-block; padding:4px 11px; border-radius:999px; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; background:var(--gold-soft); color:var(--gold);}
.pd-tag.go{background:var(--sun); color:var(--text);}
.pd-card h3{margin:12px 0 6px; font-family:'Source Serif 4', serif; font-size:clamp(24px, 2.4vw, 30px); line-height:1.2; font-weight:600;}
.pd-what{margin:0 0 12px; font-size:15.5px; font-weight:600; color:var(--text);}
.pd-fix{margin:0 0 12px; font-size:15px; line-height:1.6; color:var(--text-soft);}
.pd-fix em{font-style:normal; font-weight:600; color:var(--text);}
.pd-pts{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:7px;}
.pd-pts li{position:relative; padding-left:24px; font-size:14.5px; line-height:1.5; color:var(--text-soft);}
.pd-pts li::before{content:"\2713"; position:absolute; left:0; color:#16733F; font-weight:700;}
.pd-foot{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;}
.pd-price{font-size:14px; font-weight:600; color:var(--text);}
.pd-more{font-weight:600; font-size:15px; color:var(--gold); text-decoration:none; border-bottom:1px solid currentColor;}
.pd-vis{margin:0; min-width:0;}
.pd-vis.st-shot{box-shadow:none;}
.pd-mods{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;}
.pd-mods li{padding:12px 12px; border-radius:12px; background:var(--navy-1); font-size:14px; font-weight:600; color:var(--text);}
.pd-ask{display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; padding:14px; border-radius:14px; background:var(--sun-soft);}
.pd-ask img{width:96px; height:auto; display:block;}
.pd-ask p{margin:0; font-size:15px; line-height:1.5; color:var(--text);}
.pd-ask b{display:block; margin-bottom:4px; font-size:12px; font-family:'IBM Plex Mono', monospace; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-mute);}
@media (min-width:641px){ .pd-path{grid-template-columns:repeat(3, 1fr);} }
@media (min-width:901px){
  .pd-card{grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:36px; padding:32px 34px;}
}

/* Comparison table: rows stack into labelled blocks on a phone */
.cmp{max-width:1100px; margin:0 auto;}
.cmp table{width:100%; border-collapse:separate; border-spacing:0; background:var(--navy-0); border:1px solid var(--line); border-radius:16px; overflow:hidden; font-size:14.5px; line-height:1.5; text-align:left;}
.cmp th, .cmp td{padding:14px 16px; vertical-align:top; border-bottom:1px solid var(--line-soft); color:var(--text-soft);}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td{border-bottom:0;}
.cmp thead th{background:var(--navy-1); color:var(--text); font-family:'Source Serif 4', serif; font-size:17px; font-weight:600;}
.cmp thead a{color:inherit; text-decoration:none; border-bottom:1px solid var(--gold);}
.cmp tbody th{font-weight:600; color:var(--text); width:17%;}
.cmp .cmp-best td{background:var(--sun-soft); color:var(--text); font-weight:500;}
.cmp .cmp-best th{background:var(--sun-soft);}
@media (max-width:760px){
  .cmp thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  .cmp table, .cmp tbody, .cmp tr, .cmp th, .cmp td{display:block; width:auto;}
  .cmp tbody tr{border-bottom:1px solid var(--line);}
  .cmp tbody tr:last-child{border-bottom:0;}
  .cmp tbody th{width:auto; padding:12px 16px 4px; border:0; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-mute);}
  .cmp td{padding:4px 16px; border:0;}
  .cmp td:last-child{padding-bottom:12px;}
  .cmp td::before{content:attr(data-p) ": "; font-weight:600; color:var(--text);}
}

/* Which product is right for you */
.rt-grid{list-style:none; margin:0 auto; padding:0; max-width:1100px; display:grid; grid-template-columns:1fr; gap:16px;}
.rt-card{display:flex; flex-direction:column; gap:10px; padding:22px 20px; background:var(--navy-0); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); text-align:left;}
.rt-card.first{border-color:var(--sun-deep); box-shadow:0 0 0 2px var(--sun);}
.rt-card h3{margin:0; font-family:'Source Serif 4', serif; font-size:21px; font-weight:600;}
.rt-card p{margin:0; font-size:14.5px; line-height:1.55; color:var(--text-soft);}
.rt-card ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.rt-card li{font-size:15px; line-height:1.5; color:var(--text); font-style:italic;}
.rt-card .pd-more{margin-top:auto; align-self:flex-start;}
.rt-note{max-width:720px; margin:24px auto 0; text-align:center; font-size:16px; line-height:1.6; color:var(--text-soft);}
.rt-note strong{color:var(--text);}
@media (min-width:901px){ .rt-grid{grid-template-columns:repeat(3, 1fr);} }

/* Product pages */
.pp-hero-vis{margin:0; min-width:0;}
.pp-mods{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; list-style:none; margin:0; padding:18px; border-radius:20px; background:var(--navy-0); border:1px solid var(--line); box-shadow:0 22px 50px rgba(15,45,90,0.12);}
.pp-mods li{padding:18px 14px; border-radius:12px; background:var(--navy-1); font-weight:600; font-size:15px; color:var(--text);}
.pp-cols{list-style:none; margin:0 auto; padding:0; max-width:1100px; display:grid; grid-template-columns:1fr; gap:16px;}
.pp-cols > li{padding:20px; background:var(--navy-0); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow); text-align:left;}
.pp-cols h3{margin:0 0 8px; font-family:'Source Serif 4', serif; font-size:20px; font-weight:600;}
.pp-cols p{margin:0; font-size:14.5px; line-height:1.55; color:var(--text-soft);}
.pp-next{max-width:900px; margin:0 auto;}
.st-grid.solo{grid-template-columns:1fr; max-width:760px;}
@media (min-width:901px){ .pp-cols{grid-template-columns:repeat(3, 1fr);} .pp-cols.two{grid-template-columns:repeat(2, 1fr); max-width:880px;} }

.nav-drop-k{display:block; margin:6px 0 0; padding:9px 12px 3px; border-top:1px solid var(--line-soft); font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-mute);}

/* What business owners told us */
.pb-heard{max-width:900px; margin:40px auto 0; text-align:left;}
.pb-heard-k{margin:0 0 14px; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mute);}
.pb-heard ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:14px;}
.pb-heard li{display:flex; flex-direction:column; gap:8px; padding:20px; background:var(--navy-0); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow);}
.pb-who{font-size:13px; font-weight:600; color:var(--gold);}
.pb-say{margin:0; font-family:'Source Serif 4', serif; font-size:18px; line-height:1.4; font-weight:600; color:var(--text);}
.pb-gap{margin:auto 0 0; padding-top:8px; font-size:14.5px; line-height:1.5; color:var(--text-soft);}
@media (min-width:761px){ .pb-heard ul{grid-template-columns:repeat(2, 1fr);} }

/* Waggle Bees */
.bz-band{background:linear-gradient(180deg, #FFFEF6 0%, #FFFADF 100%); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); color:var(--text);}
.bz-k{display:inline-block; padding:5px 13px; border-radius:999px; background:#FFEB5A; color:#172856; font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;}
.bz-band .section-head h2{margin-top:14px;}
.bz-band .section-head h2 em{font-style:normal; color:var(--gold);}
.bz-earn{list-style:none; margin:0 auto; padding:0; max-width:1100px; display:grid; grid-template-columns:1fr; gap:14px; text-align:left;}
.bz-earn li{display:flex; flex-direction:column; gap:6px; padding:20px; border-radius:var(--radius); background:var(--navy-0); border:1px solid var(--line-soft); box-shadow:var(--shadow);}
.bz-earn b{font-family:'Source Serif 4', serif; font-size:19px; font-weight:600; color:var(--text);}
.bz-earn span{font-size:14.5px; line-height:1.5; color:var(--text-soft);}
.bz-sub{margin:34px 0 12px; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mute);}
.bz-fns{list-style:none; margin:0 auto; padding:0; max-width:900px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.bz-fns li{padding:9px 15px; border-radius:999px; background:var(--navy-0); border:1px solid var(--line); color:var(--text); font-size:14.5px; font-weight:600;}
.bz-foot{max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.5; color:var(--text-soft);}
.bz-more{margin:14px 0 0; text-align:center;}
.bz-more a{font-weight:600; font-size:16px; color:var(--gold); text-decoration:none; border-bottom:1px solid currentColor;}
.bz-roles{margin-bottom:16px;}
.bz-cards{list-style:none; margin:0 auto; padding:0; max-width:1100px; display:grid; grid-template-columns:1fr; gap:14px; text-align:left;}
.bz-cards li{padding:18px; background:var(--navy-0); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow);}
.bz-cards h3{margin:0 0 6px; font-family:'Source Serif 4', serif; font-size:18px; font-weight:600;}
.bz-cards p{margin:0; font-size:14px; line-height:1.5; color:var(--text-soft);}
@media (min-width:641px){ .bz-earn, .bz-cards{grid-template-columns:repeat(2, 1fr);} }
@media (min-width:1001px){ .bz-earn, .bz-cards{grid-template-columns:repeat(4, 1fr);} }

/* ---------- Problem: vision without systems / systems without vision (2026-11-02) ---------- */
.pb-two{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1040px; margin:8px auto 0;}
.pb-side{background:var(--navy-0,#fff); border:1px solid var(--line-soft); border-radius:16px; box-shadow:var(--shadow); padding:24px 24px 20px;}
.pb-side-k{display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8A4B0F; background:#FFF3E3; border:1px solid #F2C28B; border-radius:100px; padding:4px 10px;}
.pb-side h3{font-size:21px; margin:14px 0 12px;}
.pb-side ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.pb-side li{font-size:14.5px; line-height:1.55; color:var(--text-soft); padding-left:18px; position:relative;}
.pb-side li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:#E0832B;}
.pb-side li b{color:var(--text); font-weight:600;}
.pb-side-end{margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line-soft); font-weight:600; color:var(--text);}
.pb-balance{max-width:1040px; margin:28px auto 0; padding:26px 28px; border-radius:16px;
  background:linear-gradient(180deg,#FFFEF6 0%,#FFFADF 100%); border:1px solid #F3E7A6;}
.pb-balance p.pb-balance-k{font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin:0 0 10px;}
.pb-balance p{margin:0; font-size:16px; line-height:1.65; color:var(--text-soft); max-width:78ch;}
.pb-balance p strong{color:var(--text);}
.pb-balance-roles{list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.pb-balance-roles li{background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.5; color:var(--text-soft);}
.pb-balance-roles b{display:block; color:var(--text); font-size:15px; margin-bottom:2px;}
.pb-balance .pd-more{display:inline-block; margin-top:16px;}
@media (max-width:820px){
  .pb-two{grid-template-columns:1fr;}
  .pb-balance-roles{grid-template-columns:1fr;}
  .pb-balance{padding:22px 18px;}
}
/* ---------- Nav at laptop widths: keep every item on one line (2026-11-02) ---------- */
@media (min-width:901px) and (max-width:1240px){
  .nav-inner{padding-left:20px; padding-right:20px;}
  .nav-links{gap:16px; font-size:11.5px; letter-spacing:.04em;}
  .nav-links a, .nav-dropdown-toggle{white-space:nowrap; letter-spacing:.04em;}
  .nav-links a.nav-cta{padding:9px 14px;}
}
/* ---------- Business Suite hero: screenshot + module strip, centred (2026-11-02) ---------- */
.sb-vis{display:flex; flex-direction:column; gap:14px; align-self:center; width:100%;}
.sb-mods{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; list-style:none; margin:0; padding:0;}
.sb-mods li{display:flex; align-items:center; justify-content:center; text-align:center; min-height:46px; padding:8px 10px; border-radius:12px; background:#fff; border:1px solid var(--line-soft); box-shadow:0 6px 16px rgba(15,45,90,.06); font-size:13.5px; font-weight:600; line-height:1.3; color:var(--text);}
@media (max-width:520px){ .sb-mods{grid-template-columns:repeat(2,1fr);} }
/* ---------- Perch hero: screenshot + steps + why note (2026-11-02) ---------- */
.pc-flow{display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0; counter-reset:pc;}
.pc-flow li{flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 10px; border-radius:12px; background:#fff; border:1px solid var(--line-soft); box-shadow:0 6px 16px rgba(15,45,90,.06); font-size:13.5px; font-weight:600; color:var(--text); text-align:center; white-space:nowrap; counter-increment:pc;}
.pc-flow li::before{content:counter(pc); display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--gold); color:#fff; font-size:11px; flex-shrink:0;}
.sb-vis .pc-why{margin:0; max-width:none; padding:14px 16px; border-radius:12px; background:linear-gradient(180deg,#FFFEF6 0%,#FFFADF 100%); border:1px solid #F3E7A6;}
@media (min-width:521px) and (max-width:1240px){ .pc-flow{gap:6px;} .pc-flow li{font-size:12.5px; padding:8px 6px; gap:5px;} .pc-flow li::before{width:18px; height:18px;} }
@media (max-width:520px){ .pc-flow{flex-wrap:wrap;} .pc-flow li{flex:1 1 calc(50% - 8px);} }
/* ---------- Menu jumps land like the hero: the section label sits ~32px under the nav ----------
   offset = nav height (85 phone / 91 desktop) + 32 - the section's top padding (60 / 84 / 100; cta 64 / 88 / 110) */
.cta-band{scroll-margin-top:53px;}
@media (min-width:641px) and (max-width:900px){ section{scroll-margin-top:33px;} .cta-band{scroll-margin-top:29px;} }
@media (min-width:901px){ .cta-band{scroll-margin-top:13px;} }
/* ---------- Waggle hero: mascot + Bees at work (2026-11-02) ---------- */
.wg-hero-vis{display:flex; flex-direction:column; align-items:center; gap:14px; width:100%;}
.wg-hero-vis .wg-mascot{width:150px !important; transform:none !important; margin:0 auto !important;}
.wg-hero-vis .wg-mascot .waggle-name{font-size:21px;}
.wg-team{width:100%; max-width:420px; background:#fff; border:1px solid var(--line-soft); border-radius:16px; box-shadow:0 14px 36px rgba(15,45,90,.10); padding:16px 18px; text-align:left;}
.wg-team-k{display:flex; justify-content:space-between; align-items:center; margin:0 0 8px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);}
.wg-team-k span{font-weight:500; color:var(--text-mute); letter-spacing:.06em;}
.wg-team ul{list-style:none; margin:0; padding:0;}
.wg-team li{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 0; border-top:1px solid var(--line-soft);}
.wg-team li b{font-size:14.5px; color:var(--text);}
.wg-role{justify-self:end; align-self:center; font-size:11px; font-weight:600; padding:2px 9px; border-radius:100px; background:var(--gold-soft); color:var(--gold);}
.wg-role.wk{background:#FFF6C9; color:#7A5B00;}
.wg-do{grid-column:1 / -1; font-size:13.5px; line-height:1.45; color:var(--text-soft);}
.wg-team-f{margin:8px 0 0; padding-top:10px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--text-soft);}
.st-why{margin:14px 0 0; font-size:14.5px; line-height:1.6; color:var(--text-soft); max-width:56ch;}
.st-why b{color:var(--text);}