/* Inner pages (service pages first): the homepage's system. Espresso / bone / gold, Source Serif 4 + Inter + IBM Plex Mono,
   sections alternate dark and light. Hover rule: a hit area never moves; only what is inside it does. */
@font-face { font-family: "Source Serif 4"; src: url(fonts/SourceSerif4-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/Inter-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/Inter-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(brandfonts/IBMPlexMono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(brandfonts/IBMPlexMono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
:root { --espresso: #17110E; --bone: #F1E9DE; --gold: #CDA85F; --gold-deep: #A9853D; --paper: #FAFAF8;
  --serif: "Source Serif 4", Georgia, serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1); --px: clamp(20px, 6vw, 112px); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--espresso); color: var(--bone); font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 99px; background: var(--gold); color: var(--espresso); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* buttons (same as the homepage: gold turns black on hover, outline turns gold) */
.btn { --x: 50%; --y: 50%; position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: color .3s var(--ease), border-color .3s var(--ease); }
.btn::before { content: ""; position: absolute; z-index: -1; left: var(--x); top: var(--y); width: 260%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform .5s var(--ease); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .35s var(--ease); }
.btn-gold { background: var(--gold); color: var(--espresso); box-shadow: inset 0 0 0 1px #B08D45; } .btn-gold::before { background: var(--espresso); }
.btn-line { color: var(--ink); border: 1px solid rgba(205,168,95,.55); } .btn-line::before { background: var(--gold); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .9375rem; }
@media (hover: hover) { .btn:hover::before { transform: translate(-50%, -50%) scale(1); } .btn-gold:hover { color: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(205,168,95,.16) !important; } .btn-line:hover { color: var(--espresso); border-color: var(--gold); } .btn:hover svg { transform: translateX(3px); } }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* header: the homepage bar, kept on screen; a full-screen menu on phones */
.sh { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; height: 72px; padding: 0 var(--px); background: rgba(23,17,14,.96); border-bottom: 1px solid rgba(205,168,95,.14); }
.sh-logo { display: inline-flex; align-items: center; min-height: 44px; } .sh-logo img { height: 22px; width: auto; }
.sh-nav { display: flex; gap: 28px; margin-left: auto; font-size: .9375rem; }
.sh-nav a { position: relative; padding: 10px 0; text-decoration: none; opacity: .82; transition: opacity .3s; }
.sh-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.sh-nav a[aria-current="page"] { opacity: 1; } .sh-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .sh-nav a:hover { opacity: 1; } .sh-nav a:hover::after { transform: scaleX(1); } }
.sh-menu { display: none; width: 44px; height: 44px; margin-left: 4px; border: 1px solid rgba(205,168,95,.4); border-radius: 50%; background: none; cursor: pointer; position: relative; }
.sh-menu i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--bone); transition: transform .35s var(--ease); }
.sh-menu i:first-of-type { top: 17px; } .sh-menu i:last-of-type { top: 25px; }
.sh-menu[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); } .sh-menu[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
.sh-sheet[hidden] { display: none; }
.sh-sheet { position: fixed; inset: 72px 0 0; z-index: 49; display: flex; flex-direction: column; gap: 28px; padding: 32px var(--px) 40px; background: var(--espresso); overflow-y: auto; }
.sh-sheet nav { display: grid; }
.sh-sheet nav a { padding: 14px 0; border-bottom: 1px solid rgba(205,168,95,.16); font: 700 1.6rem/1.2 var(--serif); text-decoration: none; }
.sh-sheet .btn { align-self: flex-start; }
/* Services opens the list of services (12 Oct). The open area includes the gap under the link, so moving down never closes it */
.dd { position: relative; display: flex; }
.dd > a { display: inline-flex; align-items: center; gap: 6px; }
.dd > a svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s var(--ease); }
.dd-menu { position: absolute; left: -22px; top: 100%; z-index: 60; width: 330px; padding-top: 12px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.dd-menu ul { list-style: none; margin: 0; padding: 10px; border: 1px solid rgba(205,168,95,.28); border-bottom: 0; border-radius: 18px 18px 0 0; background: rgba(23,17,14,.98); box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.sh-nav .dd-menu a { display: block; padding: 10px 14px; border-radius: 10px; opacity: 1; color: rgba(241,233,222,.86); transition: background .25s, color .25s; }
.sh-nav .dd-menu a::after { display: none; }
.sh-nav .dd-menu ul a:hover, .sh-nav .dd-menu ul a:focus-visible { background: var(--gold); color: var(--espresso); }
.sh-nav .dd-menu .dd-all { padding: 13px 24px; border: 1px solid rgba(205,168,95,.28); border-top-color: rgba(205,168,95,.16); border-radius: 0 0 18px 18px; background: rgba(23,17,14,.98); color: var(--gold); font-weight: 600; }
.sh-nav .dd-menu .dd-all:hover { background: #201915; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd:hover > a svg, .dd:focus-within > a svg { transform: rotate(180deg); }
.sh-sheet .sh-sub { list-style: none; margin: 0; padding: 4px 0 10px 16px; border-bottom: 1px solid rgba(205,168,95,.16); }
.sh-sheet .sh-sub a { display: block; padding: 9px 0; border: 0; font: 400 1rem/1.3 var(--sans); color: rgba(241,233,222,.75); }
@media (max-width: 860px) { .sh-nav, .sh-cta { display: none; } .sh-menu { display: block; margin-left: auto; } }

/* sections and tones */
.sv { --pad: clamp(84px, 13vh, 150px); position: relative; isolation: isolate; overflow-x: clip; padding: var(--pad) var(--px); background: var(--bg); color: var(--ink); }
.sv[data-tone="dark"] { --bg: #17110E; --ink: #F1E9DE; --muted: #B9AA98; --accent: #CDA85F; --accent-text: #CDA85F; --rule: rgba(205,168,95,.22); --line: rgba(241,233,222,.12); --panel: #201915; --panel2: #2A211B; --grid: rgba(205,168,95,.06); }
.sv[data-tone="light"] { --bg: #FAFAF8; --ink: #17110E; --muted: #5F5A55; --accent: #A9853D; --accent-text: #7A5A16; --rule: rgba(23,17,14,.14); --line: rgba(23,17,14,.1); --panel: #FFFFFF; --panel2: #F3EFE8; --grid: rgba(23,17,14,.05); }
.sv::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 100%); }
.sv-wrap { max-width: 1320px; margin: 0 auto; }
.sv h2 { margin: 0 0 clamp(22px, 3.4vh, 34px); max-width: 17em; font: 700 clamp(2rem, 4.2vw, 3.6rem)/1.06 var(--serif); letter-spacing: -0.025em; text-wrap: balance; }
.sv h3 { margin: 0 0 12px; font: 700 1.25rem/1.25 var(--serif); letter-spacing: -0.01em; }
.sv p { margin: 0 0 1em; }
.lead { max-width: 40em; color: var(--ink); opacity: .86; font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.note { max-width: 52em; margin-top: 18px !important; color: var(--muted); font-size: .875rem; }
.direct { max-width: 46em; margin-top: 26px !important; padding-left: 18px; border-left: 2px solid var(--accent); font-size: 1.05rem; }
.micro { margin-top: 14px !important; color: var(--muted); font-size: .9rem; }
.eb { margin: 0 0 16px !important; font: 600 .75rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.sv-hero .eb { margin-bottom: 14px !important; }
.fq .eb { color: #7A5A16; }
.fq[data-tone="dark"] .eb, .sv[data-tone="dark"] .eb { color: #CDA85F; }
.kicker { margin: 0 0 10px !important; font: 600 .82rem/1 var(--mono); color: var(--accent-text); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--accent); background: radial-gradient(circle, var(--accent) 0 3px, transparent 3.5px); }
[data-rv] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.rv-in [data-rv], [data-rv].rv-in { opacity: 1; transform: none; }

/* 1 hero: the attribution sum that does not add up */
.sv-hero { padding-top: clamp(28px, 4.5vh, 60px); padding-bottom: clamp(40px, 6vh, 70px); }
.pst { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 48px; margin-top: clamp(34px, 5vh, 56px); padding-top: 26px; border-top: 1px solid var(--rule); }
.pst ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 44px; }
.pst li { display: flex; align-items: baseline; gap: 10px; }
.pst b { font: 700 clamp(1.5rem, 2.2vw, 1.9rem)/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pst span { font: 400 .75rem/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pst p { margin: 0 !important; color: var(--muted); font-size: .9rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; font-size: .875rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a { text-decoration: none; } @media (hover: hover) { .crumbs a:hover { color: var(--gold); } }
.sv-hero h1 { margin: 0 0 20px; font: 700 clamp(2.2rem, 4.1vw, 4rem)/1.04 var(--serif); letter-spacing: -0.03em; text-wrap: balance; }
.answer { max-width: 38em; font-size: clamp(1rem, 1.15vw, 1.12rem); opacity: .9; margin-bottom: 26px !important; }
.at { margin: 0; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.at figcaption { font: 600 .82rem/1.3 var(--mono); color: var(--accent-text); margin-bottom: 18px; }
.at-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.at-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l n" "b b"; gap: 6px 12px; align-items: baseline; }
.at-l { grid-area: l; font-size: .9rem; color: var(--muted); } .at-n { grid-area: n; font: 700 1.5rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.at-bar { grid-area: b; position: relative; height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.at-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) / 329 * 100%); border-radius: inherit; background: var(--bone); opacity: .85; transform: scaleX(var(--k, 0)); transform-origin: left; transition: transform 1s var(--ease) calc(.25s + var(--i) * .35s); }
.at-sum .at-bar i { background: var(--gold); opacity: 1; }
.at-sum .at-bar em { position: absolute; top: 0; bottom: 0; right: 0; width: calc(var(--g) / 329 * 100%); background: repeating-linear-gradient(135deg, #17110E 0 5px, transparent 5px 10px); opacity: 0; transition: opacity .6s var(--ease) 2s; }
.at-real .at-bar i { background: var(--gold-deep); }
.at.go .at-bar i { --k: 1; } .at.go .at-sum .at-bar em { opacity: .55; }
.at-row.at-sum, .at-row.at-real { padding-top: 14px; border-top: 1px dashed var(--rule); }
.at-gap { margin: 18px 0 0 !important; font-size: .95rem; } .at-gap b { color: var(--gold); font: 700 1.6rem/1 var(--serif); margin-right: 6px; }
.at .note { margin-top: 10px !important; font-size: .8rem; }
@media (hover: hover) { .at-row:hover .at-l { color: var(--ink); } .at-row:hover .at-bar i { filter: brightness(1.12); } }

/* 2 fit / not a fit */
.fit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.fit ul { list-style: none; margin: 0; padding: 0; display: grid; }
.fit li { position: relative; margin: 0 -14px; padding: 16px 14px 16px 52px; border-radius: 4px; border-top: 1px solid var(--line); transition: color .3s; }
.fit li::before { content: ""; position: absolute; left: 14px; top: 19px; width: 22px; height: 22px; border-radius: 50%; }
.fit.yes li::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%23FAFAF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.fit.no li::before { border: 1.5px solid var(--muted); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7.5 7.5l7 7M14.5 7.5l-7 7' fill='none' stroke='%235F5A55' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.fit.no li { color: var(--muted); }
.fit { --ok: #2E7D4F; --ok-bg: rgba(46,125,79,.08); --bad: #B3382C; --bad-bg: rgba(179,56,44,.07); }
.sv[data-tone="dark"] .fit { --ok: #5FB98A; --ok-bg: rgba(95,185,138,.1); --bad: #E0705F; --bad-bg: rgba(224,112,95,.1); }
.fit li { transition: color .3s, background-color .3s; }
.fit li::before { transition: background-color .3s, border-color .3s; }
.fit li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.fit.yes li::after { background: var(--ok); } .fit.no li::after { background: var(--bad); }
@media (hover: hover) {
  .fit li:hover::after { transform: scaleX(1); }
  .fit.yes li:hover { background-color: var(--ok-bg); color: var(--ok); } .fit.yes li:hover strong { color: var(--ok); } .fit.yes li:hover::before { background-color: var(--ok); }
  .fit.no li:hover { background-color: var(--bad-bg); color: var(--bad); } .fit.no li:hover::before { border-color: var(--bad); background-color: rgba(179,56,44,.12); }
}

/* 3 problem + the four questions (a self-check) */
.prob-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.prob-h { position: sticky; top: 110px; }
.prob-text p { font-size: clamp(1.05rem, 1.25vw, 1.15rem); opacity: .9; max-width: 38em; }
.diag { margin-top: clamp(56px, 9vh, 100px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--rule); }
.diag h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: 22em; }
.diag-intro { color: var(--muted); max-width: 44em; }
.dqs { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dq { width: 100%; height: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .3s, background .3s; }
.dq-n { font: 600 .82rem/1.6 var(--mono); color: var(--accent-text); }
.dq-q { font: 700 1.08rem/1.35 var(--serif); } .dq-q small { display: block; margin-top: 6px; font: 400 .875rem/1.4 var(--sans); color: var(--muted); }
.dq-t { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--rule); transition: background .3s, border-color .3s; }
.dq[aria-pressed="true"] { border-color: var(--gold); background: var(--panel2); }
.dq[aria-pressed="true"] .dq-t { border-color: var(--gold); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13.5l3.5 3.5 7-7.5' fill='none' stroke='%2317110E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
@media (hover: hover) { .dq:hover { border-color: rgba(205,168,95,.55); } }
.diag-score { margin-top: 18px !important; color: var(--muted); } .diag-score b { color: var(--gold); font: 700 1.4rem/1 var(--serif); }

/* 4 the funnel: a gold stream that narrows, with the losses dropping off it */
/* funnel: one funnel, two views. The switch moves the brackets and the emphasis; each stage reads out what was lost before it */
.fv { margin-top: clamp(28px, 4.5vh, 46px); --ch: clamp(210px, 25vw, 330px); --clay: #8E3B2A; }
.fv-switch { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); }
.fv-switch button { position: relative; z-index: 1; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 .9375rem/1.2 var(--sans); cursor: pointer; transition: color .35s var(--ease); }
.fv-switch button[aria-pressed="true"] { color: var(--bone); }
@media (hover: hover) { .fv-switch button[aria-pressed="false"]:hover { color: var(--ink); } }
.fv-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--w, 50%); transform: translateX(var(--x, 4px)); border-radius: 999px; background: var(--espresso); transition: transform .5s var(--ease), width .5s var(--ease); }
.fv-cap { display: none; }
.fv-brk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 22px); height: 44px; margin-top: clamp(26px, 4vh, 40px); font: 600 .8rem/1.25 var(--mono); }
.fv-brk span { padding-top: 10px; border-top: 1.5px solid currentColor; transform-origin: left; transition: opacity .45s var(--ease), transform .55s var(--ease); }
.fv-brk .b1 { grid-column: 1 / 5; color: var(--accent-text); } .fv-brk .b2 { grid-column: 5; color: var(--ink); border-top-color: var(--accent); }
.fv[data-view="platform"] .b2, .fv[data-view="business"] .b1 { opacity: 0; transform: scaleX(.4); }
.fv-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 22px); }
.fv-b { width: 100%; height: 100%; display: grid; grid-template-rows: var(--ch) auto auto auto; align-content: start; gap: 2px; padding: 0 0 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.fv-bar { position: relative; display: block; margin-bottom: 14px; border-bottom: 1.5px solid var(--rule); }
.fv-bar i { position: absolute; left: 0; right: 16%; bottom: 0; border-radius: 6px 6px 0 0; transform-origin: bottom; }
.fv-keep { height: calc(var(--h) * 1%); background: linear-gradient(180deg, #D8B66F, var(--gold-deep)); transform: scaleY(var(--k, 0)); transition: transform .9s var(--ease) calc(var(--i) * .11s), opacity .45s var(--ease), filter .3s; }
.fv-lost { bottom: calc(var(--h) * 1%) !important; height: calc((var(--p) - var(--h)) * 1%); border: 1px dashed rgba(142,59,42,.5); border-bottom: 0; background: repeating-linear-gradient(135deg, rgba(142,59,42,.2) 0 2px, transparent 2px 8px); opacity: 0; transition: opacity .5s var(--ease); }
.fv-c:first-child .fv-lost { display: none; }
.fv-tag { position: absolute; left: 0; bottom: calc(var(--p) * 1% + 8px); font: 600 .8rem/1 var(--mono); font-style: normal; color: var(--clay); opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.fv-n { font: 700 clamp(1.25rem, 2.2vw, 2rem)/1.05 var(--serif); font-variant-numeric: tabular-nums; transition: color .3s; }
.fv-nm { font-weight: 600; font-size: .9375rem; } .fv-rt { color: var(--muted); font-size: .82rem; }
.fv-lk { display: none; }
.fv.go .fv-keep { --k: 1; }
/* platform view: the customer stage is out of the platform's sight; leads is where it aims */
.fv[data-view="platform"] .fv-c:nth-child(5) .fv-keep { opacity: .18; }
.fv[data-view="platform"] .fv-c:nth-child(5) .fv-n { color: var(--muted); }
/* business view: the losses show, the stages before customers step back */
.fv[data-view="business"] .fv-lost, .fv[data-view="business"] .fv-tag { opacity: 1; transform: none; }
.fv[data-view="business"] .fv-c:not(:nth-child(5)) .fv-keep { opacity: .42; }
.fv-c.sel .fv-n { color: var(--accent-text); }
.fv-bar::after { content: ""; position: absolute; left: 0; right: 16%; bottom: -2px; height: 3px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.fv-c.sel .fv-bar::after { transform: scaleX(1); }
@media (hover: hover) { .fv-b:hover .fv-keep { filter: brightness(1.1) saturate(1.1); } .fv-b:hover .fv-nm { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } }
.fv-read { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 24px; align-items: center; min-height: 112px; margin-top: 22px; padding: 22px 28px; border-radius: 18px; background: var(--espresso); color: var(--bone); }
.fv-rn { grid-row: span 2; font: 700 clamp(2.3rem, 4.2vw, 3.5rem)/1 var(--serif); color: var(--gold); font-variant-numeric: tabular-nums; }
.fv-rh { margin: 0 !important; font: 700 1.2rem/1.3 var(--serif); } .fv-rh small { margin-left: 8px; font: 400 .9rem/1 var(--sans); color: #B9AA98; }
.fv-rl { margin: 0 !important; color: #D9CDBE; } .fv-rl em, .fv-lk em { font-style: normal; font-weight: 600; color: #E59A7F; }
.fv-read.swap > * { animation: fvIn .4s var(--ease); }
@keyframes fvIn { from { opacity: 0; transform: translateY(6px); } }

/* what's included: the heading and the list stay on the left; each item takes the screen in turn on the right (12 Oct) */
.inc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.inc-side { position: sticky; top: 104px; }
.inc-nav { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: n; }
.inc-nav a { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--rule); color: var(--muted); text-decoration: none; font: 700 1.06rem/1.3 var(--serif); transition: color .35s; }
.inc-nav a::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.inc-nav svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.inc-nav a.on { color: var(--ink); } .inc-nav a.on svg { stroke: var(--accent); } .inc-nav a.on::before { transform: scaleX(1); }
@media (hover: hover) { .inc-nav a:hover { color: var(--ink); } }
.inc-list { display: grid; }
.inc-it { min-height: 62vh; display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
.inc-it:last-child { border-bottom: 0; }
.inc-in { padding: 40px 0; opacity: .28; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.inc-it.on .inc-in { opacity: 1; transform: none; }
.inc-k { display: block; margin-bottom: 22px; font: 600 .78rem/1 var(--mono); color: var(--accent-text); letter-spacing: .12em; }
.inc-in svg { width: 56px; height: 56px; margin-bottom: 22px; fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.inc-in h3 { margin: 0 0 16px; font: 700 clamp(1.7rem, 3vw, 2.6rem)/1.1 var(--serif); letter-spacing: -0.02em; }
.inc-in p { margin: 0 !important; max-width: 32em; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.65; color: var(--ink); opacity: .86; }

/* 6 how we work: a line fills down the six steps as you read */
.proc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.proc-head { position: sticky; top: 110px; } .proc-head p { color: var(--muted); }
.pss { position: relative; list-style: none; margin: 0; padding: 0 0 0 64px; display: grid; gap: clamp(30px, 5vh, 46px); }
.ps-line { position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.ps-line b { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleY(var(--p, 0)); transform-origin: top; }
.ps { position: relative; }
.ps-n { position: absolute; left: -64px; top: -2px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--bg); font: 600 .82rem/1 var(--mono); color: var(--muted); transition: background .4s, color .4s, border-color .4s; }
.ps.on .ps-n { background: var(--accent); border-color: var(--accent); color: #FAFAF8; }
.ps h3 { font-size: 1.35rem; } .ps p { color: var(--muted); max-width: 36em; }
.closing-line { margin-top: clamp(40px, 6vh, 60px) !important; padding-top: 24px; border-top: 1px solid var(--line); font: 700 clamp(1.2rem, 1.8vw, 1.5rem)/1.35 var(--serif); max-width: 34em; }

/* 7 channels: a clickable decision tree, then the comparison */
.dt { margin-top: 10px; padding: clamp(24px, 3.4vw, 40px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.dt-q, .dt-q2 { margin: 0 0 18px !important; font: 700 clamp(1.3rem, 2.2vw, 1.8rem)/1.25 var(--serif); }
.dt-a { display: flex; flex-wrap: wrap; gap: 12px; }
.dt-a button { display: grid; gap: 4px; min-width: 180px; padding: 16px 22px; border: 1px solid var(--rule); border-radius: 16px; background: var(--panel2); color: var(--ink); font: 700 1.2rem/1.1 var(--serif); text-align: left; cursor: pointer; transition: border-color .3s, background .3s, color .3s; }
.dt-a button small { font: 400 .85rem/1.3 var(--sans); color: var(--muted); }
.dt-a button.pick { border-color: var(--gold); background: var(--gold); color: var(--espresso); } .dt-a button.pick small { color: #3A2F27; }
.dt-a button.dim { opacity: .45; }
@media (hover: hover) { .dt-a button:hover { border-color: var(--gold); } }
.dt-n { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--rule); }
.dt-r { margin-top: 22px; padding: 18px 20px; border-left: 3px solid var(--gold); background: rgba(205,168,95,.08); border-radius: 0 14px 14px 0; animation: wdIn .5s var(--ease); }
.dt-r b { font: 700 1.5rem/1.2 var(--serif); color: var(--gold); } .dt-r p { margin: 6px 0 0 !important; }
.dt-reset { margin-top: 18px; padding: 10px 0; border: 0; background: none; color: var(--muted); font: 600 .9rem/1 var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.cmp-wrap { position: relative; margin-top: clamp(36px, 6vh, 56px); overflow-x: auto; border: 1px solid var(--rule); border-radius: 18px; }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .95rem; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); transition: background .25s, color .25s; }
.cmp thead th { font: 700 1.05rem/1.25 var(--serif); color: var(--gold); background: var(--panel); }
.cmp tbody th { width: 16%; font: 600 .82rem/1.4 var(--mono); color: var(--muted); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp .hl { background: rgba(205,168,95,.1); color: var(--ink); }
.cmp thead th.hl { background: var(--gold); color: var(--espresso); }

/* 8 the plan, as a ledger */
.plan-wrap { overflow-x: auto; margin-top: 30px; }
.plan-wrap:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.plan { width: 100%; min-width: 620px; border-collapse: collapse; }
.plan th, .plan td { padding: 18px 16px; text-align: left; border-bottom: 1px dashed var(--rule); }
.plan thead th { font: 600 .82rem/1 var(--mono); color: var(--accent-text); border-bottom: 2px solid var(--ink); }
.plan tbody th { font: 700 1.1rem/1.3 var(--serif); }
.plan tbody tr { position: relative; transition: background .3s; }
.plan tbody td:last-child { color: var(--muted); }
@media (hover: hover) { .plan tbody tr:hover { background: var(--panel2); } .plan tbody tr:hover td:last-child { color: var(--ink); } }

/* 9 proof: the bar shrinks from before to after */
.proof-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.proof-text p { opacity: .9; max-width: 38em; }
.cpl { margin: 0; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.cpl-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; margin-bottom: 16px; }
.cpl-row span:first-child { color: var(--muted); font-size: .9rem; }
.cpl-row b { font: 700 1.5rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.cpl-bar { height: 16px; border-radius: 8px; background: var(--line); overflow: hidden; }
.cpl-bar i { display: block; height: 100%; border-radius: inherit; transform-origin: left; transition: transform 1.2s var(--ease); }
.cpl-bar.b i { background: var(--bone); opacity: .7; transform: scaleX(0); } .cpl-bar.a i { background: var(--gold); transform: scaleX(0); transition-delay: .5s; }
.cpl.go .cpl-bar.b i { transform: scaleX(1); } .cpl.go .cpl-bar.a i { transform: scaleX(.1506); }
.cpl-chg { margin: 22px 0 0 !important; } .cpl-chg b { font: 700 clamp(2.6rem, 5vw, 3.6rem)/1 var(--serif); color: var(--gold); margin-right: 8px; }
.pmet { list-style: none; margin: clamp(36px, 6vh, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pmet li { display: grid; gap: 6px; padding: 22px 18px; } .pmet li + li { border-left: 1px solid var(--rule); }
.pmet span { color: var(--muted); font-size: .875rem; } .pmet b { font: 700 1.6rem/1.1 var(--serif); } .pmet .em b { color: var(--gold); }
.keypoint { margin-top: 26px !important; max-width: 46em; font: 700 clamp(1.15rem, 1.6vw, 1.4rem)/1.4 var(--serif); }
.others { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: clamp(36px, 6vh, 56px) 0 34px; }
.oc-in { height: 100%; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); transition: transform .45s var(--ease), border-color .4s, box-shadow .4s; }
.oc-k { font: 600 .82rem/1.3 var(--mono); color: var(--accent-text); margin-bottom: 10px !important; }
.oc ul { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--rule); display: flex; flex-wrap: wrap; gap: 10px 26px; }
.oc li { display: grid; } .oc li span { color: var(--muted); font-size: .8rem; } .oc li b { font: 700 1.3rem/1.2 var(--serif); }
@media (hover: hover) { .oc:hover .oc-in { transform: translateY(-6px); border-color: rgba(205,168,95,.55); box-shadow: 0 22px 44px rgba(0,0,0,.25); } }

/* 10 signals */
.sig-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); margin-top: 30px; }
.inds { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ind { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.ind h3 small { display: block; margin-top: 4px; font: 600 .78rem/1.3 var(--mono); color: var(--accent-text); }
.ind ul { margin: 0; padding-left: 18px; color: var(--muted); } .ind li + li { margin-top: 8px; }
.ind-arrow { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M10 15h10M16 11l4 4-4 4' fill='none' stroke='%23FAFAF8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.sig-pair { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; margin-top: 16px; }
.hardest { margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: 18px; background: var(--espresso); color: var(--bone); }
.hardest h3 { color: var(--gold); } .hardest p { font: 700 clamp(1.1rem, 1.5vw, 1.3rem)/1.45 var(--serif); margin: 0 !important; }
.fail { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--rule); border-radius: 18px; } .fail p { margin: 0 !important; color: var(--muted); }

/* stack: boxes with each tool's mark, in the developer's mono face (12 Oct). Fills alternate gold / bone; the box never moves */
.tls-rows { border-top: 1px solid var(--rule); }
.tls-row { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 14px 40px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.tls-row h3 { margin: 6px 0 0; font: 600 .75rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tls { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tls li { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); font: 400 .8rem/1.2 var(--mono); color: var(--ink); transition: color .3s, border-color .3s; }
.tls li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease); }
.tls li:nth-child(even)::before { background: var(--bone); }
.tls svg { flex: none; width: 18px; height: 18px; color: var(--accent); transition: color .3s; }
@media (hover: hover) { .tls li:hover { color: var(--espresso); border-color: var(--gold); } .tls li:hover::before { transform: scaleY(1); } .tls li:hover svg { color: var(--espresso); } }
.big-line { margin-top: clamp(40px, 6vh, 60px) !important; max-width: 30em; font: 700 clamp(1.3rem, 2.2vw, 1.9rem)/1.3 var(--serif); }

/* 12 engagements */
.egs { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.eg-in { position: relative; height: 100%; overflow: hidden; isolation: isolate; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line); border-radius: 20px; background: var(--panel); transition: transform .45s var(--ease), box-shadow .4s, color .35s; }
.eg-in::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--espresso); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); }
.eg:nth-child(2) .eg-in::before { background: var(--gold); }
.eg-in h3 { font-size: 1.6rem; } .eg-in p { margin: 0 !important; color: var(--muted); transition: color .35s; }
.sv[data-tone="dark"] .eg:nth-child(odd) .eg-in::before { background: var(--bone); }
@media (hover: hover) {
  .eg:hover .eg-in { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(23,17,14,.16); } .eg:hover .eg-in::before { transform: scaleY(1); }
  .eg:nth-child(odd):hover .eg-in { color: var(--bone); } .eg:nth-child(odd):hover .eg-in p { color: #CBBFB0; } .eg:nth-child(odd):hover h3 { color: var(--gold); }
  .eg:nth-child(2):hover .eg-in, .eg:nth-child(2):hover .eg-in p { color: var(--espresso); }
  .sv[data-tone="dark"] .eg:nth-child(odd):hover .eg-in, .sv[data-tone="dark"] .eg:nth-child(odd):hover .eg-in p { color: var(--espresso); } .sv[data-tone="dark"] .eg:nth-child(odd):hover h3 { color: #7A5A16; }
}
.eng-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); margin-top: clamp(36px, 6vh, 56px); }
.own { padding: clamp(24px, 3vw, 34px); border-radius: 20px; background: var(--espresso); color: var(--bone); } .own h3 { color: var(--gold); } .own p { margin: 0 !important; }

/* 13 why us: cards that fill on hover (gold, bone, gold) */
.whys { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.why-c { position: relative; height: 100%; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: var(--panel); transition: transform .45s var(--ease), color .35s; }
.why-c::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); }
.whys li:nth-child(2) .why-c::before { background: var(--bone); }
.why-c em { font: 700 1.6rem/1 var(--serif); font-style: normal; color: var(--gold); transition: color .35s; }
.why-c b { font: 700 1.25rem/1.3 var(--serif); } .why-c span { color: var(--muted); transition: color .35s; }
@media (hover: hover) { .whys li:hover .why-c { transform: translateY(-6px); color: var(--espresso); } .whys li:hover .why-c::before { transform: scaleY(1); } .whys li:hover .why-c em, .whys li:hover .why-c span { color: var(--espresso); } }

/* 15 related */
.rls { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.rl { border-bottom: 1px solid var(--rule); }
.rl-a { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 24px; gap: 20px; align-items: center; padding: 22px 0; text-decoration: none; }
.rl-a::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--px)); z-index: -1; background: rgba(205,168,95,.08); transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease); }
.rl-a b { font: 700 clamp(1.15rem, 1.7vw, 1.45rem)/1.25 var(--serif); transition: color .3s, transform .4s var(--ease); } .rl-a span { color: var(--muted); }
.rl-a svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.6; transition: transform .4s var(--ease); }
.rl.off .rl-a { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 24px; opacity: .55; cursor: default; }
@media (hover: hover) { .rl:not(.off) .rl-a:hover::before { transform: scaleY(1); } .rl:not(.off) .rl-a:hover b { color: var(--gold); transform: translateX(6px); } .rl:not(.off) .rl-a:hover svg { transform: translateX(6px); } }

/* 16 closing */
.close-in { max-width: 860px; text-align: center; } .close-in h2 { margin-left: auto; margin-right: auto; } .close-in p { max-width: 40em; margin-left: auto; margin-right: auto; color: var(--muted); } .close-in .ctas { justify-content: center; margin-top: 26px; }
.sv-close .btn-line { color: var(--espresso); border-color: rgba(169,133,61,.6); }
.sv[data-tone="light"] .btn-gold { box-shadow: inset 0 0 0 1px #B08D45; }

/* the FAQ section reuses faq10.css; space it like the other sections */
.fq { --px: clamp(20px, 6vw, 112px); }

/* ===================== SEO page ===================== */
/* hero: one query, two destinations. The query types itself, then splits into the ranked list and the generated answer */
.qs { margin: 0; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.qs figcaption { margin-bottom: 16px; font: 600 .82rem/1.3 var(--mono); color: var(--accent-text); }
.qs-field { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel2); font-size: .95rem; }
.qs-field svg, .mk-f svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; }
.qs-caret { width: 1.5px; height: 1.1em; background: var(--gold); animation: qsBlink 1s steps(1) infinite; }
.qs.go2 .qs-caret { opacity: 0; animation: none; }
@keyframes qsBlink { 50% { opacity: 0; } }
.qs-split { display: flex; align-items: center; gap: 10px; margin: 12px 0 !important; font: 600 .75rem/1 var(--mono); color: var(--muted); }
.qs-split i { flex: 1; height: 1px; background: var(--rule); transform: scaleX(0); transition: transform .6s var(--ease); } .qs-split i:first-child { transform-origin: right; } .qs-split i:last-child { transform-origin: left; }
.qs.go2 .qs-split i { transform: scaleX(1); }
.qs-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qs-in { height: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .35s; }
.qs-ans .qs-in { border-color: rgba(205,168,95,.5); transition-delay: .25s; }
.qs.go2 .qs-in { opacity: 1; transform: none; }
.qs-h, .qs-sl { margin: 0 0 12px !important; font: 600 .75rem/1 var(--mono); color: var(--muted); } .qs-ans .qs-h { color: var(--gold); } .qs-sl { margin: 14px 0 8px !important; }
.qs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qs-list li { display: grid; gap: 5px; } .qs-list i, .qs-lines i { display: block; height: 5px; border-radius: 3px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease) calc(.5s + var(--d) * .1s); }
.qs-list i.t { height: 7px; width: 70%; background: var(--gold); opacity: .8; } .qs-list i.s { width: 78%; }
.qs-lines { display: grid; gap: 8px; } .qs-lines i:last-child { width: 60%; }
.qs-ans .qs-lines i { transition-delay: calc(.8s + var(--d) * .1s); }
.qs.go2 .qs-list i, .qs.go2 .qs-lines i { transform: scaleX(1); }
.qs-chips { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.qs-chips li { position: relative; padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; font: 600 .75rem/1.2 var(--mono); color: var(--muted); transition: background .5s, color .5s, border-color .5s; }
.qs-chips li.you { transition-delay: 1.6s; }
.qs.go2 .qs-chips li.you { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
.qs-ring { position: absolute; left: -9px; top: -10px; width: calc(100% + 18px); height: calc(100% + 22px); overflow: visible; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease) 2s; }
.qs.go2 .qs-ring { stroke-dashoffset: 0; }
.qs-goal { margin: 14px 0 0 !important; display: grid; gap: 2px; font-size: .8rem; color: var(--muted); } .qs-goal b { font: 600 .82rem/1.3 var(--mono); color: var(--ink); } .qs-ans .qs-goal b { color: var(--gold); }
.qs-prize { margin: 8px 0 0 !important; font: 600 .78rem/1 var(--mono); color: var(--gold); opacity: 0; transition: opacity .5s 2.6s; } .qs.go2 .qs-prize { opacity: 1; }
.qs .note { margin: 14px 0 0 !important; font-size: .8rem; }
@media (hover: hover) { .qs-pane:hover .qs-in { border-color: var(--gold); transform: translateY(-4px); transition-delay: 0s; } }

/* problem: the two facts, each with a small picture of where you sit */
.fxs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(40px, 7vh, 72px); }
.fx-in { height: 100%; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line); border-radius: 20px; background: var(--panel); transition: transform .45s var(--ease), border-color .4s; }
.fx h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-top: 22px; } .fx p { margin: 0 !important; color: var(--muted); }
.fx-pic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fx-rank, .fx-ans { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; list-style: none; display: grid; gap: 8px; align-content: start; }
.fx-rank li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; font: 600 .75rem/1 var(--mono); color: var(--muted); }
.fx-rank i, .fx-ans > i { display: block; height: 6px; border-radius: 3px; background: var(--line); }
.fx-rank li.you { color: var(--gold); } .fx-rank li.you i { background: var(--gold); }
.fx-ans ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 6px; }
.fx-ans li { padding: 3px 7px; border: 1px solid var(--line); border-radius: 5px; font: 600 .75rem/1.2 var(--mono); color: var(--muted); }
.fx-ans li.you { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
@media (hover: hover) { .fx:hover .fx-in { transform: translateY(-6px); border-color: rgba(205,168,95,.55); } }

/* what organic growth requires: a spec sheet */
.rqs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 72px); }
.rq { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 18px; padding: 26px 0; border-top: 1px solid var(--line); }
.rq::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.rq svg { grid-row: span 2; width: 34px; height: 34px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.rq h3 { margin: 4px 0 6px; font-size: 1.3rem; transition: color .3s; } .rq p { margin: 0 !important; color: var(--muted); }
@media (hover: hover) { .rq:hover::after { transform: scaleX(1); } .rq:hover svg { stroke: var(--accent); } .rq:hover h3 { color: var(--accent-text); } }

/* process on a dark ground */
.sv[data-tone="dark"] .ps.on .ps-n { color: var(--espresso); }
.proc-em { color: var(--ink) !important; font: 700 1.2rem/1.35 var(--serif); }

/* SEO vs AEO vs GEO: three lenses on the same query. The screen and the table follow the lens */
.lx-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lx-tabs button { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 4px; align-content: start; min-height: 64px; padding: 16px 20px; border: 1px solid var(--rule); border-radius: 16px; background: var(--panel); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: color .35s, border-color .35s; }
.lx-tabs button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--espresso); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); }
.lx-tabs b { font: 700 1.3rem/1.15 var(--serif); } .lx-tabs small { font-size: .85rem; color: var(--muted); transition: color .35s; }
.lx-tabs [aria-selected="true"] { color: var(--bone); border-color: var(--espresso); } .lx-tabs [aria-selected="true"]::before { transform: scaleY(1); }
.lx-tabs [aria-selected="true"] b { color: var(--gold); } .lx-tabs [aria-selected="true"] small { color: #CBBFB0; }
@media (hover: hover) { .lx-tabs [aria-selected="false"]:hover { border-color: var(--accent); } }
.lx-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; margin-top: 16px; align-items: stretch; }
.lx-win { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; min-height: 360px; border: 1px solid var(--rule); border-radius: 18px; background: var(--panel); overflow: hidden; }
.lx-chrome { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .lx-chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.lx-ms { position: relative; flex: 1; display: grid; }
.lx-m { grid-area: 1 / 1; padding: 18px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.lx-m.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mk-f { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; color: var(--muted); }
.lx-m i { display: block; height: 6px; border-radius: 3px; background: var(--line); transform-origin: left; }
.lx-m.on i { animation: mkGrow .6s var(--ease) both; animation-delay: calc(.1s + var(--d, 0) * .08s); }
@keyframes mkGrow { from { transform: scaleX(0); } }
.mk-res { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mk-res li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.mk-res div { display: grid; gap: 6px; } .mk-res i.u { width: 40%; height: 4px; } .mk-res i.t { width: 76%; height: 8px; background: rgba(169,133,61,.55); } .mk-res i:last-child { width: 90%; }
.mk-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); font: 600 .75rem/1 var(--mono); color: var(--muted); }
.mk-res li:first-child .mk-n { background: var(--gold); border-color: var(--gold); color: var(--espresso); } .mk-res li:first-child i.t { background: var(--gold-deep); }
.mk-l { margin: 0 0 10px !important; font: 600 .75rem/1 var(--mono); color: var(--accent-text); }
.mk-snip { display: grid; gap: 8px; padding: 14px; margin-bottom: 16px; border: 1.5px solid var(--gold); border-radius: 12px; background: rgba(205,168,95,.08); }
.mk-snip i.b { height: 9px; width: 85%; background: var(--gold-deep); } .mk-snip i:last-child { width: 70%; }
.mk-paa { list-style: none; margin: 0; padding: 0; display: grid; } .mk-paa li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mk-paa i { width: 70%; } .mk-paa span { font: 600 .9rem/1 var(--mono); color: var(--muted); }
.mk-ai { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; } .mk-ai i:nth-of-type(3) { width: 80%; } .mk-ai i.h { width: 55%; }
.mk-ai .mk-l:nth-of-type(2) { margin: 10px 0 2px !important; }
.mk-src { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.mk-src li { padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; font: 600 .75rem/1.2 var(--mono); color: var(--muted); }
.mk-src li.you { background: var(--gold); border-color: var(--gold); color: var(--espresso); box-shadow: 0 0 0 4px rgba(205,168,95,.25); }
.lx-tags { position: relative; display: grid; border-top: 1px solid var(--line); }
.lx-tag { grid-area: 1 / 1; margin: 0 !important; padding: 12px 18px; font-size: .875rem; opacity: 0; transition: opacity .35s; } .lx-tag.on { opacity: 1; }
.lx-tag span { display: block; font: 600 .75rem/1.4 var(--mono); color: var(--accent-text); }
.lx-wrap { margin-top: 0; }
.sv[data-tone="light"] .cmp thead th { color: var(--accent-text); }
.lx-t { min-width: 640px; } .lx-t th[data-c] { cursor: pointer; }
.lx-t .sel { background: rgba(169,133,61,.1); color: var(--ink); } .lx-t thead th.sel { background: var(--espresso); color: var(--gold); }

/* proof: two before/after bars that grow */
.gr-set + .gr-set { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--rule); }
.gr-h { margin: 0 0 12px !important; font: 600 .8rem/1.3 var(--mono); color: var(--accent-text); }
.gr .cpl-row { grid-template-columns: 58px 1fr 64px; margin-bottom: 10px; } .gr .cpl-row b { text-align: right; font-size: 1.25rem; }
.gr-bar { height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; }
.gr-bar i { display: block; height: 100%; width: calc(var(--s) * 100%); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
.gr-bar.b i { background: var(--bone); opacity: .7; } .gr-bar.a i { background: var(--gold); transition-delay: .45s; }
.gr.go .gr-bar i { transform: scaleX(1); }
.pmet small { color: var(--muted); font-size: .8rem; }
.caveat { margin-top: 26px; max-width: 52em; padding-left: 18px; border-left: 2px solid var(--rule); } .caveat h3 { font: 600 .82rem/1.3 var(--mono); color: var(--accent-text); } .caveat p { margin: 0 !important; color: var(--muted); }
.others.one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.seo-inds li b { color: var(--ink); font-weight: 600; }

/* ===================== Social Media Management page ===================== */
/* hero: one buyer, five touches, one credited. A buyer dot walks the line once; the three social touches stay uncredited */
.lc { margin: 0; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.lc figcaption { margin-bottom: 26px; font: 600 .82rem/1.3 var(--mono); color: var(--accent-text); }
.lc-track { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lc-line { position: absolute; left: 10%; right: 10%; top: 21px; height: 2px; background: repeating-linear-gradient(90deg, rgba(224,112,95,.5) 0 6px, transparent 6px 11px); }
.lc-line b { position: absolute; inset: 0; background: rgba(241,233,222,.55); transform: scaleX(var(--p, 0)); transform-origin: left; }
.lc-buyer { position: absolute; left: 10%; top: 15px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 0 4px rgba(241,233,222,.18); transform: translateX(calc(var(--p, 0) * (var(--tw, 300px)))); opacity: 0; transition: opacity .4s; }
.lc.go .lc-buyer { opacity: 1; } .lc.done .lc-buyer { opacity: 0; }
.lc-s { position: relative; display: grid; justify-items: center; gap: 3px; text-align: center; }
.lc-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; border: 1.5px dashed rgba(224,112,95,.75); background: var(--panel); font: 600 .78rem/1 var(--mono); color: #E59A7F; transition: transform .4s var(--ease), background .4s, border-color .4s, color .4s; }
.lc-s.cr .lc-dot { border: 1.5px solid var(--gold); color: var(--gold); }
.lc-s.lit .lc-dot { transform: scale(1.08); } .lc-s.cr.lit .lc-dot { background: var(--gold); color: var(--espresso); }
.lc-l { font: 700 .95rem/1.2 var(--serif); } .lc-c { font-size: .8rem; color: var(--muted); }
.lc-cr { margin-top: 4px; padding: 2px 6px; white-space: nowrap; letter-spacing: -0.02em; border-radius: 99px; font: 600 .75rem/1.4 var(--mono); color: #E59A7F; background: rgba(224,112,95,.1); opacity: 0; transition: opacity .4s; }
.lc-s.cr .lc-cr { color: var(--espresso); background: var(--gold); }
.lc-s.lit .lc-cr { opacity: 1; }
.lc-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 0; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.lc.done .lc-sum { opacity: 1; transform: none; }
.lc-sum div { padding: 14px 16px; border-radius: 14px; background: var(--panel2); } .lc-sum dt { font-size: .8rem; color: var(--muted); } .lc-sum dd { margin: 4px 0 0; font: 700 1.05rem/1.3 var(--serif); }
.lc-a dd { color: var(--gold); } .lc-b { border: 1px dashed rgba(224,112,95,.55); } .lc-b dd { color: #E59A7F; }
.lc .note { margin: 14px 0 0 !important; font-size: .8rem; }
@media (hover: hover) { .lc-s:hover .lc-dot { transform: scale(1.12); } .lc-s:hover .lc-cr { opacity: 1; } }

/* the two facts without pictures: a number instead */
.fx-n { font: 700 2.2rem/1 var(--serif); color: var(--gold); } .fx-n + h3 { margin-top: 14px; }

/* attribution: the credit ledger, then the three measures */
.cr-led { display: grid; gap: 14px; margin-top: clamp(26px, 4vh, 40px); padding: clamp(22px, 3vw, 32px); border-radius: 20px; background: var(--espresso); color: var(--bone); }
.cr-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 18rem); gap: 18px; align-items: center; }
.cr-k { font-size: .9rem; color: #B9AA98; } .cr-row b { font: 700 1.15rem/1.3 var(--serif); } .cr-row.a b { color: var(--gold); } .cr-row.b b { color: #E59A7F; }
.cr-bar { display: flex; gap: 6px; height: 14px; }
.cr-bar i { flex: 1; border-radius: 7px; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.cr-row.a .cr-bar i { background: var(--gold); } .cr-row.b .cr-bar i { border: 1px dashed rgba(224,112,95,.7); background: repeating-linear-gradient(135deg, rgba(224,112,95,.25) 0 2px, transparent 2px 7px); }
.cr-row.b .cr-bar i:nth-child(2) { transition-delay: .15s; } .cr-row.b .cr-bar i:nth-child(3) { transition-delay: .3s; } .cr-row.b .cr-bar i:first-child { transition-delay: 0s; }
.cr-led.go .cr-bar i { transform: scaleX(1); }
.fm-h { margin: clamp(40px, 6vh, 60px) 0 18px !important; font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important; }
.fms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fm-in { height: 100%; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); border-radius: 18px; background: var(--panel); transition: transform .45s var(--ease), border-color .4s, box-shadow .4s; }
.fm-in svg { width: 34px; height: 34px; margin-bottom: 16px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fm-in h4 { margin: 0 0 8px; font: 700 1.2rem/1.25 var(--serif); } .fm-in p { margin: 0 !important; color: var(--muted); }
@media (hover: hover) { .fm:hover .fm-in { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 20px 40px rgba(23,17,14,.12); } }

/* output ledger on a dark ground */
.sv-out .plan thead th { border-bottom-color: var(--gold); }
.sv-out .op-v { font: 700 1.15rem/1.3 var(--serif); color: var(--gold); white-space: nowrap; }
@media (hover: hover) { .sv-out .plan tbody tr:hover { background: rgba(205,168,95,.08); } }

/* SLA: the response clock. Pick when something arrives; the stated rules work out when it is answered */
.rc { margin-top: clamp(26px, 4vh, 40px); padding: clamp(22px, 3vw, 34px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.rc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.rc-kind { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); }
.rc-kind button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 .9rem/1.2 var(--sans); cursor: pointer; transition: background .3s, color .3s; }
.rc-kind button[aria-pressed="true"] { background: var(--espresso); color: var(--bone); }
@media (hover: hover) { .rc-kind button[aria-pressed="false"]:hover { color: var(--ink); } }
.rc-lab { font-size: .95rem; } .rc-lab .rc-o { font: 700 1.5rem/1 var(--serif); color: var(--accent-text); font-variant-numeric: tabular-nums; margin: 0 4px; }
.rc-in { display: block; width: calc(100% - 9.5rem - 14px); margin: 22px 0 8px calc(9.5rem + 14px); accent-color: #A9853D; height: 28px; cursor: pointer; }
.rc-days { position: relative; display: grid; gap: 10px; }
.rc-day { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 14px; align-items: center; }
.rc-dn { font: 600 .78rem/1.2 var(--mono); color: var(--muted); }
.rc-bar { position: relative; height: 26px; border-radius: 6px; background: var(--panel2); overflow: hidden; }
.rc-hrs { position: absolute; top: 0; bottom: 0; left: calc((540 - 360) / 960 * 100%); width: calc(540 / 960 * 100%); background: rgba(169,133,61,.12); border-left: 1px dashed rgba(169,133,61,.5); border-right: 1px dashed rgba(169,133,61,.5); }
.rc-win { position: absolute; top: 5px; bottom: 5px; left: var(--l, 0); width: var(--w, 0); border-radius: 4px; background: var(--gold); transition: left .25s var(--ease), width .25s var(--ease); }
.rc-at, .rc-due { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--espresso); left: var(--x, 0); transition: left .25s var(--ease); }
.rc-due { background: #7A5A16; opacity: var(--o, 0); }
.rc-ticks { position: relative; margin-left: calc(9.5rem + 14px); height: 18px; font: 400 .75rem/1 var(--mono); color: var(--muted); }
.rc-ticks span { position: absolute; left: calc((var(--h) * 60 - 360) / 960 * 100%); transform: translateX(-50%); }
.rc-r { margin: 18px 0 0 !important; font-size: 1.05rem; } .rc-r b { font: 700 1.3rem/1.3 var(--serif); color: var(--ink); } .rc-r span { color: var(--muted); }
.slas { list-style: none; margin: clamp(26px, 4vh, 40px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 56px); }
.slas li { display: flex; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.slas span { color: var(--muted); } .slas b { font: 700 1.02rem/1.35 var(--serif); text-align: right; }

/* vetting: tick the checks, the creator card gets stamped */
.vt-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(24px, 4vh, 36px); }
.vcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vc { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .3s, background .3s; }
.vc b { display: block; font: 700 1.12rem/1.3 var(--serif); } .vc small { display: block; margin-top: 4px; font-size: .9rem; color: var(--muted); }
.vc-t { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--rule); transition: background .3s, border-color .3s; }
.vc[aria-pressed="true"] { border-color: var(--gold); background: var(--panel2); }
.vc[aria-pressed="true"] .vc-t { border-color: var(--gold); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13.5l3.5 3.5 7-7.5' fill='none' stroke='%2317110E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
@media (hover: hover) { .vc:hover { border-color: rgba(205,168,95,.55); } }
.vt-card { position: sticky; top: 110px; padding: 26px; border-radius: 22px; background: var(--bone); color: var(--espresso); overflow: hidden; }
.vt-head { display: flex; gap: 14px; align-items: center; } .vt-av { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #CDA85F, #A9853D); }
.vt-head div { flex: 1; display: grid; gap: 8px; } .vt-head div i { height: 8px; border-radius: 4px; background: rgba(23,17,14,.18); } .vt-head div i:last-child { width: 60%; }
.vt-f { margin: 18px 0 14px !important; font-size: .85rem; color: #5F5A55; } .vt-f s { color: #8A837C; }
.vt-st { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vt-st li { padding: 8px 12px; border: 1px dashed rgba(23,17,14,.22); border-radius: 8px; font: 600 .78rem/1.3 var(--mono); color: #8A837C; transition: background .35s, color .35s, border-color .35s; }
.vt-st li.on { border-style: solid; border-color: #A9853D; background: rgba(205,168,95,.22); color: var(--espresso); }
.vt-ok { position: absolute; right: 18px; top: 22px; margin: 0 !important; padding: 6px 14px; border: 2px solid #2E7D4F; border-radius: 8px; font: 700 1rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #2E7D4F; transform: rotate(-8deg) scale(1.4); opacity: 0; transition: opacity .35s, transform .45s var(--ease); }
.vt-card.ok .vt-ok { opacity: 1; transform: rotate(-8deg); }
.vt-score b { color: var(--gold); }

/* proof on a light ground: one big number */
.big1 { text-align: left; } .big1 .b1 { margin: 6px 0 4px !important; } .big1 .b1 b { font: 700 clamp(4rem, 9vw, 7rem)/1 var(--serif); color: var(--accent-text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.big1 .b2 { font-size: 1.1rem; } .big1 .b2 b { font: 700 1.3rem/1.3 var(--serif); color: var(--ink); }
.cv-h { margin-top: 18px !important; font: 600 .75rem/1.3 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pmet.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }

/* the work: format cards; the test each one has to pass rises on hover or focus (the card itself never moves) */
.cgs { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cg { outline: none; } .cg:focus-visible .cg-in { outline: 2px solid var(--gold); outline-offset: 3px; }
.cg-in { position: relative; height: 100%; min-height: 300px; overflow: hidden; display: flex; flex-direction: column; padding: 24px 22px 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.cg-n { font: 700 1.6rem/1 var(--serif); color: var(--gold); } .cg-in h3 { margin: 16px 0 10px; font-size: 1.25rem; } .cg-in p { color: var(--muted); font-size: .95rem; }
.cg-t { margin: auto -22px 0; padding: 16px 22px 20px; background: var(--gold); color: var(--espresso); transform: translateY(calc(100% - 42px)); transition: transform .45s var(--ease); }
.cg-t b { display: block; opacity: 0; transition: opacity .35s .05s; }
.cg:hover .cg-t b, .cg:focus-within .cg-t b, .cg:focus .cg-t b { opacity: 1; }
.cg-t span { display: block; margin-bottom: 6px; font: 600 .75rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; } .cg-t b { font: 700 1.05rem/1.3 var(--serif); }
.cg:hover .cg-t, .cg:focus-within .cg-t, .cg:focus .cg-t { transform: none; }
@media (hover: none) { .cg-t { transform: none; } .cg-t b { opacity: 1; } }

/* ===================== Website Development page ===================== */
/* hero: the same page seen two ways. The right side is this page's own HTML, fetched and counted live */
.cw { margin: 0; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.cw figcaption { margin-bottom: 18px; font: 600 .82rem/1.3 var(--mono); color: var(--accent-text); }
.cw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cw-col { display: flex; flex-direction: column; min-width: 0; padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.cw-col.ssg { border-color: rgba(205,168,95,.5); }
.cw-l { margin: 0 0 10px !important; font: 700 .98rem/1.25 var(--serif); } .cw-l small { display: block; margin-top: 3px; font: 400 .78rem/1.35 var(--sans); color: var(--muted); }
.cw-code { height: 132px; margin: 0; padding: 10px 12px; overflow: hidden; border-radius: 10px; background: #0E0A08; font: 400 .75rem/1.6 var(--mono); color: #B9AA98; white-space: pre-wrap; overflow-wrap: anywhere; scroll-behavior: smooth; }
.spa .cw-code code { color: #E59A7F; }
.cw-code.live { position: relative; } .cw-code.live code { display: block; } .cw-code.live .ln { display: block; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; } .cw-code.live .ln.on { opacity: 1; transform: none; }
.cw-code .tg { color: #CDA85F; } .cw-code .tx { color: #F1E9DE; }
.cw-st { margin: 12px 0 0; display: grid; gap: 6px; }
.cw-st div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); font-size: .8rem; }
.cw-st dt { color: var(--muted); } .cw-st dd { margin: 0; font: 700 1rem/1.2 var(--serif); font-variant-numeric: tabular-nums; }
.spa .cw-st dd { color: #E59A7F; } .ssg .cw-st dd { color: var(--gold); }
.cw-v { margin: 12px 0 0 !important; font: 600 .78rem/1.35 var(--mono); } .spa .cw-v { color: #E59A7F; } .ssg .cw-v { color: var(--gold); }
.cw .note { margin: 14px 0 0 !important; font-size: .8rem; }

/* the standard: rules by tab, then the budget as live gauges */
.sp { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; margin-top: clamp(24px, 4vh, 36px); }
.sp-tabs { display: grid; gap: 8px; align-content: start; }
.sp-tabs button { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 12px 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); color: var(--ink); font: 700 1.05rem/1.25 var(--serif); text-align: left; cursor: pointer; transition: color .3s, border-color .3s; }
.sp-tabs button small { font: 400 .78rem/1 var(--mono); color: var(--muted); transition: color .3s; }
.sp-tabs button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--espresso); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.sp-tabs [aria-selected="true"] { color: var(--gold); border-color: var(--espresso); } .sp-tabs [aria-selected="true"]::before { transform: scaleX(1); } .sp-tabs [aria-selected="true"] small { color: #CBBFB0; }
@media (hover: hover) { .sp-tabs [aria-selected="false"]:hover { border-color: var(--accent); } }
.sp-ps { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--rule); border-radius: 18px; background: var(--panel); }
.sp-p ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: r; }
.sp-p li { position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--line); font-size: 1.02rem; animation: wdIn .45s var(--ease) both; animation-delay: calc(var(--d, 0) * 60ms); }
.sp-p li:last-child { border-bottom: 0; }
.sp-p li::before { content: ""; position: absolute; left: 0; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13.5l3.5 3.5 7-7.5' fill='none' stroke='%23FAFAF8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.bud { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; margin-top: 16px; padding: clamp(22px, 3vw, 34px); border-radius: 22px; background: var(--espresso); color: var(--bone); }
.bud-h h3 { color: var(--gold); } .bud-h p { color: #CBBFB0; margin-bottom: .8em !important; } .bud-live { font: 600 .78rem/1.4 var(--mono); color: var(--gold) !important; }
.gzs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gz { padding: 16px; border-radius: 16px; background: #201915; text-align: center; }
.gz svg { width: 100%; max-width: 190px; margin: 0 auto; overflow: visible; }
.gz-t, .gz-g, .rr-a { fill: none; stroke-width: 14; stroke-linecap: butt; }
.gz-t { stroke: rgba(224,112,95,.45); } .gz-g { stroke: rgba(205,168,95,.85); stroke-dasharray: var(--g) 100; }
.gz-n { transform-origin: 100px 105px; transform: rotate(calc(var(--a) * 1deg - 90deg)); transition: transform 1.2s var(--ease); }
.gz-n path { stroke: var(--bone); stroke-width: 3; stroke-linecap: round; } .gz-n circle { fill: var(--bone); }
.gz-v { margin: 4px 0 0 !important; } .gz-v b { display: block; font: 700 1.8rem/1.1 var(--serif); color: var(--bone); font-variant-numeric: tabular-nums; } .gz-v span { font: 600 .78rem/1 var(--mono); color: var(--gold); letter-spacing: .1em; }
.gz.ok .gz-v b { color: var(--gold); }
.gz.wait .gz-n { opacity: 0; } .gz.wait .gz-v b { font: 600 .9rem/1.9 var(--mono); color: #CBBFB0; }
.gz h4 { margin: 10px 0 4px; font: 700 1rem/1.25 var(--serif); } .gz-t2 { margin: 0 !important; font-size: .8rem; color: #B9AA98; }
/* audit this page */
.sa-wrap { margin-top: clamp(64px, 10vh, 110px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--rule); }
.sa { margin-top: clamp(22px, 3vh, 32px); border-radius: 22px; background: var(--espresso); color: var(--bone); overflow: hidden; }
.sa-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 18px clamp(18px, 3vw, 30px); border-bottom: 1px solid rgba(205,168,95,.2); }
.sa-st { margin: 0 !important; font: 600 .82rem/1.4 var(--mono); color: var(--gold); }
.sa .btn-gold:hover { box-shadow: inset 0 0 0 1.5px var(--gold) !important; }
.sa-tw { overflow-x: auto; }
.sa-t { width: 100%; min-width: 640px; border-collapse: collapse; }
.sa-t th, .sa-t td { padding: 15px clamp(14px, 2vw, 26px); text-align: left; border-bottom: 1px solid rgba(241,233,222,.08); }
.sa-t thead th { font: 600 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #B9AA98; }
.sa-t tbody th { font: 400 .98rem/1.4 var(--sans); width: 38%; }
.sa-v { font: 700 1.25rem/1.2 var(--serif); color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sa-n { color: #B9AA98; font-size: .9rem; }
.sa-t tr { transition: background .3s; } .sa-t tr.hit { animation: saHit .9s var(--ease); }
@keyframes saHit { 0% { background: rgba(205,168,95,.18); } 100% { background: transparent; } }
@media (hover: hover) { .sa-t tbody tr:hover { background: rgba(205,168,95,.07); } }

/* platforms: three questions, then the right card lights up */
.pq { margin-top: clamp(24px, 4vh, 36px); padding: clamp(22px, 3vw, 34px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.pq-k { margin: 0 0 12px !important; font: 600 .78rem/1 var(--mono); color: var(--accent-text); }
.pq-q { margin: 0 0 16px !important; font: 700 clamp(1.25rem, 2vw, 1.6rem)/1.3 var(--serif); }
.pq-s { animation: wdIn .45s var(--ease); }
.pq-s[hidden], .pq-r[hidden] { display: none; }
.pq-a { display: flex; flex-wrap: wrap; gap: 10px; }
.pq-a button { min-height: 50px; padding: 0 22px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel2); color: var(--ink); font: 600 1rem/1 var(--sans); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
@media (hover: hover) { .pq-a button:hover { background: var(--gold); color: var(--espresso); border-color: var(--gold); } }
.pq-r { margin: 6px 0 0 !important; font: 700 1.3rem/1.4 var(--serif); color: var(--gold); animation: wdIn .45s var(--ease); } .pq-r span { display: block; margin-top: 6px; font: 400 1rem/1.55 var(--sans); color: var(--ink); }
.pcs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pc-in { height: 100%; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); transition: opacity .4s, border-color .4s, box-shadow .4s, transform .45s var(--ease); }
.pc h3 { font-size: 1.5rem; color: var(--gold); } .sv[data-tone="light"] .pc h3 { color: var(--accent-text); }
.pc dl { margin: 0; display: grid; gap: 12px; } .pc dt { font: 600 .75rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pc dd { margin: 4px 0 0; font-size: .92rem; }
.pc-m { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: middle; } .pc-m i { width: 14px; height: 8px; border-radius: 2px; background: var(--line); }
.pc-m i:nth-child(-n + 1) { background: var(--gold); } .pc-m[style*="--e:2"] i:nth-child(-n + 2), .pc-m[style*="--e:3"] i:nth-child(-n + 3), .pc-m[style*="--e:4"] i { background: var(--gold); }
.pcs.picked .pc:not(.on) .pc-in { opacity: .35; } .pc.on .pc-in { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 24px 50px rgba(0,0,0,.35); transform: translateY(-6px); }
@media (hover: hover) { .pc:hover .pc-in { border-color: rgba(205,168,95,.55); } }

/* proof: the three results, drawn */
.rr { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.rr-g { grid-column: 1 / -1; text-align: center; } .rr-g svg { width: 100%; max-width: 260px; margin: 0 auto -54px; overflow: visible; }
.rr .gz-t { stroke: var(--line); } .sv[data-tone="light"] .rr-g b, .sv[data-tone="light"] .rr-g p span { color: var(--accent-text); }
.rr-a { stroke: var(--gold); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease); }
.rr.go .rr-a { stroke-dashoffset: 5; }
.rr-g p { margin: 0 !important; } .rr-g b { font: 700 3.6rem/1 var(--serif); color: var(--gold); } .rr-g p span { font: 700 2rem/1 var(--serif); color: var(--gold); } .rr-g small { display: block; color: var(--muted); }
.rr-s, .rr-m { padding: 16px; border-radius: 16px; background: var(--panel2); }
.rr-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 4px 0 10px; }
.rr-dots i { aspect-ratio: 1; border-radius: 50%; background: #E59A7F; transition: opacity .5s, transform .5s; transition-delay: calc(var(--d, 0) * 80ms); }
.rr-dots i.k { background: var(--gold); }
.rr.go .rr-dots i:not(.k) { opacity: .15; transform: scale(.6); }
.rr-s p, .rr-m p { margin: 0 !important; } .rr-s b, .rr-m b { font: 700 1.4rem/1.2 var(--serif); }
.rr-m { display: flex; align-items: center; gap: 12px; } .rr-m svg { flex: none; width: 44px; height: 44px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rr-m .tk { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset .6s var(--ease) 1s; } .rr.go .rr-m .tk { stroke-dashoffset: 0; }
.rr-m span { display: block; color: var(--muted); font-size: .85rem; }
.rr .note { grid-column: 1 / -1; margin: 4px 0 0 !important; }

/* ownership: ten keys; hover, focus or tap turns each one over (the tile never moves) */
.hks { list-style: none; margin: clamp(24px, 4vh, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hk { outline: none; }
.hk-in { position: relative; height: 100%; min-height: 220px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.hk:focus-visible .hk-in { outline: 2px solid var(--accent); outline-offset: 3px; }
.hk-f, .hk-b { position: absolute; inset: 0; padding: 20px; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.hk-f { display: flex; flex-direction: column; justify-content: space-between; }
.hk-f svg { width: 40px; height: 40px; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hk-f h3 { margin: 0; font-size: 1.15rem; }
.hk-p { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule); font: 400 1.1rem/1 var(--sans); color: var(--accent-text); }
.hk-b { margin: 0 !important; display: flex; align-items: center; background: var(--espresso); color: var(--bone); font-size: .9rem; line-height: 1.5; opacity: 0; transform: translateY(12px); }
.hk:hover .hk-b, .hk:focus .hk-b, .hk:focus-within .hk-b { opacity: 1; transform: none; } .hk:hover .hk-f, .hk:focus .hk-f { opacity: 0; }
.sv[data-tone="dark"] .hpack { background: var(--panel); border: 1px solid var(--rule); }
.hpack { margin-top: 16px; padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: var(--espresso); color: var(--bone); }
.hpack h3 { color: var(--gold); }
.hpack ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.hpack li { position: relative; padding: 14px 0 14px 40px; border-top: 1px solid rgba(205,168,95,.18); }
.hpack li::before { content: ""; position: absolute; left: 0; top: 14px; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--gold); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13.5l3.5 3.5 7-7.5' fill='none' stroke='%2317110E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; transform: scale(0); transition: transform .4s var(--ease); transition-delay: calc(var(--i, 0) * 110ms + .2s); }
.hpack li.rv-in::before { transform: none; }

/* ===================== Application Development page ===================== */
/* hero: a stack that does not talk to itself; "Connect the stack" welds the gaps and data starts moving */
.gs { margin: 0; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.gs figcaption { margin-bottom: 10px; font: 600 .82rem/1.3 var(--mono); color: var(--accent-text); }
.gs-map { position: relative; aspect-ratio: 4 / 3; }
.gs-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gs-wire path { fill: none; stroke: #E59A7F; stroke-width: 2; stroke-dasharray: 5 7; opacity: .7; transition: stroke .5s, opacity .5s, stroke-dasharray .5s; }
.gs[data-on="1"] .gs-wire path { stroke: var(--gold); stroke-dasharray: 0; opacity: 1; }
.gs-pk circle { fill: var(--bone); } .gs-pk { opacity: 0; transition: opacity .4s; } .gs[data-on="1"] .gs-pk { opacity: 1; }
.gs-ns { list-style: none; margin: 0; padding: 0; }
.gs-n { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; width: 30%; text-align: center; }
.gs-n:nth-child(1) { left: 12.5%; top: 30%; } .gs-n:nth-child(2) { left: 50%; top: 30%; } .gs-n:nth-child(3) { left: 87.5%; top: 30%; } .gs-n:nth-child(4) { left: 50%; top: 86%; }
.gs-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 14px; border: 1px solid var(--rule); background: var(--bg); transition: border-color .5s, box-shadow .5s; }
.gs-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--bone); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gs[data-on="1"] .gs-n:not(:nth-child(4)) .gs-ic { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(205,168,95,.14); }
.gs-n b { font: 700 .92rem/1.2 var(--serif); } .gs-n small { font-size: .75rem; color: var(--muted); }
.gs-m { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #E59A7F; color: var(--espresso); font: 600 .75rem/1 var(--mono); transition: background .5s, transform .4s var(--ease); }
.gs-m.m0 { left: 31.25%; top: 30%; } .gs-m.m1 { left: 68.75%; top: 30%; } .gs-m.m2 { left: 50%; top: 66%; }
.gs[data-on="1"] .gs-m { background: var(--gold); }
.gs-m.hl { transform: translate(-50%, -50%) scale(1.25); }
.gs-bs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.gs-b { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--panel2); font-size: .85rem; cursor: default; }
.gs-x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #E59A7F; color: var(--espresso); font: 600 .72rem/1 var(--mono); transition: background .5s; }
.gs[data-on="1"] .gs-x { background: var(--gold); }
.gs-l, .gs-f { grid-column: 2; grid-row: 1; margin: 0 !important; transition: opacity .4s; } .gs-f { opacity: 0; color: var(--gold); font-weight: 600; } .gs[data-on="1"] .gs-l { opacity: 0; } .gs[data-on="1"] .gs-f { opacity: 1; }
.gs-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.gs-v { display: grid; margin: 0 !important; font: 700 1rem/1.3 var(--serif); } .gs-v span { grid-area: 1 / 1; transition: opacity .4s; } .gs-v .v0 { color: #E59A7F; } .gs-v .v1 { color: var(--gold); opacity: 0; }
.gs[data-on="1"] .gs-v .v0 { opacity: 0; } .gs[data-on="1"] .gs-v .v1 { opacity: 1; }
.gs-btn .t1, .gs[data-on="1"] .gs-btn .t0 { display: none; } .gs[data-on="1"] .gs-btn .t1 { display: inline; }
.gs .note { margin: 12px 0 0 !important; font-size: .8rem; }

/* discovery and build: one journey; pick a stop to read it */
.jr { margin-top: clamp(24px, 4vh, 36px); padding: clamp(22px, 3vw, 34px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.jr-phs { display: grid; grid-template-columns: calc(var(--d) / var(--n) * 100%) 1fr; margin-bottom: 12px; font: 600 .75rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.jr-phs span { padding-bottom: 8px; border-bottom: 2px solid; } .jr-phs .a { color: var(--accent-text); border-color: var(--accent); margin-right: 8px; } .jr-phs .b { color: var(--muted); border-color: var(--rule); }
.jr-track { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.jr-line { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 19px; height: 2px; background: var(--line); }
.jr-line b { position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .5s var(--ease); }
.jr-s { position: relative; width: 100%; display: grid; justify-items: center; gap: 6px; padding: 0 4px 6px; border: 0; background: none; color: var(--muted); font: inherit; text-align: center; cursor: pointer; }
.jr-d { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--panel); transition: background .35s, border-color .35s, transform .35s var(--ease); }
.jr-n { position: absolute; top: 13px; font: 600 .75rem/1 var(--mono); }
.jr-t { font: 700 .9rem/1.25 var(--serif); color: var(--ink); opacity: .6; transition: opacity .3s; }
.jr-s.done .jr-d { background: rgba(169,133,61,.18); border-color: var(--accent); }
.jr-s.on .jr-d { background: var(--accent); border-color: var(--accent); transform: scale(1.1); } .jr-s.on .jr-n { color: #FAFAF8; } .jr-s.on .jr-t { opacity: 1; }
@media (hover: hover) { .jr-s:hover .jr-t { opacity: 1; } .jr-s:hover .jr-d { border-color: var(--accent); } }
.jr-ps { display: grid; margin-top: 22px; padding: 22px 24px; border-radius: 16px; background: var(--espresso); color: var(--bone); min-height: 150px; }
.jr-p { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s, transform .4s var(--ease), visibility 0s .4s; }
.jr-p.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.jr-ph { margin: 0 0 8px !important; font: 600 .75rem/1.3 var(--mono); color: var(--gold); } .jr-p h3 { color: var(--bone); font-size: 1.5rem; } .jr-p p:last-child { margin: 0 !important; color: #D9CDBE; max-width: 46em; }
.jr-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.jr-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); font-size: 1.1rem; cursor: pointer; transition: background .3s, color .3s; }
@media (hover: hover) { .jr-nav button:hover { background: var(--gold); color: var(--espresso); border-color: var(--gold); } }
.sv-jr .sig-pair { margin-top: 16px; }

/* engagement models: pick the sentence that sounds like you */
.em-q { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 4px; } .em-q p { margin: 0 !important; font: 700 1.1rem/1.3 var(--serif); }
.em-cs { display: flex; flex-wrap: wrap; gap: 8px; }
.em-c { min-height: 44px; padding: 0 18px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); color: var(--ink); font: 600 .92rem/1.2 var(--sans); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.em-c[aria-pressed="true"] { background: var(--gold); color: var(--espresso); border-color: var(--gold); }
@media (hover: hover) { .em-c[aria-pressed="false"]:hover { border-color: var(--gold); } }
.eg-fit { margin-top: 14px !important; font: 600 .78rem/1.4 var(--mono) !important; color: var(--accent-text) !important; }
.egs.picked .eg:not(.on) .eg-in { opacity: .35; } .eg.on .eg-in { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.em-scope { margin-top: clamp(30px, 5vh, 48px); max-width: 860px; }

/* terms: clauses on a signed sheet */
.tm-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.tm-doc { position: relative; padding: clamp(24px, 3vw, 38px); border-radius: 6px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(23,17,14,.06), 0 24px 50px rgba(23,17,14,.1); }
.tm-h { margin: 0 0 14px !important; font: 600 .78rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.tcs { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.tc { border-top: 1px solid var(--line); }
.tc button { width: 100%; display: grid; grid-template-columns: 9rem minmax(0, 1fr) 24px; gap: 14px; align-items: baseline; padding: 16px 0; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.tc-k { font: 600 .78rem/1.4 var(--mono); color: var(--muted); } .tc-v { font: 700 1.08rem/1.35 var(--serif); }
.tc-m { position: relative; width: 16px; height: 16px; } .tc-m::before, .tc-m::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--accent); transition: transform .3s var(--ease); } .tc-m::after { transform: rotate(90deg); }
.tc button[aria-expanded="true"] .tc-m::after { transform: none; }
.tc-n { display: grid; margin: 0 !important; padding: 0 0 0 calc(9rem + 14px); color: var(--muted); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease), opacity .3s, padding .3s; }
.tc.open .tc-n { max-height: 160px; opacity: 1; padding-bottom: 16px; }
@media (hover: hover) { .tc button:hover .tc-v { color: var(--accent-text); } }
.tm-seal { position: absolute; right: -18px; top: -22px; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--gold); color: var(--espresso); box-shadow: inset 0 0 0 4px #CDA85F, inset 0 0 0 6px rgba(23,17,14,.3); transform: rotate(-12deg); font: 700 .8rem/1.1 var(--mono); text-align: center; letter-spacing: .08em; text-transform: uppercase; }

/* proof: the measurement layer, drawn */
.ml { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: clamp(24px, 4vh, 36px); }
.ml-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ml-b { width: 100%; display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .3s, background .3s; }
.ml-b b { font: 700 1.15rem/1.3 var(--serif); } .ml-b span { color: var(--muted); font-size: .92rem; }
.ml-b.on { border-color: var(--gold); background: var(--panel2); } .ml-b.on b { color: var(--gold); }
@media (hover: hover) { .ml-b:hover { border-color: rgba(205,168,95,.55); } }
.ml-map { position: relative; margin: 0; aspect-ratio: 520 / 340; border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.ml-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ml-map .e { fill: none; stroke: rgba(241,233,222,.18); stroke-width: 2; stroke-dasharray: 4 6; transition: stroke .4s, stroke-width .4s; }
.ml[data-k="sst"] .e.sst, .ml[data-k="capi"] .e.capi, .ml[data-k="join"] .e.join { stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 0; }
.ml-map .pk circle { fill: var(--gold); }
.mn { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); text-align: center; white-space: nowrap; transition: border-color .4s, box-shadow .4s; }
.mn b { font: 700 .92rem/1.2 var(--serif); } .mn small { font-size: .75rem; color: var(--muted); }
.ml[data-k="sst"] .mn.sst, .ml[data-k="capi"] .mn.capi, .ml[data-k="join"] .mn.join { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(205,168,95,.14); }
.ml-x { max-width: 46em; margin-top: 18px !important; color: var(--muted); } .ml-x a { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 600; text-decoration: none; } .ml-x a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (hover: hover) { .ml-x a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.sv-ml .ctas { margin-top: 26px; }

/* ===================== Creative & Content Production page ===================== */
/* hero: what happens to a winning ad; switch to "the next ad ready" and scrub the weeks */
.fg { margin: 0; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.fg figcaption { margin-bottom: 14px; font: 600 .82rem/1.3 var(--mono); color: var(--accent-text); }
.fg-sw { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); }
.fg-sw button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 .85rem/1.2 var(--sans); cursor: pointer; transition: background .3s, color .3s; }
.fg-sw [aria-pressed="true"] { background: var(--gold); color: var(--espresso); }
.fg-ch { display: block; width: 100%; margin: 12px 0 4px; overflow: visible; }
.fg-ch .ax { stroke: var(--rule); } .fg-ch text { font: 400 10px/1 var(--mono); fill: var(--muted); text-anchor: middle; } .fg-ch .yl { text-anchor: start; fill: var(--accent-text); }
.fg-ch .l0, .fg-ch .l1 { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; transition: stroke-dashoffset 1.1s var(--ease), opacity .4s; }
.fg-ch .l0 { stroke: #E59A7F; } .fg-ch .l1 { stroke: var(--gold); stroke-dashoffset: 1; opacity: 0; }
.fg[data-mode="fresh"] .l0 { opacity: .18; } .fg[data-mode="fresh"] .l1 { stroke-dashoffset: 0; opacity: 1; }
.fg-ch circle { stroke: var(--panel); stroke-width: 2; transition: opacity .4s, r .3s; }
.fg-ch .d0 { fill: #E59A7F; } .fg-ch .d0.t-good { fill: var(--gold); } .fg-ch .d1 { fill: var(--gold); opacity: 0; }
.fg[data-mode="fresh"] .d0 { opacity: .2; } .fg[data-mode="fresh"] .d1 { opacity: 1; }
.fg-ch .cur { stroke: var(--bone); stroke-width: 1; stroke-dasharray: 3 4; transition: transform .3s var(--ease); }
.fg-lab { display: block; margin-top: 6px; font: 600 .75rem/1.3 var(--mono); color: var(--muted); }
.fg-in { width: 100%; accent-color: #CDA85F; height: 28px; cursor: pointer; }
.fg-r { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 0 !important; }
.fg-r b { font: 700 1.2rem/1.2 var(--serif); } .fg-r span { font-weight: 600; } .fg-r em { font-style: normal; margin-left: auto; font: 600 .82rem/1.3 var(--mono); color: var(--gold); }
.fg-v { margin: 12px 0 0 !important; padding-top: 12px; border-top: 1px dashed var(--rule); font: 700 1.05rem/1.35 var(--serif); color: var(--gold); }
.fg .note { margin: 8px 0 0 !important; font-size: .8rem; }

/* framework: build a test concept from the three axes */
.tb { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 16px; margin-top: clamp(24px, 4vh, 36px); }
.tb-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tb-col { padding: 20px; border: 1px solid var(--rule); border-radius: 18px; background: var(--panel); }
.tb-col h3 { font-size: 1.5rem; margin-bottom: 2px; } .tb-what { margin: 0 0 14px !important; font-size: .88rem; color: var(--muted); }
.tb-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tb-o { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); color: var(--ink); font: 600 .9rem/1.25 var(--sans); text-align: left; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.tb-o[aria-pressed="true"] { background: var(--espresso); color: var(--gold); border-color: var(--espresso); }
@media (hover: hover) { .tb-o[aria-pressed="false"]:hover { border-color: var(--accent); } }
.tb-out { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 18px; background: var(--espresso); color: var(--bone); }
.tb-ph { width: min(240px, 100%); margin: 0 auto; padding: 10px; border-radius: 26px; border: 1px solid rgba(205,168,95,.35); background: #0E0A08; }
.tb-top { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; } .tb-top i { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #CDA85F, #A9853D); } .tb-top span { height: 6px; width: 50%; border-radius: 3px; background: rgba(241,233,222,.2); }
.tb-media { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 14px; border-radius: 14px; background: radial-gradient(120% 90% at 30% 20%, #3A2C20, #17110E); overflow: hidden; }
.tb-fmt { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 99px; background: rgba(241,233,222,.12); font: 600 .75rem/1.3 var(--mono); color: #D9CDBE; }
.tb-hook { margin: 0 !important; font: 700 1.35rem/1.15 var(--serif); color: var(--bone); text-align: center; }
.tb-hook.pop, .tb-angle.pop, .tb-fmt.pop { animation: wdIn .4s var(--ease); }
.tb-angle { margin: 10px 4px 6px !important; font: 700 .95rem/1.3 var(--serif); color: var(--gold); }
.tb-line { display: block; height: 6px; margin: 0 4px 6px; border-radius: 3px; background: rgba(241,233,222,.16); } .tb-line.s { width: 60%; }
.tb-cta { display: block; margin: 8px 4px 4px; padding: 7px; border-radius: 8px; background: var(--gold); color: var(--espresso); font: 600 .78rem/1 var(--sans); text-align: center; }
.tb-sum { margin: 0 !important; font-size: .92rem; color: #D9CDBE; } .tb-sum b { color: var(--gold); }
.tb-shuffle { align-self: flex-start; }
.tb-count { margin: 0 !important; font: 600 .75rem/1.5 var(--mono); color: #B9AA98; }
.tb-whys { display: grid; margin-top: 14px; } .tb-why { grid-area: 1 / 1; margin: 0 !important; max-width: 52em; color: var(--muted); opacity: 0; transition: opacity .35s; } .tb-why.on { opacity: 1; } .tb-why b { color: var(--ink); }
/* the cadence: a loop of five */
.cy-wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 60px); align-items: center; margin-top: clamp(48px, 8vh, 80px); }
.cy-h { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; }
.cy-ps { display: grid; margin-top: 10px; } .cy-p { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s, transform .4s var(--ease), visibility 0s .4s; } .cy-p.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cy-p h4 { margin: 0 0 8px; font: 700 1.6rem/1.2 var(--serif); color: var(--accent-text); } .cy-p p { margin: 0 !important; font-size: 1.05rem; max-width: 36em; }
.cy { position: relative; aspect-ratio: 1; width: min(420px, 100%); margin: 0 auto; }
.cy svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cy svg circle { fill: none; stroke: var(--rule); stroke-width: .8; } .cy svg .cy-run { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, .2)); transition: stroke-dashoffset .5s var(--ease); }
.cy-n { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; width: 110px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.cy-n b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--bg); font: 600 .8rem/1 var(--mono); color: var(--muted); transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease); }
.cy-n span { font: 700 .95rem/1.2 var(--serif); }
.cy-n.on b { background: var(--accent); border-color: var(--accent); color: #FAFAF8; transform: scale(1.12); }
@media (hover: hover) { .cy-n:hover b { border-color: var(--accent); } }
.cy-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 600 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sv-fw .closing-line { margin-top: clamp(40px, 6vh, 60px) !important; }

/* output: a cycle drawn as range bars */
.ob { margin-top: clamp(24px, 4vh, 36px); padding: clamp(22px, 3vw, 34px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.ob-scale { display: flex; justify-content: space-between; margin-left: calc(13rem + 18px); margin-right: calc(9rem + 18px); padding-bottom: 8px; border-bottom: 1px solid var(--line); font: 400 .75rem/1 var(--mono); color: var(--muted); }
.obs { list-style: none; margin: 0; padding: 0; }
.obs li { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 9rem; grid-template-areas: "k b v" "k n n"; gap: 4px 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); transition: background .3s; }
.ob-k { grid-area: k; font: 700 1.08rem/1.3 var(--serif); align-self: start; } .obs b { grid-area: v; font: 700 1.15rem/1.2 var(--serif); color: var(--accent-text); } .obs small { grid-area: n; color: var(--muted); font-size: .88rem; }
.ob-bar { grid-area: b; position: relative; height: 14px; border-radius: 7px; background: var(--panel2); overflow: hidden; }
.ob-bar i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 7px; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.ob-bar.all i { left: 0; width: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 16px); }
.ob.go .ob-bar i { transform: none; }
.obs li:nth-child(2) i { transition-delay: .1s; } .obs li:nth-child(3) i { transition-delay: .2s; } .obs li:nth-child(4) i { transition-delay: .3s; } .obs li:nth-child(5) i { transition-delay: .4s; } .obs li:nth-child(6) i { transition-delay: .5s; }
@media (hover: hover) { .obs li:hover { background: var(--panel2); } }
.ob-turn { margin-top: 16px; }

/* proof: Meta's own note */
.mq { margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: #F1E9DE; color: var(--espresso); }
.mq-k { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; font: 600 .78rem/1.3 var(--sans); color: #1D4ED8; }
.mq-k svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.mq blockquote { margin: 0; font-size: .98rem; line-height: 1.55; }
.jp-f.go .cpl-bar.a i { transform: scaleX(var(--k)); }

/* ===================== Brand Identity page ===================== */
/* hero: five layers and a waterline */
.bk { margin: 0; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.bk figcaption { margin-bottom: 16px; font: 600 .82rem/1.3 var(--mono); color: var(--accent-text); }
.bls { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bl { outline: none; order: var(--o, 0); }
.bl:nth-child(1) { --o: 0; } .bl:nth-child(2) { --o: 1; } .bk-water { order: 2; } .bl:nth-child(3) { --o: 3; } .bl:nth-child(4) { --o: 4; } .bl:nth-child(5) { --o: 5; }
.bl-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n d" "b d"; gap: 2px 14px; align-items: center; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); transition: background .5s, border-color .5s, transform .4s var(--ease), box-shadow .5s; cursor: default; }
.bl-in b { grid-area: n; font: 700 1.02rem/1.25 var(--serif); } .bl-in span { grid-area: b; font-size: .82rem; color: var(--muted); } .bl-in em { grid-area: d; font: 600 .75rem/1 var(--mono); font-style: normal; color: var(--muted); }
.bl.t-accent .bl-in { background: rgba(205,168,95,.16); border-color: rgba(205,168,95,.5); }
.bl.t-mid .bl-in { background: var(--panel2); }
.bl.t-deep .bl-in { background: #120D0B; border-style: dashed; }
.bl:focus-visible .bl-in { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) { .bl:hover .bl-in { transform: translateX(6px); border-color: var(--gold); } }
.bk-water { position: relative; height: 22px; display: flex; align-items: center; }
.bk-water::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px dashed rgba(120,170,200,.55); }
.bk-water span { position: relative; margin-left: auto; padding: 0 8px; background: var(--panel); font: 600 .75rem/1 var(--mono); color: rgba(150,190,215,.9); }
.bk[data-c="top"] .bl:nth-child(-n + 2) .bl-in { background: var(--gold); border-color: var(--gold); transform: translateX(10px); } .bk[data-c="top"] .bl:nth-child(-n + 2) .bl-in * { color: var(--espresso); }
.bk[data-c="bottom"] .bl:nth-child(n + 4) .bl-in { background: var(--gold); border-color: var(--gold); border-style: solid; box-shadow: 0 0 0 4px rgba(205,168,95,.2); } .bk[data-c="bottom"] .bl:nth-child(n + 4) .bl-in * { color: var(--espresso); }
.bk[data-c="bottom"] .bls { transform: translateY(-4px); }
.bk-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bk-b { min-height: 44px; padding: 0 18px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel2); color: var(--ink); font: 600 .9rem/1.2 var(--sans); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.bk-b[aria-pressed="true"] { background: var(--gold); color: var(--espresso); border-color: var(--gold); }
@media (hover: hover) { .bk-b[aria-pressed="false"]:hover { border-color: var(--gold); } }
.bk-r { display: grid; margin: 14px 0 0 !important; font: 700 1.1rem/1.35 var(--serif); }
.bk-r span { grid-area: 1 / 1; opacity: 0; transition: opacity .35s; } .bk-r .r0 { color: var(--muted); font: 400 .9rem/1.4 var(--sans); }
.bk[data-c=""] .r0, .bk[data-c="top"] .r1, .bk[data-c="bottom"] .r2 { opacity: 1; } .bk .r2 { color: var(--gold); }
.bk .note { margin: 12px 0 0 !important; font-size: .8rem; }

/* the distinction: drag the divider */
.dv { position: relative; display: grid; margin-top: clamp(24px, 4vh, 36px); border-radius: 22px; overflow: hidden; border: 1px solid var(--rule); }
.dv-c { grid-area: 1 / 1; padding: clamp(26px, 3.4vw, 46px); }
.dv-c.a { background: var(--panel); color: var(--ink); padding-right: 52%; }
.dv-c.b { background: var(--espresso); color: var(--bone); padding-left: 52%; clip-path: inset(0 0 0 var(--x)); }
.dv-w { margin: 0 0 6px !important; font: 600 .75rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); } .dv-c.b .dv-w { color: var(--gold); }
.dv-c h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-bottom: 8px; } .dv-c.b h3 { color: var(--bone); }
.dv-q { font: 700 1.1rem/1.4 var(--serif); color: var(--accent-text); } .dv-c.b .dv-q { color: var(--gold); }
.dv-c ul { margin: 14px 0; padding-left: 18px; } .dv-c li { margin-bottom: 6px; }
.dv-y { margin: 0 !important; padding-top: 12px; border-top: 1px dashed currentColor; opacity: .85; font-size: .95rem; }
.dv-h { position: absolute; top: 0; bottom: 0; left: var(--x); width: 0; pointer-events: none; }
.dv-h::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--gold); }
.dv-h span { position: absolute; top: 50%; left: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--gold); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.dv-h span::before, .dv-h span::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: solid var(--espresso); border-width: 0 0 2px 2px; }
.dv-h span::before { left: 12px; transform: rotate(45deg); } .dv-h span::after { right: 12px; transform: rotate(-135deg); }
.dv-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.dv-in:focus-visible + * , .dv:focus-within .dv-h span { outline: 2px solid var(--ink); outline-offset: 3px; }
.dv-hint { margin: 10px 0 0 !important; font: 600 .78rem/1.4 var(--mono); color: var(--muted); }

/* the reasoning: argument cards that turn over */
.ars { list-style: none; margin: clamp(24px, 4vh, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ar { outline: none; }
.ar-in { position: relative; height: 100%; min-height: 196px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden; }
.ar:focus-visible .ar-in { outline: 2px solid var(--gold); outline-offset: 3px; }
.ar-f, .ar-b { position: absolute; inset: 0; padding: 22px; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.ar-n { font: 700 1.4rem/1 var(--serif); color: var(--gold); } .ar-f h3 { margin: 12px 0 8px; font-size: 1.25rem; } .ar-f p { margin: 0 !important; color: var(--muted); font: 700 1rem/1.4 var(--serif); }
.ar-p { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule); color: var(--gold); }
.ar-b { margin: 0 !important; display: flex; flex-direction: column; justify-content: center; background: var(--bone); color: var(--espresso); font-size: .95rem; line-height: 1.55; opacity: 0; transform: translateY(12px); }
.ar-b b { display: block; margin-bottom: 6px; font: 700 1rem/1.3 var(--serif); color: #7A5A16; }
.ar:hover .ar-b, .ar:focus .ar-b, .ar.open .ar-b { opacity: 1; transform: none; } .ar:hover .ar-f, .ar:focus .ar-f, .ar.open .ar-f { opacity: 0; }
/* the same tests, on this page */
.spc { margin-top: clamp(48px, 8vh, 80px); padding: clamp(24px, 3vw, 38px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.spc-h { font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important; }
.spc-g { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: 16px; }
.spc h4 { margin: 0 0 6px; font: 700 1.15rem/1.3 var(--serif); color: var(--gold); } .spc-n { color: var(--muted); font-size: .9rem; }
.lz { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 14px; }
.lz li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--rule); }
.lz img { width: auto; max-width: 80%; } .lz span { font: 600 .78rem/1 var(--mono); color: var(--muted); }
.lz-i img { width: 16px !important; height: 16px; }
.spc-v { margin: 0 !important; font-size: .9rem; } .cp-v { font: 700 1rem/1.4 var(--serif) !important; color: var(--gold); }
.cps { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.cp { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--rule); }
.cp-s { display: grid; place-items: center; width: 44px; height: 32px; border-radius: 8px; border: 1px solid var(--rule); font: 700 1rem/1 var(--serif); }
.cp-n { font-size: .9rem; } .cp-r { font: 700 1.05rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.cp-p { padding: 3px 8px; border-radius: 99px; font: 600 .75rem/1.3 var(--mono); background: rgba(95,185,138,.16); color: #7FCFA2; } .cp-p.f { background: rgba(224,112,95,.16); color: #E59A7F; }

/* the brand kit: folders */
.mf { margin-top: clamp(24px, 4vh, 36px); }
.mf-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 12px; }
.mf-tabs button { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 1px solid var(--rule); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--panel2); color: var(--muted); font: 700 1rem/1.2 var(--serif); cursor: pointer; transition: background .3s, color .3s; }
.mf-tabs button small { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 99px; background: var(--line); font: 600 .75rem/1 var(--mono); color: var(--ink); }
.mf-tabs [aria-selected="true"] { background: var(--espresso); color: var(--gold); border-color: var(--espresso); } .mf-tabs [aria-selected="true"] small { background: var(--gold); color: var(--espresso); }
@media (hover: hover) { .mf-tabs [aria-selected="false"]:hover { color: var(--ink); } }
.mf-ps { padding: clamp(22px, 3vw, 34px); border-radius: 0 18px 18px 18px; background: var(--espresso); color: var(--bone); }
.mf-p ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.mf-p li { position: relative; padding: 12px 0 12px 40px; border-top: 1px solid rgba(205,168,95,.18); animation: wdIn .4s var(--ease) both; animation-delay: calc(var(--d, 0) * 60ms); }
.mf-p li::before { content: ""; position: absolute; left: 0; top: 12px; width: 26px; height: 22px; border-radius: 4px 4px 6px 6px; background: linear-gradient(var(--gold), var(--gold-deep)); clip-path: polygon(0 18%, 38% 18%, 48% 0, 100% 0, 100% 100%, 0 100%); }
.mf-t { margin: 12px 0 0 !important; font: 600 .78rem/1.4 var(--mono); color: var(--muted); }
.mf-terms { margin-top: clamp(40px, 6vh, 60px); }

/* ===================== Customer Growth & Retention page ===================== */
/* hero: where budget goes vs where margin is; the matching halves link */
.rs { margin: 0; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.rs figcaption { margin-bottom: 16px; font: 600 .82rem/1.3 var(--mono); color: var(--accent-text); }
.rs-cols { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: stretch; }
.rs-l { margin: 0 0 10px !important; font: 700 1rem/1.3 var(--serif); }
.rs-bar { display: flex; flex-direction: column; height: 300px; border-radius: 14px; overflow: hidden; }
.rs-s { flex: var(--p) 0 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 14px; min-height: 0; outline: none; transition: filter .3s, opacity .3s; cursor: default; }
.rs-s b { font: 700 1.6rem/1 var(--serif); }
.rs-s.sm { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; } .rs-s.sm b { font-size: 1.1rem; } .rs-s.sm em { font-size: .8rem; } .rs-s em { font-style: normal; font-size: .85rem; }
.rs-s.t-loss { background: repeating-linear-gradient(135deg, rgba(224,112,95,.28) 0 3px, rgba(224,112,95,.14) 3px 9px); color: #F1C3B5; }
.rs-s.t-accent { background: var(--gold); color: var(--espresso); }
.rs-link { width: 100%; height: 300px; margin-top: calc(1rem * 1.3 + 10px); }
.rs-link path { transition: opacity .3s; } .lk-loss { fill: rgba(224,112,95,.16); } .lk-accent { fill: rgba(205,168,95,.32); }
.rs[data-h="loss"] .t-accent, .rs[data-h="loss"] .lk-accent, .rs[data-h="accent"] .t-loss, .rs[data-h="accent"] .lk-loss { opacity: .25; }
.rs-s:focus-visible { outline: 2px solid var(--bone); outline-offset: -2px; }
.rs-v { margin: 16px 0 0 !important; font: 700 1.15rem/1.35 var(--serif); color: var(--gold); }
.rs .note { margin: 8px 0 0 !important; font-size: .8rem; }
.rs-s { transform-origin: top; }
.rs.go .rs-s { animation: rsIn .9s var(--ease) both; } .rs.go .rs-c + svg + .rs-c .rs-s { animation-delay: .35s; }
@keyframes rsIn { from { opacity: 0; transform: scaleY(.4); } }

/* calculator */
.cx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; margin-top: clamp(24px, 4vh, 36px); }
.cx-ins { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--rule); border-radius: 22px; background: var(--panel); }
.cx-f { display: grid; gap: 6px; } .cx-f > label:first-child { font: 600 .82rem/1.3 var(--mono); color: var(--muted); }
.cx-in { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel2); }
.cx-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(169,133,61,.18); }
.cx-in i { font: 700 1.2rem/1 var(--serif); font-style: normal; color: var(--muted); }
.cx-in input { flex: 1; min-width: 0; border: 0; background: none; font: 700 1.4rem/1 var(--serif); color: var(--ink); outline: none; font-variant-numeric: tabular-nums; }
.cx-r { width: 100%; accent-color: #A9853D; height: 26px; }
.cx-us { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-u { flex: 1; min-height: 44px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel2); color: var(--ink); font: 600 .9rem/1 var(--sans); cursor: pointer; transition: background .3s, color .3s; }
.cx-u[aria-pressed="true"] { background: var(--espresso); color: var(--gold); border-color: var(--espresso); }
.cx-out { display: grid; gap: 18px; align-content: center; padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: var(--espresso); color: var(--bone); }
.cx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "b b"; gap: 6px 12px; }
.cx-row > span:first-child { grid-area: l; color: #CBBFB0; font-size: .92rem; } .cx-row b { grid-area: v; font: 700 1.4rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.cx-bar { grid-area: b; height: 14px; border-radius: 7px; background: rgba(241,233,222,.08); overflow: hidden; }
.cx-bar i { display: block; height: 100%; width: calc(var(--w, 0) * 100%); border-radius: inherit; transition: width .6s var(--ease); }
.cx-bar .now { background: rgba(241,233,222,.6); } .cx-bar .aft { background: var(--gold); }
.cx-gain { display: grid; gap: 4px; padding-top: 18px; border-top: 1px dashed rgba(205,168,95,.3); }
.cx-gain span { color: #CBBFB0; } .cx-gain b { font: 700 clamp(2.4rem, 5vw, 3.6rem)/1 var(--serif); color: var(--gold); font-variant-numeric: tabular-nums; } .cx-gain small { color: #B9AA98; font-size: .85rem; }
.cx-capn[hidden] { display: none; }
.cx-as { margin-top: 16px; padding: 16px 20px; border: 1px solid var(--rule); border-radius: 16px; background: var(--panel); }
.cx-as summary { cursor: pointer; font: 700 1.05rem/1.3 var(--serif); } .cx-as ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); } .cx-as li + li { margin-top: 6px; }

/* lifecycle: the journey and the inbox */
.lf { margin-top: clamp(24px, 4vh, 36px); }
.lf-track { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.lf-line { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 21px; height: 2px; background: var(--line); }
.lf-line b { position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .5s var(--ease); }
.lf-s { width: 100%; display: grid; justify-items: center; gap: 8px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.lf-d { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--bg); font: 600 .78rem/1 var(--mono); color: var(--muted); transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease); }
.lf-t { font: 700 .92rem/1.25 var(--serif); opacity: .7; text-align: center; }
.lf-s.done .lf-d { border-color: var(--gold); color: var(--gold); } .lf-s.on .lf-d { background: var(--gold); border-color: var(--gold); color: var(--espresso); transform: scale(1.1); } .lf-s.on .lf-t { opacity: 1; }
@media (hover: hover) { .lf-s:hover .lf-t { opacity: 1; } }
.lf-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; margin-top: 26px; }
.lf-ms { display: grid; }
.lf-m { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s, transform .45s var(--ease), visibility 0s .45s; }
.lf-m.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lf-tr { margin: 0 0 10px !important; font: 600 .82rem/1.4 var(--mono); color: var(--gold); } .lf-tr span { margin-right: 10px; padding: 2px 8px; border-radius: 99px; background: rgba(205,168,95,.16); }
.lf-mail { max-width: 640px; padding: 20px 22px; border-radius: 18px; background: var(--bone); color: var(--espresso); box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.lf-mh { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(23,17,14,.1); }
.lf-mh i { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #CDA85F, #A9853D); } .lf-mh b { display: block; font: 700 1rem/1.2 var(--serif); } .lf-mh span { font-size: .85rem; color: #5F5A55; }
.lf-mail p { margin: 0 0 12px !important; } .lf-imp { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--espresso); color: var(--gold); font: 600 .78rem/1.3 var(--mono); }
.lf-play .p1, .lf-play[aria-pressed="true"] .p0 { display: none; } .lf-play[aria-pressed="true"] .p1 { display: inline; }

/* reputation */
.om-g, .om-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(24px, 4vh, 36px); }
.om-gen, .om-resp, .om-mon { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--rule); border-radius: 20px; background: var(--panel); }
.om-steps { margin: 0; padding-left: 22px; } .om-steps li { padding: 8px 0; } .om-steps li::marker { font: 700 1rem var(--serif); color: var(--accent-text); }
.rts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rt { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; }
.rt svg { width: 52px; height: 52px; transform: rotate(-90deg); } .rt circle { fill: none; stroke: var(--line); stroke-width: 3.5; }
.rt .rt-a { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.rts.go .rt-a { stroke-dashoffset: calc(1 - var(--f)); }
.rt span { display: block; color: var(--muted); font-size: .88rem; } .rt b { font: 700 1.08rem/1.3 var(--serif); }
.om-mon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .om-mon li { display: flex; gap: 10px; align-items: flex-start; }
.om-mon svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.om-rule { align-self: stretch; }

/* ===================== Legal pages (privacy, terms) ===================== */
.sv-lg { padding-bottom: clamp(56px, 9vh, 96px); }
.lg-top { max-width: 980px; }
.sv-lg h1 { margin-bottom: 18px; }
.lg-sf { max-width: 26em; margin: 0 0 14px !important; font: 700 clamp(1.4rem, 2.6vw, 2.1rem)/1.25 var(--serif); color: var(--gold); text-wrap: balance; }
.lg-up { font: 600 .78rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lg-intro { max-width: 46em; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); } .lg-intro p { font-size: 1.08rem; opacity: .9; }
.lg-hs { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lg-h { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--rule); border-radius: 16px; background: var(--panel); transition: border-color .3s; }
.lg-h b { font: 700 1.2rem/1.2 var(--serif); color: var(--gold); } .lg-h span { font-size: .9rem; color: #D9CDBE; }
@media (hover: hover) { .lg-h:hover { border-color: var(--gold); } }
.lg-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; max-width: 1180px; }
.lg-toc { position: sticky; top: 100px; }
.lg-th { margin: 0 0 12px !important; font: 600 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.lg-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.lg-toc a { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 8px 0 8px 14px; color: var(--muted); text-decoration: none; font-size: .92rem; line-height: 1.35; transition: color .25s; }
.lg-toc a span { font: 600 .75rem/1.6 var(--mono); }
.lg-toc a::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; background: var(--accent); transform: scaleY(0); transition: transform .3s var(--ease); }
.lg-toc a.on { color: var(--ink); font-weight: 600; } .lg-toc a.on::before { transform: none; }
@media (hover: hover) { .lg-toc a:hover { color: var(--ink); } }
.lg-pr { height: 3px; margin-top: 16px; border-radius: 2px; background: var(--line); overflow: hidden; } .lg-pr i { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.lg-body { max-width: 760px; }
.lg-s { padding: 34px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.lg-s:first-child { padding-top: 0; }
.lg-s h2 { position: relative; display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px !important; font: 700 clamp(1.4rem, 2.2vw, 1.8rem)/1.2 var(--serif) !important; letter-spacing: -0.01em; max-width: none !important; }
.lg-n { font: 600 .82rem/1 var(--mono); color: var(--accent-text); }
.lg-ln { margin-left: auto; padding: 4px 8px; border-radius: 6px; font: 600 .9rem/1 var(--mono); color: var(--muted); text-decoration: none; opacity: 0; transition: opacity .2s, color .2s; }
.lg-s:hover .lg-ln, .lg-ln:focus-visible { opacity: 1; }
@media (pointer: coarse) { .lg-ln { display: none; } } @media (hover: hover) { .lg-ln:hover { color: var(--accent-text); } }
.lg-s p { font-size: 1.04rem; line-height: 1.7; }
.lg-rows { margin: 16px 0; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.lg-rows div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 16px; padding: 12px 18px; border-top: 1px solid var(--line); transition: background .25s; }
.lg-rows div:first-child { border-top: 0; } .lg-rows dt { font-weight: 600; } .lg-rows dd { margin: 0; color: var(--muted); }
@media (hover: hover) { .lg-rows div:hover { background: var(--panel2); } }
.lg-b { margin: 14px 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lg-b li { position: relative; padding-left: 26px; line-height: 1.6; } .lg-b li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lg-b.chk li { padding-left: 34px; } .lg-b.chk li::before { left: 0; top: .2em; width: 22px; height: 22px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%23FAFAF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.lg-ask { margin-top: 36px; padding: clamp(24px, 3vw, 34px); border-radius: 20px; background: var(--espresso); color: var(--bone); }
.lg-ask h2 { margin: 0 0 8px !important; font: 700 1.4rem/1.25 var(--serif) !important; color: var(--gold); } .lg-ask p { margin: 0 !important; } .lg-ask a { display: inline-block; padding: 10px 0; color: var(--gold); font-weight: 600; }

/* phones and tablets */
@media (max-width: 1024px) {
  .hero-grid, .prob-grid, .proc-grid, .proof-grid, .sig-grid, .sv-do .sv-wrap, .lx-body { grid-template-columns: minmax(0, 1fr); }
  .lx-win { position: relative; top: 0; min-height: 0; }
  .sp, .bud, .tm-grid, .ml, .tb, .cy-wrap, .spc-g, .cx, .lg-grid { grid-template-columns: minmax(0, 1fr); } .lg-toc { position: static; } .lg-hs { grid-template-columns: 1fr 1fr; } .ars { grid-template-columns: 1fr 1fr; } .pcs { grid-template-columns: 1fr 1fr; } .hks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-grid { grid-template-columns: minmax(0, 1fr); } .vt-card { position: relative; top: 0; } .cgs { grid-template-columns: 1fr 1fr; } .fms { grid-template-columns: minmax(0, 1fr); }
  .cr-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .prob-h, .proc-head, .inc-side { position: static; }
  .inc-grid { grid-template-columns: minmax(0, 1fr); } .inc-nav { display: none; }
  .inc-it { min-height: 0; } .inc-in { opacity: 1; transform: none; padding: 30px 0; }
  .whys, .egs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .fit-cols, .dqs, .others, .inds, .sig-pair, .eng-grid, .fxs, .rqs, .qs-panes { grid-template-columns: minmax(0, 1fr); }
  .tls-row { grid-template-columns: minmax(0, 1fr); } .pst, .pst ul { gap: 12px 26px; }
  .lc-track { grid-template-columns: minmax(0, 1fr); gap: 14px; } .lc-line, .lc-buyer { display: none; } .lc-s { grid-template-columns: 44px 1fr auto; justify-items: start; text-align: left; column-gap: 12px; } .lc-dot { grid-row: span 2; margin: 0; } .lc-cr { grid-column: 3; grid-row: 1 / span 2; align-self: center; opacity: 1; } .lc-sum { grid-template-columns: minmax(0, 1fr); }
  .om-g, .om-g2 { grid-template-columns: minmax(0, 1fr); } .lf-track { overflow-x: auto; grid-template-columns: repeat(var(--n), 92px); padding-bottom: 6px; } .lf-line { right: auto; left: 46px; width: calc(92px * (var(--n) - 1)); } .lf-stage { grid-template-columns: minmax(0, 1fr); } .rs-bar, .rs-link { height: 240px; } .rs-cols { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); } .rs-s b { font-size: 1.25rem; } .rs-l { min-height: 2.7em; } .rs-link { margin-top: calc(2.7em + 10px); }
  .lg-hs { grid-template-columns: minmax(0, 1fr); } .lg-rows div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ars, .mf-p ol { grid-template-columns: minmax(0, 1fr); } .ar-in { min-height: 0; } .ar-f, .ar-b { position: static; opacity: 1; transform: none; } .ar-p { display: none; } .ar-b { border-top: 1px solid var(--rule); }
  .dv { display: block; } .dv-c.a, .dv-c.b { padding: 24px; clip-path: none; } .dv-h, .dv-in, .dv-hint { display: none; }
  .cp { grid-template-columns: 44px minmax(0, 1fr) auto; } .cp-p { grid-column: 3; } .cp-r { grid-column: 3; grid-row: 1; }
  .tb-cols { grid-template-columns: minmax(0, 1fr); } .tb-col ul { grid-template-columns: 1fr 1fr; } .ob-scale { display: none; } .obs li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "b b" "n n"; } .cy-n { width: 84px; } .cy-n span { font-size: .8rem; }
  .jr-track { overflow-x: auto; grid-template-columns: repeat(var(--n), 92px); padding-bottom: 6px; } .jr-line { right: auto; width: calc(92px * (var(--n) - 1)); left: 46px; } .jr-phs { display: none; }
  .tc button { grid-template-columns: minmax(0, 1fr) 24px; } .tc-k { grid-column: 1 / -1; } .tc-n { padding-left: 0; } .tm-seal { width: 70px; height: 70px; right: -6px; font-size: .7rem; }
  .mn { padding: 6px 8px; } .mn small { display: none; } .mn b { font-size: .78rem; } .gs-n small { display: none; } .gs-ic { width: 42px; height: 42px; }
  .sa-t { min-width: 0; } .sa-t thead { display: none; } .sa-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 14px 18px; border-bottom: 1px solid rgba(241,233,222,.08); } .sa-t th, .sa-t td { padding: 0; border: 0; width: auto !important; } .sa-n { grid-column: 1 / -1; font-size: .85rem; } .sa-v { white-space: normal; text-align: right; }
  .cw-cols, .gzs, .pcs, .hpack ol { grid-template-columns: minmax(0, 1fr); } .hks { grid-template-columns: minmax(0, 1fr); } .hk-in { min-height: 0; } .hk-f, .hk-b { position: static; opacity: 1; transform: none; } .hk-p { display: none; } .hk-f { gap: 12px; } .hk-b { background: none; color: var(--muted); padding-top: 0; }
  .cgs, .slas { grid-template-columns: minmax(0, 1fr); } .cg-in { min-height: 0; } .rc-day { grid-template-columns: minmax(0, 1fr); gap: 6px; } .rc-ticks { margin-left: 0; } .rc-in { width: 100%; margin-left: 0; } .rc-kind { width: 100%; } .rc-kind button { flex: 1; padding: 6px 10px; font-size: .85rem; }
  .lx-tabs { gap: 6px; } .lx-tabs button { min-height: 52px; padding: 12px; } .lx-tabs b { font-size: 1.05rem; } .lx-tabs small { display: none; }
  .lx-tags { display: none; } .lx-t { min-width: 0; } .lx-wrap::after { display: none !important; }
  .lx[data-k="seo"] .lx-t [data-c]:not([data-c="seo"]), .lx[data-k="aeo"] .lx-t [data-c]:not([data-c="aeo"]), .lx[data-k="geo"] .lx-t [data-c]:not([data-c="geo"]) { display: none; }
  .lx-t tbody th { width: 34%; }
  .ind-arrow { display: none; }
  .pmet { grid-template-columns: 1fr 1fr; } .pmet li:nth-child(3) { border-left: 0; } .pmet li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .rl-a, .rl.off .rl-a { grid-template-columns: minmax(0, 1fr) 24px; } .rl-a span { grid-column: 1; grid-row: 2; }
  .fv-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .fv-switch button { padding: 6px 12px; font-size: .875rem; }
  .fv-cap { display: block; margin: 16px 0 4px !important; font: 600 .8rem/1.3 var(--mono); color: var(--accent-text); }
  .fv-brk, .fv-read, .fv-tag { display: none; }
  .fv-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fv-b { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .fv-nm { grid-column: 1; grid-row: 1; } .fv-rt { grid-column: 1; grid-row: 2; } .fv-n { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .fv-bar { grid-column: 1 / -1; grid-row: 3; height: 10px; margin: 8px 0 0; border: 0; }
  .fv-bar i { top: 0; bottom: 0 !important; right: auto; height: auto; border-radius: 0 5px 5px 0; transform-origin: left; }
  .fv-keep { width: calc(var(--h) * 1%); transform: scaleX(var(--k, 0)); } .fv-lost { left: calc(var(--h) * 1%) !important; width: calc((var(--p) - var(--h)) * 1%); border: 1px dashed rgba(142,59,42,.5); border-left: 0; }
  .fv-lk { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; font-size: .875rem; color: var(--muted); } .fv-lk em { color: var(--clay); }
  .fv[data-view="business"] .fv-lk { display: block; }
  .fv-bar::after { display: none; }
  .cmp-wrap::after { content: "Swipe to compare"; position: sticky; left: 0; display: block; padding: 10px 18px; font: 600 .78rem/1 var(--mono); color: var(--accent-text); }
  .dt-a button { min-width: 0; flex: 1; }
}
@media (pointer: coarse) { .crumbs a { display: inline-block; padding: 10px 0; margin: -10px 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-rv], .inc-in { opacity: 1 !important; transform: none !important; } .fv-keep { --k: 1; }
  .rt .rt-a, .ob-bar i, .fg-ch .l1, .cw-code.live .ln, .rr-a, .hpack li::before, .cg-t, .cg-t b, .qs-in, .qs-list i, .qs-lines i, .gr-bar i, .qs-split i, .lc-sum, .lc-cr, .cr-bar i { opacity: 1 !important; transform: none !important; } .qs-ring { stroke-dashoffset: 0; } .qs-prize { opacity: 1; } .qs-caret { display: none; } .at-bar i { --k: 1; } .at-sum .at-bar em { opacity: .55; }
  .cpl-bar.b i { transform: scaleX(1); } .cpl-bar.a i { transform: scaleX(.1506); }
}

/* ===== /services/ overview: "Follow one customer" (18 Oct) ===== */
.so-hero .answer { max-width: 34em; }
.so-jy { margin-top: clamp(30px, 5vh, 54px); }
.so-jy-t { margin: 0 0 14px !important; font-size: .92rem; color: var(--muted); }
.so-jy-track { position: relative; }
.so-jy ol { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.so-jy a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 8px; border-radius: 14px; text-align: center; text-decoration: none; color: var(--ink); }
.so-jy a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.so-ic { position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--bg); overflow: hidden; isolation: isolate; transition: border-color .3s var(--ease); }
.so-ic::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .3s var(--ease); }
.so-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: color .3s var(--ease); }
.so-jy b { font: 600 .95rem/1.25 var(--sans); }
.so-jy small { font-size: .78rem; line-height: 1.3; color: var(--muted); }
.so-jy-line { position: absolute; left: 6.25%; right: 6.25%; top: 33px; height: 2px; background: var(--rule); }
.so-jy-line::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(0); animation: so-draw 2.6s .5s var(--ease) forwards; }
.so-jy-tok { position: absolute; left: 6.25%; right: 6.25%; top: 27px; height: 14px; transform: translateX(-100%); animation: so-run 2.6s .5s var(--ease) forwards; pointer-events: none; }
.so-jy-tok::after { content: ""; position: absolute; right: -7px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(205,168,95,.2); }
.so-jy li .so-ic { animation: so-lit .5s calc(.5s + var(--i) * .36s) var(--ease) forwards; }
@keyframes so-draw { to { transform: scaleX(1); } }
@keyframes so-run { to { transform: translateX(0); } }
@keyframes so-lit { to { border-color: var(--gold); color: var(--gold); } }
@media (hover: hover) { .so-jy a:hover .so-ic::before { transform: scale(1); } .so-jy a:hover .so-ic svg { color: var(--espresso); } .so-jy a:hover b { color: var(--gold); } }
@media (max-width: 760px) { .so-jy ol { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; } .so-jy-line, .so-jy-tok { display: none; } .so-jy small { display: none; } .so-jy b { font-size: .85rem; } }

/* the story: a road with the customer on it, eight chapters, each picture flips between "without help" and "with us" */
.so-head { max-width: 860px; }
.so-chs { --rx: 22px; --gut: 84px; position: relative; margin-top: clamp(30px, 6vh, 70px); padding-left: var(--gut); }
.so-road { position: absolute; left: var(--rx); top: 0; bottom: 0; width: 2px; background: var(--rule); }
.so-fill { position: absolute; inset: 0; background: var(--gold-deep); transform-origin: top; transform: scaleY(0); }
.so-dot { position: absolute; left: 1px; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--bg); font: 600 .78rem/1 var(--mono); font-style: normal; color: var(--muted); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.so-dot b { font-weight: 600; }
.so-dot.on { background: var(--gold); border-color: var(--gold-deep); color: var(--espresso); }
.so-tok { position: absolute; left: 1px; top: 0; z-index: 2; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; border-radius: 50%; background: var(--espresso); box-shadow: 0 0 0 2px var(--gold), 0 8px 22px rgba(23,17,14,.25); will-change: transform; }
.so-tok svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; }
.so-ch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 84px); align-items: center; min-height: 88vh; padding: clamp(36px, 7vh, 80px) 0; scroll-margin-top: 70px; }
.so-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px !important; }
.so-n { font: 600 .8rem/1 var(--mono); color: var(--accent-text); }
.so-svc { display: inline-flex; align-items: center; gap: 7px; font: 600 .9rem/1.2 var(--sans); color: var(--muted); }
.so-svc svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.so-tx h3 { margin: 0 0 16px; font: 700 clamp(1.9rem, 3.1vw, 2.8rem)/1.08 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.so-p { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--ink); opacity: .86; max-width: 30em; }
.so-do { max-width: 32em; margin: 22px 0 0 !important; padding: 16px 18px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: var(--panel2); }
.so-do b { display: block; margin-bottom: 6px; font: 600 .78rem/1 var(--mono); color: var(--accent-text); }
.so-pf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; max-width: 32em; margin: 20px 0 0 !important; }
.so-pf b { font: 700 clamp(1.4rem, 2vw, 1.75rem)/1.1 var(--serif); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--ink); }
.so-pf span { color: var(--muted); font-size: .95rem; }
.so-ln { display: inline-block; margin-top: 22px; font: 600 1rem/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.so-ln svg { display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .25s var(--ease); }
@media (hover: hover) { .so-ln:hover { color: var(--accent-text); } .so-ln:hover svg { transform: translateX(4px); } }

.so-sc { margin: 0; padding: clamp(14px, 2vw, 22px); border-radius: 22px; background: #17110E; color: #F1E9DE; border: 1px solid rgba(205,168,95,.25); box-shadow: 0 24px 50px rgba(23,17,14,.16); }
.so-sw { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #201915; border: 1px solid rgba(241,233,222,.12); }
.so-sw button { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: rgba(241,233,222,.7); font: 600 .88rem/1 var(--sans); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.so-sw button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.so-sw [data-v="off"][aria-pressed="true"] { background: rgba(229,154,127,.18); color: #F0B9A5; }
.so-sw [data-v="with"][aria-pressed="true"] { background: var(--gold); color: var(--espresso); }
@media (hover: hover) { .so-sw [aria-pressed="false"]:hover { color: #F1E9DE; background: rgba(241,233,222,.07); } }
.so-v { display: block; width: 100%; height: auto; margin: 14px 0 8px; font-family: var(--sans); }
.so-sc { contain: layout paint; } .so-v { will-change: transform; }   /* a flip repaints only its own picture */
.so-sc figcaption { display: grid; min-height: 3.2em; }
.so-sc figcaption p { grid-area: 1 / 1; margin: 0 !important; padding-left: 14px; border-left: 2px solid; font-size: 1rem; line-height: 1.45; transition: opacity .35s var(--ease), visibility .35s; }
.so-sc .c0 { border-color: #E59A7F; color: #F0C3B3; } .so-sc .c1 { border-color: var(--gold); color: #F1E9DE; }
.so-sc[data-s="with"] .c0, .so-sc[data-s="off"] .c1 { opacity: 0; visibility: hidden; }
.so-v .x0, .so-v .x1, .so-v .fd, .so-v .pop, .so-v .you, .so-v .oth, .so-v .cust { transform-box: fill-box; transition: opacity .45s var(--ease), transform .6s var(--ease); }
.so-sc[data-s="with"] .x0, .so-sc[data-s="off"] .x1 { opacity: 0; }
.so-v .in { transition-delay: var(--d, 0s); } .so-sc[data-s="off"] .in { transform: translateY(10px); }
/* brand: the middle card steps forward */
.so-v .pop { transform-origin: center; } .so-sc[data-s="with"] .pop { transform: translateY(-8px) scale(1.07); } .so-sc[data-s="with"] .fd { opacity: .3; }
/* creative: fresh cards fan out */
.so-v .fan { transform-origin: 50% 100%; } .so-sc[data-s="with"] .fan { transform: rotate(var(--r)); } .so-sc[data-s="off"] .fan { transform: rotate(0deg) translateY(12px); }
/* search: you move to the top */
.so-sc[data-s="with"] .you { transform: translateY(-72px); } .so-sc[data-s="with"] .oth { transform: translateY(36px); }
/* retention: the customer fades when nobody follows up */
.so-sc[data-s="off"] .cust { opacity: .35; }
/* small loops run only on the chapter in the middle of the screen */
.so-v .spin { transform-box: view-box; transform-origin: 200px 110px; }
.so-ch.cur .so-sc[data-s="off"] .spin { animation: so-spin 1s linear infinite; }
.so-ch.cur .so-sc[data-s="off"] .fl { animation: so-fl 2.1s var(--d) ease-out infinite; }
.so-ch.cur .so-sc[data-s="off"] .leave { animation: so-leave 2.4s ease-in-out infinite; }
.so-ch.cur .so-sc[data-s="off"] .drop { animation: so-drop 2.6s ease-in infinite; }
.so-ch.cur .so-sc[data-s="with"] .flow { animation: so-dash 1.1s linear infinite; }
.so-mv .so-v * { animation-play-state: paused !important; }
@keyframes so-spin { to { transform: rotate(360deg); } }
@keyframes so-fl { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes so-leave { 0%, 30% { transform: none; opacity: 1; } 80%, 100% { transform: translateX(26px); opacity: 0; } }
@keyframes so-drop { 0%, 25% { transform: none; opacity: 1; } 90%, 100% { transform: translateY(40px); opacity: 0; } }
@keyframes so-dash { to { stroke-dashoffset: -36; } }
.so-end { max-width: 860px; margin-top: clamp(20px, 4vh, 40px); padding-left: var(--gut, 84px); }
.so-end p { margin: 0 !important; font: 700 clamp(1.4rem, 2.2vw, 1.9rem)/1.25 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
@media (max-width: 960px) {
  .so-chs { --rx: 14px; --gut: 50px; }
  .so-tok { width: 34px; height: 34px; margin: -17px 0 0 -17px; } .so-tok svg { width: 18px; height: 18px; }
  .so-dot { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: .7rem; }
  .so-ch { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 22px; padding: 34px 0 40px; }
  .so-end { padding-left: 50px; }
}
@media (max-width: 420px) { .so-chs { --rx: 10px; --gut: 38px; } .so-end { padding-left: 38px; } .so-sw button { padding: 8px 12px; font-size: .84rem; } }

/* where to start: problems in plain words light the matching service */
.so-chips { list-style: none; margin: clamp(22px, 4vh, 36px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.so-chip { min-height: 46px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 .98rem/1.3 var(--sans); text-align: left; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.so-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.so-chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
@media (hover: hover) { .so-chip[aria-pressed="false"]:hover { border-color: var(--gold); color: var(--gold); } }
.so-ans { min-height: 1.5em; margin: 22px 0 28px !important; font: 700 clamp(1.25rem, 2vw, 1.6rem)/1.3 var(--serif); }
.so-ans a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.so-cds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.so-cd a { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; height: 100%; padding: 24px 22px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; transition: opacity .35s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.so-cd a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bone); transform: scaleY(0); transform-origin: bottom; transition: transform .38s var(--ease); }
.so-cd .so-ic { width: 46px; height: 46px; margin-bottom: 18px; background: transparent; color: var(--gold); }
.so-cd .so-ic::before { display: none; }
.so-cd h3 { margin-bottom: 10px; font-size: 1.2rem; }
.so-cd p { margin-bottom: 18px !important; color: var(--muted); font-size: .95rem; transition: color .3s var(--ease); }
.so-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font: 600 .82rem/1 var(--mono); color: var(--gold); transition: color .3s var(--ease); }
.so-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.so-cd a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) { .so-cd a:hover { color: var(--espresso); border-color: var(--bone); } .so-cd a:hover::before { transform: scaleY(1); } .so-cd a:hover p { color: #3E3631; } .so-cd a:hover .so-go, .so-cd a:hover .so-ic { color: #7A5A16; } .so-cd a:hover .so-ic { border-color: #A9853D; } }
.so-cds.picked .so-cd:not(.hit) a { opacity: .38; }
.so-cd.hit a { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
@media (max-width: 1100px) { .so-cds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .so-cds { grid-template-columns: minmax(0, 1fr); } .so-chip { width: 100%; } .so-chips li { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .so-jy-line::after { animation: none; transform: scaleX(1); } .so-jy-tok { animation: none; transform: none; } .so-jy li .so-ic { animation: none; border-color: var(--gold); color: var(--gold); }
  .so-tok { display: none; } .so-fill { transform: scaleY(1); }
  .so-v *, .so-sc figcaption p, .so-cd a, .so-cd a::before { transition-duration: .01s !important; animation: none !important; }
}
@media (pointer: coarse) { .so-ln { padding: 11px 0; margin-top: 12px; } }
.so-ln .nw { white-space: nowrap; }

/* ===== /services/ story = Storybook (Deepak's pick, 18 Oct): eight pages slide sideways as you scroll (swipe on phones) ===== */
.od-sec { padding-bottom: clamp(40px, 7vh, 80px); }
.od { position: relative; margin-top: clamp(20px, 4vh, 40px); }
.od-nav { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 var(--px); margin-bottom: 20px; }
.od-pv, .od-nx { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.od-pv svg, .od-nx svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; } .od-pv svg { transform: rotate(180deg); }
.od-pv:focus-visible, .od-nx:focus-visible, .od-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) { .od-pv:hover, .od-nx:hover { background: var(--gold); border-color: var(--gold); color: var(--espresso); } }
.od-dots { display: flex; align-items: center; }
.od-dot { position: relative; display: grid; place-items: center; width: 36px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.od-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rule); transition: background .3s var(--ease), transform .3s var(--ease); }
.od-dot.on::before { background: var(--gold-deep); transform: scale(1.4); }
.od-dot span { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .75rem; color: var(--ink); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.od-dot.on span { opacity: 1; }
.od-view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 26px 0 30px; }
.od-view::-webkit-scrollbar { display: none; }
.od-track { display: flex; gap: clamp(14px, 2vw, 28px); width: max-content; padding: 0 var(--px); }
.od-pg { flex: none; width: min(1120px, 84vw); scroll-snap-align: center; }
.od-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 60px); align-items: center; height: 100%; padding: clamp(24px, 3.4vw, 50px); border-radius: 28px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 30px 60px rgba(23,17,14,.1); overflow: hidden; }
.od-in::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 26px; background: linear-gradient(90deg, rgba(23,17,14,.08), transparent); pointer-events: none; }
.od-no { display: none; }
.od-t { position: relative; }
.od.pin .od-stage { position: sticky; top: 72px; height: calc(100vh - 72px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.od.pin .od-view { overflow: visible; scroll-snap-type: none; padding: 0; }
.od.pin .od-track { will-change: transform; }
.od.pin .od-pg { width: min(1120px, 80vw); }
.od.pin .od-in { max-height: calc(100vh - 72px - 120px); }
@media (max-width: 960px) { .od-in { grid-template-columns: minmax(0, 1fr); } .od-pg { width: 86vw; } .od-dot span { display: none; } }

.od-in { contain: layout paint; box-shadow: 0 16px 34px rgba(23,17,14,.08); }
.od .so-sc { box-shadow: none; }
.od-dot::before, .od-dot span { transition: none !important; }   /* animating the dots cost a slow frame per page (measured 6 → 0) */