/* ============================================================
   CANON - canonical component layer.
   Loaded LAST on every page (after each page's inline <style>),
   so rules here WIN and apply site-wide. To change a shared
   component everywhere, edit it HERE - one file, whole site.
   ============================================================ */

/* --- Brand safety: logo + primary CTA never turn blue on hover --- */
/* --- Nav logo: identical size on every page (homepage was smaller) --- */
.logo,.logo:hover,.logo:focus{color:var(--ink);}
nav .logo{font-size:1.72rem;}
.btn-primary:hover,.nav-cta:hover{background:var(--cta-dark);border-color:var(--cta-dark);color:#fff;}

/* --- Secondary CTA is Signal Blue site-wide (matches homepage .btn-secondary).
       Legacy per-page .btn-ghost inherits the same treatment so every "See how it
       works" button is identical across pages. --- */
.btn-ghost{background:#fff;border-color:var(--cta);color:var(--cta);}
.btn-ghost:hover{background:var(--cta-soft);border-color:var(--cta-dark);color:var(--cta-dark);}

/* --- Shared type & control primitives. Campaign/feature pages each redeclare the
       hero and buttons in their own inline <style> and drift from the homepage
       system; pin the shared values here (canon loads last) so weight, button shape
       and the subheading scale are identical everywhere and homepage tweaks carry
       across. (font-size on .btn is left to .btn-lg; h1 size stays per page so long
       campaign headlines can size down.) --- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:10px;border-width:2px;gap:8px;}
/* Secondary CTA pinned Signal Blue too (how-it-works kept a local gray .btn-secondary). */
.btn-secondary{background:#fff;border-color:var(--cta);color:var(--cta);}
.btn-secondary:hover{background:var(--cta-soft);border-color:var(--cta-dark);color:var(--cta-dark);}
.eyebrow{font-weight:600;}
.hero-sub{font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.5;font-weight:400;}

/* --- Hero CTAs stack full-width on mobile everywhere (matches the homepage). --- */
@media(max-width:640px){
  .jx-acts,.hero-acts{flex-direction:column;align-items:stretch;}
  .jx-acts .btn,.hero-acts .btn{width:100%;justify-content:center;min-width:0;}
  /* No button may ever be wider than the phone: long labels wrap instead of
     overflowing (the shared .btn is nowrap with a 206px min-width). */
  .btn{white-space:normal;max-width:100%;text-align:center;}
}

/* Slack is an integration: it wears the fn-ai (integrations/AI) pink like every other
   integration surface, never green (overrides the inline green rule on index/slack/whatsapp/compare). */
/* Slack and WhatsApp always show their real logos (owner 2026-09-08), full size: no tile, no tint,
   no border behind the mark. The logo fills the space the icon tile used to occupy. */
.cap-ic.slack,.cap-ic.wa,.rm-tile.t-slack,.rm-tile.t-wa,.sw-top.slack .ic,.sw-top.wa .ic{background:none!important;border:0!important;box-shadow:none!important;color:inherit;}
.cap-ic.slack svg,.cap-ic.wa svg,.rm-tile.t-slack svg,.rm-tile.t-wa svg,.sw-top.slack .ic svg,.sw-top.wa .ic svg{width:100%;height:100%;}

/* "No per-user pricing" note beside a CTA row: a Signal Blue check + bold text, no border or
   fill (owner 2026-09-08: a pill read as a third button). Inline with the buttons; centers when the row stacks. */
.nup-pill{display:inline-flex;align-items:center;align-self:center;gap:8px;white-space:nowrap;color:var(--ink);font-weight:700;font-size:.95rem;letter-spacing:-.005em;padding:6px 4px;}
.nup-pill::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--cta-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235158E2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center/11px 11px no-repeat;flex:none;}

/* --- Fact tables (.factbl) on the port / toll-free / vanity / after-hours pages:
       one consistent look on desktop; on mobile each row STACKS into a card (no
       horizontal scroll). Value cells carry data-label so the column name shows above
       the value when stacked. --- */
.factbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.factbl{width:100%;border-collapse:collapse;font-size:.99rem;}
.factbl th,.factbl td{text-align:left;padding:12px 14px;border:0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5;}
.factbl thead th{background:var(--soft);font-weight:700;color:var(--ink);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;}
.factbl td b{color:var(--ink);}
.factbl td:first-child{width:220px;white-space:nowrap;}
@media(max-width:640px){
  .factbl-wrap{overflow-x:visible;}
  .factbl,.factbl tbody,.factbl tr,.factbl td{display:block;width:100%;}
  .factbl thead{position:absolute;left:-9999px;height:0;overflow:hidden;}
  .factbl tr{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff;}
  .factbl td{border:0;border-bottom:1px solid var(--line);padding:11px 14px;}
  .factbl tr td:last-child{border-bottom:0;}
  .factbl td:first-child{background:#F7F8FA;font-weight:700;color:var(--ink);width:auto;white-space:normal;}
  .factbl td[data-label]::before{content:attr(data-label);display:block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
}
/* A callout directly after a fact table gets breathing room from it (was 8px). */
.factbl-wrap + .callout{margin-top:20px;}

/* --- Function / feature icon tiles: ONE branded tile (soft blue fill,
       blue glyph, no colored border). Colour lives in the tile, not borders. --- */
.fcard .fic{background:var(--cta-soft);border:0;color:var(--cta);}
.fcard .fic svg{color:var(--cta);}

/* --- Cards & pills: borders are ALWAYS neutral --- */
.hsteps.grid .hstep{border-color:var(--line);}
.fchip.pro{border-color:var(--line);background:#F1F1F0;}
.pillset .pill{border-color:var(--line);}

/* --- Example-setup / routing card: keypad keys use the pastel function
       palette (blue digits, yellow extensions, neutral operator); destination
       is one ink chip. Wins over legacy gray-key override blocks. --- */
.frow .fk{background:var(--cta-soft);color:var(--cta);}
.frow .fk.ext{background:#FBF3BF;color:#6E5600;}
.frow .fk.zero{background:var(--soft);color:var(--ink);}
.frow .dest{color:var(--ink);font-weight:700;}

/* --- Hero shot-card routing rows: icon tiles carry the pastel FUNCTION
       colour (blue digit, purple forward, green voicemail, cyan SMS) instead
       of flat white tiles - the same function palette as everywhere else.
       Each .route row sets --c/--cs via its .fn-* class. --- */
.route .fic:not(.key){background:var(--cs,var(--soft));border:0;color:var(--c,var(--ink));}
.route .fic:not(.key) svg{color:var(--c,var(--ink));}
/* dial keys are KEYCAPS (white, bordered, press label from the page route-fn block), never function tiles */
.route .fic.key{background:#fff;border:1px solid var(--line);border-bottom-width:2.5px;color:var(--ink);}
.fic.key{display:grid;grid-auto-rows:min-content;row-gap:2px;place-items:center;place-content:center;line-height:1;font-weight:800;}
.fic.key::after{content:'press';font-size:.38rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;line-height:1;opacity:.7;}
.fic.key.ext::after{content:'dial';}

/* --- Greeting bands: readable ink text (was gray-on-gray) --- */
.shot-greet,.flow-greet{color:var(--ink);}
.shot-greet,.pgreet{background:var(--cta-soft,#ECEDFC);border:1px solid #DDE1F9;border-radius:12px;padding:11px 13px;font-size:.85rem;line-height:1.45;margin-bottom:8px;}
.shot-greet small,.pgreet small{color:var(--cta-dark,#3E45C7);}
.shot-greet small{color:var(--body);}

/* --- Comparison tables: the winning row/column is ALWAYS legible --- */
.cmp-row.joel .desc{color:rgba(255,255,255,.86);}
.cmp-row.joel .desc a{color:#fff;text-decoration-color:rgba(255,255,255,.5);}
.cmp-row .jl{color:var(--ink);}
.cmp4-row.joel .cell{color:rgba(255,255,255,.86);}
.cmp4-row.joel .lbl{color:rgba(255,255,255,.6);}

/* --- Sample Setup (.shot) size + destination variants: .shot-lg = standalone full-width card
   ("Where each call goes" on for/plumbers.html); .route .dest = destination pill on any route row. --- */
.shot-lg{max-width:820px;margin:0 auto;}
.shot-lg .shot-body{padding:20px 26px 16px;}
.shot .route .dest{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:4px 11px;font-size:.8rem;font-weight:700;color:var(--ink);white-space:nowrap;flex:none;}
/* Routing arrows (owner request 2026-07-30): every .dest pill leads with a forwarding arrow, and a dotted leader spans the gap between the option text and its destination, so rows read as "this option forwards HERE" (same arrow convention as .ring .dest). */
.shot .route .dest::before{content:'\2192';color:var(--muted);font-weight:800;}
.shot .route .lead{flex:1;min-width:18px;margin:0 12px 0 14px;border-top:2px dotted #D5D9E0;align-self:center;}
@media(max-width:720px){.shot .route{flex-wrap:wrap;}.shot .route .dest{margin-left:46px;}.shot .route .lead{display:none;}}

/* --- CANONICAL PRIMITIVE: Setup Picker (.pick) - recognizable business setups ---
   Specimen: docs/marketing/components/decision-table.html. Owner: features/call-forwarding.html.
   Two-step decision told through scenarios, not routing modes: .pick-q "Step 1" label + three
   equal scenario cards (Owner only / Owner + assistant / The whole team), then .pick-q "Step 2"
   label + one full-width .pk-mod after-hours modifier card. Card: named tile diagram (.pcol =
   tile + .pn label) + scenario name + what happens + "Best when". --- */
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:0 auto;}
.pick-q{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;font-weight:800;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);margin:6px 0 -2px;}
.pick-q:first-child{margin-top:0;}
.pick-q .pq-n{font-family:var(--mono,ui-monospace,monospace);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fn-fwd,#4A1160);font-weight:600;}
.pk-mod{grid-column:1/-1;}
.pk-mod .pk-what{max-width:62ch;}
.pk{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;}
.pk-viz{display:flex;align-items:flex-end;gap:18px;margin-bottom:16px;min-height:48px;}
.pk-viz .grp{display:flex;flex-direction:column;gap:6px;}
.pk-viz .gl{font-family:var(--mono,ui-monospace,monospace);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.pk-viz .gl.alt{color:#B0447F;}
.pk-viz .pk-arrow{height:34px;display:grid;place-items:center;color:#C2C7CE;}
.pk-viz .pk-arrow svg{width:16px;height:16px;}
.pk-viz .row{display:flex;gap:8px;align-items:flex-start;}
.pk-viz .pcol{display:flex;flex-direction:column;align-items:center;gap:5px;}
.pk-viz .pn{font-family:var(--mono,ui-monospace,monospace);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.ph{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;position:relative;}
.ph svg{width:15px;height:15px;stroke:#C2C7CE;}
.ph.on{background:var(--fn-fwd-soft,#E9D2FF);border-color:var(--fn-fwd-line,#D9B8FF);}
.ph.on svg{stroke:var(--fn-fwd,#4A1160);}
.ph.on.p2{background:var(--fn-number-soft,#CFE0FF);border-color:var(--fn-number-line,#A8C4FF);}
.ph.on.p2 svg{stroke:var(--fn-number,#12308F);}
.ph.on.p3{background:var(--fn-vm-soft,#A8F5C8);border-color:var(--fn-vm-line,#7FE8AB);}
.ph.on.p3 svg{stroke:var(--fn-vm,#0A5A2A);}
.ph.ai{background:#FBE3F0;border-color:#F6D0E4;}
.ph.ai svg{stroke:#B0447F;}
.ph i{position:absolute;top:-7px;right:-7px;width:16px;height:16px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-size:.6rem;font-weight:800;display:grid;place-items:center;}
.pk h4{font-size:1.06rem;font-weight:800;margin:0 0 6px;letter-spacing:-.01em;color:var(--ink);}
.pk-what{color:var(--body);font-size:.92rem;line-height:1.5;margin:0 0 12px;font-weight:500;}
.pk-when{margin:0;font-size:.9rem;font-weight:700;color:var(--ink);padding-top:12px;border-top:1px solid var(--line);}
.pk-when .pk-tag{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fn-fwd,#4A1160);font-weight:600;margin-bottom:3px;}
@media(max-width:720px){.pick{grid-template-columns:1fr;}}

/* --- CANONICAL PRIMITIVE: Topic Index (.tix) - hub-page browse component.
   Owner: learn/index.html. Groups of linked entries: title + one-line promise + type tag. --- */
.tix-group{margin-bottom:44px;}
.tix-group:last-child{margin-bottom:0;}
.tix-group>h3{font-family:var(--display);font-size:1.2rem;font-weight:800;letter-spacing:-.01em;margin-bottom:14px;color:var(--ink);}
.tix-item{display:flex;flex-direction:column;gap:3px;text-decoration:none;position:relative;}
.tix-item b{font-size:1.02rem;font-weight:700;color:var(--ink);transition:color .15s;}
.tix-item:hover b{color:var(--accent-dark,#2E3ACF);text-decoration:underline;text-underline-offset:3px;}
.tix-item span{font-size:.9rem;color:var(--body);font-weight:500;line-height:1.5;max-width:44ch;text-wrap:pretty;}
.tix-item .tix-tag{display:none;}
.tix-list{display:grid;grid-template-columns:1fr 1fr;gap:26px 48px;}
@media(max-width:720px){.tix-list{grid-template-columns:1fr;}}
/* --- CANONICAL PRIMITIVE: Number Card (.numcard) - the Numbers family's signature.
   Owner: numbers/index.html. Two forms: SPECIMEN (nc-num + nc-chips: a real number shown as product UI,
   e.g. area-code sections on city pages) and CHOICE (nc-kind + nc-note + optional nc-eg: a kind of
   number the reader picks; example numbers are labeled "Example:" so they never read as inventory). --- */
.numcard{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;text-decoration:none;transition:border-color .15s,transform .15s;}
a.numcard:hover{border-color:var(--ink);transform:translateY(-1px);color:inherit;}
.numcard .nc-num{font-family:var(--display);font-size:1.35rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.numcard .nc-kind{font-family:var(--display);font-size:1.18rem;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--ink);}
.numcard .nc-eg{font-size:.85rem;font-weight:600;color:var(--muted,var(--body));}
.numcard .nc-chips{display:flex;flex-wrap:wrap;gap:6px;}
.numcard .nc-chips em{font-style:normal;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--cs,var(--soft));color:var(--c,var(--body));border:1px solid var(--cl,var(--line));}
.numcard .nc-note{font-size:.88rem;color:var(--body);font-weight:500;line-height:1.45;}
/* Port note box: porting is a note under the type grid, never a fourth card (owner, 2026-08-01). */
.nc-port{margin-top:14px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:.9rem;color:var(--body);font-weight:500;line-height:1.5;}
.nc-port b{color:var(--ink);font-weight:800;}

/* --- CANONICAL PRIMITIVE: Hero CTA block - eyebrow + acts row + checkmark bullets.
   Specimen: docs/marketing/components/hero-cta-block.html. Owner: learn/business-phone-number.html hero.
   LAW (CLAUDE.md): secondary "See how it works" LEFT, primary "Get early access" RIGHT with
   btn-arrow + .btn-guillemet; .hero-bullets checklist below the acts row. --- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--cta-soft);color:var(--cta-dark);font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;padding:7px 13px;border-radius:8px;margin-bottom:18px;}
.hero-acts{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:26px 0 28px;}
/* sizing matches the homepage .hero-checks exactly (owner 2026-08-01) */
.hero-bullets{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;}
.hero-bullets li{text-wrap:pretty;display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:var(--ink);line-height:1.3;}
.hero-bullets .ck{width:20px;height:20px;color:var(--cta);display:grid;place-items:center;flex-shrink:0;}
.hero-bullets .ck svg{width:12px;height:12px;}

/* --- CANONICAL PRIMITIVE: Trust Strip (.strip) - the highlights row directly below every landing hero.
   Specimen: docs/marketing/components/trust-strip.html. Owner: for/plumbers.html. --- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--soft);padding:30px 0;}
.strip .wrap{max-width:1140px;} /* the strip owns its width - page-local .wrap overrides (narrow editorial columns etc.) must not squeeze it */
.strip-inner{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;padding:20px 0;color:var(--body);font-weight:700;font-size:.95rem;}
.strip-inner span{display:inline-flex;align-items:center;gap:9px;}
.strip-inner svg{width:18px;height:18px;color:var(--cta);}
@media(max-width:720px){.strip-inner{gap:18px;font-size:.88rem;}}

/* --- CANONICAL PRIMITIVE: Number Picker (.resv) - the number-search card.
   Specimen: docs/marketing/components/number-picker.html. Owner: go/boston-business-phone-number.html.
   LAW (owner decision 2026-08-01): landing pages NEVER display available numbers - no inventory rows,
   no fake availability, no abuse surface. The card is STATIC: area-code chips + one search CTA that
   hands off to signup with the area code preselected (?area=617). Signup is the single source of
   truth for numbers. Pre-launch the CTA routes to /early-access.html (keeping the ?area param). --- */
.resv{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(16,16,18,.04),0 18px 40px -28px rgba(15,17,21,.18);}
.resv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px;background:#fff;border-bottom:1px solid #E5E7EB;color:#1F2329;}
.resv-top b{font-size:.98rem;font-weight:800;}
.resv-top .tg{font-family:var(--mono,ui-monospace,monospace);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.rrow{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line);}
.rrow .rnum{font-family:var(--display);font-weight:800;font-size:1.08rem;letter-spacing:-.01em;color:var(--ink);}
.rrow em{font-style:normal;font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--fn-number-soft,#CFE0FF);color:var(--fn-number,#12308F);border:1px solid var(--fn-number-line,#A8C4FF);}
.rrow .rbtn{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 14px;text-decoration:none;transition:border-color .15s;}
.rrow .rbtn:hover{border-color:var(--ink);}
.resv-more{display:block;text-align:center;padding:12px 20px;font-size:.88rem;font-weight:700;color:var(--accent-dark,#2E3ACF);text-decoration:none;border-bottom:1px solid var(--line);}
.resv-more:hover{text-decoration:underline;}
.resv-foot{padding:12px 20px 16px;font-size:.8rem;color:var(--muted);font-weight:600;line-height:1.45;background:var(--soft);border-top:1px solid var(--line);}
.resv-num{padding:22px 20px 14px;display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--line-soft,#f1f2f4);}
.resv-num .rn{font-family:var(--display);font-weight:800;font-size:1.85rem;letter-spacing:.01em;color:var(--ink);}
.resv-num .rn .dots{color:var(--muted);letter-spacing:.08em;}
.resv-feats{list-style:none;margin:0;padding:4px 8px;}
.resv-feats li{display:flex;align-items:center;gap:11px;padding:10px 12px;border-top:1px solid var(--line-soft,#f1f2f4);font-size:.92rem;font-weight:600;color:var(--body);}
.resv-feats li:first-child{border-top:none;}
.resv-feats .fi{width:32px;height:32px;border-radius:9px;background:var(--cs,var(--soft));color:var(--c,var(--ink));border:1px solid var(--cl,var(--line));display:grid;place-items:center;flex:none;}
.resv-feats .fi svg{width:16px;height:16px;}
.resv-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:16px;}
.resv-body p{font-size:.95rem;color:var(--body);font-weight:500;line-height:1.55;}
.resv-acs{display:flex;flex-wrap:wrap;gap:8px;}
.resv-acs i{font-style:normal;min-width:54px;height:38px;border-radius:10px;background:var(--fn-number-soft,#CFE0FF);color:var(--fn-number,#12308F);border:1px solid var(--fn-number-line,#A8C4FF);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.98rem;padding:0 10px;}
.resv-go{align-self:stretch;}

/* --- CANONICAL PRIMITIVE: Comparison Table (.cmp, compare variant of the Decision Table) ---
   Specimen: docs/marketing/components/comparison-table.html. Owner: for/plumbers.html.
   One style site-wide; overrides the inline copies older pages still carry. --- */
.cmp{max-width:900px;margin:0 auto;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(16,16,18,.04),0 18px 40px -28px rgba(15,17,21,.18);}
.cmp-row{display:grid;grid-template-columns:.85fr 2.15fr;border-top:1px solid #E7E9ED;background:#F7F8FA;}
.cmp-row:first-child{border-top:none;}
.cmp-row.head{background:#ECEEF2;}
.cmp-row.head+.cmp-row{border-top:none;}
.cmp-row>div{padding:16px 22px;}
.cmp-row .opt{font-weight:800;font-size:1.04rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;}
.cmp-row .opt .verdict{font-family:var(--sans);font-weight:600;font-size:.85rem;line-height:1.35;color:var(--muted);text-transform:none;letter-spacing:0;}
.cmp-row.best{background:#fff;}
.cmp-row.best .opt{color:var(--ink);font-family:var(--display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em;}
.cmp-row.best .opt svg{display:none;}
.cmp-row.best .desc{color:var(--ink);border-left-color:var(--line);}
.cmp-row.best .desc a{color:var(--accent-dark);}
.cmp-row .desc{color:var(--body);font-size:.98rem;line-height:1.5;border-left:1px solid var(--line);}
.cmp-row .gaps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;align-content:center;border-left:1px solid var(--line);}
.cmp-row .deck{display:flex;flex-direction:column;gap:10px;justify-content:center;border-left:1px solid var(--line);}
.cmp-row .fct{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline;}
.cmp-row .fl{font-family:var(--mono,ui-monospace,monospace);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;}
.cmp-row .fv{font-size:.92rem;line-height:1.5;color:var(--body);font-weight:600;}
.cmp-row .fct:first-child .fv{color:var(--ink);}
.cmp-row.best .deck{border-left-color:var(--line);}
.cmp-row.best .fv{color:var(--ink);}
.cmp-row .gap,.cmp-row .has{font-size:.82rem;font-weight:700;line-height:1.2;padding:6px 12px;border-radius:99px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;}
.cmp-row .gap{color:#943630;background:#FCF1EF;border:1px solid #F2D8D3;}
.cmp-row .gap::before{content:'\2715';font-size:.62em;font-weight:900;color:#fff;background:#E0655B;width:1.55em;height:1.55em;border-radius:50%;display:grid;place-items:center;flex:none;}
.cmp-row .has{color:var(--green-ink,#137A4C);background:var(--green-soft,#EAF8F0);border:1px solid #CDEEDE;}
.cmp-row .has::before{content:'\2713';font-size:.68em;font-weight:900;color:#fff;background:var(--green,#1bb56a);width:1.45em;height:1.45em;border-radius:50%;display:grid;place-items:center;flex:none;}
.cmp-row.best .gaps{border-left-color:var(--line);}
.cmp-row.best .has{background:var(--green-soft,#EAF8F0);border-color:#CDEEDE;}
.cmp-row.best .opt .verdict{color:var(--ink);}
.cmp-row.head .desc,.cmp-row.head .opt{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#6E7480);font-weight:800;}
@media(max-width:720px){
.cmp-row{grid-template-columns:1fr;}
.cmp-row .desc{border-left:none;border-top:1px solid var(--line);}
.cmp-row .gaps{border-left:none;padding-top:0;}
.cmp-row .deck{border-left:none;padding-top:0;}
.cmp-row .fct{grid-template-columns:1fr;gap:2px;}
.cmp-row .gap,.cmp-row .has{white-space:normal;}
.cmp-row.best .desc{border-top-color:var(--line);}
.cmp-row.head{display:none;}
}

/* --- Section eyebrow: identical blue chip everywhere --- */
.sec-kicker,.kicker,.jx-kicker{color:var(--cta-dark);background:var(--cta-soft);border-radius:8px;}

/* --- Mobile: the standalone bar CTA wraps to two lines, so hide it and show
       the Get early access button INSIDE the hamburger menu instead. (site.css
       hides the in-menu .nav-cta by default; re-show + style it here so the CTA
       is never missing, and the menu doesn't end on a doubled divider line.) --- */
@media(max-width:860px){
  .nav-cta-m{display:none;}
  .nav-links a.nav-cta{display:block!important;margin:12px 16px 10px;padding:13px 18px;text-align:center;background:var(--cta);color:#fff!important;border:none;border-radius:10px;font-weight:700;}
  .nav-links a.nav-cta:hover{background:var(--cta-dark);}
}

/* --- Hero band: the homepage's soft coloured wash, applied to every hero
       (contained gradient - no overflow, works regardless of markup).
       Non-standard hero sections opt in with class "hero-band". --- */
.hero,.jx-hero,.hero-band{background:var(--paper);}

/* --- Industry (/for/) pages carry class="lp" on <body>. The intro
       paragraphs under the hero read left-aligned; headings and the
       closer stay centred. Applies to current and future /for/ pages. --- */
body.lp .pain-copy{text-align:left;}

/* --- Shot card header: the "No per-user pricing" stamp overlaps the
       top-right corner, so the title row must never run under it. Reserve
       the corner and drop the Live badge - the title is enough. --- */
body.lp .shot-top{padding-right:152px;min-height:52px;}
body.lp .shot-top .badge{display:none;}

/* --- Closer card small print: was white-on-white on the light card --- */
body.lp .closer-mini{color:var(--muted);}

/* --- Lighter brand (700): wordmark echoes match the lockup --- */
.cmp-row.joel .opt,.cmp4-row.joel .opt{font-weight:700;letter-spacing:.015em;}
.nup-stamp{font-weight:700;}


/* ============================================================
   CANONICAL PRIMITIVES (COMPONENT_REGISTRY.md Phase 2)
   One style authority per primitive. Specimens in
   docs/marketing/components/. Values = rings-page canon.
   ============================================================ */

/* --- Section header --- */
.sec-head{text-align:center;max-width:660px;margin:0 auto 40px;}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:pretty;}
.sec-head p{margin-top:12px;color:var(--body);font-size:1.05rem;line-height:1.55;}

/* --- Sample Setup card anatomy (both forms) --- */
.shot{position:relative;background:#fff;border:1px solid #E2E5EB;border-radius:22px;box-shadow:0 48px 90px -42px rgba(38,42,74,.35),0 18px 44px -30px rgba(38,42,74,.18);}
.shot-top{background:#fff;color:#1F2329;border-bottom:1px solid #E5E7EB;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;border-radius:21px 21px 0 0;}
.shot-top b{font-size:.98rem;font-weight:700;}
.shot-top .tg{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--muted);white-space:nowrap;}
.shot-body{padding:15px 20px 10px;}
.shot-in{display:flex;align-items:center;gap:12px;background:var(--cs,var(--soft));border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:4px;}
.shot-in .fic{width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none;}
.shot-in .fic svg{width:18px;height:18px;color:var(--c,var(--ink));}
.shot-in b{display:block;font-size:1rem;font-weight:700;}
.shot-in span{display:block;font-size:.82rem;color:var(--muted);font-weight:600;}
.shot-foot{padding:12px 20px;background:var(--soft);border-top:1px solid var(--line);font-size:.84rem;color:var(--body);font-weight:600;line-height:1.45;border-radius:0 0 21px 21px;}
.shot-foot b{color:var(--ink);}

/* --- Tree connectors + canonical row (.ring replaces .day1/.fw) --- */
.rings{position:relative;margin-left:31px;padding-left:26px;}
.rings::before{content:'';position:absolute;left:0;top:-4px;bottom:26px;width:2px;background:#D6DAE2;border-radius:2px;}
.rings > *{position:relative;border-top:none!important;}
.rings > *::before{content:'';position:absolute;left:-26px;top:50%;width:24px;height:2px;background:#D6DAE2;border-radius:2px;}
.rings > :last-child::after{content:'';position:absolute;left:-27px;top:calc(50% + 1px);bottom:-6px;width:4px;background:#fff;}
.ring{display:flex;align-items:center;gap:12px;padding:9px 0;position:relative;}
.ring .fic{width:34px;height:34px;border-radius:10px;background:var(--cs,#fff);border:1px solid var(--line);display:grid;place-items:center;flex:none;}
.ring .fic svg{width:18px;height:18px;color:var(--c,var(--ink));}
.ring .rt{min-width:0;}
.ring .rt b{display:block;font-size:.93rem;font-weight:700;white-space:nowrap;}
.ring .rt span{font-size:.82rem;color:var(--muted);font-weight:600;}
.ring .st{margin-left:auto;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 9px;border-radius:999px;white-space:nowrap;}
.ring .st.ringing{background:var(--green-soft,#ecfdf3);color:var(--green-ink,#0f7a47);border:1px solid #CDEEDE;}
.ring .st.answered{background:var(--green,#1bb56a);color:#fff;border:1px solid var(--green,#1bb56a);}
.ring .st.stopped{background:var(--soft);color:var(--muted);border:1px solid var(--line);}
.ring .dest{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:100px;padding:6px 13px;font-weight:700;font-size:.85rem;color:var(--c,var(--ink));white-space:nowrap;}
.ring .dest::before{content:'\2192';color:var(--muted);font-weight:800;}

/* --- Event Sequence --- */
.seq{max-width:560px;margin:0 auto;display:flex;flex-direction:column;}
.seq-node{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 16px;box-shadow:0 1px 2px rgba(16,16,18,.04);}
.seq-node .fic{width:38px;height:38px;border-radius:11px;background:var(--cs,var(--soft));display:grid;place-items:center;flex:none;}
.seq-node .fic svg{width:19px;height:19px;color:var(--c,var(--ink));}
.seq-node b{display:block;font-size:1rem;font-weight:800;}
.seq-node span.sub{display:block;font-size:.86rem;color:var(--muted);font-weight:600;}
.seq-node .chip{margin-left:auto;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap;}
.seq-node .chip.green{background:var(--green,#1bb56a);color:#fff;}
.seq-node .chip.gray{background:var(--soft);color:var(--muted);border:1px solid var(--line);}
.seq-arrow{align-self:center;color:#B9BEC9;padding:4px 0;line-height:0;}
.seq-arrow svg{width:20px;height:20px;}

/* --- Setup Variations (.vars replaces .setups) --- */
.vars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.vars.two{grid-template-columns:repeat(2,1fr);max-width:980px;margin:0 auto;}
.var{border:1px solid var(--line);border-radius:18px;padding:26px;background:#fff;}
.var h3{font-size:1.1rem;font-weight:800;letter-spacing:-.01em;margin-bottom:8px;}
.var p{color:var(--body);font-size:.95rem;line-height:1.55;}
.var p a{color:var(--accent-dark);font-weight:700;}
.var .vk{display:inline-flex;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--cta-dark);background:var(--cta-soft);padding:5px 10px;border-radius:6px;margin-bottom:14px;}
@media(max-width:980px){.vars,.vars.two{grid-template-columns:1fr;}}

/* --- Made Of rows (.uses replaces .with) --- */
.uses{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;}
.use{display:flex;align-items:center;gap:14px;padding:18px 24px;border-top:1px solid var(--line);text-decoration:none;transition:background .15s;}
.use:first-child{border-top:none;}
.use:hover{background:var(--soft);}
.use .fic{width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none;}
.use .fic svg{width:20px;height:20px;color:var(--ink);}
.use .ut{min-width:0;}
.use .ut b{display:block;font-size:1rem;font-weight:800;}
.use .ut span{font-size:.88rem;color:var(--body);font-weight:600;}
.use .go{margin-left:auto;color:var(--muted);font-weight:800;font-size:1.1rem;}

/* --- FAQ accordion --- */
.faq-list{max-width:760px;margin:0 auto;}
.faq-q{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;background:#fff;}
.faq-q summary{list-style:none;cursor:pointer;padding:20px 22px;font-weight:700;font-size:1.04rem;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.faq-q summary::-webkit-details-marker{display:none;}
.faq-q summary .ic{width:22px;height:22px;color:var(--cta);flex-shrink:0;transition:transform .2s;}
.faq-q[open] summary .ic{transform:rotate(45deg);}
.faq-q .ans{padding:0 22px 20px;color:var(--body);font-size:.99rem;line-height:1.6;}
.faq-q .ans a{color:var(--cta);font-weight:700;text-decoration-color:rgba(81,88,226,.45);}
/* links that inherit --accent-dark (site.css resolves it to gray, never blue) */
.var p a,.cmp-row.best .desc a{color:var(--cta);}

/* --- Closer card --- */
.closer{background:#fff;color:var(--ink);text-align:center;padding:56px 0 92px;}
.closer .wrap{max-width:1140px;} /* the closer owns its section (background, width, padding) - pages must NOT restyle .closer locally */
.closer-acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
/* closer stamp inherits the canonical Signal Blue stamp (site.css); the old ink override is retired (owner 2026-08-01) */
.closer-card{background:#F7F8FA;border:1px solid var(--line);border-radius:26px;padding:60px 46px;text-align:center;color:var(--ink);}
.closer-card h2{font-weight:600;font-size:clamp(2rem,3.8vw,2.8rem);letter-spacing:-.035em;line-height:1.12;margin-bottom:16px;text-wrap:pretty;}
.closer-card p{font-size:1.12rem;line-height:1.55;color:var(--body);max-width:46ch;margin:0 auto 30px;font-weight:500;}
.closer-card .btn-primary{background:var(--cta);color:#fff;border-color:var(--cta);border-width:1px;box-shadow:none;}
.closer-card .btn-primary:hover{background:var(--cta-dark);color:#fff;}
.closer-mini{margin-top:18px;font-size:.92rem;color:var(--muted);font-weight:600;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
@media(max-width:560px){.closer-card{padding:48px 26px;}}

/* --- Step label pill --- */
.step .sn{display:inline-flex;align-items:center;border-radius:8px;background:var(--cta-soft);color:var(--cta-dark);font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;margin-bottom:15px;}

/* ===== PHASE 4 LIFT (2026-07-28): shared hero + closer rules, one authority =====
   Hero story card (learn family): stamped .hero-route + .hstory/.srow rows.
   Stamp overhang law: hero padding-top must clear the stamp by 8px (verified by tools/site-system.mjs). */
.hero-route{position:relative;}
.hero-route-stamp{position:absolute;top:-52px;right:-12px;z-index:2;background:var(--paper,#fff);}
@media(max-width:620px){.hero-route-stamp{top:-46px;right:2px;}}
@media(max-width:960px){.hero-route{max-width:560px;}}
.hstory{display:flex;flex-direction:column;}
.srow{display:flex;align-items:center;gap:12px;padding:10px 0;}
.srow .fic{width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none;}
.srow .fic svg{width:18px;height:18px;color:var(--ink);}
.srow b{font-size:.93rem;font-weight:700;color:var(--ink);white-space:nowrap;}
.srow .dest{margin-left:auto;color:var(--c,var(--accent-dark));font-weight:700;font-size:.86rem;white-space:nowrap;padding-left:10px;}
@media(max-width:680px){.srow{gap:9px;}.srow .fic{width:30px;height:30px;border-radius:8px;}.srow .fic svg{width:15px;height:15px;}.srow b{font-size:.8rem;}.srow .dest{font-size:.74rem;}}
/* Sample Setup card stamp (industry heroes) */
.shot-stamp{position:absolute;top:-30px;right:-12px;z-index:2;}
.shot > :last-child:not(.shot-stamp){border-radius:0 0 21px 21px;overflow:hidden;}
.shot-greet small{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-bottom:6px;}
/* Closer micro-line (checkmark trust row under the closer CTA) */
.closer-micro{margin-top:16px;font-size:.88rem;color:var(--muted);font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.closer-micro svg{width:15px;height:15px;flex-shrink:0;color:var(--cta);}

/* Example-setup panel keycaps (.prow .k): same convention as hero-shot keys - a tiny press/dial label
   so menu options never read as step numbers (CLAUDE.md). .k.ah is an icon key (after-hours moon). */
.prow .k{display:grid;grid-auto-rows:min-content;row-gap:2px;place-items:center;place-content:center;font-size:.88rem;line-height:1;border-bottom:2.5px solid #E5E7EB;border-radius:9px;}
.prow .k::after{content:'press';font-size:.38rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;line-height:1;opacity:.7;}
.prow .k.ext::after{content:'dial';}
.prow .k.ah::after{content:none;}
.prow .k.ah svg{width:16px;height:16px;}
.setup-foot{text-wrap:pretty;}
/* cards3 icon tiles wear the function palette when the card is a function (fn-* on .cic) */
.card .cic[class*="fn-"]{background:var(--cs,var(--soft));color:var(--c,var(--ink));}

/* Trust Strip press row (.strip-press) - Signal Blue band, "From the founder of companies featured in" linking to
   /about.html, then a seamless marquee of white logo PNGs (assets/press/*.png, pre-whitened). Owner design 2026-09-09. */
.strip{background:var(--cta);border:0;padding:0;}
.strip-press{display:flex;flex-direction:column;align-items:center;gap:16px;padding:22px 0 20px;max-width:none;}
.press-label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78);font-weight:600;text-decoration:none;}
.press-label:hover{color:#fff;text-decoration:none;}
.press-marquee{width:100%;overflow:hidden;display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.press-track{display:flex;align-items:center;gap:60px;padding-right:60px;flex:none;animation:press-scroll 46s linear infinite;}
.press-marquee:hover .press-track{animation-play-state:paused;}
.press-track img.pl{height:22px;width:auto;display:block;opacity:1;}
@keyframes press-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.press-track{animation:none;flex-wrap:wrap;justify-content:center;gap:18px 40px;padding:0 24px;} .press-track[aria-hidden]{display:none;} .press-marquee{-webkit-mask-image:none;mask-image:none;}}
@media(max-width:620px){.strip-press{padding:18px 0 16px;gap:12px;} .press-label{font-size:.6rem;letter-spacing:.14em;padding:0 20px;text-align:center;} .press-track{gap:40px;padding-right:40px;} .press-track img.pl{height:18px;}}

/* Feature-page breadcrumbs (.crumbs) - visible trail above the hero eyebrow on /features/ detail pages */
.crumbs{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--muted);margin-bottom:14px;}
.crumbs a{color:var(--muted);text-decoration:none;}
.crumbs a:hover{color:var(--accent-dark,#2E3ACF);text-decoration:underline;text-underline-offset:3px;}
.crumbs .sep{opacity:.5;}
.crumbs b{color:var(--ink);font-weight:700;}

/* Dial keys are KEYCAPS everywhere - hard rule: any dial-digit tile shows the tiny press label.
   Covers the industry-page menu example (.menu-ex .pk); .fic.key and .prow .k are handled above. */
.menu-ex li{align-items:center;}
.menu-ex .pk{display:grid;grid-auto-rows:min-content;row-gap:1px;place-items:center;place-content:center;width:32px;height:34px;font-size:.88rem;line-height:1;background:#fff;border:1px solid var(--line);border-bottom-width:2.5px;border-radius:9px;color:var(--ink);font-weight:800;}
.menu-ex .pk::after{content:'press';font-size:.38rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;line-height:1;opacity:.7;}
.vmn-key{display:grid;grid-auto-rows:min-content;row-gap:1px;place-items:center;place-content:center;line-height:1;background:#fff;border:1px solid var(--line);border-bottom-width:2.5px;border-radius:9px;color:var(--ink);font-weight:800;min-width:32px;height:34px;padding:0 6px;}
.vmn-key::after{content:'press';font-size:.38rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;line-height:1;opacity:.7;}
.vmn-key.ext::after{content:'dial';}
/* .mkey (how-it-works menu mock) - same keycap law */
.mkey{display:grid;grid-auto-rows:min-content;row-gap:1px;place-items:center;place-content:center;line-height:1;background:#fff;border:1px solid var(--line);border-bottom-width:2.5px;border-radius:11px;font-size:.92rem;}
.mkey::after{content:'press';font-size:.38rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;line-height:1;opacity:.7;}
.mkey.ext::after{content:'dial';}

/* --- CANONICAL PRIMITIVE: How-it-works steps (.glance-tiles) ---
   Specimen: docs/marketing/components/how-it-works-steps.html. Owner: how-it-works.html hero.
   4 numbered function tiles + 3 dashed "+" tiles inside a .fnlist-card.grid. Tile copy is canonical;
   links target the how-it-works step anchors (in-page #anchors on how-it-works itself, /how-it-works.html#... elsewhere).
   Campaign pages may add only a page-specific note below (.steps-note). --- */
.glance-tiles a.hstep{text-decoration:none;border:1px solid var(--line);transition:transform .15s,box-shadow .15s;}
.glance-tiles a.hstep:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(16,16,18,.45);}
.glance-tiles .hsteps-extra{grid-template-columns:repeat(3,1fr);margin-top:14px;}
.glance-tiles .hsteps-extra .hstep{border-style:dashed;background:color-mix(in srgb,var(--bg-alt,#F4F5F7) 45%,#fff);padding:20px;}
.glance-tiles .hsteps-extra .hstep-body{flex-direction:column;align-items:flex-start;gap:14px;}
.glance-tiles .hsteps-extra .hstep-flow{margin-left:0;justify-content:flex-start;}
.glance-tiles .hsteps-extra .hstep-title{min-width:0;}
.glance-tiles .hsteps-extra .hstep-title b{white-space:normal;line-height:1.25;}
.glance-tiles .hsteps-four{grid-template-columns:repeat(4,1fr);gap:38px;}
.glance-tiles .hsteps-four .hstep{padding:24px 20px;position:relative;background:#fff;align-items:flex-start;}
.glance-tiles .hsteps-four .hstep:not(:last-child)::after{content:"\2192";position:absolute;right:-29px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1.25rem;font-weight:700;line-height:1;}
.glance-tiles .hsteps-four .hstep-title b{white-space:normal;line-height:1.25;}
.glance-tiles .hsteps-four .hstep-desc{font-size:.88rem;color:var(--body);font-weight:500;line-height:1.45;margin:0;text-wrap:pretty;}
.glance-tiles .hsteps-four .hstep-body{flex-direction:column;align-items:flex-start;gap:16px;}
.glance-tiles .hsteps-four .hstep-title{flex-direction:column;align-items:flex-start;gap:14px;}
.glance-tiles .hsteps-four .hstep-ic{width:52px;height:52px;border-radius:14px;}
.glance-tiles .hsteps-four .hstep-ic svg{width:26px;height:26px;}
.glance-tiles .hsteps-four .hstep-flow{margin-left:0;justify-content:flex-start;}
@media(max-width:940px){.glance-tiles .hsteps-four{grid-template-columns:repeat(2,1fr);gap:14px;}.glance-tiles .hsteps-four .hstep::after{display:none;}}
@media(max-width:720px){.glance-tiles .hsteps-extra{grid-template-columns:1fr;}}
@media(max-width:560px){.glance-tiles .hsteps-four{grid-template-columns:1fr;}}

/* Footer join form (entity paragraph -> email + CTA), part of the canonical footer */
/* Footer signup stacks at EVERY width: the footer column is only 280-380px wide, so a
   side-by-side row squeezed the email box to 182px (82px at 900px) and clipped typed
   addresses. Stacked, the input is full width and the CTA reads as a real primary. */
.foot-cta{display:inline-flex;width:auto;margin-top:18px;padding:12px 20px;font-size:.95rem;border-radius:999px;}
.foot-join{display:flex;flex-direction:column;gap:8px;margin-top:18px;max-width:380px;}
.foot-join input{width:100%;min-width:0;padding:12px 14px;border:1.5px solid #CBD2DC;border-radius:10px;font:inherit;font-size:.95rem;background:#fff;color:var(--ink);}
.foot-join input::placeholder{color:#8C93A0;}
.foot-join input:focus{outline:2px solid var(--cta,#5158E2);outline-offset:1px;border-color:transparent;}
.foot-join .btn{padding:12px 16px;font-size:.95rem;border-radius:10px;}
/* Inline confirmation shown after the footer join form is submitted (assets/early-access.js). */
.foot-join-done{margin-top:18px;max-width:380px;font-size:.92rem;line-height:1.5;color:var(--body);background:var(--cta-soft,#ECEDFC);border:1px solid var(--cta,#5158E2);border-radius:10px;padding:12px 14px;}
.foot-join-done strong{color:var(--cta-dark,#3E45C7);}
.foot-join-done .fj-email{font-weight:600;color:var(--ink);}

/* Footer join CTA: white with brand-blue border and text (owner request 2026-08-01, replacing the earlier ink fill). Scoped to the footer email form only. */
/* Footer "Get early access" is the same solid Signal Blue primary as everywhere else.
   (It was previously demoted to an outline here, which made it read as a newsletter box.) */

/* --- CANONICAL PRIMITIVE: Comparison, Head-to-Head (.cmp.h2h) - the /compare/ page dialect.
   Owner: compare/google-voice.html. Specimen: docs/marketing/components/comparison-head-to-head.html.
   One markup + these styles everywhere; pages add only a wrapper (width/shadow) if needed. --- */
/* Grid lines are a continuous grey ground showing through 1px gaps (not
   borders), so row/column intersections can never leave a notch/gap. Same
   technique as the quick-compare table; the Numberline column carries a soft
   tint + blue header instead of a floating blue bar. */
.cmp.h2h{border:1px solid #C3C8D1;border-radius:18px;overflow:hidden;background:#C3C8D1;display:flex;flex-direction:column;gap:1px;}
/* transparent so the column-gaps show the SAME container grey as the row-gaps;
   the base `.cmp-row{background:#F7F8FA}` would otherwise tint the vertical
   dividers a different grey than the horizontal ones. */
.cmp.h2h .cmp-row{display:grid;grid-template-columns:1fr 1.25fr 1.25fr;gap:1px;background:transparent;}
.cmp.h2h .cmp-row>div{padding:18px 22px;background:#fff;}
.cmp.h2h .crit{font-weight:800;font-size:.98rem;display:flex;align-items:center;color:var(--ink);}
.cmp.h2h .gv,.cmp.h2h .jl{color:var(--body);font-size:.95rem;line-height:1.5;display:flex;align-items:flex-start;gap:10px;}
/* Match the quick-compare table: GV column white, only Numberline gets the soft
   tint. Qualify with .cmp-row so this beats `.cmp.h2h .cmp-row>div{background:#fff}`
   (the trailing `div` type selector adds specificity the bare `.jl` can't match). */
.cmp.h2h .cmp-row .jl{background:#F7F8FF;}
.cmp.h2h .cmp-row.head>div{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:16px 22px;display:flex;align-items:center;gap:8px;}
.cmp.h2h .cmp-row.head .gv{background:#E4E7EC;color:var(--ink,#131316);}
.cmp.h2h .cmp-row.head .jl{background:var(--cta,#5158E2);color:#fff;}
.cmp.h2h .mk{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;margin-top:1px;}
.cmp.h2h .mk svg{width:12px;height:12px;stroke-width:3.4;}
.cmp.h2h .mk.no{background:#E0655B;color:#fff;}
.cmp.h2h .mk.yes{background:var(--green,#1bb56a);color:#fff;}
.cmp.h2h .gv b,.cmp.h2h .jl b{color:var(--ink);font-weight:800;display:block;margin-bottom:2px;}
.cmp.h2h .lbl{display:none;}
@media(max-width:880px){
/* Mobile: each criterion is its own clean card with the two options stacked and
   clearly labeled. The winning Numberline option carries a soft brand tint
   instead of a floating blue line, so the comparison reads at a glance. */
.cmp.h2h{border:none;background:none;border-radius:0;overflow:visible;box-shadow:none;}
.cmp.h2h .cmp-row{grid-template-columns:1fr;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:14px;box-shadow:0 1px 2px rgba(16,16,18,.04),0 14px 30px -24px rgba(15,17,21,.2);}
.cmp.h2h .cmp-row:last-child{margin-bottom:0;}
.cmp.h2h .cmp-row.head{display:none;}
.cmp.h2h .cmp-row>div{padding:15px 18px;}
.cmp.h2h .crit{font-size:1rem;font-weight:800;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:12px;}
.cmp.h2h .gv,.cmp.h2h .jl{border-left:none;}
.cmp.h2h .jl::before{display:none;}
.cmp.h2h .gv{background:#F6F7F9;}
.cmp.h2h .jl{background:var(--cta-soft,#ECEDFC);border-top:1px solid #DDE1F9;}
.cmp.h2h .lbl{display:block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:4px;}
.cmp.h2h .jl .lbl{color:var(--cta-dark);}
}

/* --- CANONICAL PRIMITIVE: Area Map (.geo-map) - illustrated local-map hero for geo pages.
   Specimen: docs/marketing/components/area-map.html; drawn centrally by assets/area-map.js (d3 + us-atlas).
   REVISED 2026-08-01: seamless illustration (no card chrome, no tiles); whole element links to signup. --- */
a.geo-map{display:block;color:inherit;text-decoration:none;cursor:pointer;transition:transform .15s;}
a.geo-map:hover{transform:translateY(-2px);}
.geo-map{position:relative;}
.geo-map svg{display:block;width:100%;height:auto;}

/* --- CANONICAL PRIMITIVE: Call Map (.call-map) - THE signature setup diagram (owner 2026-08-01).
   Built centrally by assets/call-map.js from one tag + JSON config; specimen components/call-map.html.
   Replaces the ARCHIVED Sample Setup tree + Call Flow forms. Straight brand-blue lines, top-down. --- */
.call-map{max-width:980px;margin:0 auto;}
.cm-toggle{display:flex;justify-content:center;gap:0;width:max-content;margin:0 auto 26px;background:#fff;border:1px solid var(--line,#E8EAEE);border-radius:99px;padding:4px;}
.cm-toggle button{font-family:inherit;font-size:.86rem;font-weight:600;color:var(--muted,#6E7480);background:none;border:0;border-radius:99px;padding:8px 18px;cursor:pointer;transition:background .15s,color .15s;}
.cm-toggle button.on{background:var(--cta,#5158E2);color:#fff;}
.cm-toggle button:not(.on):hover{color:var(--ink,#131316);}
@media(max-width:480px){.cm-toggle{width:100%;max-width:100%;} .cm-toggle button{flex:1 1 0;min-width:0;padding:8px 8px;font-size:.8rem;}}
.cm-hub{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;margin:0 auto;background:#fff;border:2.5px solid var(--cta,#5158E2);border-radius:18px;padding:12px 17px;box-shadow:0 18px 40px -16px rgba(46,52,160,.4);}
.cm-hubic{width:46px;height:46px;border-radius:12px;background:var(--cta-soft,#ECEDFC);color:var(--cta-dark,#3E45C7);display:grid;place-items:center;flex:none;}
.cm-hubic svg{width:23px;height:23px;}
.cm-hub b{font-family:'Figtree',var(--sans,sans-serif);font-weight:600;font-size:1.2rem;letter-spacing:-.015em;color:#33333A;display:block;line-height:1.05;margin-bottom:2px;}
.cm-hub i{font-style:normal;font-size:.76rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#6E7480;display:block;line-height:1.2;}
.cm-stub{width:2px;height:26px;background:var(--cta,#5158E2);margin:0 auto;}
.cm-greet{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line,#E8EAEE);border-radius:14px;padding:14px 20px;text-align:center;}
.cm-greet small{display:block;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:#6E7480;font-weight:600;margin-bottom:6px;}
.cm-greet p{font-size:.98rem;color:var(--ink,#131316);font-weight:500;line-height:1.45;margin:0;}
.cm-cols{display:grid;grid-template-columns:repeat(var(--cmn,3),1fr);}
.cm-col{position:relative;padding:26px 9px 0;display:flex;flex-direction:column;align-items:center;}
.cm-col::before{content:"";position:absolute;top:0;left:calc(50% - 1px);width:2px;height:26px;background:var(--cta,#5158E2);}
.cm-cols.multi .cm-col::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--cta,#5158E2);}
.cm-cols.multi .cm-col:first-child::after{left:50%;}
.cm-cols.multi .cm-col:last-child::after{right:50%;}
.cm-card{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line,#E8EAEE);border-radius:14px;padding:12px 14px;box-shadow:0 10px 22px -14px rgba(15,17,21,.25);width:100%;max-width:250px;}
.cm-tile{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;}
.cm-tile svg{width:19px;height:19px;}
.cm-tx b{display:block;font-size:.95rem;font-weight:600;letter-spacing:-.006em;line-height:1.2;color:var(--ink,#131316);}
.cm-tx span{display:block;font-size:.78rem;color:var(--muted,#838995);font-weight:500;}
.cm-join{width:2px;height:22px;background:var(--cta,#5158E2);}
/* "Forwards to" flag between an extension card and the phones it forwards to */
.cm-fwd{position:relative;display:flex;align-items:center;justify-content:center;width:2px;height:40px;background:var(--cta,#5158E2);margin:0 auto;}
.cm-fwd span{position:absolute;white-space:nowrap;background:#fff;border:1px solid #C3C8F0;color:var(--cta-dark,#3E45C7);font-size:.6rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:99px;box-shadow:0 3px 10px -3px rgba(46,52,160,.28);}
.cm-fwd.cm-fb span{color:#0f7a47;border-color:#BFE3CC;box-shadow:0 3px 10px -3px rgba(15,122,71,.22);}
.cm-note{text-align:center;margin:26px auto 0;max-width:64ch;font-size:.98rem;font-weight:500;color:#4A4A52;}
.cm-topnote{text-align:center;margin:-6px auto 24px;font-size:.98rem;font-weight:500;color:#4A4A52;}
.cm-chips{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px;}
.cm-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line,#E8EAEE);border-radius:99px;padding:8px 15px;font-size:.84rem;font-weight:600;color:var(--ink,#131316);}
.cm-chip i{width:8px;height:8px;border-radius:50%;display:block;}
.cm-t-purple{background:#F3E8FF;color:#7C3AED;}.cm-t-blue{background:#CFE0FF;color:#12308F;}.cm-t-green{background:#D7F5E3;color:#0f7a47;}.cm-t-yellow{background:#FBF3C4;color:#6E5600;}.cm-t-pink{background:#FBE3F0;color:#BE185D;}.cm-t-cyan{background:#E0F5FA;color:#0891B2;}
.cm-d-cyan{background:#0891B2;}.cm-d-green{background:#1bb56a;}.cm-d-pink{background:#BE185D;}.cm-d-purple{background:#7C3AED;}.cm-d-blue{background:#12308F;}.cm-d-yellow{background:#B7791F;}
@media(max-width:760px){
.cm-cols{grid-template-columns:1fr;gap:12px;max-width:400px;margin:0 auto;}
.cm-cols.multi .cm-col::after,.cm-col::before,.cm-join{display:none;}
.cm-col{padding:0;border:1px solid var(--line,#E8EAEE);border-radius:14px;background:#fff;box-shadow:0 10px 22px -14px rgba(15,17,21,.25);overflow:hidden;align-items:stretch;}
.cm-card{border:0;border-radius:0;box-shadow:none;padding:11px 14px;max-width:none;}
.cm-col .cm-card:first-child{background:#fff;border-bottom:1px solid var(--line,#E8EAEE);}
.cm-col .cm-card:first-child:last-child{background:#fff;border-bottom:0;}
.cm-card:not(:first-child){position:relative;padding-left:46px;}
.cm-card:not(:first-child)::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:2px;background:#B4BAF0;}
.cm-card:not(:first-child):last-child::before{bottom:50%;}
.cm-card:not(:first-child)::after{content:"";position:absolute;left:24px;top:calc(50% - 1px);width:13px;height:2px;background:#B4BAF0;}
.cm-fwd{width:auto;height:auto;margin:0;background:none;display:block;position:static;text-align:left;padding:11px 14px 3px 16px;}
.cm-fwd span{position:static;background:none;border:0;box-shadow:none;padding:0;color:var(--cta-dark,#3E45C7);font-size:.58rem;font-weight:600;letter-spacing:.06em;}
.cm-fwd.cm-fb span{color:#0f7a47;}
.cm-tile{width:34px;height:34px;border-radius:9px;}
.cm-hub b{font-size:1.1rem;}
/* stacked multi-column maps: join every column to the hub, not just the first */
.cm-cols.multi .cm-col{overflow:visible;}
.cm-cols.multi .cm-col>.cm-card:first-child{border-radius:13px 13px 0 0;}
.cm-cols.multi .cm-col>:last-child{border-radius:0 0 13px 13px;}
.cm-cols.multi .cm-col>.cm-card:only-child{border-radius:13px;}
.cm-cols.multi .cm-col:not(:first-child)::before{display:block;top:-12px;left:calc(50% - 1px);width:2px;height:12px;background:var(--cta,#5158E2);}
}

/* --- CANONICAL PRIMITIVE: Quick Compare (.qcmp) - scannable at-a-glance 3-col table.
   feature | left option (e.g. Others / a competitor) | Numberline. Continuous grey grid
   (1px gaps, no borders), Numberline column tinted + blue header. Specimen: the compare
   pages' hero table and the homepage "How Numberline compares". --- */
.qcmp{max-width:760px;margin:0 auto;border:1px solid #C3C8D1;border-radius:16px;overflow:hidden;background:#C3C8D1;box-shadow:0 1px 2px rgba(16,16,18,.04),0 18px 40px -30px rgba(15,17,21,.2);display:flex;flex-direction:column;gap:1px;}
.qcmp-row{display:grid;grid-template-columns:.9fr 1.1fr 1.1fr;gap:1px;}
.qcmp-row>div{padding:13px 16px;display:flex;align-items:center;gap:9px;font-size:.96rem;line-height:1.3;background:#fff;min-width:0;}
.qc-feat{font-weight:800;color:var(--ink);}
.qc-gv{color:var(--body);}
.qcmp-row .qc-nl{color:var(--ink);font-weight:600;background:#F7F8FF;}
.qcmp-head>div{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;}
.qcmp-head .qc-gv{background:#E4E7EC;color:var(--ink);}
.qcmp-head .qc-nl{background:var(--cta,#5158E2);color:#fff;font-weight:800;}
.qi{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;}
.qi svg{width:11px;height:11px;stroke-width:3.4;}
.qi.no{background:#E0655B;}
.qi.yes{background:var(--green,#1bb56a);}
@media(max-width:560px){
  /* phones: the feature name becomes a small header spanning the row; Others / Numberline sit beneath it */
  .qcmp-row{grid-template-columns:1fr 1fr;gap:0 1px;}
  .qcmp-row>div{padding:11px 12px;font-size:.84rem;gap:6px;}
  .qcmp-row .qc-feat{grid-column:1/-1;padding:10px 12px 4px;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:#fff;}
  .qcmp-head .qc-feat{display:none;}
  .qcmp-head>div{font-size:.62rem;letter-spacing:.06em;}
  .qi{width:16px;height:16px;} .qi svg{width:9px;height:9px;}
}

/* --- CANONICAL PRIMITIVE: Feature grid (.fgrid > .fcard > .fd small UI detail) - born on /go/startup-business-phone-number,
   shared by the homepage everyday-value section and the landing pages. Pages may keep identical inline copies; edit HERE. --- */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.fcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px;}
.fcard h3{font-size:1.04rem;font-weight:800;letter-spacing:-.01em;}
.fcard p{font-size:.92rem;color:var(--body);line-height:1.5;}
.fd{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px;min-height:76px;display:flex;align-items:center;font-size:.8rem;}
.fd-call{display:flex;align-items:center;gap:10px;width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;}
.fd-call .fd-ring{width:30px;height:30px;border-radius:9px;background:var(--cta-soft);color:var(--cta);display:grid;place-items:center;flex:none;box-shadow:0 0 0 3px rgba(81,88,226,.14);} .fd-call svg{width:15px;height:15px;}
.fd-call b{display:block;font-size:.82rem;font-weight:800;} .fd-call small{font-size:.7rem;color:var(--muted);font-weight:600;}
.fd-call .fd-acc{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#1bb56a;color:#fff;display:grid;place-items:center;flex:none;} .fd-call .fd-acc svg{width:13px;height:13px;}
.fd-chat{display:flex;flex-direction:column;gap:6px;width:100%;}
.fd-chat span{max-width:78%;padding:6px 10px;border-radius:11px;font-size:.78rem;font-weight:500;line-height:1.3;}
.fd-chat .them{background:#fff;border:1px solid var(--line);border-bottom-left-radius:3px;align-self:flex-start;} .fd-chat .us{background:var(--cta);color:#fff;border-bottom-right-radius:3px;align-self:flex-end;}
.fd-vm{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:.78rem;line-height:1.4;color:var(--body);} .fd-vm b{color:var(--ink);}
.fd-vm .fd-att{display:inline-block;margin-top:6px;font-size:.68rem;font-weight:700;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:2px 7px;}
.fd-menu{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:6px 8px;width:100%;} .fd-menu b{font-size:.84rem;font-weight:800;} .fd-menu .mkey{width:28px;height:30px;font-size:.78rem;}
.fd-fwd{display:flex;flex-direction:column;gap:5px;width:100%;} .fd-fwd span{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 9px;}
.fd-fwd .dot{width:8px;height:8px;border-radius:50%;background:#C3C8D1;flex:none;} .fd-fwd .dot.on{background:#1bb56a;box-shadow:0 0 0 3px rgba(27,181,106,.18);}
.fd-int{display:flex;flex-wrap:wrap;gap:6px;width:100%;} .fd-int span{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 10px;} .fd-int svg{width:15px;height:15px;} .fd-int .ai{color:#B0447F;}
@media(max-width:900px){.fgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.fgrid{grid-template-columns:1fr;}}
.fgrid.four{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:1000px){.fgrid.four{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.fgrid.four{grid-template-columns:1fr;}}
.fd-greet{width:100%;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:.8rem;font-weight:600;font-style:italic;color:var(--ink);line-height:1.3;}
.fd-greet .fd-spk{width:26px;height:26px;border-radius:8px;background:#FBE3F0;color:#BE185D;display:grid;place-items:center;flex:none;font-style:normal;} .fd-greet .fd-spk svg{width:14px;height:14px;}
.fd-cid{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;}
.fd-cid small{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.fd-cid b{font-size:.84rem;font-weight:800;display:flex;align-items:center;gap:6px;} .fd-cid b .ok{width:16px;height:16px;border-radius:50%;background:#1bb56a;color:#fff;display:grid;place-items:center;flex:none;} .fd-cid b .ok svg{width:9px;height:9px;}
.fd-cid span{font-size:.74rem;color:var(--muted);font-weight:600;}
/* three-tile variant of the How-it-works hero tiles */
.glance-tiles .hsteps-three{grid-template-columns:repeat(3,1fr);gap:38px;max-width:980px;margin:0 auto;}
.glance-tiles .hsteps-three .hstep{padding:24px 20px;position:relative;background:#fff;align-items:flex-start;display:flex;flex-direction:column;gap:12px;}
.glance-tiles .hsteps-three .hstep:not(:last-child)::after{content:"\2192";position:absolute;right:-29px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1.25rem;font-weight:700;line-height:1;}
.glance-tiles .hsteps-three .hstep-desc{font-size:.88rem;color:var(--body);font-weight:500;line-height:1.45;margin:0;text-wrap:pretty;}
@media(max-width:940px){.glance-tiles .hsteps-three{grid-template-columns:1fr;max-width:440px;gap:14px;}.glance-tiles .hsteps-three .hstep::after{display:none;}}