/* vellier.co.uk: one stylesheet, mobile first.
   Light and product-led: paper ground, evergreen ink, sage accent, warm cream
   panels, Geist (self-hosted). App-screen mock-ups (.ui-*) follow the real
   portal: dark evergreen staff app, light client-facing pages. */
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-SemiBold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Regular.ttf") format("truetype"); font-weight: 400 500; font-display: swap; }

:root {
  --ink: #0E1714;
  --ink-2: #26332E;
  --muted: #56655E;
  --paper: #FCFCFA;
  --white: #FFFFFF;
  --cream: #F4F1E8;
  --cream-2: #E9E4D6;
  --line: #E1E4DE;
  --line-2: #CFD5CE;
  --sage: #8FB8A2;
  --sage-deep: #3B6852;
  --sage-tint: #E5EFE9;
  --on-dark: #F3F5F0;
  --on-dark-2: #B9C6BF;
  --dark-line: #24342D;
  --warn-bg: #FFF5DA;
  --warn-line: #D9A520;
  --warn-ink: #6B4A00;
  --error: #B42318;
  --display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap: 1200px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow-screen: 0 1px 0 rgba(14,23,20,.04), 0 24px 48px -16px rgba(14,23,20,.28), 0 60px 120px -40px rgba(14,23,20,.25);
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink-2); font: 400 17px/1.6 var(--display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--sage-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.08; letter-spacing: -0.028em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.4vw, 76px); letter-spacing: -0.04em; line-height: 1.0; }
h2 { font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -0.035em; margin-top: 1.4em; }
h3 { font-size: 20px; letter-spacing: -0.015em; line-height: 1.25; margin-top: 1.4em; }
p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
li { margin: .3em 0; }
strong, b { color: var(--ink); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
code { font-family: var(--mono); font-size: .88em; background: var(--cream); padding: .1em .35em; border-radius: 6px; }
pre { background: var(--cream); border-radius: 10px; padding: 14px; overflow-x: auto; }
pre code { background: none; padding: 0; }
blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--sage); color: var(--ink); font-size: 1.1em; }

.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--on-dark); padding: 10px 14px; border-radius: 8px; z-index: 100; font-weight: 600; }
.skip:focus { top: 12px; color: var(--on-dark); }
.wrap { width: min(var(--wrap), 100%); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@media (min-width: 700px) { .wrap { padding-left: 28px; padding-right: 28px; } }
.narrow { max-width: 780px; }
.wrap.narrow { max-width: var(--wrap); }
.wrap.narrow > * { max-width: 780px; }
.muted { color: var(--muted); }
.eyebrow { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; color: var(--sage-deep); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--sage); }
.lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--muted); max-width: 58ch; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Wordmark: "ve" + two pill lines (the ll) + "ier", as on the holding page */
.logo { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 26px; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; display: inline-flex; align-items: baseline; }
.logo .l { display: inline-block; width: .114em; border-radius: 999px; vertical-align: -0.0125em; transform-origin: 50% 100%; }
.logo .l1 { height: .7425em; background: currentColor; margin-left: .11em; animation: breathe 2.8s ease-in-out infinite; }
.logo .l2 { height: .5825em; background: var(--sage); margin-left: .1em; margin-right: .085em; animation: breathe 2.8s ease-in-out infinite; animation-delay: .7s; }
@keyframes breathe { 0%, 100% { transform: scaleY(1); opacity: 1; box-shadow: 0 0 0 rgba(143,184,162,0); } 50% { transform: scaleY(.86); opacity: .72; box-shadow: 0 0 22px rgba(143,184,162,.4); } }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo-link { text-decoration: none; display: inline-flex; padding: 6px 0; }
.nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); font: 500 15px var(--display); cursor: pointer; }
.site-nav { display: none; }
.site-nav.open { display: block; position: absolute; left: 0; right: 0; top: 68px; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 16px 20px; box-shadow: 0 20px 40px -20px rgba(14,23,20,.25); max-height: calc(100vh - 68px); overflow-y: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav ul a { display: block; padding: 13px 4px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--line); }
.site-nav ul a[aria-current="page"] { color: var(--sage-deep); }
.site-nav .nav-cta { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.open { display: flex; position: static; align-items: center; gap: 28px; padding: 0; border: 0; background: none; box-shadow: none; max-height: none; overflow: visible; }
  .site-nav ul { display: flex; gap: 4px; }
  .site-nav ul a { border: 0; padding: 8px 12px; font-size: 15px; color: var(--ink-2); border-radius: 999px; }
  .site-nav ul a:hover { color: var(--ink); background: var(--cream); }
  .site-nav ul a[aria-current="page"] { color: var(--ink); background: var(--cream); }
  .site-nav .nav-cta { margin: 0; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-dark); font: 500 16px/1 var(--display); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s var(--ease); white-space: nowrap; }
.btn:hover { background: #22332C; border-color: #22332C; color: var(--on-dark); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn.secondary:hover { border-color: var(--ink); color: var(--ink); background: var(--white); }
.btn.sage { background: var(--sage); border-color: var(--sage); color: var(--ink); }
.btn.sage:hover { background: #A5C8B5; border-color: #A5C8B5; }
.btn.small { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn .play { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.text-link { font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--sage); padding-bottom: 2px; }
.text-link:hover { color: var(--sage-deep); }

/* Sections */
main { display: block; }
.section { padding: clamp(64px, 10vw, 128px) 0; }
.section.tight { padding: clamp(40px, 6vw, 72px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { margin-top: 0; }
.section-head .lead { margin-bottom: 0; }
.section.cream, .cream { background: var(--cream); }
.section.dark { background: var(--ink); color: var(--on-dark-2); }
.dark h2, .dark h3, .dark strong, .dark b { color: var(--on-dark); }
.dark .lead { color: var(--on-dark-2); }
.dark .eyebrow { color: var(--sage); }
.dark a { color: var(--sage); }
.page-head { padding: clamp(40px, 7vw, 88px) 0 clamp(24px, 4vw, 40px); }
.page-head h1 { font-size: clamp(36px, 5.4vw, 64px); max-width: 18ch; }
.page-head .lead { margin-top: 18px; }
.page-body { padding: 0 0 clamp(56px, 8vw, 104px); }
.breadcrumb { font-size: 14px; color: var(--muted); }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li { margin: 0; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; color: var(--line-2); margin-right: 6px; }

.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1000px) { .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.two.wide-gap { gap: 64px; } }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; min-width: 0; }
.card h2, .card h3 { margin-top: 0; }
.card h3 { font-size: 19px; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
a.card { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .2s, transform .2s var(--ease); }
a.card:hover { border-color: var(--line-2); box-shadow: 0 12px 30px -18px rgba(14,23,20,.35); transform: translateY(-2px); }
.card .more { color: var(--sage-deep); font-weight: 500; margin-top: 12px; }
.card.cream { background: var(--cream); border-color: transparent; }
.tag { display: inline-block; font-size: 13px; font-weight: 500; color: var(--sage-deep); background: var(--sage-tint); border-radius: 999px; padding: 3px 10px; }
.ticks { list-style: none; padding: 0; }
.ticks li { padding-left: 30px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 18px; height: 18px; border-radius: 999px; background: var(--sage-tint); }
.ticks li::after { content: ""; position: absolute; left: 7px; top: .62em; width: 8px; height: 4.5px; border-left: 2px solid var(--sage-deep); border-bottom: 2px solid var(--sage-deep); transform: rotate(-45deg); }
.dark .ticks li::before { background: rgba(143,184,162,.16); }
.dark .ticks li::after { border-color: var(--sage); }

/* Scroll reveal (only with JavaScript and without reduced motion) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ─── Home: hero ─────────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 7vw, 96px) 0 0; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: auto -20% 0 -20%; height: 62%; background: linear-gradient(180deg, transparent, var(--cream) 46%); z-index: -1; }
.hero-copy { max-width: 900px; }
.hero h1 { font-size: clamp(44px, 7.6vw, 92px); max-width: 13ch; margin-bottom: 22px; }
.hero .lead { font-size: clamp(18px, 2.1vw, 22px); max-width: 46ch; }
.hero .actions { margin: 30px 0 18px; }
.hero-note { font-size: 14px; color: var(--muted); margin: 0; }
.hero-stage { margin-top: clamp(40px, 6vw, 72px); position: relative; }
.rail { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rail-steps { list-style: none; margin: 0; padding: 0; display: none; flex: 1; gap: 6px; }
.rail-steps li { flex: 1; margin: 0; min-width: 0; }
.rail-steps button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 10px 0 0; font-size: 13px; font-weight: 500; color: var(--muted); position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; }
.rail-steps button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: var(--line-2); }
.rail-steps button::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; border-radius: 3px; background: var(--ink); width: 0; }
.rail-steps button.done::after { width: 100%; }
.rail-steps button[aria-current="step"] { color: var(--ink); }
.rail-steps button[aria-current="step"]::after { width: var(--p, 100%); }
.rail-steps button:focus-visible { outline-offset: 4px; }
.rail-now { flex: 1; font-size: 15px; font-weight: 500; color: var(--ink); }
.rail-now span { color: var(--muted); font-weight: 400; }
.rail-ctrl { all: unset; box-sizing: border-box; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.rail-ctrl:hover { border-color: var(--ink); }
.rail-ctrl:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 3px; }
.rail-ctrl svg { width: 14px; height: 14px; fill: var(--ink); }
.rail-ctrl .i-play { display: none; }
.rail-ctrl[aria-pressed="true"] .i-play { display: block; }
.rail-ctrl[aria-pressed="true"] .i-pause { display: none; }
@media (min-width: 900px) { .rail-steps { display: flex; } .rail-now { display: none; } }

.hero-frame { font-size: clamp(9.5px, 1.1vw, 13.5px); }
@media (min-width: 1120px) {
  .hero { padding-top: clamp(48px, 6vw, 80px); }
  .hero { padding-bottom: 88px; }
  .hero > .wrap { display: grid; grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); gap: 56px; align-items: center; }
  .hero h1 { font-size: clamp(50px, 4.6vw, 68px); max-width: none; }
  .hero .lead { font-size: 20px; }
  .hero-stage { margin-top: 0; }
  .hero-frame { font-size: 11.5px; }
  .hero-scenes { aspect-ratio: 16 / 11.5; }
  .rail-steps button { font-size: 12px; }
}
html:not(.js) .rail-ctrl { display: none; }
.hero-scenes { position: relative; aspect-ratio: 1 / 1.08; }
@media (min-width: 640px) { .hero-scenes { aspect-ratio: 16 / 10; } }
.hero-scene { position: absolute; inset: 0; opacity: 0; transform: scale(.985); transition: opacity .6s var(--ease), transform .8s var(--ease); pointer-events: none; overflow: hidden; }
.hero-scene.on { opacity: 1; transform: none; pointer-events: auto; }
.hero-scene.light { background: #EEECE6; }

/* ─── Home: trade switcher ───────────────────────────────────────────────── */
.trade-tabs { display: flex; gap: 6px; padding: 5px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: clamp(28px, 4vw, 48px); }
.trade-tabs::-webkit-scrollbar { display: none; }
.trade-tabs button { all: unset; box-sizing: border-box; cursor: pointer; padding: 10px 18px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.trade-tabs button:hover { background: var(--cream); }
.trade-tabs button[aria-selected="true"] { background: var(--ink); color: var(--on-dark); }
.trade-tabs button:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 2px; }
.trade-panel { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .trade-panel { grid-template-columns: 5fr 7fr; gap: 64px; } }
.trade-panel h3 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.03em; margin: 0 0 16px; line-height: 1.1; }
.trade-panel .ticks { margin: 24px 0 28px; }
.trade-panel .ticks li { margin: .6em 0; color: var(--ink); }
.swap { transition: opacity .25s var(--ease); }
.swapping .swap { opacity: 0; }

/* ─── Home: journey ──────────────────────────────────────────────────────── */
.journey { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(64px, 9vw, 120px); counter-reset: step; }
.journey > li { margin: 0; display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) {
  .journey > li { grid-template-columns: 5fr 7fr; gap: 72px; }
  .journey > li:nth-child(even) { grid-template-columns: 7fr 5fr; }
  .journey > li:nth-child(even) .j-copy { order: 2; }
}
.j-num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--ink); color: var(--on-dark); font: 500 16px var(--display); margin-bottom: 20px; }
.j-copy h3 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 14px; }
.j-copy p { color: var(--muted); font-size: 18px; max-width: 42ch; }
.j-shot { font-size: clamp(9px, 1.15vw, 13px); }
.j-shot .ui-body { min-height: 30em; }
.j-shot .ui-body > * { min-height: 30em; }

/* ─── Home: why different ────────────────────────────────────────────────── */
.diff { display: grid; gap: 1px; background: var(--dark-line); border: 1px solid var(--dark-line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 900px) { .diff { grid-template-columns: repeat(3, 1fr); } }
.diff > div { background: var(--ink); padding: clamp(24px, 3vw, 36px); }
.diff h3 { font-size: 22px; margin: 18px 0 10px; }
.diff p { margin: 0; }
.diff-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(143,184,162,.14); display: grid; place-items: center; }
.diff-icon svg { width: 22px; height: 22px; stroke: var(--sage); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.replace { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.replace span { font-size: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--dark-line); color: var(--on-dark-2); text-decoration: line-through; text-decoration-color: rgba(143,184,162,.7); }
.replace b { font-weight: 500; font-size: 14px; color: var(--on-dark); margin-right: 4px; }
.portal-row { display: grid; gap: 40px; align-items: center; margin-top: clamp(56px, 8vw, 96px); }
@media (min-width: 960px) { .portal-row { grid-template-columns: 6fr 5fr; gap: 72px; } }
.portal-row .ui-frame { font-size: clamp(9.5px, 1.1vw, 13px); }

/* ─── Home: proof ────────────────────────────────────────────────────────── */
.proof { display: grid; gap: 24px; }
@media (min-width: 960px) { .proof { grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; } }
.media-ph { aspect-ratio: 16 / 10; border-radius: var(--r-lg); border: 2px dashed var(--warn-line); background: repeating-linear-gradient(135deg, var(--warn-bg), var(--warn-bg) 14px, #FFF9E9 14px, #FFF9E9 28px); display: grid; place-items: center; text-align: center; padding: 24px; color: var(--warn-ink); }
.media-ph b { color: var(--warn-ink); display: block; font-size: 17px; }
.media-ph span { font-size: 14px; }
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.figures div { background: var(--white); border: 2px dashed var(--warn-line); border-radius: var(--r); padding: 16px; }
.figures b { display: block; font-size: 15px; color: var(--warn-ink); }
.figures span { font-size: 14px; color: var(--muted); }
.quote-card { background: var(--white); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); }
.quote-card blockquote { border: 0; padding: 0; margin: 0 0 18px; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.4; letter-spacing: -0.015em; font-weight: 500; }

/* ─── Home: try + CTA ────────────────────────────────────────────────────── */
.demo-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .demo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .demo-grid { grid-template-columns: repeat(5, 1fr); } }
.demo-grid .btn { width: 100%; }
.cta-band { background: var(--ink); color: var(--on-dark-2); border-radius: var(--r-lg); padding: clamp(40px, 7vw, 88px) clamp(24px, 5vw, 72px); text-align: center; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; width: 640px; height: 640px; left: 50%; top: 100%; transform: translate(-50%, -38%); background: radial-gradient(closest-side, rgba(143,184,162,.22), transparent); pointer-events: none; }
.cta-band .logo { font-size: clamp(56px, 11vw, 120px); color: var(--on-dark); margin-bottom: 22px; }
.cta-band h2 { color: var(--on-dark); margin: 0 auto 14px; max-width: 18ch; font-size: clamp(28px, 3.6vw, 42px); }
.cta-band p { margin: 0 auto; max-width: 52ch; }
.cta-band .actions { justify-content: center; position: relative; z-index: 1; }
.cta-band .btn.secondary { background: transparent; color: var(--on-dark); border-color: var(--dark-line); }
.cta-band .btn.secondary:hover { border-color: var(--sage); }

.split { display: grid; gap: 20px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split .card { padding: clamp(24px, 3vw, 40px); }
.split h3 { font-size: 26px; letter-spacing: -0.025em; }

/* ─── Pricing ────────────────────────────────────────────────────────────── */
.price-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 28px; }
.seg { display: inline-flex; padding: 4px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; }
.seg button { all: unset; box-sizing: border-box; cursor: pointer; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); }
.seg button:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 2px; }
.seg .save { font-size: 12px; font-weight: 600; background: var(--sage-tint); color: var(--sage-deep); border-radius: 999px; padding: 2px 8px; }
.seg button[aria-pressed="true"] .save { background: var(--sage); color: var(--ink); }
.no-js-hide { display: none; }
.pricing-ready .no-js-hide { display: inline-flex; }
.plans { display: grid; gap: 16px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; position: relative; }
.plan.featured { border-color: var(--ink); box-shadow: 0 24px 48px -28px rgba(14,23,20,.45); }
.plan-flag { position: absolute; top: -12px; left: 28px; background: var(--ink); color: var(--on-dark); font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 999px; }
.plan h3 { margin: 0 0 6px; font-size: 22px; }
.plan .desc { color: var(--muted); font-size: 15px; min-height: 2.6em; margin: 0 0 18px; }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.plan .price b { font-size: 48px; letter-spacing: -0.04em; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan .price span { color: var(--muted); font-size: 15px; }
.plan .alt { font-size: 14px; color: var(--muted); margin: 6px 0 18px; min-height: 1.4em; }
.plan .who { font-size: 15px; padding: 12px 14px; background: var(--cream); border-radius: var(--r-sm); margin: 0 0 20px; }
.plan .ticks { font-size: 15px; margin: 0 0 24px; flex: 1; }
.plan .ticks li { margin: .5em 0; }
.plan .plus { font-size: 14px; font-weight: 500; color: var(--muted); margin: 0 0 6px; }
.plan .btn { width: 100%; }
.plan .core-list { font-size: 15px; line-height: 1.7; margin: 0 0 12px; flex: 1; }
.plan .core-list span { color: var(--muted); }
.plan .ticks li b { display: block; font-weight: 600; }
.plan .ticks li .sub { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.tip { position: relative; display: inline; cursor: help; outline: none; }
.tip-name { text-decoration: underline dotted; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.tip-name.b { font-weight: 600; }
.tip-box { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 20; width: max-content; max-width: min(280px, 80vw); background: var(--ink); color: var(--on-dark); font-size: 13px; font-weight: 400; line-height: 1.45; padding: 10px 12px; border-radius: 10px; box-shadow: 0 12px 28px -12px rgba(14,23,20,.5); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; text-decoration: none; }
.tip:hover .tip-box, .tip:focus .tip-box, .tip:focus-within .tip-box { opacity: 1; visibility: visible; transform: none; }
.tip:focus-visible .tip-name { outline: 2px solid var(--sage-deep); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .tip-box { transition: none; } }
@media (hover: none) { .tip { cursor: pointer; } }
@media (min-width: 900px) { .plans .plan:last-child .tip-box, .plans .plan:nth-child(2n) .tip-box { left: auto; right: 0; } }
.plan .compare { font-size: 14px; margin: 0 0 16px; }
@media (min-width: 1200px) { .plans[style*="--n:4"] .plan .desc { min-height: 6em; } }
.ph-note { display: flex; gap: 12px; align-items: flex-start; border: 2px dashed var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r); padding: 14px 18px; margin: 0 0 28px; font-size: 15px; }
.ph-note strong { color: var(--warn-ink); }
.ph-badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--warn-ink); background: var(--warn-bg); border: 1px dashed var(--warn-line); border-radius: 999px; padding: 1px 8px; vertical-align: 2px; margin-left: 6px; white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1199px) { .plans[style*="--n:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan .yearly { font-size: 14px; margin: -10px 0 16px; color: var(--ink); }
.plan .seats { list-style: none; padding: 12px 14px; margin: 0 0 20px; background: var(--cream); border-radius: var(--r-sm); display: grid; gap: 8px; font-size: 14px; }
.plan .seats b { display: block; font-weight: 600; font-size: 14px; }
.plan .seats span { color: var(--muted); font-size: 13px; }
.founding { background: var(--sage-tint); border-radius: var(--r); padding: 14px 18px; margin: 0 0 24px; font-size: 15px; }
.founding b { color: var(--ink); }
.two-steppers { display: grid; gap: 20px; }
@media (min-width: 560px) { .two-steppers { grid-template-columns: 1fr 1fr; } }
.proof-photo { margin: 0; }
.proof-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); display: block; }
.proof-photo figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.figures.real div { border: 1px solid var(--line); }
.figures.real b { color: var(--ink); font-size: 24px; letter-spacing: -0.02em; }
.offers { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 800px) { .offers { grid-template-columns: repeat(4, 1fr); } }
.offer { background: var(--cream); border-radius: var(--r); padding: 18px 20px; }
.offer b { display: block; margin-bottom: 4px; }
.offer span { font-size: 14px; color: var(--muted); }
.addons { display: grid; gap: 10px; }
@media (min-width: 800px) { .addons { grid-template-columns: repeat(2, 1fr); } }
.addon { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.addon p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.addon .amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.addon .amt b { font-size: 18px; }
.addon .amt span { display: block; font-size: 13px; color: var(--muted); }

.calc { display: grid; gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 960px) { .calc { grid-template-columns: 7fr 5fr; } }
.calc-in { padding: clamp(22px, 3vw, 36px); display: grid; gap: 24px; align-content: start; }
.calc-out { padding: clamp(22px, 3vw, 36px); background: var(--ink); color: var(--on-dark-2); display: flex; flex-direction: column; gap: 18px; }
.calc-out .big { font-size: clamp(44px, 5vw, 60px); color: var(--on-dark); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; display: block; }
.calc-out .lbl { font-size: 15px; color: var(--on-dark-2); display: block; margin-bottom: 8px; }
.calc-out .sub { font-size: 14px; display: block; margin-top: 8px; }
.calc-out dl { margin: 0; padding-top: 16px; border-top: 1px solid var(--dark-line); display: grid; gap: 8px; font-size: 15px; }
.calc-out dl div { display: flex; justify-content: space-between; gap: 12px; }
.calc-out dt { color: var(--on-dark-2); }
.calc-out dd { margin: 0; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.calc-out .fine { font-size: 13px; margin-top: auto; color: var(--on-dark-2); }
.calc fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc legend, .calc .q { font-weight: 600; color: var(--ink); font-size: 16px; margin-bottom: 10px; padding: 0; display: block; }
.choice-row { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: block; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: 12px 14px; font-weight: 500; color: var(--ink); min-height: 48px; }
.choice small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.choice input:checked + span { border-color: var(--ink); background: var(--sage-tint); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input:focus-visible + span { outline: 3px solid var(--sage-deep); outline-offset: 2px; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.stepper button { all: unset; box-sizing: border-box; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; font-size: 22px; color: var(--ink); }
.stepper button:hover { background: var(--cream); }
.stepper button:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: -3px; }
.stepper input { width: 64px; height: 48px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font: 600 18px var(--display); color: var(--ink); -moz-appearance: textfield; background: var(--white); }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.checks { display: grid; gap: 8px; }
@media (min-width: 640px) { .checks { grid-template-columns: 1fr 1fr; } }
.checkline { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; cursor: pointer; }
.checkline input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.checkline span { font-weight: 500; color: var(--ink); font-size: 15px; }
.checkline small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; }
.checkline .inc { color: var(--sage-deep); font-weight: 500; }
.money-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .money-grid { grid-template-columns: 1fr 1fr; } }
.money { display: grid; gap: 6px; }
.money label { font-weight: 500; color: var(--ink); font-size: 15px; }
.money .hint { font-size: 13px; color: var(--muted); margin: -2px 0 2px; }
.money .in { display: flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--white); }
.money .in:focus-within { border-color: var(--ink); outline: 3px solid color-mix(in srgb, var(--sage) 50%, transparent); }
.money .in span { padding: 0 0 0 14px; color: var(--muted); }
.money .in em { padding: 0 14px 0 0; color: var(--muted); font-style: normal; font-size: 14px; white-space: nowrap; }
.money input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; min-height: 46px; padding: 0 10px 0 6px; font: 500 17px var(--display); color: var(--ink); }
.money.pair .in input[name="softwareUsers"] { max-width: 70px; text-align: center; border-left: 1px solid var(--line); }
.sav-bars { display: grid; gap: 10px; }
.sav-bars div { display: grid; gap: 4px; font-size: 14px; }
.sav-bars i { display: block; height: 10px; border-radius: 6px; background: var(--dark-line); position: relative; overflow: hidden; }
.sav-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; border-radius: 6px; transition: width .4s var(--ease); }
.sav-bars .cur i::after { width: var(--cur, 0%); background: #C9A47A; }
.sav-bars .vel i::after { width: var(--vel, 0%); background: var(--sage); }
#sav-result[data-negative="true"] .big { color: #F0C9A0; }

/* Sample panel (demo data) on trade pages */
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 48px -32px rgba(14,23,20,.35); }
.panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink); }
.panel-body { padding: 18px; display: grid; gap: 16px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { background: var(--cream); border-radius: 10px; padding: 12px 14px; }
.kpi b { display: block; color: var(--ink); font: 600 22px/1.2 var(--display); letter-spacing: -0.02em; }
.kpi span { font-size: 13px; color: var(--muted); }
.rows { list-style: none; padding: 0; margin: 0; }
.rows li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; margin: 0; color: var(--ink); }
.rows li:first-child { border-top: 0; }
.rows .when { color: var(--muted); white-space: nowrap; font-size: 13px; }
.shot { border: 1px solid var(--line); border-radius: var(--r); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); margin: 1em 0 1.6em; background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; }
thead th { border-top: 0; color: var(--muted); font-weight: 500; font-size: 13px; background: var(--paper); }
tbody th { color: var(--ink); font-weight: 500; }
tr.is-vellier th, tr.is-vellier td { background: var(--sage-tint); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yes { color: var(--sage-deep); font-weight: 600; }

/* Forms */
.form { display: grid; gap: 20px; max-width: 640px; }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 36px); }
.field { display: grid; gap: 6px; }
.field label, .field legend { color: var(--ink); font-weight: 500; font-size: 16px; }
.field .hint { font-size: 14px; color: var(--muted); margin: 0; }
.field input, .field select, .field textarea, .filter select { width: 100%; min-height: 50px; padding: 10px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: var(--white); color: var(--ink); font: inherit; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .filter select:focus { border-color: var(--ink); outline: 3px solid color-mix(in srgb, var(--sage) 50%, transparent); outline-offset: 0; }
.field [aria-invalid="true"] { border-color: var(--error); }
.field .error { color: var(--error); font-size: 15px; margin: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.check label { font-weight: 400; color: var(--ink-2); font-size: 15px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { border-radius: var(--r); padding: 14px 18px; background: var(--sage-tint); color: var(--ink); margin: 0 0 20px; }
.notice p:last-child { margin-bottom: 0; }
.notice.warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #F0D58A; }
.notice.warn strong, .notice.warn a { color: var(--warn-ink); }
.notice.error { background: #FDECEA; color: var(--error); }
.placeholder { border: 2px dashed var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r); padding: 14px 18px; margin: 1em 0; }
.placeholder strong { color: var(--warn-ink); }
.figures { margin: 1.5em 0; display: grid; gap: 16px; }
.figures-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.figures figure { margin: 0; min-width: 0; }
.figures img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.figures figcaption { font-size: 14px; color: var(--muted, inherit); margin-top: 8px; }
.review-banner { border: 2px solid var(--warn-line); border-left-width: 8px; background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r); padding: 14px 18px; margin: 0 0 1.6em; font-size: 16px; }
.review-banner strong { color: var(--warn-ink); }
fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea, fieldset[disabled] .btn { opacity: .55; cursor: not-allowed; }
.form-status:empty { display: none; }
.filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 28px; padding: 16px; background: var(--cream); border-radius: var(--r); }
.filter label { font-weight: 500; color: var(--ink); }
.filter select { width: auto; min-width: 220px; }
.feature-group[hidden], .feature-item[hidden] { display: none; }
.feature-group { scroll-margin-top: 90px; }
.feature-group h2 { font-size: 24px; letter-spacing: -0.02em; }
.feature-group .ticks { columns: 1; }
@media (min-width: 900px) { .feature-group .ticks { columns: 2; column-gap: 32px; } .feature-group .ticks li { break-inside: avoid; } }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-dark-2); padding: clamp(56px, 7vw, 88px) 0 32px; font-size: 15px; margin-top: clamp(40px, 6vw, 80px); }
.site-footer .logo { color: var(--on-dark); font-size: 32px; }
.site-footer .cols { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer .brand { grid-column: 1 / -1; }
@media (min-width: 960px) { .site-footer .cols { grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); } .site-footer .brand { grid-column: auto; } }
.site-footer h2 { font-size: 14px; color: var(--on-dark); margin: 0 0 12px; font-weight: 500; letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0; }
.site-footer a { color: var(--on-dark-2); text-decoration: none; display: inline-block; padding: 5px 0; }
.site-footer a:hover { color: var(--on-dark); text-decoration: underline; }
.site-footer .base { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--dark-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; }

.prose { max-width: 720px; font-size: 18px; line-height: 1.7; }
.prose h2 { font-size: clamp(26px, 3vw, 32px); letter-spacing: -0.025em; margin-top: 1.8em; }
.prose h3 { font-size: 21px; }
.prose li { margin: .45em 0; }
.toc { font-size: 15px; background: var(--cream); border-radius: var(--r); padding: 18px 20px; margin: 0 0 32px; }
.toc .eyebrow { margin-bottom: 8px; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.post-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.cg-result { min-height: 3em; }
.steps-list { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 12px; }
.steps-list li { counter-increment: s; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px 18px 64px; position: relative; margin: 0; }
.steps-list li::before { content: counter(s); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 999px; background: var(--ink); color: var(--on-dark); display: grid; place-items: center; font-weight: 500; font-size: 15px; }
.link-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.link-list li { margin: 0; }
.link-list a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 500; }
.link-list a:hover { border-color: var(--line-2); background: var(--paper); }
.link-list a span { color: var(--muted); font-weight: 400; font-size: 14px; }
@media (min-width: 800px) { .link-list.cols { grid-template-columns: 1fr 1fr; } }

/* ─── App-screen mock-ups ────────────────────────────────────────────────── */
.ui-frame { --u-bg: #0F1513; --u-side: #121A17; --u-card: #17201C; --u-card-2: #1C2722; --u-line: #26322C; --u-fg: #E6EBE6; --u-muted: #93A39A; --u-sage: #8FB8A2; --u-accent: #1E3830;
  border-radius: 14px; background: var(--u-bg); box-shadow: var(--shadow-screen); overflow: hidden; border: 1px solid rgba(14,23,20,.14); color: var(--u-fg); font-family: var(--display); line-height: 1.35; container-type: inline-size; -webkit-user-select: none; user-select: none; }
.ui-bar { display: flex; align-items: center; gap: 10px; height: 2.9em; padding: 0 1em; background: #E9E7E1; border-bottom: 1px solid #D6D3CB; }
.ui-dots { display: flex; gap: .45em; }
.ui-dots i { width: .8em; height: .8em; border-radius: 999px; background: #C9C5BC; }
.ui-url { flex: 1; max-width: 30em; margin: 0 auto; text-align: center; font-size: .92em; color: #5D6660; background: #F6F5F1; border-radius: 999px; padding: .35em 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-url[hidden] { display: none; }
.ui-body { position: relative; background: var(--u-bg); overflow: hidden; }
.ui-frame b, .ui-frame strong { color: inherit; }
.ui-app { display: grid; grid-template-columns: 15em 1fr; height: 100%; }
.ui-side { background: var(--u-side); border-right: 1px solid var(--u-line); padding: 1.1em .8em; }
.ui-co { display: flex; align-items: center; gap: .6em; padding: 0 .4em 1.1em; margin-bottom: .6em; border-bottom: 1px solid var(--u-line); }
.ui-co-tile { width: 2em; height: 2em; border-radius: .5em; background: #0E1714; border: 1px solid var(--u-line); display: inline-flex; align-items: flex-end; justify-content: center; gap: .18em; padding-bottom: .5em; flex: none; }
.ui-co-tile i { width: .22em; border-radius: 9px; background: #F3F5F0; height: 1em; }
.ui-co-tile i + i { background: var(--u-sage); height: .8em; }
.ui-co-name { font-weight: 600; font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-side ul { list-style: none; margin: 0; padding: 0; }
.ui-side li { display: flex; align-items: center; gap: .7em; padding: .55em .6em; margin: .12em 0; border-radius: .55em; color: #C9D2CC; font-size: .98em; white-space: nowrap; }
.ui-side li.on { background: var(--u-accent); color: #BFD8CA; }
.ui-side svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: .9; }
.ui-main { padding: 1.4em 1.6em; display: flex; flex-direction: column; gap: 1em; min-width: 0; overflow: hidden; }
.ui-top { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.ui-title { font-size: 1.45em; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ui-crumb { color: var(--u-muted); font-weight: 400; font-size: .72em; margin-left: .3em; }
.ui-title .ui-crumb:first-child { margin: 0 .3em 0 0; }
.ui-actions { display: flex; gap: .5em; flex: none; }
.ui-pill { display: inline-flex; align-items: center; gap: .4em; font-size: .85em; font-weight: 500; padding: .3em .8em; border-radius: 999px; background: var(--u-card-2); color: var(--u-fg); white-space: nowrap; }
.ui-pill.sage { background: rgba(143,184,162,.16); color: #B6D4C3; }
.ui-pill.amber { background: rgba(232,194,122,.16); color: #EBCB8B; }
.ui-pill.green { background: #2F7A52; color: #fff; }
.ui-pill.ghost { background: transparent; border: 1px solid var(--u-line); color: var(--u-muted); }
.ui-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--u-sage); color: #0E1714; font-weight: 600; font-size: .92em; padding: .6em 1.1em; border-radius: .6em; white-space: nowrap; }
.ui-btn.ghost { background: transparent; color: var(--u-fg); border: 1px solid var(--u-line); }
.ui-btn.light { background: #0E1714; color: #F3F5F0; }
.ui-btn.wide { display: flex; width: 100%; padding: .85em; font-size: 1em; border-radius: .8em; }
.ui-card { background: var(--u-card); border: 1px solid var(--u-line); border-radius: .9em; padding: 1em 1.15em; }
.ui-label { display: block; font-size: .82em; color: var(--u-muted); margin-bottom: .3em; }
.ui-person { display: flex; align-items: center; gap: .8em; }
.ui-person b { display: block; font-size: 1.08em; }
.ui-person span { color: var(--u-muted); font-size: .9em; }
.ui-person .ui-pill { margin-left: auto; }
.ui-avatar { width: 2.6em; height: 2.6em; border-radius: 999px; background: var(--u-accent); color: #BFD8CA; display: grid; place-items: center; font-weight: 600; font-size: .95em; flex: none; }
.ui-lead .ui-quote { font-size: 1.15em; font-weight: 600; margin: .9em 0 .3em; }
.ui-note { color: var(--u-muted); margin: 0; font-size: .95em; }
.ui-suggest { display: flex; align-items: center; justify-content: space-between; gap: 1em; border-color: rgba(143,184,162,.35); background: linear-gradient(0deg, rgba(143,184,162,.06), rgba(143,184,162,.06)), var(--u-card); }
.ui-suggest b { font-size: 1.1em; }
.ui-mini { display: flex; flex-direction: column; }
.ui-bars { height: 4.2em; display: flex; align-items: flex-end; gap: .6em; padding-top: .4em; }
.ui-bars i { flex: 1; height: var(--h); background: linear-gradient(180deg, var(--u-sage), rgba(143,184,162,.35)); border-radius: .3em .3em .1em .1em; }
.ui-pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.ui-pkg { background: var(--u-card); border: 1px solid var(--u-line); border-radius: .8em; padding: .8em .9em; position: relative; display: flex; flex-direction: column; gap: .15em; }
.ui-pkg span { color: var(--u-muted); font-size: .88em; }
.ui-pkg b { font-size: 1.45em; letter-spacing: -0.02em; }
.ui-pkg small { color: var(--u-muted); font-size: .8em; }
.ui-pkg.on { border-color: var(--u-sage); box-shadow: inset 0 0 0 1px var(--u-sage); }
.ui-pkg em { position: absolute; top: -.75em; right: .8em; font-style: normal; font-size: .72em; font-weight: 600; background: var(--u-sage); color: #0E1714; padding: .15em .6em; border-radius: 999px; }
.ui-lines { padding: .4em 1.15em; }
.ui-line { display: flex; justify-content: space-between; gap: 1em; padding: .6em 0; border-top: 1px solid var(--u-line); font-size: .95em; }
.ui-line:first-child { border-top: 0; }
.ui-line span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ui-line b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-sum { color: var(--u-muted); }
.ui-total { font-size: 1.1em; }
.ui-total b { font-weight: 700; }

.ui-client { --c-ink: #1C1917; --c-muted: #78716C; --c-line: #E7E5E4; --c-accent: #4A7C6F; background: #FAFAF9; color: var(--c-ink); height: 100%; padding: 1.6em 2em; display: flex; flex-direction: column; gap: .7em; position: relative; overflow: hidden; }
.ui-client-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1em; border-bottom: 1px solid var(--c-line); }
.ui-client-logo { font-weight: 700; letter-spacing: -0.02em; font-size: 1.1em; }
.ui-client-ref { color: var(--c-muted); font-size: .9em; }
.ui-client-for { color: var(--c-muted); margin: .6em 0 0; font-size: .95em; }
.ui-client-h { color: var(--c-ink); font-size: 1.55em; margin: 0; letter-spacing: -0.025em; line-height: 1.15; }
.ui-scope-head { display: flex; justify-content: space-between; align-items: center; margin-top: .6em; gap: 1em; }
.ui-scope-head b { color: var(--c-ink); }
.ui-progress { font-size: .85em; font-weight: 500; color: #92400E; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: .4em; padding: .3em .7em; white-space: nowrap; }
.ui-scope { list-style: none; margin: 0; padding: 0; border: 1px solid var(--c-line); border-radius: .8em; overflow: hidden; background: #fff; }
.ui-scope li { display: flex; align-items: center; gap: .8em; padding: .7em 1em; border-top: 1px solid var(--c-line); margin: 0; font-size: .98em; }
.ui-scope li:first-child { border-top: 0; }
.ui-scope li small { margin-left: auto; color: var(--c-muted); font-size: .85em; }
.ui-scope li.now { background: #F5F5F4; }
.ui-scope li.now small { color: var(--c-accent); font-weight: 600; }
.ui-tick { width: 1.25em; height: 1.25em; border-radius: 999px; border: 1.5px solid #D6D3D1; flex: none; position: relative; }
.done > .ui-tick { background: var(--c-accent, var(--u-sage)); border-color: var(--c-accent, var(--u-sage)); }
.done > .ui-tick::after { content: ""; position: absolute; left: .32em; top: .26em; width: .45em; height: .25em; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.ui-client-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 1em; padding-top: 1em; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: .95em; }
.ui-client-foot b { color: var(--c-ink); }
.ui-toast { position: absolute; right: 1.4em; bottom: 4.6em; background: #0E1714; color: #E6EBE6; font-size: .85em; padding: .6em 1em; border-radius: .7em; display: flex; align-items: center; gap: .6em; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.ui-toast i { width: .6em; height: .6em; border-radius: 999px; background: var(--sage); box-shadow: 0 0 0 .25em rgba(143,184,162,.25); animation: ping 1.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(143,184,162,.6); } 100% { box-shadow: 0 0 0 .7em rgba(143,184,162,0); } }
.ui-signed { display: grid; gap: .8em; margin-top: .6em; }
.ui-sign-box { background: #fff; border: 1px solid var(--c-line); border-radius: .8em; padding: .8em 1em; }
.ui-sign-box svg { height: 3.6em; width: auto; display: block; }
.ui-sign-box path { fill: none; stroke: #1C1917; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 0; }
.hero-scene.on .ui-sign-box path { animation: sign 1.6s var(--ease) both; }
@keyframes sign { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.ui-sign-box span { display: block; color: var(--c-muted); font-size: .85em; border-top: 1px dashed var(--c-line); padding-top: .5em; margin-top: .3em; }
.ui-ok { display: flex; gap: .8em; align-items: flex-start; background: #ECFDF3; border: 1px solid #ABEFC6; border-radius: .8em; padding: .8em 1em; }
.ui-ok i { width: 1.4em; height: 1.4em; border-radius: 999px; background: #17855A; flex: none; position: relative; }
.ui-ok i::after { content: ""; position: absolute; left: .38em; top: .36em; width: .55em; height: .3em; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.ui-ok b { display: block; color: #054F31; font-size: 1em; }
.ui-ok span { color: #067647; font-size: .88em; }

.ui-plan { display: grid; gap: .5em; flex: 1; align-content: start; }
.ui-plan-row { display: grid; grid-template-columns: 6em 1fr; gap: .6em; align-items: center; }
.ui-plan-days { grid-template-columns: 6em repeat(5, 1fr); color: var(--u-muted); font-size: .82em; }
.ui-plan-days span { padding-left: .3em; }
.ui-plan-who i { font-style: normal; font-size: .9em; display: inline-flex; align-items: center; gap: .5em; }
.ui-plan-who i::before { content: ""; width: 1.7em; height: 1.7em; border-radius: 999px; background: var(--u-card-2); border: 1px solid var(--u-line); }
.ui-plan-track { position: relative; height: 3.2em; background: repeating-linear-gradient(90deg, var(--u-card) 0 calc(20% - 2px), var(--u-bg) calc(20% - 2px) 20%); border-radius: .5em; }
.ui-plan-bar { position: absolute; top: .35em; bottom: .35em; left: calc(var(--s) * 20% + .2em); width: calc(var(--l) * 20% - .5em); border-radius: .45em; padding: .45em .6em; font-size: .8em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0E1714; }
.ui-plan-bar.a { background: var(--u-sage); }
.ui-plan-bar.b { background: #E8C27A; }
.ui-plan-bar.c { background: #A9C5D9; }
.ui-plan-bar.d { background: #D9B3A9; }

.ui-phone-stage { height: 100%; display: grid; place-items: center; background: radial-gradient(60% 70% at 50% 40%, #1D2C26, #0F1513); padding: 1.2em; }
.ui-phone { width: 19em; max-width: 92%; height: 100%; max-height: 38em; background: #0B110F; border: .5em solid #222B27; border-radius: 2.4em; padding: 1.6em 1.1em 1.1em; position: relative; display: flex; flex-direction: column; gap: .6em; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.ui-phone-notch { position: absolute; top: .45em; left: 50%; transform: translateX(-50%); width: 5.5em; height: 1.2em; background: #222B27; border-radius: 999px; }
.ui-phone-top { display: flex; justify-content: space-between; font-size: .78em; color: var(--u-muted); margin-top: -.6em; padding: 0 .4em; }
.ui-phone-k { margin: .4em 0 0; font-size: .8em; color: var(--u-muted); }
.ui-phone-h { margin: 0; font-size: 1.25em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.ui-phone-s { margin: 0; font-size: .85em; color: var(--u-muted); }
.ui-phone-clock { display: flex; gap: .7em; align-items: center; background: rgba(47,122,82,.18); border: 1px solid rgba(47,122,82,.45); border-radius: .8em; padding: .65em .8em; }
.ui-phone-clock i { width: .7em; height: .7em; border-radius: 999px; background: #4ADE80; flex: none; animation: ping 1.8s ease-out infinite; }
.ui-phone-clock b { display: block; font-size: .92em; }
.ui-phone-clock span { font-size: .72em; color: var(--u-muted); }
.ui-phone-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: .1em; }
.ui-phone-tasks li { display: flex; gap: .6em; align-items: center; font-size: .88em; padding: .45em 0; border-bottom: 1px solid var(--u-line); margin: 0; }
.ui-phone-tasks li.done { color: var(--u-muted); text-decoration: line-through; }
.ui-phone-tasks .ui-tick { border-color: #3A4842; }
.ui-phone-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; margin-top: auto; }
.ui-phone-photos i { aspect-ratio: 1; border-radius: .5em; background: linear-gradient(135deg, #445A52, #2B3A34); }
.ui-phone-photos i:nth-child(2) { background: linear-gradient(135deg, #20403A, #2E5C52); }
.ui-phone-photos i:nth-child(3) { background: linear-gradient(135deg, #C9B99A, #8E7F66); }
.ui-phone-photos span { aspect-ratio: 1; border-radius: .5em; border: 1px dashed #3A4842; display: grid; place-items: center; font-size: .7em; color: var(--u-muted); text-align: center; }

.ui-invoice { display: grid; gap: 0; padding: 1em 1.2em; }
.ui-inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; padding-bottom: .8em; }
.ui-inv-head b { font-size: 1.2em; }
.ui-remind { display: flex; justify-content: space-between; gap: 1em; color: var(--u-muted); font-size: .82em; padding-top: .7em; border-top: 1px dashed var(--u-line); flex-wrap: wrap; }
.ui-paid-stamp { display: flex; align-items: center; gap: .6em; padding: .7em .9em; margin-top: .5em; border-radius: .6em; background: rgba(47,122,82,.16); color: #9EE0BA; font-size: .9em; font-weight: 500; }
.ui-paid-stamp i { width: 1.2em; height: 1.2em; border-radius: 999px; background: #2F7A52; position: relative; flex: none; }
.ui-paid-stamp i::after { content: ""; position: absolute; left: .32em; top: .3em; width: .5em; height: .27em; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.ui-stages .ui-stage-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin: .3em 0 .4em; }
.ui-stage-track i { height: .45em; border-radius: 999px; background: var(--u-line); }
.ui-stage-track i.done { background: var(--u-sage); }
.ui-stage-track i.now { background: linear-gradient(90deg, var(--u-sage) 50%, var(--u-line) 50%); }
.ui-stage-labels { display: grid; grid-template-columns: repeat(3, 1fr); font-size: .8em; color: var(--u-muted); }
.ui-profit { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.ui-profit b { display: block; font-size: 1.9em; letter-spacing: -0.03em; }
.ui-profit small { color: var(--u-muted); font-size: .82em; }
.ui-donut { width: 4.4em; height: 4.4em; border-radius: 999px; background: conic-gradient(var(--u-sage) 0 38%, var(--u-line) 38% 100%); -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); flex: none; }
.ui-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.ui-kpis div { background: var(--u-card); border: 1px solid var(--u-line); border-radius: .8em; padding: .8em 1em; }
.ui-kpis b { display: block; font-size: 1.6em; letter-spacing: -0.02em; }
.ui-kpis span { color: var(--u-muted); font-size: .82em; }
.ui-list { display: grid; gap: .1em; }
.ui-li { display: flex; align-items: center; gap: .7em; padding: .5em 0; border-top: 1px solid var(--u-line); font-size: .95em; }
.ui-label + .ui-li { border-top: 0; }
.ui-li .ui-when { margin-left: auto; color: var(--u-muted); font-size: .82em; white-space: nowrap; }
.ui-li i { width: .55em; height: .55em; border-radius: 999px; flex: none; }
.ui-li i.t0 { background: var(--u-sage); }
.ui-li i.t1 { background: #A9C5D9; }
.ui-li i.t2 { background: #E8C27A; }
.ui-portal { gap: .9em; }
.ui-portal-next { background: #fff; border: 1px solid var(--c-line); border-radius: .8em; padding: .8em 1em; }
.ui-portal-next .ui-label, .ui-diary .ui-label { color: var(--c-muted); }
.ui-diary { display: grid; gap: .7em; }
.ui-diary-item { display: grid; grid-template-columns: 5.5em 1fr; gap: .9em; align-items: start; background: #fff; border: 1px solid var(--c-line); border-radius: .8em; padding: .7em; }
.ui-diary-item p { margin: 0; font-size: .92em; color: var(--c-ink); }
.ui-photo { aspect-ratio: 4 / 3; border-radius: .5em; }
.ui-photo.p1 { background: linear-gradient(160deg, #2E4A55 0 55%, #E9E4D6 55% 58%, #B8A88A 58%); }
.ui-photo.p2 { background: linear-gradient(170deg, #EFEBE2 0 60%, #CFC7B5 60% 62%, #8B7B63 62%); }
.ui-portal-pay { display: flex; justify-content: space-between; align-items: center; color: var(--c-muted); font-size: .95em; margin-top: auto; padding-top: .8em; border-top: 1px solid var(--c-line); }

/* Narrow screens: the staff app loses its menu, the way the portal does on a phone. */
@container (max-width: 560px) {
  .ui-app { grid-template-columns: 1fr; }
  .ui-side { display: none; }
  .ui-main { padding: 1.2em; font-size: 1.12em; }
  .ui-pkgs { grid-template-columns: 1fr 1fr 1fr; gap: .45em; }
  .ui-pkg small { display: none; }
  .ui-pkg b { font-size: 1.15em; }
  .ui-client { padding: 1.3em; font-size: 1.1em; }
  .ui-plan-row { grid-template-columns: 4.6em 1fr; }
  .ui-plan-days { grid-template-columns: 4.6em repeat(5, 1fr); }
  .ui-plan-who i::before { display: none; }
  .ui-mini { display: none; }
  .ui-phone { font-size: 1.15em; }
  .ui-toast { right: .8em; left: .8em; bottom: 4.4em; }
}

/* Overrides */
.calc-out b, .calc-out strong { color: var(--on-dark); }
.offer b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.offer b .ph-badge { margin-left: 0; }
.hero-frame .ui-mini { display: none; }
.hero-frame { box-shadow: 0 1px 0 rgba(14,23,20,.04), 0 24px 48px -16px rgba(14,23,20,.3); }
#trades { padding-top: clamp(56px, 7vw, 96px); }

/* Reduced motion: nothing moves by itself. */
@media (prefers-reduced-motion: reduce) {
  .logo .l1, .logo .l2, .ui-toast i, .ui-phone-clock i { animation: none !important; }
  .hero-scene.on .ui-sign-box path { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}