/* LeadsMax. Printed, not glowing: warm paper, navy ink, silver rules, one blue for links and marks.
   Schibsted Grotesk throughout. Sharp corners, heavy rules, a strict 12 column grid. */

@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/SchibstedGrotesk-Variable.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --paper: #F3F1EB;
  --paper-2: #E9E6DD;
  --ink: #0B1A30;
  --ink-2: #33415A;
  --mute: #5E6878;
  --rule: #0B1A30;
  --hair: #CFCBC0;
  --blue: #2350E6;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 80px; --s7: 128px;
  --wide: 1280px;
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 450 1.0625rem/1.6 var(--text); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--paper); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 20px; }
@media (min-width: 900px) { .wrap { padding: 0 40px; } }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--paper); padding: 8px 16px; z-index: 30; }

h1, h2, h3 { font-family: var(--display); margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
h1 { font-size: clamp(3rem, 1.2rem + 7vw, 8.4rem); letter-spacing: -0.025em; line-height: 0.95; }
h2 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem); }
h3 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
em { font-style: normal; color: var(--blue); }
h1 em { white-space: nowrap; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(243,241,235,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
.top .wrap { display: flex; align-items: center; gap: var(--s4); height: 76px; }
.top { transition: transform .3s ease; }
.top.top-away { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.03em; }
.logo b { font-weight: 700; }
.logo span { font-weight: 500; }
.mark { flex: none; }
.nav { display: flex; gap: 6px; margin: 0 auto; height: 100%; }
.nav a { display: flex; align-items: center; padding: 0 14px; height: 100%; color: var(--ink-2); text-decoration: none; font-weight: 550; font-size: 0.97rem; position: relative; }
.nav a:hover { color: var(--ink); }
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 22px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 26px; background: var(--ink); color: var(--paper); font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; text-decoration: none; border: 2px solid var(--ink); white-space: nowrap; transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-sm { height: 44px; padding: 0 18px; font-size: 0.95rem; }
.btn-block { display: flex; width: 100%; }
.btn-sm .sm { display: none; }

.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; height: 44px; padding: 0 16px; display: flex; align-items: center; border: 2px solid var(--ink); font-family: var(--display); font-weight: 700; -webkit-tap-highlight-color: transparent; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--ink); color: var(--paper); }
.menu-list { position: absolute; right: 0; top: calc(100% + 14px); width: min(86vw, 320px); background: var(--paper); border: 2px solid var(--ink); display: grid; }
.menu-list a { padding: 16px 18px; border-bottom: 1px solid var(--hair); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.menu-list a:last-child { border-bottom: 0; }
.menu-list a:hover { background: var(--paper-2); }
@media (max-width: 960px) {
  .nav { display: none; }
  .menu { display: block; }
  .top .wrap { gap: 10px; height: 64px; }
  .top .btn-sm { margin-left: auto; }
  .btn-sm .lg { display: none; }
  .btn-sm .sm { display: inline; }
}

/* Breadcrumbs: quiet, one line */
.crumbs { max-width: var(--wide); margin: 0 auto; padding: 22px 20px 0; }
@media (min-width: 900px) { .crumbs { padding: 22px 40px 0; } }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; color: var(--mute); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--hair); }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* ===== Home ===== */
.h-hero { padding: var(--s6) 0 0; border-bottom: 2px solid var(--rule); }
.h-hero .wrap > div:first-child { display: grid; gap: var(--s5); }
.h-hero .wrap:has(.hero-anim, .hero-media) { display: grid; gap: var(--s5); }
@media (min-width: 1000px) { .h-hero .wrap:has(.hero-anim, .hero-media) { grid-template-columns: 1.25fr 0.75fr; align-items: center; } }
.h-hero h1 { max-width: 12ch; }
.h-hero .lead { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); max-width: 40ch; margin: 0; color: var(--ink-2); line-height: 1.5; }
.hero-low { display: grid; gap: var(--s4); padding: var(--s3) 0 var(--s6); margin-top: 0; }
@media (min-width: 900px) { .hero-low { grid-template-columns: 1fr auto; align-items: end; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) { .hero-actions .btn { width: 100%; } }
.hero-media { margin: 0; aspect-ratio: 4 / 5; width: 100%; max-width: 460px; justify-self: end; border: 2px solid var(--ink); background: var(--paper-2); position: relative; overflow: hidden; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 999px) { .hero-media { justify-self: start; } }

/* Hero animation: one phone, three screens that slide in turn (maps, an incoming call, AI search) */
.hero-anim { position: relative; justify-self: center; width: 100%; max-width: 420px; height: 620px; margin: 0; display: grid; place-items: center; }
.ha-phone { position: relative; width: 300px; height: 612px; padding: 9px; border-radius: 52px; background: #0A0D14; box-shadow: 0 0 0 2px #6E7685, 0 0 0 3px #2A303B; }
.hero-anim::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -6px; width: 280px; height: 36px; margin-left: -140px; background: radial-gradient(closest-side, rgba(11,26,48,.28), rgba(11,26,48,0)); }
.ha-btn { position: absolute; width: 4px; border-radius: 2px 0 0 2px; background: #6E7685; left: -6px; }
.ha-btn-a { top: 120px; height: 28px; } .ha-btn-b { top: 165px; height: 52px; } .ha-btn-c { top: 228px; height: 52px; }
.ha-screen { position: relative; height: 100%; border-radius: 44px; overflow: hidden; clip-path: inset(0 round 44px); isolation: isolate; background: #fff; font-family: var(--text); color: #202124; }
.ha-status { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 0 34px; font-size: 15px; font-family: -apple-system, BlinkMacSystemFont, var(--text); font-weight: 600; letter-spacing: -0.01em; transition: color .4s; }
.ha-island { position: absolute; left: 50%; top: 11px; width: 96px; height: 28px; margin-left: -48px; border-radius: 16px; background: #000; }
.ha-icons { display: flex; gap: 4px; align-items: center; }
.ha-icons svg { display: block; fill: currentColor; }
.ha-scene { position: absolute; inset: 0; padding-top: 50px; background: #fff; transition: transform 1.1s cubic-bezier(.65,0,.35,1), opacity .7s; }
.sc-call, .sc-ai { transform: translateX(100%); }
.s-call .sc-maps { transform: translateX(-30%); opacity: 0; }
.s-call .sc-call { transform: none; }
.s-call .ha-status { color: #fff; }
/* Dark behind the call screen only, so no white shows at its edges; white again for the AI screen and the fade between loops. */
.s-call:not(.s-ai) .ha-screen { background: #0A0D14; }
.ha-reset .ha-scene, .ha-reset .ha-list li, .ha-reset .ha-pin, .ha-reset .ha-status { transition: none !important; }
.s-ai .sc-call { transform: translateX(-30%); opacity: 0; }
.s-ai .sc-ai { transform: none; }
.s-ai .ha-status { color: #202124; }
.ha-search { display: flex; align-items: center; gap: 9px; height: 42px; margin: 4px 14px 12px; padding: 0 16px; border-radius: 21px; box-shadow: 0 1px 6px rgba(32,33,36,.26); font-size: 14px; }
.ha-caret { width: 2px; height: 16px; background: #1A73E8; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ha-map { position: relative; height: 180px; background:
  linear-gradient(90deg, transparent 47%, #fff 47%, #fff 50%, transparent 50%),
  linear-gradient(0deg, transparent 56%, #fff 56%, #fff 60%, transparent 60%),
  linear-gradient(28deg, transparent 67%, #FDE293 67%, #FDE293 70%, transparent 70%),
  radial-gradient(circle at 20% 80%, #CDE7C1 0 18%, transparent 19%),
  linear-gradient(160deg, #E8F0E4 0 34%, #EEF1F5 34% 100%); }
.ha-pin { position: absolute; width: 20px; height: 20px; margin: -20px 0 0 -10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #EA4335; box-shadow: 0 2px 3px rgba(0,0,0,.25); }
.ha-pin::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.ha-pin.ha-you { background: #9AA0A6; z-index: 2; transition: background .4s, transform .4s; }
.s-ranked .ha-pin.ha-you { background: #1A73E8; transform: rotate(-45deg) scale(1.4); }
.ha-list { list-style: none; margin: 8px 0 0; padding: 0 14px; position: relative; height: 290px; }
.ha-list li { position: absolute; left: 14px; right: 14px; top: 0; height: 58px; padding: 10px 12px; border-bottom: 1px solid #ECEDEF; display: grid; align-content: center; gap: 3px; background: #fff; opacity: 0; transition: transform .9s cubic-bezier(.6,0,.2,1), background .4s, opacity .4s; }
.ha-list b { font-size: 14.5px; font-weight: 600; color: #1A0DAB; }
.ha-list span { font-size: 12px; color: #5F6368; }
.ha-list em, .ha-pick em { font-style: normal; color: #F29900; letter-spacing: 1px; }
.s-results .ha-list li { opacity: 1; }
.s-ranked .ha-list li[data-k="you"] { background: #E8F0FE; z-index: 2; border-radius: 10px; border-bottom-color: transparent; }
.s-ranked .ha-list li[data-k="you"] b { color: #1A73E8; }
.sc-call { background: linear-gradient(180deg, #2C3445 0%, #121826 100%); color: #fff; text-align: center; padding-top: 120px; }
.ha-call-top { margin: 0; font-size: 14px; color: rgba(255,255,255,.65); letter-spacing: .02em; }
.ha-call-name { margin: 8px 0 6px; font-size: 30px; font-weight: 500; letter-spacing: -.01em; }
.ha-call-from { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.7); }
.ha-call-btns { position: absolute; left: 0; right: 0; bottom: 70px; display: flex; justify-content: space-around; padding: 0 40px; }
.ha-call-btns span { width: 64px; height: 64px; border-radius: 50%; background: center / 28px no-repeat; }
.ha-call-btns .ha-decline { background-color: #FF3B30; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' transform='rotate(135 12 12)' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.ha-call-btns .ha-accept { background-color: #34C759; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.s-call .ha-accept { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,89,.5); } 50% { box-shadow: 0 0 0 14px rgba(52,199,89,0); } }
.sc-ai { background: #fff; padding: 64px 18px 0; }
.ha-ai-head { margin: 0 0 18px; text-align: center; font-size: 15px; font-weight: 600; }
.ha-bubble { margin: 0 0 16px auto; max-width: 80%; min-height: 20px; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: #F1F3F4; font-size: 14px; width: fit-content; }
.ha-bubble:empty { visibility: hidden; }
.ha-reply { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; font-size: 14px; }
.ha-reply p { margin: 0 0 10px; }
.s-answer .ha-reply { opacity: 1; transform: none; }
.ha-pick { display: grid; gap: 4px; padding: 14px; border: 1px solid #E3E6EA; border-radius: 16px; }
.ha-pick b { color: #1A73E8; font-size: 15px; }
.ha-pick span { font-size: 12.5px; color: #5F6368; }
.ha-pick .ha-pick-call { justify-self: start; margin-top: 6px; padding: 6px 16px; border-radius: 16px; background: #1A73E8; color: #fff; font-weight: 600; font-size: 13px; }
.s-out .ha-scene { opacity: 0; }
@media (max-width: 999px) { .hero-anim { height: 640px; } }
@media (max-width: 380px) { .ha-phone { transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .ha-caret { display: none; } .ha-list li, .ha-scene, .ha-reply, .ha-pin { transition: none; } .s-call .ha-accept { animation: none; } }

/* Trade ticker */
.marquee { overflow: hidden; border-bottom: 2px solid var(--rule); background: var(--paper); color: var(--ink); padding: 18px 0; }
.marquee-track { display: flex; gap: 0; width: max-content; animation: slide 50s linear infinite; }
.marquee span { font-family: var(--display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; padding: 0 28px; border-right: 1px solid var(--hair); white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { display: none; } }

/* The statement and numbers */
.light { padding: var(--s7) 0 var(--s6); }
.light .big { font-family: var(--display); font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3.4rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; color: var(--ink); max-width: 24ch; margin: 0; }
.light .big strong { color: var(--blue); font-weight: 600; }
.numbers { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: var(--s6); }
@media (min-width: 900px) { .numbers { grid-template-columns: repeat(4, 1fr); } }
.numbers > div { padding: var(--s4) var(--s3) var(--s4) 0; border-right: 1px solid var(--hair); }
.numbers > div:nth-child(2n) { padding-left: var(--s3); }
@media (min-width: 900px) { .numbers > div { padding: var(--s4) var(--s3); } .numbers > div:first-child { padding-left: 0; } .numbers > div:last-child { border-right: 0; } }
@media (max-width: 899px) { .numbers > div:nth-child(2n) { border-right: 0; } }
.numbers b { display: block; font-family: var(--display); font-size: clamp(3.2rem, 2rem + 4vw, 6rem); font-weight: 700; letter-spacing: -0.03em; line-height: .9; }
.numbers span { display: block; margin-top: 14px; color: var(--ink-2); max-width: 22ch; }

/* Sections */
.band { padding: var(--s7) 0; }
.band.alt { background: var(--paper-2); }
.section-title { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
@media (min-width: 960px) { .section-title { grid-template-columns: 1fr 1fr; align-items: end; column-gap: var(--s5); } }
.section-title h2 { max-width: 13ch; }
.section-title p { color: var(--ink-2); font-size: 1.15rem; max-width: 40ch; margin: 0; }

/* Outcomes grid: ruled cells */
/* What becoming the first call takes: four rows on the page's four column grid */
.four { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.four > li { display: grid; gap: var(--s2); align-items: center; }
@media (min-width: 960px) { .four > li { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s5); } .four > li > p { grid-column: span 2; } }
.four h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -0.025em; min-width: 0; }
.four p { color: var(--ink-2); margin: 0; max-width: 46ch; }
.four .found-list, .four .rank-bars, .four-stars { max-width: 300px; }
.four .chips { font-size: .95rem; row-gap: 6px; }
@media (min-width: 960px) and (max-width: 1379px) { .four .chips { flex-wrap: nowrap; font-size: .85rem; } .four .chips span { padding-right: 8px; margin-right: 8px; } .four .found-list li { font-size: .95rem; gap: 12px; } .four-stars { flex-wrap: wrap; row-gap: 0; } }
@media (min-width: 960px) and (max-width: 1099px) { .four .chips { font-size: .8rem; } .four .chips span { padding-right: 6px; margin-right: 6px; } }
.four .chips span { padding-right: 10px; margin-right: 10px; }
.four-stars { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); }
.four-stars span { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.four-stars em { font-style: normal; color: #F29900; font-size: 1.3rem; letter-spacing: 2px; }
.four-stars small { color: var(--mute); font-size: .95rem; white-space: nowrap; }
.four-stars small b { font-weight: inherit; font-variant-numeric: tabular-nums; display: inline-block; min-width: 3ch; text-align: right; }
/* The stars: grey underneath, gold on top, filled to the rating (--fill). */
.four-stars em { position: relative; color: var(--hair); }
.four-stars em::after { content: attr(data-stars); position: absolute; left: 0; top: 0; color: #F29900; white-space: nowrap; clip-path: inset(0 calc(100% - var(--fill)) 0 0); }
.chips { display: flex; flex-wrap: wrap; gap: 0; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.chips span { padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--hair); }
.chips span:last-child { border-right: 0; }
.rank-bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; border-bottom: 2px solid var(--ink); }
.rank-bars i { flex: 1; background: var(--ink); }
.rank-bars i:last-child { background: var(--blue); }
.found-list { list-style: none; padding: 0; margin: 0; max-width: 460px; }
.found-list li { display: flex; align-items: center; gap: 16px; padding: 10px 0; font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.found-list li b { font-size: 1rem; width: 32px; height: 32px; display: grid; flex: none; place-items: center; background: var(--blue); color: #fff; }
.found-list li span { white-space: nowrap; }
.found-list li.dim b, .found-list li.dim span { opacity: .45; }

/* How it works */
.blueband { background: var(--paper-2); color: var(--ink); padding: var(--s7) 0; }
.blueband h2 { max-width: 12ch; }
.blueband .sub { color: var(--ink-2); font-size: 1.15rem; max-width: 42ch; margin: var(--s3) 0 var(--s6); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(3, 1fr); } }
.timeline li { padding: var(--s3) 0; }
@media (min-width: 900px) { .timeline li { border-right: 1px solid var(--hair); padding: var(--s2) var(--s4); } .timeline li:first-child { padding-left: 0; } .timeline li:last-child { border-right: 0; } }
.timeline .when { display: block; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 1.8vw, 3.2rem); letter-spacing: -0.025em; line-height: 1; margin-bottom: var(--s4); color: var(--blue); }
.timeline h3 { margin-bottom: 10px; }
.timeline p { color: var(--ink-2); margin: 0; }
.blueband .btn { margin-top: var(--s6); }
.blueband .btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Trades: numbered index */
/* Industries: a directory grouped by audience, each group heading linking to its audience page */
.dir { display: grid; gap: var(--s5); }
@media (min-width: 960px) { .dir { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s5); } }
.dir h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; margin: -10px 0 var(--s1); color: var(--mute); }
.dir h3 a { display: inline-block; padding: 10px 0; color: inherit; text-decoration: none; }
.dir h3 a:hover { color: var(--blue); }
.dir ul { list-style: none; margin: 0; padding: 0; }
.dir li a { display: block; padding: 7px 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); letter-spacing: -0.015em; color: var(--ink); text-decoration: none; }
.dir li a:hover { color: var(--blue); }

/* Founder */
.f-split { display: grid; gap: var(--s5); }
@media (min-width: 960px) { .f-split { grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: start; } }
.f-photo { margin: 0; border: 2px solid var(--ink); }
.f-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.f-photo figcaption { padding: 14px 16px; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.f-photo figcaption b { font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.f-photo figcaption span { color: var(--mute); }
.f-copy h2 { max-width: 14ch; margin-bottom: var(--s4); }
.f-copy > p { font-size: 1.2rem; color: var(--ink-2); max-width: 46ch; margin: 0 0 var(--s5); }
.promise { list-style: none; padding: 0; margin: 0; }
.promise li { padding: 12px 0; }
.promise li > div { display: grid; gap: 4px; }
@media (min-width: 700px) { .promise li > div { grid-template-columns: minmax(180px, 2fr) 3fr; gap: var(--s3); align-items: baseline; } }
.promise strong { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; }
.promise span { color: var(--ink-2); }

/* Link rows */
/* Guide picks: title and one line of context, in two columns */
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 760px) { .picks { grid-template-columns: 1fr 1fr; column-gap: var(--s5); } }
.picks a { display: grid; gap: 6px; text-decoration: none; color: var(--ink); }
.picks strong { font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + .4vw, 1.45rem); letter-spacing: -0.015em; line-height: 1.2; }
.picks a:hover strong { color: var(--blue); }
.picks span { color: var(--ink-2); }
.picks-all { margin: var(--s5) 0 0; font-weight: 600; }

/* FAQ */
.faq { margin-top: var(--s6); }
.faq h2 { margin-bottom: var(--s4); font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 22px 52px 22px 0; font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--text); font-weight: 400; font-size: 1.9rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 24px; color: var(--ink-2); max-width: 62ch; }
.faq-split { display: grid; gap: var(--s4); }
.faq-split .faq { margin-top: 0; }
@media (min-width: 960px) { .faq-split { grid-template-columns: 5fr 7fr; gap: var(--s6); } }
.more { margin: var(--s4) 0 0; font-weight: 600; }

/* Closing call to action */
.cta { background: var(--blue); color: #fff; }
.cta .wrap { padding-top: var(--s7); padding-bottom: var(--s7); }
.cta-panel, .cta-bright { display: grid; gap: var(--s4); }
@media (min-width: 960px) { .cta-panel, .cta-bright { grid-template-columns: 7fr 5fr; align-items: end; } }
.cta h2 { color: #fff; max-width: 12ch; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6rem); }
.cta p { color: rgba(255,255,255,.88); font-size: 1.15rem; margin: 0 0 var(--s4); max-width: 42ch; }
.cta .btn { background: #fff; color: var(--ink); border-color: #fff; }
.cta .btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ===== Inner pages ===== */
.page-head { padding: var(--s5) 0 var(--s4); }
.page-head h1 { font-size: clamp(2.6rem, 1.3rem + 5vw, 6.4rem); max-width: 14ch; }
.lead { font-size: clamp(1.12rem, 1rem + .45vw, 1.35rem); color: var(--ink-2); max-width: 52ch; margin: var(--s4) 0 0; line-height: 1.5; }
.byline { color: var(--mute); font-size: .95rem; margin: var(--s3) 0 0; }

.prose { padding-top: var(--s5); padding-bottom: var(--s6); }
.prose > .faq:first-child { margin-top: 0; }
.prose > * { max-width: 68ch; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: var(--s6) 0 var(--s3); font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: var(--s5) 0 var(--s1); }
.prose h2[id] { scroll-margin-top: 96px; }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--s3); color: var(--ink-2); }
.prose li { margin-bottom: 10px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--s2) 0 var(--s4); font-size: .97rem; border-top: 2px solid var(--rule); }
.prose th, .prose td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose th { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.prose blockquote { margin: 0 0 var(--s3); padding: 0 0 0 var(--s3); border-left: 4px solid var(--blue); }
.prose blockquote p { color: var(--ink); }

.has-side { display: block; }
.side { display: none; }
@media (min-width: 1080px) {
  .has-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s6); align-items: start; }
  .side { display: block; position: sticky; top: 100px; padding-top: var(--s5); }
}
.side-cta { border: 2px solid var(--ink); padding: var(--s3); margin-bottom: var(--s4); }
.side-cta p { color: var(--ink-2); font-size: .95rem; margin: 0 0 var(--s3); }
.side-h { color: var(--ink) !important; font-family: var(--display); font-weight: 700; font-size: 1.25rem !important; margin: 0 0 8px !important; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 6px 0; color: var(--ink-2); text-decoration: none; font-size: .93rem; line-height: 1.35; }
.toc a:hover { color: var(--blue); }

.index { list-style: none; padding: 0; margin: var(--s5) 0 0; max-width: none !important; display: grid; }
@media (min-width: 760px) { .index { grid-template-columns: 1fr 1fr; column-gap: var(--s5); } }
.index-group { margin: var(--s6) 0 0 !important; }
.index-group + .index { margin-top: var(--s3); }
.index li { margin: 0; }
.index a { display: grid; gap: 6px; padding: 16px 0; text-decoration: none; color: var(--ink); }
.index a:hover strong { color: var(--blue); }
.index strong { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.05; }
.index span { color: var(--ink-2); font-size: .98rem; }

.related { margin-top: var(--s6); }
.related h2 { font-size: 1.2rem !important; border: 0 !important; padding: 0 !important; margin: 0 0 var(--s2) !important; }
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.related li { margin: 0; }
.related a { display: inline-block; padding: 8px 14px; border: 1px solid var(--ink); text-decoration: none; color: var(--ink); font-weight: 550; font-size: .93rem; }
.related a:hover { background: var(--ink); color: var(--paper); }

.book-card { display: grid; grid-template-columns: 96px 1fr; gap: var(--s3); align-items: start; border: 2px solid var(--ink); padding: var(--s4); margin-bottom: var(--s5); max-width: 640px !important; background: var(--paper-2); }
.book-card img { width: 96px; height: 96px; object-fit: cover; filter: grayscale(1); }
.book-who { font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--ink) !important; margin: 0 0 var(--s1) !important; }
.book-facts { list-style: none; padding: 0 !important; margin: 0 0 var(--s3) !important; }
.book-facts li { margin: 0 0 6px; padding-left: 22px; position: relative; color: var(--ink-2); }
.book-facts li::before { content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 2px; background: var(--mute); }
@media (max-width: 520px) { .book-card { grid-template-columns: 1fr; } .book-card .btn { width: 100%; } }

/* Footer */
.foot { background: var(--paper-2); color: var(--ink-2); padding: var(--s6) 0 var(--s5); font-size: .95rem; }
.foot-cols { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .foot-cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot .logo { margin-bottom: var(--s2); }
.foot h2 { font-family: var(--display); font-size: 1.05rem; color: var(--ink); margin-bottom: var(--s2); font-weight: 700; letter-spacing: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 10px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--blue); }
.foot p { max-width: 34ch; }
.foot .legal { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: var(--s6) 0 0; padding-top: var(--s3); border-top: 1px solid var(--hair); color: var(--mute); font-size: .85rem; line-height: 1.6; }

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .js .reveal.in { opacity: 1; transform: none; }
  /* The four rows each play their picture once as they come into view. Found: Your Business climbs from third to
     first. Chosen: the stars fill and the count runs up (count in REVEAL_JS). Recommended: the AI names light in turn.
     Measured: the bars grow. Transforms, opacity and clip-path only, so nothing shifts the layout. */
  .js .four .found-list span { transition: transform .8s cubic-bezier(.2,.8,.2,1) .35s; }
  .js .four .found-list li:first-child span { position: relative; z-index: 1; background: var(--paper); padding-right: 12px; }
  .js .four > li:not(.in) .found-list li:first-child span { transform: translateY(104px); }
  .js .four > li:not(.in) .found-list li.dim span { transform: translateY(-52px); }
  .js .four-stars em::after { transition: clip-path 1s ease .35s; }
  .js .four > li:not(.in) .four-stars em::after { clip-path: inset(0 100% 0 0); }
  .js .four .chips span { transition: opacity .4s ease; }
  .js .four .chips span:nth-child(1) { transition-delay: .35s; }
  .js .four .chips span:nth-child(2) { transition-delay: .6s; }
  .js .four .chips span:nth-child(3) { transition-delay: .85s; }
  .js .four > li:not(.in) .chips span { opacity: .15; }
  .js .four .rank-bars i { transform-origin: bottom; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
  .js .four .rank-bars i:nth-child(1) { transition-delay: .3s; }
  .js .four .rank-bars i:nth-child(2) { transition-delay: .38s; }
  .js .four .rank-bars i:nth-child(3) { transition-delay: .46s; }
  .js .four .rank-bars i:nth-child(4) { transition-delay: .54s; }
  .js .four .rank-bars i:nth-child(5) { transition-delay: .62s; }
  .js .four .rank-bars i:nth-child(6) { transition-delay: .7s; }
  .js .four .rank-bars i:nth-child(7) { transition-delay: .78s; }
  .js .four > li:not(.in) .rank-bars i { transform: scaleY(0); }
}

/* Top level pages have no breadcrumb, so their heading needs the room it used to give. */
main > .page-head:first-child { padding-top: var(--s6); }

/* About: founder block */
.founder { display: grid; gap: var(--s4); align-items: start; padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--hair); max-width: none !important; }
@media (min-width: 720px) { .founder { grid-template-columns: 220px 1fr; } }
.founder img { width: 220px; height: 220px; object-fit: cover; filter: grayscale(1) contrast(1.05); border: 2px solid var(--ink); }
.founder p { margin: 0 0 var(--s2); color: var(--ink-2); }
.founder p:first-child strong { font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--ink); }

/* Header action: the audit in blue */
.top .btn-sm { background: var(--blue); border-color: var(--blue); color: #fff; }
.top .btn-sm:hover { background: var(--ink); border-color: var(--ink); }

/* Hero with the animation beside it: a smaller headline, the lead and buttons stacked under it. */
@media (min-width: 1000px) {
  /* The hero fills the first screen, with the industry strip resting on the fold. */
  .h-hero:has(.hero-anim, .hero-media) { display: grid; align-content: center; min-height: min(calc(100svh - 170px), 920px); padding: var(--s5) 0; }
  .h-hero .wrap:has(.hero-anim, .hero-media) { align-items: center; gap: var(--s6); }
  .h-hero .wrap:has(.hero-anim, .hero-media) h1 { font-size: clamp(3rem, 1.6rem + 2.6vw, 4.8rem); max-width: 15ch; }
  .h-hero .wrap:has(.hero-anim, .hero-media) .hero-low { grid-template-columns: 1fr; margin-top: 0; padding: var(--s4) 0 var(--s6); }
  .h-hero .wrap:has(.hero-anim, .hero-media) :is(.hero-media, .hero-anim) { margin: 8px 0 var(--s5); }
}

/* The sticky sidebar stops short of the closing band instead of running into it. */
@media (min-width: 1080px) { .has-side { padding-bottom: var(--s6); } .side { max-height: calc(100vh - 120px); overflow: auto; } }
@media (max-width: 760px) { .foot .legal { white-space: normal; } }
@media (max-width: 999px) { .h-hero .hero-anim { margin-bottom: var(--s5); } }

/* No line left holding a single word: headings balance their lines, paragraphs avoid a lone last word. */
h1, h2, h3, .light .big, .cta h2 { text-wrap: balance; }
p, li, .lead, summary, blockquote { text-wrap: pretty; }

/* Free tools */
.tool { max-width: 720px; }
.tool-form, .tool-out { display: grid; gap: 10px; }
.tool label { font-weight: 600; margin-top: var(--s2); }
.tool label span { font-weight: 400; color: var(--mute); }
.tool input, .tool textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 2px solid var(--ink); padding: 14px 16px; border-radius: 0; }
.tool textarea { resize: vertical; line-height: 1.5; }
.tool input:focus, .tool textarea:focus { outline: 3px solid var(--blue); outline-offset: 2px; }
.tool input[aria-invalid="true"] { border-color: #B42318; }
.tool .btn { justify-self: start; margin-top: var(--s2); }
.tool-hint { color: var(--mute); font-size: .95rem; margin: 0; }
.tool-error { color: #B42318; font-weight: 600; margin: var(--s2) 0 0; }
.tool-note { margin: 0; padding: 12px 16px; background: var(--paper-2); color: var(--ink); font-size: .95rem; }
.tool-out { margin-top: var(--s6); }
.tool-out h2 { margin: var(--s4) 0 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.tool-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: stretch; }
.tool-row input { flex: 1 1 260px; }
.tool-row .btn { margin-top: 0; }
.tool-qr { display: grid; gap: var(--s3); align-items: start; }
@media (min-width: 640px) { .tool-qr { grid-template-columns: 220px 1fr; } }
.tool-qr #rl-qr { background: #fff; border: 2px solid var(--ink); padding: 10px; }
.tool-qr #rl-qr svg { display: block; width: 100%; height: auto; }
.tool-qr p { margin: 0 0 var(--s2); color: var(--ink-2); }

/* Sample report */
.sample-note { background: var(--paper-2); padding: var(--s2) var(--s3); border-left: 4px solid var(--blue); margin: 0 0 var(--s4); }
.grid-report { display: grid; gap: var(--s4); margin: var(--s3) 0; }
@media (min-width: 640px) { .grid-report { grid-template-columns: 1fr 1fr; } }
.grid-report figure { margin: 0; }
.grid-report figcaption { font-weight: 600; margin-bottom: var(--s1); }
.rank-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 340px; }
.rank-grid span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-family: var(--display); font-weight: 700; font-size: clamp(.75rem, .6rem + .4vw, .9rem); color: #fff; }
.rank-grid .g { background: #188038; }
.rank-grid .a { background: #B06000; }
.rank-grid .r { background: #C5221F; }

/* Where we work map */
.where { display: grid; gap: var(--s4); margin-top: var(--s6); align-items: center; }
@media (min-width: 960px) { .where { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s5); } .where-fig { grid-column: span 3; } }
.where h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -0.025em; margin: 0 0 var(--s2); }
.where-copy p { color: var(--ink-2); margin: 0 0 var(--s2); }
.where-copy ul { list-style: none; margin: 0; padding: 0; }
.where-copy li a { display: inline-block; padding: 8px 0; font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.where-copy li a:hover { color: var(--blue); }
.where-fig { margin: 0; }
.where-map { display: block; width: 100%; height: auto; }
.where-map .m-other { fill: #E3DFD4; stroke: var(--paper); stroke-width: 1.5; }
.where-map .m-ours { fill: #C9D5F8; stroke: var(--paper); stroke-width: 1.5; }
.where-map .m-metro circle { fill: var(--blue); stroke: #fff; stroke-width: 2; }
.where-map .m-metro text { font-family: var(--display); font-weight: 600; font-size: 13px; fill: var(--ink); paint-order: stroke; stroke: rgba(243,241,235,.9); stroke-width: 3px; }

/* On phones the map keeps its dots and the metro names move into a readable list below it. */
.where-metros { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 639px) {
  .where-map .m-metro text { display: none; }
  .where-map .m-metro circle { r: 7; }
  .where-metros { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s3); }
  .where-metros a { display: block; padding: 8px 0; font-weight: 600; color: var(--ink); text-decoration: none; }
}
.foot .foot-h2-gap { margin-top: var(--s4); }