/* CallFlow SEO v2 design system
   1 tokens  2 base  3 layout  4 buttons/badges  5 header/nav  6 hero  7 sections
   8 visuals (map mock, grids, chart, phone, chat)  9 carousels/cards  10 tabs/reviews/logos
   11 timeline/pricing/faq  12 forms  13 blog  14 inner pages  15 footer  16 motion/utilities */

/* 1 ---------------------------------------------------------------- tokens */
:root {
  --blue: #1F5BFF;          /* white text 5.25:1 */
  --blue-600: #1A4FE6;
  --blue-700: #1238C9;      /* white text 8.0:1 */
  --blue-300: #8FB3FF;
  --blue-100: #DCE6FF;
  --blue-50: #EEF3FF;
  --navy: #0B1530;
  --navy-2: #16224A;
  --navy-3: #22305E;
  --ink: #0B1530;
  --ink-2: #33415C;
  --muted: #56627A;
  --line: #E2E8F0;
  --line-2: #CBD5E1;
  --soft: #F4F6FA;
  --tint: #EEF3FF;
  --amber: #FFB020;
  --amber-ink: #8A5300;
  --green: #15803D;
  --green-50: #E8F7EE;
  --orange: #F97316;
  --red: #DC2626;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --sh-1: 0 1px 2px rgba(11, 21, 48, .06), 0 4px 14px rgba(11, 21, 48, .06);
  --sh-2: 0 12px 32px -10px rgba(11, 21, 48, .22), 0 2px 6px rgba(11, 21, 48, .05);
  --sh-3: 0 40px 80px -24px rgba(11, 21, 48, .38), 0 6px 18px rgba(11, 21, 48, .08);
  --sh-blue: 0 14px 30px -10px rgba(31, 91, 255, .55);
  --grad-blue: linear-gradient(135deg, #2F6BFF 0%, #1F5BFF 40%, #1238C9 100%);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(20px, 4vw, 32px);
  --sec: clamp(64px, 8vw, 112px);
}

/* 2 ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); background: #fff; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--blue-700); text-underline-offset: 3px; }
a:hover { color: var(--blue); }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); letter-spacing: -.035em; line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.85rem); letter-spacing: -.03em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.section--navy :focus-visible, .section--blue :focus-visible, .section--formband .fb-head :focus-visible, .site-footer :focus-visible, .trust-chips :focus-visible { outline-color: var(--amber); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip-link:focus { top: 12px; color: #fff; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
[hidden] { display: none !important; }

/* 3 ---------------------------------------------------------------- layout */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }
.container--narrow { max-width: 820px; }
.container--post { max-width: 1160px; }
.container--form { max-width: 1080px; }
.section { padding: var(--sec) 0; position: relative; }
.section--tight { padding: 48px 0; }
.section > .container { position: relative; z-index: 1; }
.section--tint, .section--cool { background: var(--tint); }
.section--soft, .section--alt { background: var(--soft); }
.section--dots { background: #fff radial-gradient(#D3DCEB 1.3px, transparent 1.5px) 0 0 / 22px 22px; }
.section--navy { background: var(--navy); color: #C9D3E8; overflow: hidden; }
.section--angled { clip-path: polygon(0 0, 100% 3vw, 100% 100%, 0 calc(100% - 3vw)); padding: calc(var(--sec) + 3vw) 0; }
.navy-glow { position: absolute; inset: 0; background: radial-gradient(600px 380px at 85% 10%, rgba(31, 91, 255, .45), transparent 70%), radial-gradient(500px 300px at 5% 95%, rgba(255, 176, 32, .12), transparent 70%); pointer-events: none; }
.section--blue { background: var(--grad-blue); color: #E4ECFF; overflow: hidden; }
.section--blue::after { content: ""; position: absolute; inset: 0; background: radial-gradient(#fff 1.2px, transparent 1.4px) 0 0 / 26px 26px; opacity: .1; pointer-events: none; }
.section--curve { margin-top: 0; }
.section--curve::before { content: ""; position: absolute; left: 0; right: 0; top: -46px; height: 92px; background: inherit; border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: 0; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head > p:last-child { margin-bottom: 0; }
.section-head p { font-size: 1.125rem; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--split { max-width: none; display: grid; gap: 16px 64px; grid-template-columns: 1fr; align-items: end; }
.section-head--split h2 { margin-bottom: 0; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1.1fr 1fr; } }
.section-head--light h2 { color: #fff; }
.section-head--light p { color: #C9D3E8; }
.section--blue .section-head--light p { color: #E4ECFF; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-700); margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--amber); }
.eyebrow--light { color: #fff; }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-2); }
.split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: 72px; } }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 24px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* 4 ---------------------------------------------------------------- buttons, badges, chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font: inherit; font-weight: 750; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; text-align: center; }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--sh-blue); }
.btn--primary:hover { background: var(--blue-700); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue-700); }
.btn--white { background: #fff; color: var(--blue-700); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .35); }
.btn--white:hover { color: var(--navy); transform: translateY(-1px); }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 1.0625rem; }
.btn--sm { min-height: 42px; padding: 8px 18px; font-size: .9375rem; box-shadow: none; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.text-link { font-weight: 750; color: var(--blue-700); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.text-link:hover { text-decoration: underline; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; vertical-align: middle; }
.badge--core { background: var(--blue); color: #fff; }
.badge--incl { background: var(--blue-50); color: var(--blue-700); }
.badge--addon { background: #FFF1D6; color: var(--amber-ink); }
.badge--free, .badge--soon { background: var(--green-50); color: var(--green); }
.badge--sample, .badge--illus { background: #FFF1D6; color: var(--amber-ink); }
.badge--pilot { background: var(--navy); color: #fff; }
.badge--draft { background: #FDE8E8; color: #9B1C1C; }
.chip { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--blue-50); color: var(--blue-700); font-size: .8125rem; font-weight: 750; }
.chip--glass { background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px); }
.illus-tag { position: absolute; right: 14px; bottom: 14px; z-index: 3; background: rgba(255, 255, 255, .95); color: var(--ink-2); font-size: .75rem; font-weight: 750; padding: 5px 10px; border-radius: 999px; box-shadow: var(--sh-1); }
.illus-tag--inline { position: static; display: inline-block; box-shadow: none; border: 1px solid var(--line); }
.illus-tag--dark { background: rgba(255, 255, 255, .1); color: #E4ECFF; border-color: rgba(255, 255, 255, .25); }
.illus-banner { display: inline-flex; gap: 8px; align-items: center; font-size: .875rem; font-weight: 750; color: var(--amber-ink); background: #FFF1D6; border-radius: 999px; padding: 6px 14px; margin: 0; }
.illus-banner svg { width: 18px; height: 18px; }
.pill-pct { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 800; font-size: .875rem; }
.i3d { width: 100%; height: 100%; display: block; overflow: visible; }

/* 5 ---------------------------------------------------------------- header + nav */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid rgba(11, 21, 48, .07); }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: flex; flex: none; }
.brand svg { width: 172px; height: auto; }
.primary-nav { display: none; margin-left: auto; }
.header-cta { display: none; }
.nav-list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav-item { position: relative; }
.nav-trigger, .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; background: none; font: inherit; font-size: .96875rem; font-weight: 650; color: var(--ink); text-decoration: none; border-radius: 10px; cursor: pointer; }
.nav-trigger:hover, .nav-link:hover, .nav-item.is-open .nav-trigger { background: var(--blue-50); color: var(--blue-700); }
.nav-link[aria-current="page"], .nav-trigger.is-current { color: var(--blue-700); box-shadow: inset 0 -2px 0 var(--blue); border-radius: 10px 10px 0 0; }
.chev { width: 12px; height: 12px; transition: transform .2s; }
.nav-item.is-open .chev { transform: rotate(180deg); }
.mega, .dropdown { position: absolute; top: calc(100% + 10px); left: 0; background: #fff; border-radius: 20px; box-shadow: var(--sh-3); border: 1px solid var(--line); padding: 14px; }
.mega { width: 760px; left: -40px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.dropdown { width: 340px; }
.mega ul, .dropdown ul { list-style: none; margin: 0; padding: 0; }
.mega-cols { display: grid; gap: 6px; padding: 6px; }
.mega-label { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 8px 10px 6px; }
.mega-link { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.mega-link:hover, .mega-link[aria-current="page"] { background: var(--blue-50); }
.mega-ic { width: 48px; height: 48px; flex: none; background: var(--soft); border-radius: 14px; padding: 6px; }
.mega-title { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 750; }
.mega-desc { display: block; font-size: .875rem; color: var(--muted); margin-top: 2px; }
.mega-promo { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 16px; background: var(--grad-blue); color: #fff; text-decoration: none; overflow: hidden; }
.mega-promo:hover { color: #fff; }
.mega-promo-art { width: 104px; height: 104px; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .45); transform: rotate(-4deg); margin-bottom: 12px; border: 3px solid #fff; }
.mega-promo-art svg { width: 100%; height: 100%; display: block; }
.mega-promo-k { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.mega-promo-t { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.mega-promo-d { font-size: .875rem; color: #E4ECFF; }
.mega-promo-cta { margin-top: auto; padding-top: 12px; font-weight: 800; }
.menu-toggle { margin-left: auto; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; color: var(--ink); cursor: pointer; }
.menu-toggle svg { width: 24px; height: 24px; }
.menu-toggle .i-close, .menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }
.mobile-nav { border-top: 1px solid var(--line); background: #fff; padding: 12px var(--pad) 24px; max-height: calc(100vh - 72px); overflow-y: auto; }
.m-group { border-bottom: 1px solid var(--line); }
.m-group summary { padding: 14px 4px; font-weight: 750; color: var(--ink); cursor: pointer; }
.m-group ul { list-style: none; margin: 0 0 10px; padding: 0; }
.m-sub { margin: 6px 4px 2px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.m-link, .m-top { display: flex; gap: 8px; align-items: center; padding: 12px 8px; color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 10px; }
.m-top { border-bottom: 1px solid var(--line); border-radius: 0; font-weight: 750; padding: 14px 4px; }
.m-link[aria-current="page"], .m-top[aria-current="page"] { color: var(--blue-700); }
.mobile-nav .btn { margin-top: 18px; }
@media (min-width: 1080px) {
  .primary-nav, .header-cta { display: flex; }
  .menu-toggle, .mobile-nav { display: none !important; }
}

/* 6 ---------------------------------------------------------------- hero */
.hero { position: relative; padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 112px); overflow: hidden; }
.hero--home { background: radial-gradient(900px 560px at 78% 30%, rgba(31, 91, 255, .16), transparent 70%), radial-gradient(500px 400px at 0% 0%, rgba(255, 176, 32, .08), transparent 70%), #fff; }
.hero-pattern { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23C7D6FF' stroke-width='1.2'%3E%3Cpath d='M0 70h420M0 190h420M0 300h420M60 0v420M180 0v420M310 0v420'/%3E%3Cpath d='M0 380L420 40' stroke-width='3' stroke='%23DCE6FF'/%3E%3Cpath d='M-20 250c80-40 160 40 240 0s160-60 240-20' stroke='%23DCE6FF' stroke-width='8'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); }
.hero-grid { position: relative; display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.02fr 1fr; gap: 64px; } }
.hero-tag { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--blue-100); box-shadow: var(--sh-1); font-size: .9375rem; font-weight: 650; color: var(--ink); margin-bottom: 24px; }
.hero-tag .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--grad-blue); color: #fff; display: grid; place-items: center; }
.hero-tag .dot svg { width: 16px; height: 16px; }
.hl { background: linear-gradient(100deg, #1F5BFF, #1238C9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none; padding: 0; margin: 28px 0 0; font-weight: 650; color: var(--ink); font-size: .9375rem; }
.trust-row li { display: flex; gap: 8px; align-items: center; }
.trust-row svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--green-50); color: var(--green); }
.hero-visual { position: relative; padding: 0 0 24px; }
.float-chip { position: absolute; z-index: 4; display: flex; gap: 10px; align-items: center; background: rgba(255, 255, 255, .96); border-radius: 18px; box-shadow: var(--sh-3); padding: 12px 16px; font-size: .875rem; color: var(--ink-2); border: 1px solid rgba(255, 255, 255, .8); }
.float-chip b { display: block; color: var(--ink); }
.float-chip--ai { left: -28px; bottom: -22px; max-width: 290px; }
.fc-ic { width: 46px; height: 46px; flex: none; }
.float-chip--rank { right: -20px; top: 90px; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--navy); color: #C9D3E8; border-color: var(--navy-3); }
.fc-k { font-size: .75rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.fc-v { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.fc-v b { display: inline; color: #4ADE80; }
.fc-v i { font-style: normal; color: var(--blue-300); }
.fc-s { font-size: .75rem; color: var(--amber); font-weight: 750; }
@media (max-width: 1100px) { .float-chip--ai { left: 8px; } .float-chip--rank { right: 8px; } }
@media (max-width: 560px) { .float-chip--ai { position: relative; left: auto; bottom: auto; margin: -28px 12px 0; max-width: none; } .float-chip--rank { top: 76px; right: 6px; padding: 10px 12px; } .fc-v { font-size: 1.2rem; } }
.hero--inner { padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 6vw, 88px); background: radial-gradient(800px 420px at 85% 20%, rgba(31, 91, 255, .14), transparent 70%), linear-gradient(#F7F9FF, #fff); }
.hero--inner h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
.hero--inner .hero-grid { gap: 48px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hero-art { width: 120px; height: 120px; margin-bottom: 12px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 24px; font-size: .875rem; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 650; }

/* 7 ---------------------------------------------------------------- generic cards / lists */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); box-shadow: var(--sh-1); }
.card h3 { margin-bottom: .4em; }
.card-ic3d { display: block; width: 72px; height: 72px; margin: -4px 0 14px -6px; }
.card--lift { transition: transform .2s ease, box-shadow .2s ease; }
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.ticks, .crosses, .check-list { list-style: none; padding: 0; margin: 0; }
.ticks li, .crosses li { position: relative; padding-left: 32px; margin-bottom: 12px; }
.ticks li::before, .crosses li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--green-50) no-repeat center / 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2315803D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.crosses li::before { background-color: #FDE8E8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23B91C1C' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ticks--light li { color: #E4ECFF; }
.ticks--light li::before { background-color: rgba(255, 255, 255, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23FFB020' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.check-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.check-list svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 8px; background: var(--blue); color: #fff; margin-top: 1px; }
.check-list b { color: var(--ink); }
.fine { font-size: .9375rem; color: var(--muted); border-left: 3px solid var(--amber); padding-left: 14px; }
.small { font-size: .9375rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 20px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 56px; }
.h3 { font-size: 1.25rem; } .h4 { font-size: 1.0625rem; }
.callout { background: var(--tint); border: 1px solid var(--blue-100); border-radius: var(--r); padding: 22px 24px; }
.callout--warn { background: #FFF7E6; border-color: #FBD38D; }
.kw-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.kw-list li { padding: 7px 14px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: .9375rem; color: var(--ink); font-weight: 600; }
.kw-list--hot li { background: #FFF1F0; border-color: #FBD5D2; }
.kw-list--center { justify-content: center; }
.kw-list a { text-decoration: none; }

/* 8 ---------------------------------------------------------------- map mock */
.mapmock { position: relative; margin: 0; border-radius: 28px; overflow: hidden; background: #EEF1F6; box-shadow: var(--sh-3); border: 6px solid #fff; }
.mm-map { position: absolute; inset: 0; }
.mm-svg { width: 100%; height: 100%; display: block; }
.map-label { font-size: 12px; font-weight: 700; fill: #6B7894; letter-spacing: .02em; paint-order: stroke; stroke: #EEF1F6; stroke-width: 3px; }
.map-label--park { fill: #3E7B48; }
.mm-pulse { transform-origin: center; transform-box: fill-box; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.mm-panel { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.mm-search { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 12px 18px; box-shadow: var(--sh-2); font-weight: 650; color: var(--ink); font-size: .9375rem; }
.mm-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.mm-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-filters span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .8125rem; font-weight: 650; color: var(--ink-2); }
.mm-card { position: relative; display: flex; gap: 12px; background: #fff; border-radius: 16px; padding: 14px; box-shadow: var(--sh-1); border: 1px solid var(--line); }
.mm-card.is-top { border: 2px solid var(--blue); box-shadow: 0 18px 40px -16px rgba(31, 91, 255, .55); padding-top: 18px; }
.mm-chip { position: absolute; top: -12px; right: 14px; background: var(--green); color: #fff; font-size: .75rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; box-shadow: 0 6px 14px -6px rgba(21, 128, 61, .7); }
.mm-rank { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--muted); font-weight: 800; font-size: .875rem; }
.is-top .mm-rank { background: var(--blue); color: #fff; }
.mm-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.mm-name { font-weight: 800; color: var(--ink); font-size: 1.0625rem; line-height: 1.2; }
.mm-meta { display: flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--ink); }
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 14px; height: 14px; fill: var(--amber); }
.stars--grey svg { fill: #CBD5E1; }
.mm-sub { font-size: .8125rem; color: var(--muted); }
.mm-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.mm-btn { border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 12px; font-size: .8125rem; font-weight: 750; color: var(--blue-700); }
.mm-btn--solid { background: var(--blue); border-color: var(--blue); color: #fff; }
.sk { display: block; height: 10px; border-radius: 6px; background: #E2E8F0; }
.sk--thin { height: 7px; background: #EDF1F6; }
.sk--40 { width: 40%; } .sk--45 { width: 45%; } .sk--50 { width: 50%; } .sk--55 { width: 55%; } .sk--60 { width: 60%; } .sk--70 { width: 70%; } .sk--80 { width: 80%; }
.mapmock--hero { height: 600px; }
.mapmock--hero .mm-panel { position: absolute; inset: 16px; justify-content: space-between; }
.mapmock--hero .mm-filters { display: none; }
.mapmock--hero .mm-panel > .mm-card ~ .mm-card { padding: 10px 14px; }
.mapmock--hero .mm-search { margin-bottom: auto; }
.mapmock--hero .illus-tag { top: 78px; bottom: auto; left: 16px; right: auto; }
.mapmock--large { height: clamp(540px, 50vw, 640px); }
.mapmock--large .mm-panel { position: absolute; top: 20px; left: 20px; bottom: 20px; width: min(400px, 42%); background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); border-radius: 20px; padding: 18px; box-shadow: var(--sh-2); justify-content: flex-start; }
.mapmock--large .mm-card.is-top { margin-top: 10px; }
@media (max-width: 760px) {
  .mapmock--large { height: auto; }
  .mapmock--large .mm-map { position: relative; height: 240px; }
  .mapmock--large .mm-panel { position: relative; inset: auto; width: auto; margin: -36px 10px 10px; }
  .mapmock--large .illus-tag { top: 12px; bottom: auto; }
  .mapmock--hero { height: 560px; }
  .mm-you-label { display: none; }
}
.factor-row { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 20px; }
@media (min-width: 860px) { .factor-row { grid-template-columns: repeat(3, 1fr); } }
.factor { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: 20px; padding: 20px; box-shadow: var(--sh-1); border: 1px solid var(--blue-100); }
.factor h3 { margin-bottom: 4px; font-size: 1.125rem; }
.factor p { margin: 0; font-size: .9375rem; }
.factor-ic { width: 76px; height: 76px; flex: none; background: var(--tint); border-radius: 18px; padding: 6px; }

/* map grids */
.gcards { display: grid; gap: 24px; }
.gcard { display: grid; gap: 24px; background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(18px, 2.4vw, 28px); box-shadow: var(--sh-2); }
@media (min-width: 1000px) { .gcard { grid-template-columns: 300px 1fr; align-items: center; } }
.gcard-ic { display: block; width: 64px; height: 64px; margin-bottom: 8px; }
.gcard-co { font-size: 1.375rem; margin-bottom: 4px; }
.gcard-meta { color: var(--muted); font-size: .9375rem; margin-bottom: 18px; }
.gcard-metric { background: var(--soft); border-radius: 18px; padding: 16px 18px; margin-bottom: 14px; }
.gm-label { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.gm-val { display: flex; align-items: baseline; gap: 10px; font-size: 2.25rem; font-weight: 850; letter-spacing: -.03em; margin: 0 0 10px; line-height: 1; }
.gm-b { color: var(--red); } .gm-a { color: var(--green); } .gm-arrow { color: var(--line-2); font-size: 1.6rem; }
.gcard-sub { list-style: none; padding: 0; margin: 0; font-size: .9375rem; }
.gcard-sub li { padding: 6px 0; border-top: 1px dashed var(--line); }
.gcard-sub b { color: var(--ink); }
.gcard-maps { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .gcard-maps { grid-template-columns: 1fr 1fr; } }
.gcard-maps figure { margin: 0; }
.grid-svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; list-style: none; padding: 0; margin: 28px 0 0; font-size: .9375rem; font-weight: 600; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend svg { width: 16px; height: 21px; }
.lg-biz { width: 18px; height: 18px; border-radius: 50%; border: 2px dashed var(--navy); background: #fff; }
.legend--dark { color: #C9D3E8; }
.prog { margin-top: 40px; background: var(--navy); color: #C9D3E8; border-radius: 28px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--sh-2); }
.prog-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 20px; }
.prog-title { color: #fff; font-weight: 800; font-size: 1.125rem; margin: 0; }
.prog-head .illus-tag { background: rgba(255, 255, 255, .1); color: #E4ECFF; border-color: rgba(255, 255, 255, .2); }
.prog-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 860px) { .prog-list { grid-template-columns: repeat(4, 1fr); } }
.prog-step { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 14px; display: grid; grid-template-columns: 64px 1fr; gap: 4px 14px; align-items: center; }
.prog-thumb { grid-row: span 3; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; }
.mini-grid { display: block; width: 100%; height: 100%; }
.prog-label { margin: 0; font-weight: 800; color: #fff; }
.prog-agr { margin: 0; font-size: .9375rem; } .prog-agr b { color: #4ADE80; font-size: 1.125rem; }
.prog-top3 { margin: 0; font-size: .8125rem; color: #A9B6D3; }
.prog-bar { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 8px; }
.prog-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #F97316, #4ADE80); }
.prog-bar .w30 { width: 30%; } .prog-bar .w35 { width: 35%; } .prog-bar .w40 { width: 40%; } .prog-bar .w45 { width: 45%; } .prog-bar .w50 { width: 50%; } .prog-bar .w55 { width: 55%; } .prog-bar .w60 { width: 60%; } .prog-bar .w65 { width: 65%; } .prog-bar .w70 { width: 70%; } .prog-bar .w75 { width: 75%; } .prog-bar .w80 { width: 80%; } .prog-bar .w85 { width: 85%; } .prog-bar .w90 { width: 90%; } .prog-bar .w95 { width: 95%; } .prog-bar .w100 { width: 100%; }
.prog-note { margin: 18px 0 0; font-size: .9375rem; }
.grid-figure { margin: 0; }
.grid-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.stat-chip { display: inline-flex; flex-direction: column; padding: 8px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.stat-chip b { color: var(--ink); font-size: 1.125rem; }

/* chart */
.chart-wrap { display: grid; gap: 24px; }
@media (min-width: 1000px) { .chart-wrap { grid-template-columns: 1.7fr 1fr; align-items: stretch; } }
.chart-card { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 28px; padding: clamp(18px, 2.4vw, 28px); backdrop-filter: blur(8px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.chart-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.chart-title { color: #fff; font-weight: 800; margin: 0; font-size: 1.125rem; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ch-grid { stroke: rgba(255, 255, 255, .1); }
.ch-ax { fill: #A9B6D3; font-size: 12px; }
.ch-line { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.ch-line--red { stroke: #F87171; } .ch-line--green { stroke: #4ADE80; }
.ch-div { stroke: #FFB020; stroke-width: 1.5; stroke-dasharray: 5 5; }
.ch-pill { fill: #FFB020; } .ch-pill-t { fill: #0B1530; font-size: 12px; font-weight: 800; }
.ch-tag { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ch-tag--red { fill: #FCA5A5; } .ch-tag--green { fill: #86EFAC; }
.ch-dot { stroke: #0B1530; stroke-width: 2; } .ch-dot--red { fill: #F87171; } .ch-dot--green { fill: #4ADE80; }
.ch-end { fill: #4ADE80; } .ch-end-t { fill: #0B1530; font-size: 13px; font-weight: 800; }
@media (max-width: 640px) { .ch-ax { font-size: 24px; } .ch-ax--odd { display: none; } .ch-tag { font-size: 22px; } }
.metrics { display: grid; gap: 14px; }
.metric { position: relative; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; padding: 18px 20px; backdrop-filter: blur(8px); overflow: hidden; }
.metric-name { margin: 0 0 4px; color: #fff; font-weight: 750; }
.metric-val { display: flex; align-items: baseline; gap: 10px; margin: 0; font-weight: 850; letter-spacing: -.02em; }
.mv-before { color: #FCA5A5; font-size: 1.25rem; } .mv-after { color: #4ADE80; font-size: 2rem; } .mv-arrow { color: #A9B6D3; }
.metric-unit { margin: 0; font-size: .8125rem; color: #A9B6D3; }
.spark { position: absolute; right: 16px; bottom: 16px; width: 110px; height: 34px; }
.sp-red, .sp-green { fill: none; stroke-width: 2.5; stroke-linecap: round; } .sp-red { stroke: #F87171; } .sp-green { stroke: #4ADE80; } .sp-dot { fill: #4ADE80; }
@media (max-width: 420px) { .spark { position: static; display: block; margin-top: 8px; } }

/* phone mock */
.phone-mock { position: relative; max-width: 380px; margin: 0 auto; padding: 20px 0 30px; }
.pm-frame { position: relative; background: var(--navy); border-radius: 46px; padding: 14px; box-shadow: var(--sh-3); }
.pm-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; background: var(--navy); border-radius: 14px; z-index: 2; }
.pm-head { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 32px 32px 0 0; padding: 48px 18px 14px; border-bottom: 1px solid var(--line); }
.pm-head b { display: block; color: var(--ink); font-size: .9375rem; } .pm-head small { color: var(--muted); font-size: .75rem; }
.pm-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--grad-blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8125rem; }
.pm-thread { background: #F7F9FC; border-radius: 0 0 32px 32px; padding: 16px 14px 22px; display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
.pm-missed { align-self: center; background: #FDE8E8; color: #9B1C1C; font-weight: 750; font-size: .8125rem; padding: 6px 12px; border-radius: 999px; margin: 0; display: flex; gap: 6px; align-items: center; }
.pm-x { width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: .625rem; }
.pm-auto { align-self: flex-end; font-size: .75rem; color: var(--muted); margin: 6px 4px 0; }
.bub { margin: 0; padding: 10px 14px; border-radius: 18px; max-width: 84%; line-height: 1.4; }
.bub--out { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.bub--in { align-self: flex-start; background: #fff; color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.pm-typing { align-self: flex-start; display: flex; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 0; }
.pm-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.chip-float { position: absolute; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: var(--sh-2); font-size: .875rem; font-weight: 650; color: var(--ink); }
.chip-float--tl { left: -40px; top: 120px; } .chip-float--tl b { color: var(--blue-700); }
.chip-float--br { right: -36px; bottom: 120px; background: var(--green); color: #fff; }
.phone-mock .illus-tag { bottom: 0; right: 50%; transform: translateX(50%); white-space: nowrap; }
@media (max-width: 520px) { .chip-float--tl { left: -6px; } .chip-float--br { right: -6px; } }

/* AI chat mock */
.ai-visual { position: relative; }
.ai-chat { position: relative; background: #fff; border-radius: 26px; box-shadow: var(--sh-3); border: 1px solid var(--line); padding: 18px 20px 52px; max-width: 520px; margin: 0 auto; }
.ai-top { display: flex; gap: 6px; align-items: center; margin-bottom: 16px; font-size: .8125rem; font-weight: 750; color: var(--muted); }
.ai-top i { width: 10px; height: 10px; border-radius: 50%; background: #FCA5A5; } .ai-top i:nth-child(2) { background: #FCD34D; } .ai-top i:nth-child(3) { background: #86EFAC; }
.ai-top span { margin-left: 8px; }
.ai-q { margin: 0 0 14px auto; max-width: 82%; background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 18px 18px 6px 18px; font-weight: 650; }
.ai-a { background: var(--soft); border-radius: 18px; padding: 16px; }
.ai-a-head { display: flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.ai-spark { width: 24px; height: 24px; border-radius: 8px; background: var(--grad-blue); color: #fff; display: grid; place-items: center; font-size: .8rem; }
.ai-lead { margin: 0 0 10px; color: var(--ink); }
.ai-pick { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ai-pick.is-you { border: 2px solid var(--blue); box-shadow: 0 12px 24px -14px rgba(31, 91, 255, .7); }
.ai-pick b { color: var(--ink); } .ai-pick span { font-size: .9375rem; }
.ai-orb { position: absolute; width: 112px; height: 112px; right: -10px; top: -40px; filter: drop-shadow(0 18px 24px rgba(31, 91, 255, .3)); }
@media (max-width: 640px) { .ai-orb { width: 76px; height: 76px; right: 0; top: -36px; } }

/* 9 ---------------------------------------------------------------- carousels */
.carousel { position: relative; }
.car-track { list-style: none; margin: 0; padding: 8px 4px 28px; display: grid; grid-auto-flow: column; gap: 24px; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; overscroll-behavior-x: contain; }
.car-track:focus-visible { outline-offset: 0; }
.car-slide { scroll-snap-align: start; display: flex; min-width: 0; }
.car-slide > * { flex: 1; min-width: 0; }
@media (min-width: 640px) { .car-track { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (min-width: 1000px) { .car-track { grid-auto-columns: calc((100% - 48px) / 3); } }
.js-car .car-track { scrollbar-width: none; } .js-car .car-track::-webkit-scrollbar { display: none; }
.car-ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; }
.car-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--sh-1); transition: background .15s, color .15s; }
.car-btn:hover:not(:disabled) { background: var(--blue); color: #fff; border-color: var(--blue); }
.car-btn:disabled { opacity: .4; cursor: default; }
.car-btn svg { width: 20px; height: 20px; }
.car-dots { display: flex; gap: 4px; }
.car-dot { width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.car-dot::before { content: ""; width: 9px; height: 9px; border-radius: 9px; background: var(--line-2); transition: width .2s, background .2s; }
.car-dot[aria-current="true"]::before { width: 26px; background: var(--blue); }
.car-dot { width: auto; min-width: 24px; }

/* service cards */
.svc-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 26px; padding: 28px; text-decoration: none; color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; }
.svc-card::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--blue-50), transparent 70%); }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); color: var(--ink-2); }
.svc-art { position: relative; width: 112px; height: 112px; margin: -6px 0 6px -8px; }
.svc-top { position: absolute; top: 24px; right: 24px; }
.svc-title { font-size: 1.375rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; }
.svc-desc { flex: 1; }
.svc-card .text-link { margin-top: 8px; }
.svc-card--audit { background: var(--grad-blue); color: #E4ECFF; border-color: transparent; }
.svc-card--audit::before { background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 70%); }
.svc-card--audit .svc-title, .svc-card--audit .text-link { color: #fff; }
.svc-card--audit:hover { color: #E4ECFF; }

/* blog overlay cards */
.post-ov { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 380px; padding: 24px; border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff; box-shadow: var(--sh-2); isolation: isolate; }
.post-ov .cover { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; transition: transform .4s ease; }
.post-ov:hover .cover { transform: scale(1.05); }
.post-ov-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 21, 48, .05) 0%, rgba(11, 21, 48, .55) 45%, rgba(11, 21, 48, .94) 100%); }
.post-ov .chip { position: absolute; top: 20px; left: 20px; }
.post-ov-title { font-size: 1.375rem; font-weight: 800; line-height: 1.22; letter-spacing: -.02em; }
.post-ov-meta { font-size: .875rem; font-weight: 700; color: #DCE6FF; }
.post-ov:hover, .post-ov:focus-visible { color: #fff; }

/* 10 --------------------------------------------------------------- case study tabs */
.cs-tabs { display: grid; gap: 20px; }
@media (min-width: 1000px) { .cs-tabs { grid-template-columns: 300px 1fr; gap: 0; background: #fff; border-radius: 30px; box-shadow: var(--sh-3); overflow: hidden; } }
.tab-rail { display: flex; gap: 8px; overflow-x: auto; padding: 4px; }
@media (min-width: 1000px) { .tab-rail { flex-direction: column; background: var(--navy); padding: 28px 18px; gap: 10px; overflow: visible; } }
.tab { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font: inherit; font-weight: 750; color: var(--ink); cursor: pointer; white-space: nowrap; text-align: left; }
.tab-ic { width: 36px; height: 36px; flex: none; }
.tab-txt small { display: none; font-weight: 500; font-size: .8125rem; }
.tab[aria-selected="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
@media (min-width: 1000px) {
  .tab { border-radius: 18px; border-color: transparent; background: transparent; color: #C9D3E8; padding: 14px; font-size: 1.125rem; white-space: normal; }
  .tab:hover { background: rgba(255, 255, 255, .06); }
  .tab-ic { width: 52px; height: 52px; background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 4px; }
  .tab-txt small { display: block; color: #A9B6D3; }
  .tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); }
  .tab[aria-selected="true"] small { color: var(--muted); }
}
.rail-note { display: none; font-size: .8125rem; color: #A9B6D3; margin: auto 0 0; padding: 18px 8px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
@media (min-width: 1000px) { .rail-note { display: block; } }
.tabpanel { padding: clamp(20px, 3vw, 40px); background: #fff; border-radius: 26px; box-shadow: var(--sh-2); }
@media (min-width: 1000px) { .tabpanel { box-shadow: none; border-radius: 0; } }
.tabpanel:focus-visible { outline-offset: -4px; }
.cs-co { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 850; color: var(--ink); letter-spacing: -.02em; margin: 12px 0 2px; }
.cs-meta { color: var(--muted); margin-bottom: 22px; }
.cs-stats { display: grid; gap: 14px; margin-bottom: 22px; }
@media (min-width: 640px) { .cs-stats { grid-template-columns: repeat(3, 1fr); } }
.cs-stat { background: var(--tint); border-radius: 20px; padding: 18px; border: 1px solid var(--blue-100); }
.cs-num { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 850; color: var(--blue-700); letter-spacing: -.03em; margin: 0 0 4px; line-height: 1.1; }
.cs-stat p:last-child { margin: 0; font-size: .9375rem; }
.cs-grids { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-bottom: 20px; }
.cs-grids figure { margin: 0; width: 132px; }
.cs-grids figcaption { font-size: .8125rem; font-weight: 750; color: var(--muted); margin-bottom: 6px; }
.cs-grids .mini-grid { border-radius: 14px; box-shadow: var(--sh-1); height: auto; }
.cs-arrow { color: var(--blue); } .cs-arrow svg { width: 28px; height: 28px; }
.cs-grid-note { flex: 1 1 200px; margin: 0; font-size: .9375rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cs-strip { display: flex; gap: 10px; align-items: center; background: #FFF7E6; border: 1px solid #FBD38D; color: var(--amber-ink); border-radius: 14px; padding: 10px 14px; font-size: .9375rem; margin: 0; }
.cs-strip svg { width: 20px; height: 20px; flex: none; }
.cs-strip b { color: #6B4000; }
.tabpanel .btn-row { margin-top: 22px; }

/* logos */
.logo-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .logo-grid { grid-template-columns: repeat(5, 1fr); } }
.logo-tile { aspect-ratio: 16 / 10; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-1); padding: 18px; transition: box-shadow .2s, transform .2s; }
.logo-tile:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.logo-tile img { max-height: 56px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s; }
.logo-tile:hover img, .logo-tile a:focus-visible img { filter: none; opacity: 1; }
.logo-tile.is-placeholder { background: var(--soft); border-style: dashed; border-color: var(--line-2); box-shadow: none; color: var(--muted); display: flex; flex-direction: column; justify-content: center; gap: 6px; font-weight: 700; font-size: .875rem; }
.logo-tile.is-placeholder svg { width: 30px; height: 30px; }

/* reviews */
.section--quotes { overflow: hidden; }
.section--quotes::before { content: "\201C"; position: absolute; left: 4%; top: -40px; font: 800 340px/1 Georgia, serif; color: var(--blue-100); pointer-events: none; }
.carousel--rv .car-track { padding-bottom: 64px; }
.rv-card { position: relative; margin: 0 0 40px; background: #fff; border-radius: 26px; padding: 40px 28px 84px; text-align: center; box-shadow: var(--sh-2); border: 1px solid var(--line); display: flex; flex-direction: column; }
.rv-quote { display: block; width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; background: var(--grad-blue); color: #fff; font: 800 44px/68px Georgia, serif; }
.rv-card blockquote { margin: 0; flex: 1; font-size: 1.0625rem; color: var(--ink); }
.rv-card figcaption { position: absolute; left: 0; right: 0; bottom: -40px; display: flex; flex-direction: column; align-items: center; }
.rv-avatar { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; box-shadow: var(--sh-2); background: #E2E8F0; }
.rv-name { font-weight: 800; color: var(--ink); margin-top: 6px; }
.rv-role { font-size: .875rem; color: var(--muted); }
.rv-card.is-placeholder { border: 2px dashed var(--line-2); }
.rv-card.is-placeholder blockquote { color: var(--muted); font-style: italic; }
.carousel--rv .car-slide { padding-bottom: 50px; }

/* 11 --------------------------------------------------------------- timeline, pricing, faq */
.pricing { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 960px) { .pricing { grid-template-columns: 1.2fr 1fr; } }
.price-card { background: #fff; border-radius: 30px; padding: clamp(24px, 3.4vw, 40px); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.price-top { display: flex; flex-wrap: wrap; gap: 8px; }
.price-name { font-size: 1.75rem; margin: 14px 0 6px; }
.price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.amt { font-size: clamp(3rem, 6vw, 4.25rem); font-weight: 850; color: var(--ink); letter-spacing: -.04em; line-height: 1; }
.per { color: var(--muted); font-weight: 650; }
.price-terms { color: var(--muted); margin: 8px 0 18px; }
.pilot { display: flex; gap: 12px; align-items: flex-start; background: #FFF7E6; border: 1px solid #FBD38D; border-radius: 16px; padding: 14px 16px; margin-bottom: 20px; }
.pilot svg { width: 22px; height: 22px; color: var(--amber-ink); flex: none; margin-top: 2px; }
.pilot p { margin: 0; } .pilot strong { color: var(--ink); }
.incl { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.incl li { position: relative; padding-left: 30px; font-size: .9875rem; }
.incl li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 6px; background: var(--blue) no-repeat center / 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.incl strong { color: var(--ink); }
.price-sub { font-size: 1.0625rem; color: var(--ink-2, var(--muted)); margin: 6px 0 14px; max-width: 46ch; }
.price-name { background: linear-gradient(90deg, #4285F4 0%, #34A853 30%, #FBBC05 46%, #6D5DFC 66%, #22D3EE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.incl-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.incl-group { background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 18px; padding: 16px 16px 18px; }
.incl-head { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); margin: 0 0 12px; font-size: 1.0625rem; }
.incl-head svg { width: 22px; height: 22px; color: var(--blue); flex: none; }
.incl-group:nth-child(2) .incl-head svg { color: #6D5DFC; }
.incl-group .incl li { font-size: .9375rem; }
.price-report { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: var(--muted); margin: 0 0 20px; }
.price-report svg { width: 18px; height: 18px; color: #16A34A; flex: none; margin-top: 3px; }
@media (max-width: 640px) { .incl-groups { grid-template-columns: 1fr; } }
.guarantee-card { position: relative; background: radial-gradient(400px 300px at 100% 0%, rgba(31, 91, 255, .5), transparent 70%), var(--navy); color: #C9D3E8; border-radius: 30px; padding: clamp(24px, 3.4vw, 40px); padding-top: 72px; box-shadow: var(--sh-3); overflow: hidden; margin-top: 40px; }
@media (min-width: 960px) { .guarantee-card { margin-top: 0; } }
.g-seal { position: absolute; top: -6px; right: 22px; width: 132px; height: 132px; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .4)); }
.g-kicker { color: var(--amber); font-weight: 800; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; }
.guarantee-card h3 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.1rem); max-width: 70%; }
.guarantee-card .small { color: #A9B6D3; }
.guarantee-card { display: flex; flex-direction: column; }
.guarantee-card .btn { align-self: flex-start; margin-top: auto; }
.addon-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 14px 22px; box-shadow: var(--sh-1); }
.addon-strip p { flex: 1 1 300px; margin: 0; }
.addon-ic { width: 56px; height: 56px; flex: none; }
.faq { display: grid; gap: 12px; }
.faq--two { align-items: start; }
@media (min-width: 900px) { .faq--two { grid-template-columns: 1fr 1fr; } }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-1); transition: box-shadow .2s; }
.faq-item[open] { box-shadow: var(--sh-2); border-color: var(--blue-100); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-weight: 750; color: var(--ink); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--blue-50); color: var(--blue-700); display: grid; place-items: center; font-size: 1.25rem; font-weight: 700; transition: transform .2s; }
.faq-item[open] summary::after { content: "\2212"; background: var(--blue); color: #fff; }
.faq-a { padding: 0 22px 18px; }
.faq-a p:last-child { margin: 0; }

/* 12 --------------------------------------------------------------- forms */
.section--formband { background: var(--grad-blue); color: #E4ECFF; overflow: hidden; }
.section--formband::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 90% 0%, rgba(255, 255, 255, .18), transparent 70%), radial-gradient(#fff 1.2px, transparent 1.4px) 0 0 / 26px 26px; opacity: .5; pointer-events: none; }
.fb-head { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.fb-head h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); }
.fb-sub { font-size: 1.125rem; color: #E4ECFF; margin: 0; }
.lead-form { margin: 0; }
.seg { border: 0; padding: 0; margin: 0 auto 28px; text-align: center; min-width: 0; }
.seg-q { display: block; width: 100%; color: #fff; font-weight: 800; font-size: 1.25rem; margin-bottom: 14px; padding: 0; }
.seg-opts { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #fff; border-radius: 999px; padding: 6px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .45); max-width: 100%; }
.seg-opt { position: relative; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg-opt span { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: 10px 28px; border-radius: 999px; color: var(--ink); transition: background .2s, color .2s; }
.seg-opt b { font-size: 1.0625rem; }
.seg-opt small { font-size: .875rem; color: var(--muted); }
.seg-opt input:checked + span { background: var(--blue-700); color: #fff; box-shadow: 0 10px 20px -10px rgba(18, 56, 201, .9); }
.seg-opt input:checked + span small { color: #DCE6FF; }
.seg-opt input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
@media (max-width: 560px) { .seg-opts { border-radius: 22px; } .seg-opt span { border-radius: 18px; padding: 10px 12px; } .seg-opt b { font-size: .9375rem; } .seg-opt small { font-size: .8125rem; } }
.form-card { background: #fff; color: var(--ink-2); border-radius: 26px; padding: clamp(22px, 3.6vw, 44px); box-shadow: 0 50px 90px -30px rgba(5, 12, 40, .6), 0 10px 24px rgba(5, 12, 40, .12); }
.lead-form--plain .form-card { box-shadow: var(--sh-3); }
.fields { border: 0; padding: 0; margin: 0; display: grid; gap: 18px 20px; min-width: 0; }
@media (min-width: 760px) { .fields { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field { min-width: 0; margin: 0; }
.field label, .pill-field legend { display: block; font-weight: 750; color: var(--ink); margin-bottom: 6px; font-size: .9375rem; padding: 0; }
.opt { font-weight: 500; color: var(--muted); }
.field-hint { font-size: .8125rem; color: var(--muted); margin: -2px 0 6px; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--soft); border: 1.5px solid var(--line-2); border-radius: 14px; padding: 13px 14px; min-height: 50px; transition: border-color .15s, background .15s, box-shadow .15s; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #94A3B8; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(31, 91, 255, .18); }
.field [aria-invalid="true"] { border-color: var(--red); background: #FFF5F5; }
.field-error { color: #B91C1C; font-size: .875rem; font-weight: 650; margin: 6px 0 0; min-height: 0; }
.field-error:empty { display: none; }
.pill-field { border: 0; padding: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 650; color: var(--ink); transition: all .15s; }
.pill:hover span { border-color: var(--blue); }
.pill input:checked + span { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.pill input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.pill-field[aria-invalid="true"] .pill span { border-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { font-size: .875rem; color: var(--muted); margin: 22px 0 0; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 18px; }
.form-note { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: .9375rem; }
.form-note svg { width: 18px; height: 18px; }
.form-status { margin: 14px 0 0; font-weight: 700; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--green); background: var(--green-50); padding: 12px 16px; border-radius: 12px; }
.form-status.is-err { color: #B91C1C; }
.trust-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; list-style: none; padding: 0; margin: 28px 0 0; }
.trust-chips li { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-weight: 700; font-size: .9375rem; }
.trust-chips svg { width: 18px; height: 18px; color: var(--amber); }

/* 13 --------------------------------------------------------------- blog */
.hero--blog h1 { max-width: 18ch; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.fchip { font: inherit; font-weight: 700; font-size: .9375rem; padding: 9px 18px; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; }
.fchip:hover { border-color: var(--blue); }
.fchip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.post-grid { display: grid; gap: 24px; }
@media (min-width: 680px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform .2s, box-shadow .2s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.post-cover { display: block; aspect-ratio: 1200 / 630; overflow: hidden; }
.post-cover .cover { width: 100%; height: 100%; display: block; }
.pc-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pc-body .chip { align-self: flex-start; }
.pc-body h3 { font-size: 1.1875rem; margin: 0; line-height: 1.3; }
.pc-body h3 a { color: var(--ink); text-decoration: none; }
.pc-body h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card { position: relative; }
.pc-body h3 a:hover { color: var(--blue-700); }
.pc-body p { margin: 0; font-size: .9375rem; }
.post-meta { color: var(--muted); font-size: .875rem; margin-top: auto !important; }
.post-hero { padding: clamp(28px, 4vw, 56px) 0 0; background: linear-gradient(#F7F9FF, #fff); }
.post-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); max-width: 22ch; margin-top: 14px; }
.post-hero .post-meta { font-size: .9375rem; margin-bottom: 28px; }
.post-cover-hero { border-radius: 28px; overflow: hidden; box-shadow: var(--sh-3); aspect-ratio: 1200 / 520; }
.post-cover-hero .cover { width: 100%; height: 100%; display: block; }
.post-layout { display: grid; gap: 40px; padding-top: 48px; padding-bottom: var(--sec); }
@media (min-width: 1020px) { .post-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 64px; } }
.post-aside { min-width: 0; }
.toc { background: var(--soft); border-radius: 20px; padding: 18px 20px; }
@media (min-width: 1020px) { .toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; } }
.toc-h { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.toc ol { margin: 0; padding-left: 1.1em; font-size: .9375rem; }
.toc li { margin-bottom: 8px; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover, .toc a.is-active { color: var(--blue-700); text-decoration: underline; }
.prose { max-width: 70ch; font-size: 1.125rem; line-height: 1.75; color: var(--ink-2); }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin: 2em 0 .6em; scroll-margin-top: 96px; }
.prose h3 { font-size: 1.3rem; margin: 1.6em 0 .5em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--blue); font-weight: 700; }
.prose strong { color: var(--ink); }
.prose .lead { font-size: 1.25rem; color: var(--ink); }
.prose blockquote.callout, .prose .callout { margin: 1.6em 0; padding: 20px 24px 20px 64px; position: relative; border-radius: 18px; background: var(--tint); border: 1px solid var(--blue-100); color: var(--ink); }
.prose blockquote.callout::before { content: "!"; position: absolute; left: 20px; top: 20px; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: .9rem; }
.prose blockquote.callout p:last-child { margin: 0; }
.prose .note { font-size: 1rem; background: #FFF7E6; border-left: 4px solid var(--amber); padding: 12px 16px; border-radius: 0 12px 12px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; margin: 1.4em 0; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.post-faq, .post-sources { max-width: 70ch; margin-top: 56px; }
.post-faq h2, .post-sources h2 { font-size: 1.75rem; }
.post-sources ol { font-size: .9375rem; padding-left: 1.3em; }
.post-sources a { word-break: break-word; }
.author-box { display: flex; gap: 16px; align-items: flex-start; max-width: 70ch; margin-top: 48px; padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-1); }
.author-mark { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--blue-50); border-radius: 14px; }
.author-mark svg { width: 26px; height: 32px; }
.author-name { font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.author-box p:last-child { margin: 0; font-size: .9375rem; }
.post-cta { display: grid; gap: 16px; align-items: center; max-width: 70ch; margin-top: 28px; padding: 26px; border-radius: 24px; background: var(--grad-blue); color: #E4ECFF; box-shadow: var(--sh-blue); }
@media (min-width: 700px) { .post-cta { grid-template-columns: 72px 1fr auto; } }
.post-cta-art { width: 72px; height: 72px; }
.post-cta-t { color: #fff; font-weight: 800; font-size: 1.25rem; margin: 0 0 4px; }
.post-cta p:last-child { margin: 0; }

/* 14 --------------------------------------------------------------- inner pages */
.cta-band { position: relative; display: grid; gap: 20px; align-items: center; background: var(--grad-blue); color: #E4ECFF; border-radius: 32px; padding: clamp(28px, 4vw, 48px); box-shadow: var(--sh-blue); overflow: hidden; }
@media (min-width: 860px) { .cta-band { grid-template-columns: 110px 1fr auto; gap: 32px; } }
.cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(#fff 1.2px, transparent 1.4px) 0 0 / 24px 24px; opacity: .12; pointer-events: none; }
.cta-art { width: 110px; height: 110px; position: relative; z-index: 1; }
.cta-band > div, .cta-band .btn { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 8px; }
.cta-band p { margin: 0; color: #E4ECFF; }
.rules { display: grid; gap: 24px; }
@media (min-width: 860px) { .rules { grid-template-columns: 1fr 1fr; } }
.rules-col { background: #fff; border-radius: 26px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.rules-col--never { border-top: 6px solid var(--red); } .rules-col--own { border-top: 6px solid var(--green); }
.svc-tiles { display: grid; gap: 22px; }
@media (min-width: 720px) { .svc-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svc-tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 26px; box-shadow: var(--sh-1); transition: transform .2s, box-shadow .2s; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.tile .card-ic3d { width: 80px; height: 80px; }
.tile h3 { font-size: 1.1875rem; }
.tile ul { margin: 0; }
.tile p:last-child, .tile ul:last-child { margin-bottom: 0; }
.compare { display: grid; gap: 22px; align-items: stretch; }
@media (min-width: 960px) { .compare { grid-template-columns: repeat(3, 1fr); align-items: end; } }
.compare-col { position: relative; background: #fff; border-radius: 28px; padding: 30px 26px; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.compare-col .card-ic3d { width: 92px; height: 92px; margin: 0 0 6px; }
.compare-col .cc-k { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.compare-col h3 { font-size: 1.5rem; }
.compare-col dl { margin: 0; }
.compare-col dt { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); margin-top: 16px; }
.compare-col dd { margin: 4px 0 0; font-size: .9875rem; }
.compare-col.is-focus { background: var(--navy); color: #C9D3E8; border-color: var(--navy); box-shadow: var(--sh-3); padding-top: 52px; padding-bottom: 44px; }
@media (min-width: 960px) { .compare-col.is-focus { transform: translateY(-16px); } }
.compare-col.is-focus h3 { color: #fff; } .compare-col.is-focus dt { color: var(--amber); } .compare-col.is-focus .cc-k { color: #A9B6D3; }
.cc-flag { position: absolute; top: -14px; left: 26px; background: var(--amber); color: var(--navy); font-weight: 800; font-size: .8125rem; padding: 6px 14px; border-radius: 999px; }
.flow { display: grid; gap: 18px; align-items: center; }
@media (min-width: 1000px) { .flow { grid-template-columns: 1.1fr auto 1fr auto 1fr; } }
.flow-col { display: grid; gap: 10px; }
.flow-node { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; font-weight: 700; color: var(--ink); box-shadow: var(--sh-1); }
.flow-node i { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); flex: none; }
.flow-arrow { color: var(--blue); justify-self: center; } .flow-arrow svg { width: 32px; height: 32px; }
@media (max-width: 999px) { .flow-arrow svg { transform: rotate(90deg); } }
.flow-hub { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; background: var(--grad-blue); color: #E4ECFF; padding: 26px; border-radius: 28px; box-shadow: var(--sh-blue); }
.flow-hub strong { color: #fff; font-size: 1.25rem; }
.flow-hub .card-ic3d { width: 88px; height: 88px; margin: 0; }
.flow-out { background: #fff; border: 2px solid var(--green); border-radius: 24px; padding: 22px; box-shadow: var(--sh-2); }
.flow-out strong { display: block; color: var(--ink); font-size: 1.125rem; margin-bottom: 4px; }
.table-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-1); }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 520px; }
.table caption { text-align: left; padding: 14px 18px; font-weight: 750; color: var(--ink); }
.table th, .table td { padding: 12px 16px; border-top: 1px solid var(--line); text-align: left; }
.table thead th { background: var(--soft); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.table tfoot th, .table tfoot td { background: var(--tint); }
.mention { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 750; }
.mention--yes { background: var(--green-50); color: var(--green); } .mention--no { background: var(--soft); color: var(--muted); }
.numbered { padding-left: 1.4em; } .numbered li { margin-bottom: 8px; }
.report { background: #fff; border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--sh-3); overflow: hidden; }
.report-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; padding: 18px 24px; background: var(--navy); color: #fff; }
.report-body { display: grid; gap: 24px; padding: clamp(18px, 3vw, 32px); }
@media (min-width: 900px) { .report-body { grid-template-columns: 340px 1fr; } }
.stack > * + * { margin-top: 18px; }
.report-section { border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.report-section h3 { font-size: 1rem; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .9375rem; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.st { flex: none; font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; margin-top: 2px; min-width: 64px; text-align: center; }
.st--ok { background: var(--green-50); color: var(--green); } .st--warn { background: #FFF1D6; color: var(--amber-ink); } .st--fix { background: #FDE8E8; color: #B91C1C; }
.fineprint { background: #fff; border-radius: 30px; border: 1px solid var(--line); box-shadow: var(--sh-2); overflow: hidden; }
.fineprint-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: clamp(22px, 3vw, 36px); background: radial-gradient(500px 300px at 100% 0%, rgba(31, 91, 255, .5), transparent 70%), var(--navy); }
.fineprint-head h2 { color: #fff; margin: 0; flex: 1 1 320px; }
.fineprint-head .card-ic3d { width: 96px; height: 96px; margin: 0; }
.fineprint-body { display: grid; gap: 1px; background: var(--line); }
@media (min-width: 800px) { .fineprint-body { grid-template-columns: 1fr 1fr; } }
.term { background: #fff; padding: 24px 28px; }
.term h3 { font-size: 1.0625rem; } .term p:last-child, .term ul:last-child { margin-bottom: 0; }
.term--key { background: var(--tint); } .term--warn { background: #FFF7E6; }
.formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9375rem; background: var(--soft); border-radius: 12px; padding: 10px 14px; color: var(--ink); overflow-x: auto; }
.season { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 12px; }
.season span { height: 56px; border-radius: 8px; background: var(--blue-100); }
.season .mid { background: var(--blue-300); } .season .hi { background: var(--blue-700); }
.season-labels { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; text-align: center; font-size: .75rem; color: var(--muted); margin-top: 6px; }
.template-map { list-style: none; counter-reset: t; padding: 0; margin: 0; display: grid; gap: 18px; }
@media (min-width: 720px) { .template-map { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .template-map { grid-template-columns: repeat(4, 1fr); } }
.template-map li { counter-increment: t; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 56px 22px 22px; box-shadow: var(--sh-1); }
.template-map li::before { content: counter(t, decimal-leading-zero); position: absolute; top: 14px; left: 22px; font-size: 2rem; font-weight: 850; color: var(--blue-100); letter-spacing: -.03em; }
.template-map h3 { font-size: 1.0625rem; } .template-map p { margin: 0; font-size: .9375rem; }
.founder { display: flex; gap: 16px; align-items: center; }
.monogram { width: 72px; height: 72px; border-radius: 22px; background: var(--grad-blue); color: #fff; display: grid; place-items: center; font-weight: 850; font-size: 1.25rem; box-shadow: var(--sh-blue); }
.err-code { font-size: clamp(6rem, 18vw, 11rem); font-weight: 900; letter-spacing: -.06em; line-height: 1; margin: 0 0 8px; background: linear-gradient(135deg, #DC2626, #F97316); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead--center { margin-left: auto; margin-right: auto; max-width: 60ch; }
.btn-row--center { justify-content: center; }
.kw-cols { display: grid; gap: 22px; }
@media (min-width: 800px) { .kw-cols { grid-template-columns: 1fr 1fr; } }
.kw-card { border-radius: 26px; padding: clamp(22px, 3vw, 32px); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.kw-card--hot { background: linear-gradient(160deg, #FFF5F4, #fff 60%); border-color: #FBD5D2; }
.kw-card h3 { display: flex; align-items: center; gap: 10px; }
.kw-card .note-s { margin: 14px 0 0; font-size: .9375rem; color: var(--muted); }
.hero-badge-ic { width: 96px; height: 96px; margin-bottom: 8px; }
.pm-wrap { position: relative; }
.prose-card { max-width: 820px; }

/* 15 --------------------------------------------------------------- footer */
.site-footer { background: var(--navy); color: #A9B6D3; padding: 56px 0 32px; font-size: .9375rem; }
.site-footer a { color: #DCE6FF; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; padding: 24px 28px; border-radius: 24px; background: linear-gradient(120deg, rgba(31, 91, 255, .35), rgba(31, 91, 255, .08)); border: 1px solid rgba(143, 179, 255, .25); margin-bottom: 48px; }
.footer-cta p { margin: 0; color: #DCE6FF; font-size: 1.0625rem; }
.footer-cta strong { color: #fff; }
.footer-cta .btn, .footer-cta .btn:hover { color: #fff; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 960px) { .footer-brand { grid-column: auto; } }
.footer-brand svg { width: 172px; height: auto; }
.footer-brand p { margin: 14px 0; max-width: 36ch; }
.footer-brand address { font-style: normal; line-height: 1.7; }
.site-footer h2 { font-size: .8125rem; color: #fff; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 22px; font-size: .875rem; }
.footer-legal p { margin: 0; }

/* 16 --------------------------------------------------------------- motion + utilities */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .car-track { scroll-behavior: auto; }
}
@media print { .site-header, .site-footer, .car-ctrl { display: none; } }

/* v2 additions */
.mm-foot { display: none; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: .8125rem; color: var(--muted); }
.mm-foot p { margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.mm-foot b { color: var(--ink); }
.mapmock--large .mm-foot { display: block; }
.head-link { justify-self: end; margin: 0; }
@media (max-width: 899px) { .head-link { justify-self: start; } }
.hero-visual--inner .float-chip--rank { top: 96px; }
.hero-badge-ic { display: block; width: 84px; height: 84px; margin: -6px 0 6px -6px; }
.hero-tag--plain { padding: 6px 16px; }
.card--audit .card-ic3d, .card--facts .card-ic3d { width: 84px; height: 84px; }
.card--partner .pt-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.card--partner .pt-row:first-of-type { border-top: 0; }
.pt-ic { width: 56px; height: 56px; flex: none; }
.rules-col--key { border-top: 6px solid var(--blue); }
.steps3 { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
@media (min-width: 860px) { .steps3 { grid-template-columns: repeat(3, 1fr); } }
.steps3 li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 28px; box-shadow: var(--sh-1); }
.step-ic { display: block; width: 88px; height: 88px; margin: -6px 0 8px -6px; }
.step-n { position: absolute; top: 18px; right: 24px; font-size: 3.25rem; font-weight: 900; color: var(--blue-50); letter-spacing: -.04em; line-height: 1; }
.steps3 h3 { font-size: 1.25rem; } .steps3 p { margin: 0; }
.on-blue { color: #fff; } .on-blue-p { color: #E4ECFF; font-size: 1.125rem; } .on-blue-p strong { color: #fff; }
.pilot-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.pilot-points li { display: flex; gap: 16px; align-items: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); border-radius: 22px; padding: 16px 18px; color: #E4ECFF; backdrop-filter: blur(6px); }
.pilot-points b { display: block; color: #fff; font-size: 1.0625rem; }
.pp-ic { width: 64px; height: 64px; flex: none; }
.hero-visual--inner .gcard { grid-template-columns: 1fr; }
.hero-visual--inner .gcard .gcard-info { display: none; }

@media (max-width: 559px) {
  .prog-step { grid-template-columns: 1fr; padding: 12px; }
  .prog-thumb { grid-row: auto; width: 56px; height: 56px; margin-bottom: 6px; }
}
.mm-foot p { display: block; }
.swipe-hint { display: none; font-size: .875rem; font-weight: 700; color: var(--blue-700); margin: 0 0 10px; }
@media (max-width: 999px) {
  .gcards { grid-auto-flow: column; grid-auto-columns: 88%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 20px; margin: 0 -4px; }
  .gcards > * { scroll-snap-align: start; min-width: 0; }
  .gcards .gcard { height: 100%; }
  .swipe-hint { display: block; }
}
@media (max-width: 640px) {
  .cs-grids { flex-wrap: nowrap; gap: 10px; }
  .cs-grids figure { width: 42%; max-width: 132px; }
  .cs-grid-note { display: none; }
  .cs-stats { gap: 10px; }
  .cs-stat { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
  .cs-num { margin: 0; min-width: 7.2em; font-size: 1.4rem; }
  .gcard-maps .grid-svg text { font-size: 12px; }
}
.split > *, .grid-2 > *, .grid-3 > * { min-width: 0; }

/* v3: hero title brand styling, AI tool logos, 5-tier grid legend */
.ai-names-note { font-size: .75rem; color: var(--muted); margin: -14px 0 24px; max-width: 52ch; }
.legend-note { flex-basis: 100%; justify-content: center; font-size: .8125rem; font-weight: 500; color: var(--muted); text-align: center; }
.legend--dark .legend-note { color: #9AA8C4; }

/* v4: hero title gradients ------------------------------------------------ */
.hero-h1 .h1-from { white-space: nowrap; }
.gmaps-pin { display: inline-block; width: .42em; height: auto; margin-left: .16em; vertical-align: -.04em; filter: drop-shadow(0 3px 4px rgba(11, 21, 48, .2)); }
.hero-h1 .gmaps { white-space: nowrap; color: #1A73E8; }
.hl-ai { color: #5B3FD9; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-h1 .gmaps { background: linear-gradient(90deg, #1A73E8 0%, #4285F4 15%, #E5383B 31%, #EA4335 40%, #F07400 53%, #E37400 60%, #34A853 76%, #188038 100%); background: linear-gradient(in oklab 90deg, #1A73E8 0%, #4285F4 15%, #E5383B 31%, #EA4335 40%, #F07400 53%, #E37400 60%, #34A853 76%, #188038 100%); }
  .hl-ai { background: linear-gradient(90deg, #3B1FA8 0%, #6D28D9 30%, #8B5CF6 52%, #0EA5E9 80%, #0D9488 100%); }
  .hero-h1 .gmaps, .hl-ai { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .02em .08em 0; }
}
@media (forced-colors: active) { .hero-h1 .gmaps, .hl-ai { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }

/* v4: AI tool logo chips ---------------------------------------------------- */
.ai-names { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; }
.ai-names li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 11px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); font-weight: 750; color: var(--ink); font-size: .875rem; line-height: 1; white-space: nowrap; }
.ai-names .ai-ic { display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
.ai-names .ai-ic img { display: block; width: 19px; height: 19px; object-fit: contain; }
@media (min-width: 1100px) { .ai-names { flex-wrap: nowrap; } .ai-names li { padding: 0 12px 0 10px; } }
@media (max-width: 420px) { .ai-names li { height: 38px; font-size: .8125rem; padding: 0 12px 0 10px; } }

/* v4: process timeline ------------------------------------------------------ */
.pt { --gap: 16px; list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 22px; position: relative; }
.pt::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 40px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, #fff 45%, #FFC247 72%, #67E8F9 100%); }
.pt::after { content: ""; position: absolute; left: 15px; bottom: 0; height: 40px; width: 3px; background: repeating-linear-gradient(180deg, #67E8F9 0 5px, transparent 5px 10px); opacity: .8; }
.pt-step { position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-areas: "dot pill" ". card"; column-gap: 14px; row-gap: 10px; align-items: center; }
.pt-pill { grid-area: pill; justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); white-space: nowrap; }
.pt-pill svg { width: 14px; height: 14px; }
.pt-dot { grid-area: dot; justify-self: center; position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .22), 0 4px 10px rgba(6, 18, 70, .35); }
.pt-card { grid-area: card; position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px 18px 20px; border-radius: 20px; background: #fff; color: var(--ink-2); text-align: left; box-shadow: 0 24px 44px -24px rgba(4, 14, 60, .6), 0 2px 6px rgba(4, 14, 60, .12); }
.pt-top { display: flex; align-items: center; justify-content: space-between; }
.pt-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--blue-50), var(--blue-100)); color: var(--blue-700); box-shadow: inset 0 0 0 1px rgba(31, 91, 255, .12); }
.pt-ic svg { width: 21px; height: 21px; }
.pt-num { font-size: .8125rem; font-weight: 850; letter-spacing: .06em; color: var(--line-2); }
.pt-card h3 { margin: 2px 0 0; font-size: 1.125rem; line-height: 1.25; color: var(--ink); }
.pt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pt-list li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; font-size: .875rem; line-height: 1.45; }
.pt-list svg { width: 16px; height: 16px; margin-top: 2px; color: var(--blue); stroke-width: 2.6; }
/* Day 60 milestone */
.pt-step--key .pt-pill { background: var(--amber); border-color: var(--amber); color: var(--navy); box-shadow: 0 8px 20px -8px rgba(255, 176, 32, .8); }
.pt-step--key .pt-dot { width: 22px; height: 22px; background: var(--amber); box-shadow: 0 0 0 6px rgba(255, 194, 71, .35), 0 0 22px rgba(255, 194, 71, .7); }
.pt-step--key .pt-card { background: linear-gradient(160deg, #13204A 0%, #0B1530 100%); color: #C9D4EE; box-shadow: 0 0 0 2px var(--amber), 0 30px 50px -22px rgba(0, 0, 0, .6); }
.pt-step--key .pt-ic { background: linear-gradient(135deg, #FFD27A, var(--amber)); color: var(--navy); box-shadow: 0 6px 16px -6px rgba(255, 176, 32, .9); }
.pt-step--key .pt-num { color: rgba(255, 255, 255, .3); }
.pt-step--key .pt-card h3 { color: #fff; }
.pt-step--key .pt-list svg { color: var(--amber); }
.pt-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; background: rgba(255, 176, 32, .14); border: 1px solid rgba(255, 176, 32, .45); color: #FFC247; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pt-badge svg { width: 13px; height: 13px; }
.pt-deal { margin: auto 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 176, 32, .12); border: 1px dashed rgba(255, 176, 32, .5); font-size: .8125rem; line-height: 1.45; color: #E4ECFF; }
.pt-deal strong { display: block; color: var(--amber); font-size: .9375rem; }
/* Month 3+ loop */
.pt-step--loop .pt-dot { background: transparent; border: 3px solid #67E8F9; box-shadow: 0 0 0 5px rgba(103, 232, 249, .2); }
.pt-step--loop .pt-pill { background: rgba(103, 232, 249, .16); border-color: rgba(103, 232, 249, .55); }
.pt-step--loop .pt-ic { background: linear-gradient(135deg, #E0FBFF, #BDF3FB); color: #0E7490; }
.pt-loop { align-self: flex-start; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #ECFEFF; border: 1px solid #A5F3FC; color: #0E7490; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pt-loop svg { width: 13px; height: 13px; }
@media (min-width: 1100px) {
  .pt { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--gap); margin-top: 18px; }
  .pt::before { left: calc((100% - 4 * var(--gap)) / 10); right: calc((100% - 4 * var(--gap)) / 10 + 40px); top: 49px; bottom: auto; width: auto; height: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .35) 0%, #fff 40%, #FFC247 72%, #67E8F9 100%); }
  .pt::after { left: auto; right: calc((100% - 4 * var(--gap)) / 10 - 40px); width: 80px; top: 49px; bottom: auto; height: 3px;
    background: repeating-linear-gradient(90deg, #67E8F9 0 6px, transparent 6px 11px); -webkit-mask: linear-gradient(90deg, #000 40%, transparent); mask: linear-gradient(90deg, #000 40%, transparent); }
  .pt-step { grid-template-columns: 1fr; grid-template-rows: 28px 22px 1fr; grid-template-areas: "pill" "dot" "card"; row-gap: 10px; align-items: center; }
  .pt-pill, .pt-dot { justify-self: center; }
  .pt-card { margin-top: 10px; }
}
.pt--light .pt-pill { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }
@media (min-width: 700px) and (max-width: 1099px) { .pt { max-width: 720px; margin-inline: auto; } }

/* 17 ---------------------------------------------------------------- photos (v5) */
.section--photoband { padding: 0 0 clamp(24px, 4vw, 48px); margin-top: calc(-1 * clamp(16px, 3vw, 40px)); }
.photo-band { display: grid; gap: 16px; grid-template-columns: 1fr; }
.photo-band figure { margin: 0; position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); background: var(--blue-50); }
.photo-band img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pb-main { aspect-ratio: 3 / 2; }
.pb-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(11, 21, 48, .62)); pointer-events: none; }
.pb-cap { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; display: flex; align-items: center; gap: 12px; max-width: 440px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .94); box-shadow: var(--sh-2); color: var(--ink-2); font-size: .9375rem; line-height: 1.35; }
.pb-cap b { display: block; color: var(--ink); font-size: 1rem; }
.pb-cap-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--grad-blue); color: #fff; box-shadow: var(--sh-blue); }
.pb-cap-ic svg { width: 22px; height: 22px; }
.pb-side { display: none; }
.pb-note { border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px); background: var(--navy) radial-gradient(420px 220px at 100% 0, rgba(31, 91, 255, .5), transparent 70%); color: #C9D3E8; display: flex; flex-direction: column; justify-content: center; }
.pb-note p { margin: 0 0 .6em; }
.pb-note-k { color: #fff; font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.pb-note-link { color: #fff; font-weight: 700; text-decoration: none; margin-top: auto; }
.pb-note-link:hover { color: var(--amber); }
@media (min-width: 640px) {
  .photo-band { grid-template-columns: 1fr 1fr; }
  .pb-main { grid-column: 1 / -1; }
  .pb-side { display: block; aspect-ratio: 3 / 2; }
}
@media (min-width: 960px) {
  .photo-band { grid-template-columns: 1.65fr 1fr; grid-template-rows: auto auto; gap: 20px; }
  .pb-main { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; min-height: 460px; }
  .pb-side { aspect-ratio: 16 / 10; }
  .pb-cap { left: 24px; bottom: 24px; }
}

/* home: trade photo row + software strip */
.trade-photos { margin-top: clamp(40px, 5vw, 64px); }
.tp-head { font-weight: 800; color: var(--ink); font-size: 1.125rem; margin-bottom: 18px; }
.tp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tp-list { grid-template-columns: repeat(3, 1fr); } }
.tp-card { display: block; position: relative; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.tp-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); color: inherit; }
.tp-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--blue-50); }
.tp-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tp-card:hover .tp-img img { transform: scale(1.04); }
.tp-body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 16px 20px 18px; }
.tp-t { font-weight: 800; color: var(--ink); font-size: 1.125rem; }
.tp-d { grid-column: 1; font-size: .9375rem; color: var(--muted); }
.tp-go { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue-50); color: var(--blue-700); font-weight: 800; }
.tp-card:hover .tp-go { background: var(--blue); color: #fff; }
@media (prefers-reduced-motion: reduce) { .tp-card, .tp-img img { transition: none; } .tp-card:hover { transform: none; } .tp-card:hover .tp-img img { transform: none; } }

.sw-strip { margin-top: 28px; display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center; padding: 20px clamp(20px, 3vw, 28px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--blue-100); box-shadow: var(--sh-1); position: relative; overflow: hidden; }
.sw-strip::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--grad-blue); }
.sw-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--blue-50); color: var(--blue-700); }
.sw-ic svg { width: 24px; height: 24px; }
.sw-text p { margin: 0; }
.sw-t { font-weight: 800; color: var(--ink); font-size: 1.0625rem; line-height: 1.3; }
.sw-d { font-size: .9375rem; color: var(--muted); margin-top: 2px !important; }
.sw-names { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sw-names li { padding: 7px 14px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-weight: 700; font-size: .875rem; color: var(--ink); letter-spacing: -.005em; }
@media (min-width: 900px) {
  .sw-strip { grid-template-columns: auto 1fr auto; }
  .sw-names { grid-column: 3; justify-content: flex-end; }
}

/* about photo + credits */
.about-photo { margin: 0; position: relative; justify-self: center; width: 100%; max-width: 460px; }
.about-photo img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.about-photo-cap { position: absolute; left: -12px; bottom: 28px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: var(--sh-2); font-size: .9375rem; line-height: 1.35; color: var(--ink-2); max-width: 300px; }
.about-photo-cap b { display: block; color: var(--ink); }
.about-photo-tag { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(11, 21, 48, .62); color: #fff; font-size: .75rem; font-weight: 700; }
@media (max-width: 520px) { .about-photo-cap { left: 12px; right: 12px; bottom: 12px; } }
.section--credits { padding: 0 0 48px; }
.credits { border-top: 1px solid var(--line); padding-top: 20px; font-size: .875rem; color: var(--muted); }
.credits summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.credits-list { margin: 10px 0 0; padding-left: 1.2em; columns: 2 320px; column-gap: 32px; }
.credits-list li { margin-bottom: 6px; break-inside: avoid; }
.pb-main--plumbing img { object-position: 70% 50%; }
.pb-main--electrical img { object-position: 45% 40%; }
@media (max-width: 639px) {
  .pb-main { aspect-ratio: 4 / 3.4; }
  .pb-cap { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; gap: 10px; }
  .pb-cap > span:last-child > span { display: none; }
  .pb-cap-ic { width: 34px; height: 34px; border-radius: 10px; }
  .sw-strip { grid-template-columns: 1fr; }
  .sw-ic { display: none; }
}
.credits-h { font-size: .9375rem; letter-spacing: 0; margin: 0 0 6px; color: var(--ink-2); }
@media (max-width: 639px) { .tp-img { aspect-ratio: 16 / 9; } .tp-body { padding: 12px 16px 14px; } }