/* parts/shell.css */
/* Shell: page, stage, nav, center copy, arrows, glow, trade bar. Stage coords = reference.png px. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;background:#fff;color:#050814;-webkit-font-smoothing:antialiased;font-optical-sizing:none;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;overflow-x:hidden}
a{text-decoration:none;color:inherit}

.hero{position:relative;background:#fff;width:100%;overflow:hidden}
.stage-wrap{position:relative;width:100%;height:941px;overflow:hidden}
.stage{position:relative;width:1672px;height:941px;transform-origin:0 0;background:#fefefe}

/* ---------- background glow (halos behind the four cards) ---------- */
.bg-glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.bg-glow .glow{position:absolute;display:block;border-radius:60px;background:rgba(74,140,246,.17);filter:blur(42px)}
.glow-rankings{left:122px;top:146px;width:414px;height:284px;transform:rotate(-4deg);opacity:.6}
.glow-leads{left:100px;top:488px;width:450px;height:352px;transform:rotate(-4deg);opacity:1.15}
.glow-reviews{left:1164px;top:128px;width:420px;height:306px;transform:rotate(4deg)}
.glow-profile{left:1178px;top:484px;width:424px;height:376px;transform:rotate(4deg);opacity:.85}

/* ---------- arrows ---------- */
.arrows{position:absolute;left:0;top:0;width:1672px;height:941px;z-index:1;pointer-events:none;overflow:visible}

/* ---------- nav ---------- */
.nav{position:absolute;left:0;top:0;width:1672px;height:96px;z-index:3}
.brand{position:absolute;left:0;top:0;display:block}
.brand-mark{position:absolute;left:136px;top:24.1px;width:63.25px;height:46px}
.brand-mark img{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:50% 44%}
.brand-word{position:absolute;left:209px;top:31.7px;width:189px;height:34px;display:block}
.nav-links{position:absolute;top:37.2px;right:674.4px;display:flex;gap:56px}
.nl{position:relative;font-size:17px;line-height:20px;font-weight:500;color:#2b3b62;white-space:nowrap}
.nl{letter-spacing:-.5px}

.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.btn .arr{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn-dark{background:#020f21;color:#fff}
.nav-cta{position:absolute;left:1336px;top:20px;width:201px;height:55px;border-radius:12px;box-shadow:0 0 0 1px rgba(2,15,33,.05),0 6px 16px rgba(2,15,33,.12);font-size:19.6px;font-weight:600;letter-spacing:-.01em;padding:0 0 0 2px}
.nav-cta .arr{width:17px;height:13px;margin-left:15px}

/* ---------- center copy ---------- */
.stage > .center{position:absolute;left:0;top:0;width:1672px;height:0;z-index:2}
.headline{position:absolute;left:452px;top:311px;width:800px;margin:0;text-align:center;font-size:60.5px;line-height:72px;font-weight:800;letter-spacing:-3.7px;color:#05070f}
.hl-blue{color:#0860fa}
.hl-1{position:relative;left:-4.5px}.hl-2{position:relative;left:5px;top:-1px;letter-spacing:-4.1px}.hl-blue{letter-spacing:-4.1px}
/* desktop headline: Inter Display optical size + word gaps matched to reference.png (scoped so the <1200px layout is unchanged) */
@media (min-width: 1200px){.headline{font-variation-settings:"opsz" 32;word-spacing:7.5px}.hl-2{word-spacing:5px}.hl-blue{word-spacing:4px}}
.subhead{position:absolute;left:452px;top:471.5px;width:800px;margin:0;text-align:center;font-size:21px;line-height:32px;font-weight:400;color:#37486c}
.sl-1{letter-spacing:-.77px}.sl-2{letter-spacing:-.83px}.sl-3{letter-spacing:-.87px}
.ctas{position:absolute;left:0;top:0}
.cta-main{position:absolute;left:597px;top:606px;width:231px;height:64px;border-radius:11px;font-size:21px;font-weight:500;letter-spacing:-.51px;padding-left:3px;box-shadow:0 8px 18px rgba(2,15,33,.12)}
.cta-main .arr{width:18px;height:14px;margin-left:12px}
.cta-demo .cta-ph{width:18px;height:18px;margin-right:9px;fill:#0860fa;flex:none}
.cta-demo{position:absolute;left:849px;top:608px;width:258px;height:59px;border-radius:11px;border:1.6px solid #232a44;background:#fff;color:#0a0f1e;font-size:19px;font-weight:500;letter-spacing:-.7px;padding-top:2px}

/* ---------- trade bar (slow marquee; list lives in src.html "TRADES LIST") ---------- */
.trades{position:absolute;left:236px;top:860px;width:1200px;height:60px;z-index:2}
.trades-viewport{height:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.trades-track{display:flex;width:max-content;height:100%}
.trades-row{display:flex;align-items:center;flex:none;margin:0;padding:0;list-style:none}
.trade{display:flex;align-items:center;flex:none;height:60px;padding-left:38px}
.trade::after{content:"";flex:none;width:1px;height:34px;margin-left:34px;background:#e6eaf1}
.trade .ti{flex:none;fill:#475776}
.trade span{position:relative;top:1px;margin-left:14px;font-size:16px;line-height:20px;font-weight:500;color:#475779;white-space:nowrap;letter-spacing:-.9px}
.fan .hub-gap,.ti .hub-gap{fill:#fff}
.ti .hub-dot{fill:#6a7a98}
.drop-hl{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round}
/* original icon-to-label gaps + tracking, measured from reference.png */
.t-hvac span{margin-left:13.6px;letter-spacing:-1.41px}
.t-plumb span{margin-left:17.4px;letter-spacing:-.84px}
.t-roof span{margin-left:14.4px;letter-spacing:-.85px}
.t-elec span{margin-left:15.4px;letter-spacing:-1px}
.t-remod span{margin-left:11.4px;letter-spacing:-.96px}
/* JS clones the row (aria-hidden) and sets --marquee-dur from row width at ~48px/s; -50% = exactly one row */
.trades.is-marquee .trades-track{animation:trades-marquee var(--marquee-dur,60s) linear infinite;will-change:transform}
@keyframes trades-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (hover:hover){.trades:hover .trades-track{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){
  .trades.is-marquee .trades-track{animation:none}
  .trades-row[aria-hidden]{display:none}
  .trades-viewport{-webkit-mask-image:linear-gradient(90deg,#000 89%,transparent 100%);mask-image:linear-gradient(90deg,#000 89%,transparent 100%)}
}

/* ---------- mobile + tablet (<1200px): normal flow ---------- */
@media (max-width: 1199px){
  .stage-wrap{height:auto;overflow:visible}
  .stage{width:auto;height:auto;transform:none!important;left:auto!important;display:flex;flex-direction:column;gap:22px;padding:18px 16px 36px;background:radial-gradient(120% 60% at 50% 0%,#eef4ff 0%,#fefefe 60%)}
  .bg-glow,.arrows{display:none}
  .nav{position:relative;width:auto;height:48px;display:flex;align-items:center;justify-content:space-between;order:0}
  .brand{position:relative;display:flex;align-items:center;gap:10px}
  .brand-mark{position:relative;left:auto;top:auto;width:44px;height:32px;flex:none}
  .brand-word{position:relative;left:auto;top:2px;width:133px;height:24px}
  .nav-links{display:none}
  .nav-cta{position:relative;left:auto;top:auto;width:auto;height:44px;padding:0 16px;border-radius:10px;font-size:15px}
  .nav-cta .arr{width:14px;height:11px;margin-left:10px}
  .stage > .center{position:relative;width:auto;height:auto;order:1;text-align:center;padding-top:14px}
  .hl-1,.hl-2{left:0;top:0;letter-spacing:inherit}
  .headline{position:relative;left:auto;top:auto;width:auto;font-size:clamp(30px,8.4vw,54px);line-height:1.12;letter-spacing:-.055em}
  .subhead{position:relative;left:auto;top:auto;width:auto;max-width:560px;margin:16px auto 0;font-size:17px;line-height:1.55}
  .subhead br{display:none}
  .hl-blue{margin-left:0;letter-spacing:inherit}
  .subhead [class^="sl-"],.nl,.trade span,.btn{letter-spacing:normal}
  .ctas{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
  .cta-main,.cta-demo{position:relative;left:auto;top:auto;width:auto;height:52px;padding:0 24px;font-size:17px;border-radius:10px}
  .card{order:2}
  .trades{position:relative;left:auto;top:auto;width:auto;height:auto;min-width:0;order:3;padding-top:8px}
  .trades-viewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
  .trade{height:48px;padding-left:22px}
  .trade::after{height:28px;margin-left:22px}
  .trade .ti{transform:scale(.85)}
  .trade span{top:0;margin-left:9px;font-size:15px}
}
@media (max-width: 1199px) and (prefers-reduced-motion:reduce){
  .trades-viewport{-webkit-mask-image:none;mask-image:none}
  .trades-track{width:auto}
  .trades-row{flex:1 1 100%;min-width:0;flex-wrap:wrap;justify-content:center;gap:14px 22px}
  .trade{height:auto;padding-left:0}
  .trade::after{display:none}
}

/* Mobile: cards keep their native desktop width (internals are px-positioned) and zoom down to fit */
@media (max-width: 1199px){
  .stage .card-rankings{width:440px!important}
  .stage .card-leads{width:435px!important}
  .stage .card-reviews{width:403px!important}
  .stage .card-profile{width:414px!important}
  .stage .card{max-width:none!important;flex:none;align-self:center}
  .stage .card-rankings{zoom:calc(var(--cw,440) / 440)}
  .stage .card-leads{zoom:calc(var(--cw,440) / 435)}
  .stage .card-reviews{zoom:calc(var(--cw,440) / 403)}
  .stage .card-profile{zoom:calc(var(--cw,440) / 414)}
}
/* Reference's blue words sit ~5% taller than line 1 */
@media (min-width: 1200px){.hl-blue{display:inline-block;transform:scaleY(1.05);transform-origin:0 100%}}
/* Narrow phones: brand + nav trial button share one row, hero CTAs fit one row */
.nav-cta{font-size:18px}.nav-cta .arr{margin-left:11px}
@media (max-width: 420px){.nav-cta{font-size:14px;padding:0 12px;white-space:nowrap}.nav-cta .arr{display:none}.ctas{gap:10px}.cta-main,.cta-demo{padding:0 18px;font-size:16px}}
/* Nav phone: the contractor line, left of the trial button (desktop canvas only) */
.nav-phone{position:absolute;right:496px;top:28px;height:40px;display:inline-flex;align-items:center;gap:8px;font-size:19px;line-height:23px;font-weight:600;letter-spacing:-.4px;color:#05070f;white-space:nowrap;text-decoration:none}
.nav-phone svg{width:18px;height:18px;fill:#0860fa;flex:none}
/* Text us: outline pill between the number and the trial button; opens the phone's messages app */
.nav-text{position:absolute;right:360px;top:20px;height:55px;padding:0 18px 0 15px;display:inline-flex;align-items:center;gap:7px;border:1.5px solid #cfd8ea;border-radius:12px;background:#fff;font-size:18px;font-weight:600;letter-spacing:-.3px;color:#05070f;white-space:nowrap;text-decoration:none}
.nav-text svg{width:17px;height:17px;fill:#0860fa;flex:none}
/* shift the four links left to make room for the number + Text us */

@media (max-width: 1199px){.nav-phone,.nav-text{display:none}}
/* Hero proof pill under the CTAs: real Google rating, links to the Maps listing */
.hero-proof{position:absolute;left:452px;top:704px;width:800px;display:flex;justify-content:center;text-decoration:none;color:#37486c}
.hero-proof > *{flex:none}
.hero-proof{gap:10px;align-items:center;font-size:17px;line-height:22px;letter-spacing:-.2px}
.hero-proof .hp-g{width:20px;height:20px}
.hero-proof .hp-stars{display:inline-flex;gap:2px}
.hero-proof .hp-stars svg{width:17px;height:17px;fill:#f5a623}
.hero-proof b{color:#05070f;font-weight:700}
.hero-proof .hp-sep{color:#9aa6bf;margin:0 2px}
@media (max-width: 1199px){.hero-proof{position:relative;left:auto;top:auto;width:auto;margin:20px auto 0;flex-wrap:wrap;gap:8px;font-size:15px}.hero-proof .hp-stars svg{width:15px;height:15px}}
/* Hero has no entrance animation: text and cards render in place. */
/* Brand mark centered above the headline (desktop stage coords: headline center x = 852). */
.hero-mark{position:absolute;left:810px;top:228px;width:84px;height:61px;display:block}
@media (max-width: 1199px){.hero-mark{position:relative;left:auto;top:auto;width:64px;height:47px;margin:0 auto 10px}}
/* Hero mark: static (the 2.5s loop was removed 9/24). */
.hero-mark img{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- responsive polish (overnight audit 2026-09-25) ---------- */
@media (max-width: 1199px){
  /* nav: logo link reaches a 44px tap height; trial button never shrinks (it clipped to "Start my fr" at 320px) */
  .nav .brand{min-height:44px;flex:0 1 auto;min-width:0}
  .nav-cta{flex:none}
  .headline{text-wrap:balance}
  .subhead{text-wrap:pretty}
}
/* phones: full logo (mark + wordmark) scales with the room the trial + menu buttons leave on the row.
   --navlogo = wordmark height; the mark keeps its desktop ratio (4/3 of the wordmark height, 44:32). Mobile menu head reuses it (menu.css). */
@media (max-width: 479px){
  :root{--navlogo:min(24px,calc((100vw - 288px) * .133))}
  .nav .brand{gap:6px}
  .nav .nav-cta{padding:0 12px}
  .nav .brand-word{width:auto;height:var(--navlogo)}
  .nav .brand-mark{width:calc(var(--navlogo) * 11 / 6);height:calc(var(--navlogo) * 4 / 3)}
}
/* 375-479px: the 288/252 offsets + tighter trial-button padding keep a >=12px gap between logo and trial button (was ~2px at 375/390, -2px at 430) */
@media (max-width: 420px){:root{--navlogo:min(24px,calc((100vw - 252px) * .133))}.nav .nav-cta{padding:0 10px}}
/* <=360px the nav trial button is hidden (menu.css), so the logo gets its full size back */
@media (max-width: 360px){:root{--navlogo:24px}}
/* phones: the two hero buttons stack at one shared width instead of two different widths */
@media (max-width: 480px){
  .ctas{flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin-left:auto;margin-right:auto}
  .cta-main,.cta-demo{width:100%}
}
/* tablet + small laptop (720-1199px): cards in a 2x2 grid under the copy; nav shows the phone number and Text us */
@media (min-width: 720px) and (max-width: 1199px){
  .stage{display:grid;grid-template-columns:repeat(2,calc(var(--cw,340) * 1px));justify-content:center;column-gap:20px;row-gap:22px;padding:18px 24px 40px}
  .stage > .nav,.stage > .center,.stage > .trades{grid-column:1 / -1}
  .stage .card{align-self:center}
  .nav{justify-content:flex-start;gap:12px}
  .nav .brand{margin-right:auto}
  .nav-phone,.nav-text{display:inline-flex;position:relative;right:auto;top:auto;height:44px}
  .nav-phone{padding:0 6px;font-size:16px}
  .nav-text{padding:0 14px 0 12px;border-radius:10px;font-size:16px}
  .nav-cta{font-size:16px}
  .trades{justify-self:stretch}
}
/* phones: nav trial button label at 15px (was 14px) now that the logo shrinks on small screens */
@media (max-width: 420px){.nav-cta{font-size:15px}}
/* large phones (421-719px): 16px nav trial label keeps a clear gap to the logo (was 18px, 3px gap at 430px) */
@media (min-width: 421px) and (max-width: 719px){.nav-cta{font-size:16px}}
/* Phones (Blake 2026-09-25): the nav logo sits directly above the hero mark, so the same mark showed twice. Hide the hero copy. */
@media (max-width: 767px){.hero-mark{display:none}}

/* Phones + tablets (Blake 2026-09-25): the trades strip sits directly under the "Rated 4.9 on Google" line, above the cards. Desktop unchanged. */
@media (max-width: 899px){.stage > .trades{order:1;padding-top:0}}
/* parts/card-rankings.css */
/* Card: Top 3 Google Rankings (top-left). Local box 440x302, projected onto the
   reference quad TL(104,146) TR(541,113.5) BR(565,409) BL(123.5,447) via matrix3d. */
.card-rankings{
  position:absolute; left:104px; top:146px;
  width:440px; height:302px;
  box-sizing:border-box;
  background:#fff;
  border-radius:20px;
  box-shadow:
    0 2px 56px rgba(40,125,255,.30),
    0 0 110px rgba(40,125,255,.14),
    0 1px 3px rgba(40,110,230,.10),
    inset 0 -16px 16px -12px rgba(60,140,240,.10);
  transform-origin:0 0;
  transform:matrix3d(1.0102464,-0.075132739,0,3.9049316e-05,0.064276776,0.99216972,0,-3.7088417e-05,0,0,1,0,0,0,0,1);
  font-family:Inter,system-ui,sans-serif;
  color:#0d1117;
  -webkit-font-smoothing:antialiased;
}
.card-rankings *{box-sizing:border-box; margin:0}

/* Google G tile */
.card-rankings .cr-tile{
  position:absolute; left:24px; top:16.5px; width:72.5px; height:72.5px;
  border-radius:16px; background:#fff;
  border:1px solid #eef2f7;
  box-shadow:0 5px 14px rgba(40,100,200,.13), 0 1px 2px rgba(40,100,200,.06);
}
.card-rankings .cr-g{position:absolute; left:14.5px; top:13.5px; width:44px; height:44px}

/* Copy */
.card-rankings .cr-title{
  position:absolute; left:118.5px; top:23.25px; white-space:nowrap;
  font-size:22.4px; line-height:1; font-weight:700; letter-spacing:-1.2px; color:#0d1117;
}
.card-rankings .cr-desc{
  position:absolute; left:119.5px; top:52.1px; white-space:nowrap;
  font-size:17px; line-height:23px; font-weight:400; letter-spacing:-.62px; color:#2f3d62;
}

/* Map */
.card-rankings .cr-map{
  position:absolute; left:21px; top:118.5px; width:198px; height:167px;
  border-radius:10px; overflow:hidden;
}
.card-rankings .cr-map svg{display:block}

.card-rankings .cr-leaf{position:absolute; left:150px; top:103px; overflow:visible}

/* Ranked list */
.card-rankings .cr-list{position:absolute; left:0; top:0; width:0; height:0}
.card-rankings .cr-list::before{
  content:""; position:absolute; left:220px; top:118.5px; width:210px; height:166.5px;
  border-radius:12px; background:#fafbfd;
}
.card-rankings .cr-pill{
  position:absolute; left:222px; top:120.75px; width:202.5px; height:60px;
  border-radius:12px; background:#f5f9fd;
  border:1.5px solid #dbe8fb;
  box-shadow:0 2px 8px rgba(40,120,240,.06);
}
.card-rankings .cr-num{
  position:absolute; width:33px; height:33px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:600; line-height:1;
}
.card-rankings .cr-num--1{left:236.75px; top:133.75px; background:#0663f0; color:#fff}
.card-rankings .cr-num--2{left:236px; top:189.5px; width:34px; height:34px; background:#eff1f5; color:#1e365c}
.card-rankings .cr-num--3{left:236px; top:236.5px; width:34px; height:34px; background:#eff1f5; color:#1e365c}
.card-rankings .cr-name{position:absolute; white-space:nowrap; line-height:1}
.card-rankings .cr-name--1{left:283.8px; top:135.2px; font-size:15.5px; font-weight:600; color:#0a45f0; letter-spacing:-1.1px}
.card-rankings .cr-name--2,
.card-rankings .cr-name--3{left:286.1px; font-size:13.5px; font-weight:500; color:#354566; letter-spacing:-.9px}
.card-rankings .cr-name--2{top:195.5px}
.card-rankings .cr-name--3{top:241.6px}
.card-rankings .cr-bar{position:absolute; height:8.5px; border-radius:4.25px}
.card-rankings .cr-bar--1{left:285.5px; top:159px; width:121px; background:#c8defd}
.card-rankings .cr-bar--2{left:287px; top:214.5px; width:117.5px; background:#e7ebf1}
.card-rankings .cr-bar--3{left:287px; top:261.5px; width:117.5px; background:#e7ebf1}

@media (max-width: 1199px){
  .card-rankings{position:relative; left:auto; top:auto; transform:none; width:100%; max-width:440px; margin:0 auto;}
}

/* Phones + tablets (mobile-ux 2026-09-25): the card is zoomed to --cw/440, so small labels get a floor of 11px as rendered
   (--f11 = the unzoomed size that renders at 11px). */
@media (max-width: 1199px){
  .stage .card-rankings{--f11:calc(11px * 440 / var(--cw,440))}
  .card-rankings .cr-desc{font-size:max(17px,var(--f11))}
  .card-rankings .cr-name--1{font-size:max(15.5px,calc(var(--f11) * 1.15))}
  .card-rankings .cr-name--2,.card-rankings .cr-name--3{font-size:max(13.5px,var(--f11));letter-spacing:-.6px}
}
/* parts/card-leads.css */
/* Card: Calls, Leads, and Bookings (bottom-left). Stage coords measured from reference.png. */
.card-leads{
  position:absolute; left:117px; top:486.5px; width:435px; height:356px;
  transform:rotate(-4.6deg); transform-origin:50% 50%;
  box-sizing:border-box; background:#fcfdfe; border-radius:24px;
  box-shadow:0 22px 48px rgba(37,99,235,.16), 0 4px 12px rgba(37,99,235,.08), inset 0 0 0 1px rgba(255,255,255,.9);
  font-family:Inter,system-ui,sans-serif; color:#0d1730; text-align:left;
  padding:18px 22px 16px 23px;
}
.card-leads *{box-sizing:border-box; margin:0;}
.card-leads .cl-head{display:flex; align-items:flex-start; height:84px; padding-left:15px;}
.card-leads .cl-app{flex:0 0 58px; width:58px; height:58px; border-radius:13px;
  background:linear-gradient(180deg,#1faf5c 0%,#18b85d 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(22,160,80,.18);}
.card-leads .cl-app svg{transform:translate(-1px,0);}
.card-leads .cl-htext{margin-left:24px; padding-top:1px;}
.card-leads .cl-title{font-size:19.6px; line-height:26px; font-weight:700; letter-spacing:-.25px; color:#0d1730;}
.card-leads .cl-desc{font-size:15.6px; line-height:24px; font-weight:400; color:#4b5a7c; margin-top:2px;}
.card-leads .cl-list{height:142px; padding:9px 10px 0 16px; background:#fff; border-radius:18px;
  border:1px solid rgba(20,45,100,.05);
  box-shadow:0 6px 16px rgba(37,99,235,.05);}
.card-leads .cl-row{display:flex; align-items:center; height:37px;}
.card-leads .cl-row + .cl-row{margin-top:5.5px;}
.card-leads .cl-ic{flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:#dcebfe;
  color:#0b5cf6; display:flex; align-items:center; justify-content:center;}
.card-leads .cl-pill{flex:1; margin-left:6px; height:37px; border-radius:18.5px; background:#f3f5f9;
  display:flex; align-items:center; justify-content:space-between; padding:0 14px 3px 11px;}
.card-leads .cl-lbl{font-size:14.2px; font-weight:500; color:#1b2339; letter-spacing:-.35px;}
.card-leads .cl-time{font-size:13px; font-weight:400; color:#5d6a88;}
.card-leads .cl-stat{position:relative; height:92px; margin-top:4px; background:#fff; border-radius:18px;
  border:1px solid rgba(20,45,100,.05);
  box-shadow:0 6px 16px rgba(37,99,235,.06);
  padding:10px 0 0 20px;}
.card-leads .cl-stat-lbl{font-size:14.3px; line-height:20px; font-weight:400; color:#34425f;}
.card-leads .cl-stat-v{display:flex; align-items:baseline; margin-top:6px; margin-left:-2px;}
.card-leads .cl-num{font-size:28px; line-height:32px; font-weight:700; letter-spacing:-.5px; color:#0b1220;}
.card-leads .cl-up{display:inline-flex; align-items:baseline; gap:4px; margin-left:13px; font-size:18px; font-weight:600; letter-spacing:-.2px; color:#14883a; position:relative; top:-1px;}
.card-leads .cl-up svg{position:relative; top:1px;}
.card-leads .cl-chart{position:absolute; left:150px; top:8px; overflow:visible;}

@media (max-width: 1199px){
  .card-leads{position:relative; left:auto; top:auto; transform:none; width:100%; max-width:440px; margin:0 auto;}
  .card-leads{height:auto;}
  .card-leads .cl-head{height:auto; min-height:84px; padding:0 0 10px 0;}
  .card-leads .cl-htext{margin-left:16px;}
  .card-leads .cl-desc br{display:none;}
  .card-leads .cl-chart{left:auto; right:10px; width:min(220px, 50%);}
}

/* Phones + tablets (mobile-ux 2026-09-25): rendered-size floor of 11px on the zoomed card (--f11 = unzoomed size that renders at 11px). */
@media (max-width: 1199px){
  .stage .card-leads{--f11:calc(11px * 435 / var(--cw,435))}
  .card-leads .cl-desc{font-size:max(15.6px,var(--f11));line-height:1.5}
  .card-leads .cl-lbl{font-size:max(14.2px,var(--f11))}
  .card-leads .cl-time{font-size:max(13px,var(--f11))}
  .card-leads .cl-stat-lbl{font-size:max(14.3px,var(--f11))}
}
/* parts/card-reviews.css */
/* 5-Star Reviews card (top-right). All coords in stage px, local coords relative to card box. */
.card-reviews{position:absolute;left:1158px;top:127px;width:403px;height:304px;box-sizing:border-box;
  background:#fbfcfe;border-radius:22px;
  box-shadow:0 22px 48px rgba(64,120,214,.16),0 6px 16px rgba(64,120,214,.08),inset 0 0 0 1px rgba(255,255,255,.9);
  transform:rotate(5.7deg);transform-origin:50% 50%;font-family:Inter,system-ui,sans-serif;color:#0d1424;
  -webkit-font-smoothing:antialiased;}
.card-reviews *{box-sizing:border-box;margin:0}
.card-reviews .rv-icon{position:absolute;left:26px;top:20px;width:53px;height:52px;border-radius:13px;
  background:linear-gradient(150deg,#fdb630 0%,#fcab18 100%);box-shadow:0 5px 12px rgba(252,170,24,.14);
  display:flex;align-items:center;justify-content:center}
.card-reviews .rv-icon svg{width:36px;height:36px;margin:-1px 0 0 -1px;fill:#fff;stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.card-reviews .rv-title{position:absolute;left:104px;top:22px;font-size:23px;line-height:27px;font-weight:700;letter-spacing:-.3px;color:#0d1424;white-space:nowrap;transform:scaleX(.9);transform-origin:0 0}
.card-reviews .rv-desc{position:absolute;left:104px;top:51px;font-size:17px;line-height:23px;font-weight:400;letter-spacing:-.15px;color:#5b6785;white-space:nowrap}
.card-reviews .rv-review{position:absolute;left:23px;top:113px;width:360px;height:176px;border-radius:15px;
  background:#fdfefe;border:1px solid #e4ecf7;box-shadow:4px 6px 18px rgba(64,120,214,.09)}
.card-reviews .rv-g{position:absolute;left:11.5px;top:9.5px;width:41px;height:41px;border-radius:11px;background:#fff;
  box-shadow:0 2px 8px rgba(64,120,214,.12);display:flex;align-items:center;justify-content:center}
.card-reviews .rv-g svg{width:27px;height:27px}
.card-reviews .rv-stars{position:absolute;left:67.5px;top:14.5px;display:flex}
.card-reviews .rv-stars svg{width:28px;height:28px;margin-right:-.3px;fill:#fbb321;stroke:#fbb321;stroke-width:1.2;stroke-linejoin:round}
.card-reviews .rv-score{position:absolute;right:23px;top:16px;font-size:17px;line-height:20px;font-weight:500;color:#2f3d5c}
.card-reviews .rv-quote{position:absolute;left:69px;top:49px;font-size:17.5px;line-height:23.5px;font-weight:400;color:#1f2a44;white-space:nowrap;letter-spacing:-.2px;transform:scaleX(.78);transform-origin:0 0}
.card-reviews .rv-avatar{position:absolute;left:71px;top:132px;width:32px;height:32px;border-radius:50%;
  background:#d3e3fc;color:#1f5fe8;font-size:16px;font-weight:600;line-height:32px;text-align:center}
.card-reviews .rv-name{position:absolute;left:112px;top:136px;font-size:16.5px;line-height:20px;font-weight:500;color:#1f2a44;white-space:nowrap;transform:scaleX(.77);transform-origin:0 0}
.card-reviews .rv-when{position:absolute;left:189px;top:135px;font-size:15px;line-height:20px;font-weight:400;color:#63769d;white-space:nowrap;transform:scaleX(.85);transform-origin:0 0}
@media (max-width: 1199px){ .card-reviews{position:relative; left:auto; top:auto; transform:none; width:100%; max-width:440px; margin:0 auto;} }

/* Phones + tablets (mobile-ux 2026-09-25): rendered-size floor of 11px on the zoomed card. */
@media (max-width: 1199px){
  .stage .card-reviews{--f11:calc(11px * 403 / var(--cw,403))}
  .card-reviews .rv-when{font-size:max(15px,var(--f11))}
}
/* parts/card-profile.css */
/* Card: Active Business Profile (bottom-right). All coords measured from reference.png, card deskewed. */
.card-profile{
  position:absolute; left:1180.5px; top:485px; width:414px; height:356px;
  transform:rotate(4.15deg); transform-origin:50% 50%;
  background:#fff; border-radius:20px;
  box-shadow:0 18px 48px -8px rgba(38,112,232,.20), 0 4px 14px rgba(38,100,210,.07), 0 0 0 1px rgba(214,228,248,.55);
  font-family:Inter,system-ui,sans-serif; color:#0d1224;
  -webkit-font-smoothing:antialiased;
}
.card-profile *{box-sizing:border-box; margin:0;}

.card-profile .cp-tile{
  position:absolute; left:19.5px; top:16px; width:59px; height:61px; border-radius:14px;
  background:#fff; box-shadow:0 3px 12px rgba(40,100,200,.10), 0 0 0 1px rgba(226,234,246,.7);
}
.card-profile .cp-tile svg{display:block;}

.card-profile .cp-title{
  position:absolute; left:98.75px; top:22.85px; font-size:19px; line-height:19px; font-weight:700;
  letter-spacing:-.24px; color:#0d1224; white-space:nowrap;
}
.card-profile .cp-desc{
  position:absolute; left:98.75px; top:48.6px; font-size:14.2px; line-height:21.5px; font-weight:400;
  letter-spacing:-.05px; color:#3f4d73; white-space:nowrap;
}

.card-profile .cp-desc span{display:block;}
.card-profile .cp-l1{letter-spacing:.2px;}
.card-profile .cp-l2{letter-spacing:-.16px;}

.card-profile .cp-photo{position:absolute; overflow:hidden; border-radius:7px; background:#dfe6ef;}
.card-profile .cp-photo img{display:block; width:100%; height:100%; object-fit:cover;}
.card-profile .cp-house{left:26.75px; top:107px; width:173px; height:93px; border-radius:9px;}
.card-profile .cp-van1{left:204.75px; top:105.5px; width:94.5px; height:45px;}
.card-profile .cp-room{left:303.25px; top:103.5px; width:86px; height:46.5px;}
.card-profile .cp-van2{left:204.75px; top:155.5px; width:94.5px; height:44.5px;}
.card-profile .cp-more{left:303.25px; top:155px; width:86px; height:46px; background:#2f3a4f;}
.card-profile .cp-more span{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14.5px; font-weight:600; letter-spacing:-.2px;
}

.card-profile .cp-name{
  position:absolute; left:29px; top:210.2px; font-size:14px; line-height:14px; font-weight:600;
  letter-spacing:-.3px; color:#0a1024; white-space:nowrap;
}
.card-profile .cp-rating > *{position:absolute; white-space:nowrap;}
.card-profile .cp-score{left:29px; top:232.5px; font-size:13px; line-height:13px; font-weight:500; color:#0f1a33;}
.card-profile .cp-stars{left:55.5px; top:231.8px; display:flex;}
.card-profile .cp-stars svg{width:15px; height:15px; margin-right:-.5px; fill:#fdb204; display:block;}
.card-profile .cp-count{left:136px; top:231.8px; font-size:12.8px; line-height:12.8px; font-weight:400; color:#56668c;}

.card-profile .cp-hours > *{position:absolute; white-space:nowrap;}
.card-profile .cp-open{left:29.25px; top:256.4px; font-size:13.2px; line-height:13.2px; font-weight:600; color:#0f883e;}
.card-profile .cp-dot{left:69px; top:256.3px; font-size:13px; line-height:13px; color:#6a7896;}
.card-profile .cp-closes{left:79.5px; top:256.6px; font-size:12px; line-height:12px; font-weight:400; color:#4a5a85;}

.card-profile .cp-tabs{position:absolute; left:24.5px; top:280px; width:366px; height:60px; transform:rotate(-.7deg);}
.card-profile .cp-tab{
  position:absolute; top:0; height:59px; width:63px; border-radius:11px;
  background:#fff; border:1px solid #e8eef6; box-shadow:0 2px 6px rgba(40,90,170,.05);
}
.card-profile .cp-tab:nth-child(1){left:0; width:68px; top:0; height:59.5px; background:#ecf4ff; border-color:#d3e5fb;}
.card-profile .cp-tab:nth-child(2){left:79.5px; width:62.5px;}
.card-profile .cp-tab:nth-child(3){left:154.5px; width:62px;}
.card-profile .cp-tab:nth-child(4){left:228px;}
.card-profile .cp-tab:nth-child(5){left:303px;}
.card-profile .cp-tab svg{
  position:absolute; left:50%; top:8px; width:22.5px; height:22.5px; margin-left:-11.25px;
  fill:none; stroke:#34456f; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.card-profile .cp-tab svg.cp-ico-ov{width:23.5px; height:23.5px; margin-left:-11.75px; top:9px; stroke:none;}
.card-profile .cp-tab svg.cp-ico-ov path:last-child{stroke:#1b6df6; fill:none;}
.card-profile .cp-tab span{
  position:absolute; left:0; right:0; top:40.3px; text-align:center;
  font-size:11px; line-height:11px; font-weight:500; color:#4c6288; white-space:nowrap;
}
.card-profile .cp-tab:nth-child(-n+2) span{letter-spacing:-.25px;}
.card-profile .cp-tab-active span{color:#1a63f2; top:39.4px;}

@media (max-width: 1199px){
  .card-profile{position:relative; left:auto; top:auto; transform:none; width:100%; max-width:440px; margin:0 auto;}
}

/* Phones + tablets (mobile-ux 2026-09-25): rendered-size floor of 11px on the zoomed card (--f11 = unzoomed size that renders at 11px).
   The rating and hours rows flow inline so larger text can't collide, and the tab strip spans the card so the labels fit. */
@media (max-width: 1199px){
  .stage .card-profile{--f11:calc(11px * 414 / var(--cw,414))}
  .card-profile .cp-title{left:92px}
  .card-profile .cp-desc{left:92px;font-size:max(14.2px,var(--f11))}
  .card-profile .cp-l1{letter-spacing:-.35px}
  .card-profile .cp-l2{letter-spacing:-.35px}
  .card-profile .cp-more span{font-size:max(14.5px,var(--f11))}
  .card-profile .cp-name{top:208px;font-size:max(14px,var(--f11));line-height:1}
  .card-profile .cp-rating,.card-profile .cp-hours{position:absolute;left:29px;display:flex;align-items:center;gap:6px;white-space:nowrap}
  .card-profile .cp-rating{top:229px}
  .card-profile .cp-hours{top:253px}
  .card-profile .cp-rating > *,.card-profile .cp-hours > *{position:static;line-height:1}
  .card-profile .cp-score{font-size:max(13px,var(--f11))}
  .card-profile .cp-count{font-size:max(12.8px,var(--f11))}
  .card-profile .cp-open{font-size:max(13.2px,var(--f11))}
  .card-profile .cp-dot{font-size:max(13px,var(--f11))}
  .card-profile .cp-closes{font-size:max(12px,var(--f11))}
  .card-profile .cp-tabs{left:14px;width:386px}
  .card-profile .cp-tab:nth-child(n){width:74px}
  .card-profile .cp-tab:nth-child(1){left:0}
  .card-profile .cp-tab:nth-child(2){left:78px}
  .card-profile .cp-tab:nth-child(3){left:156px}
  .card-profile .cp-tab:nth-child(4){left:234px}
  .card-profile .cp-tab:nth-child(5){left:312px}
  .card-profile .cp-tab span{font-size:max(11px,var(--f11));line-height:1;letter-spacing:-.3px;top:auto;bottom:7px}
  .card-profile .cp-tab-active span{top:auto;bottom:7px}
}
/* parts/sections-base.css */
/* Shared tokens + primitives for the sections below the hero. Owned by the orchestrator. */
:root{
  --ink:#05070f; --ink-2:#1d2433; --muted:#5b6475; --line:#e6ebf3; --bg-soft:#f6f9ff;
  --blue:#0860fa; --blue-2:#3b82f6; --blue-soft:#eaf2ff; --green:#16a34a; --amber:#f5a524;
  --radius:20px; --shadow:0 1px 2px rgba(15,35,80,.06),0 12px 32px -12px rgba(22,70,170,.18);
  --ease-out:cubic-bezier(.23,1,.32,1);
}
.sec{position:relative;padding:112px 24px}
.sec-inner{max-width:1180px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--blue);background:var(--blue-soft);padding:6px 12px;border-radius:999px}
.sec-title{font-size:clamp(32px,4.2vw,52px);line-height:1.05;letter-spacing:-.035em;font-weight:800;color:var(--ink);margin:16px 0 0;font-variation-settings:"opsz" 32}
.sec-title .accent{color:var(--blue)}
.sec-lede{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--muted);margin:18px 0 0;max-width:640px}
.center{text-align:center}.center .sec-lede{margin-left:auto;margin-right:auto}
.s-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn-s{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:12px;font-size:17px;font-weight:600;transition:transform .16s var(--ease-out),background-color .2s,box-shadow .2s}
.btn-s:active{transform:scale(.97)}
.btn-s.dark{background:var(--ink);color:#fff}.btn-s.dark:hover{background:#1a2030}
.btn-s.outline{border:1.5px solid var(--ink);color:var(--ink);background:#fff}.btn-s.outline:hover{background:var(--bg-soft)}
/* Scroll reveal: JS adds .in when visible. Without JS or with reduced motion, content is simply visible. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1;transform:none;transition:none}}
@media (max-width: 899px){.sec{padding:72px 16px}}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* Overnight audit 2026-09-25: even heading lines, no one-word last lines in body copy */
.sec-title,.below h3{text-wrap:balance}
.sec-lede,.below p,.below li{text-wrap:pretty}
.below figcaption{text-wrap:pretty}
/* parts/sec-lost.css */
/* Section: "Where the jobs go". Sits directly under the hero, before .sec-system. All selectors scoped under .sec-lost. */
.sec-lost{background:#fff;padding-bottom:40px}
.sec-lost .lost-head .sec-title{max-width:860px;margin-left:auto;margin-right:auto;text-wrap:balance}
.sec-lost .lost-list{list-style:none;margin:56px auto 0;padding:0;max-width:960px;border-top:1px solid var(--line)}
.sec-lost .lost-row{display:grid;grid-template-columns:40px minmax(0,1fr) 136px;gap:24px;align-items:center;padding:26px 4px;border-bottom:1px solid var(--line)}
.sec-lost .lost-n{align-self:start;font-size:15px;line-height:30px;font-weight:600;color:#7d8699;font-variant-numeric:tabular-nums}
.sec-lost .lost-row p{margin:0;font-size:20px;line-height:1.5;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
.sec-lost .lost-tag{justify-self:end;white-space:nowrap;background:#dc2626;color:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;padding:8px 12px;border-radius:6px}
@media (max-width: 899px){
  .sec-lost{padding-bottom:24px}
  .sec-lost .lost-list{margin-top:40px}
}
@media (max-width: 699px){
  .sec-lost .lost-row{grid-template-columns:24px minmax(0,1fr);column-gap:12px;row-gap:12px;align-items:start;padding:22px 0}
  .sec-lost .lost-n{line-height:25.6px;font-size:13px}
  .sec-lost .lost-row p{font-size:16.5px;line-height:1.55}
  .sec-lost .lost-tag{grid-column:2;justify-self:start;font-size:11px;padding:7px 10px}
}

/* Phones + tablets (mobile-ux 2026-09-25): labels, chips and legends read at 13px minimum below 900px (desktop unchanged). */
@media (max-width: 899px){.sec-lost .lost-tag{font-size:13px;letter-spacing:.08em}}

/* Phones + tablets (Blake 2026-09-25): rows are a plain list, no reveal/stagger animation. Desktop keeps the shared .reveal entrance. */
@media (max-width: 899px){.js .sec-lost .lost-row.reveal{opacity:1;transform:none;transition:none}}
/* parts/sec-system.css */
/* Section: problem framing + "the system" bento. All selectors scoped under .sec-system. */
.sec-system{overflow:clip;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 42%,#fff 100%)}
.sec-system .sys-glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.sec-system .sys-glow span{position:absolute;border-radius:50%;filter:blur(70px);background:rgba(74,140,246,.16)}
.sec-system .sys-glow-a{width:560px;height:420px;left:-160px;top:38%}
.sec-system .sys-glow-b{width:620px;height:460px;right:-200px;top:62%;background:rgba(74,140,246,.13)}
.sec-system .sec-inner{position:relative;z-index:1}
.sec-system h2,.sec-system h3,.sec-system p,.sec-system ul{margin-top:0}
.sec-system ul{list-style:none;padding:0;margin-bottom:0}
.sec-system .sec-title{text-wrap:balance}
.sec-system .sec-lede{text-wrap:pretty}

/* ---------- Block 1: problem ---------- */
.sec-system .sys-problem{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px;align-items:center}
.sec-system .sys-problem-head .sec-title{max-width:580px}
.sec-system .sys-pains{border-top:1px solid var(--line)}
.sec-system .sys-pain{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--line)}
.sec-system .sys-pain-ic{flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);
  box-shadow:0 4px 12px -4px rgba(22,70,170,.14);display:flex;align-items:center;justify-content:center;color:#8791a5}
.sec-system .sys-pain-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sec-system .sys-pain-ic .sys-strike{stroke:#e5484d}
.sec-system .sys-pain-ic .sys-spark{fill:var(--blue);stroke:var(--blue);stroke-width:1}
.sec-system .sys-pain h3{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 4px;text-wrap:balance}
.sec-system .sys-pain p{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0;text-wrap:pretty}

/* ---------- Block 2 header ---------- */
.sec-system .sys-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:end;margin-top:136px}
.sec-system .sys-head .sec-lede{margin:0 0 6px}

/* ---------- Bento: 7/5 over 7/5 ---------- */
.sec-system .sys-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:48px}
.sec-system .sys-vis,.sec-system .sys-gbp{grid-column:span 7}
.sec-system .sys-rev,.sec-system .sys-srch{grid-column:span 5}

.sec-system .sys-card{display:flex;flex-direction:column;padding:26px 26px 24px;border-radius:24px;border-color:#e8eef7;
  box-shadow:0 1px 2px rgba(15,35,80,.05),0 22px 48px -20px rgba(37,99,235,.22);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),box-shadow .3s var(--ease-out);transition-delay:var(--d,0ms),var(--d,0ms),0ms}
@media (hover:hover){
  .sec-system .sys-card:hover{box-shadow:0 1px 2px rgba(15,35,80,.05),0 30px 60px -22px rgba(37,99,235,.32)}
}
.sec-system .sys-card-head{display:flex;gap:18px;align-items:flex-start}
.sec-system .sys-card-title{font-size:21px;line-height:1.25;font-weight:700;letter-spacing:-.025em;color:var(--ink);margin:4px 0 6px;text-wrap:balance}
.sec-system .sys-card-desc{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0;max-width:56ch;text-wrap:pretty}

/* Icon tiles (same language as the hero cards) */
.sec-system .sys-tile{flex:0 0 54px;width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.sec-system .sys-tile-g,.sec-system .sys-tile-store{background:#fff;border:1px solid #eef2f7;box-shadow:0 5px 14px rgba(40,100,200,.13),0 1px 2px rgba(40,100,200,.06)}
.sec-system .sys-tile-g svg{width:30px;height:30px}
.sec-system .sys-tile-store svg{width:48px;height:50px}
.sec-system .sys-tile-star{background:linear-gradient(150deg,#fdb630 0%,#fcab18 100%);box-shadow:0 5px 12px rgba(252,170,24,.22)}
.sec-system .sys-tile-star svg{width:34px;height:34px;fill:#fff;stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.sec-system .sys-tile-srch{background:linear-gradient(160deg,#1b2233 0%,var(--ink) 100%);box-shadow:0 6px 14px -2px rgba(5,7,15,.28)}
.sec-system .sys-tile-srch svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sec-system .sys-tile-srch .sys-fill{fill:#8fb6fb;stroke:#8fb6fb;stroke-width:.8}

/* Mock surface */
.sec-system .sys-mock{position:relative;margin-top:24px;flex:1;min-height:236px;border-radius:16px;background:var(--bg-soft);border:1px solid #e9eff8;overflow:hidden}

/* Shared small bits */
.sec-system .sys-dot-ok{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#dcf5e5;display:inline-flex;align-items:center;justify-content:center}
.sec-system .sys-dot-ok svg{width:13px;height:13px;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sec-system .sys-bubble{position:relative;background:var(--blue);color:#fff;border-radius:18px 18px 6px 18px;padding:14px 16px 16px;
  box-shadow:0 12px 24px -12px rgba(8,96,250,.55)}
.sec-system .sys-bubble p{margin:0;font-size:14.5px;line-height:1.45;font-weight:500;letter-spacing:-.005em}
.sec-system .sys-panel-h{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#8791a5;margin:0 2px 10px}

/* 1. Map + audit */
.sec-system .sys-vismock{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);background:#eceef1}
.sec-system .sys-map{position:relative;min-height:236px;overflow:hidden}
.sec-system .sys-map-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sec-system .sys-heat{position:absolute;left:50%;top:50%;width:min(80%,300px);transform:translate(-50%,-50%);
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,2vw,20px) clamp(8px,1.6vw,18px);justify-items:center}
.sec-system .sys-heat i{display:block;width:clamp(16px,2vw,22px);aspect-ratio:1;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(15,35,80,.15)}
.sec-system .sys-heat .h1{background:#bcd3fb}
.sec-system .sys-heat .h2{background:#8fb6fb}
.sec-system .sys-heat .h3{background:#5c95fb}
.sec-system .sys-heat .h4{background:#2d74fa}
.sec-system .sys-heat .h5{background:var(--blue)}
.sec-system .sys-ring{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;
  background:radial-gradient(circle,rgba(8,96,250,.16) 0%,rgba(8,96,250,.08) 55%,rgba(8,96,250,0) 72%);
  border:1.5px solid rgba(8,96,250,.28);animation:sys-pulse 3.6s var(--ease-out) infinite}
.sec-system .sys-pin{position:absolute;left:50%;top:50%;width:30px;height:39px;margin:-37px 0 0 -15px;filter:drop-shadow(0 6px 8px rgba(20,120,60,.28))}
.sec-system .sys-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;white-space:nowrap;
  padding:7px 13px 7px 9px;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);box-shadow:0 6px 16px -6px rgba(15,35,80,.25)}
.sec-system .sys-chip svg{width:18px;height:18px}
.sec-system .sys-chip-biz{left:14px;top:14px;color:var(--blue)}
.sec-system .sys-chip-legend{left:14px;bottom:14px;font-weight:500;color:var(--muted);padding-left:12px}
.sec-system .sys-chip-legend i{width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(8,96,250,.18)}
@keyframes sys-pulse{0%{transform:scale(.82);opacity:.9}70%{transform:scale(1.18);opacity:.35}100%{transform:scale(.82);opacity:.9}}
.sec-system .sys-audit{display:flex;flex-direction:column;justify-content:center;padding:16px;background:var(--bg-soft);border-left:1px solid #e3e9f3}
.sec-system .sys-checks{display:flex;flex-direction:column;gap:8px}
.sec-system .sys-checks li{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e8eef6;border-radius:10px;padding:8px 10px;
  font-size:13.5px;font-weight:500;color:var(--ink-2);box-shadow:0 4px 10px -8px rgba(37,99,235,.25)}

/* 2. Review request message */
.sec-system .sys-msg{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:20px}
.sec-system .sys-msg-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted)}
.sec-system .sys-msg .sys-bwrap{position:relative;align-self:flex-end;max-width:320px}
.sec-system .sys-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:#fff;color:var(--ink);border-radius:999px;
  padding:7px 14px 7px 10px;font-size:13.5px;font-weight:600}
.sec-system .sys-link svg{width:16px;height:16px}
.sec-system .sys-link .sys-arr{width:13px;height:10px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sec-system .sys-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.sec-system .sys-tag{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px 5px 8px;
  font-size:12.5px;font-weight:500;color:var(--ink-2)}
.sec-system .sys-tag svg{width:15px;height:15px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sec-system .sys-tag-on{background:#eefaf2;border-color:#cdeeda;color:#12803a}
.sec-system .sys-tag-on svg{stroke:var(--green)}

/* 3. Always-active feed */
.sec-system .sys-feed{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;padding:18px;align-items:center}
.sec-system .sys-post{background:#fff;border-radius:14px;border:1px solid #e8eef6;overflow:hidden;box-shadow:0 10px 24px -14px rgba(37,99,235,.3)}
.sec-system .sys-post-media{position:relative;aspect-ratio:16/9;background:#dfe6ef}
.sec-system .sys-post-media img{display:block;width:100%;height:100%;object-fit:cover}
.sec-system .sys-post-badge{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;background:rgba(5,7,15,.72);color:#fff;
  border-radius:999px;padding:4px 9px 4px 7px;font-size:11.5px;font-weight:600}
.sec-system .sys-post-badge svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.sec-system .sys-play{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -6px rgba(5,7,15,.45)}
.sec-system .sys-play svg{width:18px;height:18px;fill:var(--blue);margin-left:2px}
.sec-system .sys-post-body{display:flex;flex-direction:column;gap:7px;padding:10px 12px 12px}
.sec-system .sys-post-who{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.sec-system .sys-post-av{width:18px;height:18px;border-radius:50%;background:linear-gradient(150deg,#3f88f8,#0f6bfb);display:inline-grid;place-items:center;flex:none;font-size:10px;font-weight:800;line-height:1;color:#fff}
.sec-system .sys-post-text{margin:0;font-size:12.5px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sec-system .sys-skel{display:block;height:7px;border-radius:4px;background:#e7edf6;width:92%}
.sec-system .sys-skel-s{width:64%}
.sec-system .sys-post-cta{align-self:flex-start;margin-top:3px;font-size:12px;font-weight:600;color:var(--blue);background:var(--blue-soft);border-radius:999px;padding:4px 10px}
.sec-system .sys-chan{align-self:center}
.sec-system .sys-chan-list{display:flex;flex-direction:column;gap:6px}
.sec-system .sys-chan-list li{display:flex;align-items:center;gap:10px;height:36px;padding:0 8px 0 5px;background:#fff;border:1px solid #e8eef6;border-radius:10px;
  font-size:13.5px;font-weight:500;color:var(--ink-2)}
.sec-system .sys-chan-list .sys-dot-ok{margin-left:auto;flex-basis:18px;width:18px;height:18px}
.sec-system .sys-ch{flex:0 0 26px;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center}
.sec-system .sys-ch svg{width:16px;height:16px}
.sec-system .sys-ch-g{background:#fff;border:1px solid #eef2f7}
.sec-system .sys-ch-g svg{width:14px;height:14px}
.sec-system .sys-ch-yt{background:#ff0033}
.sec-system .sys-ch-yt svg{fill:#fff}
.sec-system .sys-ch-fb{background:#1877f2}
.sec-system .sys-ch-fb svg{fill:#fff;width:18px;height:18px}
.sec-system .sys-ch-ig{background:linear-gradient(45deg,#f9a13a 0%,#e1306c 50%,#8a3ab9 100%)}
.sec-system .sys-ch-ig svg{fill:none;stroke:#fff;stroke-width:1.9}
.sec-system .sys-ch-ig .sys-fill{fill:#fff;stroke:none}
.sec-system .sys-ch-li{background:#0a66c2}
.sec-system .sys-ch-li svg{fill:#fff;width:17px;height:17px}

/* 4. AI search teaser */
.sec-system .sys-srch .sys-mock{min-height:0}
.sec-system .sys-ask{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:20px}
.sec-system .sys-ask-bar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dfe7f3;border-radius:14px;padding:12px 14px;
  font-size:14px;font-weight:500;color:var(--ink-2);box-shadow:0 10px 22px -14px rgba(37,99,235,.35)}
.sec-system .sys-ask-bar svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round}
.sec-system .sys-ask-bar span{min-width:0}
.sec-system .sys-ans{display:flex;flex-direction:column;gap:8px;margin-left:18px;padding:14px;background:#fff;border:1px solid #e8eef6;border-radius:14px 14px 14px 6px}
.sec-system .sys-ask-h{margin-top:4px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#8791a5}
.sec-system .sys-tools{display:flex;flex-wrap:wrap;gap:7px}
.sec-system .sys-tools span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.sec-system .sys-more{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:15px;font-weight:600;color:var(--blue);
  text-decoration:none;border-radius:6px}
.sec-system .sys-more svg{width:11px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
.sec-system .sys-more:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media (hover:hover){
  .sec-system .sys-more:hover svg{transform:translateY(3px)}
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .sec-system .sys-vis,.sec-system .sys-rev,.sec-system .sys-gbp,.sec-system .sys-srch{grid-column:span 6}
  .sec-system .sys-vismock{grid-template-columns:1fr}
  .sec-system .sys-audit{border-left:0;border-top:1px solid #e3e9f3}
  .sec-system .sys-checks{display:grid;grid-template-columns:1fr 1fr}
  .sec-system .sys-feed{grid-template-columns:1fr}
}
@media (max-width: 899px){
  .sec-system .sys-problem{grid-template-columns:1fr;gap:36px}
  .sec-system .sys-head{grid-template-columns:1fr;gap:0;margin-top:96px}
  .sec-system .sys-head .sec-lede{margin-top:18px}
  .sec-system .sys-grid{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .sec-system .sys-vis,.sec-system .sys-rev,.sec-system .sys-gbp,.sec-system .sys-srch{grid-column:auto}
  .sec-system .sys-feed{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .sec-system .sys-glow-a,.sec-system .sys-glow-b{width:360px;height:300px}
}
@media (max-width: 560px){
  .sec-system .sys-card{padding:20px 18px 18px;border-radius:20px}
  .sec-system .sys-card-head{flex-direction:column;gap:14px}
  .sec-system .sys-tile{flex-basis:46px;width:46px;height:46px;border-radius:12px}
  .sec-system .sys-tile-g svg,.sec-system .sys-tile-srch svg{width:26px;height:26px}
  .sec-system .sys-tile-star svg{width:28px;height:28px}
  .sec-system .sys-tile-store svg{width:40px;height:42px}
  .sec-system .sys-card-title{font-size:20px;margin-top:0}
  .sec-system .sys-card-desc{font-size:15px}
  .sec-system .sys-mock{margin-top:18px;min-height:210px}
  .sec-system .sys-map{min-height:230px}
  .sec-system .sys-heat{top:52%;width:78%}
  .sec-system .sys-chip-biz{left:12px;top:12px}
  .sec-system .sys-chip-legend{left:12px;bottom:12px}
  .sec-system .sys-audit{padding:14px}
  .sec-system .sys-checks{gap:7px}
  .sec-system .sys-checks li{padding:7px 8px;font-size:12.5px;gap:7px}
  .sec-system .sys-feed{grid-template-columns:1fr;padding:14px;gap:14px}
  .sec-system .sys-msg,.sec-system .sys-ask{padding:16px}
  .sec-system .sys-pain{gap:14px;padding:18px 0}
}
@media (max-width: 360px){
  .sec-system .sys-checks{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .sec-system .sys-ring{animation:none}
  .sec-system .sys-more svg{transition:none}
}

/* QA pass: restore base eyebrow/title/lede rhythm (zeroed by the margin reset above), keep the accent phrase whole */
.sec-system .sec-title{margin-top:16px}
.sec-system .sys-problem-head .sec-lede{margin-top:20px}
.sec-system .sys-problem-head .sec-title .accent{display:block}

/* QA pass 2: teaser stays a teaser. The platform chips live in the full #ai section right below, so the card shows only the ask + answer. */
.sec-system .sys-srch .sys-ask-h,.sec-system .sys-srch .sys-tools{display:none}
.sec-system .sys-srch .sys-ask{gap:14px;padding:24px}
.sec-system .sys-srch .sys-ask-bar{padding:14px 16px;font-size:14.5px}
@media (max-width: 560px){
  .sec-system .sys-srch .sys-ask{padding:18px}
  .sec-system .sys-srch .sys-ans{margin-left:12px}
  .sec-system .sys-srch .sys-mock{min-height:248px}
}

/* Reviews card micro animation (8s loop): job done -> typing -> message -> link nudge -> chips. Only when JS adds .anim. */
.sec-system .sys-typing{position:absolute;right:0;bottom:0;display:none;gap:4px;align-items:center;height:34px;padding:0 13px;border-radius:17px 17px 6px 17px;background:var(--blue);box-shadow:0 10px 20px -12px rgba(8,96,250,.55)}
.sec-system .sys-typing i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.55}
.sec-system .sys-msg.anim .sys-typing{display:inline-flex}
.sec-system .sys-msg.anim .sys-dot-ok,
.sec-system .sys-msg.anim .sys-dot-ok path,
.sec-system .sys-msg.anim .sys-typing,
.sec-system .sys-msg.anim .sys-typing i,
.sec-system .sys-msg.anim .sys-bubble,
.sec-system .sys-msg.anim .sys-link,
.sec-system .sys-msg.anim .sys-arr,
.sec-system .sys-msg.anim .sys-tag,
.sec-system .sys-msg.anim .sys-tag-on path{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;animation-play-state:paused}
.sec-system .sys-msg.anim.play *{animation-play-state:running !important}
.sec-system .sys-msg.anim .sys-dot-ok{animation-name:rvPop}
.sec-system .sys-msg.anim .sys-dot-ok path{stroke-dasharray:14;animation-name:rvDraw1}
.sec-system .sys-msg.anim .sys-typing{transform-origin:100% 100%;animation-name:rvTyping}
.sec-system .sys-msg.anim .sys-typing i{animation:rvDot .9s ease-in-out infinite both paused}
.sec-system .sys-msg.anim .sys-typing i:nth-child(2){animation-delay:.15s}
.sec-system .sys-msg.anim .sys-typing i:nth-child(3){animation-delay:.3s}
.sec-system .sys-msg.anim .sys-bubble{transform-origin:100% 100%;animation-name:rvBubble}
.sec-system .sys-msg.anim .sys-link{animation-name:rvPress}
.sec-system .sys-msg.anim .sys-arr{animation-name:rvNudge}
.sec-system .sys-msg.anim .sys-tag:nth-child(1){animation-name:rvTag1}
.sec-system .sys-msg.anim .sys-tag:nth-child(2){animation-name:rvTag2}
.sec-system .sys-msg.anim .sys-tag:nth-child(3){animation-name:rvTag3}
.sec-system .sys-msg.anim .sys-tag-on path{stroke-dasharray:24;animation-name:rvDraw2}
@keyframes rvPop{0%{transform:scale(.4);opacity:0}5%{transform:scale(1.12);opacity:1}8%,93%{transform:none;opacity:1}98%,100%{transform:scale(.4);opacity:0}}
@keyframes rvDraw1{0%,4%{stroke-dashoffset:14}9%,100%{stroke-dashoffset:0}}
@keyframes rvTyping{0%,7%{opacity:0;transform:scale(.6)}10%,17%{opacity:1;transform:none}20%,100%{opacity:0;transform:scale(.85)}}
@keyframes rvDot{0%,60%,100%{transform:none;opacity:.55}30%{transform:translateY(-3px);opacity:1}}
@keyframes rvBubble{0%,17%{opacity:0;transform:translateY(10px) scale(.92)}23%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(4px) scale(.98)}}
@keyframes rvPress{0%,30%{transform:none}32.5%{transform:scale(.95)}36%,100%{transform:none}}
@keyframes rvNudge{0%,33%{transform:none}35.5%{transform:translateX(4px)}38%{transform:none}40.5%{transform:translateX(4px)}43%,100%{transform:none}}
@keyframes rvTag1{0%,25%{opacity:0;transform:translateY(6px) scale(.94)}29%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes rvTag2{0%,28%{opacity:0;transform:translateY(6px) scale(.94)}32%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes rvTag3{0%,31%{opacity:0;transform:translateY(6px) scale(.94)}35%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes rvDraw2{0%,34%{stroke-dashoffset:24}40%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.sec-system .sys-typing{display:none !important}.sec-system .sys-msg *{animation:none !important}}

/* Profile card micro animation (8s loop): play press + publish bar fills -> channels confirm top to bottom (350ms apart) -> hold -> reset. Only when JS adds .anim. */
.sec-system .sys-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.4);display:none;overflow:hidden}
.sec-system .sys-prog i{display:block;height:100%;background:var(--blue);transform-origin:0 50%}
.sec-system .sys-feed.anim .sys-prog{display:block}
.sec-system .sys-feed.anim .sys-chan-list li{position:relative}
.sec-system .sys-feed.anim .sys-chan-list li::after{content:"";position:absolute;inset:-1px;border-radius:10px;border:1px solid #bfe8cf;box-shadow:0 0 0 3px rgba(22,163,74,.1);opacity:0;pointer-events:none}
.sec-system .sys-feed.anim .sys-play,
.sec-system .sys-feed.anim .sys-prog,
.sec-system .sys-feed.anim .sys-prog i,
.sec-system .sys-feed.anim .sys-dot-ok,
.sec-system .sys-feed.anim .sys-dot-ok path,
.sec-system .sys-feed.anim .sys-chan-list li::after{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;animation-play-state:paused}
.sec-system .sys-feed.anim.play *,.sec-system .sys-feed.anim.play li::after{animation-play-state:running !important}
.sec-system .sys-feed.anim .sys-play{animation-name:pbPress}
.sec-system .sys-feed.anim .sys-prog{animation-name:pbBar}
.sec-system .sys-feed.anim .sys-prog i{animation-name:pbFill}
.sec-system .sys-feed.anim .sys-dot-ok path{stroke-dasharray:14}
.sec-system .sys-feed.anim li:nth-child(1) .sys-dot-ok{animation-name:pbCheck1}
.sec-system .sys-feed.anim li:nth-child(1) .sys-dot-ok path{animation-name:pbDraw1}
.sec-system .sys-feed.anim li:nth-child(1)::after{animation-name:pbRow1}
.sec-system .sys-feed.anim li:nth-child(2) .sys-dot-ok{animation-name:pbCheck2}
.sec-system .sys-feed.anim li:nth-child(2) .sys-dot-ok path{animation-name:pbDraw2}
.sec-system .sys-feed.anim li:nth-child(2)::after{animation-name:pbRow2}
.sec-system .sys-feed.anim li:nth-child(3) .sys-dot-ok{animation-name:pbCheck3}
.sec-system .sys-feed.anim li:nth-child(3) .sys-dot-ok path{animation-name:pbDraw3}
.sec-system .sys-feed.anim li:nth-child(3)::after{animation-name:pbRow3}
.sec-system .sys-feed.anim li:nth-child(4) .sys-dot-ok{animation-name:pbCheck4}
.sec-system .sys-feed.anim li:nth-child(4) .sys-dot-ok path{animation-name:pbDraw4}
.sec-system .sys-feed.anim li:nth-child(4)::after{animation-name:pbRow4}
.sec-system .sys-feed.anim li:nth-child(5) .sys-dot-ok{animation-name:pbCheck5}
.sec-system .sys-feed.anim li:nth-child(5) .sys-dot-ok path{animation-name:pbDraw5}
.sec-system .sys-feed.anim li:nth-child(5)::after{animation-name:pbRow5}
@keyframes pbPress{0%,2%{transform:none}4%{transform:scale(.92)}8%,100%{transform:none}}
@keyframes pbBar{0%{opacity:0}2%,91%{opacity:1}95%,100%{opacity:0}}
@keyframes pbFill{0%,3%{transform:scaleX(0)}15%,100%{transform:scaleX(1)}}
@keyframes pbCheck1{0%,17.5%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.1)}22.5%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:scale(.6)}}
@keyframes pbDraw1{0%,18.75%{stroke-dashoffset:14}23.75%,95%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:14}}
@keyframes pbRow1{0%,17.5%{opacity:0}19.5%{opacity:1}27.5%,100%{opacity:0}}
@keyframes pbCheck2{0%,21.875%{opacity:0;transform:scale(.4)}24.375%{opacity:1;transform:scale(1.1)}26.875%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:scale(.6)}}
@keyframes pbDraw2{0%,23.125%{stroke-dashoffset:14}28.125%,95%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:14}}
@keyframes pbRow2{0%,21.875%{opacity:0}23.875%{opacity:1}31.875%,100%{opacity:0}}
@keyframes pbCheck3{0%,26.25%{opacity:0;transform:scale(.4)}28.75%{opacity:1;transform:scale(1.1)}31.25%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:scale(.6)}}
@keyframes pbDraw3{0%,27.5%{stroke-dashoffset:14}32.5%,95%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:14}}
@keyframes pbRow3{0%,26.25%{opacity:0}28.25%{opacity:1}36.25%,100%{opacity:0}}
@keyframes pbCheck4{0%,30.625%{opacity:0;transform:scale(.4)}33.125%{opacity:1;transform:scale(1.1)}35.625%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:scale(.6)}}
@keyframes pbDraw4{0%,31.875%{stroke-dashoffset:14}36.875%,95%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:14}}
@keyframes pbRow4{0%,30.625%{opacity:0}32.625%{opacity:1}40.625%,100%{opacity:0}}
@keyframes pbCheck5{0%,35%{opacity:0;transform:scale(.4)}37.5%{opacity:1;transform:scale(1.1)}40%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:scale(.6)}}
@keyframes pbDraw5{0%,36.25%{stroke-dashoffset:14}41.25%,95%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:14}}
@keyframes pbRow5{0%,35%{opacity:0}37%{opacity:1}45%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.sec-system .sys-prog{display:none !important}.sec-system .sys-feed *,.sec-system .sys-feed li::after{animation:none !important}}

/* AI search answer: assistant-style reply, intro line + 3 local results; "Your Business" is the highlighted pick. Total answer height = 132px (same as the old skeleton card). */
.sec-system .sys-srch .sys-ans{gap:8px;padding:12px 12px 12px 14px}
.sec-system .sys-ai-intro{display:flex;align-items:center;gap:8px;height:16px}
.sec-system .sys-ai-av{flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:linear-gradient(150deg,#3f88f8,#0860fa);display:flex;align-items:center;justify-content:center}
.sec-system .sys-ai-av svg{width:10px;height:10px;fill:#fff}
.sec-system .sys-ai-intro .sys-skel{flex:1;max-width:72%;height:8px}
.sec-system .sys-res{display:flex;flex-direction:column;gap:5px}
.sec-system .sys-res li{position:relative;display:flex;align-items:center;gap:7px;height:24px;padding:0 8px;border-radius:8px;background:#f6f8fb;border:1px solid #eef2f7}
.sec-system .sys-res-ic{position:relative;z-index:1;flex:0 0 14px;display:flex}
.sec-system .sys-res-ic svg{width:14px;height:14px;fill:none;stroke:#b6bfcc;stroke-width:1.6;stroke-linejoin:round}
.sec-system .sys-res .sys-skel{height:7px;width:56%;background:#e3e9f2}
.sec-system .sys-res .sys-skel-s{width:42%}
.sec-system .sys-res-win::before{content:"";position:absolute;inset:-1px;border-radius:8px;background:var(--blue-soft);border:1px solid #cddffe}
.sec-system .sys-res-win .sys-res-ic svg{stroke:var(--blue);fill:#fff;stroke-width:1.8}
.sec-system .sys-res-name{position:relative;z-index:1;font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}

/* AI search card micro animation (8s loop): query types in -> answer card + intro -> 3 results pop in 200ms apart -> "Your Business" highlight + one glow pulse -> hold -> reset. Only when JS adds .anim. */
.sec-system .sys-srch .sys-q{position:relative}
.sec-system .sys-type{display:none;position:absolute;inset:0;background:#fff}
.sec-system .sys-type::before{content:"";position:absolute;left:1px;top:50%;width:2px;height:1.15em;margin-top:-.575em;border-radius:1px;background:var(--blue)}
.sec-system .sys-ask.anim .sys-type{display:block}
.sec-system .sys-ask.anim .sys-type-b{display:none}
.sec-system .sys-ask.anim.q2 .sys-type{bottom:50%}
.sec-system .sys-ask.anim.q2 .sys-type-b{display:block;top:50%;bottom:0;right:auto}
.sec-system .sys-ask.anim .sys-ask-bar{overflow:hidden}
.sec-system .sys-ask.anim .sys-res-win::after{content:"";position:absolute;inset:-1px;border-radius:8px;box-shadow:0 0 0 4px rgba(8,96,250,.14),0 6px 16px -6px rgba(8,96,250,.4);opacity:0;pointer-events:none}
.sec-system .sys-ask.anim .sys-type,
.sec-system .sys-ask.anim .sys-type::before,
.sec-system .sys-ask.anim .sys-ask-bar svg,
.sec-system .sys-ask.anim .sys-ans,
.sec-system .sys-ask.anim .sys-ai-intro,
.sec-system .sys-ask.anim .sys-ai-intro .sys-skel,
.sec-system .sys-ask.anim .sys-res li,
.sec-system .sys-ask.anim .sys-res-win::before,
.sec-system .sys-ask.anim .sys-res-win::after{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-fill-mode:both;animation-play-state:paused}
.sec-system .sys-ask.anim.play *,.sec-system .sys-ask.anim.play ::before,.sec-system .sys-ask.anim.play ::after{animation-play-state:running !important}
.sec-system .sys-ask.anim .sys-type{animation-name:aiType}
.sec-system .sys-ask.anim .sys-type::before{animation-name:aiCaret}
.sec-system .sys-ask.anim.q2 .sys-type{animation-name:aiTypeA}
.sec-system .sys-ask.anim.q2 .sys-type::before{animation-name:aiCaretA}
.sec-system .sys-ask.anim.q2 .sys-type-b{animation-name:aiTypeB}
.sec-system .sys-ask.anim.q2 .sys-type-b::before{animation-name:aiCaretB}
.sec-system .sys-ask.anim .sys-ask-bar svg{animation-name:aiMag}
.sec-system .sys-ask.anim .sys-ans{animation-name:aiCard}
.sec-system .sys-ask.anim .sys-ai-intro{animation-name:aiIntro}
.sec-system .sys-ask.anim .sys-ai-intro .sys-skel{transform-origin:0 50%;animation-name:aiIntroLine}
.sec-system .sys-ask.anim .sys-res li:nth-child(1){animation-name:aiRow1}
.sec-system .sys-ask.anim .sys-res li:nth-child(2){animation-name:aiRow2}
.sec-system .sys-ask.anim .sys-res li:nth-child(3){animation-name:aiRow3}
.sec-system .sys-ask.anim .sys-res-win::before{animation-name:aiWin}
.sec-system .sys-ask.anim .sys-res-win::after{animation-name:aiGlow}
/* typing sweep is linear (a keystroke cadence, not an ease); every other segment uses the shared ease-out */
@keyframes aiType{0%,3%{transform:none;opacity:1;animation-timing-function:linear}17%,94%{transform:translateX(100%);opacity:1}94.1%{transform:none;opacity:0}98%,100%{transform:none;opacity:1}}
@keyframes aiTypeA{0%,3%{transform:none;opacity:1;animation-timing-function:linear}11%,94%{transform:translateX(100%);opacity:1}94.1%{transform:none;opacity:0}98%,100%{transform:none;opacity:1}}
@keyframes aiTypeB{0%,11%{transform:none;opacity:1;animation-timing-function:linear}17%,94%{transform:translateX(100%);opacity:1}94.1%{transform:none;opacity:0}98%,100%{transform:none;opacity:1}}
@keyframes aiCaret{0%,18%{opacity:1}21%,95%{opacity:0}99%,100%{opacity:1}}
@keyframes aiCaretA{0%,10.5%{opacity:1}11%,95%{opacity:0}99%,100%{opacity:1}}
@keyframes aiCaretB{0%,10.5%{opacity:0}11%,18%{opacity:1}21%,100%{opacity:0}}
@keyframes aiMag{0%,17%{transform:none}19.5%{transform:scale(1.18)}23%,100%{transform:none}}
@keyframes aiCard{0%,21%{opacity:0;transform:translateY(6px)}25%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes aiIntro{0%,22.5%{opacity:0}26%,95%{opacity:1}96%,100%{opacity:0}}
@keyframes aiIntroLine{0%,23%{transform:scaleX(.2)}28%,95%{transform:none}96%,100%{transform:scaleX(.2)}}
@keyframes aiRow1{0%,30%{opacity:0;transform:scale(.96)}34%,95%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.96)}}
@keyframes aiRow2{0%,32.5%{opacity:0;transform:scale(.96)}36.5%,95%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.96)}}
@keyframes aiRow3{0%,35%{opacity:0;transform:scale(.96)}39%,95%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.96)}}
@keyframes aiWin{0%,41%{opacity:0}46%,95%{opacity:1}96%,100%{opacity:0}}
@keyframes aiGlow{0%,45%{opacity:0}50%{opacity:1}62%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.sec-system .sys-type{display:none !important}.sec-system .sys-ask *,.sec-system .sys-ask ::before,.sec-system .sys-ask ::after{animation:none !important}}
.sec-system .sys-lede-hl{font-weight:600;color:#dc2626}
.sec-system .sys-post-cta{display:inline-flex;align-items:center;gap:6px}
.sec-system .sys-post-g{width:14px;height:14px;flex:none}

/* Desktop fold: problem block + local pack (parts/sec-pack.css) fit one screen under the 64px sticky bar.
   "What We Do" (#system) lands the problem block 24px under the bar: scroll-padding 80 + margin -104 + section padding 112 = 88. */
@media (min-width: 1100px){
  .sec-system{scroll-margin-top:-104px}
  .sec-system .sys-problem{gap:56px}
  .sec-system .sec-title{font-size:clamp(36px,3.1vw,44px);margin-top:12px}
  .sec-system .sys-problem-head .sec-lede{margin-top:14px;font-size:17px;line-height:1.55}
  .sec-system .sys-pain{gap:16px;padding:12px 0}
  .sec-system .sys-pain-ic{flex-basis:40px;width:40px;height:40px;border-radius:11px}
  .sec-system .sys-pain-ic svg{width:20px;height:20px}
  .sec-system .sys-pain h3{font-size:17px;margin-bottom:3px}
  .sec-system .sys-pain p{font-size:14.5px;line-height:1.5}
}
.sec-system .sys-post-badge{gap:0;padding:5px 7px}
.sec-system .sys-tile .sys-tile-logo{width:28px;height:28px;display:block}

/* Overnight audit 2026-09-25: "How we approach AI search" link gets a 44px tap height (same visual position) */
.sec-system .sys-more{min-height:44px;margin-top:6px}

/* Phones + tablets (mobile-ux 2026-09-25): labels, chips and legends read at 13px minimum below 900px (desktop unchanged). */
@media (max-width: 899px){
  .sec-system .sys-panel-h{font-size:13px}
  .sec-system .sys-checks li{font-size:13px}
  .sec-system .sys-tag{font-size:13px}
  .sec-system .sys-post-text{font-size:13px;-webkit-line-clamp:3}
  .sec-system .sys-post-cta{font-size:13px}
  .sec-system .sys-post-av{font-size:11px}
  .sec-system .sys-res-name{font-size:13px}
}

/* Layout pass 2026-09-25: problem title centered on its own row; below it the Google pack mock (left) sits beside the 3 questions (right).
   Stacks title, mock, questions below 1100px. Selectors carry .sys-problem so they outrank parts/sec-pack.css (loaded after this file). */
.sec-system .sys-problem{grid-template-columns:minmax(0,1fr);gap:36px}
.sec-system .sys-problem-row{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
.sec-system .sys-problem .sys-pack{margin:0;max-width:none}
@media (min-width: 900px){
  .sec-system .sys-problem{gap:44px}
  .sec-system .sys-problem-head{text-align:center}
  .sec-system .sys-problem-head .sec-title{max-width:960px;margin-inline:auto}
  .sec-system .sys-problem-head .sec-lede{max-width:720px;margin-inline:auto}
  .sec-system .sys-problem .sys-pains{width:100%;max-width:760px;margin-inline:auto}
}
@media (min-width: 1100px){
  .sec-system .sys-problem{gap:36px}
  .sec-system .sys-problem-row{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:52px;align-items:center}
  .sec-system .sys-problem .sys-pains{max-width:none;margin:0}
  /* Narrower mock: body starts flush left, list gets the wider column, actions stack so business names keep room */
  .sec-system .sys-problem .sys-pack{--rh:104px}
  .sec-system .sys-problem .gp-tabs,.sec-system .sys-problem .gp-body{margin-left:0}
  .sec-system .sys-problem .gp-body{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px}
  .sec-system .sys-problem .gp-row{gap:12px;padding:0 8px}
  .sec-system .sys-problem .gp-name{font-size:17px}
  .sec-system .sys-problem .gp-acts{flex-direction:column;gap:6px}
  .sec-system .sys-problem .gp-act{width:52px;gap:2px;font-size:11.5px;line-height:14px}
  .sec-system .sys-problem .gp-act i{width:32px;height:32px}
  .sec-system .sys-problem .gp-act svg{width:17px;height:17px}
  /* Narrower map: competitor pin labels stay inside the frame */
  .sec-system .sys-problem .gp-lbl{font-size:11.5px}
  .sec-system .sys-problem .gp-pin-1,.sec-system .sys-problem .gp-pin-2{margin-left:-18px}
}
/* parts/sec-pack.css */
/* Google local pack mock, sits between the problem block and "The system" in .sec-system.
   Rows share one fixed height (--rh) so the translateY swap lands exactly on a slot. Only transform + opacity animate.
   Default (no JS, no IO, reduced motion) = END state: Your Business on top, highlighted. JS adds .anim; IO toggles .play. */
.sec-system .sys-pack{--rh:146px;max-width:1080px;margin:88px auto 0;padding:26px 28px 24px;background:#fff;border:1px solid #e8eef7;border-radius:24px;
  box-shadow:0 1px 2px rgba(15,35,80,.05),0 22px 48px -20px rgba(37,99,235,.22);font-family:inherit;color:#202124}

/* Search header */
.sec-system .gp-top{display:flex;align-items:center;gap:24px}
.sec-system .gp-logo{flex:none;display:inline-flex;font-size:30px;line-height:1;font-weight:500;letter-spacing:-.045em;font-variation-settings:"opsz" 32}
.sec-system .gp-logo b{font-weight:500}
.sec-system .gp-logo .gb{color:#4285F4}.sec-system .gp-logo .gr{color:#EA4335}.sec-system .gp-logo .gy{color:#FBBC05}.sec-system .gp-logo .gg{color:#34A853}
.sec-system .gp-bar{flex:1 1 auto;min-width:0;max-width:640px;display:flex;align-items:center;gap:12px;height:48px;padding:0 8px 0 22px;border:1px solid #dfe1e5;border-radius:999px;
  box-shadow:0 1px 6px rgba(32,33,36,.12)}
.sec-system .gp-q{flex:1 1 auto;min-width:0;display:flex;align-items:center;font-size:16px;color:#202124;white-space:nowrap;overflow:hidden}
.sec-system .gp-caret{flex:none;width:1.5px;height:20px;margin-left:2px;background:#202124;opacity:0}
.sec-system .gp-ics{flex:none;display:flex;align-items:center;gap:14px}
.sec-system .gp-ics svg{width:22px;height:22px;display:block}
.sec-system .gp-x{fill:none;stroke:#70757a;stroke-width:1.8;stroke-linecap:round}
.sec-system .gp-sep{width:1px;height:26px;background:#dadce0}
.sec-system .gp-lens path{fill:none;stroke-width:2;stroke-linecap:round}
.sec-system .gp-go{fill:none;stroke:#4285F4;stroke-width:2.2;stroke-linecap:round;margin-right:6px}

/* Tabs + chips: single line, clipped on small screens (never page scroll) */
.sec-system .gp-tabs,.sec-system .gp-chips{display:flex;white-space:nowrap;overflow:hidden}
.sec-system .gp-tabs{gap:26px;margin:16px 0 0 108px;border-bottom:1px solid #ebedf0;font-size:14px;color:#5f6368}
.sec-system .gp-tabs span{padding:10px 0 11px;flex:none}
.sec-system .gp-tabs .on{color:#202124;font-weight:600;box-shadow:inset 0 -3px 0 #202124}
.sec-system .gp-tabs .gp-tools{margin-left:auto}
.sec-system .gp-chips{gap:8px;margin:14px 0 0 108px}
.sec-system .gp-chips span{flex:none;padding:7px 14px;border:1px solid #dadce0;border-radius:10px;font-size:13.5px;font-weight:500;color:#3c4043;background:#fff}

/* Body: list left, map right */
.sec-system .gp-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;margin:22px 0 0 108px}
.sec-system .gp-h{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#202124;margin:0 0 8px}
.sec-system .gp-rows{position:relative;margin:0;padding:0;list-style:none;height:calc(var(--rh) * 3);
  background:linear-gradient(#ebedf0,#ebedf0) 0 var(--rh)/100% 1px no-repeat,linear-gradient(#ebedf0,#ebedf0) 0 calc(var(--rh) * 2)/100% 1px no-repeat}
.sec-system .gp-row{position:relative;display:flex;align-items:center;gap:16px;height:var(--rh);padding:0 12px;box-sizing:border-box;transform-origin:50% 50%}
.sec-system .gp-row::before{content:"";position:absolute;inset:4px -2px;border-radius:14px;background:#f1f6ff;border:1px solid #d6e5ff;
  box-shadow:0 14px 30px -14px rgba(8,96,250,.45);opacity:0;z-index:-1}
.sec-system .gp-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:20px;color:#70757a}
.sec-system .gp-info > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-system .gp-name{font-size:20px;line-height:26px;font-weight:500;color:#1a0dab;letter-spacing:-.01em;margin-bottom:2px}
.sec-system .gp-you .gp-name{color:var(--blue);font-weight:600}
.sec-system .gp-rt{color:#202124}
.sec-system .gp-stars{color:#fbbc04;letter-spacing:.5px;font-size:13px}
.sec-system .gp-stat{color:#70757a}
.sec-system .gp-stat b{color:#188038;font-weight:500}
.sec-system .gp-rev{display:flex;align-items:center;gap:8px;color:#4d5156}
.sec-system .gp-q2{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sec-system .gp-av{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#e8eaed;overflow:hidden}
.sec-system .gp-av svg{width:16px;height:16px;margin-top:3px;fill:#9aa0a6}
.sec-system .gp-acts{flex:none;display:flex;gap:8px}
.sec-system .gp-act{display:flex;flex-direction:column;align-items:center;gap:5px;width:60px;font-size:12.5px;line-height:16px;font-weight:500;color:#1a73e8;white-space:nowrap}
.sec-system .gp-act i{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid #dadce0;background:#fff}
.sec-system .gp-act svg{width:20px;height:20px;display:block}
.sec-system .gp-ic-web{fill:none;stroke:#1a73e8;stroke-width:1.7}
.sec-system .gp-ic-dir .gp-dia{fill:#1a73e8}
.sec-system .gp-ic-dir .gp-arr{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sec-system .gp-more{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;height:40px;border-radius:999px;background:#f1f3f4;
  font-size:14px;font-weight:500;color:#202124}
.sec-system .gp-more svg{width:8px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* END state (static default) */
.sec-system .gp-you{z-index:2;transform:translateY(calc(var(--rh) * -2))}
.sec-system .gp-you::before{opacity:1}
.sec-system .gp-r1,.sec-system .gp-r2{transform:translateY(var(--rh))}

/* Map */
.sec-system .gp-map{position:relative;overflow:hidden;border-radius:16px;border:1px solid #e3e8ef;min-height:100%}
.sec-system .gp-map-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sec-system .gp-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#ea4335;border:2px solid #fff;box-shadow:0 1px 3px rgba(60,20,20,.3)}
.sec-system .gp-pin{position:absolute;width:0;height:0;z-index:1}
.sec-system .gp-pin svg{position:absolute;left:-13px;bottom:-2px;width:26px;height:33px;fill:#ea4335;filter:drop-shadow(0 3px 4px rgba(120,20,20,.3));transform-origin:50% 100%}
.sec-system .gp-lbl{position:absolute;left:16px;bottom:9px;white-space:nowrap;font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:#b3261e;
  text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff}
.sec-system .gp-pin-you{z-index:2}
.sec-system .gp-pin-you svg{fill:var(--blue);filter:drop-shadow(0 4px 6px rgba(8,60,180,.4));transform:scale(1.2)}
.sec-system .gp-pin-you .gp-lbl{color:var(--blue)}
.sec-system .gp-lbl-on{position:absolute;left:-8px;top:-5px;padding:5px 8px;border-radius:8px;background:var(--blue);color:#fff;text-shadow:none;
  box-shadow:0 6px 14px -6px rgba(8,96,250,.6);opacity:1}
.sec-system .gp-open{position:absolute;top:12px;right:12px;z-index:3;display:flex;align-items:center;gap:6px;height:32px;padding:0 14px 0 10px;border-radius:999px;
  background:#fff;box-shadow:0 1px 4px rgba(32,33,36,.28);font-size:13px;font-weight:500;color:#3c4043;white-space:nowrap}
.sec-system .gp-open svg{width:16px;height:16px;fill:none;stroke:#1a73e8;stroke-width:2}
.sec-system .gp-zoom{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(15,35,80,.2);overflow:hidden}
.sec-system .gp-zoom i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-style:normal;font-size:18px;line-height:1;color:#5f6368}
.sec-system .gp-zoom i + i{border-top:1px solid #ebedf0}

/* ---------- 6.5s loop ---------- */
.sec-system .sys-pack.anim .gp-row,.sec-system .sys-pack.anim .gp-row::before,.sec-system .sys-pack.anim .gp-pin-you svg,
.sec-system .sys-pack.anim .gp-lbl-on,.sec-system .sys-pack.anim .gp-caret{
  animation-duration:6.5s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:linear;animation-play-state:paused}
.sec-system .sys-pack.anim.play .gp-row,.sec-system .sys-pack.anim.play .gp-row::before,.sec-system .sys-pack.anim.play .gp-pin-you svg,
.sec-system .sys-pack.anim.play .gp-lbl-on,.sec-system .sys-pack.anim.play .gp-caret{animation-play-state:running}
.sec-system .sys-pack.anim .gp-r1,.sec-system .sys-pack.anim .gp-r2{animation-name:gpDown}
.sec-system .sys-pack.anim .gp-you{animation-name:gpUp}
.sec-system .sys-pack.anim .gp-you::before{animation-name:gpGlow}
.sec-system .sys-pack.anim .gp-pin-you svg{animation-name:gpPin}
.sec-system .sys-pack.anim .gp-lbl-on{animation-name:gpLbl}
.sec-system .sys-pack.anim .gp-caret{animation-name:gpCaret}
/* 0-1.2s start state · 1.2-1.44s lift · 1.44-2.4s swap · hold · 5.7-6s fade · reset while hidden · 6.05-6.5s fade in */
@keyframes gpUp{
  0%,18.46%{transform:translateY(0) scale(1);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  22.15%{transform:translateY(0) scale(1.02);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  36.92%{transform:translateY(calc(var(--rh) * -2)) scale(1.02);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  43.08%{transform:translateY(calc(var(--rh) * -2)) scale(1)}
  87.69%{transform:translateY(calc(var(--rh) * -2)) scale(1);opacity:1}
  92%{transform:translateY(calc(var(--rh) * -2)) scale(1);opacity:0}
  92.62%{transform:translateY(0) scale(1);opacity:0}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes gpDown{
  0%,22.15%{transform:translateY(0);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  36.92%{transform:translateY(var(--rh))}
  87.69%{transform:translateY(var(--rh));opacity:1}
  92%{transform:translateY(var(--rh));opacity:0}
  92.62%{transform:translateY(0);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@keyframes gpGlow{0%,18.46%{opacity:0}24.62%{opacity:1}87.69%{opacity:1}92%,100%{opacity:0}}
@keyframes gpPin{
  0%,20.92%{transform:scale(1) translateY(0);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  29.54%{transform:scale(1.36) translateY(-5px);animation-timing-function:cubic-bezier(.5,0,.5,1)}
  36.92%{transform:scale(1.14) translateY(0)}
  43.08%{transform:scale(1.2) translateY(0)}
  87.69%{transform:scale(1.2) translateY(0)}
  93.85%,100%{transform:scale(1) translateY(0)}
}
@keyframes gpLbl{0%,23.38%{opacity:0}32%{opacity:1}87.69%{opacity:1}92%,100%{opacity:0}}
@keyframes gpCaret{0%,7.38%{opacity:1}7.69%,15.38%{opacity:0}15.69%,18.46%{opacity:1}18.77%,100%{opacity:0}}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .sec-system .gp-tabs,.sec-system .gp-chips,.sec-system .gp-body{margin-left:0}
}
@media (max-width: 899px){
  .sec-system .sys-pack{--rh:140px;margin-top:56px;padding:20px 20px 18px}
  .sec-system .gp-body{grid-template-columns:minmax(0,1fr);gap:16px}
  .sec-system .gp-map{order:-1;height:170px;min-height:0}
  .sec-system .gp-tabs,.sec-system .gp-chips{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .sec-system .gp-tabs .gp-tools{display:none}
}
@media (max-width: 560px){
  .sec-system .sys-pack{--rh:126px;padding:16px 14px 16px;border-radius:20px}
  .sec-system .gp-top{flex-direction:column;align-items:stretch;gap:12px}
  .sec-system .gp-logo{font-size:24px;align-self:center}
  .sec-system .gp-bar{height:44px;padding-left:16px;gap:10px}
  .sec-system .gp-q{font-size:15px}
  .sec-system .gp-ics{gap:10px}
  .sec-system .gp-ics .gp-x,.sec-system .gp-ics .gp-sep,.sec-system .gp-ics .gp-lens{display:none}
  .sec-system .gp-tabs{gap:20px;margin-top:10px;font-size:13.5px}
  .sec-system .gp-chips span{padding:6px 12px;font-size:13px}
  .sec-system .gp-map{height:150px}
  .sec-system .gp-pin-1 .gp-lbl,.sec-system .gp-pin-2 .gp-lbl{display:none}
  .sec-system .gp-h{font-size:19px}
  .sec-system .gp-row{gap:12px;padding:0 8px}
  .sec-system .gp-row::before{inset:4px -4px}
  .sec-system .gp-info{font-size:13px;line-height:18px;gap:1px}
  .sec-system .gp-name{font-size:16.5px;line-height:22px;margin-bottom:1px}
  .sec-system .gp-av{width:17px;height:17px}.sec-system .gp-av svg{width:13px;height:13px}
  .sec-system .gp-rev{gap:6px}
  .sec-system .gp-acts{flex-direction:column;gap:6px}
  .sec-system .gp-act{width:52px;gap:2px;font-size:11px;line-height:13px}
  .sec-system .gp-act i{width:34px;height:34px}
  .sec-system .gp-act svg{width:17px;height:17px}
  .sec-system .gp-open{top:10px;right:10px;height:28px;padding:0 11px 0 8px;font-size:12px}
  .sec-system .gp-open svg{width:14px;height:14px}
}
@media (max-width: 360px){
  .sec-system .gp-ics .gp-mic{display:none}
  .sec-system .gp-q{font-size:14.5px}
  .sec-system .sys-pack{padding-left:10px;padding-right:10px}
  .sec-system .gp-row{gap:8px;padding:0 2px}
  .sec-system .gp-row::before{inset:4px -2px}
  .sec-system .gp-info{font-size:11.5px;letter-spacing:-.012em}
  .sec-system .gp-act{width:44px;font-size:10.5px}
  .sec-system .gp-act i{width:30px;height:30px}
  .sec-system .gp-act svg{width:15px;height:15px}
  .sec-system .gp-stars{letter-spacing:0;font-size:10.5px}
  .sec-system .gp-name{font-size:15px}
}

/* Desktop fold (with the problem-block rules at the end of parts/sec-system.css): compact pack so problem + pack fit one screen.
   No chips, no review line; --rh drives the swap so the animation still lands exactly. Short screens get a uniform zoom (floor .8). */
@media (min-width: 1100px){
  .sec-system .sys-pack{--rh:90px;margin-top:32px;padding:18px 24px 18px}
  .sec-system .gp-logo{font-size:26px}
  .sec-system .gp-bar{height:42px}
  .sec-system .gp-q{font-size:15px}
  .sec-system .gp-ics svg{width:20px;height:20px}
  .sec-system .gp-sep{height:22px}
  .sec-system .gp-tabs{margin-top:8px;font-size:13.5px}
  .sec-system .gp-tabs span{padding:8px 0 9px}
  .sec-system .gp-chips{display:none}
  .sec-system .gp-rev{display:none}
  .sec-system .gp-body{margin-top:12px;gap:24px}
  .sec-system .gp-h{font-size:18px;line-height:24px;margin-bottom:4px}
  .sec-system .gp-info{font-size:13.5px;line-height:19px;gap:1px}
  .sec-system .gp-name{font-size:18px;line-height:24px;margin-bottom:1px}
  .sec-system .gp-act{gap:4px;font-size:12px;line-height:15px}
  .sec-system .gp-act i{width:38px;height:38px}
  .sec-system .gp-act svg{width:19px;height:19px}
  .sec-system .gp-more{margin-top:10px;height:34px;font-size:13.5px}
}
/* Zoom steps by viewport height: pack bottom stays inside a 1280x800 / 1536x864 screen when the problem block sits under the sticky bar */
@media (min-width: 1100px) and (max-height: 885px){.sec-system .sys-pack{zoom:.94}}
@media (min-width: 1100px) and (max-height: 857px){.sec-system .sys-pack{zoom:.88}}
@media (min-width: 1100px) and (max-height: 828px){.sec-system .sys-pack{zoom:.81}}

/* Overnight audit 2026-09-25: "Directions" (47px) no longer spills out of its 44px action column on <=360px phones */
@media (max-width: 360px){.sec-system .gp-act{width:48px}}

/* Phones + tablets (mobile-ux 2026-09-25): labels, chips and legends read at 13px minimum below 900px (desktop unchanged). */
/* Google results mockup: the map chip and pin label go to 13px; listing text in the mockup stays at 12px at 360px and below
   and the Directions/Website action labels and stars at 11px (logged exceptions: larger would not fit the 44-52px action column). */
@media (max-width: 899px){
  .sec-system .gp-lbl{font-size:13px}
}
@media (max-width: 560px){
  .sec-system .gp-open{font-size:13px}
}
@media (max-width: 360px){
  .sec-system .gp-info{font-size:12px}
  .sec-system .gp-act{width:50px;font-size:11px;letter-spacing:-.03em}
  .sec-system .gp-stars{font-size:11px}
}
/* parts/sec-results.css */
/* Strip directly under the Google local pack mock (.sys-pack) in .sec-system. Now holds real Google review testimonials (.ts-*);
   the older .rs-* result-card rules are kept for when verified client results arrive. Same content width as .sys-pack (1080px). */
.sec-system .sys-results{max-width:1080px;margin:40px auto 0}
.sec-system .rs-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.sec-system .rs-title{margin:0;font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:-.028em;font-weight:750;color:var(--ink);font-variation-settings:"opsz" 32}

.sec-system .rs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:22px 0 0;padding:0;list-style:none}
.sec-system .rs-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:20px 22px 18px;background:#fff;border:1px solid #e1e9f6;border-radius:20px;
  box-shadow:0 1px 2px rgba(15,35,80,.05),0 18px 40px -22px rgba(37,99,235,.28)}

/* Top row: trade avatar left, Placeholder pill right */
.sec-system .rs-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sec-system .rs-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blue-soft);border:1px solid #d6e5ff;color:var(--blue)}
.sec-system .rs-av svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sec-system .rs-ph{flex:none;padding:4px 9px;border-radius:999px;background:#f1f3f6;border:1px solid #e3e7ed;font-size:11px;line-height:14px;font-weight:600;letter-spacing:.02em;color:#6b7383}

.sec-system .rs-who{display:flex;flex-direction:column;gap:2px;margin-top:14px;min-width:0}
.sec-system .rs-name{font-size:16px;line-height:22px;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.sec-system .rs-sub{font-size:13.5px;line-height:19px;color:var(--muted)}

/* Metrics: rank jump (primary) then calls (secondary) */
.sec-system .rs-metrics{display:flex;flex-direction:column;margin-top:16px;padding-top:16px;margin-bottom:16px;border-top:1px solid #edf1f8}
.sec-system .rs-rank{display:flex;align-items:baseline;gap:8px;white-space:nowrap;font-size:clamp(32px,2.9vw,38px);line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--ink-2);font-variation-settings:"opsz" 32}
.sec-system .rs-arr,.sec-system .rs-to{color:var(--blue)}
.sec-system .rs-arr{font-weight:600;font-size:.8em;transform:translateY(-.04em)}
.sec-system .rs-lbl{margin-top:6px;font-size:13.5px;line-height:18px;color:var(--muted)}
.sec-system .rs-m-calls{margin-top:14px}
.sec-system .rs-up{display:inline-flex;align-items:center;gap:6px;font-size:24px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--green)}
.sec-system .rs-up svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.sec-system .rs-time{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:12px;border-top:1px dashed #e1e7f1;font-size:13px;line-height:18px;font-weight:600;color:var(--ink-2)}
.sec-system .rs-time svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 700-1099: 2x2 */
@media (max-width: 1099px){
  .sec-system .rs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-system .rs-metrics{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;align-items:end}
  .sec-system .rs-m-calls{margin-top:0}
}
/* <700: single column, metrics side by side to keep each card short */
@media (max-width: 699px){
  .sec-system .sys-results{margin-top:32px}
  .sec-system .rs-grid{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:18px}
  .sec-system .rs-card{padding:16px 16px 14px;border-radius:18px}
  .sec-system .rs-metrics{margin-top:14px;padding-top:14px}
  .sec-system .rs-rank{font-size:32px;gap:6px}
  .sec-system .rs-up{font-size:22px}
  .sec-system .rs-lbl{font-size:13px}
}
@media (max-width: 360px){
  .sec-system .rs-card{padding:14px 12px 12px}
  .sec-system .rs-rank{font-size:28px;gap:5px}
  .sec-system .rs-up{font-size:20px;gap:4px}
  .sec-system .rs-up svg{width:15px;height:15px}
  .sec-system .rs-lbl{font-size:12.5px}
}

/* Testimonials (real Google reviews, verbatim; see comment in parts/sec-system.html) */

/* Single featured review (.ts-feature): one Google review, set large on purpose. */
/* parts/sec-ai.css */
/* Section: AI search. All selectors scoped under .sec-ai. Deeper tint band to break the white rhythm. */
.sec-ai{overflow:clip;isolation:isolate;
  background:linear-gradient(180deg,#fff 0,#eef4ff 104px,#e7efff 55%,#edf3ff calc(100% - 104px),#fff 100%)}
.sec-ai .ai-bg{position:absolute;inset:0;pointer-events:none;z-index:-1;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%)}
.sec-ai .ai-bg span{position:absolute;border-radius:50%;filter:blur(80px)}
.sec-ai .ai-glow-a{width:620px;height:520px;right:-120px;top:4%;background:rgba(8,96,250,.16)}
.sec-ai .ai-glow-b{width:520px;height:420px;left:-180px;bottom:-8%;background:rgba(74,140,246,.14)}
.sec-ai .ai-bg .ai-dots{inset:0;border-radius:0;filter:none;
  background-image:radial-gradient(rgba(8,96,250,.14) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 72% 42%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 72% 42%,#000 0%,transparent 75%)}
.sec-ai h2,.sec-ai h3,.sec-ai p,.sec-ai ul{margin-top:0}
.sec-ai ul{list-style:none;padding:0;margin-bottom:0}

/* ---------- Top: copy + visual ---------- */
.sec-ai .ai-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(40px,5vw,80px);align-items:center}
.sec-ai .eyebrow{background:#fff;box-shadow:0 4px 12px -6px rgba(8,96,250,.35)}
.sec-ai .ai-eb-ic{width:13px;height:13px;fill:var(--blue)}
.sec-ai .sec-title{margin-top:16px;text-wrap:balance;max-width:600px}
.sec-ai .sec-title .accent{display:block}
.sec-ai .ai-line{margin:22px 0 0;max-width:560px;font-size:clamp(19px,1.8vw,23px);line-height:1.4;font-weight:650;letter-spacing:-.02em;color:var(--ink-2);text-wrap:pretty;
  padding-left:18px;border-left:3px solid var(--blue)}
.sec-ai .sec-lede{margin-top:16px;max-width:540px;text-wrap:pretty}

.sec-ai .ai-where{margin-top:34px}
.sec-ai .ai-where-h{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6b7a99}
.sec-ai .ai-chips{display:flex;flex-wrap:wrap;gap:8px}
.sec-ai .ai-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px 0 12px;border-radius:999px;background:#fff;
  border:1px solid #dbe5f6;box-shadow:0 1px 2px rgba(15,35,80,.05),0 6px 14px -8px rgba(22,70,170,.28);
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.sec-ai .ai-chip img{flex:none;display:block;width:20px;height:20px}

/* ---------- Chat mock ---------- */
.sec-ai .ai-visual{position:relative}
.sec-ai .ai-visual::before{content:"";position:absolute;inset:8% -4% -6% 6%;border-radius:32px;background:linear-gradient(160deg,rgba(8,96,250,.18),rgba(8,96,250,0) 70%);transform:rotate(3deg);z-index:0}
.sec-ai .ai-chat{position:relative;z-index:1;background:#fff;border:1px solid #e3eaf6;border-radius:26px;
  box-shadow:0 1px 2px rgba(15,35,80,.06),0 30px 70px -28px rgba(22,70,170,.42),0 10px 24px -14px rgba(22,70,170,.16);overflow:hidden}
.sec-ai .ai-chat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #eef2f8}
.sec-ai .ai-chat-app{display:inline-flex;align-items:center;gap:7px;font-size:19px;font-weight:700;letter-spacing:-.02em;color:#000;line-height:1}
.sec-ai .ai-chat-app img{display:block;width:22px;height:22px}

.sec-ai .ai-chat-body{padding:24px 22px 8px;display:flex;flex-direction:column;gap:20px}
.sec-ai .ai-ask{align-self:flex-end;max-width:82%;margin:0;background:var(--ink);color:#fff;border-radius:20px 20px 6px 20px;padding:12px 16px;
  font-size:15px;line-height:1.4;font-weight:500;letter-spacing:-.01em;box-shadow:0 12px 24px -14px rgba(5,7,15,.55)}
.sec-ai .ai-answer{display:flex;gap:12px;align-items:flex-start}
.sec-ai .ai-avatar{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:linear-gradient(150deg,#3b82f6,#0860fa);display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -6px rgba(8,96,250,.6)}
.sec-ai .ai-avatar svg{width:15px;height:15px;fill:#fff}
.sec-ai .ai-answer-main{position:relative;flex:1;min-width:0}
.sec-ai .ai-a-text{margin:5px 0 14px;font-size:15px;line-height:1.45;font-weight:500;color:var(--ink-2)}
.sec-ai .ai-opts{display:flex;flex-direction:column;gap:8px}
.sec-ai .ai-opt{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 12px;border-radius:14px;background:var(--bg-soft);border:1px solid #edf1f8}
.sec-ai .ai-opt-you{position:relative;background:#fff;border:1.5px solid var(--blue);box-shadow:0 0 0 4px rgba(8,96,250,.1),0 12px 24px -14px rgba(8,96,250,.55)}
.sec-ai .ai-opt-pin{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:var(--blue-soft);display:inline-flex;align-items:center;justify-content:center}
.sec-ai .ai-opt-pin svg{width:18px;height:18px}
.sec-ai .ai-opt-pin path{fill:var(--blue)}
.sec-ai .ai-opt-pin circle{fill:#fff}
.sec-ai .ai-opt-pin-mute{background:#e6ebf3}
.sec-ai .ai-opt-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sec-ai .ai-opt-txt b{font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.2}
.sec-ai .ai-opt-txt span{font-size:13px;font-weight:500;color:var(--muted);line-height:1.2}
.sec-ai .ai-opt-tag{flex:0 0 auto;font-size:12px;font-weight:600;color:#12803a;background:#eefaf2;border:1px solid #cdeeda;border-radius:999px;padding:4px 9px;white-space:nowrap}
.sec-ai .ai-bar{display:block;height:9px;border-radius:99px;background:#dde4ef}
.sec-ai .ai-bar.w1{width:58%}.sec-ai .ai-bar.w2{width:38%;background:#e7ecf4}
.sec-ai .ai-bar.w3{width:48%}.sec-ai .ai-bar.w4{width:30%;background:#e7ecf4}

.sec-ai .ai-chat-input{display:flex;align-items:center;justify-content:space-between;margin:16px 18px 18px;height:48px;padding:0 6px 0 16px;border-radius:999px;
  background:var(--bg-soft);border:1px solid #e6ecf5;font-size:14px;color:#8a94a8}
.sec-ai .ai-send{width:36px;height:36px;border-radius:50%;background:var(--blue);display:inline-flex;align-items:center;justify-content:center}
.sec-ai .ai-send svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Typing indicator: only exists with JS + motion allowed */
.sec-ai .ai-typing{display:none}

/* ---------- Stream-in (transform/opacity only) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .sec-ai .ai-typing{position:absolute;left:0;top:6px;display:inline-flex;gap:5px;padding:10px 12px;border-radius:14px;background:var(--bg-soft);opacity:0}
  .js .sec-ai .ai-typing i{width:7px;height:7px;border-radius:50%;background:#9fb4d8}
  .js .sec-ai .ai-ask,.js .sec-ai .ai-chat .s1,.js .sec-ai .ai-chat .s2,.js .sec-ai .ai-chat .s3,.js .sec-ai .ai-chat .s4{opacity:0}
  .js .sec-ai .ai-chat.in .ai-ask{animation:ai-in .5s var(--ease-out) .35s both}
  .js .sec-ai .ai-chat.in .ai-typing{animation:ai-typing-life 1s linear .8s both}
  .js .sec-ai .ai-chat.in .ai-typing i{animation:ai-dot .9s ease-in-out .8s 2 both}
  .js .sec-ai .ai-chat.in .ai-typing i:nth-child(2){animation-delay:.95s}
  .js .sec-ai .ai-chat.in .ai-typing i:nth-child(3){animation-delay:1.1s}
  .js .sec-ai .ai-chat.in .s1{animation:ai-in .45s var(--ease-out) 1.8s both}
  .js .sec-ai .ai-chat.in .s2{animation:ai-in-pop .55s var(--ease-out) 2.05s both}
  .js .sec-ai .ai-chat.in .s3{animation:ai-in .45s var(--ease-out) 2.25s both}
  .js .sec-ai .ai-chat.in .s4{animation:ai-in .45s var(--ease-out) 2.4s both}
  .sec-ai .ai-chip{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
  @media (hover:hover){.sec-ai .ai-chip:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(15,35,80,.05),0 10px 20px -10px rgba(22,70,170,.4)}}
}
@keyframes ai-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ai-in-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ai-typing-life{0%{opacity:0}10%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes ai-dot{0%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}

/* ---------- What we do ---------- */

/* ---------- Responsive ---------- */
@media (max-width: 899px){
  .sec-ai .ai-stage{grid-template-columns:1fr;gap:48px}
  .sec-ai .ai-visual{max-width:560px;width:100%;margin:0 auto}
  .sec-ai .ai-glow-a{width:360px;height:320px}
  .sec-ai .ai-glow-b{width:320px;height:280px}
  .sec-ai .ai-bg .ai-dots{-webkit-mask-image:radial-gradient(ellipse 80% 40% at 60% 62%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse 80% 40% at 60% 62%,#000 0%,transparent 75%)}
}
@media (max-width: 560px){
  .sec-ai .ai-line{padding-left:14px}
  .sec-ai .ai-chip{height:36px;font-size:14px;padding:0 13px 0 11px}
  .sec-ai .ai-chat{border-radius:22px}
  .sec-ai .ai-chat-top{padding:14px 16px}
  .sec-ai .ai-chat-body{padding:20px 14px 4px;gap:16px}
  .sec-ai .ai-answer{gap:10px}
  .sec-ai .ai-avatar{flex-basis:28px;width:28px;height:28px}
  .sec-ai .ai-opt{gap:10px;padding:9px 10px;min-height:54px}
  .sec-ai .ai-opt-pin{flex-basis:30px;width:30px;height:30px}
  .sec-ai .ai-opt-tag{display:none}
  .sec-ai .ai-chat-input{margin:14px 14px 14px}
  .sec-ai .ai-visual::before{inset:6% -2% -4% 4%}
}
.sec-ai .ai-window{display:block;margin-top:10px;font-weight:600;color:var(--ink)}
.sec-ai .ai-window-red{color:#dc2626}

/* ---------- Real ChatGPT proof video ---------- */
.sec-ai .ai-proof{margin:28px 0 0;max-width:560px;padding:8px 8px 0;background:#fff;border:1px solid #e1e9f6;border-radius:22px;
  box-shadow:0 1px 2px rgba(15,35,80,.05),0 22px 48px -22px rgba(37,99,235,.3)}
.sec-ai .ai-proof-win{border-radius:15px;overflow:hidden;background:#000;border:1px solid #e3e9f3}
.sec-ai .ai-proof-bar{display:flex;align-items:center;gap:12px;height:34px;padding:0 12px;background:#f3f6fb;border-bottom:1px solid #e3e9f3}
.sec-ai .ai-proof-dots{display:inline-flex;gap:6px;flex:none}
.sec-ai .ai-proof-dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.sec-ai .ai-proof-dots i:nth-child(2){background:#febc2e}
.sec-ai .ai-proof-dots i:nth-child(3){background:#28c840}
.sec-ai .ai-proof-url{flex:1;min-width:0;max-width:260px;margin:0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:22px;
  padding:0 10px;border-radius:7px;background:#fff;border:1px solid #e3e9f3;font-size:12px;font-weight:500;color:#5b6475;line-height:1;transform:translateX(-17px)}
.sec-ai .ai-proof-url svg{flex:none;width:11px;height:11px;fill:none;stroke:#8a94a8;stroke-width:1.6;stroke-linecap:round}
.sec-ai .ai-proof-vid{display:block;width:100%;height:auto;background:#000}
.sec-ai .ai-proof figcaption{padding:10px 6px 11px;font-size:13px;font-weight:500;color:var(--muted);text-align:center;letter-spacing:-.005em}
@media (max-width: 560px){
  .sec-ai .ai-proof{margin-top:24px;padding:6px 6px 0;border-radius:18px}
  .sec-ai .ai-proof-win{border-radius:12px}
  .sec-ai .ai-proof-bar{height:30px;padding:0 10px}
  .sec-ai .ai-proof-dots i{width:8px;height:8px}
  .sec-ai .ai-proof-url{transform:translateX(-14px)}
}
/* Mock chat card sits beside the headline + lede (top-aligned), not centered on the taller copy column. */
@media (min-width: 900px){.sec-ai .ai-visual{align-self:start;margin-top:48px}}
/* Real-search proof row: video left, matching copy right. */
.sec-ai .ai-proof-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center;margin-top:clamp(64px,7vw,104px)}
.sec-ai .ai-proof-row .ai-proof{margin:0;max-width:none}
.sec-ai .ai-proof-copy .sec-title .accent{display:block}
@media (max-width: 899px){
  .sec-ai .ai-proof-row{grid-template-columns:1fr;gap:28px}
  .sec-ai .ai-proof-copy{order:-1}
  .sec-ai .ai-proof-row .ai-proof{max-width:560px;width:100%;margin:0 auto}
}

/* Overnight audit 2026-09-25: proof caption at a readable size on phones (was 13px) */
@media (max-width: 599px){.sec-ai .ai-proof figcaption{font-size:15px}}

/* Phones + tablets (mobile-ux 2026-09-25): labels, chips and legends read at 13px minimum below 900px (desktop unchanged). */
@media (max-width: 899px){
  .sec-ai .ai-where-h{font-size:13px}
  .sec-ai .ai-proof-url{font-size:13px}
}

/* Proof video play/pause toggle (mobile-ux 2026-09-25). Corner button: shows on hover/focus with a mouse, stays faintly
   visible on touch, fully visible while paused. Reduced motion (.is-rm, before the first play): centered play button over the poster. */
.sec-ai .ai-proof-media{position:relative}
.sec-ai .ai-proof-toggle{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;opacity:.72;-webkit-tap-highlight-color:transparent;
  transition:opacity .2s ease,background-color .2s ease,transform .2s ease}
.sec-ai .ai-proof-toggle svg{width:18px;height:18px;fill:currentColor}
.sec-ai .ai-proof-toggle .ai-ic-play{display:none;margin-left:2px}
.sec-ai .is-paused .ai-proof-toggle .ai-ic-play{display:block}
.sec-ai .is-paused .ai-proof-toggle .ai-ic-pause{display:none}
.sec-ai .is-paused .ai-proof-toggle{opacity:1}
.sec-ai .ai-proof-toggle:active{transform:scale(.94)}
.sec-ai .ai-proof-toggle:focus-visible{opacity:1;outline:3px solid #0860fa;outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .sec-ai .ai-proof-toggle{opacity:0}
  .sec-ai .ai-proof-media:hover .ai-proof-toggle,.sec-ai .is-paused .ai-proof-toggle{opacity:1}
  .sec-ai .ai-proof-toggle:hover{background:rgba(255,255,255,.26)}
}
.sec-ai .ai-proof-media.is-rm .ai-proof-toggle{right:50%;bottom:50%;width:68px;height:68px;margin:0 -34px -34px 0;opacity:1;background:#fff;color:#05070f;box-shadow:0 10px 28px -6px rgba(0,0,0,.55)}
.sec-ai .ai-proof-media.is-rm .ai-proof-toggle svg{width:28px;height:28px}
/* parts/sec-together.css */
/* Section: why it works together (the loop). All selectors scoped under .sec-together. */
.sec-together{background:linear-gradient(180deg,#fff 0%,#f7faff 45%,#fff 100%);overflow:hidden;isolation:isolate}
.sec-together .tg-glow{position:absolute;left:50%;top:58%;width:1100px;height:820px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(74,140,246,.16),rgba(74,140,246,0));pointer-events:none;z-index:-1}

/* header */
.sec-together .tg-head{text-align:center;max-width:820px;margin:0 auto}
.sec-together .tg-head .sec-lede{margin-left:auto;margin-right:auto}
.sec-together .tg-head .sec-title .accent{display:block}
.sec-together .tg-head .sec-lede{text-wrap:balance}

/* layout */
.sec-together .tg-stage{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,3.5vw,56px);align-items:center;margin-top:clamp(48px,6vw,76px)}

/* ---------- wheel ---------- */
.sec-together .tg-wheel{position:relative;width:100%;aspect-ratio:760/575;container-type:inline-size}
.sec-together .tg-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sec-together .tg-track{fill:none;stroke:#eaf1ff;stroke-width:16}
.sec-together .tg-arc{opacity:.3;transition:opacity .45s var(--ease-out)}
.sec-together .tg-arc.is-active{opacity:1}
.sec-together .tg-arc-line{fill:none;stroke:var(--blue);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:100 101;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-out)}
.sec-together .tg-arc-head{fill:none;stroke:var(--blue);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s var(--ease-out)}
/* draw-in on reveal */
.js .sec-together .tg-wheel.reveal:not(.in) .tg-arc-line{stroke-dashoffset:100}
.js .sec-together .tg-wheel.reveal:not(.in) .tg-arc-head{opacity:0}
.sec-together .tg-arc[data-i="1"] .tg-arc-line{transition-delay:.12s}
.sec-together .tg-arc[data-i="2"] .tg-arc-line{transition-delay:.24s}
.sec-together .tg-arc[data-i="3"] .tg-arc-line{transition-delay:.36s}
.sec-together .tg-arc[data-i="4"] .tg-arc-line{transition-delay:.48s}
.sec-together .tg-wheel.in .tg-arc-head{transition-delay:.9s}

/* travelling pulse (JS rotates it; shown only when motion is allowed) */
.sec-together .tg-pulse{display:none;transform-box:view-box;transform-origin:380px 305px;opacity:0;transition:opacity .25s var(--ease-out)}
.sec-together.tg-anim .tg-pulse{display:inline}
.sec-together.tg-anim .tg-wheel.in .tg-pulse{opacity:1;transition-delay:1s}
.sec-together .tg-pulse-tail{fill:none;stroke:url(#tg-tail);stroke-width:5;stroke-linecap:round}
.sec-together .tg-pulse-head{fill:var(--blue);stroke:#fff;stroke-width:2.2}

/* hub */
.sec-together .tg-hub{position:absolute;left:50%;top:53.0435%;width:39.6%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(15,35,80,.06),0 18px 40px -16px rgba(22,70,170,.28),0 0 0 1px rgba(8,96,250,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5cqw}
.sec-together .tg-hub-ring{width:6.6cqw;height:6.6cqw}
.sec-together .tg-toasts{position:relative;width:34cqw;height:9.8cqw}
.sec-together .tg-toast{position:absolute;inset:0;display:flex;align-items:center;gap:1.3cqw;padding:0 1.4cqw;background:#fff;border:1px solid var(--line);border-radius:1.8cqw;box-shadow:0 8px 18px -10px rgba(22,70,170,.3);opacity:0;transform:translateY(6px) scale(.97);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.sec-together .tg-toast.is-on{opacity:1;transform:none;transition-duration:.36s}
.sec-together .tg-toast-ic{flex:none;display:grid;place-items:center;width:5.6cqw;height:5.6cqw;border-radius:1.4cqw;background:var(--blue-soft);color:var(--blue)}
.sec-together .tg-toast-ic svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sec-together .tg-toast-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.sec-together .tg-toast-txt b{font-size:clamp(11.5px,2.3cqw,15.5px);font-weight:600;color:var(--ink);white-space:nowrap;letter-spacing:-.01em}
.sec-together .tg-toast-txt i{font-style:normal;font-size:clamp(10.5px,1.95cqw,13.5px);color:var(--muted);white-space:nowrap}
.sec-together .tg-hub-cap{font-size:clamp(10.5px,1.95cqw,13.5px);font-weight:600;letter-spacing:.02em;color:var(--blue);white-space:nowrap}

/* nodes */
.sec-together .tg-node{position:absolute;width:9cqw;height:9cqw;min-width:44px;min-height:44px;transform:translate(-50%,-50%);padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.sec-together .tg-dot{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--blue);box-shadow:0 1px 2px rgba(15,35,80,.08),0 10px 24px -10px rgba(22,70,170,.35),0 0 0 1px var(--line);transition:transform .25s var(--ease-out)}
.sec-together .tg-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);opacity:0;transform:scale(.55);transition:opacity .3s var(--ease-out),transform .35s var(--ease-out)}
.sec-together .tg-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;background:rgba(8,96,250,.12);opacity:0;transform:scale(.8);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out);z-index:-1}
.sec-together .tg-dot svg{position:relative;width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sec-together .tg-node.is-active .tg-dot{color:#fff;transform:scale(1.08)}
.sec-together .tg-node.is-active .tg-dot::before{opacity:1;transform:none}
.sec-together .tg-node.is-active .tg-dot::after{opacity:1;transform:none}
@media (hover:hover){.sec-together .tg-node:not(.is-active):hover .tg-dot{transform:scale(1.05)}}
.sec-together .tg-node:active .tg-dot{transform:scale(.97)}
.sec-together .tg-node:focus-visible{outline:none}
.sec-together .tg-node:focus-visible .tg-dot{outline:2.5px solid var(--blue);outline-offset:5px}
.sec-together .tg-label{position:absolute;white-space:nowrap;font-size:clamp(12.5px,2.6cqw,18px);font-weight:600;letter-spacing:-.01em;color:var(--ink);opacity:.62;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.86);transition:opacity .3s var(--ease-out)}
.sec-together .tg-node.is-active .tg-label{opacity:1}
.sec-together .tg-node--top .tg-label{left:50%;bottom:calc(100% + 1.3cqw);transform:translateX(-50%)}
.sec-together .tg-node--bottom .tg-label{left:50%;top:calc(100% + 1.6cqw);transform:translateX(-50%)}
/* bottom labels lean outward, away from the bottom of the track */
.sec-together .tg-node--bottom[data-i="2"] .tg-label{transform:translateX(-36%)}
.sec-together .tg-node--bottom[data-i="3"] .tg-label{transform:translateX(-64%)}
.sec-together .tg-node--right .tg-label{left:calc(100% + 1.4cqw);top:50%;transform:translateY(-50%)}
.sec-together .tg-node--left .tg-label{right:calc(100% + 1.4cqw);top:50%;transform:translateY(-50%)}

/* ---------- step list ---------- */
.sec-together .tg-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sec-together .tg-step{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;padding:14px 18px;border-radius:16px}
.sec-together .tg-step::before{content:"";position:absolute;inset:0;border-radius:16px;background:#fff;box-shadow:var(--shadow),0 0 0 1px var(--line);opacity:0;transform:scale(.985);transition:opacity .3s var(--ease-out),transform .35s var(--ease-out)}
.sec-together .tg-step.is-active::before{opacity:1;transform:none}
.sec-together .tg-num,.sec-together .tg-copy{position:relative}
.sec-together .tg-num{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sec-together .tg-num::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);opacity:0;transform:scale(.6);transition:opacity .3s var(--ease-out),transform .35s var(--ease-out);z-index:-1}
.sec-together .tg-num{isolation:isolate}
.sec-together .tg-step.is-active .tg-num{color:#fff}
.sec-together .tg-step.is-active .tg-num::before{opacity:1;transform:none}
.sec-together .tg-copy h3{margin:6px 0 0;font-size:17px;line-height:1.3;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.sec-together .tg-copy p{margin:5px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}

.sec-together .tg-return{display:flex;align-items:flex-start;gap:16px;margin:12px 0 0;padding:14px 18px;border-radius:16px;background:rgba(234,242,255,.7);font-size:15px;line-height:1.55;color:var(--ink-2)}
.sec-together .tg-return b{font-weight:700;color:var(--blue)}
.sec-together .tg-return-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--blue);box-shadow:0 0 0 1px rgba(8,96,250,.2)}
.sec-together .tg-return-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- desktop with motion: one step at a time, crossfading in a fixed card ---------- */
.sec-together .tg-rail{display:none}
.sec-together.tg-anim .tg-steps{display:grid;padding:36px 36px 76px;border-radius:24px;background:#fff;box-shadow:var(--shadow),0 0 0 1px var(--line)}
.sec-together.tg-anim .tg-step{grid-area:1/1;display:block;padding:0;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.sec-together.tg-anim .tg-step.is-active{opacity:1;transform:none;pointer-events:auto;transition-duration:.42s;transition-delay:.05s}
.sec-together.tg-anim .tg-step::before{display:none}
.sec-together.tg-anim .tg-num,.sec-together.tg-anim .tg-step.is-active .tg-num{display:block;width:auto;height:auto;background:none;color:var(--blue);font-size:44px;line-height:1;font-weight:800;letter-spacing:-.04em;font-variation-settings:"opsz" 32}
.sec-together.tg-anim .tg-num::before{display:none}
.sec-together.tg-anim .tg-copy h3{margin:18px 0 0;font-size:clamp(22px,2vw,27px);line-height:1.2;letter-spacing:-.025em}
.sec-together.tg-anim .tg-copy p{margin:12px 0 0;font-size:17px;line-height:1.6}
.sec-together.tg-anim .tg-rail{position:relative;display:flex;gap:6px;height:4px;margin:-40px 36px 0}
.sec-together .tg-rail i{flex:1;border-radius:4px;background:#e6edf9;overflow:hidden}
.sec-together .tg-rail b{display:block;height:100%;background:var(--blue);border-radius:4px;transform-origin:0 50%;transform:scaleX(0)}
.sec-together.tg-anim .tg-return{margin-top:52px}

/* close line */

/* ---------- mid widths: wheel above list ---------- */
@media (max-width: 1099px) and (min-width: 900px){
  .sec-together .tg-stage{grid-template-columns:minmax(0,1fr)}
  .sec-together .tg-wheel{max-width:620px;margin:0 auto}
  .sec-together .tg-panel{max-width:640px;margin:0 auto;width:100%}
}

/* ---------- mobile: vertical step list with connectors ---------- */
@media (max-width: 899px){
  .sec-together .tg-stage{display:block;margin-top:40px}
  .sec-together .tg-wheel{display:none}
  .sec-together .tg-steps{gap:0}
  .sec-together .tg-step{padding:0 0 26px;gap:14px}
  .sec-together .tg-step::before{display:none}
  .sec-together .tg-step::after{content:"";position:absolute;left:17px;top:44px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(8,96,250,.45),rgba(8,96,250,.15))}
  .sec-together .tg-step .tg-num{color:#fff}
  .sec-together .tg-step .tg-num::before{opacity:1;transform:none;transition:none}
  .sec-together .tg-copy h3{margin-top:7px}
  .sec-together .tg-return{margin:0;padding:14px 16px 14px 0;background:none;gap:14px}
  .sec-together .tg-return-ic{background:#fdecec;box-shadow:none}
}

/* ---------- reduced motion: no travel, no auto-cycle, no transitions ---------- */
@media (prefers-reduced-motion: reduce){
  .sec-together .tg-pulse{display:none!important}
  .sec-together .tg-arc-line{stroke-dashoffset:0!important;transition:none}
  .sec-together .tg-arc-head{opacity:1!important}
  .sec-together .tg-arc,.sec-together .tg-dot,.sec-together .tg-dot::before,.sec-together .tg-dot::after,.sec-together .tg-label,.sec-together .tg-toast,.sec-together .tg-step::before,.sec-together .tg-num::before{transition:none}
}

/* QA pass: no orphaned last word in the heading; give the sign-off line a deliberate anchor */
.sec-together .sec-title{text-wrap:balance}

/* Desktop 1100-1379: the page gutter is too narrow for the longest side label on one line, so it wraps right-aligned */
@media (min-width: 1100px) and (max-width: 1379px){
  .sec-together .tg-node--left .tg-label{white-space:normal;width:max-content;max-width:7em;text-align:right;line-height:1.2}
}

/* Desktop sign-off: a real headline, closer to the next section */
@media (min-width: 900px){
  .sec-together{padding-bottom:clamp(40px,4vw,56px)}
}
/* parts/sec-process.css */
/* Section: How it works + What you see + Proof. All selectors scoped under .sec-process. */
.sec-process{background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 48%,#fff 100%);overflow-x:clip}
.sec-process h2,.sec-process h3,.sec-process p,.sec-process ul,.sec-process ol,.sec-process figure{margin:0}
.sec-process ul,.sec-process ol{list-style:none;padding:0}

/* ---------- header ---------- */
.sec-process .sp-head{text-align:center;max-width:780px;margin:0 auto}
.sec-process .sp-head .sec-lede{margin:24px auto 0}
@media (min-width: 900px){.sec-process .sp-head .sec-title .accent{display:block}}

/* ---------- 1. steps: three big numbers ---------- */
.sec-process .sp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:72px;text-align:center}
.sec-process .sp-num{display:block;font-size:clamp(64px,6.4vw,96px);line-height:1;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,var(--blue-2),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-process .sp-step-title{margin-top:20px;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.sec-process .sp-step-body{margin:12px auto 0;font-size:16px;line-height:1.6;color:var(--muted);max-width:340px}

/* ---------- 2. reporting ---------- */
.sec-process .sp-report{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:72px;align-items:center;margin-top:136px}
.sec-process .sp-report::before{content:"";position:absolute;right:2%;top:8%;width:52%;height:84%;border-radius:60px;background:rgba(74,140,246,.16);filter:blur(48px);pointer-events:none}
.sec-process .sp-reports{margin-top:32px;border-bottom:1px solid var(--line)}
.sec-process .sp-reports li{display:grid;grid-template-columns:124px minmax(0,1fr);gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.sec-process .sp-tag{align-self:start;justify-self:start;margin-top:1px;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid #dbe6f7;color:var(--blue);font-size:12.5px;font-weight:600;white-space:nowrap}
.sec-process .sp-reports h3{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.sec-process .sp-reports p{margin-top:4px;font-size:15.5px;line-height:1.55;color:var(--muted)}

/* heatmap mock */
.sec-process .sp-hm{position:relative;z-index:1;padding:22px}
.sec-process .sp-hm-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sec-process .sp-hm-kicker{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.sec-process .sp-hm-g{width:17px;height:17px;flex:none}
.sec-process .sp-hm-title{margin-top:2px;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.sec-process .sp-hm-legend{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.sec-process .sp-hm-legend i{flex:0 1 120px;height:6px;border-radius:3px;background:linear-gradient(90deg,#2f6a1c,#95a132,#e0a91e,#d8722e,#b3261e)}

/* ranking map: before/after slider (vector, 9x9 grid). --pos = % of width showing BEFORE from the left. */
@property --pos{syntax:'<number>';inherits:true;initial-value:50}
.sec-process .sp-rk{position:relative;margin-top:18px;aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--line);container-type:inline-size;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:--pos .55s cubic-bezier(.45,0,.2,1)}
.sec-process .sp-rk.is-dragging{transition:none}
.sec-process .sp-rk-layer{position:absolute;inset:0;width:100%;height:100%;display:block}
.sec-process .sp-rk-before{clip-path:inset(0 calc(100% - var(--pos) * 1%) 0 0)}
.sec-process .sp-rk-dots{filter:drop-shadow(0 1px 1.5px rgba(15,35,80,.28))}
.sec-process .sp-rk-dots circle{stroke:#fff;stroke-width:2}
.sec-process .sp-rk-dots text{fill:#fff;font-size:12px;font-weight:700;text-anchor:middle;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sec-process .sp-rk-dots text.sm{font-size:9.5px;letter-spacing:-.04em}
.sec-process .sp-rk-dots .r1{fill:#2f6a1c}
.sec-process .sp-rk-dots .r2{fill:#648a28}
.sec-process .sp-rk-dots .r3{fill:#95a132}
.sec-process .sp-rk-dots .r6{fill:#d8722e}
.sec-process .sp-rk-dots .r9{fill:#b3261e}
.sec-process .sp-rk-ring{fill:none;stroke:var(--blue);stroke-width:2.5}
.sec-process .sp-rk-range{position:absolute;left:0;bottom:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.sec-process .sp-rk-divider{position:absolute;inset:0;z-index:3;pointer-events:none;transform:translateX(calc(var(--pos) * 1%))}
.sec-process .sp-rk-divider::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(8,96,250,.25),0 0 10px rgba(15,35,80,.25)}
.sec-process .sp-rk-handle{position:absolute;left:0;top:50%;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;border:2px solid var(--blue);box-shadow:0 4px 14px -2px rgba(8,60,180,.35);transition:box-shadow .2s}
.sec-process .sp-rk-handle svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sec-process .sp-rk-range:focus-visible ~ .sp-rk-divider .sp-rk-handle{box-shadow:0 0 0 4px rgba(8,96,250,.3),0 4px 14px -2px rgba(8,60,180,.35)}
.sec-process .sp-rk-cap{margin-top:6px;font-size:12px;color:var(--muted)}


/* ---------- 3. proof ---------- */
.sec-process .sp-proof{display:flex;align-items:center;justify-content:center;gap:20px;max-width:720px;margin:120px auto 0;padding:28px 36px}
.sec-process .sp-proof-g{flex:none;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:16px;background:#fff;border:1px solid #eef2f7;box-shadow:0 5px 14px rgba(40,100,200,.13),0 1px 2px rgba(40,100,200,.06)}
.sec-process .sp-proof-g svg{width:32px;height:32px}
.sec-process .sp-proof-line{font-size:clamp(19px,1.9vw,23px);line-height:1.3;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.sec-process .sp-proof-line strong{color:var(--blue);font-weight:800}
.sec-process .sp-proof-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px;font-size:15.5px;color:var(--muted)}
.sec-process .sp-stars{display:inline-flex;gap:2px}
.sec-process .sp-stars svg{width:18px;height:18px;fill:var(--amber)}
.sec-process .proof-count{font-weight:600;color:var(--ink-2)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .sec-process .sp-rk{transition:none}
}

/* ---------- tablet / mobile ---------- */
@media (max-width: 899px){
  .sec-process .sp-steps{grid-template-columns:1fr;gap:40px;margin-top:48px}
  .sec-process .sp-num{font-size:64px}
  .sec-process .sp-report{grid-template-columns:1fr;gap:40px;margin-top:96px}
  .sec-process .sp-report::before{right:0;top:auto;bottom:0;width:100%;height:50%}
  .sec-process .sp-reports{margin-top:24px}
  .sec-process .sp-reports li{grid-template-columns:1fr;gap:8px;padding:18px 0}
  .sec-process .sp-hm{padding:16px}
  .sec-process .sp-hm-title{font-size:18px}
  .sec-process .sp-proof{flex-direction:column;text-align:center;gap:14px;margin-top:88px;padding:24px 20px}
  .sec-process .sp-proof-sub{justify-content:center}
}

/* QA pass: balanced headings and step titles (no single-word last lines) */
.sec-process .sp-head .sec-title,.sec-process .sp-step-title{text-wrap:balance}
/* Proof card links to our Google Business Profile */
.sec-process .sp-rk-cap{font-size:13px;line-height:1.45;color:var(--ink-2,#3b4455)}
/* Business location: blue pin marking the center point on both maps. */
.sec-process .sp-rk-center{pointer-events:none;z-index:2}
.sec-process .sp-rk-center path{fill:var(--blue);stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 1px 1.5px rgba(15,35,80,.35))}
/* Obvious BEFORE (left) / AFTER (right) labels above the comparison map. */
.sec-process .sp-rk-ba{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px}
.sec-process .sp-rk-ba span{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.sec-process .sp-rk-ba-b{background:#fdecea;color:#b3261e;border:1px solid #f6c9c4}
.sec-process .sp-rk-ba-a{background:#e9f4e3;color:#2f6a1c;border:1px solid #c5e0b6}
.sec-process .sp-rk-ba-b::before{content:"";width:8px;height:8px;border-radius:50%;background:#b3261e}
.sec-process .sp-rk-ba-a::after{content:"";width:8px;height:8px;border-radius:50%;background:#2f6a1c}
.sec-process .sp-rk-ba{display:grid;grid-template-columns:1fr 1fr;justify-items:center}
/* Centered header, legend and caption; handle sits low so it never hides the center (business) dot. */
.sec-process .sp-hm-top{justify-content:center;text-align:center}
.sec-process .sp-hm-kicker{justify-content:center}
.sec-process .sp-hm-legend{justify-content:center}
.sec-process .sp-rk-cap{text-align:center}
.sec-process .sp-rk-handle{top:76.25%}
@media (max-width: 560px){.sec-process .sp-rk-handle{width:28px;height:28px;margin:-14px 0 0 -14px}.sec-process .sp-rk-handle svg{width:14px;height:14px}}
.sec-process .sp-rk-ba{margin-top:16px}
.sec-process .sp-rk-center path{stroke-width:1.2}

/* Overnight audit 2026-09-25 */
/* tablet: keep the heatmap card at a readable size instead of a 740px-wide square */
@media (min-width: 600px) and (max-width: 899px){.sec-process .sp-hm{width:100%;max-width:560px;margin-left:auto;margin-right:auto}}
/* phones: the map caption reads as body text (was 13px) */
@media (max-width: 599px){.sec-process .sp-rk-cap{font-size:15px}}

/* Phones + tablets (mobile-ux 2026-09-25): labels, chips and legends read at 13px minimum below 900px (desktop unchanged). */
@media (max-width: 899px){
  .sec-process .sp-tag{font-size:13px}
  .sec-process .sp-hm-legend{font-size:13px}
}

/* Rating card centered between the rank map above and the FAQ below (Blake 2026-09-25):
   gap above = gap below. Below = this section's bottom padding + the FAQ section's 112px/72px top padding. */
.sec-process:has(.sp-proof){padding-bottom:68px}
.sec-process .sp-proof{margin-top:164px}
@media (max-width: 899px){
  .sec-process:has(.sp-proof){padding-bottom:52px}
  .sec-process .sp-proof{margin-top:108px}
}
/* parts/sec-close.css */
/* sec-close: FAQ + closing CTA band + site footer. Scoped under .sec-close / .site-footer. */
.sec-close{background:#fff;padding-bottom:104px;overflow:hidden}

/* ---------- FAQ ---------- */
.sec-close .cl-faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.sec-close .cl-faq-head{position:sticky;top:48px}
.sec-close .cl-faq-head .sec-lede{max-width:420px}
.sec-close .cl-faq-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.sec-close .cl-q + .cl-q{border-top:1px solid var(--line)}
.sec-close .cl-q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;cursor:pointer;font-size:18px;line-height:1.4;font-weight:600;letter-spacing:-.015em;color:var(--ink);transition:background-color .2s,color .2s;-webkit-tap-highlight-color:transparent}
.sec-close .cl-q summary::-webkit-details-marker{display:none}
.sec-close .cl-q summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:var(--radius)}
@media (hover:hover) and (pointer:fine){.sec-close .cl-q summary:hover{background:var(--bg-soft)}}
.sec-close .cl-q[open] summary{color:var(--ink)}

/* plus that turns into a minus */
.sec-close .cl-plus{position:relative;flex:none;width:30px;height:30px;border-radius:999px;background:var(--blue-soft);transition:background-color .2s}
.sec-close .cl-plus::before,.sec-close .cl-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--blue);transition:transform .3s var(--ease-out)}
.sec-close .cl-plus::after{transform:rotate(90deg)}
.sec-close .cl-q.is-open .cl-plus,.sec-close .cl-q[open]:not(.is-open) .cl-plus{background:#dce9ff}
.sec-close .cl-q.is-open .cl-plus::after{transform:rotate(0deg)}
html:not(.js) .sec-close .cl-q[open] .cl-plus::after{transform:rotate(0deg)}

/* answer: height via grid rows (0fr -> 1fr), content fades + settles */
.sec-close .cl-a{display:grid;grid-template-rows:1fr}
.sec-close .cl-a-in{min-height:0;overflow:hidden}
.sec-close .cl-a p{margin:0;padding:0 72px 26px 28px;font-size:16.5px;line-height:1.65;color:var(--muted)}
.js .sec-close .cl-a{transition:grid-template-rows .32s var(--ease-out)}
.js .sec-close .cl-a-in{transition:opacity .32s var(--ease-out),transform .32s var(--ease-out)}
.js .sec-close .cl-q:not(.is-open) .cl-a{grid-template-rows:0fr;transition-duration:.24s}
.js .sec-close .cl-q:not(.is-open) .cl-a-in{opacity:0;transform:translateY(-6px);transition-duration:.18s}

/* ---------- closing CTA band ---------- */
.sec-close .cl-cta{position:relative;margin-top:120px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:radial-gradient(90% 120% at 50% 0%,#f2f7ff 0%,#fff 62%);box-shadow:var(--shadow);isolation:isolate}
.sec-close .cl-cta-glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sec-close .cl-cta-glow span{position:absolute;display:block;border-radius:60px;background:rgba(74,140,246,.2);filter:blur(48px)}
.sec-close .cl-cta-glow span:nth-child(1){left:-4%;top:10%;width:34%;height:70%;transform:rotate(-6deg)}
.sec-close .cl-cta-glow span:nth-child(2){right:-4%;top:18%;width:34%;height:72%;transform:rotate(6deg)}
.sec-close .cl-cta-glow span:nth-child(3){left:30%;bottom:-30%;width:40%;height:46%;opacity:.7}
.sec-close .cl-cta-ring{position:absolute;left:50%;top:50%;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:-1;opacity:.7;pointer-events:none}
.js .sec-close .cl-cta-ring{opacity:0;transform:rotate(-50deg) scale(.94);transition:opacity 1.1s var(--ease-out) .1s,transform 1.4s var(--ease-out) .1s}
.js .sec-close .cl-cta.in .cl-cta-ring{opacity:.7;transform:none}
.sec-close .cl-cta-body{position:relative;padding:104px 32px 108px;text-align:center}
.sec-close .cl-cta-title{margin:0 auto;max-width:820px;font-size:clamp(34px,4.6vw,60px);line-height:1.04;letter-spacing:-.04em;font-weight:800;color:var(--ink);font-variation-settings:"opsz" 32;text-wrap:balance}
.sec-close .cl-cta-title .accent{display:block;color:var(--blue)}
.sec-close .cl-cta-sub{margin:20px auto 0;max-width:560px;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.sec-close .cl-cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.sec-close .cl-cta-btns .btn-s.dark{box-shadow:0 0 0 1px rgba(2,15,33,.05),0 8px 20px -6px rgba(2,15,33,.35)}
.sec-close .cl-cta-btns .cl-ph{width:16px;height:16px;margin-right:8px;fill:currentColor;flex:none}
.sec-close .cl-cta-btns .btn-s:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sec-close .cl-arr{width:16px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.sec-close .btn-s:hover .cl-arr{transform:translateX(3px)}}

@media (prefers-reduced-motion: reduce){
  .js .sec-close .cl-a,.js .sec-close .cl-a-in,.sec-close .cl-plus::before,.sec-close .cl-plus::after,.sec-close .cl-arr{transition:none}
  .js .sec-close .cl-cta-ring{opacity:.7;transform:none;transition:none}
}

@media (max-width: 899px){
  .sec-close{padding-bottom:64px}
  .sec-close .cl-faq{grid-template-columns:minmax(0,1fr);gap:32px}
  .sec-close .cl-faq-head{position:static}
  .sec-close .cl-q summary{padding:20px 18px;font-size:17px;gap:14px}
  .sec-close .cl-a p{padding:0 18px 22px;font-size:16px}
  .sec-close .cl-cta{margin-top:72px;border-radius:22px}
  .sec-close .cl-cta-body{padding:72px 20px 76px}
  .sec-close .cl-cta-ring{width:500px;height:500px;margin:-250px 0 0 -250px}
  .sec-close .cl-cta .cl-cta-ring,.js .sec-close .cl-cta.in .cl-cta-ring{opacity:.45}
  .sec-close .cl-cta-body{padding-bottom:68px}
  .sec-close .cl-cta-glow span:nth-child(1){left:-30%;width:60%;height:50%}
  .sec-close .cl-cta-glow span:nth-child(2){right:-30%;top:50%;width:60%;height:50%}
}
@media (max-width: 520px){
  .sec-close .cl-cta-btns{flex-direction:column;align-items:stretch}
  .sec-close .cl-cta-btns .btn-s{width:100%}
}

/* ---------- footer ---------- */
.site-footer{background:#fff;border-top:1px solid var(--line);padding:64px 24px 32px;color:var(--ink-2)}
.site-footer .sf-inner{max-width:1180px;margin:0 auto}
.site-footer .sf-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.2fr);gap:48px}
.site-footer .sf-logo{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.site-footer .sf-logo img{flex:none;display:block}
.site-footer .sf-line{margin:16px 0 0;max-width:340px;font-size:15px;line-height:1.6;color:var(--muted)}
.site-footer .sf-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.site-footer .sf-h{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.site-footer .sf-col a{padding:5px 0;font-size:15px;color:var(--ink-2);transition:color .2s}
.site-footer address{padding:5px 0;font-style:normal;font-size:15px;line-height:1.6;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.site-footer .sf-col a:hover{color:var(--blue)}}
.site-footer a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.site-footer .sf-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.site-footer .sf-bottom p{margin:0;font-size:14px;color:var(--muted)}
@media (max-width: 899px){
  .site-footer{padding:48px 16px 28px}
  .site-footer .sf-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 24px}
  .site-footer .sf-id{grid-column:1 / -1}
}
@media (max-width: 480px){
  .site-footer .sf-top{grid-template-columns:minmax(0,1fr)}
}
.sec-close .cl-nw{white-space:nowrap}

/* QA pass: the ring frames the copy instead of cutting through it */
.sec-close .sec-title{text-wrap:balance}
.sec-close .cl-cta-ring{width:920px;height:920px;margin:-460px 0 0 -460px;
  -webkit-mask-image:linear-gradient(180deg,transparent 22%,#000 38%,#000 62%,transparent 78%);mask-image:linear-gradient(180deg,transparent 22%,#000 38%,#000 62%,transparent 78%)}
@media (max-width: 899px){
  /* ring sized so only its arcs show, in the card corners, clear of the stacked copy */
  .sec-close .cl-cta-ring{width:calc(500px + 35vw);height:calc(500px + 35vw);margin:calc(-250px - 17.5vw) 0 0 calc(-250px - 17.5vw);-webkit-mask-image:none;mask-image:none}
  .sec-close .cl-cta .cl-cta-ring,.js .sec-close .cl-cta.in .cl-cta-ring{opacity:.6}
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce){
  .js .sec-close .cl-cta-ring{opacity:.6}
}
.site-footer .sf-logo .sf-word{width:172px;height:auto;margin-top:2px}

/* Overnight audit 2026-09-25: footer links + logo reach a 44px tap height on touch screens; copyright at 15px on phones */
@media (max-width: 899px){
  .site-footer .sf-col{gap:0}
  .site-footer .sf-col a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .site-footer .sf-logo{min-height:44px}
  .site-footer .sf-bottom p{font-size:15px}
}
@media (max-width: 899px){.site-footer .sf-col a{min-width:44px}}
/* FAQ questions: no one-word last line ("...is this / for?") */
.sec-close .cl-q summary > span{text-wrap:balance}

/* FAQ stacked (Blake 2026-09-25): heading centered above, question list centered below. */
.sec-close .cl-faq{grid-template-columns:minmax(0,1fr);gap:40px;justify-items:center}
.sec-close .cl-faq-head{position:static;text-align:center;max-width:720px}
.sec-close .cl-faq-head .sec-lede{margin-left:auto;margin-right:auto}
.sec-close .cl-faq-list{width:100%;max-width:880px}
/* Legal links (privacy / terms) share the copyright row, styled like the footer column links */
.site-footer .sf-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}
.site-footer .sf-legal{display:flex;gap:24px}
.site-footer .sf-legal a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--ink-2);transition:color .2s}
@media (hover:hover) and (pointer:fine){.site-footer .sf-legal a:hover{color:var(--blue)}}
/* parts/hover.css */
/* Hover + press states for nav, CTAs and links. Pointer devices only; reduced motion keeps color changes, drops movement. */
.nl,.btn,.btn-s,.brand-mark img,.hero-mark img,.sys-more,.site-footer .sf-col a{--ease:cubic-bezier(.23,1,.32,1)}
.btn,.btn-s{transition:transform .18s var(--ease),box-shadow .25s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn .arr,.btn-s svg{transition:transform .25s var(--ease)}
.btn:active,.btn-s:active{transform:scale(.97)}

/* Nav links: underline grows from the left */
.nl{transition:color .2s}
.nl::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:#0860fa;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}

/* Dark CTAs: light sheen sweeps across */
.btn-dark,.btn-s.dark{overflow:hidden}
.btn-s.dark{position:relative}
.btn-dark::before,.btn-s.dark::before{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none}

@media (hover:hover) and (pointer:fine){
  .nl:hover{color:#030817}
  .nl:hover::after{transform:scaleX(1);transform-origin:left}

  .btn-dark:hover,.btn-s.dark:hover{background:#0c1a33;transform:translateY(-2px);box-shadow:0 0 0 1px rgba(2,15,33,.05),0 14px 28px -8px rgba(8,96,250,.35)}
  .btn-dark:hover::before,.btn-s.dark:hover::before{transform:translateX(320%) skewX(-18deg);transition:transform .7s var(--ease)}
  .btn:hover .arr,.btn-s:hover svg{transform:translateX(4px)}

  .cta-demo:hover,.btn-s.outline:hover{background:#f3f7ff;border-color:#0860fa;color:#0860fa;transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(8,96,250,.3)}

  /* logo: signal arcs ping outward, pin lifts */
  .brand .bm-pin{transition:transform .45s var(--ease)}
  .brand:hover .bm-pin{transform:translateY(-2px)}
  .brand:hover .bm-inner{animation:bmPing .7s var(--ease)}
  .brand:hover .bm-outer{animation:bmPing .7s var(--ease) .12s}
  /* hero mark above the H1: same ping as the nav logo (Blake 2026-09-25) */
  .hero-mark .bm-pin{transition:transform .45s var(--ease)}
  .hero-mark:hover .bm-pin{transform:translateY(-2px)}
  .hero-mark:hover .bm-inner{animation:bmPing .7s var(--ease)}
  .hero-mark:hover .bm-outer{animation:bmPing .7s var(--ease) .12s}
  @keyframes bmPing{40%{transform:scale(1.13);opacity:.35}100%{transform:none;opacity:1}}

  .sys-more{transition:color .2s}
  .sys-more:hover{color:#0648c4}
  .site-footer .sf-col a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:color .2s,background-size .3s var(--ease)}
  .site-footer .sf-col a:hover{background-size:100% 1.5px}
}

/* Keyboard focus */
.nl:focus-visible,.btn:focus-visible,.btn-s:focus-visible,.brand:focus-visible,.sys-more:focus-visible,.site-footer a:focus-visible{outline:2px solid #0860fa;outline-offset:3px;border-radius:8px}

@media (prefers-reduced-motion: reduce){
  .btn:hover,.btn-s:hover,.cta-demo:hover,.btn:active,.btn-s:active{transform:none}
  .btn:hover .arr,.btn-s:hover svg,.brand:hover .bm-pin{transform:none}.brand:hover .bm-inner,.brand:hover .bm-outer{animation:none}
  .hero-mark:hover .bm-pin{transform:none}.hero-mark:hover .bm-inner,.hero-mark:hover .bm-outer{animation:none}
  .btn-dark::before,.btn-s.dark::before{display:none}
  .nl::after{transition:none}
}
.nav-phone{transition:color .2s}
@media (hover:hover) and (pointer:fine){.nav-phone:hover{color:#0860fa}}
.nav-phone:focus-visible{outline:2px solid #0860fa;outline-offset:3px;border-radius:8px}
.nav-text{transition:border-color .2s,color .2s,background-color .2s}
@media (hover:hover) and (pointer:fine){.nav-text:hover{border-color:#0860fa;color:#0860fa;background:#f3f7ff}}
.nav-text:focus-visible{outline:2px solid #0860fa;outline-offset:3px}
/* parts/trial.css */
/* Free trial popup (Typeform style). One question per screen, front-loaded progress bar, booking iframe on the last step.
   Motion: transform/opacity only. Reduced motion: opacity fades only, no slides, no shake, no bar animation. */
.tf{
  --ink:#05070f; --muted:#5b6475; --blue:#0860fa; --line:rgba(5,7,15,.14); --err:#d12c4a;
  --ease:cubic-bezier(.23,1,.32,1);
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);
}
.tf[hidden]{display:none}
html.tf-lock,html.tf-lock body{overflow:hidden}

.tf-backdrop{position:absolute;inset:0;background:rgba(5,10,28,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s var(--ease)}
.tf.is-open .tf-backdrop{opacity:1}

.tf-panel{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  width:min(720px,calc(100vw - 48px));height:min(840px,calc(100vh - 48px));height:min(840px,calc(100dvh - 48px));
  background:#fff;border-radius:20px;
  box-shadow:0 0 0 1px rgba(2,15,33,.06),0 40px 90px -24px rgba(2,15,33,.45);
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .28s var(--ease),transform .45s var(--ease),width .45s var(--ease),height .45s var(--ease);
}
.tf.is-open .tf-panel{opacity:1;transform:none}

/* steps: 1 Name, 2 Phone, 3 Email, then the calendar */
.tf-steps{flex:1 1 auto;min-width:0;display:flex;justify-content:center;margin:0;padding:0;list-style:none}
.tf-s{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 1 72px;min-width:0;font-size:13px;font-weight:600;letter-spacing:-.01em;color:#6b778d;transition:color .3s var(--ease)}
.tf-s+.tf-s::before{content:"";position:absolute;top:12px;right:calc(50% + 18px);width:calc(100% - 36px);height:2px;border-radius:2px;background:#e3ebfb;transition:background-color .3s var(--ease)}
.tf-s-n{display:grid;place-items:center;width:26px;height:26px;box-sizing:border-box;border:2px solid #d5deef;border-radius:999px;background:#fff;font-size:13px;font-weight:700;line-height:1;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.tf-s-n svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tf-s-l{white-space:nowrap}
.tf-s.is-cur{color:var(--ink)}
.tf-s.is-cur .tf-s-n{border-color:var(--blue);background:var(--blue);color:#fff}
.tf-s.is-done{color:var(--blue)}
.tf-s.is-done .tf-s-n{border-color:var(--blue);background:#e8f0ff;color:var(--blue)}
.tf-s.is-done::before,.tf-s.is-cur::before{background:var(--blue)}

/* top bar */
.tf-top{flex:none;display:flex;justify-content:space-between;align-items:center;padding:18px 18px 0}
.tf-icon{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s}
.tf-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tf-icon:disabled{visibility:hidden}
.tf-icon:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.tf-icon:hover{background:#f1f4fa}}

/* steps stack in one grid cell so outgoing and incoming can overlap */
.tf-body{flex:1;min-height:0;display:grid;overflow-y:auto;overscroll-behavior:contain;padding:0 72px 40px}
.tf-step{grid-area:1/1;align-self:center;width:100%;max-width:576px;margin:0 auto;padding:8px 0 24px}
.tf-step[hidden]{display:none !important}

.tf-intro{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--muted);letter-spacing:-.01em}
.tf-q{margin:0 0 30px;font-size:clamp(28px,3.4vw,38px);line-height:1.12;font-weight:700;letter-spacing:-.035em;color:var(--ink);font-variation-settings:"opsz" 32;outline:0}

/* underline inputs */
.tf-row{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.tf-field{position:relative}
.tf-field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)}
.tf-field:focus-within::after{transform:scaleX(1)}
.tf-input{
  display:block;width:100%;margin:0;padding:8px 0 12px;border:0;border-bottom:2px solid var(--line);border-radius:0;background:transparent;
  font:500 28px/1.25 'Inter',system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink);caret-color:var(--blue);outline:0;
  -webkit-appearance:none;appearance:none;
}
.tf-input::placeholder{color:rgba(5,7,15,.26)}
.tf-input[aria-invalid="true"]{border-bottom-color:var(--err)}
.tf-field:has(.tf-input[aria-invalid="true"])::after{background:var(--err)}

.tf-err{min-height:21px;margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--err);letter-spacing:-.01em}
.tf-err:empty{visibility:hidden}

.tf-actions{display:flex;align-items:center;gap:16px;margin-top:22px}
.tf-ok{position:relative;height:52px;padding:0 24px;border:0;border-radius:11px;gap:10px;font:600 17px/1 'Inter',system-ui,sans-serif;letter-spacing:-.01em;cursor:pointer;box-shadow:0 8px 18px rgba(2,15,33,.12)}
.tf-ok .tf-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tf-hint{font-size:13px;color:var(--muted);letter-spacing:-.005em}
.tf-hint b{font-weight:600;color:var(--ink)}

/* booking step: panel grows to (almost) the full viewport, the heading moves into the icon row,
   and the iframe gets every remaining pixel. The script sizes the iframe to the widget's tallest view
   and scales it down to fit, so "Schedule meeting" is never below the fold of the iframe. */
.tf.tf-book{padding:12px}
.tf.tf-book .tf-panel{width:min(1040px,calc(100vw - 24px));height:min(800px,calc(100vh - 24px));height:min(800px,calc(100dvh - 24px))}
.tf.tf-book .tf-body{overflow:hidden;padding:18px 24px 12px}
.tf-step-book{align-self:stretch;max-width:none;display:flex;flex-direction:column;padding:0;min-height:0}
.tf-step-book .tf-q{flex:none;margin:0 60px 10px;font-size:20px;line-height:42px;letter-spacing:-.02em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* booking iframe */
.tf-frame-wrap{position:relative;flex:1;min-height:0;border-radius:14px;overflow:hidden}
.tf-frame{position:absolute;left:0;top:0;width:100%;height:100%;border:0;display:block;background:transparent;transform-origin:0 0}
.tf-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--muted);transition:opacity .3s}
.tf.tf-frame-ready .tf-loading{opacity:0}

/* phone: full-screen sheet */
@media (max-width:640px){
  .tf{padding:0}
  .tf-panel{width:100%;height:100vh;height:100dvh;border-radius:0;transform:translateY(24px)}
  .tf-top{padding:calc(10px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
  .tf-body{padding:0 max(22px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
  .tf-step{align-self:start;margin:auto;padding-top:0}
  .tf.tf-book{padding:0}
  .tf.tf-book .tf-panel{width:100%;height:100vh;height:100dvh}
  .tf.tf-book .tf-body{padding:4px 0 env(safe-area-inset-bottom)}
  .tf-step-book{align-self:stretch;width:auto;margin:0;padding:0}
  .tf-step-book .tf-q{margin:0 56px 4px;font-size:16px;line-height:42px}
  .tf-q{font-size:28px;margin-bottom:24px}
  .tf-intro{font-size:14px}
  .tf-row{grid-template-columns:1fr;gap:18px}
  .tf-input{font-size:22px}
  .tf-ok{height:54px;width:100%}
  .tf-hint{display:none}
  .tf-frame-wrap{border-radius:0}
}
@media (hover:none){.tf-hint{display:none}}

@media (prefers-reduced-motion:reduce){
  .tf-panel,.tf.is-open .tf-panel{transform:none;transition:opacity .15s linear}
  .tf-bar,.tf-field::after{transition:none}
}

/* Overnight audit 2026-09-25: back/close buttons reach 44x44 */
.tf-icon{flex:none;width:44px;height:44px}
/* phone sheet follows the visible viewport (set by trial.html from visualViewport; falls back to the full screen) */
@media (max-width:640px){
  .tf{top:var(--tf-vt,0px);bottom:auto;height:var(--tf-vh,100%)}
  .tf-panel,.tf.tf-book .tf-panel{height:100%}
}
/* short sheet (keyboard open on a phone, or a landscape phone): tighter spacing so the question, fields and OK fit */
.tf-panel{container-type:size}
@container (max-height: 460px){
  .tf-step{padding-top:0}
  .tf-intro{display:none}
  .tf-q{font-size:24px;margin-bottom:12px}
  .tf-row{gap:6px}
  .tf-input{padding:4px 0 8px}
  .tf-err{min-height:18px;margin-top:6px}
  .tf-actions{margin-top:8px}
}
/* SMS consent line under the phone step */
.tf-consent{margin:16px 0 0;max-width:520px;font-size:12px;line-height:1.5;color:var(--muted);letter-spacing:0}
.tf-consent a{color:inherit;text-decoration:underline}
@container (max-height: 460px){.tf-consent{margin-top:8px;font-size:11px;line-height:1.4}}
/* narrow phones: tighter steps so back, steps and close fit one row */
@media (max-width:379px){.tf-s{font-size:12px}}
@media (prefers-reduced-motion:reduce){.tf-s,.tf-s::before,.tf-s-n{transition:none}}
@media (max-width:339px){.tf-s{font-size:11px}}
/* parts/sticky.css */
/* Sticky contact bars (parts/sticky.html). z-index 900: above page content, below the trial popup (1000). */
.sb-top,.sb-bot{position:fixed;left:0;right:0;z-index:900;opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1)}
.sb-top.is-on,.sb-bot.is-on{opacity:1;transform:none;pointer-events:auto}
/* Trial popup open: tf-lock is on <html> from open until the close animation ends */
html.tf-lock .sb-top.is-on{opacity:0;transform:translateY(-100%);pointer-events:none}
html.tf-lock .sb-bot.is-on{opacity:0;transform:translateY(100%);pointer-events:none}

/* ---------- desktop top bar ---------- */
.sb-top{top:0;height:64px;transform:translateY(-100%);background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line,#e6ebf3);box-shadow:0 6px 20px -10px rgba(15,35,80,.16)}
.sb-in{max-width:1448px;height:100%;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.sb-top .brand{position:relative;left:auto;top:auto;display:flex;align-items:center;gap:9px;flex:none}
.sb-top .brand-mark{position:relative;left:auto;top:auto;width:44px;height:32px;flex:none}
.sb-top .brand-word{position:relative;left:auto;top:2px;width:133px;height:24px}
.sb-actions{display:flex;align-items:center;gap:12px;flex:none}
.sb-phone{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 6px;font-size:15px;font-weight:600;letter-spacing:-.3px;color:#05070f;white-space:nowrap}
.sb-phone svg,.sb-text svg{width:15px;height:15px;fill:#0860fa;flex:none}
.sb-text{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 12px;border:1.5px solid #cfd8ea;border-radius:10px;background:#fff;font-size:15px;font-weight:600;letter-spacing:-.2px;color:#05070f;white-space:nowrap}
.sb-cta{height:40px;padding:0 16px;border-radius:10px;box-shadow:0 0 0 1px rgba(2,15,33,.05),0 4px 12px rgba(2,15,33,.12);font-size:15px;font-weight:600;letter-spacing:-.01em}
.sb-cta .arr{width:14px;height:11px;margin-left:10px}
@media (hover:hover) and (pointer:fine){
  .sb-phone,.sb-text{transition:color .2s,border-color .2s}
  .sb-phone:hover{color:#0860fa}
  .sb-text:hover{border-color:#0860fa}
}
.sb-phone:focus-visible,.sb-text:focus-visible{outline:2px solid #0860fa;outline-offset:3px;border-radius:10px}

/* Anchor jumps and the desktop FAQ sticky column clear the 64px bar */
@media (min-width: 900px){
  html{scroll-padding-top:80px}
  .sec-close .cl-faq-head{top:96px}
}

/* ---------- mobile bottom bar: trial button + square call button ---------- */
.sb-bot{bottom:0;transform:translateY(100%);padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);border-top:1px solid rgba(2,15,33,.08);box-shadow:0 -8px 24px -14px rgba(15,35,80,.22)}
.sb-bot-in{display:flex;gap:10px;max-width:560px;margin:0 auto}
.sb-b-trial{position:relative;flex:1 1 auto;min-width:0;height:52px;padding:0 16px;border-radius:12px;box-shadow:0 0 0 1px rgba(2,15,33,.05),0 6px 16px -6px rgba(2,15,33,.35);font-size:17px;font-weight:600;letter-spacing:-.01em;-webkit-tap-highlight-color:transparent}
.sb-b-trial .arr{width:15px;height:12px;margin-left:10px;flex:none}
.sb-b-call{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1.5px solid #cfd8ea;border-radius:12px;background:#fff;-webkit-tap-highlight-color:transparent}
.sb-b-call svg{width:21px;height:21px;fill:#0860fa}
.sb-b-call:active{transform:scale(.96)}
.sb-b-trial:focus-visible,.sb-b-call:focus-visible{outline:2px solid #0860fa;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.sb-b-call{transition:border-color .2s}.sb-b-call:hover{border-color:#0860fa}}
/* Mobile menu open (parts/menu.html sets html.mnav-lock): bar steps aside like it does for the trial popup */
html.mnav-lock .sb-bot.is-on{opacity:0;transform:translateY(100%);pointer-events:none}
@media (max-width: 899px){
  .sb-top{display:none}
  /* Always reserve the bar's height so the footer's last line is never covered */
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  /* Keyboard focus and scrollIntoView keep targets above the bar */
  html{scroll-padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}
@media (min-width: 900px){.sb-bot{display:none}}
@media (max-width: 359px){.sb-bot{padding-left:12px;padding-right:12px}.sb-bot-in{gap:8px}.sb-b-trial{font-size:16px;padding:0 12px}}

@media (prefers-reduced-motion: reduce){
  .sb-top,.sb-bot,.sb-top.is-on,.sb-bot.is-on,html.tf-lock .sb-top.is-on,html.tf-lock .sb-bot.is-on,html.mnav-lock .sb-bot.is-on{transform:none;transition:opacity .01s linear}
}
/* parts/menu.css */
/* Mobile menu (parts/menu.html) + the nav's menu button. Compact nav = below 1200px (shell.css hides .nav-links there).
   z-index 950: above the sticky bars (900), below the trial popup (1000). */
.nav-menu{display:none}
@media (max-width: 1199px){
  .nav-menu{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0 -6px 0 6px;padding:0;border:0;border-radius:10px;background:transparent;color:#05070f;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nav-menu svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .nav-menu:active{background:rgba(2,15,33,.06)}
  .nav-menu:focus-visible{outline:2px solid #0860fa;outline-offset:0}
  /* Tablet nav row (720-1199px) spaces items with a 12px gap already */
  .nav .nav-cta + .nav-menu{margin-left:6px}
}
@media (min-width: 720px) and (max-width: 1199px){.nav .nav-cta + .nav-menu{margin-left:0}}
@media (max-width: 719px){.nav .brand{margin-right:auto}}
/* Phones: the nav shows the full logo (mark + wordmark); the hero mark above the headline is hidden <768px instead (shell.css) */
/* Below 361px the trial button and the menu button don't fit next to the logo: the menu wins, the sticky bottom bar carries the trial button */
@media (max-width: 360px){.nav .nav-cta{display:none}}
/* 720-759px: the phone number drops out of the nav to make room for the menu (the hero's Call button is right below) */
@media (min-width: 720px) and (max-width: 759px){.nav .nav-phone{display:none!important}}

.mnav{position:fixed;inset:0;z-index:950}
.mnav[hidden]{display:none}
.mnav-scrim{position:absolute;inset:0;background:rgba(2,15,33,.36);opacity:0;transition:opacity .26s cubic-bezier(.23,1,.32,1)}
.mnav-panel{position:relative;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 24px;background:#fff;border-radius:0 0 22px 22px;box-shadow:0 24px 48px -20px rgba(15,35,80,.35);opacity:0;transform:translateY(-16px);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .22s cubic-bezier(.23,1,.32,1)}
.mnav.is-open .mnav-scrim{opacity:1}
.mnav.is-open .mnav-panel{opacity:1;transform:none}
.mnav-head{display:flex;align-items:center;justify-content:space-between;height:48px;max-width:560px;margin:0 auto}
.mnav-brand{display:flex;align-items:center;gap:10px;min-height:44px}
.mnav-brand .brand-mark{position:relative;left:auto;top:auto;width:44px;height:32px;flex:none}
.mnav-word{position:relative;top:2px;display:block;width:133px;height:24px}
/* same logo size as the nav on phones (--navlogo, shell.css) */
@media (max-width: 479px){.mnav-brand{gap:6px}.mnav-brand .brand-mark{width:calc(var(--navlogo) * 11 / 6);height:calc(var(--navlogo) * 4 / 3)}.mnav-word{width:auto;height:var(--navlogo)}}
.mnav-x{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-6px;padding:0;border:0;border-radius:10px;background:transparent;color:#05070f;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mnav-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mnav-x:active{background:rgba(2,15,33,.06)}
.mnav-nav,.mnav-cta{max-width:560px;margin-left:auto;margin-right:auto}
.mnav-links{list-style:none;margin:14px 0 0;padding:0}
.mnav-links li{border-top:1px solid #e6ebf3}
.mnav-links li:last-child{border-bottom:1px solid #e6ebf3}
.mnav-link{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 4px;font-size:20px;font-weight:600;letter-spacing:-.02em;color:#05070f;-webkit-tap-highlight-color:transparent}
.mnav-link::after{content:"";width:8px;height:8px;margin-right:6px;border-top:2px solid #0860fa;border-right:2px solid #0860fa;transform:rotate(45deg)}
.mnav-link:active{color:#0860fa}
.mnav-cta{position:relative;display:flex;margin-top:22px;height:54px;border-radius:12px;font-size:17px;font-weight:600;letter-spacing:-.01em;box-shadow:0 0 0 1px rgba(2,15,33,.05),0 6px 16px -6px rgba(2,15,33,.35)}
.mnav-cta .arr{width:15px;height:12px;margin-left:10px}
.mnav-link:focus-visible,.mnav-x:focus-visible,.mnav-cta:focus-visible{outline:2px solid #0860fa;outline-offset:2px;border-radius:10px}
@media (hover:hover) and (pointer:fine){.mnav-link{transition:color .2s}.mnav-link:hover{color:#0860fa}}
html.mnav-lock,html.mnav-lock body{overflow:hidden}
@media (min-width: 1200px){.mnav{display:none}}
@media (prefers-reduced-motion: reduce){.mnav-panel{transform:none;transition:opacity .12s linear}.mnav-scrim{transition:opacity .12s linear}}
/* parts/chat.css */
/* GHL chat widget (parts/chat.html). The launcher lives in <chat-widget>'s shadow root with inline right/bottom 20px;
   chat.html injects a shadow style that reads --op-chat-bottom, so the offset is set here from the light DOM. */
chat-widget{--op-chat-bottom:20px}
/* Phones: clear the sticky bottom bar (sticky.css: 10 + 52 + 10 padding + 1px border = 73px, plus safe area) with a 16px gap */
@media (max-width: 899px){chat-widget{--op-chat-bottom:calc(89px + env(safe-area-inset-bottom))}}
/* Trial popup open (html.tf-lock, parts/trial.html): the widget's z-index (99999999) would sit over the popup */
html.tf-lock chat-widget{display:none}
/* Hide the launcher while the mobile menu is open (it sat on top of the menu panel). */
html.mnav-lock chat-widget{display:none}