/* drviviski.com, the public site.
   The Clinic look (context/brand.md): five colours, Switzer, the light logo, one accent per screen.
   Original to Doctor Viviski. Motion lives in main.js and only runs when the visitor has not asked
   for reduced motion; without it every section is fully visible and usable. */

@font-face { font-family: "Switzer"; src: url("/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/switzer-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #0E0F0E;
  --paper: #F6F5F1;
  --surgical: #0B5D45;
  --pulse: #3DDC97;
  --stone: #8C8B85;
  --card: #FBFAF7;
  --sunk: #EFEEE9;
  --muted: #55564F;
  --line: rgba(14, 15, 14, .09);
  --line-2: rgba(14, 15, 14, .18);
  --soft: rgba(11, 93, 69, .07);
  --r: 22px;
  --r-s: 14px;
  --wrap: 1240px;
  --pad: clamp(96px, 11vw, 160px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 1px 2px rgba(14, 15, 14, .04), 0 24px 60px -30px rgba(14, 15, 14, .28);
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 20px); overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 "Switzer", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.038em; line-height: 1; text-wrap: balance; }
.accent { color: var(--surgical); }
:focus-visible { outline: 2px solid var(--surgical); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 300; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.section { padding-block: var(--pad); position: relative; }
.section.tight { padding-block: calc(var(--pad) * .6); }
.line-top { border-top: 1px solid var(--line); }
.label { font: 500 12px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.label.green { color: var(--surgical); }
.lead { font-size: clamp(1.08rem, 1.45vw, 1.24rem); line-height: 1.55; color: var(--muted); max-width: 56ch; }
.fine { font-size: 14px; color: var(--stone); line-height: 1.5; }

/* Section headings */
.head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 80px); }
.head.centre { text-align: center; margin-inline: auto; }
.head h2 { font-size: clamp(2.3rem, 5vw, 4.1rem); margin-top: 18px; }
.head .lead { margin-top: 22px; }
.head.centre .lead { margin-inline: auto; }

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 600 16px/1 "Switzer", sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate; transition: color .4s var(--ease), border-color .4s var(--ease); will-change: transform; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surgical); border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover { border-color: var(--surgical); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost::before { background: var(--ink); }
.btn.ghost:hover { color: var(--paper); border-color: var(--ink); }
.btn.green { background: var(--surgical); border-color: var(--surgical); }
.btn.green::before { background: var(--ink); }
.btn.green:hover { border-color: var(--ink); }
.btn.light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.light::before { background: var(--pulse); }
.btn.light:hover { border-color: var(--pulse); }
.btn.line-light { background: transparent; color: var(--paper); border-color: rgba(246, 245, 241, .35); }
.btn.line-light::before { background: var(--paper); }
.btn.line-light:hover { color: var(--ink); border-color: var(--paper); }
.btn.small { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn.wide { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--ease); }
.text-link:hover { background-size: 0 1.5px; background-position: 100% 100%; }

/* The loading moment: the heartbeat draws, the name appears, the curtain lifts. Under a second. */

/* Nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); transition: transform .5s var(--ease), background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(246, 245, 241, .86); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-color: var(--line); }
.nav.hide { transform: translateY(-100%); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 36px; }
.logo img { height: 30px; width: auto; }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a { font-size: 15.5px; font-weight: 600; text-decoration: none; color: var(--muted); transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-right .login { font-size: 15.5px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.nav-right .login svg { width: 17px; height: 17px; }
.burger { display: none; width: 46px; height: 46px; margin-left: auto; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); }
.burger span { display: block; width: 24px; height: 2px; margin: 6px auto; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease), opacity .2s; }
.menu-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.drawer { position: fixed; inset: 0; z-index: 90; background: var(--paper); padding: calc(var(--nav-h) + 24px) 24px 28px; display: flex; flex-direction: column; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--ease), visibility .6s; }
.menu-open .drawer { clip-path: inset(0); visibility: visible; }
.menu-open { overflow: hidden; }
.drawer a:not(.btn) { font-size: 2.2rem; font-weight: 800; letter-spacing: -.035em; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--line); }
.drawer .btn { margin-top: 28px; }
.drawer .socials { display: flex; gap: 20px; margin-top: auto; padding-top: 24px; }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* Hero */
.hero { padding: calc(var(--nav-h) + clamp(48px, 7vw, 96px)) 0 clamp(56px, 7vw, 96px); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 4.3vw, 4.4rem); margin-top: 22px; }
/* Phones: each headline line stays on one line and inside the screen (390 wide and down to 360) */
@media (max-width: 480px) { .hero h1 { font-size: min(2.6rem, 9.4vw); } }
.hero .lead { margin-top: 26px; }
.hero .actions { margin-top: 36px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.hero-facts span { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--muted); }
.hero-facts .icon { width: 18px; height: 18px; color: var(--surgical); }
.beat-bg { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; pointer-events: none; z-index: -1; opacity: .5; }
.beat-bg path { fill: none; stroke: var(--line-2); stroke-width: 1.5; }

.screen { position: relative; border-radius: var(--r); overflow: hidden; background: var(--ink); box-shadow: 0 50px 100px -50px rgba(14, 15, 14, .55); aspect-ratio: 16 / 11.5; }
.screen video, .screen > img { width: 100%; height: 100%; object-fit: cover; }
.screen .poster { position: absolute; inset: 0; background: linear-gradient(160deg, #EDEDE6, #E4E3DC); }
.screen .poster .desk { position: absolute; left: 6%; top: 10%; width: 76%; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(14, 15, 14, .5); background: #fff; }
.screen .poster .desk i { display: block; height: 20px; background: #F2F1EC; border-bottom: 1px solid var(--line); }
.screen .poster .desk img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
.screen .poster .phone { position: absolute; right: 6%; bottom: 6%; width: 22%; border-radius: 22px; border: 6px solid var(--ink); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(14, 15, 14, .55); background: #fff; }
.screen .poster .phone img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.play { position: absolute; left: 22px; bottom: 22px; z-index: 3; display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(14, 15, 14, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--paper); font: 600 15px "Switzer", sans-serif; transition: transform .4s var(--ease), background .3s; }
.play:hover { transform: scale(1.03); background: var(--ink); }
.play i { width: 40px; height: 40px; border-radius: 50%; background: var(--pulse); display: grid; place-items: center; }
.play i::before { content: ""; margin-left: 3px; border-left: 11px solid var(--ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.play small { display: block; font-weight: 400; font-size: 12.5px; color: rgba(246, 245, 241, .65); }
.screen-tag { position: absolute; right: 18px; top: 18px; z-index: 3; padding: 7px 12px; border-radius: 999px; background: rgba(246, 245, 241, .9); font: 500 11.5px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }

/* Moving strip */
.strip { border-block: 1px solid var(--line); overflow: hidden; background: var(--card); }
.strip-track { display: flex; width: max-content; animation: strip 42s linear infinite; }
.strip-track span { display: inline-flex; align-items: center; gap: 22px; padding: 22px 0 22px 22px; font-weight: 600; font-size: 16px; white-space: nowrap; }
.strip-track span::after { content: ""; width: 30px; height: 10px; background: url("/assets/brand/mark-surgical.svg") center / contain no-repeat; }
@keyframes strip { to { transform: translateX(-50%); } }

/* The check-up */
.check { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.chart { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.chart-top { display: flex; justify-content: space-between; align-items: center; padding: 20px 26px; border-bottom: 1px solid var(--line); }
.chart-top b { font-size: 1.05rem; }
.chart-top .score { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; }
.chart-top .score small { font-size: 14px; color: var(--stone); font-weight: 600; letter-spacing: 0; }
.chart ol { list-style: none; padding: 0; margin: 0; counter-reset: q; }
.chart li { counter-increment: q; display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 17px 26px; border-bottom: 1px solid var(--line); transition: background .3s; }
.chart li::before { content: counter(q); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 500 12px "JetBrains Mono", monospace; color: var(--stone); }
.chart li.yes::before { background: var(--surgical); border-color: var(--surgical); color: var(--paper); }
.chart li.no::before { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chart li p { font-weight: 600; line-height: 1.35; }
.chart li small { display: block; font-weight: 400; color: var(--stone); font-size: 14px; margin-top: 2px; }
.yn { display: flex; gap: 6px; }
.yn button { font: 600 14px "Switzer", sans-serif; min-width: 56px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.yn button:hover { border-color: var(--ink); }
.yn button[aria-pressed="true"].y { background: var(--surgical); border-color: var(--surgical); color: var(--paper); }
.yn button[aria-pressed="true"].n { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.verdict { padding: 22px 26px; background: var(--ink); color: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.verdict p { color: rgba(246, 245, 241, .82); max-width: 38ch; }
.verdict p b { color: var(--paper); }

/* What you get: cards that stack and settle as you scroll */
.stack { display: grid; gap: 24px; }
.stack-card { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; grid-template-columns: 1fr 1.1fr; min-height: min(560px, 74vh); border-radius: 28px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: 0 -10px 40px -30px rgba(14, 15, 14, .25); transform-origin: 50% 0; }
.stack-card:nth-child(2) { top: calc(var(--nav-h) + 40px); }
.stack-card:nth-child(3) { top: calc(var(--nav-h) + 56px); }
.stack-card:nth-child(4) { top: calc(var(--nav-h) + 72px); }
.stack-card:nth-child(5) { top: calc(var(--nav-h) + 88px); }
.stack-card.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stack-copy { padding: clamp(32px, 4.5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.stack-copy .n { font: 500 13px "JetBrains Mono", monospace; letter-spacing: .14em; color: var(--surgical); }
.stack-card.dark .n { color: var(--pulse); }
.stack-copy h3 { font-size: clamp(2rem, 3.4vw, 3rem); margin: 18px 0 16px; }
.stack-copy p { color: var(--muted); max-width: 40ch; }
.stack-card.dark .stack-copy p { color: rgba(246, 245, 241, .72); }
.stack-copy ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.stack-copy li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 16px; }
.stack-copy li .icon { width: 19px; height: 19px; margin-top: 3px; color: var(--surgical); }
.stack-card.dark li .icon { color: var(--pulse); }
.stack-media { position: relative; background: var(--sunk); overflow: hidden; display: grid; place-items: center; padding: clamp(24px, 4vw, 56px); }
.stack-card.dark .stack-media { background: #181918; }
.stack-media .shot { width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(14, 15, 14, .45); background: #fff; }
.stack-media .shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.stack-media .mobile { width: 42%; border-radius: 28px; border: 7px solid var(--ink); overflow: hidden; box-shadow: 0 30px 60px -25px rgba(14, 15, 14, .55); }
.stack-media .mobile img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }

/* Small drawn diagrams inside the cards (no fake screenshots, just shapes) */
.diagram { width: 100%; max-width: 420px; display: grid; gap: 12px; }
.bubble { background: #fff; border-radius: 18px; padding: 16px 18px; box-shadow: 0 18px 40px -26px rgba(14, 15, 14, .4); font-size: 15px; line-height: 1.45; }
.bubble small { display: block; font: 500 11px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin-bottom: 6px; }
.bubble.out { justify-self: end; background: var(--surgical); color: var(--paper); max-width: 86%; }
.bubble.out small { color: rgba(246, 245, 241, .65); }
.bubble.in { max-width: 80%; }
.serp { background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: 0 18px 40px -26px rgba(14, 15, 14, .4); }
.serp .q { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 999px; background: var(--sunk); font-size: 14.5px; color: var(--muted); margin-bottom: 14px; }
.serp .r { padding: 12px 0; border-top: 1px solid var(--line); }
.serp .r small { color: var(--surgical); font-size: 13px; }
.serp .r b { display: block; font-size: 16px; margin-top: 2px; }
.serp .r span { font-size: 13.5px; color: var(--stone); }
.serp .r.top b { color: var(--surgical); }
.care-list { background: #222322; border-radius: 16px; padding: 8px 20px; }
.care-list div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(246, 245, 241, .08); font-size: 15px; }
.care-list div:last-child { border-bottom: 0; }
.care-list span { color: rgba(246, 245, 241, .6); }
.care-list b { color: var(--pulse); font-weight: 600; }

/* The dashboard preview */
.dash { position: relative; border-radius: 28px; background: var(--ink); color: var(--paper); overflow: hidden; padding: clamp(36px, 6vw, 80px); display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.dash::before { content: ""; position: absolute; width: 60vmax; height: 60vmax; right: -25vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(61, 220, 151, .14), transparent); pointer-events: none; }
.dash h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-top: 18px; }
.dash h2 .accent { color: var(--pulse); }
.dash .lead { color: rgba(246, 245, 241, .72); margin-top: 22px; }
.dash ul { list-style: none; padding: 0; margin: 28px 0 34px; display: grid; gap: 12px; }
.dash li { display: flex; gap: 12px; align-items: flex-start; color: rgba(246, 245, 241, .88); }
.dash li .icon { color: var(--pulse); width: 19px; height: 19px; margin-top: 3px; }
.dash .label { color: var(--pulse); }
.dash-shot { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(246, 245, 241, .14); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); background: #fff; }
.dash-shot img { width: 100%; }
.dash-shot figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(14, 15, 14, .8); color: rgba(246, 245, 241, .8); font-size: 12.5px; }

/* Work */
.case { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.case-img { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--sunk); aspect-ratio: 16 / 10; }
.case-img img { width: 100%; height: 106%; object-fit: cover; object-position: left top; will-change: transform; }
.case-copy h3 { font-size: clamp(2rem, 3.4vw, 2.9rem); margin-top: 14px; }
.case-copy dl { margin: 28px 0 32px; border-top: 1px solid var(--line-2); }
.case-copy dl div { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 110px 1fr; gap: 16px; }
.case-copy dt { font: 500 12px/1.6 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.case-copy dd { margin: 0; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.thumbs figure { margin: 0; }
.thumbs .t { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--ease); }
.thumbs figure:hover img { transform: scale(1.04); }
.thumbs figcaption { margin-top: 12px; color: var(--muted); font-size: 15px; }

/* Meet Kacper */
.meet { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.portrait { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: var(--sunk); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait .ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: linear-gradient(170deg, #ECEBE5, #E2E1DA); }
.portrait .ph img { width: 38%; height: auto; opacity: .85; }
.portrait .name { position: absolute; left: 18px; bottom: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 16px; background: rgba(246, 245, 241, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.portrait .name b { font-size: 1.05rem; }
.portrait .name span { font-size: 14px; color: var(--muted); }
.meet h2 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); margin-top: 18px; }
.meet .lead + .lead { margin-top: 16px; }
.meet .lead:first-of-type { margin-top: 24px; }
.why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 34px 0; }
.why div { border: 1px solid var(--line); border-radius: var(--r-s); padding: 18px 20px; background: var(--card); }
.why b { display: block; }
.why span { font-size: 15px; color: var(--muted); }

/* Prices */
.tabs { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--sunk); margin-bottom: 44px; position: relative; }
.tabs-wrap { display: flex; justify-content: center; }
.tab { position: relative; z-index: 1; border: 0; background: none; padding: 13px 26px; border-radius: 999px; font: 600 15.5px "Switzer", sans-serif; color: var(--muted); cursor: pointer; transition: color .3s; }
.tab[aria-selected="true"] { color: var(--paper); }
.tab-pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; border-radius: 999px; background: var(--ink); transition: left .5s var(--ease), width .5s var(--ease); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plans[hidden] { display: none; }
.plans.two { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.plan { position: relative; display: flex; flex-direction: column; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); padding: 34px 30px 30px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.plan h3 { font-size: 1.5rem; letter-spacing: -.025em; }
.plan .for { margin-top: 8px; color: var(--muted); font-size: 15.5px; min-height: 3em; }
.plan .price { font-size: clamp(2.8rem, 4.4vw, 3.5rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; margin-top: 26px; }
.plan .price small { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--stone); margin-left: 6px; }
.plan .terms { margin-top: 10px; font-size: 14px; color: var(--stone); }
.plan ul { list-style: none; padding: 22px 0 0; margin: 24px 0 28px; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; }
.plan li .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--surgical); }
.plan li.no { color: var(--stone); }
.plan li.no .icon { color: var(--stone); }
.plan .btn { margin-top: auto; }
.plan.best { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.plan.best .for, .plan.best li { color: rgba(246, 245, 241, .84); }
.plan.best .terms, .plan.best .price small { color: rgba(246, 245, 241, .55); }
.plan.best ul { border-color: rgba(246, 245, 241, .12); }
.plan.best li .icon { color: var(--pulse); }
.flag { position: absolute; top: 22px; right: 22px; padding: 7px 12px; border-radius: 999px; background: var(--pulse); color: var(--ink); font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.price-note { text-align: center; margin-top: 30px; }
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.extra { border-radius: var(--r); border: 1px solid var(--line); background: var(--card); padding: 30px; display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; }
.extra h3 { font-size: 1.35rem; letter-spacing: -.02em; }
.extra .amount { font-size: 2rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; text-align: right; }
.extra .amount small { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--stone); margin-top: 6px; }
.extra p { grid-column: 1 / -1; color: var(--muted); }
.extra .text-link { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15.5px; }
.compare th, .compare td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.compare th:first-child, .compare td:first-child { text-align: left; font-weight: 400; }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }
.compare thead th { font-weight: 800; font-size: 1.1rem; vertical-align: bottom; background: var(--sunk); }
.compare thead th span { display: block; font-weight: 600; font-size: 14px; color: var(--stone); margin-top: 4px; }
.compare td .icon { margin: 0 auto; color: var(--surgical); }
.compare td.no { color: var(--stone); }
.compare .hl { background: var(--soft); }

/* How it works */
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.steps-line { position: absolute; top: 23px; left: 23px; right: 23px; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.steps-line i { display: block; height: 100%; width: 100%; background: var(--surgical); transform-origin: left; transform: scaleX(1); }
.step { position: relative; }
.step .num { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--surgical); font: 500 14px "JetBrains Mono", monospace; color: var(--surgical); }
.step h3 { font-size: 1.3rem; letter-spacing: -.02em; margin-top: 24px; }
.step p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }
.step .when { margin-top: 12px; font: 500 11.5px/1.4 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }

/* The standard */
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.promise { border-radius: var(--r); border: 1px solid var(--line); background: var(--card); padding: 30px; transition: transform .5s var(--ease), border-color .3s; }
.promise:hover { transform: translateY(-4px); border-color: var(--line-2); }
.promise .icon { width: 26px; height: 26px; color: var(--surgical); }
.promise h3 { font-size: 1.3rem; letter-spacing: -.02em; margin-top: 22px; }
.promise p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-grid .head { position: sticky; top: calc(var(--nav-h) + 32px); margin-bottom: 0; }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 600; transition: color .25s; }
.faq summary:hover { color: var(--surgical); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: 0 0 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; transition: background .3s, border-color .3s, transform .5s var(--ease); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--ease); }
.faq details[open] summary i { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: rotate(180deg); }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq .a { overflow: hidden; }
.faq .a > div { padding: 0 60px 26px 0; color: var(--muted); }
.faq .a p + p { margin-top: 10px; }

/* Closing call to action with the form */
.close-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.form { background: var(--paper); color: var(--ink); border-radius: var(--r); padding: clamp(26px, 4vw, 44px); display: grid; gap: 18px; position: relative; }
.form h3 { font-size: 1.6rem; letter-spacing: -.03em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.chips legend { font-weight: 600; font-size: 15px; margin-bottom: 10px; padding: 0; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { cursor: pointer; padding: 10px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; background: var(--card); border: 1px solid var(--line-2); transition: background .25s, color .25s, border-color .25s; }
.chips label:hover { border-color: var(--ink); }
.chips input:checked + label { background: var(--surgical); color: var(--paper); border-color: var(--surgical); }
.chips input:focus-visible + label { outline: 2px solid var(--surgical); outline-offset: 2px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .field { display: grid; gap: 7px; font-weight: 600; font-size: 15px; }
.form input:not([type=radio]):not([type=checkbox]), .form textarea { font: 400 16px/1.4 "Switzer", sans-serif; color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 15px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.form textarea { min-height: 110px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--surgical); box-shadow: 0 0 0 4px rgba(11, 93, 69, .12); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); font-weight: 400 !important; }
.consent input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; accent-color: var(--surgical); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: 15px; padding: 14px 16px; border-radius: 12px; background: var(--soft); color: var(--surgical); }
.form-msg[hidden] { display: none; }
.form-msg.err { background: var(--sunk); color: var(--ink); }

/* Inner pages */
.page-head { padding: calc(var(--nav-h) + clamp(56px, 8vw, 110px)) 0 clamp(24px, 3vw, 40px); }
.page-head h1 { font-size: clamp(2.6rem, 6vw, 5rem); margin-top: 18px; max-width: 19ch; }
.page-head .lead { margin-top: 24px; }
.page-head.centre { text-align: center; }
.page-head.centre h1, .page-head.centre .lead { margin-inline: auto; }
.page-head.centre .actions { justify-content: center; margin-top: 34px; }
.page-head .fine { margin-top: 18px; }
.legal { max-width: 760px; }
.legal h2 { font-size: 1.45rem; letter-spacing: -.02em; line-height: 1.25; margin: 44px 0 12px; }
.legal p, .legal li { color: var(--muted); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; }
.draft { display: inline-flex; margin-top: 22px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--stone); font: 500 12px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }

/* Video dialog */
.vdialog { border: 0; padding: 0; background: transparent; width: min(1100px, 94vw); max-width: none; }
.vdialog::backdrop { background: rgba(14, 15, 14, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vdialog video { width: 100%; border-radius: 18px; background: #000; }
.vdialog button { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--paper); cursor: pointer; font: 600 20px "Switzer", sans-serif; }

/* Footer */
.foot { padding: clamp(80px, 9vw, 120px) 0 32px; }
.foot-big { font-size: clamp(3rem, 10.5vw, 9.5rem); font-weight: 800; letter-spacing: -.055em; line-height: .9; }
.foot-big .accent { color: var(--surgical); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.foot-grid p { color: var(--muted); font-size: 15px; max-width: 32ch; margin-top: 16px; }
.foot-grid h4 { font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-bottom: 16px; }
.foot-grid a:not(.logo) { display: block; text-decoration: none; color: var(--muted); padding: 5px 0; transition: color .2s; }
.foot-grid a:not(.logo):hover { color: var(--ink); }
.socials { display: flex; gap: 10px; }
.foot .socials { margin-top: 22px; }
.socials a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); display: grid !important; place-items: center; padding: 0 !important; transition: background .3s, color .3s, border-color .3s; }
.socials a:hover { background: var(--ink); color: var(--paper) !important; border-color: var(--ink); }
.socials .icon { width: 18px; height: 18px; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; font-size: 14px; color: var(--stone); }

/* Phone action bar */
.bar { display: none; }

/* Motion: hidden states only exist when the motion script is running (html.motion) */
.motion [data-reveal] { opacity: 0; transform: translateY(32px); }
.motion [data-split] { opacity: 0; }
.motion [data-scale] { clip-path: inset(8% 6% 8% 6% round 24px); transform: scale(.94); }
.split-line-inner { padding-bottom: .12em; margin-bottom: -.12em; }
h1, h2, h3, .foot-big { padding-bottom: .04em; }

@media (max-width: 1080px) {
  .nav-links, .nav-right { display: none; }
  .burger { display: block; }
  .hero-grid, .check, .dash, .case, .meet, .close-grid, .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .head { position: static; }
  .stack-card { grid-template-columns: 1fr; min-height: 0; }
  .stack-media { order: -1; aspect-ratio: 16 / 10; padding: 24px; }
  .stack-media .mobile { width: 30%; }
  .plans { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
  .plan.best { order: -1; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps-line { top: 24px; bottom: 24px; left: 23px; right: auto; width: 2px; height: auto; }
  .steps-line i { transform-origin: top; }
  .step { display: grid; grid-template-columns: 48px 1fr; gap: 0 20px; padding-bottom: 34px; }
  .step h3 { margin-top: 10px; }
  .step > :not(.num) { grid-column: 2; }
  .promises { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  :root { --nav-h: 66px; }
  body { font-size: 16px; }
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .hero .actions .btn { flex: 1 1 100%; }
  .chart li { grid-template-columns: 28px 1fr; padding: 16px 18px; }
  .chart li::before { width: 26px; height: 26px; }
  .chart li .yn { grid-column: 2; }
  .chart-top, .verdict { padding-inline: 18px; }
  .stack-media .mobile { width: 40%; }
  .stack-copy { padding: 28px 24px 30px; }
  .why, .promises, .thumbs, .extras, .form .row { grid-template-columns: 1fr; }
  .case-copy dl div { grid-template-columns: 1fr; gap: 4px; }
  .faq .a > div { padding-right: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .bar { display: flex; gap: 8px; position: fixed; z-index: 80; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 7px; border-radius: 999px; background: var(--ink); box-shadow: 0 12px 36px rgba(14, 15, 14, .35); transform: translateY(160%); transition: transform .5s var(--ease); }
  .bar.on { transform: none; }
  .bar a { flex: 1; min-height: 46px; border-radius: 999px; display: grid; place-items: center; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--paper); }
  .bar a.main { background: var(--paper); color: var(--ink); }
  .foot { padding-bottom: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .loader { display: none; }
}
.stack-card::after { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: var(--dim, 0); pointer-events: none; border-radius: inherit; }

/* The dashboard showcase: tabs, a big browser window, the demo button */
.dash-show .head { margin-bottom: 36px; }
.dash-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.dash-tab { font: 600 15px "Switzer", sans-serif; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--muted); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.dash-tab:hover { border-color: var(--ink); color: var(--ink); }
.dash-tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dash-window { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 60px 120px -60px rgba(14, 15, 14, .55); }
.dash-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: var(--sunk); border-bottom: 1px solid var(--line); }
.dash-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(14, 15, 14, .14); }
.dash-bar span { margin-left: 14px; padding: 5px 14px; border-radius: 999px; background: var(--paper); font-size: 13px; color: var(--stone); }
.dash-imgs { position: relative; aspect-ratio: 16 / 10; }
.dash-img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.dash-img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.dash-img.is-on { opacity: 1; }
.dash-notes { position: relative; min-height: 3.2em; margin: 22px auto 0; max-width: 60ch; text-align: center; }
.dash-note { position: absolute; inset: 0; color: var(--muted); opacity: 0; transition: opacity .4s; }
.dash-note.is-on { opacity: 1; }
.actions.centre { justify-content: center; margin-top: 30px; }
.fine.centre { text-align: center; margin-top: 14px; }
.dash-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.dash-feat { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); padding: 22px; display: grid; gap: 6px; }
.dash-feat .icon { color: var(--surgical); width: 22px; height: 22px; margin-bottom: 8px; }
.dash-feat span { font-size: 15px; color: var(--muted); }
@media (max-width: 1080px) { .dash-feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) {
  .dash-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .dash-tab { flex: 0 0 auto; }
  .dash-bar span { display: none; }
  .dash-notes { min-height: 4.8em; }
  .dash-feats { grid-template-columns: 1fr; }
}

/* Free video review */
.review-offer { margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: clamp(26px, 4vw, 44px); border-radius: var(--r); background: var(--soft); border: 1px solid rgba(11, 93, 69, .16); }
.review-offer h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-top: 12px; }
.review-offer p { margin-top: 12px; color: var(--muted); max-width: 52ch; }

/* Why monthly care */
.care { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; align-items: stretch; }
.care-found .icon { color: var(--surgical); }
.care-promise { display: flex; gap: 14px; align-items: flex-start; max-width: 640px; margin: 36px auto 0; padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.care-promise .icon { flex: none; width: 24px; height: 24px; color: var(--surgical); margin-top: 2px; }
.care-promise p { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.journey { position: relative; list-style: none; margin: 8px auto 0; padding: 0; max-width: 760px; display: grid; gap: 16px; }
.journey-line { position: absolute; left: 19px; top: 10px; bottom: 10px; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.journey-line i { display: block; height: 100%; background: var(--surgical); transform-origin: top; }
.journey.armed .journey-line i { transform: scaleY(0); }
.jstep { position: relative; padding-left: 56px; }
.jstep::before { content: ""; position: absolute; left: 11px; top: 26px; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--surgical); background: var(--surgical); transition: background .4s; }
.journey.armed .jstep::before { background: var(--card); }
.journey.armed .jstep.on::before { background: var(--surgical); }
.jcard { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 20px 24px; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.journey.armed .jstep:not(.on) .jcard { opacity: .2; transform: translateY(16px); }
.jcard h3 { font-size: 1.2rem; letter-spacing: -.02em; margin-top: 8px; }
.jcard p { margin-top: 6px; color: var(--muted); font-size: 15.5px; }
.jcard .saved { color: var(--ink); }
.jcard .saved b { font-weight: 600; }
.jtag { display: inline-block; margin-top: 14px; font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 6px 10px; }
.journey-note { margin-top: 22px; }
@media (max-width: 720px) {
  .journey { gap: 10px; }
  .journey-line { left: 50%; margin-left: -1px; }
  .jstep { padding: 30px 0 0; }
  .jstep::before { left: 50%; margin-left: -9px; top: 4px; }
  .jcard { text-align: center; padding: 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { .jcard, .jstep::before { transition: none; } }
.care-gap { height: 56px; }
.care h3 { font-size: 1.45rem; letter-spacing: -.025em; }
.care-left { border-radius: var(--r); border: 1px solid var(--line); background: var(--card); padding: clamp(26px, 3.5vw, 40px); }
.care-without { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.care-without li { display: flex; gap: 12px; color: var(--muted); }
.care-without .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--stone); }
.care-right { border-radius: var(--r); background: var(--ink); color: var(--paper); padding: clamp(26px, 3.5vw, 40px); }
.care-month { list-style: none; padding: 0; margin: 22px 0 22px; display: grid; gap: 0; }
.care-month li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(246, 245, 241, .12); }
.care-month b { color: var(--pulse); font-weight: 600; }
.care-month span { color: rgba(246, 245, 241, .82); }
.care-right .fine { color: rgba(246, 245, 241, .55); }

/* Three ways */
.compare.ways td, .compare.ways th { text-align: left; }
.compare.ways td.hl b { font-weight: 600; }
@media (max-width: 1080px) { .care { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .care-month li { grid-template-columns: 1fr; gap: 4px; } .review-offer .btn { width: 100%; } }
@media (max-width: 1080px) { .stack-media:has(.diagram) { aspect-ratio: auto; padding: 28px 20px; } }

@media (max-width: 680px) {
  .dash-window { max-width: 360px; margin-inline: auto; border-radius: 28px; border: 7px solid var(--ink); }
  .dash-bar { display: none; }
  .dash-imgs { aspect-ratio: 390 / 760; }
  .compare-wrap:has(.ways) { border: 0; background: none; overflow: visible; }
  .compare.ways { min-width: 0; }
  .compare.ways thead { display: none; }
  .compare.ways tr { display: grid; grid-template-columns: 1fr; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); overflow: hidden; }
  .compare.ways th[scope="row"] { padding: 14px 16px 6px; font-weight: 800; font-size: 1.05rem; border: 0; }
  .compare.ways td { display: flex; justify-content: space-between; gap: 16px; padding: 9px 16px; border: 0; border-top: 1px solid var(--line); text-align: right; }
  .compare.ways td::before { content: attr(data-label); color: var(--stone); text-align: left; flex: 0 0 auto; }
  .compare.ways td.hl { background: var(--soft); }
  .compare.ways td.hl::before { color: var(--surgical); font-weight: 600; }
}

/* ===================================================================== 18 October, later changes */

/* The logo is alive: a beat runs along the heartbeat line, all the time (brand mark path) */
.live-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -.04em; color: var(--ink); }
.live-logo svg { width: 44px; height: 15px; overflow: visible; }
.live-logo path { fill: none; stroke: var(--surgical); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.live-logo .beat-base { opacity: .28; }
.live-logo .beat-run { stroke-dasharray: 46 160; stroke-dashoffset: 206; animation: beatRun 2.4s cubic-bezier(.45, 0, .25, 1) infinite; filter: drop-shadow(0 0 3px rgba(11, 93, 69, .35)); }
@keyframes beatRun { to { stroke-dashoffset: 0; } }

/* Hero stage: brand panels behind real work that scrolls by itself; panels clip away on scroll */
.laptop-bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #F2F1EC; border-bottom: 1px solid var(--line); }
.laptop-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(14, 15, 14, .16); }
.laptop-bar span { margin-left: 10px; font-size: 11.5px; color: var(--stone); background: var(--paper); padding: 3px 10px; border-radius: 999px; }
.laptop .scroller { height: calc(100% - 28px); }
.mobile-frame .scroller { height: 100%; }
.scroller { container-type: size; overflow: hidden; position: relative; }
@keyframes pan { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
.stage .play { z-index: 5; }

/* Scrolling frames inside the "What you get" cards */
.stack-media .shot .scroller { aspect-ratio: 16 / 10; }
.stack-media .mobile .scroller { aspect-ratio: 390 / 844; }

/* Check-up: first question, then the result */
.has-site { padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.has-site p { font-weight: 600; font-size: 1.05rem; }
.has-site .yn button { min-width: 0; padding: 11px 18px; }
.chart [hidden] { display: none !important; }
.result { padding: 26px; display: grid; gap: 14px; border-top: 1px solid var(--line); background: var(--soft); }
.result h3 { font-size: 1.6rem; letter-spacing: -.03em; }
.result p { color: var(--muted); }
.result .label { color: var(--surgical); }
.result .btn { justify-self: start; }
.whys { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.whys li { display: flex; gap: 10px; color: var(--ink); font-weight: 600; }
.whys .icon { width: 18px; height: 18px; color: var(--surgical); margin-top: 3px; }

/* For the doers: the words hold still while the next section slides up over them */
.doers { position: relative; height: 90vh; z-index: 0; margin-top: 40px; }
.doers-sticky { position: sticky; top: calc(50vh - 12vw); display: grid; place-items: center; }
.doers-text { font-size: clamp(4rem, 15.5vw, 15rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; white-space: nowrap; text-align: center; }

/* Ask me anything */
.ask-log { display: grid; gap: 12px; }
.ask-log:empty { display: none; }

/* Contact: the live preview of what they send */
.preview { margin-top: 28px; }
.preview-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.preview-head b { font-size: 1.1rem; }

@media (max-width: 1080px) {
}
@media (max-width: 680px) {
  .live-logo { font-size: 20px; }
  .doers { height: 75vh; }
  .doers-sticky { top: calc(40vh - 7vw); }
  .doers-text { font-size: 13.4vw; }
}
@media (prefers-reduced-motion: reduce) {
  .live-logo .beat-run { display: none; }
  .live-logo .beat-base { opacity: 1; }
}

/* ===================================================================== 18 October, his second round
   Light everywhere: no dark panels behind the hero, light questions, light contact. */

/* Hero: Lafeli's real home page on a laptop and a phone, scrolling down and back up, forever */
.stage { position: relative; aspect-ratio: 1 / .8; }
.laptop { position: absolute; left: 0; top: 2%; width: 88%; aspect-ratio: 16 / 10.6; z-index: 2; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(14, 15, 14, .5), 0 0 0 1px var(--line); }
.mobile-frame { position: absolute; right: 0; bottom: 0; width: 25%; aspect-ratio: 390 / 820; z-index: 3; border: 6px solid var(--ink); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 34px 60px -24px rgba(14, 15, 14, .55); }
.scroller img { width: 100%; height: auto; animation: pan 44s cubic-bezier(.45, 0, .55, 1) infinite alternate; will-change: transform; }
.mobile-frame .scroller img, .player-phone .scroller img { animation-duration: 44s; }
@keyframes pan { 0%, 4% { transform: translateY(0); } 96%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
.stage-tag { position: absolute; z-index: 4; left: 3%; bottom: 4%; display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font: 500 11.5px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 24px -10px rgba(14, 15, 14, .5); transition: background .3s; }
.stage-tag:hover { background: var(--surgical); }

/* What you get: the home hero in a browser, the search, the messages, the care perks */
.stack-media a.shot { display: block; text-decoration: none; transition: transform .6s var(--ease); }
.stack-media a.shot:hover { transform: translateY(-4px); }
.shot-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #F2F1EC; border-bottom: 1px solid var(--line); }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(14, 15, 14, .16); }
.shot-bar span { margin-left: 10px; font-size: 11.5px; color: var(--stone); background: var(--paper); padding: 3px 10px; border-radius: 999px; }
.stack-media .shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.serp .r.map { display: flex; gap: 12px; align-items: center; padding: 14px; margin: 4px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.serp .r.map > span:last-child span { display: block; font-size: 13.5px; color: var(--stone); }
.serp .r.map b { font-size: 15px; margin: 0; color: var(--ink); }
.serp .pin { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surgical); color: var(--paper); }
.serp .pin .icon { width: 18px; height: 18px; }
.diagram-note, .chat-label { font: 500 11px/1.5 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); text-align: center; }
.chat-label { text-align: left; }
.diagram.chat { gap: 10px; }
.diagram.chat .bubble { font-size: 14.5px; padding: 13px 16px; }
.diagram.chat .bubble.out { max-width: 90%; }
.perks { grid-template-columns: 1fr 1fr; gap: 12px; max-width: 460px; }
.perk { background: #222322; border: 1px solid rgba(246, 245, 241, .08); border-radius: 18px; padding: 20px 18px; display: grid; gap: 6px; align-content: start; }
.perk .icon { width: 24px; height: 24px; color: var(--pulse); margin-bottom: 6px; }
.perk b { font-size: 1.05rem; letter-spacing: -.02em; color: var(--paper); }
.perk span { font-size: 14px; line-height: 1.45; color: rgba(246, 245, 241, .62); }
.perks-link { grid-column: 1 / -1; justify-self: center; margin-top: 6px; color: var(--pulse); font-weight: 600; text-decoration: none; }
.perks-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* For the doers, then the prices slide up over the words like a sheet of paper */
.cover { position: relative; z-index: 2; margin-top: -42vh; background: var(--card); border-radius: 40px 40px 0 0; border-top: 1px solid var(--line); padding: clamp(80px, 9vw, 130px) 0 clamp(70px, 8vw, 110px); box-shadow: 0 -40px 80px -50px rgba(14, 15, 14, .35); }
.care-note { margin-top: 18px; }
.plan li.pages b { font-weight: 700; color: var(--ink); }
.plan.best li.pages b { color: inherit; }

/* Questions: the sixth row is a question box that looks like the rows above it */
.faq-ask { border-bottom: 1px solid var(--line); padding: 10px 0 22px; }
.faq-ask .ask-form { display: flex; align-items: center; gap: 20px; }
.faq-ask input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 0; font: 600 clamp(1.05rem, 1.6vw, 1.2rem)/1.4 "Switzer", sans-serif; color: var(--ink); border-bottom: 1px dashed var(--line-2); border-radius: 0; }
.faq-ask input::placeholder { color: var(--surgical); opacity: 1; }
.faq-ask input:focus { outline: none; border-bottom-color: var(--surgical); }
.faq-ask input:focus::placeholder { color: var(--stone); }
.ask-go { flex: 0 0 36px; height: 36px; border-radius: 50%; border: 1px solid var(--surgical); background: var(--surgical); color: var(--paper); display: grid; place-items: center; cursor: pointer; transition: transform .4s var(--ease), background .3s; }
.ask-go .icon { width: 17px; height: 17px; }
.ask-go:hover { transform: translateX(3px); background: var(--ink); border-color: var(--ink); }
.ask-log { display: grid; gap: 10px; margin-top: 16px; }
.ask-log:empty { display: none; }
.bubble-q, .bubble-a { max-width: 86%; padding: 13px 17px; border-radius: 18px; font-size: 16px; line-height: 1.55; }
.bubble-q { justify-self: end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 6px; }
.bubble-a { justify-self: start; background: var(--soft); border: 1px solid rgba(11, 93, 69, .14); color: var(--ink); border-bottom-left-radius: 6px; white-space: pre-wrap; }
.bubble-a.wait { color: var(--stone); }
.ask-fine { margin-top: 12px; font-size: 13.5px; color: var(--stone); }

/* Contact: light, the same as the rest of the site */
.close { position: relative; padding: clamp(56px, 8vw, 110px) 0; }
.close h1, .close h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin-top: 18px; }
.close .lead { margin-top: 22px; }
.close .form { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.preview { margin-top: 28px; }
.preview .label { color: var(--surgical); }
.preview-card { margin-top: 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); padding: 20px 22px; display: grid; gap: 10px; }
.preview-head span { color: var(--stone); }
.preview-need { display: inline-block; justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--soft); color: var(--surgical); font-size: 14px; font-weight: 600; }
.preview-msg { color: var(--muted); white-space: pre-wrap; min-height: 3em; }
.preview-card small { display: flex; gap: 14px; color: var(--stone); font-size: 13.5px; flex-wrap: wrap; }
.preview .empty { color: rgba(14, 15, 14, .32); }
.checkup-note { margin-top: 22px; border-radius: 18px; padding: 20px 22px; background: var(--soft); border: 1px solid rgba(11, 93, 69, .16); }
.checkup-note b { display: block; font-size: 1.15rem; margin-bottom: 8px; }
.checkup-note ul { margin: 0; padding-left: 18px; color: var(--muted); }
.checkup-note li + li { margin-top: 4px; }
.reach-row { margin-top: 30px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.reach-row > span { font-size: 15px; color: var(--muted); }
.reach-icons { display: flex; gap: 10px; flex-wrap: wrap; }
.reach-icons a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--ink); background: var(--card); transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease); }
.reach-icons a:hover { background: var(--surgical); border-color: var(--surgical); color: var(--paper); transform: translateY(-3px); }
.reach-icons .icon { width: 20px; height: 20px; }

/* Work page: click to play the whole site, then page by page */
.work-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 80px); align-items: end; }
.work-head .lead { margin-top: 0; }
.work-head .actions .icon { width: 17px; height: 17px; }
.player-stage { position: relative; padding-right: 13%; }
.player-laptop { position: relative; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 60px 120px -60px rgba(14, 15, 14, .55), 0 0 0 1px var(--line); }
.player-laptop .scroller { aspect-ratio: 16 / 10; }
.player-phone { position: absolute; right: 0; bottom: -6%; width: 22%; aspect-ratio: 390 / 820; border: 7px solid var(--ink); border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 34px 60px -24px rgba(14, 15, 14, .55); z-index: 2; }
.player-phone .scroller { height: 100%; }
.player .scroller img { animation-play-state: paused; animation-duration: 40s; }
.player.is-playing .scroller img { animation-play-state: running; }
.player-start { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; border: 0; cursor: pointer; background: linear-gradient(180deg, rgba(246, 245, 241, .1), rgba(246, 245, 241, .82)); color: var(--ink); font: inherit; transition: opacity .6s var(--ease), visibility .6s; }
.player-start > span { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--surgical); color: var(--paper); box-shadow: 0 20px 50px -16px rgba(11, 93, 69, .7); transition: transform .5s var(--ease); }
.player-start > span .icon { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.player-start:hover > span { transform: scale(1.08); }
.player-start b { font-size: 1.3rem; letter-spacing: -.02em; }
.player-start small { color: var(--muted); font-size: 14.5px; }
.player.started .player-start { opacity: 0; visibility: hidden; }
.player-bar { display: flex; align-items: center; gap: 18px; margin-top: clamp(40px, 6vw, 70px); padding-right: 13%; }
.player-toggle { flex: 0 0 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.player-toggle .icon { width: 18px; height: 18px; fill: currentColor; }
.player-toggle .icon + .icon, .player.is-playing .player-toggle .icon:first-child { display: none; }
.player.is-playing .player-toggle .icon + .icon { display: block; }
.player-track { flex: 1; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.player-track i { display: block; height: 100%; width: 100%; background: var(--surgical); transform-origin: left; transform: scaleX(0); }
.wpages { display: grid; gap: clamp(70px, 10vw, 140px); margin-top: clamp(40px, 6vw, 70px); }
.wpage { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.wpage.flip { grid-template-columns: .65fr 1.35fr; }
.wpage.flip .wpage-shot { order: 2; }
.wpage-shot { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 50px 100px -50px rgba(14, 15, 14, .5), 0 0 0 1px var(--line); }
.wpage-shot img { width: 100%; }
.wpage-copy .n { font: 500 12.5px "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--surgical); }
.wpage-copy h3 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin: 14px 0; }
.wpage-copy p { color: var(--muted); }
.wpage-copy ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.wpage-copy li { display: flex; gap: 12px; font-weight: 600; font-size: 15.5px; }
.wpage-copy li .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--surgical); flex: 0 0 auto; }

/* Headings that converge as they arrive (main.js), never hidden without the script */
.converge-word { display: inline-block; will-change: transform, opacity, filter; }

@media (max-width: 1080px) {
  .stage { max-width: 640px; margin: 10px auto 0; width: 100%; }
  .work-head, .wpage, .wpage.flip { grid-template-columns: 1fr; }
  .wpage.flip .wpage-shot { order: 0; }
}
@media (max-width: 680px) {
  .cover { margin-top: -22vh; border-radius: 28px 28px 0 0; }
  .perks { gap: 8px; }
  .perk { padding: 14px 12px; }
  .perk span { font-size: 13px; }
  .bubble-q, .bubble-a { max-width: 94%; }
  .player-stage, .player-bar { padding-right: 0; }
  .player-phone { width: 30%; right: -4px; bottom: -14%; border-width: 5px; border-radius: 22px; }
  .player-start b { font-size: 1.1rem; }
  .player-start > span { width: 64px; height: 64px; }
  .player-bar { margin-top: 64px; }
  .reach-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroller img { animation: none; }
  .player .scroller img { animation: pan 40s linear infinite alternate !important; animation-play-state: paused !important; }
  .player.is-playing .scroller img { animation-play-state: running !important; }
}

.player-start { background: rgba(246, 245, 241, .74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@media (max-width: 1080px) {
  .close .preview { display: none; }
}
@media (max-width: 680px) {
  .player-start small { display: none; }
}

/* ===================================================================== 18 October, his third round */

/* Tighter rhythm between sections, still room to breathe */
:root { --pad: clamp(68px, 8vw, 116px); }
.head { margin-bottom: clamp(36px, 4.4vw, 60px); }
.stack { gap: 20px; }
.wpages { gap: clamp(56px, 8vw, 110px); }
.hero { padding-bottom: clamp(40px, 5vw, 72px); }
.nw { white-space: nowrap; }
@media (max-width: 420px) { .nw { white-space: normal; } }

/* The phone menu: smaller, calmer words */
.drawer a:not(.btn) { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; padding: 15px 0; }

/* Quick booking bar on phones: one button that opens the booking sheet */
@media (max-width: 680px) {
  .bar { padding: 6px; }
  .bar a.main { flex-direction: row; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px; min-height: 54px; background: var(--pulse); color: var(--ink); font-size: 16px; font-weight: 700; padding: 6px 16px; }
  .bar a.main .icon { width: 19px; height: 19px; }
  .bar a.main span { flex-basis: 100%; text-align: center; font-size: 12px; font-weight: 500; opacity: .75; margin-top: -2px; }
}

/* The booking sheet */
.book { border: 0; padding: 0; margin: auto; width: min(520px, calc(100% - 24px)); max-height: min(760px, calc(100% - 24px)); border-radius: 26px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(14, 15, 14, .6); overflow: auto; overscroll-behavior: contain; }
.book::backdrop { background: rgba(14, 15, 14, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.book[open] { animation: bookIn .5s var(--ease); }
@keyframes bookIn { from { transform: translateY(30px); opacity: 0; } }
.book-in { padding: 26px 24px 22px; display: grid; gap: 16px; }
.book-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.book-head b { display: block; font-size: 1.45rem; letter-spacing: -.03em; font-weight: 800; }
.book-head span { display: block; color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.book-x { flex: 0 0 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.book-step { display: grid; gap: 12px; }
.book-step[hidden] { display: none; }
.book-q { font: 500 11.5px "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--surgical); }
.book-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.book-day { flex: 0 0 64px; display: grid; justify-items: center; gap: 1px; padding: 10px 0; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; color: var(--ink); font: inherit; transition: background .25s, color .25s, border-color .25s; }
.book-day small { font-size: 12px; color: var(--stone); }
.book-day b { font-size: 1.3rem; letter-spacing: -.02em; }
.book-day.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.book-day.is-on small { color: rgba(246, 245, 241, .6); }
.book-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.book-time { padding: 14px 0; border-radius: 14px; border: 1px solid var(--surgical); background: transparent; color: var(--surgical); font: 600 16px "Switzer", sans-serif; cursor: pointer; transition: background .25s, color .25s; }
.book-time:hover { background: var(--surgical); color: var(--paper); }
.book-wait { color: var(--muted); font-size: 15px; }
.book-chosen { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--soft); }
.book-chosen .text-link { background: none; border: 0; font: inherit; cursor: pointer; color: var(--surgical); }
.book .field { display: grid; gap: 6px; font-weight: 600; font-size: 14.5px; }
.book .field input { font: 400 16px/1.4 "Switzer", sans-serif; color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 14px; width: 100%; }
.book .field input:focus { outline: none; border-color: var(--surgical); box-shadow: 0 0 0 4px rgba(11, 93, 69, .12); }
.book-done { justify-items: center; text-align: center; padding: 10px 0; }
.book-tick { width: 64px; height: 64px; border-radius: 50%; background: var(--surgical); color: var(--paper); display: grid; place-items: center; }
.book-tick .icon { width: 30px; height: 30px; }
.book-done b { font-size: 1.5rem; letter-spacing: -.03em; }
.book-done p { color: var(--muted); }
.book-alt { text-align: center; font-size: 14.5px; color: var(--muted); }

/* Contact: tick several things; what you'll get, with prices and benefits */
.chips input[type=checkbox] + label { position: relative; }
.chips input[type=checkbox]:checked + label { padding-left: 34px; }
.chips input[type=checkbox]:checked + label::before { content: ""; position: absolute; left: 14px; top: 50%; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(-45deg); }
.summary { margin-top: 26px; }
.summary .label { color: var(--surgical); }
.summary-card { margin-top: 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px 22px; display: grid; }
.summary-empty { color: var(--stone); padding: 14px 0; font-size: 15px; }
.sum-item { padding: 16px 0; border-bottom: 1px solid var(--line); animation: sumIn .45s var(--ease); }
@keyframes sumIn { from { opacity: 0; transform: translateY(8px); } }
.sum-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sum-top b { font-size: 1.05rem; }
.sum-price { font-weight: 700; color: var(--surgical); white-space: nowrap; }
.sum-item ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 5px; }
.sum-item li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--muted); }
.sum-item li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 5px; border-left: 2px solid var(--surgical); border-bottom: 2px solid var(--surgical); transform: rotate(-45deg); }
.sum-total { margin: 0; padding: 14px 0 12px; display: grid; gap: 6px; }
.sum-total div { display: flex; justify-content: space-between; gap: 12px; }
.sum-total dt { color: var(--muted); }
.sum-total dd { margin: 0; font-weight: 800; }
.summary.inline { display: none; margin-top: 0; }
@media (max-width: 1080px) {
  .close-left .summary { display: none; }
  .summary.inline { display: block; }
  .summary.inline .summary-card { box-shadow: none; background: var(--card); }
}

/* Start now: the order page */
.order { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.order-form { display: grid; gap: 30px; }
.order-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.order-form legend { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 14px; padding: 0; }
.order-form legend span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 14px; }
.picks { grid-template-columns: repeat(2, 1fr); }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick-in { height: 100%; display: grid; gap: 4px; padding: 18px 18px 16px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--card); transition: border-color .25s, box-shadow .25s, background .25s; }
.pick-in b { font-size: 1.05rem; }
.pick-price { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.pick-price small { font-size: 13px; font-weight: 500; color: var(--stone); margin-left: 6px; letter-spacing: 0; }
.pick-line { font-size: 14px; color: var(--muted); }
.pick:hover .pick-in { border-color: var(--ink); }
.pick input:checked + .pick-in { border-color: var(--surgical); background: #fff; box-shadow: 0 0 0 2px var(--surgical), 0 20px 40px -26px rgba(11, 93, 69, .5); }
.pick input:focus-visible + .pick-in { outline: 2px solid var(--surgical); outline-offset: 3px; }
.order-details .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.order-form .field, .order .consent { display: grid; gap: 7px; font-weight: 600; font-size: 15px; }
.order .consent { display: flex; }
.order-form .field input { font: 400 16px/1.4 "Switzer", sans-serif; color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 15px; width: 100%; }
.order-form .field input:focus { outline: none; border-color: var(--surgical); box-shadow: 0 0 0 4px rgba(11, 93, 69, .12); }
.order-form .btn[disabled] { opacity: .45; cursor: not-allowed; }
.order-sum { position: sticky; top: calc(var(--nav-h) + 24px); border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 24px; display: grid; gap: 14px; }
.order-lines { display: grid; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.order-totals { margin: 0; display: grid; gap: 8px; }
.order-totals div { display: flex; justify-content: space-between; gap: 12px; }
.order-totals dt { color: var(--muted); }
.order-totals dd { margin: 0; font-weight: 800; text-align: right; }
.order-totals div:first-child dd { font-size: 1.25rem; color: var(--surgical); }
.order-totals [hidden] { display: none; }
.order-done { max-width: 720px; margin-inline: auto; }
.done-steps { list-style: none; counter-reset: s; padding: 0; margin: 34px auto; display: grid; gap: 12px; text-align: left; max-width: 520px; }
.done-steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.done-steps li::before { content: counter(s); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surgical); color: var(--paper); font-weight: 700; }
.done-steps span { color: var(--muted); font-size: 15px; }

/* Testimonials: client words, when there are some */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.quote { margin: 0; padding: 30px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.quote blockquote { margin: 0; font-size: 1.2rem; line-height: 1.5; letter-spacing: -.01em; }
.quote figcaption { margin-top: 18px; display: grid; }
.quote figcaption span { color: var(--stone); font-size: 14.5px; }

/* The dashboard on a phone: a real phone scrolling the phone dashboard */
.dash-phone { display: none; }
.dash-phone-frame { position: relative; width: min(300px, 78vw); aspect-ratio: 390 / 820; margin: 0 auto; border: 8px solid var(--ink); border-radius: 38px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(14, 15, 14, .55); }
.dash-pimg { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.dash-pimg.is-on { opacity: 1; }
.dash-pimg img { animation-duration: 26s; }

@media (max-width: 1080px) {
  .order { grid-template-columns: 1fr; }
  .order-sum { position: static; order: -1; }
  .plans { display: flex; flex-direction: column-reverse; }
  .plan.best { order: 0; }
  .stack-media:has(.mobile), .stack-media:has(.shot) { aspect-ratio: auto; padding: 28px 24px; }
  .stack-media .mobile { width: min(46%, 220px); }
}

/* Phones: everything centred, nothing squashed */
@media (max-width: 680px) {
  .dash-window { display: none; }
  .dash-phone { display: block; margin-top: 4px; }
  .picks, .order-details .row { grid-template-columns: 1fr; }
  .hero-grid > div:first-child, .head, .stack-copy, .page-head, .work-head, .wpage-copy, .meet > div, .close-left, .plan, .step, .promise, .dash-feat, .result, .review-offer, .foot-grid > div, .foot-base, .case-copy, .care-left, .care-right, .order-done, .why div, .faq-grid > .head { text-align: center; }
  .head .lead, .lead, .stack-copy p, .plan .for { margin-inline: auto; }
  .hero .actions, .actions, .hero-facts, .reach-row, .reach-icons, .socials, .foot-base, .dash-feats { justify-content: center; }
  .reach-row { align-items: center; }
  .stack-copy ul, .wpage-copy ul, .plan ul, .whys, .care-month, .care-without { justify-items: center; }
  .stack-copy li, .wpage-copy li, .plan li, .whys li, .care-without li { justify-content: center; text-align: center; }
  .stack-copy, .wpage-copy { align-items: center; }
  .foot-grid > div { display: grid; justify-items: center; }
  .step { grid-template-columns: 1fr; justify-items: center; }
  .step > :not(.num) { grid-column: auto; }
  .steps-line { display: none; }
  .result .btn, .result .actions { justify-self: center; }
  .stage-tag { left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .summary-card, .sum-item, .order-sum, .preview-card { text-align: left; }
}
@media (max-width: 680px) { .dash-feat { justify-items: center; text-align: center; } }
@media (max-width: 680px) {
  .sum-total div { flex-direction: column; gap: 0; }
  .sum-total dd { font-size: 1.05rem; }
}
@media (max-width: 680px) {
  .plan .flag { position: static; display: inline-block; justify-self: center; align-self: center; margin: 0 auto 14px; }
}

/* ===================================================================== 18 October, his fourth round */

/* The floating "Book a free call" pill: centred at the bottom, shows after the first screen, hides
   when the footer arrives so the small print links can be reached */
a.bar { display: flex; position: fixed; z-index: 80; left: 50%; right: auto; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 160%); opacity: 0; align-items: center; gap: 10px; padding: 13px 22px 13px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; white-space: nowrap; box-shadow: 0 18px 40px -12px rgba(14, 15, 14, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset; transition: transform .55s var(--ease), opacity .4s, background .3s; }
a.bar.on { transform: translate(-50%, 0); opacity: 1; }
a.bar:hover { background: var(--surgical); }
a.bar .icon { width: 20px; height: 20px; color: var(--pulse); margin: 0; }
a.bar b { font-size: 15.5px; font-weight: 700; }
a.bar span { font-size: 13px; color: rgba(246, 245, 241, .6); flex-basis: auto; margin: 0; opacity: 1; }
@media (max-width: 680px) {
  a.bar { min-height: 0; padding: 13px 20px 13px 15px; background: var(--ink); color: var(--paper); font-size: 15px; }
  a.bar span { display: none; }
  .foot { padding-bottom: 40px; }
}

/* Care: monthly or every 6 months, and 14 days free */
.billing { display: flex; justify-content: center; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto 26px; padding: 5px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); }
.billing button, .billing label span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 0; background: transparent; font: 600 14.5px "Switzer", sans-serif; color: var(--muted); cursor: pointer; transition: background .3s, color .3s; }
.billing button span, .billing em { font: 500 10.5px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; font-style: normal; padding: 4px 8px; border-radius: 999px; background: var(--pulse); color: var(--ink); }
.billing button.is-on, .billing input:checked + span { background: var(--ink); color: var(--paper); }
.billing label { position: relative; }
.billing input { position: absolute; opacity: 0; pointer-events: none; }
.billing input:focus-visible + span { outline: 2px solid var(--surgical); outline-offset: 2px; }
.order-billing { grid-column: 1 / -1; margin: 0 0 6px; justify-self: start; }
.trial-note { margin-top: 18px; }
.care-panel[hidden] { display: none; }

/* The text-back, as a phone conversation that plays itself */
.chatdemo { width: 100%; max-width: 380px; border-radius: 28px; background: #fff; box-shadow: 0 30px 70px -30px rgba(14, 15, 14, .5), 0 0 0 1px var(--line); overflow: hidden; }
.chat-top { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.chat-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #4A2C25; color: #F4D9D3; font-weight: 700; }
.chat-top b { display: block; font-size: 15px; }
.chat-top small { display: block; font-size: 12.5px; color: var(--surgical); }
.chat-tag { margin-left: auto; font: 500 10px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.chat-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 14px 20px; min-height: 360px; background: #F7F7F5; }
.msg { max-width: 84%; font-size: 14.5px; line-height: 1.45; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.msg.on, .msg.typing { opacity: 1; transform: none; }
.msg small { display: block; margin-top: 5px; font-size: 11px; opacity: .6; }
.msg.sys { align-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); background: #EDECE7; padding: 6px 12px; border-radius: 999px; }
.msg.sys .icon { width: 14px; height: 14px; color: #C2453B; }
.msg.out { align-self: flex-end; background: var(--surgical); color: #fff; padding: 11px 14px; border-radius: 18px 18px 6px 18px; }
.msg.in { align-self: flex-start; background: #fff; color: var(--ink); padding: 11px 14px; border-radius: 18px 18px 18px 6px; box-shadow: 0 1px 2px rgba(14, 15, 14, .08); }
.msg.booked { align-self: stretch; max-width: none; display: flex; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 16px; background: var(--ink); color: var(--paper); font-size: 14px; }
.msg.booked .icon { width: 22px; height: 22px; color: var(--pulse); flex: 0 0 auto; }
.msg.booked b { display: block; color: var(--pulse); font-size: 12px; font-family: "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.msg.typing { display: inline-flex; gap: 4px; padding: 13px 14px; border-radius: 18px; }
.msg.typing.out { align-self: flex-end; background: var(--surgical); }
.msg.typing.in { align-self: flex-start; background: #fff; }
.msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; animation: dot 1s infinite; }
.msg.typing.out i { color: #fff; }
.msg.typing i:nth-child(2) { animation-delay: .15s; }
.msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.stack-media:has(.chatdemo) { aspect-ratio: auto; }

/* Testimonials: the title centred, the words and buttons under the clip */
.work-top { padding-bottom: 8px; }
.work-top h1 { margin-inline: auto; }
.work-clip { padding-top: clamp(24px, 3vw, 40px); }
.work-after { max-width: 640px; margin: clamp(56px, 7vw, 84px) auto 0; text-align: center; display: grid; gap: 26px; justify-items: center; }
.work-after .lead { margin: 0 auto; }
.work-after .actions { gap: 14px; margin: 0; }
@media (max-width: 680px) {
  .work-after { margin-top: 64px; }
  .work-after .actions .btn { flex: 1 1 100%; }
  .billing button, .billing label span { padding: 9px 13px; font-size: 13.5px; }
  .order-billing { justify-self: center; }
}
.book-times { grid-template-columns: repeat(4, 1fr); } .book-time { padding: 12px 0; font-size: 15px; }

/* ===================================================================== 18 October, fifth round: systems */

/* Cards 06 and 07 stack like the others */
.stack-card:nth-child(6) { top: calc(var(--nav-h) + 104px); }
.stack-card:nth-child(7) { top: calc(var(--nav-h) + 120px); }
.stack-media:has(.clip) { aspect-ratio: auto; }

/* The clips: small windows that play the systems step by step */
.clip { width: 100%; max-width: 400px; border-radius: 22px; background: #fff; box-shadow: 0 30px 70px -30px rgba(14, 15, 14, .45), 0 0 0 1px var(--line); overflow: hidden; text-align: left; }
.clip-top { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.clip-top b { font-size: 15px; }
.clip-top > span:not(.chat-tag) { font-size: 12.5px; color: var(--surgical); }
.clip-body { display: grid; gap: 8px; padding: 16px; min-height: 260px; align-content: start; background: #F7F7F5; }
.clip [data-step] { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.clip [data-step].on { opacity: 1; transform: none; }
.clip-done { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: 13.5px; margin-top: 4px; }
.clip-done .icon { width: 18px; height: 18px; color: var(--pulse); flex: 0 0 auto; }
.bk-row { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(14, 15, 14, .07); font-size: 13.5px; }
.bk-row b { font-size: 14px; }
.bk-row > span:nth-of-type(2) { grid-column: 2; color: var(--muted); font-size: 12.5px; }
.bk-row time { grid-row: 1 / span 2; grid-column: 3; font-weight: 700; color: var(--surgical); }
.bk-src { grid-row: 1 / span 2; font: 500 10px "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--soft); color: var(--surgical); }
.post-img { aspect-ratio: 16 / 9; border-radius: 14px; padding: 16px; display: grid; align-content: end; gap: 4px; background: linear-gradient(135deg, #4A2C25, #C98B7E); color: #fff; }
.post-img span { font: 500 10px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.post-img b { font-size: 1.1rem; line-height: 1.2; }
.post-text { font-size: 13.5px; color: var(--ink); margin: 2px 2px 0; }
.post-to { display: flex; gap: 6px; flex-wrap: wrap; }
.post-to span { display: inline-flex; gap: 5px; align-items: center; padding: 6px 10px; border-radius: 999px; background: #fff; font-size: 12.5px; box-shadow: 0 1px 2px rgba(14, 15, 14, .07); }
.post-to .icon { width: 13px; height: 13px; color: var(--surgical); }
.clip.doc .clip-body { background: #fff; }
.doc-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 2px solid var(--ink); }
.doc-head b { display: block; font-size: 14.5px; }
.doc-head small { display: block; font-size: 12px; color: var(--muted); }
.doc-logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surgical); color: #fff; font-weight: 800; font-size: 13px; }
.doc-line, .doc-total { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.doc-total { border-bottom: 0; border-top: 2px solid var(--ink); font-size: 15.5px; }
.doc-total b { color: var(--surgical); }
.sheet { gap: 0; padding: 12px; }
.sh-row { display: grid; grid-template-columns: .9fr 1.1fr 1.1fr .7fr .8fr; gap: 6px; padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 12.5px; background: #fff; }
.sh-head { font: 500 10px "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); background: var(--sunk); }
.sh-row.on { animation: shFlash 1.4s var(--ease); }
@keyframes shFlash { 0% { background: rgba(61, 220, 151, .35); } 100% { background: #fff; } }
.sh-paid { color: var(--surgical); font-weight: 700; }
.sh-booked { color: #B7791F; font-weight: 700; }
.sh-total { font-weight: 800; background: var(--soft); }
.sheet .clip-done { margin-top: 10px; }

/* "See monthly care", under the website plans, so care isn't missed */
.care-nudge { width: 100%; margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border-radius: 22px; border: 1px solid rgba(11, 93, 69, .2); background: linear-gradient(120deg, var(--soft), rgba(61, 220, 151, .12)); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.care-nudge:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(11, 93, 69, .5); }
.care-nudge-in { display: grid; gap: 4px; }
.care-nudge-in b { font-size: 1.2rem; letter-spacing: -.02em; }
.care-nudge-in span { color: var(--muted); font-size: 15px; }
.care-nudge-go { flex: 0 0 auto; padding: 13px 20px; border-radius: 999px; background: var(--surgical); color: var(--paper); font-weight: 700; font-size: 15px; white-space: nowrap; }
.web-panel[hidden] { display: none; }

/* Prices page: the monthly systems, side by side */
.showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.show-item { margin: 0; display: grid; gap: 14px; justify-items: center; padding: 28px 22px 24px; border-radius: 26px; background: var(--sunk); border: 1px solid var(--line); }
.show-item figcaption { display: grid; text-align: center; gap: 2px; }
.show-item figcaption b { font-size: 1.15rem; letter-spacing: -.02em; }
.show-item figcaption span { font-size: 14px; color: var(--surgical); }
.show-item .chatdemo, .show-item .clip { max-width: 380px; }

/* Testimonials: clips in the same layout as her pages; her pages as a whole phone on phones */
.wpage-media { min-width: 0; }
.wpage-clip { display: grid; place-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 26px; background: var(--sunk); border: 1px solid var(--line); }
.wpage-phone { display: none; }
@media (max-width: 1080px) {
  .showcase { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .care-nudge { flex-direction: column; text-align: center; padding: 22px 18px; }
  .care-nudge-go { width: 100%; text-align: center; }
  .wpage-shot { display: none; }
  .wpage-phone { display: block; width: min(270px, 74vw); aspect-ratio: 390 / 820; margin: 0 auto; border: 7px solid var(--ink); border-radius: 34px; overflow: hidden; background: #fff; box-shadow: 0 34px 60px -24px rgba(14, 15, 14, .5); }
  .wpage-phone .scroller { height: 100%; }
  .wpage-phone .scroller img { animation-duration: 40s; }
  .wpage-clip { padding: 18px 12px; }
  .sh-row { grid-template-columns: .8fr 1fr 1fr .6fr .8fr; font-size: 11.5px; gap: 4px; }
  .show-item { padding: 18px 12px; }
}
.wpage-clip { width: 100%; box-sizing: border-box; } .wpage-clip > * { width: 100%; }

/* ===================================================================== The intro: a heartbeat along the logo */
.loader { display: none; position: fixed; inset: 0; z-index: 400; background: var(--paper); place-items: center; pointer-events: none; }
.motion .loader { display: grid; }
.motion .loader.gone { display: none; }
.ld { display: grid; justify-items: center; gap: 18px; will-change: transform; }
.ld svg { width: min(300px, 62vw); height: auto; overflow: visible; }
.ld path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ld-base { stroke: var(--surgical); stroke-width: 3; opacity: .1; }
.ld-line { stroke: var(--surgical); stroke-width: 3.4; opacity: 0; }
.ld-trail { stroke: var(--pulse); stroke-width: 3.6; opacity: 0; }
.ld-trail-soft { stroke: var(--pulse); stroke-width: 9; opacity: 0; }
.ld-head { fill: #fff; opacity: 0; }
.ld-halo { opacity: 0; }
.ld-ring { fill: none; stroke: var(--pulse); stroke-width: 1.4; opacity: 0; }
.ld-name { display: flex; overflow: hidden; padding: .06em .02em .14em; font-size: clamp(34px, 6vw, 56px); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--ink); }
.ld-name span { display: inline-block; transform: translateY(110%); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .motion .loader { display: none; } }

/* The hero fits the first screen on a laptop: sizes follow the screen's height as well as its width */
@media (min-width: 1081px) {
  .hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + clamp(12px, 3vh, 40px)) 0 clamp(16px, 4vh, 48px); }
  .hero > .wrap { width: min(var(--wrap), 100% - 48px); }
  .hero-grid { align-items: center; gap: clamp(32px, 4vw, 64px); }
  .hero h1 { font-size: clamp(2.4rem, min(4.2vw, 7.6vh), 4.4rem); margin-top: clamp(10px, 1.8vh, 22px); }
  .hero .lead { font-size: clamp(1rem, min(1.3vw, 2.3vh), 1.2rem); margin-top: clamp(12px, 2.4vh, 26px); max-width: 52ch; }
  .hero .actions { margin-top: clamp(16px, 3.2vh, 36px); }
  .hero .actions .btn { padding-block: clamp(12px, 1.9vh, 17px); }
  .hero-facts { margin-top: clamp(14px, 2.8vh, 34px); padding-top: clamp(12px, 2.2vh, 26px); }
  .hero .stage { width: min(100%, calc((100svh - var(--nav-h) - 70px) * 1.25)); aspect-ratio: 1 / .8; justify-self: end; }
}

/* ===================================================================== 18 October, sixth round */
/* Words that rise out of their own line: room for the tails of g, y and p */
.rise-word-mask { padding-bottom: .14em; margin-bottom: -.14em; }
.rise-word { display: inline-block; will-change: transform; transform-origin: 0 100%; }

/* Hero: two facts, on one line under the buttons */
.hero-facts.one-line { flex-wrap: nowrap; gap: 10px 28px; }
@media (max-width: 380px) { .hero-facts.one-line { flex-wrap: wrap; } }

/* Testimonials: straight to it, less space at the top */
.page-head.work-top { padding-top: calc(var(--nav-h) + clamp(22px, 3vw, 44px)); padding-bottom: 0; }
.work-top h1 { margin-top: 12px; }
.section.work-clip { padding-top: clamp(20px, 2.5vw, 34px); }

/* Rows with the picture on the right really put it on the right, full size */
.wpage.flip .wpage-media { order: 2; }

/* The enquiry email, as it lands in Gmail */
.clip.mail .clip-body { background: #fff; gap: 0; padding: 0; min-height: 0; }
.em-item { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: #F2F6FC; }
.em-item b { display: block; font-size: 14px; }
.em-item small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.em-item time { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink); }
.em-av { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #4A2C25; color: #F4D9D3; font-weight: 700; }
.em-open { padding: 14px 16px 16px; display: grid; gap: 0; }
.em-brand { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; margin-bottom: 8px; border-radius: 10px; background: #4A2C25; color: #F4D9D3; }
.em-brand b { font-family: Georgia, serif; font-style: italic; font-size: 1.25rem; font-weight: 400; color: #fff; }
.em-brand span { font-size: 12.5px; }
.em-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.em-row span { color: var(--stone); font-size: 12.5px; }
.em-row.msg-row b { font-weight: 500; }
.em-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.em-btns span { padding: 8px 13px; border-radius: 999px; background: #D99A8E; color: #fff; font-size: 12.5px; font-weight: 700; }
.em-btns span + span { background: #fff; color: #4A2C25; box-shadow: inset 0 0 0 1px #D9C2BC; }

/* Phones: the cards fold onto each other, a little more compact */
@media (max-width: 680px) {
  .stack-card { position: sticky; }
  .stack-copy { padding: 24px 20px 26px; }
  .stack-media { padding: 22px 16px; }
}
.hero-facts.one-line span { white-space: nowrap; }
@media (max-width: 680px) {
  .hero-facts.one-line { gap: 8px 16px; flex-wrap: nowrap; justify-content: center; }
  .hero-facts.one-line span { font-size: 13.5px; gap: 6px; }
  .hero-facts.one-line .icon { width: 16px; height: 16px; }
}
@media (max-width: 360px) { .hero-facts.one-line { flex-wrap: wrap; } }
.em-open { padding-bottom: 26px; } .em-btns { margin-bottom: 2px; }

/* Not just websites: the custom software grid */
.cu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cu-item { display: grid; gap: 8px; align-content: start; padding: 24px 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.cu-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(11, 93, 69, .25); }
.cu-item .icon { width: 26px; height: 26px; color: var(--surgical); margin-bottom: 6px; }
.cu-item b { font-size: 1.08rem; letter-spacing: -.02em; }
.cu-item span { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.offer-group { margin-top: 34px; }
.offer-group:first-child { margin-top: 0; }
.offer-group h3 { font-size: 1.35rem; letter-spacing: -.02em; margin-bottom: 14px; }
.offer-group h3 span { display: block; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: 4px; }
.offer-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .offer-grid { grid-template-columns: 1fr; } .offer-group h3 { text-align: center; } }
.cu-foot { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; border-radius: 22px; background: var(--ink); color: var(--paper); }
.cu-foot b { display: block; font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: 6px; }
.cu-foot span { color: rgba(246, 245, 241, .7); font-size: 15px; max-width: 70ch; display: block; }
.cu-foot .btn { flex: 0 0 auto; }
@media (max-width: 1080px) { .cu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .cu-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cu-item { padding: 18px 14px; text-align: center; justify-items: center; }
  .cu-item span { font-size: 13.5px; }
  .cu-foot { flex-direction: column; text-align: center; padding: 24px 20px; }
  .cu-foot .btn { width: 100%; }
}

/* Less space at the bottom of the home page, under the questions */
#questions.section { padding-bottom: clamp(40px, 5vw, 64px); }
.foot { padding-top: clamp(44px, 5vw, 72px); }
#questions .faq-grid { align-items: start; }

/* About: find me, just before How it works */
.section.about-social { padding-block: clamp(20px, 3vw, 40px); }
.find-me { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.find-me > span { font: 500 12px "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--surgical); }
.find-me .reach-icons a { width: 52px; height: 52px; }
.find-me .reach-icons .icon { width: 22px; height: 22px; }

/* the walkthrough page: four videos before the call */
.watch-vid { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); background: #0E0F0E; }
.watch-ph { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- the contact form, one question a screen (19 Oct) */
.intake { padding: calc(var(--nav-h) + clamp(20px, 3vw, 40px)) 0 clamp(64px, 8vw, 110px); min-height: 100svh; }
.intake-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 32px; }
.intake-top .label { grid-column: 2; }
.intake-back { justify-self: start; background: none; border: 0; padding: 6px 0; font: 600 15px "Switzer", sans-serif; color: var(--muted); cursor: pointer; }
.intake-back:hover { color: var(--ink); }
.intake-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 14px; min-height: 3px; }
.intake-bar i { height: 3px; border-radius: 2px; background: var(--line-2); transition: background .5s var(--ease); }
.intake-bar i.on { background: var(--surgical); }
.intake-stage { max-width: 980px; margin: clamp(36px, 6vw, 80px) auto 0; text-align: center; }
.intake-stage.in { animation: in-up .55s var(--ease) both; }
@keyframes in-up { from { opacity: 0; transform: translateY(16px); } }
.intake-stage h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); margin-top: 16px; }
.in-sub { margin: 18px auto 0; max-width: 48ch; color: var(--muted); }
.in-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 780px; margin: clamp(30px, 4vw, 44px) auto 0; }
.in-opt { position: relative; min-height: 76px; padding: 16px 22px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--ink); font: 400 18px/1.3 "Switzer", sans-serif; cursor: pointer; transition: border-color .3s, box-shadow .3s, transform .35s var(--ease), color .3s; }
.in-opt:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.in-opt.is-on { border-color: var(--surgical); box-shadow: inset 0 0 0 1px var(--surgical); color: var(--surgical); font-weight: 600; }
.in-opt:focus-visible, .in-card:focus-visible, .in-strip:focus-visible { outline: 2px solid var(--surgical); outline-offset: 3px; }
.in-more { max-width: 780px; margin: 14px auto 0; }
.in-more[hidden] { display: none; }
.in-input { display: block; width: 100%; min-height: 64px; padding: 0 22px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: #fff; color: var(--ink); font: 400 18px/1.4 "Switzer", sans-serif; text-align: center; }
textarea.in-input { min-height: 150px; padding: 18px 22px; text-align: left; resize: vertical; }
.in-input:focus { outline: none; border-color: var(--surgical); box-shadow: 0 0 0 4px rgba(11, 93, 69, .12); }
.in-next { margin-top: 28px; }
.in-fields { display: grid; gap: 14px; max-width: 560px; margin: 36px auto 0; text-align: left; }
.in-fields .field { display: grid; gap: 7px; font-weight: 600; font-size: 15px; }
.in-fields .field input { width: 100%; padding: 15px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); font: 400 17px/1.4 "Switzer", sans-serif; }
.in-fields .field input:focus { outline: none; border-color: var(--surgical); box-shadow: 0 0 0 4px rgba(11, 93, 69, .12); }
.in-fields .in-next { justify-self: center; }
.in-call { max-width: 620px; margin: 36px auto 0; display: grid; gap: 16px; }
.in-call .book-days { justify-content: safe center; }
.in-call .book-time.is-on { background: var(--surgical); color: var(--paper); }
.in-confirm[hidden] { display: none; }
.in-confirm .in-next { margin-top: 6px; }
.in-fine { margin-top: 22px; }
.in-recap { max-width: 560px; margin: 32px auto 0; padding: 8px 22px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; text-align: left; }
.in-recap p { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.in-recap p:last-child { border-bottom: 0; }
.in-recap span { color: var(--stone); }
.in-recap b { text-align: right; }
.in-tick { margin: 0 auto 8px; }
.in-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 1000px; margin: clamp(32px, 5vw, 52px) auto 0; text-align: center; }
.in-card { display: grid; place-content: center; gap: 12px; min-height: 250px; padding: 32px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.in-card b { font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.in-card b .arrow { display: inline-block; font-weight: 400; font-size: .6em; vertical-align: middle; transition: transform .4s var(--ease); }
.in-card span:not(.arrow) { color: var(--muted); font-size: 17px; }
.in-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.in-card:hover .arrow { transform: translateX(5px); }
.in-card.dark { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: var(--shadow); }
.in-card.dark span:not(.arrow) { color: rgba(246, 245, 241, .66); }
.in-strip { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 26px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); color: var(--ink); text-decoration: none; text-align: left; transition: border-color .3s; }
.in-strip em { font-style: normal; color: var(--muted); }
.in-strip .go { flex: none; padding: 13px 20px; border-radius: 999px; background: var(--sunk); font-weight: 600; transition: background .3s, color .3s; }
.in-strip:hover { border-color: var(--line-2); }
.in-strip:hover .go { background: var(--ink); color: var(--paper); }
.in-proof { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 26px 0 0; font-size: 15px; color: var(--muted); text-align: center; }
.in-proof::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--surgical); }
.close.centre { text-align: center; }
@media (max-width: 700px) {
  .in-opts, .in-choose { grid-template-columns: 1fr; }
  .in-opt { min-height: 62px; font-size: 17px; }
  .in-card { min-height: 170px; padding: 26px 20px; }
  .in-strip { flex-direction: column; text-align: center; padding: 18px; }
  .in-strip .go { align-self: stretch; text-align: center; }
  .in-recap p { flex-direction: column; gap: 2px; } .in-recap b { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .intake-stage.in { animation: none; } .in-opt, .in-card { transition: none; } }
.in-when { margin: 18px 0 0; font: 600 clamp(1.1rem, 2vw, 1.35rem)/1.3 "Switzer", sans-serif; }
.plan li.all { padding-top: 4px; font-size: 14.5px; }

/* ===================================================================== 20 October: every system shown on a device */
/* The phone: the same black frame as the hero phone, with a status bar, and an app inside */
.phone { position: relative; width: 100%; max-width: 300px; aspect-ratio: 390 / 800; margin-inline: auto; border: 8px solid var(--ink); border-radius: 40px; background: #fff; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 80px -36px rgba(14, 15, 14, .55); text-align: left; }
.phone-bar { flex: none; position: relative; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font: 600 12px "Switzer", sans-serif; color: var(--ink); background: var(--card); }
.phone-island { position: absolute; left: 50%; top: 6px; width: 74px; height: 19px; transform: translateX(-50%); background: var(--ink); border-radius: 12px; }
.phone-sig { display: flex; align-items: flex-end; gap: 2px; }
.phone-sig i { width: 3px; border-radius: 1px; background: var(--ink); }
.phone-sig i:nth-child(1) { height: 5px; } .phone-sig i:nth-child(2) { height: 7px; } .phone-sig i:nth-child(3) { height: 9px; }
.phone-sig b { position: relative; width: 18px; height: 9px; margin-left: 4px; border: 1.5px solid var(--ink); border-radius: 3px; }
.phone-sig b::after { content: ""; position: absolute; inset: 1px 4px 1px 1px; background: var(--ink); border-radius: 1px; }
.phone-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #F7F7F5; }
.phone .app, .phone .chatdemo { flex: 1; min-height: 0; display: flex; flex-direction: column; max-width: none; border-radius: 0; box-shadow: none; background: #F7F7F5; }
.phone .chat-top { padding: 10px 12px; gap: 9px; }
.phone .chat-av { width: 30px; height: 30px; font-size: 12px; background: var(--surgical); color: #fff; }
.phone .chat-top b { font-size: 13.5px; } .phone .chat-top small { font-size: 11px; }
.phone .chat-body { flex: 1; min-height: 0; overflow: hidden; padding: 12px 10px 14px; gap: 8px; justify-content: flex-end; }
.phone .msg { font-size: 12.5px; max-width: 88%; }
.phone .msg small { font-size: 10px; }
.phone .msg.booked { font-size: 12px; padding: 11px 12px; }
.phone .msg.booked b { font-size: 10px; }
/* In a phone, a step takes no room until it plays, so the screen fills from the bottom like a real chat */
.app [data-step]:not(.on) { display: none; }
.app [data-step].on { animation: stepIn .45s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.app .ui { background: #fff; border-radius: 14px; padding: 11px 12px; box-shadow: 0 1px 2px rgba(14, 15, 14, .08); font-size: 12px; }
.app .ui.note { background: transparent; box-shadow: none; text-align: center; color: var(--muted); padding: 2px 8px; }
.app.site-scroll { flex: 1; min-height: 0; }
.app.site-scroll .scroller { height: 100%; }

/* Recording a voice note */
.rec, .fs-rec { display: flex; align-items: center; gap: 10px; }
.fs-rec { background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 1px 2px rgba(14, 15, 14, .08); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #C2453B; animation: recBlink 1s infinite; flex: none; }
@keyframes recBlink { 50% { opacity: .25; } }
.wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 26px; }
.wave i { flex: 1; max-width: 4px; height: 30%; border-radius: 2px; background: var(--surgical); animation: wave 1.1s ease-in-out infinite; }
.wave i:nth-child(2n) { animation-delay: .15s; } .wave i:nth-child(3n) { animation-delay: .3s; } .wave i:nth-child(4n) { animation-delay: .45s; } .wave i:nth-child(5n) { animation-delay: .6s; }
@keyframes wave { 0%, 100% { height: 22%; } 50% { height: 100%; } }
.rec b, .fs-rec b { font: 600 12px "JetBrains Mono", monospace; }

/* A quote or an invoice on a phone */
.qdoc { display: grid; gap: 5px; background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 1px 2px rgba(14, 15, 14, .08); font-size: 12px; }
.qdoc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 7px; margin-bottom: 2px; border-bottom: 2px solid var(--surgical); }
.qdoc-h span { color: var(--muted); font-size: 11px; }
.qline { display: flex; justify-content: space-between; gap: 10px; }
.qline span { color: var(--muted); }
.qtot { display: flex; justify-content: space-between; padding-top: 7px; margin-top: 3px; border-top: 1px solid var(--line-2); font-weight: 800; color: var(--surgical); font-size: 13px; }
.qdoc.on .qline, .qdoc.in .qline, .qdoc.on .qtot, .qdoc.in .qtot { animation: stepIn .4s var(--ease) both; }
.qdoc .qline:nth-child(2) { animation-delay: .15s; } .qdoc .qline:nth-child(3) { animation-delay: .35s; } .qdoc .qline:nth-child(4) { animation-delay: .55s; }
.qdoc .qline:nth-child(5) { animation-delay: .75s; } .qdoc .qline:nth-child(6) { animation-delay: .95s; } .qdoc .qtot { animation-delay: 1.15s; }

/* The report */
.rep-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.app .rep-tiles { background: transparent; box-shadow: none; padding: 0; }
.rep-tiles div { background: #fff; border-radius: 12px; padding: 10px 11px; box-shadow: 0 1px 2px rgba(14, 15, 14, .08); }
.rep-tiles b { display: block; font-size: 22px; letter-spacing: -.03em; }
.rep-tiles span { font-size: 11px; color: var(--muted); }
.rep-bars { display: grid; gap: 7px; }
.rep-bars p { font-size: 11px; color: var(--muted); }
.bar { display: grid; grid-template-columns: 26px 1fr 34px; align-items: center; gap: 6px; font-size: 11px; }
.bar i { height: 10px; width: 0; border-radius: 5px; background: var(--surgical); transition: width 1.1s var(--ease) .2s; }
.bar b { text-align: right; }
.rep-bars.on .b1 i { width: 22%; } .rep-bars.on .b2 i { width: 50%; } .rep-bars.on .b3 i { width: 67%; } .rep-bars.on .b4 i { width: 100%; }

/* Google */
.gbp { display: grid; gap: 3px; }
.gbp b { font-size: 15px; }
.stars { color: #E8A317; }
.stars em { font-style: normal; color: var(--muted); }
.gbp > span:last-child { color: var(--muted); }
.app .gpost { display: grid; gap: 2px; border-left: 3px solid var(--surgical); border-radius: 10px; }
.gpost small { font: 600 9.5px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--surgical); }
.gpost span { color: var(--muted); }
.app .serp-q { display: flex; gap: 8px; align-items: center; border-radius: 999px; padding: 10px 14px; }
.serp-q .icon { width: 15px; height: 15px; color: var(--muted); flex: none; }
.app .serp-r { display: grid; gap: 2px; font-size: 11.5px; }
.serp-r small { color: var(--surgical); }
.serp-r b { color: #1A47B8; font-size: 13px; }
.serp-r > span { color: var(--muted); }
.app .serp-r.top { box-shadow: 0 0 0 2px var(--surgical); }
.app .serp-r.map { display: flex; gap: 10px; align-items: center; }
.serp-r .pin .icon { width: 22px; height: 22px; color: #C2453B; }
.serp-r.map b { color: var(--ink); display: block; }

/* A website form */
.app .form, .fs-form { display: grid; gap: 6px; font-size: 12px; }
.fs-form { background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 1px 2px rgba(14, 15, 14, .08); }
.app .form small, .fs-form small { color: var(--muted); font-size: 10.5px; }
.app .form b, .fs-form b { font-size: 14px; }
.fld { border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 9px; }
.fbtn { background: var(--ink); color: #fff; text-align: center; border-radius: 8px; padding: 8px; font-weight: 700; }

/* Stars, status and the promise ring */
.stars-big, .fs-stars { font-size: 32px; letter-spacing: 4px; color: #E8A317; text-align: center; }
.app .stars-big { background: transparent; box-shadow: none; }
.app .stat { display: flex; gap: 10px; align-items: center; }
.stat i.ok { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #2FB37A; box-shadow: 0 0 0 4px rgba(47, 179, 122, .18); }
.stat b { display: block; font-size: 13px; }
.stat span { color: var(--muted); }
.app .ring { position: relative; width: 140px; margin: 2px auto; background: transparent; box-shadow: none; padding: 0; }
.ring svg { width: 100%; display: block; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--sunk); stroke-width: 10; }
.ring-fill { fill: none; stroke: var(--surgical); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.8s var(--ease) .2s; }
.ring.on .ring-fill { stroke-dashoffset: 195; }
.ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 11px; color: var(--muted); }
.ring > span b { font-size: 24px; letter-spacing: -.03em; color: var(--ink); }

/* Job sheets and a client portal */
.app .jcard2 { display: grid; gap: 4px; }
.jcard2 b { font-size: 14px; }
.jcard2 > span { color: var(--muted); }
.jcard2 div { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.jcard2 em { font: 600 10px "JetBrains Mono", monospace; font-style: normal; background: var(--soft); color: var(--surgical); padding: 3px 7px; border-radius: 999px; }
.jcard2 i { font-style: normal; display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; }
.jcard2 .icon { width: 14px; height: 14px; color: var(--surgical); }
.prog p { font-weight: 700; }
.prog-bar { height: 8px; margin-top: 7px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.prog-bar i { display: block; height: 100%; width: 0; background: var(--surgical); transition: width 1.4s var(--ease) .2s; }
.prog.on .prog-bar i { width: 50%; }
.app .photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: transparent; box-shadow: none; padding: 0; }
.photos span { aspect-ratio: 1; border-radius: 10px; display: flex; align-items: flex-end; padding: 6px; font-size: 10px; font-weight: 700; color: #fff; }
.ph1 { background: linear-gradient(160deg, #A9A79F, #55564F); }
.ph2 { background: linear-gradient(160deg, #C27C62, #7A4434); }
.photos .ph3 { background: var(--sunk); color: var(--muted); border: 1px dashed var(--line-2); }

/* The computer: the same bar as the hero's laptop */
.pc { width: 100%; border-radius: 14px; background: #fff; overflow: hidden; text-align: left; box-shadow: 0 40px 80px -40px rgba(14, 15, 14, .5), 0 0 0 1px var(--line); }
.pc-bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.pc-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.pc-bar span { margin-left: 8px; font: 500 11px "JetBrains Mono", monospace; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; }
.pc-screen { aspect-ratio: 16 / 10; display: flex; flex-direction: column; overflow: hidden; background: #F7F7F5; }
.win { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.win-h { display: flex; align-items: baseline; gap: 12px; padding: 11px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.win-h b { font-size: 14px; }
.win-h > span:not(.chat-tag) { font-size: 12px; color: var(--surgical); }
.win-b { flex: 1; min-height: 0; display: grid; gap: 10px; align-content: start; padding: 14px 16px; overflow: hidden; }
.win-b.two { grid-template-columns: 1fr 1.15fr; align-items: start; }
.win-b.two .chip { grid-column: 1 / -1; }
.win [data-step] { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.win [data-step].on { opacity: 1; transform: none; }
.win .ui { font-size: 12px; }
.track p { font-weight: 700; }
.track-bar { position: relative; height: 10px; margin: 12px 0 7px; border-radius: 5px; background: var(--sunk); }
.track-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 5px; background: var(--surgical); transition: width 1.6s var(--ease) .2s; }
.track.on .track-bar i { width: 37.8%; }
.track-bar b { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--surgical); transform: translate(-50%, -50%); }
.track-bar .m1 { left: 0; } .track-bar .m2 { left: 37.8%; background: var(--surgical); } .track-bar .m3 { left: 100%; border-color: var(--line-2); }
.track-l { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpis div { background: #fff; border-radius: 10px; padding: 10px; box-shadow: 0 1px 2px rgba(14, 15, 14, .07); }
.kpis b { display: block; font-size: 18px; letter-spacing: -.03em; }
.kpis span { font-size: 10.5px; color: var(--muted); }
.clause { background: #fff; border-left: 3px solid var(--surgical); border-radius: 8px; padding: 10px 12px; }
.clause small, .anyc small, .dq-who small { display: block; font: 600 9.5px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--surgical); margin-bottom: 3px; }
.tl { display: grid; gap: 9px; }
.tl-n { display: grid; grid-template-columns: 28px 1fr; gap: 1px 10px; align-items: center; background: #fff; border-radius: 12px; padding: 9px 12px; }
.tl-n i { grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 12px "JetBrains Mono", monospace; font-style: normal; background: var(--sunk); }
.tl-n b { font-size: 13.5px; } .tl-n span { font-size: 11.5px; color: var(--muted); }
.tl-n.hl { background: var(--surgical); color: #fff; } .tl-n.hl i { background: rgba(255, 255, 255, .2); } .tl-n.hl span { color: rgba(255, 255, 255, .82); }
.win-b.paper { background: #fff; }
.pl { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pl small { color: var(--muted); } .pl b { text-align: right; }
.sign { display: grid; gap: 2px; }
.sign small { color: var(--muted); }
.sign b { display: inline-block; width: 0; overflow: hidden; white-space: nowrap; font: italic 400 21px Georgia, "Times New Roman", serif; color: #1F3A5F; transition: width 1.3s steps(12) .3s; }
.sign.on b { width: 14ch; }
.sign span { font-size: 10.5px; color: var(--muted); }
.own { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; background: #fff; border-radius: 10px; padding: 7px 12px; }
.own .icon { width: 16px; height: 16px; color: var(--surgical); }
.own span { color: var(--muted); font-size: 11px; }
.cins { display: grid; gap: 7px; }
.cin { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.cin small { display: block; font-size: 10px; color: var(--muted); } .cin b { font-size: 12.5px; }
.chip { display: inline-flex; justify-self: start; gap: 8px; align-items: center; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 8px 14px; }
.chip .icon { width: 15px; height: 15px; color: var(--pulse); }
.crm { display: grid; gap: 6px; }
.crm-r { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; background: #fff; border-radius: 8px; padding: 8px 10px; font-size: 11.5px; }
.crm-r span { color: var(--muted); }
.crm-r em, .cx-pill { font: 600 9.5px "JetBrains Mono", monospace; font-style: normal; text-transform: uppercase; background: var(--soft); color: var(--surgical); padding: 3px 7px; border-radius: 999px; }
.crm-p { background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 1px 2px rgba(14, 15, 14, .08); }
.crm-p > b { display: block; font-size: 15px; } .crm-p > span { color: var(--muted); }
.crm-p ol { list-style: none; margin: 10px 0 0; padding: 0 0 0 12px; display: grid; gap: 8px; border-left: 2px solid var(--surgical); }
.crm-p li { display: flex; justify-content: space-between; gap: 8px; } .crm-p li span { color: var(--muted); }
.cols { background: #fff; border-radius: 12px; padding: 12px; }
.cols p { color: var(--muted); font-size: 11px; }
.cols-in { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-top: 8px; }
.cols-in i { flex: 1; height: 0; border-radius: 6px 6px 2px 2px; background: var(--surgical); transition: height 1s var(--ease); }
.cols.on .c1 { height: 30%; } .cols.on .c2 { height: 44%; transition-delay: .08s; } .cols.on .c3 { height: 38%; transition-delay: .16s; } .cols.on .c4 { height: 55%; transition-delay: .24s; }
.cols.on .c5 { height: 62%; transition-delay: .32s; } .cols.on .c6 { height: 58%; transition-delay: .4s; } .cols.on .c7 { height: 78%; transition-delay: .48s; } .cols.on .c8 { height: 100%; transition-delay: .56s; background: var(--pulse); }
.flow { position: relative; display: flex; justify-content: space-between; gap: 6px; padding: 14px 0 6px; }
.flow::before { content: ""; position: absolute; left: 9%; right: 9%; top: 34px; height: 2px; background: var(--line-2); }
.flow::after { content: ""; position: absolute; left: 9%; top: 35px; width: 10px; height: 10px; border-radius: 50%; background: var(--pulse); box-shadow: 0 0 0 5px rgba(61, 220, 151, .25); transform: translate(-50%, -50%); animation: travel 3.6s ease-in-out infinite; }
@keyframes travel { from { left: 9%; } to { left: 91%; } }
.fnode { position: relative; z-index: 1; width: 19%; display: grid; justify-items: center; gap: 6px; text-align: center; }
.fnode .icon { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: #fff; color: var(--surgical); box-shadow: 0 8px 16px -10px rgba(14, 15, 14, .4); }
.fnode b { font-size: 11px; }
.flow-cap { background: #fff; border-radius: 10px; padding: 10px 12px; color: var(--muted); }
.note2 { justify-self: start; max-width: 82%; padding: 14px 16px; border-radius: 4px; background: #FFF4C2; font: italic 400 15px Georgia, "Times New Roman", serif; box-shadow: 0 12px 22px -14px rgba(14, 15, 14, .35); rotate: -1.5deg; }
.anyrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.anyc { background: #fff; border-radius: 10px; padding: 10px; border-top: 3px solid var(--surgical); }
.anyc b { font-size: 12px; }

/* The promise: the tracker on a computer with the phone in front, then three computers */
.pv-stage { position: relative; max-width: 980px; margin: 0 auto 70px; }
.pv-pc { width: 80%; }
.pv-phone { position: absolute; right: 0; bottom: -60px; width: 25%; min-width: 210px; }
.pv-phone .phone { max-width: none; }
.pv-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 110px; }
.pv-fig { margin: 0; }
.pv-row .pc-screen { aspect-ratio: 4 / 3.1; }
.pv-fig figcaption { display: grid; gap: 4px; margin-top: 16px; }
.pv-fig figcaption b { font-size: 1.15rem; letter-spacing: -.02em; }
.pv-fig figcaption span { color: var(--muted); font-size: 15px; }

/* Built to order: the example quote, then the eight examples */
.cxq { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin: 8px 0 64px; }
.dq { max-width: 520px; margin-inline: auto; padding: 28px 30px; border-radius: 6px; background: #fff; font-size: 13px; text-align: left; box-shadow: 0 40px 80px -40px rgba(14, 15, 14, .45), 0 0 0 1px var(--line); rotate: -1.2deg; }
.dq-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--surgical); }
.dq-top img { height: 30px; width: auto; }
.dq-top > span { text-align: right; } .dq-top b { display: block; font-size: 14px; } .dq-top small { color: var(--muted); }
.dq-who { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 12px; }
.dq-who b { display: block; } .dq-who span { color: var(--muted); }
.dq h4 { margin: 4px 0 8px; font-size: 17px; letter-spacing: -.02em; }
.dq-l { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dq-l span { color: var(--muted); } .dq-l b { white-space: nowrap; }
.dq-t { display: flex; justify-content: space-between; padding-top: 12px; font-size: 18px; font-weight: 800; color: var(--surgical); }
.dq-f { margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.dq-f em { display: block; margin-top: 6px; font: 500 10px "JetBrains Mono", monospace; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.cxq-copy h3 { margin: 14px 0 10px; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.cxq-copy p { color: var(--muted); margin-bottom: 22px; }
.cx { display: grid; grid-template-columns: 330px 1fr; gap: 28px; align-items: center; }
.cx-list { display: grid; gap: 6px; }
.cx-tab { position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .3s, border-color .3s; }
.cx-tab .icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--surgical); }
.cx-tab b { display: block; font-size: 15px; }
.cx-tab small { display: none; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.cx-tab:hover { background: var(--card); }
.cx-tab.is-on { background: var(--card); border-color: var(--line); }
.cx-tab.is-on small { display: block; }
.cx-tab.is-on::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--surgical); animation: tabFill 9s linear forwards; }
.cx.manual .cx-tab::after { display: none; }
@keyframes tabFill { to { width: 100%; } }
.cx-stage { min-height: 480px; display: grid; place-items: center; padding: clamp(20px, 4vw, 48px); border-radius: 24px; background: var(--sunk); }
.cx-panel { width: 100%; }
.cx-panel[hidden] { display: none; }
.cx-panel .phone { max-width: 270px; }
.cx-panel .pc { max-width: 640px; margin-inline: auto; }

/* What you get: the carousel */
.oc { position: relative; }
.oc-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 22px; }
.oc-track::-webkit-scrollbar { display: none; }
.oc-card { scroll-snap-align: start; display: grid; gap: 8px; align-content: start; padding: 22px 22px 26px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); text-align: left; }
.oc-dev { margin-bottom: 10px; padding: 22px 10px; border-radius: 18px; background: var(--sunk); }
.oc-card .phone { max-width: 236px; }
.oc-card h3 { font-size: 1.2rem; letter-spacing: -.02em; }
.oc-card p { color: var(--muted); font-size: 15px; }
.oc-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 6px; }
.oc-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); cursor: pointer; transition: background .25s, color .25s; }
.oc-btn:hover { background: var(--ink); color: var(--paper); }
.oc-btn .icon { width: 18px; height: 18px; }
.oc-btn[data-prev] .icon { transform: rotate(180deg); }
.oc-dots { display: flex; gap: 6px; }
.oc-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--line-2); cursor: pointer; transition: width .3s, background .3s; }
.oc-dots button.is-on { width: 22px; background: var(--surgical); }

/* The film: one job, start to paid, playing on a phone */
.film { display: grid; grid-template-columns: minmax(260px, 330px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 980px; margin: 8px auto 0; }
.film-dev { position: relative; }
.film-dev .phone { max-width: 330px; }
.film-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.film-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 46px 12px 16px; opacity: 0; transform: translateX(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
.scene.is-on { opacity: 1; transform: none; }
.scene-when { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; background: var(--soft); color: var(--surgical); font: 600 10px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.film .scene [data-fstep] { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.film .scene [data-fstep].in { opacity: 1; transform: none; }
.film .msg { font-size: 12.5px; max-width: 88%; }
.fs-tag { align-self: center; display: inline-flex; gap: 7px; align-items: center; padding: 6px 12px; border-radius: 999px; background: #EDECE7; color: var(--muted); font-size: 12px; }
.fs-tag .icon { width: 14px; height: 14px; color: var(--surgical); }
.fs-notif { display: grid; gap: 2px; padding: 10px 12px; border-radius: 16px; background: #fff; font-size: 12px; box-shadow: 0 14px 28px -16px rgba(14, 15, 14, .5), 0 0 0 1px var(--line); }
.fs-notif b { font: 600 10px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fs-notif.win { background: var(--ink); color: var(--paper); }
.fs-notif.win b { color: var(--pulse); }
.film-pp { position: absolute; right: -6px; bottom: 30px; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); cursor: pointer; box-shadow: 0 14px 28px -12px rgba(14, 15, 14, .6); }
.film-pp .icon { width: 18px; height: 18px; }
.film-pp .icon:last-child { display: none; }
.film.paused .film-pp .icon:first-child { display: none; }
.film.paused .film-pp .icon:last-child { display: block; }
.film-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.film-steps button { position: relative; width: 100%; display: grid; grid-template-columns: 128px 1fr; gap: 2px 14px; padding: 11px 14px 13px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.film-steps .fw { grid-row: 1 / span 2; padding-top: 3px; font: 600 11px "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.film-steps b { font-size: 15.5px; letter-spacing: -.01em; }
.film-steps .fd { display: none; font-size: 14px; color: var(--muted); }
.fbar { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; display: none; }
.fbar i { display: block; height: 100%; width: 0; background: var(--surgical); }
.film-steps li.is-on button { background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.film-steps li.is-on .fw { color: var(--surgical); }
.film-steps li.is-on .fd, .film-steps li.is-on .fbar { display: block; }
.film-steps li.is-done b { color: var(--muted); }

/* Tablets and phones */
@media (max-width: 1000px) {
  .oc-track { grid-auto-columns: calc((100% - 24px) / 2); }
  .cx { grid-template-columns: 1fr; }
  .cx-list { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .cx-list::-webkit-scrollbar { display: none; }
  .cx-tab { flex: none; scroll-snap-align: start; border-color: var(--line); padding: 10px 14px; align-items: center; }
  .cx-tab small, .cx-tab.is-on small { display: none; }
  .cx-stage { min-height: 0; }
  .cxq { grid-template-columns: 1fr; text-align: center; }
  .cxq-copy .btn { margin-inline: auto; }
  .pv-row { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 800px) {
  .film { grid-template-columns: 1fr; }
  .film-steps li:not(.is-on) { display: none; }
  .film-steps button { grid-template-columns: 1fr; text-align: center; }
  .film-steps .fw { grid-row: auto; }
  .pv-stage { display: grid; gap: 28px; margin-bottom: 0; }
  .pv-pc { width: 100%; }
  .pv-phone { position: static; width: 100%; min-width: 0; }
  .pv-phone .phone { max-width: 270px; }
  .pv-row { margin-top: 48px; }
}
@media (max-width: 640px) {
  .oc-track { grid-auto-columns: 86%; }
  .pc-screen { aspect-ratio: 4 / 3.6; }
  .pc .win { zoom: .78; }
  .dq { padding: 20px; font-size: 12px; rotate: none; }
  .dq-who { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .wave i, .rec-dot, .flow::after, .cx-tab.is-on::after { animation: none; }
}
/* The promise computers: content sized to the screen it sits in */
.pv-pc .pc-screen { aspect-ratio: 16 / 9; }
.pv-pc .win { zoom: 1.28; }
.pv-row .pc-screen { aspect-ratio: 16 / 11; }
.pv-pc .win-b, .pv-pc .win-h { padding-right: 31%; }
@media (max-width: 800px) { .pv-pc .win-b, .pv-pc .win-h { padding-right: 16px; } .pv-pc .win { zoom: 1; } .pv-pc .pc-screen { aspect-ratio: 4 / 3.4; } }
/* The five places: the phone sets the height of its side of the card */
.stack-media:has(.phone) { aspect-ratio: auto; }
@media (max-width: 1080px) { .stack-media:has(.phone) { padding: 28px 20px; } .stack-media .phone { max-width: 250px; } }
@media (min-width: 1001px) { .cx-panel .win { zoom: 1.3; } .cx-panel .pc-screen { aspect-ratio: 16 / 10.4; } }
@media (min-width: 1001px) { .cx-panel .cols-in { height: 74px; } }

/* 21 October, his answers: smaller phones, slower and smoother steps, Lafeli still, What you get as pictures */
.stack-media .phone { max-width: 250px; }
.oc-card .phone { max-width: 220px; }
.app [data-step].on { animation-duration: .8s; }
.msg { transition-duration: .7s; }
.app.site-still { flex: 1; min-height: 0; }
.site-still img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.oc-card { gap: 0; padding: 18px 18px 22px; text-align: center; }
.oc-card h3 { margin-top: 2px; }
.oc-cta, .xq-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.xq { max-width: 620px; margin: 8px auto 0; }
.xq a { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 50px 90px -45px rgba(14, 15, 14, .45), 0 0 0 1px var(--line); transition: transform .6s var(--ease); }
.xq a:hover { transform: translateY(-4px); }
.xq img { width: 100%; height: auto; display: block; }
@media (max-width: 1080px) { .stack-media .phone { max-width: 230px; } }

/* ===================================================================== 21 October, round two (his nine points) */
/* 05: the real dashboard inside the phone, tap a screen and scroll it */
.app.mini { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #F6F5F1; }
.mini-tabs { flex: none; display: flex; gap: 5px; padding: 8px 8px 7px; background: #fff; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.mini-tabs::-webkit-scrollbar { display: none; }
.mini-tabs button { flex: none; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--muted); font: 600 11.5px "Switzer", sans-serif; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.mini-tabs button.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mini-body { position: relative; flex: 1; min-height: 0; }
.mini-scr { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.mini-scr::-webkit-scrollbar { display: none; }
.mini-scr.is-on { opacity: 1; visibility: visible; }
.mini-scr img { width: 100%; height: auto; display: block; }
.mini-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(14, 15, 14, .82); color: var(--paper); font: 500 10px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: opacity .4s; }
.mini.touched .mini-hint { opacity: 0; }

/* The dashboard section: the laptop with the real phone beside it; the phone is scrolled by hand */
.dash-stage { position: relative; padding-right: 9%; }
.dash-stage .dash-phone { display: block; position: absolute; right: 0; bottom: -36px; width: 23%; min-width: 200px; margin: 0; }
.dash-stage .dash-phone-frame { width: 100%; }
.dash-pimg { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.dash-pimg::-webkit-scrollbar { display: none; }
.dash-pimg img { width: 100%; height: auto; display: block; animation: none; }
.dash-hint { display: block; margin-top: 12px; text-align: center; font: 500 10.5px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.dash-notes { margin-top: 60px; }

/* The promise: one clear statement, four plain promises, nothing moving */
.pr { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; max-width: 1060px; margin: 0 auto; }
.pr-big { border-radius: var(--r); background: var(--ink); color: var(--paper); padding: clamp(30px, 4vw, 48px); display: grid; align-content: space-between; gap: 30px; }
.pr-90 { display: flex; align-items: baseline; gap: 12px; }
.pr-90 b { font-size: clamp(5.5rem, 10vw, 8.5rem); font-weight: 800; letter-spacing: -.06em; line-height: .85; color: var(--pulse); }
.pr-90 span { font: 500 14px "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(246, 245, 241, .6); }
.pr-big p { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.4; color: rgba(246, 245, 241, .78); }
.pr-big p b { color: var(--paper); }
.pr-list { display: grid; gap: 12px; }
.pr-row { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--card); }
.pr-row .icon { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--surgical); }
.pr-row b { display: block; font-size: 1.08rem; letter-spacing: -.02em; margin-bottom: 3px; }
.pr-row span { color: var(--muted); font-size: 15px; }

/* Built to order: the words on the left, a smaller quote on the right */
.xq-grid { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.xq-copy h2 { margin-top: 14px; }
.xq-copy .lead { margin-top: 18px; }
.xq-list { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 12px; }
.xq-list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.xq-list .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--surgical); }
.xq-grid .xq { max-width: 440px; margin: 0; }
.xq a { position: relative; }
.xq-tag { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 11px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 14px 28px -12px rgba(14, 15, 14, .6); }

/* The phones: cleaner screens, every one the same size */
.phone .chat-top { background: #fff; }
.phone .chat-tag { font-size: 9px; opacity: .8; }
.phone .chat-body { background: #fff; gap: 7px; }
.phone .msg { font-size: 12.5px; line-height: 1.42; }
.phone .msg.out { border-radius: 18px 18px 5px 18px; box-shadow: none; }
.phone .msg.in { background: #EEEEF0; box-shadow: none; border-radius: 18px 18px 18px 5px; }
.phone .msg.sys { background: transparent; padding: 2px 0; font-size: 11px; color: #8E8E93; }
.phone .msg.booked { background: #F2F8F5; color: var(--ink); border: 1px solid rgba(11, 93, 69, .18); }
.phone .msg.booked b { color: var(--surgical); }
.phone .msg.booked .icon { color: var(--surgical); width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: rgba(11, 93, 69, .12); box-sizing: content-box; }
.phone .msg.typing.in { background: #EEEEF0; }
.phone .ui { box-shadow: 0 1px 2px rgba(14, 15, 14, .06), 0 0 0 1px var(--line); }
.oc-card .phone { width: 250px; max-width: 100%; }
.oc-card h3 { min-height: 2.6em; display: grid; place-items: center; font-size: 1.1rem; }

/* Phones and small tablets */
@media (max-width: 900px) {
  .pr { grid-template-columns: 1fr; }
  .xq-grid { grid-template-columns: 1fr; text-align: center; }
  .xq-list { justify-items: center; }
  .xq-grid .xq { margin-inline: auto; width: min(100%, 360px); }
  .dash-stage { padding-right: 0; }
  .dash-stage .dash-phone { position: static; width: auto; min-width: 0; }
  .dash-stage .dash-phone-frame { width: min(290px, 80vw); }
  .dash-notes { margin-top: 22px; }
}
@media (max-width: 680px) {
  /* The hero's words are the first screen; the website comes underneath */
  .hero .hero-grid > div:first-child { min-height: calc(100svh - var(--nav-h) - 24px); display: flex; flex-direction: column; justify-content: center; }
  .hero .stage { margin-top: 12px; }
  /* No pinning on phones: each card scrolls past whole */
  .stack-card, .stack-card:nth-child(n) { position: relative; top: auto; }
  .stack-card::after { display: none; }
  .stack { display: grid; gap: 18px; }
}
.xq-copy h2 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); margin-top: 18px; }
.mini-tabs { gap: 4px; padding: 8px 6px 7px; justify-content: center; } .mini-tabs button { padding: 5px 8px; font-size: 10.5px; }

/* ===================================================================== 21 October, round three */
/* The promise: the 90 days of work, laid out */
.pv2 { max-width: 1120px; margin: 0 auto; display: grid; gap: 22px; }
.pv2-top { display: grid; grid-template-columns: .8fr 1.2fr; gap: 22px; align-items: stretch; }
.pr-90 span { max-width: 9ch; line-height: 1.35; }
.pv2-work { border-radius: var(--r); border: 1px solid var(--line); background: var(--card); padding: clamp(24px, 3vw, 34px); }
.pw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-top: 18px; }
.pw { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: start; }
.pw .icon { grid-row: 1 / span 2; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--soft); color: var(--surgical); box-sizing: border-box; }
.pw b { font-size: 1rem; letter-spacing: -.015em; }
.pw span { font-size: 14px; color: var(--muted); }
.pm-row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 16px; align-items: stretch; }
.pm-row::before { content: ""; position: absolute; left: 24px; right: 24px; top: 31px; height: 2px; background: linear-gradient(90deg, var(--surgical), var(--pulse)); opacity: .35; }
.pm { position: relative; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--card); padding: 22px 22px 24px; }
.pm-n { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--surgical); color: #fff; font: 500 11px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.pm h3 { font-size: 1.2rem; letter-spacing: -.02em; margin-top: 14px; }
.pm ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 9px; }
.pm li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--muted); }
.pm li .icon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--surgical); }
.pm-end { position: relative; display: grid; align-content: center; justify-items: center; gap: 6px; min-width: 150px; padding: 22px; border-radius: var(--r-s); background: var(--ink); color: var(--paper); text-align: center; }
.pm-end b { font-size: 1.5rem; letter-spacing: -.03em; color: var(--pulse); }
.pm-end span { font-size: 14px; color: rgba(246, 245, 241, .75); }
.pv2-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; padding-top: 6px; color: var(--muted); font-size: 14.5px; font-weight: 500; }
.pv2-trust span { display: inline-flex; gap: 8px; align-items: center; }
.pv2-trust .icon { width: 16px; height: 16px; color: var(--surgical); }
@media (max-width: 1000px) {
  .pv2-top { grid-template-columns: 1fr; }
  .pm-row { grid-template-columns: 1fr; }
  .pm-row::before { left: 31px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; background: linear-gradient(180deg, var(--surgical), var(--pulse)); }
  .pm-end { min-width: 0; }
}
@media (max-width: 560px) { .pw-grid { grid-template-columns: 1fr; } }

@media (max-width: 680px) {
  /* The hero: a faint background for depth */
  .hero { position: relative; isolation: isolate; overflow: hidden; }
  .hero::before { content: ""; position: absolute; inset: -10% -30% 0; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 38% at 18% 14%, rgba(61, 220, 151, .20), transparent 70%), radial-gradient(55% 40% at 92% 46%, rgba(11, 93, 69, .14), transparent 72%), radial-gradient(70% 30% at 40% 88%, rgba(232, 163, 23, .07), transparent 70%); }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(14, 15, 14, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 15, 14, .045) 1px, transparent 1px); background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(80% 55% at 50% 35%, #000, transparent 75%); mask-image: radial-gradient(80% 55% at 50% 35%, #000, transparent 75%); }

  /* The five cards fold over each other on phones too, each one fitting the screen, styled like What you get */
  .stack { display: block; }
  .stack-card, .stack-card:nth-child(n) { position: sticky; top: calc(var(--nav-h) + 8px); min-height: 0; grid-template-columns: 1fr; margin-bottom: 18px; border-radius: 24px; }
  .stack-card:nth-child(2) { top: calc(var(--nav-h) + 14px); } .stack-card:nth-child(3) { top: calc(var(--nav-h) + 20px); }
  .stack-card:nth-child(4) { top: calc(var(--nav-h) + 26px); } .stack-card:nth-child(5) { top: calc(var(--nav-h) + 32px); }
  .stack-card::after { display: block; }
  .stack-media, .stack-media:has(.phone) { order: -1; aspect-ratio: auto; margin: 14px 14px 0; padding: 18px 10px; border-radius: 18px; }
  .stack-media .phone { width: min(200px, 52vw); max-width: none; }
  .stack-copy { padding: 18px 20px 22px; }
  .stack-copy h3 { font-size: 1.45rem; }
  .stack-copy p { font-size: 15px; margin-top: 8px; }
  .stack-copy ul { display: none; }
}
/* Narrow phones: the chat header stays on one line each, the Example tag gives way */
.phone { container-type: inline-size; }
.phone .chat-top > span:nth-child(2) { min-width: 0; }
.phone .chat-top b, .phone .chat-top small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 240px) {
  .chat-tag { display: none; }
  .msg { font-size: 11.5px; }
  .chat-top b { font-size: 12.5px; }
}
@container (max-width: 240px) {
  .mini-tabs { gap: 3px; padding: 7px 4px 6px; justify-content: flex-start; }
  .mini-tabs button { padding: 4px 5px; font-size: 9.5px; }
}

/* ===================================================================== 24 October: "Before you book" in the page
   The video plays in place on the home hero, the About page and /watch. The poster is the thumbnail. */
.ivideo { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--ink); box-shadow: 0 50px 90px -40px rgba(14, 15, 14, .45), 0 0 0 1px var(--line); }
.ivideo video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ivideo:not(.is-on):hover video { transform: scale(1.015); }
.iv-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.iv-play:focus-visible { outline: 3px solid var(--surgical); outline-offset: -3px; }
.ivideo.is-on .iv-play { display: none; }
.hero-watch-note { display: flex; gap: 8px; align-items: center; margin-top: 16px; font-size: 14.5px; color: var(--stone); }
.hero-watch-note .icon { width: 15px; height: 15px; flex: none; color: var(--surgical); fill: currentColor; }
.meet.has-video { grid-template-columns: 1.05fr .95fr; align-items: start; }
.meet.has-video .about-video { position: sticky; top: 110px; }
.watch-video { max-width: 1040px; margin: 40px auto 0; }
.watch-page .actions { margin-top: 32px; }
@media (max-width: 900px) {
  .meet.has-video { grid-template-columns: 1fr; }
  .meet.has-video .about-video { position: static; }
}
@media (max-width: 900px) { .hero-watch-note { justify-content: center; text-align: center; } }

/* The client sign-in form (24 October 2026) */
.auth-form { max-width: 420px; margin: 34px auto 18px; text-align: left; }
.auth-form [data-auth-mode] { display: grid; gap: 10px; }
.auth-form [hidden] { display: none; }
.auth-form label { font: 500 12px/1.4 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); margin-top: 6px; }
.auth-form input { min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: 400 16px/1 "Switzer", sans-serif; }
.auth-form input:focus { outline: 2px solid var(--surgical); outline-offset: 1px; border-color: var(--surgical); }
.auth-form .btn { margin-top: 12px; width: 100%; }
.auth-form .lead { font-size: 16px; margin: 0 0 4px; }
.auth-link { background: none; border: 0; padding: 6px 0; color: var(--stone); font: 400 15px/1.4 "Switzer", sans-serif; text-decoration: underline; cursor: pointer; justify-self: center; }
.auth-msg { min-height: 22px; margin: 12px 0 0; font-size: 15px; color: var(--ink); text-align: center; }
.auth-msg.is-ok { color: var(--surgical); }