/* DrivenOS overview v3 only (content/drivenos_page.py). Shared navigation, footer and closing CTA keep their own styles.
   Bold theme (A101): near-black page, cool neutral panels, two soft colour glows and one vivid accent. Headings (A112, Ryan's pick from the
   A110 font review): Sofia Sans Extra Condensed 800 in capitals; the interface mock-ups inside the demos keep Satoshi. */
/* A131: --section-y, --head-gap, the accent (Pine since A145), surfaces, glows and the button now live in base.css for every page */
.v3-page { overflow: clip;
  --pop: #3e8a63; --pop-ink: #0b0b0d;                   /* the accent: second heading lines, separators, tags, primary buttons */
  --glow-green: 44 221 127; --glow-amber: 249 164 58;   /* the two soft background glows (RGB channels): cool brand green, warm amber */
  --brand: var(--pop); --brand-ink: var(--pop-ink); --accent: var(--pop); --on-accent: var(--pop-ink);
  --surface: #111115; --surface-2: #19191f; --line: #24242b; --muted: #a3a3ae;
  --hf: "Sofia Sans Extra Condensed", "Satoshi", sans-serif;   /* the heading face */
  --fs-h2: clamp(42px, 6.6vw, 114px); }                        /* every section heading */
.v3-page [hidden] { display: none !important; }
.v3-page a:focus-visible, .v3-page button:focus-visible { outline: 2px solid var(--pop); outline-offset: 4px; }
.dos-section { padding-block: var(--section-y); margin: 0; }
.v3-page .v3-em { color: var(--pop); }


/* Centred section heads */
.dos-section-head { margin-bottom: var(--head-gap); }
.v3-head { max-width: 1120px; margin-inline: auto; text-align: center; }
.v3-page h2 { font: 800 var(--fs-h2)/1 var(--hf); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.v3-page h3 { text-transform: uppercase; text-wrap: balance; }
.v3-page :is(h2, h3, .v3-hero__title) { font-weight: 800 !important; }   /* type.css sets every heading to 400 !important */
.v3-page .vid__head { max-width: 8em; }   /* the closing CTA: two lines */
.v3-head p { max-width: 60ch; margin: 20px auto 0; text-wrap: pretty; color: var(--muted); font-size: 17px; line-height: 1.6; }
.v3-head p a { color: var(--text); border-bottom: 1px solid var(--brand); transition: color .3s; }
.v3-head p a:hover { color: var(--brand); }

/* ---------- Hero: type only, over soft pops of colour (green top-left, amber bottom-right) ---------- */
.v3-hero { position: relative; isolation: isolate; padding-block: var(--section-y); }
.v3-hero::before, .v3-hero::after { content: ''; position: absolute; z-index: -1; width: 1000px; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--glow) / .3), rgb(var(--glow) / .12) 50%, transparent); }
.v3-hero::before { --glow: var(--glow-green); left: -350px; top: -400px; }
.v3-hero::after { --glow: var(--glow-amber); right: -360px; bottom: -410px; }
.v3-hero__copy { display: flex; flex-direction: column; align-items: center; padding-top: clamp(40px, 5.5vw, 80px); text-align: center; }
.v3-eyebrow { margin-bottom: clamp(22px, 2.2vw, 32px); color: #c9c9d1; }
.v3-eyebrow h1 { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.v3-page .v3-hero__title { font: 800 clamp(66px, 9.24vw, 150px)/.92 var(--hf); letter-spacing: -.01em; text-transform: uppercase; }
.v3-hero__lead { max-width: 640px; margin-top: clamp(24px, 2.4vw, 34px); color: #b8b8c2; font-size: 18px; line-height: 1.6; text-wrap: balance; }
.v3-hero__lead span { white-space: nowrap; }
.v3-hero__actions { justify-content: center; gap: 28px; margin-top: 34px; }
.v3-hero__note { margin-top: 18px; color: var(--muted); font-size: 13px; }

/* Included-tools ticker: big condensed words between full-width rules; only the moving words fade at the edges */
.v3-ticker { margin-top: clamp(64px, 7vw, 104px); border-block: 1px solid rgb(255 255 255 / .1); overflow: hidden; }
.v3-ticker__move { display: flex; width: max-content; animation: v3-marquee 90s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.v3-ticker:hover .v3-ticker__move { animation-play-state: paused; }
.v3-ticker ul { display: flex; flex: none; list-style: none; }
.v3-ticker li { display: inline-flex; align-items: center; gap: clamp(22px, 2.4vw, 34px); padding: 24px 0 24px clamp(22px, 2.4vw, 34px); white-space: nowrap;
  color: #f4f4f0; font: 800 clamp(33px, 3.52vw, 53px)/1 var(--hf); letter-spacing: -.01em; text-transform: uppercase; }
.v3-ticker .ebx-star { width: clamp(18px, 1.6vw, 24px); height: auto; aspect-ratio: 1; color: var(--pop); animation: none; }
@keyframes v3-marquee { to { transform: translateX(-50%); } }

/* ---------- About: the heading left, the supporting copy and link in a right column (bottoms aligned), then the live
   thumbnail (pages/drivenos-live.css), content-wide and about 2:1 but never taller than the screen below the header.
   Clicking it opens the genuine 16:9 film in a popup. ---------- */
/* About (A113): one row, the heading and copy on the left, the live video thumbnail on the right (16:9, like the film it opens) */
.v3-demo__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.v3-live { position: relative; overflow: clip; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 24px; background: #0b0b0d; }
.v3-film { width: min(100vw - 32px, (100svh - 168px) * 16 / 9); max-width: none; max-height: none; margin: auto; padding: 0;
  overflow: visible; border: 0; background: none; color: #fff; }
.v3-film::backdrop { background: rgb(6 6 8 / .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.v3-film[open] { animation: v3-film-in .35s var(--ease); }
@keyframes v3-film-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.v3-film__frame { overflow: clip; aspect-ratio: 16 / 9; border-radius: 18px; background: #000; box-shadow: 0 40px 120px -20px rgb(0 0 0 / .8); }
.v3-film__frame video { display: block; width: 100%; height: 100%; }
.v3-film__close { position: absolute; right: 0; bottom: calc(100% + 12px); display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; transition: background-color .25s, color .25s; }
.v3-film__close:hover { background: var(--pop); color: var(--pop-ink); }
.v3-film__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html:has(.v3-film[open]) { overflow: hidden; }
.v3-demo__pain { color: var(--muted); font-size: 16px; line-height: 1.65; }
.v3-demo__pain strong { color: var(--text); font-weight: 600; }
.v3-demo__lead { color: #d0d0d0; font-size: 17px; line-height: 1.6; }
.v3-page .v3-demo__text h2 { font-size: clamp(34px, 4.2vw, 72px); }   /* a long heading in half the row: a step down so "Your tools should keep up." holds one line (3 lines in all) */
.v3-demo__copy { margin-top: clamp(24px, 2.4vw, 32px); }
.v3-demo__keep { white-space: nowrap; }   /* the heading motion splits words at a no-break space, so "keep up." holds together here */
.v3-demo__copy .v3-demo__lead { margin-top: 14px; }
.v3-demo__copy .dp-link { margin-top: 24px; }

/* ---------- What customers can do (A111, after Froxen's services list): a soft green glow in the top-left corner, the heading
   left and the lead right, then six capabilities in hairline-ruled rows, one open at a time (the first to start with): its line
   and pills on the left, its live demo on the right. The script in drivenos-v3.js adds .is-ready; without it every row stays open. ---------- */
.v3-ways { position: relative; isolation: isolate; overflow: clip; background: var(--surface); }
.v3-ways::before { content: ''; position: absolute; z-index: -1; top: -220px; left: -140px; width: 560px; aspect-ratio: 1; border-radius: 50%;
  background: rgb(var(--glow-green)); opacity: .16; filter: blur(150px); pointer-events: none; }
/* Heading in the left half, the line from 68% to the right edge (Ryan's marks, 2026-11-04) */
.v3-ways__head { display: grid; grid-template-columns: minmax(0, 50fr) minmax(0, 32fr); column-gap: 18%; align-items: end; }
.v3-page .v3-ways__head h2 { max-width: none; font-size: clamp(42px, 5vw, 84px); }   /* two lines in the half: "Run every revenue stream / from one place." */
.v3-ways__head p { color: #b8b8b8; font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.v3-ways__head p strong { color: var(--text); font-weight: 600; }   /* the lead-in line */
/* The picture: a live demo (pages/drivenos-ways.css) on a bright lit backdrop, Pine from the lower left, warm light from the
   upper right and two soft beams across, so the open capability stands out against the dark page */
.v3-ways__scene { position: relative; overflow: clip; aspect-ratio: 16 / 10; container-type: inline-size;
  background: linear-gradient(118deg, transparent 18%, rgb(255 255 255 / .5) 27%, transparent 36%),
    linear-gradient(118deg, transparent 52%, rgb(255 255 255 / .28) 58%, transparent 64%),
    radial-gradient(75% 95% at -5% 105%, rgb(62 138 99 / .95), transparent 62%),
    radial-gradient(65% 85% at 105% -5%, rgb(var(--glow-amber) / .75), transparent 62%),
    linear-gradient(135deg, #e3f7cc, #c9eedb 55%, #f6e2c8); }

/* ---------- Essential tools (A116, A117): Froxen's pinned process row. While pinned, page scroll slides the cards
   sideways and the card at the scroll point is active. The heading pins with the row when both fit under the header
   (data-pin="all"), else the row pins alone ("row"); too short a screen, reduced motion or no JS: a native sideways scroll. ---------- */
/* --tools-h2: Froxen sizes this heading so it stays on two lines beside its button (about 6vw) */
.v3-tools { --tools-h2: clamp(42px, 5.6vw, 96px); --tool-line: #2d2d38; --tool-dim: #8b8b96; position: relative; isolation: isolate; overflow: clip; background: transparent; }
.v3-tools::before { content: ''; position: absolute; z-index: -1; top: -140px; right: -120px; width: 560px; aspect-ratio: 1; border-radius: 50%; background: rgb(var(--glow-amber)); opacity: .22; filter: blur(150px); pointer-events: none; }
.v3-tools__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; }
.v3-page .v3-tools__head h2 { max-width: none; font-size: var(--tools-h2); }
.v3-tools__head .roll { flex: none; }
.v3-tools[data-pin="all"] .v3-tools__sticky, .v3-tools[data-pin="row"] .v3-tools__row { position: sticky; top: var(--tools-top, 96px); }
.v3-tools[data-pin="row"] .v3-tools__sticky { display: contents; }
.v3-tools__viewport { margin-inline: calc(-1 * var(--gutter)); padding: 24px var(--gutter) 0; overflow-x: clip; }
.v3-tools:not(.is-pinned) .v3-tools__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.v3-tools__viewport::-webkit-scrollbar { display: none; }
.v3-tools__viewport:focus-visible { outline: 2px solid var(--pop); outline-offset: -2px; }
.v3-tools__track { display: flex; gap: 40px; width: max-content; margin: 0; padding: 0; list-style: none; }
.v3-tool { display: flex; flex-direction: column; gap: 24px; flex: none; width: 440px; padding: 32px; border: 1px solid var(--tool-line); border-radius: 24px; background: var(--surface-2); scroll-snap-align: start; transition: border-color .5s, transform .5s; }
/* The number sits inline with the title, in the title's type (A117, like BeautyPro Funnels' cards); outlined until its card is active */
.v3-tool__num { flex: none; color: transparent; -webkit-text-stroke: 1.5px var(--tool-dim); font-variant-numeric: tabular-nums; transition: color .5s, -webkit-text-stroke-color .5s; }
/* Titles keep two lines' room so every card's illustration lines up across the row; a second line starts under the
   title, not under the number */
.v3-tool h3 { display: flex; align-items: baseline; gap: .3em; min-height: 2.2em; margin: 0; color: var(--text); font: 800 clamp(26px, 2.78vw, 40px)/1.1 var(--hf); letter-spacing: .02em; transition: color .5s; }
/* --tools-art: set by the script on short screens, a little narrower (so shorter) so the pinned row fits under the header */
.v3-tool__art { position: relative; container-type: inline-size; width: min(100%, var(--tools-art, 100%)); margin-inline: auto; aspect-ratio: 16 / 10; overflow: clip; }
.v3-tool__text { display: flex; flex: 1; flex-direction: column; }
.v3-tool__text p { margin: 0; color: #b8b8c2; font-size: 16px; line-height: 1.6; }
.v3-tool__tags { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: auto 0 0; padding: 24px 0 0; list-style: none; }
.v3-tool__tags li { padding: 6px 12px; border: 1px solid var(--tool-line); border-radius: 999px; color: var(--tool-dim); font: 600 14px/1 Inter, system-ui, sans-serif; text-transform: uppercase; white-space: nowrap; transition: border-color .5s, color .5s; }
.v3-tool.is-active { border-color: var(--pop); transform: translateY(-24px); }
.v3-tool.is-active .v3-tool__num { color: var(--pop); -webkit-text-stroke-color: var(--pop); }
.v3-tool.is-active h3 { color: var(--pop); }
.v3-tool.is-active .v3-tool__tags li { border-color: var(--detail); color: var(--detail); }
.v3-tools__rail { height: 2px; margin-top: 40px; overflow: hidden; border-radius: 999px; background: var(--tool-line); }
.v3-tools:not(.is-ready) .v3-tools__rail { display: none; }
.v3-tools__rail i { display: block; height: 100%; background: var(--pop); transform: scaleX(0); transform-origin: left; }
.v3-tools__fees { max-width: 70ch; margin-top: 32px; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 1100px) {   /* too narrow for the two-line heading beside its button: the button goes under it */
  .v3-tools { --tools-h2: var(--fs-h2); }
  .v3-tools__head { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 701px) and (max-height: 940px) {   /* laptop screens: tighter cards, so at 1440×900 the heading still pins with the row */
  .v3-tool { gap: 16px; }
  .v3-tools__rail { margin-top: 24px; }
}

/* Original interface artwork. Container units keep every composition intact at phone sizes. */
.vt-scene { position: absolute; inset: 0; color: #ececf0; font: 400 2.5cqw/1.4 var(--font-body); --vt-bg: #18181d; --vt-soft: #23232a; --vt-line: #34343d; --vt-muted: #a3a3ae; --vt-green: var(--pop); --vt-paper: #f2f2ee; --vt-ink: #16161a; }
.vt-scene *, .vt-scene *::before, .vt-scene *::after { box-sizing: border-box; }
.vt-scene b, .vt-scene strong { font-weight: 600; }
.vt-scene h4 { margin: 0; font: 400 5.4cqw/1.08 var(--font-display); letter-spacing: -.035em; text-transform: none; }
.vt-scene p { margin: 0; }
.vt-scene svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vt-scene:has(.vt-window--invoices) { transform: scale(.94); transform-origin: 50% 0; }
.vt-scene:has(.vt-window--contract) { transform: scale(.88); transform-origin: 50% 0; }
.vt-scene:has(.vt-window--email) { transform: scale(.9); transform-origin: 50% 0; }
.vt-scene:has(.vt-text-phone) { transform: translateY(3cqw) scale(.86); transform-origin: 50% 0; }
.vt-scene:has(.vt-mobile) { transform: translateY(3cqw) scale(.75); transform-origin: 50% 0; }
.vt-window { position: absolute; top: 6cqw; left: 0; width: 94cqw; overflow: hidden; border: 1px solid var(--vt-line); border-radius: 3.2cqw; background: var(--vt-bg); box-shadow: 0 3cqw 6cqw -4cqw #0009; }
.vt-bar { display: flex; align-items: center; gap: 2cqw; height: 9cqw; padding: 0 3cqw; border-bottom: 1px solid var(--vt-line); font-size: 2.3cqw; }
.vt-mark { display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 1cqw; background: var(--pop); color: var(--pop-ink); font: 400 3.2cqw/1 var(--font-display); }
.vt-dots { margin-left: auto; color: var(--vt-muted); letter-spacing: .12em; }
.vt-action { display: inline-block; padding: 1.4cqw 2.5cqw; border-radius: 1.1cqw; background: var(--pop); color: var(--pop-ink); font-size: 2.1cqw; font-weight: 600; }
.vt-invoice-head { display: flex; align-items: center; justify-content: space-between; padding: 3cqw; }
.vt-invoice-head > b { font: 400 4cqw/1.1 var(--font-display); }
.vt-window--invoices { top: 12cqw; width: 84cqw; }
.vt-table { padding: 0 3cqw 2cqw; }
.vt-table > div { display: grid; grid-template-columns: 1.6fr 1fr .7fr; align-items: center; gap: 2cqw; min-height: 8cqw; border-bottom: 1px solid var(--vt-line); font-size: 2.35cqw; }
.vt-table > div:last-child { border: 0; }
.vt-table > .vt-table__head { min-height: 5cqw; color: var(--vt-muted); font-size: 2cqw; }
.vt-table small { display: block; color: var(--vt-muted); font-size: 1.8cqw; }
.vt-table em { justify-self: start; padding: .5cqw 1.4cqw; border-radius: 99px; background: #2a2a33; color: var(--vt-green); font: normal 600 1.9cqw/1.5 var(--font-body); }
.vt-table .vt-pending { background: var(--vt-soft); color: #d6d6dc; }
.vt-receipt { position: absolute; top: 3cqw; right: 0; display: flex; align-items: center; flex-direction: column; width: 31cqw; padding: 3cqw 2.6cqw; border: 1px solid #fff9; border-radius: 2cqw; background: var(--vt-paper); color: var(--vt-ink); box-shadow: 0 3cqw 6cqw -3cqw #0008; }
.vt-receipt > i { display: grid; place-items: center; width: 6cqw; height: 6cqw; margin-bottom: 1.6cqw; border-radius: 50%; background: var(--pop); color: var(--pop-ink); }
.vt-receipt svg { width: 3.8cqw; }
.vt-receipt > b { font-size: 2.1cqw; }
.vt-receipt > strong { margin-top: 1.8cqw; font: 400 4.3cqw/1.2 var(--font-display); }
.vt-receipt > span { margin: .8cqw 0 2.2cqw; color: #5a5a64; font-size: 1.8cqw; }
.vt-receipt > div { display: flex; justify-content: space-between; width: 100%; padding-top: 1.2cqw; border-top: 1px solid #d0d0d4; font-size: 1.7cqw; }
.vt-receipt > div + div { margin-top: 1.2cqw; }
.vt-builder, .vt-contract { display: grid; grid-template-columns: 18% 82%; }
.vt-builder > aside, .vt-contract > aside { display: flex; flex-direction: column; gap: 2cqw; padding: 3cqw 1.6cqw; background: #121216; color: var(--vt-muted); font-size: 1.8cqw; }
.vt-builder > aside span, .vt-contract > aside span { padding: 1cqw; }
.vt-scene .is-active { border-radius: .8cqw; background: #2a2a33; color: #f2f2f5; }
.vt-window--proposal { width: 86cqw; top: 3cqw; }
.vt-proposal { position: relative; height: 49cqw; padding: 3.6cqw 4cqw; overflow: hidden; background: #ecece6; color: var(--vt-ink); }
.vt-proposal > span { display: block; font-size: 1.6cqw; font-weight: 600; letter-spacing: .14em; }
.vt-proposal > small { display: block; margin-top: 2.5cqw; font-size: 1.9cqw; }
.vt-proposal h4 { margin-top: 1.6cqw; font-size: 5cqw; }
.vt-proposal p { margin-top: 1.8cqw; font-size: 1.9cqw; }
.vt-roof { position: relative; height: 16cqw; overflow: hidden; background: #c9c9c3; border-radius: 1.5cqw; }
.vt-roof i { position: absolute; display: block; }
.vt-roof i:first-child { left: 17%; top: 10%; width: 68%; height: 120%; background: #6e6e78; transform: rotate(30deg) skewX(-15deg); }
.vt-roof i:nth-child(2) { left: 47%; top: 21%; width: 58%; height: 100%; background: #3f3f48; transform: rotate(30deg) skewX(-15deg); }
.vt-roof i:nth-child(3) { left: 21%; bottom: -38%; width: 64%; height: 70%; background: #e0e0da; }
.vt-proposal > .vt-roof { margin-top: 2.4cqw; }
.vt-price-card { position: absolute; top: 25cqw; right: 0; width: 32cqw; padding: 3cqw; border: 1px solid #c4c4c9; border-radius: 2cqw; background: var(--vt-paper); color: var(--vt-ink); box-shadow: 0 3cqw 6cqw -3cqw #0008; font-size: 2cqw; }
.vt-price-card > b { display: block; margin-bottom: 2cqw; font: 400 3.3cqw/1.15 var(--font-display); }
.vt-price-card > span { display: flex; justify-content: space-between; margin-top: 1.4cqw; }
.vt-price-card > div { display: flex; justify-content: space-between; margin-top: 2cqw; padding-top: 2cqw; border-top: 1px solid #cdcdd2; }
.vt-window--contract { width: 94cqw; top: 2cqw; }
.vt-paper { margin: 3cqw; padding: 3cqw; background: var(--vt-paper); color: var(--vt-ink); border-radius: 1cqw; }
.vt-paper > small { font-size: 1.5cqw; letter-spacing: .14em; }
.vt-paper h4 { margin: 1.5cqw 0; font-size: 4cqw; }
.vt-paper > p { margin: 1.2cqw 0 2cqw; color: #5a5a64; font-size: 1.9cqw; }
.vt-paper > b { display: block; margin-top: 2cqw; font-size: 2cqw; }
.vt-rule { border-top: 1px solid #cdcdd2; }
.vt-paper > svg { display: block; width: 25cqw; height: 7.5cqw; margin-top: 1cqw; stroke-width: 1.5; }
.vt-signed { display: flex; align-items: center; gap: 1cqw; margin-top: .8cqw; padding-top: 1.6cqw; border-top: 1px solid #cdcdd2; font-size: 1.8cqw; }
.vt-signed svg { width: 2.8cqw; color: #3d7f1d; }
.vt-window--profile { top: 8cqw; width: 98cqw; }
.vt-profile { display: grid; grid-template-columns: 40% 60%; min-height: 39cqw; }
.vt-profile__person { display: flex; flex-direction: column; align-items: center; gap: 1cqw; padding: 4cqw 2cqw; border-right: 1px solid var(--vt-line); }
.vt-profile__person > i { display: grid; place-items: center; width: 9cqw; height: 9cqw; margin-bottom: 1cqw; border-radius: 50%; background: rgb(var(--glow-amber)); color: #0b0b0d; font: normal 400 3.6cqw/1 var(--font-display); }
.vt-profile__person > b { font: 400 3.3cqw/1.15 var(--font-display); }
.vt-profile__person > span, .vt-profile__person > small { color: var(--vt-muted); font-size: 1.9cqw; }
.vt-profile__person .vt-profile__tag { margin-top: 1.5cqw; padding: .8cqw 1.5cqw; border-radius: 99px; background: #2a2a33; color: var(--vt-green); font-size: 1.7cqw; }
.vt-profile__details { padding: 2.8cqw; }
.vt-tabs { display: flex; gap: 3cqw; padding-bottom: 2.4cqw; border-bottom: 1px solid var(--vt-line); color: var(--vt-muted); font-size: 2cqw; }
.vt-tabs b { color: var(--vt-green); }
.vt-profile__details article { display: flex; align-items: center; gap: 2cqw; margin-top: 3cqw; }
.vt-profile__details article > i { display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 50%; background: #2a2a33; color: var(--vt-green); font-style: normal; }
.vt-profile__details article b, .vt-profile__details article span { display: block; font-size: 2cqw; }
.vt-profile__details article span { margin-top: .6cqw; color: var(--vt-muted); font-size: 1.8cqw; }
.vt-window--email { top: 1cqw; left: 5cqw; width: 86cqw; }
.vt-email-toolbar { display: flex; justify-content: space-between; padding: 2cqw 3cqw; color: var(--vt-muted); font-size: 1.8cqw; }
.vt-email-toolbar b { color: var(--vt-green); }
.vt-email { width: 70cqw; margin: 0 auto 3cqw; padding: 3cqw; border-radius: 1cqw; background: var(--vt-paper); color: var(--vt-ink); text-align: center; }
.vt-email > small { font-size: 1.5cqw; font-weight: 600; letter-spacing: .12em; }
.vt-email__art { margin-top: 2cqw; }
.vt-email__art .vt-roof { height: 10cqw; }
.vt-email h4 { margin: 2cqw 0 1.5cqw; font-size: 4.6cqw; }
.vt-email p { color: #5a5a64; font-size: 1.8cqw; }
.vt-email .vt-action { margin-top: 2cqw; font-size: 1.8cqw; }
.vt-text-phone, .vt-mobile { position: absolute; overflow: hidden; border: 1cqw solid #4a4a52; border-radius: 6cqw; background: #121216; box-shadow: 0 3cqw 6cqw -3cqw #000a; }
.vt-text-phone { top: 0; left: 17cqw; width: 56cqw; height: 66cqw; }
.vt-phone-top { display: flex; justify-content: space-between; padding: 2cqw 3cqw; color: #ececf0; font-size: 1.8cqw; }
.vt-message-head { display: flex; align-items: center; flex-direction: column; gap: .6cqw; padding: 1cqw 0 2cqw; border-bottom: 1px solid #2c2c34; }
.vt-message-head > i { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: #2a2a33; color: #e6e6ea; font: normal 400 3cqw/1 var(--font-display); }
.vt-message-head b { font-size: 2.4cqw; }
.vt-message-head span { color: var(--vt-muted); font-size: 1.7cqw; }
.vt-bubble { max-width: 39cqw; margin: 3cqw; padding: 2.6cqw; border-radius: 2.5cqw 2.5cqw 2.5cqw .5cqw; font-size: 2.4cqw; }
.vt-bubble--received { background: #26262e; }
.vt-bubble--sent { margin-left: 11cqw; background: var(--pop); color: var(--pop-ink); border-radius: 2.5cqw 2.5cqw .5cqw 2.5cqw; }
.vt-compose { display: flex; justify-content: space-between; margin: 2cqw 3cqw; padding: 1.6cqw 2cqw; border: 1px solid #34343d; border-radius: 99px; color: var(--vt-muted); font-size: 1.8cqw; }
.vt-compose b { color: var(--vt-green); }
.vt-message-event { position: absolute; top: 42cqw; right: 0; display: flex; align-items: center; gap: 2cqw; padding: 2.6cqw; border: 1px solid #c8c8cd; border-radius: 2cqw; background: var(--vt-paper); color: var(--vt-ink); box-shadow: 0 2cqw 5cqw -2cqw #0008; }
.vt-message-event svg { width: 5cqw; height: 5cqw; padding: 1cqw; border-radius: 50%; background: var(--pop); color: var(--pop-ink); }
.vt-message-event span { display: flex; flex-direction: column; font-size: 1.8cqw; }
.vt-message-event b { font-size: 2.4cqw; }
.vt-site-preview { position: absolute; top: 7cqw; left: 0; width: 84cqw; height: 47cqw; padding: 3cqw; overflow: hidden; border: 1px solid #8a8a92; border-radius: 2cqw; background: #ecece6; color: var(--vt-ink); }
.vt-site-nav { display: flex; justify-content: space-between; margin-bottom: 3cqw; font-size: 1.7cqw; }
.vt-site-nav b { letter-spacing: .1em; }
.vt-site-preview .vt-roof { position: absolute; top: 13cqw; right: 3cqw; width: 37cqw; height: 31cqw; }
.vt-site-preview h4 { position: relative; margin-top: 7cqw; font-size: 4.5cqw; }
.vt-site-preview .vt-action { margin-top: 3cqw; font-size: 1.8cqw; }
.vt-chat { position: absolute; top: 18cqw; right: 0; width: 43cqw; overflow: hidden; border: 1px solid #3c3c45; border-radius: 2.4cqw; background: #18181d; box-shadow: 0 3cqw 5cqw -3cqw #000a; }
.vt-chat > div { display: flex; align-items: center; gap: 1.6cqw; padding: 2cqw; border-bottom: 1px solid var(--vt-line); background: #2a2a33; }
.vt-chat > div > i { display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 50%; background: rgb(var(--glow-amber)); color: #0b0b0d; font-style: normal; }
.vt-chat > div > span { display: flex; flex-direction: column; font-size: 1.6cqw; }
.vt-chat > div b { font-size: 1.9cqw; }
.vt-chat > div > strong { margin-left: auto; }
.vt-chat p { width: 31cqw; margin: 2cqw; padding: 2cqw; border-radius: 1.5cqw; background: #26262e; font-size: 2cqw; }
.vt-chat p + p { margin-left: auto; background: var(--pop); color: var(--pop-ink); }
.vt-chat > span { display: flex; justify-content: space-between; margin: 2.5cqw 2cqw; padding: 1.7cqw; border: 1px solid var(--vt-line); border-radius: 1.5cqw; color: var(--vt-muted); font-size: 1.6cqw; }
.vt-window--social { top: 4cqw; width: 98cqw; }
.vt-calendar-head { display: flex; align-items: center; gap: 3cqw; padding: 3cqw; font-size: 2cqw; }
.vt-calendar-head > b { margin-right: auto; font-size: 2.8cqw; }
.vt-calendar-head > span { color: var(--vt-muted); }
.vt-calendar-head > strong { padding: .8cqw 1.4cqw; border-radius: .7cqw; background: var(--pop); color: var(--pop-ink); font-size: 1.8cqw; }
.vt-calendar { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0 3cqw 3cqw; border: 1px solid var(--vt-line); border-radius: 1cqw; overflow: hidden; }
.vt-calendar > span { padding: 1.3cqw; background: #26262e; color: var(--vt-muted); font-size: 1.5cqw; text-align: center; }
.vt-calendar > div { min-height: 15cqw; padding: 1.3cqw 1cqw; border-top: 1px solid var(--vt-line); border-right: 1px solid var(--vt-line); }
.vt-calendar > div:nth-child(5n) { border-right: 0; }
.vt-calendar small { color: var(--vt-muted); font-size: 1.6cqw; }
.vt-post { display: block; margin-top: 1cqw; padding: 1.1cqw .8cqw; border-radius: .7cqw; background: #2f2f39; color: #f2f2ee; font-size: 1.6cqw; }
.vt-post i { display: block; margin-top: .7cqw; color: #cfcfd6; font-size: 1.3cqw; font-style: normal; font-weight: 400; }
.vt-post--light { background: #e6e6e0; color: #16161a; }
.vt-post--light i { color: #55555e; }
.vt-window--inbox { top: 8cqw; width: 98cqw; }
.vt-inbox { display: grid; grid-template-columns: 45% 55%; height: 40cqw; }
.vt-inbox > aside { border-right: 1px solid var(--vt-line); }
.vt-inbox > aside > b { display: flex; justify-content: space-between; padding: 2.6cqw; color: var(--vt-muted); font-size: 1.8cqw; }
.vt-inbox em { font-style: normal; }
.vt-inbox > aside > span { display: flex; align-items: center; gap: 1.6cqw; padding: 2.4cqw 1.5cqw; border-radius: 0 !important; }
.vt-inbox strong, .vt-inbox small { display: block; font-size: 1.9cqw; }
.vt-inbox small { margin-top: .6cqw; color: var(--vt-muted); font-size: 1.6cqw; font-weight: 400; }
.vt-channel { display: grid; place-items: center; flex: none; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: #3a3a44; color: white; font: normal 600 2.8cqw/1 var(--font-body); }
.vt-channel--fb { background: #285d9c; }
.vt-channel--ig { background: #824b7d; }
.vt-inbox__chat { position: relative; padding: 2.6cqw; }
.vt-inbox__chat > b { display: block; padding-bottom: 2cqw; border-bottom: 1px solid var(--vt-line); font-size: 2.4cqw; }
.vt-inbox__chat p { max-width: 34cqw; margin-top: 2.4cqw; padding: 1.8cqw; border-radius: 1.5cqw; background: #2a2a33; font-size: 2cqw; }
.vt-inbox__chat p + p { margin-left: auto; background: var(--pop); color: var(--pop-ink); }
.vt-inbox__chat > span { position: absolute; right: 2.6cqw; bottom: 2.6cqw; left: 2.6cqw; display: flex; justify-content: space-between; padding: 1.8cqw; border: 1px solid var(--vt-line); border-radius: 1.4cqw; color: var(--vt-muted); font-size: 1.7cqw; }
.vt-mobile { width: 42cqw; height: 67cqw; }
.vt-mobile--back { top: 0; left: 9cqw; transform: rotate(-6deg); }
.vt-mobile--front { top: 8cqw; right: 8cqw; transform: rotate(5deg); }
.vt-mobile-heading { display: flex; flex-direction: column; gap: 1.2cqw; padding: 2cqw 2.6cqw; }
.vt-mobile-heading > span { color: var(--vt-green); font-size: 1.7cqw; }
.vt-mobile-heading > b { font: 400 3.8cqw/1.2 var(--font-display); }
.vt-mobile-days { display: flex; justify-content: space-between; gap: 1cqw; padding: 1.4cqw 2.6cqw; font-size: 1.8cqw; text-align: center; }
.vt-mobile-days b { padding: .3cqw 1.1cqw; border-radius: 1cqw; background: var(--pop); color: var(--pop-ink); }
.vt-mobile-visit { display: flex; flex-direction: column; gap: .8cqw; margin: 2cqw 2.6cqw; padding: 2cqw; border-left: .5cqw solid var(--pop); border-radius: .6cqw; background: #23232a; }
.vt-mobile-visit small { color: var(--vt-green); font-size: 1.6cqw; }
.vt-mobile-visit b { font-size: 2cqw; }
.vt-mobile-visit span { color: var(--vt-muted); font-size: 1.8cqw; }
.vt-mobile-customer { display: flex; align-items: center; gap: 1.6cqw; margin: 1cqw 2cqw; padding: 2cqw 0; border-bottom: 1px solid #2c2c34; }
.vt-mobile-customer i { display: grid; place-items: center; flex: none; width: 5cqw; height: 5cqw; border-radius: 50%; background: #2a2a33; font: normal 600 1.6cqw/1 var(--font-body); }
.vt-mobile-customer span { color: var(--vt-muted); font-size: 1.55cqw; }
.vt-mobile-customer b { display: block; margin-bottom: .5cqw; color: #ececf0; font-size: 2cqw; }
.vt-mobile-tab { position: absolute; right: 0; bottom: 0; left: 0; padding: 2.6cqw 1cqw; border-top: 1px solid #2c2c34; background: #18181d; color: var(--vt-muted); font-size: 1.65cqw; text-align: center; }

@media (max-width: 700px) {
  .v3-tools::before { top: -160px; right: -40px; width: 300px; filter: blur(80px); }
  .v3-tools__viewport { padding-top: 12px; }
  .v3-tools__track { gap: 24px; }
  .v3-tool { width: min(320px, 100vw - 2 * var(--gutter)); padding: 24px; }
  .v3-tool.is-active { transform: translateY(-12px); }
  .v3-tool h3 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-tool, .v3-tool__num, .v3-tool h3, .v3-tool__tags li { transition: none; }
}

/* ---------- Industries (A127): Pinnacle's "built for your industry" cards, one per industry page ---------- */
.v3-page .v3-ind__head h2 { max-width: none; }
.v3-ind__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.v3-ind__card { display: flex; flex-direction: column; height: 100%; padding: 28px; border: 1px solid #2d2d38; border-radius: 20px; background: var(--surface-2);
  color: var(--text); text-decoration: none; transition: border-color .2s, translate .2s; }
.v3-ind__card:hover { border-color: rgb(62 138 99 / .8); translate: 0 -2px; }
.v3-ind__card:focus-visible { outline: 2px solid var(--pop); outline-offset: 3px; }
.v3-page .v3-ind__card h3 { font: 800 clamp(24px, 1.9vw, 30px)/1.05 var(--hf); letter-spacing: .01em; white-space: nowrap; }   /* one line, so every card's line sits level */
.v3-ind__card p { margin-top: 12px; color: #b8b8c2; font-size: 16px; line-height: 1.5; }
.v3-ind__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 28px; font-size: 15px; font-weight: 600; }
.v3-ind__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate .2s; }
.v3-ind__card:hover .v3-ind__go { color: var(--pop); }
.v3-ind__card:hover .v3-ind__go svg { translate: 3px 0; }
.v3-ind__more { margin-top: 32px; color: #b8b8c2; font-size: 16px; }
@media (max-width: 1200px) { .v3-ind__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .v3-ind__grid { grid-template-columns: 1fr; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .v3-ind__card, .v3-ind__go svg { transition: none; } .v3-ind__card:hover { translate: none; } }

.v3-ticks { list-style: none; }
.v3-ticks li { display: flex; gap: 12px; padding: 5px 0; font-size: 14px; line-height: 1.5; }
.v3-ticks li::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e8a63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* ---------- Plan: a neutral card over an amber glow ---------- */
.v3-pricing { position: relative; isolation: isolate; }
.v3-pricing::before { content: ''; position: absolute; z-index: -1; left: 50%; bottom: -260px; width: 1100px; aspect-ratio: 1; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--glow-amber) / .22), rgb(var(--glow-amber) / .08) 50%, transparent); }
.v3-plan { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); max-width: 1180px; margin-inline: auto; overflow: clip;
  border: 1px solid var(--line); border-radius: 28px; background: var(--surface); }
.v3-plan__main, .v3-plan__includes { padding: clamp(30px, 3.8vw, 56px); }
.v3-plan__includes { border-left: 1px solid var(--line); }
.v3-plan h3 { font: 800 36px/1.05 var(--hf); letter-spacing: .01em; }
.v3-plan__price { margin-top: 18px; font: 800 clamp(70px, 7.04vw, 114px)/.9 var(--hf); letter-spacing: -.01em; }
.v3-plan__price span { margin-left: 8px; color: #b8b8c2; font: 400 16px/1.5 var(--font-body); letter-spacing: 0; }
.v3-plan__desc { max-width: 36ch; margin-top: 20px; color: #d0d0d0; font-size: 17px; line-height: 1.6; }
.v3-plan .dp-actions { margin-top: 30px; }
.v3-plan__note { max-width: 46ch; margin-top: 26px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.v3-ticks--plan { columns: 2; column-gap: 28px; }
.v3-ticks--plan li { break-inside: avoid; padding: 7px 0; font-size: 15px; }
.v3-plan__custom { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.6; }

/* ---------- FAQ as cards ---------- */
.v3-faq__list { display: grid; gap: 12px; max-width: 920px; margin-inline: auto; }
.v3-page .v3-qa, .v3-page .v3-qa:first-child { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); transition: border-color .3s; }
.v3-page .v3-qa.is-open { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.v3-page .v3-qa button { grid-template-columns: 1fr 28px; gap: 16px; padding: 24px 28px; font: 600 clamp(17px, 1.4vw, 20px)/1.35 var(--font-body); }
.v3-page .v3-qa button:hover { color: #fff; }
.v3-page .v3-qa .qa__body p { padding: 0 28px 26px; max-width: 72ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
}
@media (max-width: 900px) {
  .v3-plan, .v3-demo__row { grid-template-columns: 1fr; }
  .v3-demo__row { gap: var(--head-gap); }   /* stacked: the copy, then the video */
  .v3-ways__head { flex-direction: column; align-items: stretch; }
  .v3-ways__head { grid-template-columns: 1fr; gap: 20px; }
  .v3-page .v3-ways__head h2, .v3-ways__head p { max-width: none; }
  .v3-plan__includes { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .v3-eyebrow { max-width: 30ch; line-height: 1.5; text-align: left; }
  .v3-hero::before, .v3-hero::after { width: 600px; }   /* smaller glows, so they stay in the corners */
  .v3-hero::before { left: -340px; top: -330px; }
  .v3-hero::after { right: -340px; bottom: -300px; }
  .v3-page .v3-hero__title { font-size: calc((100vw - 2 * var(--gutter)) / 6.65 * .97); }   /* "MORE BOOKED WORK." is 6.65em wide: fills the line, never breaks */
  .v3-hero__lead { font-size: 16px; }
  .v3-hero__actions { gap: 18px; margin-top: 28px; }
  .v3-ticker li { padding-block: 18px; }
  .v3-ticks--plan { columns: 1; }
  .v3-page .v3-qa button { padding: 20px; }
  .v3-page .v3-qa .qa__body p { padding: 0 20px 22px; }
}
@media (min-width: 1001px) and (max-width: 1100px) {   /* the shared footer's contact column needs three columns here on this route */
  body:has(.v3-page) .ft__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .v3-film[open] { animation: none; }
  .v3-ticker__move { width: auto; animation: none; -webkit-mask-image: none; mask-image: none; }
  .v3-ticker ul { flex-wrap: wrap; justify-content: center; padding-right: 32px; }
  .v3-ticker ul[aria-hidden] { display: none; }
}