/* Who we help: shared styles for /who-we-help/, /industries/*, /stages/* and /roles/*.
   Two parts:
   1. .wwh-hub  the dark "Who we partner with" panel. Standalone, so the homepage can use it too.
   2. .pc-wwh   the segment page template (hero, problems, services, proof, 90 days, reading, FAQ, CTA).
   3. .pc-wwh   homepage parts reused on the segment pages: client logo strip, pricing, tech stack orbit.
                Ported from index.html (.pc-home); change both if the homepage look changes.
   Page-specific copy lives in each page. Change the look here, once, for all 17 pages. */

/* ═════════════════════════════════════════════════════════════
   1. WHO WE PARTNER WITH PANEL (.wwh-hub)
   ═════════════════════════════════════════════════════════════ */
.wwh-hub {
  --h-ink: #0B0D12; --h-ink-2: #171B23; --h-brand: #0943B0; --h-brand-fg: #2E6BE0; --h-sky: #9DBBF5;
  --h-on: #FFFFFF; --h-on-2: #C9CFDA; --h-on-3: #8D97A6; --h-rule: rgba(255,255,255,.12);
  --h-ease: cubic-bezier(.2,.7,.2,1);
  --mx: 50%; --my: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--h-ink); color: var(--h-on);
  border: 2px solid #000; border-radius: 6px; box-shadow: 8px 8px 0 var(--h-brand);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wwh-hub *, .wwh-hub *::before, .wwh-hub *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Faint blue grid, same 46px rhythm as the site's hero grid, fading out toward the bottom */
.wwh-hub::before, .wwh-hub::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(46,107,224,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(46,107,224,.14) 1px, transparent 1px);
  background-size: 46px 46px; background-position: -1px -1px;
}
.wwh-hub::before {
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
}
/* Brighter grid under the pointer (desktop only, set by /assets/wwh.js) */
.wwh-hub::after {
  background-image: linear-gradient(rgba(46,107,224,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(46,107,224,.55) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000, transparent 70%);
  mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000, transparent 70%);
  opacity: 0; transition: opacity .4s;
}
.wwh-hub.is-lit::after { opacity: 1; }

.wwh-hub .wwh-hub__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding: 48px 48px 32px; border-bottom: 1px solid var(--h-rule); }
.wwh-hub .wwh-hub__title { font-size: 40px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--h-on); }
.wwh-hub .wwh-hub__lead { margin-top: 12px; max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--h-on-2); }
.wwh-hub .wwh-hub__all { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--h-on) !important; text-decoration: none !important; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 3px; white-space: nowrap; transition: border-color .15s, color .15s; }
.wwh-hub .wwh-hub__all:hover { border-color: var(--h-on); }
.wwh-hub .wwh-hub__all svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.wwh-hub .wwh-hub__all:hover svg { transform: translateX(3px); }

.wwh-hub .wwh-hub__cols { display: grid; grid-template-columns: 1fr 1.25fr 1fr; }
.wwh-hub .wwh-hub__col { padding: 32px 40px 40px; min-width: 0; }
.wwh-hub .wwh-hub__col + .wwh-hub__col { border-left: 1px solid var(--h-rule); }
.wwh-hub .wwh-hub__pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--h-brand); border: 1px solid var(--h-brand-fg); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--h-on); line-height: 1; }
.wwh-hub .wwh-hub__pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--h-sky); }
.wwh-hub .wwh-hub__list { list-style: none; }
.wwh-hub .wwh-hub__list li { border-bottom: 1px solid var(--h-rule); }
.wwh-hub .wwh-hub__list li:last-child { border-bottom: 0; }
.wwh-hub .wwh-hub__link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: 17px; font-weight: 400; line-height: 1.35; color: var(--h-on-2); text-decoration: none; transition: color .15s, padding .2s var(--h-ease); }
.wwh-hub .wwh-hub__link::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--h-brand-fg); transform: translateY(-50%); transition: width .2s var(--h-ease); }
.wwh-hub .wwh-hub__chev { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--h-on-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--h-ease), stroke .15s; }
.wwh-hub .wwh-hub__link:hover, .wwh-hub .wwh-hub__link:focus-visible { color: var(--h-on); padding-left: 18px; outline: none; }
.wwh-hub .wwh-hub__link:hover::before, .wwh-hub .wwh-hub__link:focus-visible::before { width: 10px; }
.wwh-hub .wwh-hub__link:hover .wwh-hub__chev, .wwh-hub .wwh-hub__link:focus-visible .wwh-hub__chev { transform: translateX(5px); stroke: var(--h-sky); }
.wwh-hub .wwh-hub__link:focus-visible { box-shadow: inset 0 0 0 2px var(--h-brand-fg); border-radius: 2px; }

/* The page you're on: lit row, white text, sky bar (segment pages set aria-current="page") */
.wwh-hub .wwh-hub__link[aria-current="page"] { color: var(--h-on); font-weight: 500; padding-left: 18px; background: linear-gradient(90deg, rgba(46,107,224,.22), rgba(46,107,224,0) 85%); }
.wwh-hub .wwh-hub__link[aria-current="page"]::before { width: 10px; background: var(--h-sky); }
.wwh-hub .wwh-hub__link[aria-current="page"] .wwh-hub__chev { stroke: var(--h-sky); }
.wwh-hub .wwh-hub__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 24px 48px; border-top: 1px solid var(--h-rule); background: rgba(255,255,255,.03); }
.wwh-hub .wwh-hub__foot p { font-size: 15px; line-height: 1.55; color: var(--h-on-2); }
.wwh-hub .wwh-hub__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 4px; border: 2px solid var(--h-on); background: var(--h-on); color: var(--h-ink) !important; font-size: 15px; font-weight: 500; text-decoration: none !important; white-space: nowrap; transition: transform .15s var(--h-ease), box-shadow .15s var(--h-ease); }
.wwh-hub .wwh-hub__btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--h-brand-fg); }
.wwh-hub .wwh-hub__btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1024px) {
  .wwh-hub .wwh-hub__head { padding: 40px 32px 28px; }
  .wwh-hub .wwh-hub__col { padding: 28px 28px 32px; }
  .wwh-hub .wwh-hub__foot { padding: 22px 32px; }
}
@media (max-width: 860px) {
  .wwh-hub .wwh-hub__cols { grid-template-columns: 1fr; }
  .wwh-hub .wwh-hub__col + .wwh-hub__col { border-left: 0; border-top: 1px solid var(--h-rule); }
}
@media (max-width: 720px) {
  .wwh-hub { box-shadow: 5px 5px 0 var(--h-brand); }
  .wwh-hub .wwh-hub__head { grid-template-columns: 1fr; padding: 32px 20px 24px; }
  .wwh-hub .wwh-hub__title { font-size: 30px; }
  .wwh-hub .wwh-hub__lead { font-size: 16px; }
  .wwh-hub .wwh-hub__all { white-space: normal; }
  .wwh-hub .wwh-hub__col { padding: 24px 20px 24px; }
  .wwh-hub .wwh-hub__link { font-size: 16px; padding: 13px 0; }
  .wwh-hub .wwh-hub__foot { padding: 20px; }
  .wwh-hub .wwh-hub__btn { width: 100%; justify-content: center; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .wwh-hub *, .wwh-hub::after { transition: none !important; }
  .wwh-hub .wwh-hub__btn:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════════════
   2. SEGMENT PAGE TEMPLATE (.pc-wwh)
   ═════════════════════════════════════════════════════════════ */
.pc-wwh {
  --brand: #0943B0; --brand-fg: #2E6BE0; --brand-deep: #062E7A; --brand-bg: #E8EFFC; --brand-pale: #F4F8FE;
  --line: #000000; --ink: #0B0D12; --n700: #232A38; --ink-2: #2B3242; --g600: #4A5363; --g500: #7C8697;
  --border: #D9DEE6; --border-faint: #EDF0F4; --on-dark: #FFFFFF; --on-dark-2: #C9CFDA; --white: #FFFFFF;
  --paper: #F8F8FF; --bg-ink: #0B0D12; --bg-ink-2: #171B23; --red-dark: #B3241A; --red-bg: #FFE1DE;
  --ease: cubic-bezier(.2,.7,.2,1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-family: var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.pc-wwh *, .pc-wwh *::before, .pc-wwh *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font); }
.pc-wwh a { color: var(--brand-fg); }
.pc-wwh img { max-width: 100%; }
.pc-wwh .wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* Shared pieces, same as the service pages */
.pc-wwh .section { padding: 104px 0; }
.pc-wwh .section + .section { border-top: 1px solid var(--border); }
.pc-wwh .sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; padding-bottom: 28px; margin-bottom: 44px; border-bottom: 2px solid var(--line); }
.pc-wwh .sec-head h2 { font-size: 44px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; max-width: 600px; }
.pc-wwh .sec-head p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 460px; justify-self: end; }
.pc-wwh .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none !important; font-size: 16px; font-weight: 500; line-height: 1.25; padding: 15px 24px; border-radius: 4px; border: 2px solid var(--line); cursor: pointer; text-align: center; transition: background .15s, color .15s, transform .15s var(--ease), box-shadow .15s var(--ease); }
.pc-wwh .btn svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.pc-wwh .btn:hover svg { transform: translateX(3px); }
.pc-wwh .btn-primary { background: var(--brand); color: var(--white) !important; }
.pc-wwh .btn-primary:hover { background: var(--brand-deep); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--line); }
.pc-wwh .btn-secondary { background: var(--white); color: var(--ink) !important; }
.pc-wwh .btn-secondary:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--brand); }
.pc-wwh .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pc-wwh .text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--ink) !important; text-decoration: none !important; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color .15s, border-color .15s; }
.pc-wwh .text-link:hover { color: var(--brand) !important; border-color: var(--brand); }
.pc-wwh .text-link svg { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.pc-wwh .text-link:hover svg { transform: translateX(3px); }
.pc-wwh .frame { background: var(--white); border: 2px solid var(--line); border-radius: 6px; overflow: hidden; }
.pc-wwh .lift { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.pc-wwh .lift:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--brand); }

/* Breadcrumb */
.pc-wwh .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; list-style: none; margin-bottom: 28px; font-size: 13px; color: var(--g600); }
.pc-wwh .crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.pc-wwh .crumbs li + li::before { content: ''; width: 5px; height: 5px; border-top: 1.5px solid var(--g500); border-right: 1.5px solid var(--g500); transform: rotate(45deg); }
.pc-wwh .crumbs a { color: var(--g600); text-decoration: none; }
.pc-wwh .crumbs a:hover { color: var(--brand); text-decoration: underline; }
.pc-wwh .crumbs [aria-current] { color: var(--ink); }

/* HERO */
.pc-wwh .seg-hero { position: relative; overflow: hidden; padding: 48px 0 80px; }
.pc-wwh .seg-hero > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.pc-wwh .seg-hero > .wrap { position: relative; z-index: 1; }
.pc-wwh .seg-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.pc-wwh .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--brand-bg); border: 1px solid rgba(9,67,176,.25); font-size: 13px; font-weight: 500; color: var(--brand); line-height: 1.2; }
.pc-wwh .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.pc-wwh .seg-hero h1 { font-size: 50px; font-weight: 500; line-height: 1.07; letter-spacing: -0.035em; color: var(--ink); margin-bottom: 24px; text-wrap: balance; }
.pc-wwh .seg-hero-lead p { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 560px; }
.pc-wwh .seg-hero-lead p + p { margin-top: 14px; }
.pc-wwh .seg-hero-lead b { font-weight: 500; color: var(--ink); }
.pc-wwh .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.pc-wwh .seg-hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); max-width: 560px; font-size: 14px; line-height: 1.5; color: var(--g600); }
.pc-wwh .seg-hero-proof strong { font-weight: 500; color: var(--ink); }
.pc-wwh .seg-hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.pc-wwh .seg-hero-proof span::before { content: ''; width: 6px; height: 6px; background: var(--brand); flex-shrink: 0; }
.pc-wwh .seg-hero-art { position: relative; padding: 14px; box-shadow: 8px 8px 0 var(--line); background: var(--brand-pale); }
.pc-wwh .seg-hero-art img { display: block; width: 100%; height: auto; border-radius: 3px; transition: transform .5s var(--ease); }
.pc-wwh .seg-hero-art:hover img { transform: scale(1.03); }

/* SOUND FAMILIAR: problems in the buyer's words */
.pc-wwh .pains { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--white); }
.pc-wwh .pain { padding: 32px 32px 34px; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0 20px; transition: background .2s; }
.pc-wwh .pain:hover { background: var(--brand-pale); }
.pc-wwh .pain:nth-child(2n) { border-left: 1px solid var(--border); }
.pc-wwh .pain:nth-child(n+3) { border-top: 1px solid var(--border); }
.pc-wwh .pain-mark { width: 42px; height: 42px; border-radius: 4px; background: var(--red-bg); border: 1px solid var(--red-dark); display: flex; align-items: center; justify-content: center; }
.pc-wwh .pain-mark svg { width: 20px; height: 20px; fill: var(--red-dark); transform: rotate(180deg); }
.pc-wwh .pain-q { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; }
.pc-wwh .pain-b { font-size: 15px; line-height: 1.65; color: var(--ink-2); }

/* HOW WE HELP: one row per service */
.pc-wwh .helps { border: 2px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--white); }
.pc-wwh .help { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; transition: background .2s; }
.pc-wwh .help + .help { border-top: 1px solid var(--border); }
.pc-wwh .help:hover { background: var(--brand-pale); }
.pc-wwh .help-side { padding: 30px 28px; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pc-wwh .help-icon { width: 42px; height: 42px; border-radius: 4px; background: var(--brand); display: flex; align-items: center; justify-content: center; }
.pc-wwh .help-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pc-wwh .help-name { font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.pc-wwh .help-tag { font-size: 12px; font-weight: 500; color: var(--brand); background: var(--brand-bg); border-radius: 2px; padding: 4px 8px; }
.pc-wwh .help-main { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.pc-wwh .help-main p { font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 680px; }
.pc-wwh .help-main p b { font-weight: 500; color: var(--ink); }
.pc-wwh .help-main .text-link { align-self: flex-start; }

/* PROOF */
.pc-wwh .proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pc-wwh .case { text-decoration: none !important; color: inherit; display: flex; flex-direction: column; }
.pc-wwh .case-top { position: relative; background: var(--bg-ink); min-height: 150px; display: flex; align-items: center; justify-content: center; padding: 28px; border-bottom: 2px solid var(--line); background-image: linear-gradient(rgba(46,107,224,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(46,107,224,.16) 1px, transparent 1px); background-size: 46px 46px; }
.pc-wwh .case-logo { max-width: 180px; max-height: 52px; object-fit: contain; filter: brightness(0) invert(1); transition: transform .3s var(--ease); }
.pc-wwh .case:hover .case-logo { transform: scale(1.05); }
.pc-wwh .case-anon { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--on-dark); text-align: center; line-height: 1.35; }
.pc-wwh .case-anon small { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--on-dark-2); }
.pc-wwh .case-body { padding: 24px 26px 0; flex: 1; display: flex; flex-direction: column; }
.pc-wwh .case-tag { font-size: 13px; color: var(--g600); margin-bottom: 8px; }
.pc-wwh .case-title { font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; }
.pc-wwh .case-desc { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin-bottom: 22px; }
.pc-wwh .case-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: auto -26px 0; border-top: 1px solid var(--line); background: var(--brand-pale); }
.pc-wwh .case-stat { padding: 16px 18px; border-left: 1px solid var(--border); }
.pc-wwh .case-stat:first-child { border-left: 0; }
.pc-wwh .case-stat-val { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-wwh .case-stat-val .a { color: var(--brand); }
.pc-wwh .case-stat-key { font-size: 13px; color: var(--g600); margin-top: 4px; line-height: 1.4; }
.pc-wwh .case-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -26px; padding: 14px 26px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 500; color: var(--ink); }
.pc-wwh .case-go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.pc-wwh .case:hover .case-go { color: var(--brand); }
.pc-wwh .case:hover .case-go svg { transform: translateX(4px); }
/* Client list card, for pages without a case study in the segment */
.pc-wwh .clients { display: flex; flex-direction: column; padding: 28px 28px 26px; }
.pc-wwh .clients-label { font-size: 13px; color: var(--g600); margin-bottom: 6px; }
.pc-wwh .clients-title { font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 18px; }
.pc-wwh .client-list { list-style: none; border-top: 1px solid var(--line); }
.pc-wwh .client-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
.pc-wwh .client-list img { max-width: 110px; max-height: 30px; object-fit: contain; object-position: left center; filter: grayscale(1) brightness(0); opacity: .75; }
.pc-wwh .client-list p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.pc-wwh .client-list p strong { font-weight: 500; color: var(--ink); }
.pc-wwh .clients-stat { margin-top: auto; padding-top: 20px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pc-wwh .clients-stat b { font-size: 34px; font-weight: 500; letter-spacing: -0.03em; color: var(--brand); line-height: 1; }
.pc-wwh .clients-stat span { font-size: 15px; color: var(--g600); }
.pc-wwh .proof-note { margin-top: 28px; font-size: 15px; line-height: 1.6; color: var(--g600); max-width: 760px; }
.pc-wwh .proof-note a { font-weight: 500; }

/* FIRST 90 DAYS: four steps in a row */
.pc-wwh .steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; counter-reset: step; }
.pc-wwh .steps::before { content: ''; position: absolute; left: 22px; right: calc((100% - 72px) / 4 - 22px); top: 21px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.pc-wwh .step { position: relative; display: flex; flex-direction: column; }
.pc-wwh .step-dot { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 18px; font-variant-numeric: tabular-nums; transition: background .2s, color .2s; }
.pc-wwh .step:hover .step-dot, .pc-wwh .step:last-child .step-dot { background: var(--brand); border-color: var(--brand); color: var(--white); }
.pc-wwh .step-when { font-size: 13px; font-weight: 500; color: var(--brand); margin-bottom: 6px; }
.pc-wwh .step-title { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 14px; }
.pc-wwh .step-box { flex: 1; padding: 20px 22px; }
.pc-wwh .step:last-child .step-box { box-shadow: 6px 6px 0 var(--brand); }
.pc-wwh .step-box p, .pc-wwh .step-box li { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.pc-wwh .step-box p + p, .pc-wwh .step-box p + ul { margin-top: 10px; }
.pc-wwh .step-box ul { list-style: none; }
.pc-wwh .step-box li { display: flex; gap: 10px; padding: 5px 0; }
.pc-wwh .step-box li::before { content: ''; width: 6px; height: 6px; background: var(--brand); flex-shrink: 0; margin-top: 9px; }

/* RELATED READING */
.pc-wwh .read-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.pc-wwh .read-card { text-decoration: none !important; color: inherit; display: flex; flex-direction: column; }
.pc-wwh .read-img { aspect-ratio: 1200 / 630; background: var(--border-faint); border-bottom: 2px solid var(--line); overflow: hidden; }
.pc-wwh .read-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.pc-wwh .read-card:hover .read-img img { transform: scale(1.04); }
.pc-wwh .read-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.pc-wwh .read-cat { font-size: 13px; font-weight: 500; color: var(--brand); margin-bottom: 8px; }
.pc-wwh .read-title { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 16px; }
.pc-wwh .read-go { margin-top: auto; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.pc-wwh .read-go svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.pc-wwh .read-card:hover .read-go { color: var(--brand); }
.pc-wwh .read-card:hover .read-go svg { transform: translateX(3px); }

/* FAQ */
.pc-wwh .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; }
.pc-wwh .faq-intro h2 { font-size: 44px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; margin-bottom: 16px; }
.pc-wwh .faq-intro p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.pc-wwh .faq { border-top: 2px solid var(--line); }
.pc-wwh .faq details { border-bottom: 1px solid var(--line); }
.pc-wwh .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; }
.pc-wwh .faq summary::-webkit-details-marker { display: none; }
.pc-wwh .faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pc-wwh .plus { width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: transform .2s, background .2s; }
.pc-wwh .plus svg { width: 14px; height: 14px; stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.pc-wwh details[open] .plus { transform: rotate(45deg); background: var(--brand); border-color: var(--brand); }
.pc-wwh details[open] .plus svg { stroke: #fff; }
.pc-wwh .answer { padding: 0 40px 24px 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.pc-wwh .answer p + p { margin-top: 10px; }
.pc-wwh .answer strong { font-weight: 500; color: var(--ink); }

/* CTA */
.pc-wwh .cta-panel { background: var(--bg-ink); border: 2px solid var(--line); border-radius: 6px; box-shadow: 8px 8px 0 var(--brand); display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 56px; }
.pc-wwh .cta-panel h2 { font-size: 38px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--on-dark); margin-bottom: 12px; }
.pc-wwh .cta-panel p { font-size: 17px; line-height: 1.55; color: var(--on-dark-2); max-width: 520px; }
.pc-wwh .cta-panel p a { color: var(--white); font-weight: 500; }
.pc-wwh .cta-panel .btn-row { flex-shrink: 0; }
.pc-wwh .cta-panel .btn-primary { background: var(--white); color: var(--ink) !important; border-color: var(--white); }
.pc-wwh .cta-panel .btn-primary:hover { background: var(--white); box-shadow: 4px 4px 0 var(--brand-fg); }
.pc-wwh .cta-panel .btn-secondary { background: transparent; color: var(--white) !important; border: 1px solid rgba(255,255,255,.4); }
.pc-wwh .cta-panel .btn-secondary:hover { background: var(--bg-ink-2); border-color: var(--white); box-shadow: none; transform: none; }

/* Hub page extras */
.pc-wwh .hub-hero { position: relative; overflow: hidden; padding: 56px 0 104px; }
.pc-wwh .hub-hero > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.pc-wwh .hub-hero > .wrap { position: relative; z-index: 1; }
.pc-wwh .hub-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px 64px; align-items: end; margin-bottom: 48px; }
.pc-wwh .hub-intro h1 { font-size: 50px; font-weight: 500; line-height: 1.07; letter-spacing: -0.035em; }
.pc-wwh .hub-intro p { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.pc-wwh .hub-intro p + p { margin-top: 12px; }
.pc-wwh .fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pc-wwh .fit-card { padding: 32px 32px 30px; }
.pc-wwh .fit-card.yes { background: var(--brand-pale); box-shadow: 8px 8px 0 var(--brand); }
.pc-wwh .fit-title { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 18px; }
.pc-wwh .fit-list { list-style: none; border-top: 1px solid var(--line); }
.pc-wwh .fit-list li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.pc-wwh .fit-list li:last-child { border-bottom: 0; }
.pc-wwh .fit-list li::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; margin-top: 10px; background: var(--brand); }
.pc-wwh .fit-list li strong { font-weight: 500; color: var(--ink); }
.pc-wwh .fit-card.later .fit-list li::before { background: var(--g500); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .pc-wwh .seg-hero-grid, .pc-wwh .faq-grid, .pc-wwh .hub-intro, .pc-wwh .fit-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pc-wwh .seg-hero h1, .pc-wwh .hub-intro h1 { font-size: 42px; }
  .pc-wwh .seg-hero-art { max-width: 640px; }
  .pc-wwh .help { grid-template-columns: 240px minmax(0, 1fr); }
  .pc-wwh .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .pc-wwh .steps::before { display: none; }
  .pc-wwh .cta-panel { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .pc-wwh .wrap { padding: 0 16px; }
  .pc-wwh .section { padding: 72px 0; }
  .pc-wwh .seg-hero, .pc-wwh .hub-hero { padding: 32px 0 64px; }
  .pc-wwh .seg-hero h1, .pc-wwh .hub-intro h1 { font-size: 34px; }
  .pc-wwh .seg-hero-lead p, .pc-wwh .hub-intro p { font-size: 17px; }
  .pc-wwh .hero-ctas .btn { width: 100%; }
  .pc-wwh .seg-hero-art { box-shadow: 5px 5px 0 var(--line); padding: 10px; }
  .pc-wwh .sec-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pc-wwh .sec-head p { justify-self: start; }
  .pc-wwh .sec-head h2, .pc-wwh .faq-intro h2 { font-size: 32px; }
  .pc-wwh .pains, .pc-wwh .proof-grid { grid-template-columns: minmax(0, 1fr); }
  .pc-wwh .pain { padding: 24px 20px; grid-template-columns: 1fr; gap: 16px; }
  .pc-wwh .pain:nth-child(2n) { border-left: 0; }
  .pc-wwh .pain + .pain { border-top: 1px solid var(--border); }
  .pc-wwh .pain-q { font-size: 19px; margin-bottom: 8px; }
  .pc-wwh .help { grid-template-columns: minmax(0, 1fr); }
  .pc-wwh .help-side { border-right: 0; padding: 24px 20px 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .pc-wwh .help-name { flex: 1 1 160px; }
  .pc-wwh .help-tag { order: 3; }
  .pc-wwh .help-main { padding: 16px 20px 24px; }
  .pc-wwh .case-body { padding: 20px 20px 0; }
  .pc-wwh .case-stats, .pc-wwh .case-go { margin-left: -20px; margin-right: -20px; }
  .pc-wwh .case-go { padding: 14px 20px; }
  .pc-wwh .clients { padding: 24px 20px; }
  .pc-wwh .client-list li { grid-template-columns: 1fr; gap: 10px; }
  .pc-wwh .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pc-wwh .faq summary { font-size: 17px; }
  .pc-wwh .answer { padding-right: 0; }
  .pc-wwh .cta-panel { padding: 34px 20px; box-shadow: 5px 5px 0 var(--brand); }
  .pc-wwh .cta-panel h2 { font-size: 28px; }
  .pc-wwh .cta-panel .btn-row, .pc-wwh .cta-panel .btn { width: 100%; }
  .pc-wwh .fit-card { padding: 26px 20px; }
  .pc-wwh .fit-card.yes { box-shadow: 5px 5px 0 var(--brand); }
}
@media (prefers-reduced-motion: reduce) {
  .pc-wwh *, .pc-wwh *::before, .pc-wwh *::after { transition: none !important; }
  .pc-wwh .lift:hover, .pc-wwh .btn:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════════════
   3. HOMEPAGE PARTS ON SEGMENT PAGES (.pc-wwh)
   Same markup and look as index.html: logo strip, pricing, tech stack.
   ═════════════════════════════════════════════════════════════ */
/* Client logo strip: one row that loops */
.pc-wwh .logo-strip { border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); background: var(--white); }
.pc-wwh .logo-strip .wrap { display: flex; align-items: center; gap: 40px; padding-top: 26px; padding-bottom: 26px; }
.pc-wwh .logo-strip-label { font-size: 13px; color: var(--g600); flex-shrink: 0; max-width: 130px; line-height: 1.4; }
.pc-wwh .logo-row { display: block; flex: 1; min-width: 0; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pc-wwh .logo-row img { height: 30px; width: auto; max-width: 140px; object-fit: contain; }
.pc-wwh .logo-track { display: flex; width: max-content; animation: wwhMarquee 32s linear infinite; }
.pc-wwh .logo-row:hover .logo-track { animation-play-state: paused; }
.pc-wwh .logo-set { display: flex; align-items: center; gap: 80px; padding-right: 80px; }
.pc-wwh .logo-set img { filter: grayscale(1) brightness(0); opacity: .55; transition: filter .25s, opacity .25s, transform .25s var(--ease); }
.pc-wwh .logo-set img:hover { filter: none; opacity: 1; transform: scale(1.06); }
@keyframes wwhMarquee { to { transform: translateX(-50%); } }

/* Pricing: tabs, contract length, three plans, team */
.pc-wwh .tabs { display: inline-flex; gap: 4px; padding: 4px; border: 2px solid var(--line); border-radius: 6px; background: var(--white); margin-bottom: 40px; flex-wrap: wrap; }
.pc-wwh .tab { appearance: none; background: transparent; border: 0; border-radius: 3px; padding: 12px 20px; font-size: 15px; font-weight: 500; color: var(--n700); cursor: pointer; transition: background .15s, color .15s; }
.pc-wwh .tab:hover:not(.on) { background: var(--brand-bg); color: var(--brand); }
.pc-wwh .tab.on { background: var(--ink); color: var(--white); }
.pc-wwh .tab .rec { font-size: 12px; color: var(--brand); margin-left: 6px; }
.pc-wwh .tab.on .rec { color: #9db8f5; }
.pc-wwh .tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pc-wwh .panel { display: none; }
.pc-wwh .panel.on { display: block; }
.pc-wwh .panel-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 28px; flex-wrap: wrap; }
.pc-wwh .panel-head h3 { font-size: 30px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.pc-wwh .panel-head p { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 420px; margin-top: 8px; }
.pc-wwh .term { display: flex; align-items: center; gap: 12px; }
.pc-wwh .term label { font-size: 14px; color: var(--g600); }
.pc-wwh .term select {
  appearance: none; -webkit-appearance: none; font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0D12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  border: 1px solid var(--line); border-radius: 4px; padding: 10px 34px 10px 12px; cursor: pointer;
}
.pc-wwh .term select:focus { outline: none; box-shadow: 0 0 0 3px var(--brand-bg); border-color: var(--brand); }
.pc-wwh .price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.pc-wwh .price-card { padding: 30px 28px; display: flex; flex-direction: column; overflow: visible; }
.pc-wwh .price-card.featured { background: var(--brand-pale); box-shadow: 8px 8px 0 var(--brand); }
.pc-wwh .tier { font-size: 13px; color: var(--g600); margin-bottom: 10px; }
.pc-wwh .name-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pc-wwh .name { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.pc-wwh .badge { font-size: 12px; font-weight: 500; color: var(--white); background: var(--brand); border-radius: 2px; padding: 4px 8px; white-space: nowrap; }
/* Stage pages: the plan that page recommends */
.pc-wwh .badge--fit { background: var(--ink); }
.pc-wwh .name-row .name { margin-right: auto; }
.pc-wwh .desc { font-size: 15px; line-height: 1.6; color: var(--ink-2); min-height: 72px; margin-bottom: 18px; }
.pc-wwh .amount { font-size: 42px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-wwh .price-note { font-size: 13px; color: var(--g500); margin: 8px 0 22px; }
.pc-wwh .price-card .btn { width: 100%; margin-bottom: 26px; }
.pc-wwh .features { list-style: none; border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.pc-wwh .features li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink); }
.pc-wwh .check { width: 18px; height: 18px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.pc-wwh .check svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 2.5; fill: none; }
.pc-wwh .tip { position: relative; border-bottom: 1px dotted var(--brand); cursor: help; }
.pc-wwh .tip-text { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 250px; background: var(--bg-ink); color: var(--on-dark-2); font-size: 12px; font-weight: 400; line-height: 1.5; padding: 10px 12px; border-radius: 4px; box-shadow: 3px 3px 0 var(--brand); z-index: 50; pointer-events: none; transition: opacity .15s, visibility .15s; }
.pc-wwh .tip:hover .tip-text, .pc-wwh .tip:focus .tip-text { visibility: visible; opacity: 1; }
.pc-wwh .team { margin-top: 24px; padding: 20px 26px; display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.pc-wwh .team-label { font-size: 14px; font-weight: 500; color: var(--brand); }
.pc-wwh .team-list { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.pc-wwh .team-item { display: flex; align-items: center; gap: 8px; font-size: 15px; }

/* Tech stack: Perceptric in the middle, two rings of tools */
.pc-wwh .stack-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.pc-wwh .stack-copy h2 { font-size: 44px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; margin-bottom: 18px; }
.pc-wwh .stack-copy p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.pc-wwh .stack-hint { font-size: 14px; color: var(--g500); margin: 18px 0 28px; }
.pc-wwh .orbit-frame { padding: clamp(28px, 5vw, 56px); overflow: visible; background-color: var(--white); background-image: linear-gradient(rgba(9,67,176,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(9,67,176,.06) 1px, transparent 1px); background-size: 32px 32px; background-position: center; }
.pc-wwh .orbit { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1; container-type: inline-size; }
.pc-wwh .orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pc-wwh .orbit-lines circle { fill: none; stroke: var(--brand); stroke-opacity: .28; stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.pc-wwh .orbit-glow { position: absolute; left: 50%; top: 50%; width: 52cqw; height: 52cqw; margin: -26cqw 0 0 -26cqw; border-radius: 50%; background: radial-gradient(circle, rgba(9,67,176,.16), rgba(9,67,176,0) 65%); animation: wwhOrbGlow 4s ease-in-out infinite; }
.pc-wwh .orbit-core { position: absolute; left: 50%; top: 50%; z-index: 2; width: 34cqw; transform: translate(-50%, -50%); padding: 4.4cqw 4cqw; background: var(--white); border: 2px solid var(--line); border-radius: 14px; box-shadow: 6px 6px 0 var(--brand); }
.pc-wwh .orbit-core img { display: block; width: 100%; height: auto; }
.pc-wwh .orbit-ring { position: absolute; inset: 0; z-index: 1; animation: wwhOrbSpin var(--dur) linear infinite; }
.pc-wwh .orbit-ring--in { --r: 26cqw; --s: min(12.5cqw, 68px); --dur: 70s; }
.pc-wwh .orbit-ring--out { --r: 44cqw; --s: min(10.5cqw, 58px); --dur: 110s; animation-name: wwhOrbSpinR; }
.pc-wwh .orbit-ring:hover, .pc-wwh .orbit-ring:focus-within { z-index: 3; }
.pc-wwh .orbit-item { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(var(--r) * -1)) rotate(calc(-360deg / var(--n) * var(--i))); }
.pc-wwh .orbit-item:hover, .pc-wwh .orbit-item:focus-within { z-index: 2; }
.pc-wwh .orbit-chip { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background: var(--white); border: 1.5px solid var(--border); border-radius: 28%; box-shadow: 0 1px 2px rgba(11,13,18,.06), 0 8px 18px -8px rgba(11,13,18,.22); cursor: pointer; outline: none; animation: wwhOrbSpinR var(--dur) linear infinite; transition: border-color .2s, box-shadow .2s; }
.pc-wwh .orbit-ring--out .orbit-chip { animation-name: wwhOrbSpin; }
.pc-wwh .orbit-chip img { width: 50%; height: 50%; object-fit: contain; transition: transform .25s var(--ease); }
.pc-wwh .orbit-chip:hover, .pc-wwh .orbit-chip:focus-visible { border-color: var(--line); box-shadow: 3px 3px 0 var(--brand); }
.pc-wwh .orbit-chip:hover img, .pc-wwh .orbit-chip:focus-visible img { transform: scale(1.12); }
.pc-wwh .orbit:hover .orbit-ring, .pc-wwh .orbit:hover .orbit-chip, .pc-wwh .orbit:focus-within .orbit-ring, .pc-wwh .orbit:focus-within .orbit-chip { animation-play-state: paused; }
.pc-wwh .orbit-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; width: 230px; transform: translateX(-50%) translateY(6px); background: var(--bg-ink); color: var(--on-dark-2); font-size: 13px; line-height: 1.5; text-align: left; padding: 12px 14px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.pc-wwh .orbit-tip strong { display: block; font-size: 14px; font-weight: 500; color: var(--on-dark); margin-bottom: 4px; }
.pc-wwh .orbit-chip:hover .orbit-tip, .pc-wwh .orbit-chip:focus-visible .orbit-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
@keyframes wwhOrbSpin { to { transform: rotate(360deg); } }
@keyframes wwhOrbSpinR { to { transform: rotate(-360deg); } }
@keyframes wwhOrbGlow { 50% { transform: scale(1.12); opacity: .7; } }

@media (max-width: 1024px) {
  .pc-wwh .logo-strip .wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pc-wwh .logo-strip-label { max-width: none; }
  .pc-wwh .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-wwh .stack-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 720px) {
  .pc-wwh .logo-row img { height: 22px; }
  .pc-wwh .logo-set { gap: 48px; padding-right: 48px; }
  .pc-wwh .tab { padding: 10px 14px; font-size: 13px; }
  .pc-wwh .price-grid { grid-template-columns: minmax(0, 1fr); }
  .pc-wwh .desc { min-height: 0; }
  .pc-wwh .price-card.featured { box-shadow: 5px 5px 0 var(--brand); }
  .pc-wwh .stack-copy h2 { font-size: 32px; }
  .pc-wwh .orbit-tip, .pc-wwh .tip-text { display: none; }
  .pc-wwh .orbit-frame { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-wwh .logo-track { animation: none; }
  .pc-wwh .logo-row { -webkit-mask-image: none; mask-image: none; }
  .pc-wwh .logo-set[aria-hidden] { display: none; }
  .pc-wwh .logo-set { flex-wrap: wrap; gap: 40px; padding-right: 0; }
  .pc-wwh .orbit-ring, .pc-wwh .orbit-chip, .pc-wwh .orbit-glow { animation: none; }
}

/* Never let the rotating orbit or tooltips widen the page */
.pc-wwh { overflow-x: clip; }