/*
 * The app's typefaces, served from our own origin rather than Google Fonts, so
 * a visitor's browser never contacts Google to draw text. The files are the
 * variable woff2 subsets Google Fonts serves (Inter v20, Geist Mono v6), split
 * into Latin and Latin Extended by unicode-range so most pages load only the
 * first. Licences (SIL OFL 1.1) sit next to the files in src/assets/fonts/.
 *
 * The weight ranges match what index.html used to request (Inter 400-600,
 * Geist Mono 400-500), so nothing renders differently. The family names are the
 * ones --font-sans and --font-mono in theme.css use.
 */

/* Inter, Latin Extended */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter, Latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist Mono, Latin Extended */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/geist-mono/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist Mono, Latin */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/geist-mono/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Outfit (headings), variable 100–900, self-hosted (SIL OFL 1.1) */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/outfit/outfit-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/outfit/outfit-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Greentally carbon landing, v5: light, patchwork fields, hand-drawn accents.
   Colours from the app (theme.css + chart palette). */
:root {
  --bg: #f6f6f1; --paper: #ffffff; --ink: #131814; --ink-2: #48504a; --ink-3: #5f665f;
  --line: #e2e4dd; --line-2: #d3d7cf;
  --green: #007c4b; --green-ink: #065c47; --leaf: #8ab92d; --mint: #e7f4ec;
  --amber: #8a5a00; --amber-bg: #fbefd2;
  --s1: #00885b; --s2: #2a78d6; --s3: #eda100;
  --head: 'Outfit', system-ui, sans-serif; --font: 'Inter', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace;
  --r: 18px; --header: 72px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 600; letter-spacing: -0.03em; }
p { margin: 0; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 12px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
:focus-visible { outline: 3px solid rgba(0,124,75,.35); outline-offset: 2px; }
::selection { background: #d8ecc0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 10px; font: inherit; font-weight: 500; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; white-space: nowrap; }
.btn--ink { background: var(--ink); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 14px -8px rgba(19,24,20,.6); }
.btn--ink:hover { background: #2a312c; }
.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn--paper:hover { border-color: var(--ink); }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-ink); }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn--lg { min-height: 50px; padding: 0 24px; font-size: 16px; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(246,246,241,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; }
.nav { height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__brand img { height: 30px; width: auto; }
.nav__links { display: flex; gap: 28px; font-size: 14px; color: var(--ink-2); }
.nav__links a, .nav__signin { text-decoration: none; }
.nav__links a:hover, .nav__signin:hover { color: var(--ink); }
.nav__end { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--ink-2); }

/* hand-drawn underline */
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble svg { position: absolute; left: -2%; width: 104%; height: 0.32em; bottom: -0.16em; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: var(--leaf); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.scribble path + path { stroke-width: 3.5; opacity: .75; }

/* headings */
.h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.06; text-wrap: balance; }
.h2--big { font-size: clamp(40px, 5.4vw, 66px); }
.h2--center { text-align: center; margin-bottom: 48px; }
.center-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.center-head p { margin-top: 18px; color: var(--ink-2); font-size: 17px; text-wrap: balance; }
.split-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.split-head p { color: var(--ink-3); text-align: right; font-size: 16px; }
.section { padding: 112px 0; }
.section--rule { border-top: 1px solid var(--line); }

/* hero */
.hero { position: relative; padding-top: 72px; overflow: hidden; }
.hero__copy { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.hero__title { font-size: clamp(46px, 7.4vw, 96px); line-height: 0.98; letter-spacing: -0.045em; }
.hero__sub { margin-top: 26px; max-width: 590px; font-size: 18px; line-height: 1.55; color: var(--ink-2); text-wrap: balance; }
.hero__ctas { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero__trust { margin-top: 22px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
.faces { display: inline-flex; }
.faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); }
.faces img + img { margin-left: -9px; }

.hero__stage { position: relative; margin-top: 56px; height: 560px; }
.fields { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__stage::before { content: ""; position: absolute; inset: 0 0 auto; height: 45%; background: linear-gradient(var(--bg), rgba(246,246,241,0)); z-index: 1; pointer-events: none; }
.stage { position: relative; z-index: 2; height: 100%; }
.report { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 380px; padding: 22px; border-radius: 22px; background: var(--paper); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 40px 70px -30px rgba(24,48,20,.45), 0 12px 24px -16px rgba(24,48,20,.3); }
.report__head { display: flex; align-items: center; gap: 10px; }
.report__head img { width: 28px; height: 28px; }
.report__title { font-weight: 600; font-size: 15px; }
.report__meta { font-size: 12px; color: var(--ink-3); }
.report__chip { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--mint); color: var(--green-ink); font-size: 11px; font-weight: 600; }
.report__total { margin-top: 18px; font-family: var(--head); font-weight: 600; font-size: 52px; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.report__total span { font-family: var(--font); font-weight: 400; font-size: 16px; letter-spacing: 0; color: var(--ink-3); }
.bar { margin-top: 16px; display: flex; gap: 3px; height: 10px; }
.bar i { border-radius: 999px; }
.report__rows { margin: 14px 0 0; display: grid; gap: 2px; }
.report__rows div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.report__rows dt { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.report__rows dt i { width: 8px; height: 8px; border-radius: 2px; }
.report__rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.report__foot { margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.pin { position: absolute; display: grid; gap: 1px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 16px 30px -18px rgba(24,48,20,.5); font-size: 12px; color: var(--ink-3); }
.pin__k { font-size: 11px; }
.pin__v { color: var(--ink); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.pin__e { color: var(--green); font-weight: 600; font-size: 12px; }
.pin::after { content: ""; position: absolute; width: 46px; height: 1px; background: rgba(19,24,20,.25); top: 50%; }
.pin--a { left: calc(50% - 390px); top: 60px; } .pin--a::after { left: 100%; }
.pin--b { left: calc(50% - 350px); top: 250px; } .pin--b::after { left: 100%; }
.pin--c { right: calc(50% - 380px); top: 120px; } .pin--c::after { right: 100%; }
.pin--d { right: calc(50% - 360px); top: 300px; grid-template-columns: auto auto; align-items: center; gap: 10px; } .pin--d::after { right: 100%; }
.pin__ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-size: 12px; }
.pin--d .pin__k { color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.3; }
.stage__note { position: absolute; right: 24px; bottom: 16px; font-size: 11px; color: var(--ink-2); }

/* tabs */
.tabs__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tabs__list button { font: inherit; font-size: 14px; color: var(--ink-2); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); cursor: pointer; }
.tabs__list button[aria-selected="true"] { background: var(--mint); border-color: #b9dcc7; color: var(--green-ink); font-weight: 500; }
.tabs__frame { padding: 14px; border-radius: 28px; background: linear-gradient(180deg, #e9efe2, #dfe9d6); }
.panel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 36px; align-items: center; padding: 36px; border-radius: 20px; background: var(--paper); }
.panel[hidden] { display: none; }
.panel__text h3 { font-size: 28px; line-height: 1.15; }
.panel__text p { margin-top: 12px; color: var(--ink-2); }
.panel__text ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.panel__text li { display: flex; gap: 10px; align-items: baseline; }
.panel__text li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 2px; background: var(--leaf); transform: translateY(-1px); }
.window { margin: 0; border-radius: 14px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 50px -36px rgba(19,24,20,.45); }
.window__bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fafaf7; }
.window__bar i { width: 9px; height: 9px; border-radius: 50%; background: #dcdfd8; }

/* how it works */
.how { list-style: none; margin: 0; padding: 0; position: relative; }
.how::before { content: ""; position: absolute; left: 50%; top: 40px; bottom: 40px; border-left: 2px dashed #c9d8a8; }
.how__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: center; padding: 48px 0; position: relative; }
.how__row::after { content: ""; position: absolute; left: calc(50% - 6px); top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--leaf); }
.how__row--flip .how__text { order: 2; }
.how__step { font-family: var(--mono); font-size: 12px; color: var(--green); }
.how__text h3 { margin-top: 10px; font-size: clamp(28px, 3vw, 38px); line-height: 1.08; }
.how__text p:last-child { margin-top: 14px; color: var(--ink-2); max-width: 440px; }
.how__art { display: flex; justify-content: center; }
.card { width: min(100%, 420px); padding: 20px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 50px -34px rgba(19,24,20,.4); }
.card--tilt-l { transform: rotate(-1.5deg); } .card--tilt-r { transform: rotate(1.5deg); }
.window--tilt { width: min(100%, 520px); transform: rotate(1.2deg); }
.card__title { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.card__title span { font-weight: 400; font-size: 12px; color: var(--ink-3); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; }
.checks li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.checks span { color: var(--ink-3); }
.checks b { font-weight: 500; text-align: right; }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.files li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; background: #f4f5f1; font-size: 14px; }
.ft { font-family: var(--mono); font-size: 10px; text-align: center; padding: 3px 0; border-radius: 5px; background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-2); }
.files em { font-style: normal; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.queue { list-style: none; margin: 0; padding: 0; display: grid; }
.queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13px; }
.queue span { display: flex; flex-direction: column; color: var(--ink-3); font-size: 12px; }
.queue b { color: var(--ink); font-weight: 500; font-size: 14px; }
.queue em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.tag { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.tag--ok { background: var(--mint); color: var(--green-ink); }
.tag--wait { background: var(--amber-bg); color: var(--amber); }

/* principle */
.principle { max-width: 980px; }
.principle__quote { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; text-align: center; text-wrap: balance; }
.principle__quote span { color: var(--green); }
.principle__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.principle__grid h3 { font-size: 19px; letter-spacing: -0.015em; }
.principle__grid p { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.principle__grid div { padding-top: 18px; border-top: 2px solid var(--ink); }

/* quotes */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.quote { margin: 0; padding: 32px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.quote blockquote { margin: 0; font-size: 19px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.quote figcaption { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ink-3); line-height: 1.4; }
.quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.quote figcaption span { display: flex; flex-direction: column; }
.quote figcaption strong { color: var(--ink); font-weight: 600; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }
.plan--featured { border: 2px solid var(--green); box-shadow: 0 30px 60px -40px rgba(0,124,75,.6); }
.plan__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan__name { font-size: 22px; }
.plan__badge { padding: 4px 10px; border-radius: 999px; background: var(--mint); color: var(--green-ink); font-size: 12px; font-weight: 600; }
.plan__for { color: var(--ink-3); font-size: 14px; }
.plan__price { margin-top: 6px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.plan__amount { font-family: var(--head); font-weight: 600; font-size: 42px; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.plan__from, .plan__unit { font-size: 14px; color: var(--ink-3); }
.plan__list { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.plan__list li { padding-left: 22px; position: relative; }
.plan__list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.plan__cta { margin-top: auto; width: 100%; }

/* consultants */
.consult { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.consult__lead { margin: 18px 0 28px; font-size: 17px; color: var(--ink-2); }
.consult__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.consult__list li { padding: 20px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.consult__list strong { font-family: var(--head); font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.consult__list span { font-size: 14px; color: var(--ink-3); }

/* founder */
.founder { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 40px; align-items: center; max-width: 900px; }
.founder__photo img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; }
.founder__title { font-size: clamp(26px, 3vw, 36px); }
.founder__text { margin-top: 14px; color: var(--ink-2); font-size: 17px; max-width: 620px; }
.founder__name { margin-top: 16px; font-size: 14px; color: var(--ink-3); }
.founder__name strong { color: var(--ink); }

/* faq */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 32px 18px 0; font-weight: 500; font-size: 15px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 22px; color: var(--ink-3); }
.faq details[open] summary::after { content: "−"; }
.faq p { padding-bottom: 18px; color: var(--ink-2); font-size: 15px; }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.contact__side { position: relative; padding: 48px 44px 220px; background: #eef2e6; overflow: hidden; }
.contact__side p { margin-top: 16px; color: var(--ink-2); font-size: 16px; max-width: 420px; position: relative; z-index: 2; }
.contact__side .h2 { position: relative; z-index: 2; }
.contact__mail a { color: var(--green); font-weight: 500; }
.fields--small { top: auto; height: 220px; }
.contact__side::after { content: ""; position: absolute; left: 0; right: 0; bottom: 150px; height: 80px; background: linear-gradient(#eef2e6, rgba(238,242,230,0)); z-index: 1; }
.lead-form { padding: 40px; }
.lead-form form { display: grid; gap: 14px; }
.field label, .field--row label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.field input, .field select { width: 100%; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); font: inherit; font-size: 15px; background: #fbfbf8; color: var(--ink); }
.field input:focus, .field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,124,75,.14); background: #fff; }
.field [aria-invalid="true"] { border-color: #c2412d; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lead-form__btn { width: 100%; }
.lead-form__btn[disabled] { opacity: .65; cursor: progress; }
.lead-form__fine { font-size: 12px; color: var(--ink-3); }
.lead-form__status { font-size: 14px; }
.lead-form__status:empty { display: none; }
.lead-form__status.is-error { color: #b42318; }
.lead-form__done { text-align: center; padding: 30px 10px; }
.lead-form__done h3 { font-size: 22px; }
.lead-form__done p { color: var(--ink-2); margin: 8px 0 0; }

/* footer */
.site-footer { border-top: 1px solid var(--line); }
.footer { padding: 56px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; font-size: 14px; color: var(--ink-3); }
.footer__brand img { height: 28px; width: auto; }
.footer__brand p { margin-top: 12px; }
.footer__links { display: flex; gap: 56px; flex-wrap: wrap; }
.footer__links div { display: flex; flex-direction: column; gap: 10px; }
.footer__links p { color: var(--ink); font-weight: 500; }
.footer__links a { text-decoration: none; }
.footer__links a:hover { color: var(--green); }
.footer__legal { grid-column: 1 / -1; font-size: 12px; padding-top: 24px; border-top: 1px solid var(--line); }

/* legal pages */
.page { max-width: 760px; margin: 0 auto; padding: 80px 24px 100px; }
.page h1 { font-size: 40px; }
.page__meta { color: var(--ink-3); margin: 8px 0 32px; }
.prose h2 { font-size: 22px; margin: 32px 0 10px; letter-spacing: -0.02em; }
.prose p, .prose li { color: var(--ink-2); margin: 0 0 12px; }
.prose a { color: var(--green); }

/* responsive */
@media (max-width: 1000px) {
  .nav__links, .nav__signin { display: none; }
  .hero__stage { height: 600px; }
  .pin--a { left: 24px; top: 440px; } .pin--b { display: none; }
  .pin--c { right: 24px; top: 440px; } .pin--d { display: none; }
  .pin::after { display: none; }
  .panel { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 24px; }
  .how::before, .how__row::after { display: none; }
  .how__row { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 36px 0; }
  .how__row--flip .how__text { order: 0; }
  .principle__grid, .quotes, .plans, .faq { grid-template-columns: minmax(0, 1fr); }
  .consult, .contact { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .consult { gap: 32px; }
  .footer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .section { padding: 80px 0; }
  .hero { padding-top: 44px; }
  .hero__title { font-size: clamp(42px, 12.6vw, 58px); }
  .hero__sub { font-size: 16px; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .hero__trust { font-size: 12px; text-align: left; }
  .hero__stage { height: 560px; margin-top: 40px; }
  .report { width: calc(100% - 48px); padding: 18px; }
  .report__total { font-size: 44px; }
  .pin--a { left: 24px; top: 448px; } .pin--c { right: 24px; top: 448px; }
  .split-head { flex-direction: column; align-items: flex-start; }
  .split-head p { text-align: left; }
  .tabs__list { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px 14px; padding: 0 24px 4px; }
  .tabs__list button { flex: 0 0 auto; }
  .tabs__frame { padding: 8px; border-radius: 22px; }
  .panel { padding: 20px; }
  .panel__text h3 { font-size: 24px; }
  .card--tilt-l, .card--tilt-r, .window--tilt { transform: none; }
  .consult__list { grid-template-columns: minmax(0, 1fr); }
  .founder { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .founder__photo img { width: 96px; height: 96px; }
  .contact__side { padding: 32px 24px 180px; }
  .fields--small { height: 180px; }
  .contact__side::after { bottom: 110px; }
  .lead-form { padding: 24px; }
  .field--row { grid-template-columns: minmax(0, 1fr); }
  .quote { padding: 24px; }
  .quote blockquote { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media (min-width: 1001px) {
  .pin::after { width: 40px; }
  .pin--a { left: auto; right: calc(50% + 230px); top: 70px; }
  .pin--b { left: auto; right: calc(50% + 230px); top: 270px; }
  .pin--c { right: auto; left: calc(50% + 230px); top: 120px; }
  .pin--d { right: auto; left: calc(50% + 230px); top: 310px; }
}
.report__chip { white-space: nowrap; }
@media (max-width: 600px) {
  .hero__stage { height: 520px; }
  .pin--a, .pin--c { top: 400px; }
  .stage__note { bottom: 10px; }
}

/* logo strip */
.logos { padding: 44px 0 8px; }
.logos__title { text-align: center; font-family: var(--font); font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--ink-3); }
.logos__row { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 64px; }
.logos__row img { width: auto; opacity: .72; transition: opacity .15s; }
.logos__row img:hover { opacity: 1; }
#what { padding-top: 96px; }
@media (max-width: 600px) {
  .logos__row { gap: 24px 36px; }
  .logos__row img { transform: scale(.82); }
}

/* v6 — one place for ESG */
:root { --risk: #b42318; --risk-bg: #fde7e4; --elec: #2a78d6; --gas: #eda100; }
.tag--risk { background: var(--risk-bg); color: var(--risk); }
.pin__e--wait { color: var(--amber); }
.pin__e--risk { color: var(--risk); }

/* hero overview card */
.report { width: 400px; }
.ov { margin-top: 16px; display: grid; }
.ov__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.ov__ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.ov__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ov__ico--energy { background: #fdf3d8; color: #9a6a00; }
.ov__ico--sup { background: #e6eefb; color: #2a5fae; }
.ov__ico--co2 { background: var(--mint); color: var(--green); }
.ov__k { font-size: 12px; color: var(--ink-3); }
.ov__v { font-family: var(--head); font-weight: 600; font-size: 22px; letter-spacing: -0.03em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ov__v span { font-family: var(--font); font-weight: 400; font-size: 12px; letter-spacing: 0; color: var(--ink-3); }
.ov .bar { margin-top: 8px; height: 6px; }
.ov .tag { align-self: center; }

/* three doors */
.panel__kicker { font-size: 13px; font-weight: 500; color: var(--green); margin-bottom: 8px !important; margin-top: 0 !important; }
.panel__text .panel__kicker + h3 { margin-top: 0; }
.app { position: relative; padding: 16px; border-radius: 16px; background: #f7f8f5; border: 1px solid var(--line); display: grid; gap: 10px; font-size: 13px; }
.app__top { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 4px; }
.app__title { font-weight: 600; font-size: 16px; }
.app__pill { font-size: 12px; color: var(--ink-2); padding: 4px 10px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kpis div { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kpis span { font-size: 11px; color: var(--ink-3); }
.kpis b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-wait { color: var(--amber); }
.app__card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.app__card--flush { padding: 4px 0; overflow-x: auto; }
.app__card--row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; }
.app__label { font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.app__label span { font-weight: 400; font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.lg { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.lg--e { background: var(--elec); } .lg--g { background: var(--gas); margin-left: 6px; }
.app__fine { font-size: 11px; color: var(--ink-3); margin-top: 2px !important; }
.cols { margin-top: 12px; height: 110px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; border-bottom: 1px solid var(--line); }
.cols span { display: flex; flex-direction: column-reverse; height: 100%; justify-content: flex-start; gap: 2px; }
.cols span::before { content: ""; height: calc(var(--e) * 0.55); background: var(--elec); border-radius: 3px 3px 0 0; }
.cols span::after { content: ""; height: calc(var(--g) * 0.55); background: var(--gas); border-radius: 3px 3px 0 0; }
.cols span::before { border-radius: 0; }
.cols .cols__miss::after { height: 26%; background: repeating-linear-gradient(135deg, #f2d48a 0 3px, transparent 3px 6px); border: 1px dashed #d9a93a; }
.cols__axis { display: flex; justify-content: space-between; margin-top: 6px !important; font-size: 10px; color: var(--ink-3); }
.rate { display: flex; flex-direction: column; text-align: right; }
.rate span { font-size: 11px; color: var(--ink-3); }
.rate b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate--best b { color: var(--green); }
.app__note { position: absolute; right: 18px; bottom: -22px; font-size: 11px; color: var(--ink-3); }
.stable { width: 100%; border-collapse: collapse; font-size: 13px; }
.stable th { text-align: left; font-weight: 500; font-size: 11px; color: var(--ink-3); padding: 8px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stable td { padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stable tr:last-child td { border-bottom: 0; }
.stable td:first-child { font-weight: 500; }
.stable .is-sel td { background: #f6faf7; }
.risk { margin: 10px 0 0; display: grid; }
.risk div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.risk dt { color: var(--ink-2); }
.risk dd { margin: 0; font-weight: 500; text-align: right; white-space: nowrap; }
.panel { padding-bottom: 44px; }

@media (max-width: 1000px) {
  .report { width: min(400px, calc(100% - 48px)); }
}
@media (max-width: 600px) {
  .report { width: calc(100% - 48px); }
  .ov__v { font-size: 19px; }
  .ov__row { grid-template-columns: 32px minmax(0, 1fr); }
  .ov__row .tag { grid-column: 2; justify-self: start; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app__card--row { grid-template-columns: 1fr 1fr; }
  .app__card--row > div:first-child { grid-column: 1 / -1; }
  .rate { text-align: left; }
  .risk div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .risk dd { text-align: left; }
  .hero__stage { height: 640px; }
  .pin--a, .pin--c { top: 520px; }
  .pin--c .pin__v { font-size: 13px; }
}
.panel__text .panel__kicker { color: var(--green); }
@media (min-width: 1001px) { .hero__stage { height: 480px; } }

/* compact client quotes under the logos */
.minis { margin: 40px auto 0; max-width: 980px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini { margin: 0; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.mini img { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.mini blockquote { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.mini figcaption { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.mini figcaption strong { color: var(--ink-2); font-weight: 600; }
@media (max-width: 760px) { .minis { grid-template-columns: minmax(0, 1fr); } }

/* v7 — "One place for your ESG": vertical doors + app on the fields */
.doors { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 40px; align-items: stretch; }
.doors__list { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.door { position: relative; padding: 4px 0 4px 22px; border-left: 2px solid var(--line); transition: border-color .2s; }
.door.is-active { border-left-color: var(--green); }
.door button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 0; cursor: pointer; }
.door button:focus-visible { outline: 3px solid rgba(0,124,75,.35); outline-offset: 4px; border-radius: 8px; }
.door__ico { flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 11px; font-weight: 700; transition: transform .2s; }
.door__ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.door__ico--energy { background: #fdf3d8; color: #9a6a00; }
.door__ico--sup { background: #e6eefb; color: #2a5fae; }
.door__ico--carbon { background: var(--mint); color: var(--green); }
.door__txt { display: flex; flex-direction: column; gap: 1px; }
.door__q { font-size: 13px; color: var(--ink-3); }
.door__t { font-family: var(--head); font-weight: 600; font-size: 24px; letter-spacing: -0.03em; color: var(--ink-3); transition: color .2s; }
.door.is-active .door__t, .door button:hover .door__t { color: var(--ink); }
.door__body { display: none; padding: 0 0 18px 54px; }
.door.is-active .door__body { display: block; }
.door__body p { color: var(--ink-2); font-size: 15px; }
.door__body ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.door__body li { display: flex; gap: 10px; align-items: baseline; }
.door__body li::before { content: "✓"; color: var(--green); font-weight: 700; font-size: 12px; }
.doors__stage { position: relative; border-radius: 26px; overflow: hidden; padding: 56px 36px 64px; min-height: 560px; display: flex; align-items: center; background: #c8d89a; }
.doors__stage .fields { position: absolute; inset: 0; }
.doors__stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246,246,241,.55), rgba(246,246,241,0) 40%); pointer-events: none; }
.doors__panel { position: relative; z-index: 1; width: 100%; }
.doors__panel[hidden] { display: none; }
.doors__panel .app { background: rgba(250,250,247,.96); border-color: rgba(255,255,255,.9); box-shadow: 0 40px 70px -34px rgba(24,48,20,.55), 0 10px 24px -16px rgba(24,48,20,.35); }
.doors__panel .app__note { color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.35); bottom: -26px; }
.sbars { margin-top: 12px; height: 110px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; border-bottom: 1px solid var(--line); }
.sbars span { display: flex; flex-direction: column-reverse; height: 100%; gap: 2px; }
.sbars span::before { content: ""; height: calc(var(--a) * .9); background: var(--s1); }
.sbars span::after { content: ""; height: calc(var(--c) * .9); background: var(--s3); border-radius: 3px 3px 0 0; box-shadow: 0 calc(var(--b) * 1.1) 0 0 var(--s2) inset; }
.app__btn { font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 8px; background: var(--ink); color: #fff; white-space: nowrap; }
@media (max-width: 1000px) {
  .doors { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .doors__stage { min-height: 0; padding: 28px 16px 48px; }
}
@media (max-width: 600px) {
  .door { padding-left: 16px; }
  .door__t { font-size: 20px; }
  .door__body { padding-left: 0; }
  .doors__stage { border-radius: 20px; padding: 20px 10px 44px; }
  .app__card--row { grid-template-columns: 1fr auto; }
}
.sbars span::before, .sbars span::after { content: none; }
.sbars i { display: block; }
.sbars i:last-child { border-radius: 3px 3px 0 0; }
@media (max-width: 600px) { .stable th:nth-child(2), .stable td:nth-child(2) { display: none; } }
@media (max-width: 600px) { .stable th, .stable td { padding: 8px 8px; font-size: 12px; } .stable th:first-child, .stable td:first-child { padding-left: 12px; } }
@media (max-width: 600px) { .stable th:nth-child(4), .stable td:nth-child(4) { display: none; } .stable td:nth-child(3), .stable th:nth-child(3) { text-align: right; padding-right: 12px; } }
/* suppliers table: never scroll sideways */
.app__card--flush { overflow: hidden; }
.stable { table-layout: fixed; }
.stable th, .stable td { overflow: hidden; text-overflow: ellipsis; }
.stable th:nth-child(1) { width: 38%; } .stable th:nth-child(2) { width: 22%; } .stable th:nth-child(3) { width: 17%; } .stable th:nth-child(4) { width: 23%; }
@media (max-width: 600px) { .stable th:nth-child(1) { width: 68%; } .stable th:nth-child(3) { width: 32%; } }

/* v8 — hero: ESG made concrete */
.pillars { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pillars li { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-weight: 500; font-size: 15px; box-shadow: 0 6px 16px -12px rgba(19,24,20,.35); }
.pillars .ov__ico { width: 32px; height: 32px; border-radius: 50%; }
.pillars .ov__ico svg { width: 16px; height: 16px; }
.hero__sub { margin-top: 20px; max-width: 560px; }
.hero__micro { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.hero__trust { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-3); }
.logos__row--hero { margin: 0; gap: 18px 44px; }
.logos__row--hero img { transform: scale(.72); transform-origin: center; opacity: .6; }
.logos { padding-top: 40px; }
.minis { margin-top: 0; }
@media (max-width: 600px) {
  .pillars { gap: 8px; }
  .pillars li { font-size: 14px; padding-right: 12px; }
  .logos__row--hero { gap: 6px 18px; }
  .logos__row--hero img { transform: scale(.6); }
}
/* logos: grey by default, brand colours on hover */
.logos__row li { display: grid; place-items: center; }
.logos__row li > img { grid-area: 1 / 1; transition: opacity .2s; }
.logos__row .logo-c { opacity: 0; }
.logos__row li:hover .logo-c { opacity: 1; }
.logos__row li:hover .logo-m { opacity: 0; }
.hero__sectors { font-size: 12px; color: var(--ink-3); opacity: .85; margin-top: -2px; text-align: center; }
.soon { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--mint); color: var(--green-ink); font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; vertical-align: 1px; }
.is-soon { cursor: default; opacity: .75; }
.is-soon:hover { border-color: var(--line-2); }
.plan__alt { display: block; text-align: center; font-size: 13px; color: var(--ink-3); margin-top: -2px; }
.plan__alt:hover { color: var(--green); }
.plan .plan__cta.is-soon { margin-top: auto; }
.soon { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--mint); color: var(--green-ink); font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; vertical-align: 1px; }
.is-soon { cursor: default; opacity: .75; }
.is-soon:hover { border-color: var(--line-2); }
.plan__alt { display: block; text-align: center; font-size: 13px; color: var(--ink-3); margin-top: -2px; }
.plan__alt:hover { color: var(--green); }

/* sample report page */
.sr { padding: 32px 0 96px; }
.sr__wrap { max-width: 920px; }
.sr__banner { text-align: center; font-size: 13px; font-weight: 500; color: var(--amber); background: var(--amber-bg); border-radius: 999px; padding: 8px 16px; }
.sr-cover { margin-top: 24px; padding: 40px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: end; box-shadow: 0 30px 60px -44px rgba(19,24,20,.4); }
.sr-cover__kicker { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--green); }
.sr-cover__title { margin-top: 16px; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.02; letter-spacing: -0.04em; }
.sr-cover__meta { margin-top: 14px; color: var(--ink-3); font-size: 14px; }
.sr-cover__facts { margin: 0; display: grid; }
.sr-cover__facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.sr-cover__facts dt { color: var(--ink-3); }
.sr-cover__facts dd { margin: 0; font-weight: 500; text-align: right; }
.sr-toc { margin: 18px 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.sr-toc a { font-size: 13px; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.sr-toc a:hover { border-color: var(--ink); color: var(--ink); }
.sr-sec { margin-top: 18px; padding: 36px 40px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); scroll-margin-top: calc(var(--header) + 16px); }
.sr-sec h2 { font-size: 26px; letter-spacing: -0.03em; }
.sr-sec h3 { margin-top: 28px; font-size: 18px; letter-spacing: -0.02em; }
.sr-sec > p { margin-top: 12px; color: var(--ink-2); }
.sr-kpis { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sr-kpis div { padding: 14px 16px; border-radius: 14px; background: #f7f8f5; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.sr-kpis span { font-size: 12px; color: var(--ink-3); }
.sr-kpis b { font-family: var(--head); font-weight: 600; font-size: 26px; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sr-kpis small { font-family: var(--font); font-weight: 400; font-size: 12px; letter-spacing: 0; color: var(--ink-3); }
.sr-bar { margin-top: 22px; display: flex; gap: 3px; height: 12px; }
.sr-bar i { border-radius: 999px; }
.sr-legend { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); }
.sr-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.sr-list { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); font-size: 15px; }
.sr-table-wrap { margin-top: 18px; overflow-x: auto; }
.sr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sr-table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-3); padding: 9px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.sr-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sr-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-table td[rowspan] { font-weight: 500; }
.sr-total td { font-weight: 600; border-bottom: 0; border-top: 2px solid var(--ink); }
.sr-note { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #f4f8f1; border: 1px solid #dce8d2; font-size: 14px; color: var(--ink-2); }
.sr-note b { color: var(--ink); }
.sr-actions { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: a; display: grid; gap: 10px; }
.sr-actions li { counter-increment: a; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.sr-actions li::before { content: counter(a); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--green-ink); font-size: 12px; font-weight: 600; }
.sr-actions b { font-weight: 600; }
.sr-actions span { color: var(--ink-2); font-size: 14px; }
.sr-cta { margin-top: 18px; padding: 36px 40px; border-radius: 22px; background: var(--ink); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.sr-cta h2 { font-size: 26px; }
.sr-cta p { margin-top: 8px; color: #c9d1cb; }
.sr-cta .btn--ink { background: #fff; color: var(--ink); }
@media (max-width: 760px) {
  .sr-cover { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
  .sr-sec { padding: 24px 18px; }
  .sr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-cta { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
}

/* ==========================================================================
   v9 — motion (only when .motion is set: JS on, reduced motion off)
   ========================================================================== */
/* hand-drawn underlines draw themselves */
.motion .scribble path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .scribble.is-in path { stroke-dashoffset: 0; transition: stroke-dashoffset .85s cubic-bezier(.42,0,.58,1) .25s; }
.motion .scribble.is-in path + path { transition-delay: .7s; }

/* soft reveals */
.motion .reveal { opacity: 0; transform: translateY(14px); }
.motion .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }

/* hero: card rises, then the labels arrive one by one */
@keyframes gt-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes gt-pin { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.motion .stage .report { opacity: 0; }
.motion .stage.is-in .report { opacity: 1; animation: gt-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.motion .stage.is-in .report { transform: translateX(-50%); }
@keyframes gt-rise-c { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.motion .stage.is-in .report { animation-name: gt-rise-c; }
.motion .stage .pin { opacity: 0; }
.motion .stage.is-in .pin { opacity: 1; animation: gt-pin .55s cubic-bezier(.2,.7,.2,1) both; }
.motion .stage.is-in .pin--a { animation-delay: .6s; }
.motion .stage.is-in .pin--b { animation-delay: 1.1s; }
.motion .stage.is-in .pin--c { animation-delay: 1.6s; }
.motion .stage.is-in .pin--d { animation-delay: 2.1s; }
.motion .stage .pin::after { transform: scaleX(0); transition: transform .4s ease; }
.motion .stage.is-in .pin::after { transform: scaleX(1); }
.motion .stage.is-in .pin--a::after { transition-delay: .9s; transform-origin: left; }
.motion .stage.is-in .pin--b::after { transition-delay: 1.4s; transform-origin: left; }
.motion .stage.is-in .pin--c::after { transition-delay: 1.9s; transform-origin: right; }
.motion .stage.is-in .pin--d::after { transition-delay: 2.4s; transform-origin: right; }
.motion .stage.is-in .ov__row { animation: gt-rise .5s ease both; }
.motion .stage.is-in .ov__row:nth-child(1) { animation-delay: .3s; }
.motion .stage.is-in .ov__row:nth-child(2) { animation-delay: .45s; }
.motion .stage.is-in .ov__row:nth-child(3) { animation-delay: .6s; }

/* How it works: the drawn thread */
.how__thread { position: absolute; left: calc(50% - 60px); top: 0; width: 120px; pointer-events: none; overflow: visible; }
.how__line { fill: none; stroke: #8ab92d; stroke-width: 2.25; stroke-dasharray: 2 9; stroke-linecap: round; }
.how__mask { fill: none; stroke: #fff; stroke-width: 40; stroke-dasharray: 1; stroke-dashoffset: 0; }
.how__tip { fill: var(--green); transition: opacity .2s; }
.how.how::before { display: none; }
.how__row::after { transition: background .3s, border-color .3s, transform .3s; z-index: 1; }
.how__row.is-reached::after { background: var(--leaf); border-color: var(--leaf); transform: scale(1.15); }
.motion .how__row .how__art > * { transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s; }
.motion .how__row:not(.is-reached) .how__art > * { opacity: .35; transform: translateY(12px) rotate(0deg); }
.motion .how__row:not(.is-reached) .how__text { opacity: .45; }
.motion .how__row .how__text { transition: opacity .6s; }
@media (max-width: 1000px) {
  .how__thread { display: none; }
  .motion .how__row:not(.is-reached) .how__art > *, .motion .how__row:not(.is-reached) .how__text { opacity: 1; transform: none; }
}

/* tab demos — Energy: the bars grow, April blinks as missing, the better rate lands */
@keyframes gt-grow { from { transform: scaleY(0); } }
@keyframes gt-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes gt-pop { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } }
@keyframes gt-in { from { opacity: 0; transform: translateY(6px); } }
.motion .doors__panel.is-play .cols span { transform-origin: bottom; animation: gt-grow .7s cubic-bezier(.2,.7,.2,1) both; }
.motion .doors__panel.is-play .cols span:nth-child(n) { animation-delay: calc(var(--i, 0) * 60ms + .15s); }
.motion .doors__panel.is-play .cols .cols__miss::after { animation: gt-blink 1.2s ease-in-out 1.2s 3; }
.motion .doors__panel.is-play .kpis div { animation: gt-in .5s ease both; }
.motion .doors__panel.is-play .kpis div:nth-child(2) { animation-delay: .08s; }
.motion .doors__panel.is-play .kpis div:nth-child(3) { animation-delay: .16s; }
.motion .doors__panel.is-play .kpis div:nth-child(4) { animation-delay: .24s; }
.motion .doors__panel.is-play .rate--best { animation: gt-pop .6s ease 1.5s both; }
/* Suppliers: rows arrive, the risk check "researches", then the findings land */
.sim-status { display: none; }
.motion .sim-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 11px; color: var(--ink-3); opacity: 0; }
@keyframes gt-status { 0% { opacity: 0; } 10%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gt-spin { to { transform: rotate(360deg); } }
.sim-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--green); animation: gt-spin .8s linear infinite; }
.motion .doors__panel.is-play .sim-status { animation: gt-status 1.6s ease .7s both; }
.motion .doors__panel.is-play .stable tbody tr { animation: gt-in .45s ease both; }
.motion .doors__panel.is-play .stable tbody tr:nth-child(2) { animation-delay: .1s; }
.motion .doors__panel.is-play .stable tbody tr:nth-child(3) { animation-delay: .2s; }
.motion .doors__panel.is-play .stable tbody tr:nth-child(4) { animation-delay: .3s; }
.motion .doors__panel.is-play .risk div { animation: gt-in .45s ease both; }
.motion .doors__panel.is-play .risk div:nth-child(1) { animation-delay: 2.1s; }
.motion .doors__panel.is-play .risk div:nth-child(2) { animation-delay: 2.35s; }
.motion .doors__panel.is-play .risk div:nth-child(3) { animation-delay: 2.6s; }
.motion .doors__panel.is-play .risk div:nth-child(4) { animation-delay: 2.85s; }
.motion .doors__panel.is-play .risk .tag--risk { animation: gt-pop .5s ease 2.5s both; }
/* Carbon: bars grow, a cursor clicks "Share link", the link is copied */
.motion .doors__panel.is-play .sbars span { transform-origin: bottom; animation: gt-grow .7s cubic-bezier(.2,.7,.2,1) both; }
.motion .doors__panel.is-play .sbars span:nth-child(n) { animation-delay: calc(var(--i, 0) * 60ms + .15s); }
.app__btn { position: relative; display: inline-grid; }
.app__btn-a, .app__btn-b { grid-area: 1 / 1; text-align: center; }
.app__btn-b { opacity: 0; }
.sim-cursor { display: none; }
.motion .sim-cursor { display: block; position: absolute; width: 16px; height: 20px; right: 10px; top: 60%; opacity: 0; pointer-events: none; z-index: 2; }
.sim-cursor path { fill: var(--ink); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
@keyframes gt-cursor { 0% { opacity: 0; transform: translate(70px, 60px); } 15% { opacity: 1; } 55% { opacity: 1; transform: translate(0, 0); } 62% { transform: translate(0, 0) scale(.85); } 70% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { opacity: 0; transform: translate(10px, 8px); } }
@keyframes gt-press { 0%, 100% { transform: scale(1); } 50% { transform: scale(.92); } }
@keyframes gt-swap-a { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gt-swap-b { 0%, 99% { opacity: 0; } 100% { opacity: 1; } }
.motion .doors__panel.is-play .sim-cursor { animation: gt-cursor 1.8s ease-in-out 1.2s both; }
.motion .doors__panel.is-play .app__btn { animation: gt-press .25s ease 2.3s both; }
.motion .doors__panel.is-play .app__btn-a { animation: gt-swap-a .01s linear 2.4s both; }
.motion .doors__panel.is-play .app__btn-b { animation: gt-swap-b .01s linear 2.4s both; }
.motion .doors__panel.is-play .app__btn { background: var(--ink); }

/* ==========================================================================
   Sample report v2 — laid out like the real deliverable
   ========================================================================== */
.rp-body { background: #eceee7; }
.rp { padding: 56px 0 96px; }
.rp__intro { text-align: center; max-width: 760px; }
.rp__kicker { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); font-size: 13px; font-weight: 600; }
.rp__title { margin-top: 18px; font-size: clamp(42px, 6vw, 76px); line-height: 1; letter-spacing: -0.045em; }
.rp__lead { margin: 18px auto 0; max-width: 560px; font-size: 18px; color: var(--ink-2); text-wrap: balance; }
.rp__layout { margin-top: 56px; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; align-items: start; max-width: 1120px; }
.rp__toc { position: sticky; top: calc(var(--header) + 24px); display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.rp__toc p { font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.rp__toc a:not(.btn) { text-decoration: none; color: var(--ink-2); padding: 6px 0 6px 12px; border-left: 2px solid var(--line-2); }
.rp__toc a:not(.btn):hover { color: var(--ink); border-left-color: var(--green); }
.rp__toc-cta { margin-top: 18px; align-self: flex-start; }
.rp__pages { display: grid; gap: 28px; }

.sheet { position: relative; background: #fff; border-radius: 6px; padding: 52px 60px 64px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 30px 60px -40px rgba(30,45,25,.45), 0 6px 18px -12px rgba(30,45,25,.2); scroll-margin-top: calc(var(--header) + 20px); min-height: 560px; }
.sheet__head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-3); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sheet__head span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.sheet__n { font-family: var(--mono); }
.sheet__title { margin-top: 30px; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.04em; line-height: 1.05; }
.sheet__h3 { margin-top: 36px; font-size: 18px; letter-spacing: -0.02em; }
.sheet__lead { margin-top: 12px; color: var(--ink-2); font-size: 16px; max-width: 620px; }
.sheet__fine { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.sheet__foot { position: absolute; left: 60px; right: 60px; bottom: 22px; font-size: 10.5px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 10px; }

/* cover */
.sheet--cover { padding: 0; overflow: hidden; min-height: 760px; display: flex; flex-direction: column; }
.cover__art { position: relative; height: 230px; background: #c8d89a; }
.cover__art .fields { position: absolute; inset: 0; }
.cover__body { padding: 0 60px 80px; margin-top: -60px; position: relative; }
.cover__brand { display: inline-block; background: #fff; padding: 14px 18px; border-radius: 12px; box-shadow: 0 10px 30px -16px rgba(30,45,25,.5); }
.cover__brand img { height: 26px; width: auto; }
.cover__title { margin-top: 34px; font-size: clamp(56px, 8vw, 104px); line-height: .92; letter-spacing: -0.055em; }
.cover__co { margin-top: 18px; font-size: 18px; color: var(--ink-2); }
.cover__grid { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.cover__total { display: flex; align-items: center; gap: 22px; }
.cover__facts { margin: 0; display: grid; }
.cover__facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cover__facts dt { color: var(--ink-3); }
.cover__facts dd { margin: 0; font-weight: 500; text-align: right; }

/* donut + legend */
.donut { width: 168px; height: 168px; flex: 0 0 auto; }
.donut__n { font-family: var(--head); font-weight: 600; font-size: 30px; letter-spacing: -0.04em; fill: var(--ink); }
.donut__u { font-size: 12px; fill: var(--ink-3); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.legend--col li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); }
.legend--col b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* KPI band */
.kp { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.kp--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kp div { padding: 18px 18px 18px 0; display: flex; flex-direction: column; gap: 4px; }
.kp div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.kp span { font-size: 12px; color: var(--ink-3); }
.kp b { font-family: var(--head); font-weight: 600; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kp small { font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.kp em { font-style: normal; font-size: 12px; color: var(--ink-3); }

/* findings */
.finds { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.finds__i { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.finds__i b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.finds__i p { font-size: 14px; color: var(--ink-2); }
.finds__tag { align-self: flex-start; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.finds__i--save { background: #f3f9ee; border-color: #dbead0; } .finds__i--save .finds__tag { background: var(--mint); color: var(--green-ink); }
.finds__i--risk { background: #fdf4f2; border-color: #f4dcd7; } .finds__i--risk .finds__tag { background: var(--risk-bg); color: var(--risk); }
.finds__i--co2 { background: #f7f8f5; } .finds__i--co2 .finds__tag { background: #ece9dc; color: #6a5d2e; }
.finds__i--data { background: #fffaf0; border-color: #f2e6c6; } .finds__i--data .finds__tag { background: var(--amber-bg); color: var(--amber); }

/* split layouts */
.split { margin-top: 30px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 44px; align-items: start; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--sup { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 28px; }
.split__a { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.split__a .legend { width: 100%; }
.chart__t { font-size: 13px; font-weight: 600; margin-bottom: 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chart__key { font-weight: 400; font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.chart__key i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.chart__key i + i, .chart__key i:nth-of-type(2) { margin-left: 8px; }

/* horizontal category bars */
.hb { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hb li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 46px 36px; align-items: center; gap: 10px; font-size: 13px; }
.hb__lab { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb__track { height: 12px; background: #f1f2ee; border-radius: 3px; overflow: hidden; }
.hb__track i { display: block; height: 100%; border-radius: 3px; }
.hb__val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.hb__pct { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* monthly energy */
.mb { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 190px; align-items: end; }
.mb__col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.mb__stack { flex: 1; width: 100%; display: flex; flex-direction: column-reverse; gap: 2px; justify-content: flex-start; }
.mb__e { background: var(--elec); border-radius: 0; }
.mb__g { background: var(--gas); border-radius: 3px 3px 0 0; }
.mb__stack i { display: block; }
.mb__col.is-miss .mb__g { background: repeating-linear-gradient(135deg, #f2d48a 0 3px, transparent 3px 6px); outline: 1px dashed #d9a93a; outline-offset: -1px; }
.mb__m { font-size: 10px; color: var(--ink-3); }
.rate-cmp { display: flex; flex-direction: column; gap: 12px; }
.rc { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 13px; }
.rc__lab { color: var(--ink-3); }
.rc__bar { height: 26px; background: #f1f2ee; border-radius: 6px; overflow: hidden; }
.rc__bar i { display: block; height: 100%; border-radius: 6px; }
.rc__you { background: #e3c27a; } .rc__best { background: var(--green); }
.rc b { font-variant-numeric: tabular-nums; }
.t-ok { color: var(--green); }
.rate-cmp__save { margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: #f3f9ee; font-size: 14px; color: var(--ink-2); }
.rate-cmp__save strong { font-family: var(--head); font-size: 22px; letter-spacing: -0.03em; color: var(--green-ink); }

/* suppliers */
.riskbar { margin-top: 24px; display: flex; gap: 3px; height: 40px; border-radius: 10px; overflow: hidden; }
.riskbar i { display: flex; align-items: center; padding: 0 12px; font-style: normal; min-width: max-content; }
.riskbar b { font-size: 12px; font-weight: 600; color: #213021; white-space: nowrap; }
.sr-table td small { display: block; font-size: 11px; color: var(--ink-3); }
.sr-table .is-hi td { background: #fdf6f4; }
.rcard { padding: 18px; border-radius: 14px; border: 1px solid #f4dcd7; background: #fffbfa; }
.rcard__t { font-weight: 600; font-size: 14px; }
.rcard dl { margin: 10px 0 0; }
.rcard dl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid #f4e6e2; font-size: 13px; }
.rcard dt { color: var(--ink-2); }
.rcard dd { margin: 0; font-weight: 500; text-align: right; white-space: nowrap; }
.rcard__src { margin-top: 8px; font-size: 11px; color: var(--ink-3); }

/* pathway */
.pw { width: 100%; height: auto; margin-top: 18px; }
.pw__grid { stroke: #eceee8; stroke-width: 1; }
.pw__ax { font-size: 10px; fill: var(--ink-3); font-family: var(--font); }
.pw__area { fill: rgba(138,185,45,.12); }
.pw__line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pw__dot { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.pw__dot--end { stroke: var(--green); }
.pw__lab { font-size: 12px; font-weight: 600; fill: var(--ink); font-family: var(--font); }
.pw__lab--g { fill: var(--green-ink); }
.acts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.acts li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.acts__y { font-family: var(--mono); font-size: 12px; color: var(--green); padding-top: 2px; }
.acts b { font-weight: 600; font-size: 15px; }
.acts p { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* method & sign-off */
.meth { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.meth li { font-size: 14px; color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; }
.meth b { color: var(--ink); font-weight: 600; }
.sign { padding: 22px; border-radius: 14px; background: #f7f8f5; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--ink-2); }
.sign__t { font-size: 12px; color: var(--ink-3); }
.sign__row { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.sign__ok { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 700; }
.sign__row b { display: block; color: var(--ink); }
.sign__row small { font-size: 12px; color: var(--ink-3); }

.rp__cta { border-radius: 22px; background: var(--ink); color: #fff; padding: 40px 44px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.rp__cta h2 { font-size: 30px; letter-spacing: -0.035em; }
.rp__cta p { margin-top: 8px; color: #c9d1cb; max-width: 460px; }

/* motion for the report */
@keyframes gt-grow-x { from { transform: scaleX(0); } }
.motion .sheet.is-in .hb__track i, .motion .sheet.is-in .rc__bar i { transform-origin: left; animation: gt-grow-x .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms + .2s); }
.motion .sheet.is-in .mb__stack { transform-origin: bottom; animation: gt-grow .8s cubic-bezier(.2,.7,.2,1) both; }
.motion .sheet.is-in .mb__col .mb__stack { animation-delay: calc(var(--i, 0) * 50ms + .15s); }
@keyframes gt-donut { from { opacity: 0; transform: rotate(-90deg) scale(.9); } }
.motion .sheet.is-in .donut { animation: gt-pop .8s cubic-bezier(.2,.7,.2,1) both; }
.motion .pw__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .sheet.is-in .pw__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .3s; }
.motion .sheet.is-in .pw__dot--end, .motion .sheet.is-in .pw__lab--g { animation: gt-in .5s ease 1.7s both; }
.motion .sheet.is-in .finds__i { animation: gt-in .5s ease both; }
.motion .sheet.is-in .finds__i:nth-child(2) { animation-delay: .1s; }
.motion .sheet.is-in .finds__i:nth-child(3) { animation-delay: .2s; }
.motion .sheet.is-in .finds__i:nth-child(4) { animation-delay: .3s; }

@media (max-width: 1000px) {
  .rp__layout { grid-template-columns: minmax(0, 1fr); }
  .rp__toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .rp__toc p { width: 100%; margin: 0; }
  .rp__toc a:not(.btn) { border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 12px; background: #fff; }
  .rp__toc-cta { display: none; }
}
@media (max-width: 760px) {
  .rp { padding-top: 36px; }
  .sheet { padding: 32px 22px 56px; border-radius: 6px; min-height: 0; }
  .sheet__foot { left: 22px; right: 22px; }
  .sheet--cover { min-height: 0; }
  .cover__art { height: 160px; }
  .cover__body { padding: 0 22px 64px; margin-top: -40px; }
  .cover__grid, .split, .split--even, .split--sup { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cover__total { flex-direction: column; align-items: flex-start; }
  .kp, .kp--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp div:nth-child(3) { padding-left: 0; border-left: 0; }
  .kp--3 div:nth-child(3) { padding-left: 0; }
  .finds, .acts { grid-template-columns: minmax(0, 1fr); }
  .hb li { grid-template-columns: minmax(0, 1fr) 46px 36px; }
  .hb__track { grid-column: 1 / -1; grid-row: 2; }
  .mb { height: 150px; gap: 3px; }
  .rp__cta { flex-direction: column; align-items: flex-start; padding: 30px 24px; }
}
/* report fixes */
.sheet { padding-bottom: 28px; min-height: 0; }
.sheet__foot { position: static; margin-top: 44px; }
.sheet--cover .sheet__foot { margin: 0 60px 26px; }
.cover__body { padding-bottom: 0; }
.split--sup { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.rcard dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
@media (max-width: 760px) {
  .sheet { padding-bottom: 22px; }
  .sheet--cover .sheet__foot { margin: 0 22px 22px; }
  .rcard dl { grid-template-columns: minmax(0, 1fr); }
  .sr-table th:nth-child(4), .sr-table td:nth-child(4) { display: none; }
  .pw__ax { font-size: 18px; }
  .pw__lab { font-size: 22px; }
}

/* ==========================================================================
   Sample report v3 — annotated object, guided tour, builder
   ========================================================================== */
/* A. hero with the report on the desk */
.rpx { position: relative; padding-top: 64px; overflow: hidden; }
.rpx__copy { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.rpx__kicker { font-size: 13px; font-weight: 500; color: var(--amber); background: var(--amber-bg); padding: 5px 12px; border-radius: 999px; }
.rpx__title { margin-top: 20px; font-size: clamp(44px, 7vw, 92px); line-height: .98; letter-spacing: -0.045em; max-width: 900px; text-wrap: balance; }
.rpx__sub { margin-top: 22px; max-width: 600px; font-size: 18px; color: var(--ink-2); text-wrap: balance; }
.rpx__ctas { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rpx__stage { position: relative; margin-top: 48px; height: 660px; }
.rpx__stage > .fields { position: absolute; inset: 0; width: 100%; height: 100%; }
.rpx__stage::before { content: ""; position: absolute; inset: 0 0 auto; height: 40%; background: linear-gradient(var(--bg), rgba(246,246,241,0)); z-index: 1; pointer-events: none; }
.rpx__desk { position: relative; z-index: 2; height: 100%; }
.paper { position: absolute; left: 50%; top: 0; width: 560px; transform-origin: top center; }
.paper .mp { box-shadow: 0 2px 0 rgba(0,0,0,.03), 0 50px 80px -40px rgba(24,48,20,.55), 0 14px 30px -18px rgba(24,48,20,.35); }
.paper--f { top: 10px; transform: translateX(-50%) rotate(-1.2deg) scale(.7); z-index: 3; }
.paper--l { top: 90px; transform: translateX(calc(-50% - 250px)) rotate(-7deg) scale(.58); z-index: 1; }
.paper--r { top: 100px; transform: translateX(calc(-50% + 250px)) rotate(6deg) scale(.58); z-index: 2; }
.rpx__desk .pin { z-index: 4; }
.rpx__desk .pin--a { right: auto; left: calc(50% - 520px); top: 70px; }
.rpx__desk .pin--b { right: auto; left: calc(50% - 540px); top: 380px; }
.rpx__desk .pin--c { left: calc(50% + 350px); top: 80px; }
.rpx__desk .pin--d { left: calc(50% + 350px); top: 400px; }
.rpx__desk .pin::after { width: 34px; }

/* report pages (compact) */
.mp { width: 100%; background: #fff; border-radius: 6px; padding: 30px 32px 30px; color: var(--ink); text-align: left; }
.mp__head { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mp__head span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.mp__head span:last-child { font-family: var(--mono); }
.mp__title { margin-top: 18px; font-size: 28px; letter-spacing: -0.035em; }
.mp__lead { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.mp__t { font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.mp__note, .mp__fine { margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.mp__split { margin-top: 18px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; }
.mp__split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.mp .donut { width: 140px; height: 140px; }
.mp .hb li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px 30px; font-size: 12px; gap: 8px; }
.mp .hb { gap: 7px; }
.mp .mb { height: 130px; gap: 4px; }
.mp__rates { display: flex; flex-direction: column; gap: 10px; }
.mp .rc { grid-template-columns: 62px minmax(0, 1fr) auto; font-size: 12px; gap: 8px; }
.mp .rc__bar { height: 20px; }
.mp__save { padding: 12px 14px; border-radius: 10px; background: #f3f9ee; font-size: 13px; color: var(--ink-2); }
.mp__save strong { font-family: var(--head); font-size: 20px; letter-spacing: -0.03em; color: var(--green-ink); }
.mp .riskbar { margin-top: 16px; height: 32px; }
.mp__table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; }
.mp__table td { padding: 9px 6px; border-bottom: 1px solid var(--line); }
.mp__table td small { display: block; font-size: 11px; color: var(--ink-3); }
.mp__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp__table td:last-child { text-align: right; }
.mp__table .is-hi td { background: #fdf6f4; }
.mp .pw { margin-top: 10px; }
.mp__acts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; font-size: 13px; }
.mp__acts li { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.mp__acts span { font-family: var(--mono); font-size: 11px; color: var(--green); padding-top: 2px; }
.mp__meth { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-size: 13px; color: var(--ink-2); }
.mp__meth b { display: block; color: var(--ink); }
.mp__sign { margin-top: 18px; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: #f7f8f5; border: 1px solid var(--line); font-size: 13px; }
.mp__sign b { display: block; }
.mp__sign small { color: var(--ink-3); font-size: 11.5px; }
.mp--cover { padding: 0; overflow: hidden; }
.mp__art { position: relative; height: 150px; background: #c8d89a; }
.mp__art .fields { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp__body { padding: 22px 32px 30px; }
.mp__logo { height: 22px; width: auto; }
.mp__big { margin-top: 18px; font-family: var(--head); font-weight: 600; font-size: 64px; line-height: .92; letter-spacing: -0.055em; }
.mp__co { margin-top: 10px; color: var(--ink-2); font-size: 14px; }
.mp__coverrow { margin-top: 22px; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 22px; align-items: center; }
.mp__facts { margin: 0; }
.mp__facts div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12px; }
.mp__facts dt { color: var(--ink-3); }
.mp__facts dd { margin: 0; font-weight: 500; }

/* hand-drawn marks (green circle or underline, like an expert annotating) */
.mark { position: relative; display: inline-block; }
div.mark { display: block; }
.mark__svg { position: absolute; left: -14px; top: -12px; width: calc(100% + 28px); height: calc(100% + 24px); overflow: visible; pointer-events: none; }
.mark--line .mark__svg { top: auto; bottom: -9px; height: 12px; left: -2px; width: calc(100% + 4px); }
.mark__svg path { fill: none; stroke: var(--leaf); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.motion .mark__svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .mark.is-drawn .mark__svg path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.42,0,.58,1); }

/* B. guided tour */
.tour__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.tour__steps { list-style: none; margin: 0; padding: 0; }
.tour__step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; transition: opacity .4s; }
.tour__step:first-child { min-height: 52vh; justify-content: flex-start; padding-top: 80px; }
.motion .tour__step:not(.is-active) { opacity: .3; }
.tour__who { font-size: 13px; font-weight: 500; color: var(--green); }
.tour__step h3 { margin-top: 10px; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.035em; }
.tour__step > p:not(.tour__who):not(.tour__pg) { margin-top: 14px; font-size: 17px; color: var(--ink-2); max-width: 440px; }
.tour__pg { margin-top: 18px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.tour__inline { display: none; }
.tour__frame { position: relative; height: 100%; }
.tour__sticky { position: sticky; top: calc(var(--header) + 40px); height: 600px; border-radius: 26px; background: #e7ecdf; padding: 36px; }
.tour__page { position: absolute; left: 36px; right: 36px; top: 36px; opacity: 0; transform: translateY(18px) rotate(.6deg); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.tour__page .mp { box-shadow: 0 2px 0 rgba(0,0,0,.03), 0 40px 70px -40px rgba(24,48,20,.5); }
.tour__page.is-active { opacity: 1; transform: none; }
.tour__count { position: absolute; right: 24px; bottom: 16px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* C. builder */
.build { border-top: 1px solid var(--line); }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.builder__q { padding: 40px; display: grid; gap: 28px; align-content: start; background: #eef2e6; }
.builder__q fieldset { border: 0; margin: 0; padding: 0; }
.builder__q legend { font-weight: 600; font-size: 15px; margin-bottom: 12px; padding: 0; }
.builder__q legend small { font-weight: 400; color: var(--ink-3); font-size: 12px; margin-left: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); font-size: 14px; transition: background .15s, border-color .15s, color .15s; }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid rgba(0,124,75,.35); outline-offset: 2px; }
.builder__out { padding: 40px; display: flex; flex-direction: column; gap: 10px; }
.builder__label { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.builder__sections, .builder__docs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.builder__sections li, .builder__docs li { display: flex; gap: 10px; align-items: baseline; }
.builder__sections li::before { content: "✓"; color: var(--green); font-weight: 700; font-size: 12px; }
.builder__docs li::before { content: ""; flex: 0 0 7px; height: 7px; border-radius: 2px; background: var(--leaf); transform: translateY(-1px); }
.builder__price { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.builder__plan { font-family: var(--head); font-weight: 600; font-size: 24px; letter-spacing: -0.03em; }
.builder__why { font-size: 13px; color: var(--ink-2); max-width: 300px; margin-top: 2px; }
.builder__amount { font-family: var(--head); font-weight: 600; font-size: 22px; letter-spacing: -0.03em; white-space: nowrap; color: var(--green-ink); }
.builder__cta { margin-top: 14px; width: 100%; }
.builder__fine { font-size: 12px; color: var(--ink-3); text-align: center; }
@keyframes gt-bump { 50% { transform: scale(1.04); } }
.motion .builder.is-bump .builder__plan, .motion .builder.is-bump .builder__amount { animation: gt-bump .35s ease; }

@media (max-width: 1100px) {
  .paper--l, .paper--r { display: none; }
  .rpx__desk .pin--a, .rpx__desk .pin--b { left: 24px; }
  .rpx__desk .pin--c, .rpx__desk .pin--d { left: auto; right: 24px; }
  .rpx__desk .pin::after { display: none; }
}
@media (max-width: 1000px) {
  .tour__grid { grid-template-columns: minmax(0, 1fr); }
  .tour__frame { display: none; }
  .tour__inline { display: block; margin-top: 20px; }
  .tour__inline .mp { box-shadow: 0 30px 60px -40px rgba(24,48,20,.5); border: 1px solid var(--line); }
  .tour__step, .tour__step:first-child { min-height: 0; padding: 36px 0; }
  .motion .tour__step:not(.is-active) { opacity: 1; }
  .builder { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rpx { padding-top: 40px; }
  .rpx__sub { font-size: 16px; }
  .rpx__ctas .btn { flex: 1 1 auto; }
  .rpx__stage { height: auto; padding: 24px 0 28px; }
  .rpx__desk { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .paper--f { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: 100%; transform: rotate(-1deg); margin-bottom: 8px; }
  .rpx__desk .pin { position: relative; left: auto !important; right: auto !important; top: auto !important; }
  .motion .stage .pin { opacity: 1; }
  .mp { padding: 22px 18px; }
  .mp__big { font-size: 48px; }
  .mp__body { padding: 18px 18px 22px; }
  .mp__coverrow, .mp__split, .mp__split--even { grid-template-columns: minmax(0, 1fr); }
  .mp__split .mp__donut { display: flex; justify-content: center; }
  .builder__q, .builder__out { padding: 24px; }
  .builder__price { flex-direction: column; align-items: flex-start; }
}

/* responsive fixes (device sweep) */
/* homepage hero on phones: card first, labels in a tidy row below it, never on top of it */
@media (max-width: 600px) {
  .hero__stage { height: auto; padding: 24px 0 40px; }
  .hero__stage .stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero__stage .report { position: relative; left: auto; top: auto; transform: none; width: 100%; grid-column: 1 / -1; margin-bottom: 6px; }
  .motion .stage.is-in .report { animation-name: gt-rise; }
  .hero__stage .pin { position: relative; left: auto !important; right: auto !important; top: auto !important; }
  .hero__stage .stage__note { position: static; grid-column: 1 / -1; text-align: right; margin-top: 4px; }
}
/* sample report on tablets: one page on the desk, labels in a grid below */
@media (max-width: 1100px) {
  .rpx__stage { height: auto; padding: 28px 0 36px; }
  .rpx__desk { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 620px; }
  .paper--f { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: 100%; max-width: 560px; justify-self: center; transform: rotate(-1deg); margin-bottom: 10px; }
  .rpx__desk .pin { position: relative; left: auto !important; right: auto !important; top: auto !important; display: grid; }
  .motion .rpx__desk .pin { opacity: 1; }
}
@media (max-width: 600px) {
  .motion .stage .report, .motion .stage.is-in .report { transform: none; }
}
@media (max-width: 420px) {
  .report__head { flex-wrap: wrap; }
  .report__head > div { flex: 1 1 calc(100% - 48px); min-width: 0; }
  .report__chip { order: 3; margin-left: 38px; }
}

/* laptops (short screens): keep the visual in the first screen */
@media (min-width: 1001px) and (max-height: 960px) {
  .hero { padding-top: 34px; }
  .hero__title { font-size: clamp(46px, min(7.4vw, 10vh), 96px); }
  .pillars { margin-top: 18px; }
  .hero__sub { margin-top: 12px; font-size: 17px; }
  .hero__ctas { margin-top: 18px; }
  .hero__micro { margin-top: 10px; }
  .hero__trust { margin-top: 20px; flex-direction: row; gap: 26px; }
  .hero__trust > p { white-space: nowrap; }
  .logos__row--hero { gap: 10px 34px; flex-wrap: nowrap; }
  .logos__row--hero img { transform: scale(.6); }
  .hero__stage { margin-top: 22px; }
  .rpx { padding-top: 34px; }
  .rpx__title { font-size: clamp(44px, min(7vw, 10vh), 92px); margin-top: 14px; }
  .rpx__sub { margin-top: 14px; font-size: 17px; }
  .rpx__ctas { margin-top: 20px; }
  .rpx__stage { margin-top: 22px; }
}
@media (min-width: 1001px) and (max-height: 960px) {
  .doors__stage { min-height: 0; padding: 36px 28px 48px; }
  .tour__sticky { height: min(600px, calc(100vh - var(--header) - 56px)); top: calc(var(--header) + 24px); }
}
/* big screens: use a bit more of the width */
@media (min-width: 1700px) {
  .container { max-width: 1320px; }
  .hero__title { font-size: clamp(46px, 5.6vw, 112px); }
  .rpx__title { font-size: clamp(44px, 5.4vw, 104px); }
  .paper--f { transform: translateX(-50%) rotate(-1.2deg) scale(.78); }
  .paper--l { transform: translateX(calc(-50% - 290px)) rotate(-7deg) scale(.64); }
  .paper--r { transform: translateX(calc(-50% + 290px)) rotate(6deg) scale(.64); }
  .rpx__desk .pin--a { left: calc(50% - 600px); }
  .rpx__desk .pin--b { left: calc(50% - 620px); }
  .rpx__desk .pin--c, .rpx__desk .pin--d { left: calc(50% + 400px); }
  .rpx__stage { height: 720px; }
}
/* very large screens (27" and up): scale the whole page like a comfortable browser zoom */
@media (min-width: 2200px) { body { zoom: 1.25; } }
.pillars + .hero__ctas { margin-top: 28px; }

/* ==========================================================================
   Platform page
   ========================================================================== */
.pf-hero { position: relative; padding-top: 56px; overflow: hidden; }
.pf-hero__copy { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--ink-3); }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--green); }
.pf-hero__title { margin-top: 18px; font-size: clamp(44px, 6.6vw, 88px); line-height: .98; letter-spacing: -0.045em; text-wrap: balance; }
.pf-hero__def { margin-top: 22px; max-width: 640px; font-size: 18px; color: var(--ink-2); text-wrap: balance; }
.pf-hero__def strong { color: var(--ink); font-weight: 600; }
.pf-hero__stage { position: relative; margin-top: 44px; padding-bottom: 64px; }
.pf-hero__stage > .fields { position: absolute; inset: 120px 0 0; width: 100%; height: calc(100% - 120px); }
.pf-hero__stage::before { content: ""; position: absolute; inset: 120px 0 auto; height: 30%; background: linear-gradient(var(--bg), rgba(246,246,241,0)); z-index: 1; pointer-events: none; }
.pf-hero__stage .container { position: relative; z-index: 2; }
.pf-shot { max-width: 1000px; margin: 0 auto; box-shadow: 0 50px 90px -50px rgba(24,48,20,.6), 0 14px 30px -18px rgba(24,48,20,.3); }
.pf-shot figcaption { padding: 8px 14px; font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--line); background: #fafaf7; }
.pf-facts { padding: 56px 0; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.facts div { padding: 18px 20px 0 0; }
.facts div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.facts dt { font-size: 12px; color: var(--ink-3); }
.facts dd { margin: 6px 0 0; font-family: var(--head); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; }

.pf-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; padding: 56px 0; }
.pf-row + .pf-row { border-top: 1px solid var(--line); }
.pf-row--flip .pf-row__text { order: 2; }
.pf-row__k { font-size: 13px; font-weight: 500; color: var(--green); }
.pf-row__h { margin-top: 10px; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -0.035em; }
.pf-row__text > p:not(.pf-row__k) { margin-top: 14px; color: var(--ink-2); font-size: 16px; }
.pf-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.pf-list li { display: flex; gap: 10px; align-items: baseline; }
.pf-list li::before { content: "✓"; color: var(--green); font-weight: 700; font-size: 12px; }
.pf-row__art .app { box-shadow: 0 40px 70px -44px rgba(24,48,20,.5); }
.pf-sheet .mp { box-shadow: 0 40px 70px -44px rgba(24,48,20,.5); border: 1px solid var(--line); }

.mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.mod { padding: 28px 28px 30px 0; border-bottom: 1px solid var(--line); }
.mod:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--line); }
.mod__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mint); color: var(--green); }
.mod__ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mod h3 { margin-top: 16px; font-size: 20px; letter-spacing: -0.02em; }
.mod p { margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.mod ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mod li { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #f1f3ee; color: var(--ink-2); }

.cmp-wrap { max-width: 860px; margin: 0 auto; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-family: var(--head); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; vertical-align: bottom; }
.cmp thead th span { display: block; margin-top: 4px; font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.cmp tbody th { font-weight: 500; color: var(--ink-2); width: 38%; }
.cmp b { font-family: var(--head); font-size: 22px; letter-spacing: -0.03em; }
.cmp .is-us { background: #f3f9ee; }
.cmp__ctas { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pf-cta { border-radius: 24px; background: var(--ink); color: #fff; padding: 44px 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.pf-cta h2 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.035em; }
.pf-cta p { margin-top: 8px; color: #c9d1cb; }

@media (max-width: 1000px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts div:nth-child(n+3) { padding-top: 22px; }
  .pf-row { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px 0; }
  .pf-row--flip .pf-row__text { order: 0; }
  .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .mod:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .pf-hero { padding-top: 36px; }
  .pf-hero__def { font-size: 16px; }
  .pf-hero__stage { margin-top: 32px; padding-bottom: 36px; }
  .facts dd { font-size: 16px; }
  .mods { grid-template-columns: minmax(0, 1fr); }
  .mod:nth-child(even) { padding-left: 0; border-left: 0; }
  .mod { padding-right: 0; }
  .cmp th, .cmp td { padding: 12px 10px; font-size: 13px; }
  .cmp thead th { font-size: 16px; }
  .cmp thead th span { font-size: 11px; }
  .cmp b { font-size: 17px; }
  .pf-cta { flex-direction: column; align-items: flex-start; padding: 30px 24px; }
}

/* "One place for your ESG" as part of the walk */
.door__inline { display: none; }
@media (min-width: 1001px) {
  /* nothing pins: the text keeps flowing, the app screen rides along beside it */
  .doors { align-items: start; }
  .doors__list { gap: 0; padding: 0; }
  .door { border-left-color: var(--line); min-height: 44vh; padding-bottom: 28px; }
  .door:last-child { min-height: 0; }
  .door::before { content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 100%; background: var(--green); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .15s linear; }
  .door.is-active { border-left-color: var(--line); }
  .door__body { display: block; transition: opacity .4s ease; }
  .door:not(.is-active) .door__body { opacity: .38; }
  .door:not(.is-active) .door__ico { opacity: .6; }
  .doors__stage { position: sticky; top: calc(50vh - var(--sh, 560px) / 2 + var(--header) / 2); align-items: center; }
  .doors__panel { transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
  .doors__panel[hidden] { display: block; position: absolute; left: 36px; right: 36px; opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden; }
  .doors__stage .doors__panel:not([hidden]) { opacity: 1; transform: none; }
}
@media (max-width: 1000px) {
  .door__body { display: block; }
  .door__inline { display: block; margin: 6px 0 26px; }
  .door__inline .app { box-shadow: 0 30px 60px -40px rgba(24,48,20,.5); }
  .door button { cursor: default; }
  .door .door__t { color: var(--ink); }
  .door { border-left-color: var(--green); }
  .doors__stage { display: none; }
}

/* =====================================================================
   1Arc on the greentally.ai page system · Arcus blue · the road
   ===================================================================== */
:root{--green:#1456f0;--green-ink:#0f3fb8;--leaf:#5b8cff;--mint:#e6eefe;--ok:#1f7a4c;--ok-bg:#e7f4ec;--arcus:#1456f0}
:focus-visible{outline-color:rgba(20,86,240,.35)}
::selection{background:#d6e2fd}
canvas.sprite{image-rendering:pixelated;display:block}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-tile{width:32px;height:32px;border-radius:9px;background:var(--arcus);color:#fff;display:grid;place-items:center;flex:none}
.logo-tile .mark{width:74%;height:74%;display:block}
.logo-word{font:600 21px/1 var(--head);letter-spacing:-.02em}
.tag--ok{background:var(--ok-bg);color:var(--ok)}
.tag--blue{background:var(--mint);color:var(--green-ink)}
.pin__e{color:var(--ok)}
.ov__ico--bank{background:#e6eefe;color:#1456f0}
.ov__ico--inv{background:#e7f4ec;color:#1f7a4c}
.ov__ico--vat{background:#fdf3d8;color:#9a6a00}
.ov__ico--bill{background:#f1efe9;color:#3a3934}
.arcus-ic{width:28px;height:24px;image-rendering:pixelated}

/* hero stage: one arc, Arcus on top */
.hero__stage .arcs{position:absolute;inset:0;width:100%;height:100%;display:block}
.arcs path{fill:none}
.hero__stage::before{height:30%}

/* bank logos */
.banks li{display:flex;align-items:center;gap:8px;font:600 14px var(--font);color:#7a7f78}
.banks img{width:22px;height:22px;transform:none !important;filter:brightness(0) opacity(.5)}
.banks .tx{font:700 15px var(--head);letter-spacing:-.01em;color:#7a7f78}
.logos__row--hero.banks{gap:12px 30px}

/* ---------- the road ---------- */
main{position:relative}
.journey{position:relative;overflow-x:clip}
.journey__path{position:absolute;left:0;right:0;top:0;pointer-events:none;z-index:0}
.journey__path svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.road{fill:none;stroke:#e6e7e0;stroke-width:16;stroke-linecap:round}
.road-dash{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:8 10;stroke-linecap:round}
.path-ink{fill:none;stroke:var(--arcus);stroke-width:4;stroke-linecap:round}
.guide{position:absolute;left:0;top:0;width:80px;height:68px;z-index:4;will-change:transform;pointer-events:none}
.journey .container{position:relative;z-index:1}
.arcus-start{width:120px;height:30px;margin:24px auto 0}
.station{position:relative;display:grid;grid-template-columns:minmax(0,330px) minmax(0,420px);gap:clamp(28px,4vw,56px);align-items:center;width:fit-content;max-width:100%;padding:clamp(44px,8vh,90px) 0}
.station--r{margin-left:auto}
.station__copy h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;margin:6px 0 10px}
.station__copy p:not(.how__step){color:var(--ink-2);font-size:16px}
.station__anchor{position:absolute;top:50%;width:1px;height:1px}
.station--l .station__anchor{left:calc(100% + clamp(60px,8vw,130px))}
.station--r .station__anchor{right:calc(100% + clamp(60px,8vw,130px))}
.mpin{position:absolute;left:-14px;top:-40px;width:28px;height:37px;overflow:visible}
.mpin path{fill:#fff;stroke:var(--ink);stroke-width:2}
.mpin circle{fill:#e6e7e0}
.is-done .mpin path{fill:var(--arcus);stroke:var(--arcus)}
.is-done .mpin circle{fill:#fff}
.station__art .card{width:min(100%,420px)}
.card__title span{color:var(--ink-3)}
.said{font-size:14.5px;line-height:1.5;background:var(--mint);border-radius:14px 14px 4px 14px;padding:12px 14px;margin:10px 0 6px;color:var(--ink)}
.oks{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.oks li{font-size:12.5px;padding:3px 9px;border-radius:999px;background:var(--ok-bg);color:var(--ok)}
.oks li::before{content:"✓ "}
.card__act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.card__note{margin-top:10px;font-size:12.5px;color:var(--ink-3)}
.cbars{display:flex;align-items:flex-end;gap:5px;height:110px;margin-top:12px;border-bottom:1px solid var(--line-2)}
.cbars i{flex:1;height:var(--h);background:var(--arcus);border-radius:3px 3px 0 0}
.cbars i.f{background:repeating-linear-gradient(135deg,#c9d7fb 0 4px,#eef3fe 4px 8px);border:1px dashed #7ea2f6;border-bottom:0}
.cbars__x{display:flex;justify-content:space-between;font:12px var(--mono);color:var(--ink-3);margin-top:6px}
.save{margin-top:12px;font-size:14px;color:var(--ink-2)}
.save b{font:600 28px var(--head);letter-spacing:-.03em;color:var(--ok);margin-right:6px}
.reports{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.reports span{font-size:12.5px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2)}
.motion .late{opacity:0;transform:translateY(6px);transition:opacity .4s ease .9s,transform .5s cubic-bezier(.2,.8,.2,1) .9s}
.motion .is-done .late{opacity:1;transform:none}
.midcta{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:720px;margin:6px auto;padding:14px 14px 14px 26px;background:var(--paper);border:1px solid var(--line);border-radius:999px;box-shadow:0 20px 40px -32px rgba(19,24,20,.4)}
.midcta p{font:600 18px var(--head);letter-spacing:-.02em}

/* pricing: Done for you first */
.plans--first .plan--featured{order:0}

/* contact */
.contact__arcus{width:90px;height:auto;image-rendering:pixelated;margin-top:22px}
.lead-form .waitlist__success{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:var(--ok-bg);color:var(--ink);outline:none}
.lead-form .waitlist__success canvas{flex:none}
.waitlist__status.is-error{color:#b42318}
.waitlist__input[aria-invalid="true"]{border-color:#b42318}

/* sticky CTA on phones */
.stickycta{display:none}
@media (max-width:760px){
 .stickycta{display:flex;position:fixed;left:16px;right:16px;bottom:14px;z-index:60;height:52px;align-items:center;justify-content:center;border-radius:12px;
  background:var(--ink);color:#fff;font:500 16px var(--font);text-decoration:none;box-shadow:0 14px 30px -12px rgba(19,24,20,.6);transform:translateY(130%);transition:transform .3s ease}
 .stickycta.is-on{transform:none}
 .midcta{flex-direction:column;align-items:stretch;text-align:center;border-radius:18px;padding:18px}
}
@media (max-width:860px){
 .station,.station--r{grid-template-columns:1fr;width:auto;margin-left:0;padding:40px 0 40px 44px;gap:20px}
 .station--l .station__anchor,.station--r .station__anchor{left:-2px;right:auto;top:52px}
 .guide{width:48px;height:41px}
 .mpin{width:22px;height:29px;left:-11px;top:-30px}
 .road{stroke-width:10}
 .arcus-start{margin:20px 0 0 0;width:40px}
 .station__art .card{transform:none}
}
@media (max-width:560px){
 .banks img{width:18px;height:18px}
 .banks li{font-size:13px}
 .logos__row--hero.banks{gap:8px 18px}
}
/* legal pages */
.legal{max-width:760px;margin:0 auto;padding:56px 24px 96px}
.legal h1{font-size:clamp(36px,5vw,54px);margin-bottom:10px}
.legal .meta{font-size:14px;color:var(--ink-3);margin-bottom:28px}
.legal h2{font-size:24px;margin:36px 0 10px}
.legal p,.legal li{font-size:16px;line-height:1.65;color:var(--ink-2)}
.legal p+p{margin-top:12px}
.legal ul{margin:10px 0 0 20px;display:flex;flex-direction:column;gap:6px}
.legal b{color:var(--ink);font-weight:600}
.legal a{color:var(--green)}
.legal .nf{min-height:50vh;display:flex;flex-direction:column;justify-content:center;gap:14px}
.legal .nf canvas{width:100px;height:85px}
.legal .nf .btn-cta{display:inline-flex;align-self:flex-start;align-items:center;min-height:44px;padding:0 20px;border-radius:10px;background:var(--ink);color:#fff;text-decoration:none;margin-top:10px}
.bg-fx{display:none}
.banks li,.banks .tx{white-space:nowrap}
.arcus-start{margin-top:64px}
.contact__side{background:#eef2fd !important}
.pin__e--risk{color:#b42318}.pin__e--wait{color:#8a5a00}

/* the signature: 1, A and the arc drawn, then the name (from the Web Summit deck) */
.signoff-sec{padding:clamp(70px,12vh,140px) 0 clamp(30px,5vh,60px)}
.signoff__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.lock2{display:flex;align-items:center;justify-content:center;height:clamp(110px,14vw,180px);margin-bottom:18px;color:var(--ink)}
.lock2 .sig{height:clamp(80px,10.5vw,140px);width:auto;overflow:visible;will-change:transform;transform:translate(var(--dx,0px),24px) scale(1.7);transition:transform 1.2s cubic-bezier(.65,0,.2,1)}
.lock2 .sig path{fill:none;stroke:currentColor;stroke-width:36;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.lock2 .sig path.draw{opacity:1;stroke-dashoffset:0}
.lock2 .sig .s1.draw{transition:stroke-dashoffset .3s cubic-bezier(.5,0,.3,1)}
.lock2 .sig .s2.draw{transition:stroke-dashoffset .42s cubic-bezier(.45,0,.3,1)}
.lock2 .sig .s3.draw{stroke:var(--arcus);transition:stroke-dashoffset .4s cubic-bezier(.55,0,.15,1)}
.lock2 .wm{margin-left:24px;white-space:nowrap;opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-36px);will-change:transform,clip-path;
 transition:clip-path .9s cubic-bezier(.33,0,.2,1) .55s,transform .9s cubic-bezier(.33,0,.2,1) .55s,opacity .4s ease .55s}
.lock2 .wm span{display:block;font:600 clamp(56px,10vw,128px)/1.2 var(--head);letter-spacing:-.04em;color:var(--ink)}
.lock2.full .sig{transform:none}
.lock2.full .wm{opacity:1;clip-path:inset(0 0 0 -20px);transform:none}
.signoff__line{font:500 clamp(18px,1.8vw,24px)/1.4 var(--head);letter-spacing:-.02em;color:var(--ink-2);max-width:640px}
.signoff__line span{color:var(--arcus)}
.scene.resetting,.scene.resetting *{transition:none !important;animation:none !important}
html:not(.motion) .lock2 .sig{transform:none}
html:not(.motion) .lock2 .sig path{opacity:1;stroke-dashoffset:0}
html:not(.motion) .lock2 .wm{opacity:1;clip-path:none;transform:none}
@media (max-width:560px){.lock2{height:84px}.lock2 .sig{height:58px}.lock2 .wm{margin-left:12px}.lock2 .wm span{font-size:46px}}

/* ---------- contact form fix: no empty band, Arcus on the road, form centred ---------- */
.contact__side{padding:48px 44px 0 !important;display:flex;flex-direction:column}
.contact__side::after{display:none !important}
.contact__road{position:relative;margin-top:auto;padding-top:36px;height:120px}
.contact__road::before{content:"";position:absolute;left:-44px;right:-44px;bottom:28px;border-top:2px dashed rgba(20,86,240,.35)}
.contact__road .contact__arcus{position:absolute;left:0;bottom:30px;margin:0}
.lead-form{display:flex;flex-direction:column;justify-content:center;padding:48px 44px}
@media (max-width:900px){
 .contact{gap:0 !important}
 .contact__side{padding:32px 24px 0 !important}
 .contact__road{height:100px;padding-top:24px}
 .contact__road::before{left:-24px;right:-24px}
 .lead-form{padding:28px 24px 32px}
}

/* SME eyebrow above the hero title */
.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:6px 12px 6px 10px;border-radius:999px;background:var(--mint);color:var(--green-ink);font-size:13px;font-weight:500;letter-spacing:.01em}
.hero__eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}

/* ================= v9: connection chips instead of bank logos ================= */
.conn{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px auto 0;padding:0;list-style:none}
.conn li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:14px;color:var(--ink-2)}
.conn svg{width:18px;height:18px;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){.conn{gap:8px}.conn li{font-size:13px;padding:6px 12px 6px 8px}}

/* ================= v9: visual stop cards ================= */
.viz{--b:var(--green);--okc:#1f7a4c;font-size:14px;color:var(--ink)}
.viz .i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.viz small{display:block;font-size:12px;color:var(--ink-3);line-height:1.35}
.viz .vh{display:flex;align-items:center;gap:6px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.viz .vh .i{width:14px;height:14px}
/* animation primitives: .a fades in, .draw draws, .hl highlights — when the stop comes into view */
.viz .a{transition:opacity .45s ease var(--d,0s),transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.motion .station:not(.is-near) .viz .a{opacity:0;transform:translateY(8px)}
.viz .draw{fill:none;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.5,0,.2,1) var(--d,.2s)}
.motion .station:not(.is-near) .viz .draw{stroke-dashoffset:1}
.viz .vstamp{position:absolute;padding:5px 10px;border:2px solid var(--okc);border-radius:8px;color:var(--okc);font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.85);transform:rotate(-6deg)}
.motion .viz .vstamp.late{transform:rotate(-6deg) scale(1.4);transition:opacity .25s ease .9s,transform .35s cubic-bezier(.3,1.6,.5,1) .9s}
.motion .is-done .viz .vstamp.late{transform:rotate(-6deg) scale(1)}

/* 1 ask */
.vask__note{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:999px;background:var(--mint)}
.vask__mic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--b);color:#fff}
.vask__wave{flex:1;display:flex;align-items:center;gap:3px;height:28px}
.vask__wave i{flex:1;height:calc(var(--h)*1%);border-radius:2px;background:var(--b);opacity:.75;transform-origin:center}
.motion .station.is-near .vask__wave i{animation:vwave 1.1s ease-in-out 2}
.vask__wave i:nth-child(3n){animation-delay:.15s}.vask__wave i:nth-child(3n+1){animation-delay:.3s}
@keyframes vwave{50%{transform:scaleY(.35)}}
.vask__len{font:12px var(--mono);color:var(--green-ink)}
.vask__said{margin:12px 4px 0;font-size:14.5px;color:var(--ink-2);font-style:italic}
.vask__split{display:block;width:100%;height:36px;margin-top:6px}
.vask__split path{stroke:var(--b);stroke-width:1.5;opacity:.6;vector-effect:non-scaling-stroke}
.vask__tasks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vtask{padding:12px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:center}
.vtask__ico{display:grid;place-items:center;width:36px;height:36px;margin:0 auto 8px;border-radius:10px;background:var(--mint);color:var(--b)}
.vtask b{display:block;font-size:13px;line-height:1.25}
.vtask em{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;background:#f3f4ef;font:normal 11.5px var(--mono);color:var(--ink-2)}

/* 2 bills */
.vbill__mail{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.vbill__mail>.i{color:var(--b)}
.vbill__att{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:3px 8px;border-radius:6px;background:#fdecea;color:#b42318;font:500 11.5px var(--mono)}
.vbill__att .i{width:13px;height:13px}
.vpaper{position:relative;margin:12px 6px 0;padding:16px 16px 14px;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 0 #e9eae4,0 2px 0 #fff,0 3px 0 #e3e4de,0 18px 30px -22px rgba(0,0,0,.35);font-family:var(--mono);font-size:11.5px;overflow:hidden}
.vpaper__head{display:flex;justify-content:space-between;align-items:flex-start;font-size:11px;line-height:1.3;margin-bottom:10px}
.vpaper__head b{font-family:var(--head);font-size:13px;letter-spacing:.02em}
.vpaper__head span{text-align:right;color:var(--ink-3)}
.vpaper__lines{display:grid;gap:4px;margin-bottom:10px}
.vpaper__lines i{display:block;height:5px;border-radius:3px;background:#eef0ea}.vpaper__lines i:nth-child(2){width:70%}.vpaper__lines i:nth-child(3){width:45%}
.vpaper__row,.vpaper__iban{position:relative;display:flex;justify-content:space-between;gap:8px;padding:5px 6px;border-radius:4px}
.vpaper__row--tot{font-weight:700;border-top:1px dashed #d8dad3;margin-top:4px;padding-top:7px}
.vpaper__iban{color:var(--ink-3);font-size:10.5px;margin-top:6px}
.vpaper .hl{transition:background .3s ease var(--d),box-shadow .3s ease var(--d)}
.vpaper .hl::after{content:"";position:absolute;inset:0;border-radius:4px;border:1.5px solid var(--b);opacity:0;transition:opacity .25s ease var(--d)}
.motion .station.is-near .vpaper .hl,.vpaper .hl{background:rgba(20,86,240,.07)}
.motion .station.is-near .vpaper .hl::after{opacity:1}
.motion .station:not(.is-near) .vpaper .hl{background:transparent}
.vscan{position:absolute;left:0;right:0;top:0;height:40px;background:linear-gradient(rgba(20,86,240,0),rgba(20,86,240,.14),rgba(20,86,240,0));pointer-events:none;opacity:0}
.motion .station.is-near .vscan{animation:vscan 1.4s ease-in-out .1s 1}
@keyframes vscan{0%{opacity:1;transform:translateY(-40px)}100%{opacity:1;transform:translateY(240px)}}
.vpaper .vstamp{right:12px;top:44px}
.vchips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.vchips li{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 7px;border-radius:999px;background:var(--ok-bg);color:var(--okc);font-size:12.5px;font-weight:500}
.vchips .i{width:14px;height:14px;stroke-width:2.4}

/* 3 bank */
.vbank__cols{display:grid;grid-template-columns:1fr 40px 1fr;align-items:end}
.vbank__wires{width:40px;height:200px;align-self:end}
.vbank__wires path{stroke:var(--okc);stroke-width:1.6;vector-effect:non-scaling-stroke}
.vbank__wires path.q{stroke:#c47f00;stroke-dasharray:.06 .04}
.motion .station:not(.is-near) .vbank__wires path.q{opacity:0}
.vbank__wires path.q{transition:opacity .4s ease 1.3s}
.vln,.vdoc{height:44px;margin-top:6px;padding:6px 10px;border-radius:10px;display:flex;flex-direction:column;justify-content:center}
.vln{background:#f6f7f3;border:1px solid var(--line)}
.vln b{font:600 13px var(--mono)}
.vdoc{background:var(--ok-bg);border:1px solid #cfe8d9}
.vdoc b{font-size:13px;color:var(--okc)}
.vln--q{border-color:#f0d9a8;background:#fff8ea}
.vdoc--q{background:#fff8ea;border:1.5px dashed #e3b55c}.vdoc--q b{color:#8a5a00}
.vprog{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2)}
.vprog__bar{flex:0 0 38%;height:6px;border-radius:3px;background:#eceee8;overflow:hidden}
.vprog__bar i{display:block;height:100%;width:99%;background:var(--okc);border-radius:3px;transition:width 1.4s cubic-bezier(.4,0,.2,1) .4s}
.motion .station:not(.is-near) .vprog__bar i{width:0}

/* 4 get paid */
.vpaid__inv{position:relative;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;background:#f6f7f3;border:1px solid var(--line)}
.vpaid__inv b{display:block;font:600 26px var(--head);letter-spacing:-.02em;margin-top:2px}
.vpaid__inv .vstamp{position:static;font-size:14px;padding:6px 14px}
.vtl{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px}
.vtl__track{position:absolute;left:12.5%;right:12.5%;top:17px;height:3px;border-radius:2px;background:#e6e8e1}
.vtl__track i{display:block;height:100%;width:100%;background:var(--b);border-radius:2px;transform-origin:left;transition:transform 1.6s cubic-bezier(.4,0,.2,1) .2s}
.motion .station:not(.is-near) .vtl__track i{transform:scaleX(0)}
.vtl__n{position:relative;text-align:center}
.vtl__n span{display:grid;place-items:center;width:36px;height:36px;margin:0 auto 8px;border-radius:50%;background:#fff;border:2px solid var(--b);color:var(--b)}
.vtl__n b{display:block;font-size:12.5px}
.vtl__n--ok span{background:var(--okc);border-color:var(--okc);color:#fff}

/* 5 pay */
.vpay__bills{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.vbl{position:relative;padding:10px 8px 8px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:center}
.vbl>.i{color:var(--ink-3);display:block;margin:0 auto 4px}
.vbl b{display:block;font-size:12px}
.vbl small{font-family:var(--mono);font-size:11px}
.vbl__ok{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--okc);color:#fff}
.vbl__ok .i{width:12px;height:12px;stroke-width:3}
.vpay__held{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:10px;background:#fdecea;color:#b42318}
.vpay__held b{display:block;font-size:13px}
.vpay__held small{color:#9a3a2e}
.vpay__flow{height:24px;display:flex;justify-content:center}
.vpay__flow i{width:2px;background:repeating-linear-gradient(var(--b) 0 4px,transparent 4px 8px)}
.vpay__run{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:var(--mint);border:1px solid #cfdcfb}
.vpay__run b{display:block;font:600 24px var(--head);letter-spacing:-.02em}
.vpay__bank{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:10px;font-size:13px;color:var(--ink-2)}
.vpay__bank .i{color:var(--b)}

/* 6 cash */
.vcash__top{display:flex;justify-content:space-between;align-items:flex-end}
.vcash__top b{display:block;font:600 24px var(--head);letter-spacing:-.02em}
.vcash__leg{display:flex;gap:12px;font-size:12px;color:var(--ink-3)}
.vcash__leg span::before{content:"";display:inline-block;width:14px;height:0;border-top:2.5px solid var(--b);vertical-align:middle;margin-right:5px}
.vcash__leg .k2::before{border-top-style:dashed}
.vcash__chart{display:block;width:100%;height:auto;margin-top:8px;overflow:visible}
.vcash__chart .grid path{stroke:#eceee8;stroke-width:1}
.vcash__area{fill:rgba(20,86,240,.08)}
.vcash__band{fill:rgba(20,86,240,.07)}
.vcash__act{stroke:var(--b);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.vcash__fc{stroke:var(--b);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;opacity:.9}
.vcash__fc{mask:none}
.vcash__safe{stroke:#b42318;stroke-width:1;stroke-dasharray:3 3;opacity:.6}
.vcash__safet{font:10px var(--mono);fill:#b42318;opacity:.8}
.vcash__today{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3}
.vcash__chart text{font:10.5px var(--mono);fill:var(--ink-3)}
.vcash__low{fill:#fff;stroke:#c47f00;stroke-width:2.5}
.vcash__call{margin-top:6px;padding:10px 12px;border-left:3px solid #c47f00;background:#fff8ea;border-radius:0 10px 10px 0}
.vcash__call b{font-size:13.5px}

/* 7 savings */
.vsave__item{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.vsave__box{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#f4ead9;color:#8a5a00}
.vsave__box .i{width:24px;height:24px}
.vsave__item b{font-size:15px}
.vbar{display:grid;grid-template-columns:110px 1fr 48px;align-items:center;gap:10px;margin-top:8px;font-size:13px}
.vbar em{font-style:normal;font:11px var(--mono);color:var(--ink-3);margin-left:4px}
.vbar__t{height:22px;border-radius:6px;background:#f3f4ef;overflow:hidden}
.vbar__t i{display:block;height:100%;width:var(--w);background:#c9ccc4;border-radius:6px;transform-origin:left;transition:transform .9s cubic-bezier(.3,0,.2,1) var(--d)}
.motion .station:not(.is-near) .vbar__t i{transform:scaleX(0)}
.vbar b{font:600 14px var(--mono);text-align:right}
.vbar:nth-of-type(3) .vbar__t i{background:#9db8f7}
.vbar--best .vbar__t i{background:var(--okc)}.vbar--best b{color:var(--okc)}
.vsave__sum{display:flex;align-items:center;gap:14px;margin-top:16px;padding:12px 16px;border-radius:14px;background:var(--ok-bg)}
.vsave__sum b{font:600 30px var(--head);letter-spacing:-.03em;color:var(--okc)}
.vsave__sum span{font-size:13px;color:var(--ink-2);line-height:1.35}

/* 8 close */
.vcal{padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.vcal__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.vlock{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);font-size:12.5px}
.vlock em{font-style:normal;color:var(--okc);font-weight:600}
.is-done .vlock{color:var(--okc)}
.vcal__g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.vcal__g i{display:grid;place-items:center;height:24px;border-radius:6px;font:normal 11px var(--mono);background:var(--ok-bg);color:var(--okc)}
.vcal__g i.pad{background:none}
.motion .station:not(.is-near) .vcal__g i.a{opacity:1;transform:none;background:#f3f4ef;color:var(--ink-3)}
.vcal__g i.a{transition:background .3s ease var(--d),color .3s ease var(--d)}
.vrep{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.vrep__c{padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;min-height:84px;display:flex;flex-direction:column;gap:6px}
.vrep__c b{font:600 18px var(--head)}
.vrep__c em{font-style:normal;font-size:11px;color:var(--green-ink);background:var(--mint);border-radius:999px;padding:2px 7px;align-self:flex-start}
.vmini{flex:1;display:flex;align-items:flex-end;gap:4px}
.vmini--bars i{flex:1;height:var(--h);background:var(--b);opacity:.8;border-radius:2px 2px 0 0}
.vmini--bs{flex-direction:row;align-items:stretch}
.vmini--bs i{flex:1;border-radius:4px;background:linear-gradient(var(--b) 0 55%,#9db8f7 55%)}
.vmini--bs i+i{background:linear-gradient(#c9ccc4 0 30%,var(--okc) 30%)}
.vca{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:13px;font-weight:500;color:var(--okc)}

@media (max-width:520px){
 .vask__tasks{gap:6px}.vtask{padding:10px 6px}.vtask b{font-size:12px}
 .vpay__bills{grid-template-columns:repeat(2,1fr)}
 .vbar{grid-template-columns:86px 1fr 44px}
 .vrep{grid-template-columns:1fr 1fr}.vrep__c--vat{grid-column:span 2}
 .vbill__att{margin-left:0}
}
.vask__wave i{display:block}
.vtask em{white-space:nowrap;font-size:10.5px;padding:2px 6px}
.vpaper .vstamp{top:60px;right:14px}
.contact__inv{font-size:14px !important;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.7);border:1px solid #d6e0f8}
.contact__inv a{color:var(--green);font-weight:500}

/* ================= v10: bills as a highlighter pass + posted entry ================= */
.vbill .vpaper{padding:16px 16px 12px}
.vbill .vpaper__row{padding:5px 0;border-radius:0}
.vbill .vpaper__iban{padding:6px 0 0}
.mk{background:linear-gradient(100deg,rgba(255,214,10,0) 0,rgba(255,214,10,.55) 4%,rgba(255,214,10,.42) 50%,rgba(255,214,10,.55) 94%,rgba(255,214,10,0) 100%) no-repeat 0 60%/100% 78%;color:inherit;padding:0 3px;margin:0 -3px;border-radius:3px;
  transition:background-size .45s cubic-bezier(.5,0,.2,1) var(--d,0s)}
.motion .station:not(.is-near) .mk{background-size:0% 78%}
.vbill .vstamp{top:auto;bottom:12px;right:14px}
.vflow{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0;font-size:12px;color:var(--ink-3)}
.vflow .i{width:14px;height:14px;color:var(--okc);stroke-width:2.6}
.vflow::before,.vflow::after{content:"";flex:1;height:1px;background:repeating-linear-gradient(90deg,#cfd3ca 0 4px,transparent 4px 8px)}
.vjrnl{padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 24px -20px rgba(0,0,0,.35)}
.vjrnl .vh{margin-bottom:6px}
.vjrnl__r{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:10px;padding:6px 0;font-size:13.5px}
.vjrnl__r+.vjrnl__r{border-top:1px solid #f0f1ec}
.vjrnl__r .dot{width:10px;height:10px;border-radius:3px;background:var(--c)}
.vjrnl__r b{font:600 13px var(--mono)}
.vjrnl__ok{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 0;padding-top:8px;border-top:1px solid #f0f1ec;font-size:12px;color:var(--okc);font-weight:500}
.vjrnl__ok span{display:inline-flex;align-items:center;gap:4px}
.vjrnl__ok .i{width:13px;height:13px;stroke-width:2.6}

/* ================= v10: bank as a banking-app feed snapping to documents ================= */
.vbank2__head{display:grid;grid-template-columns:40px 1fr 44px;align-items:center;gap:12px;position:relative;padding-bottom:12px;border-bottom:1px solid #f0f1ec}
.vbank2__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--mint);color:var(--b)}
.vbank2__head b{font-size:14.5px}
.vring{width:44px;height:44px;transform:rotate(-90deg)}
.vring circle{fill:none;stroke:#eceee8;stroke-width:5}
.vring .vring__v{stroke:var(--okc);stroke-linecap:round;stroke-dasharray:1;--d:.3s;transition-duration:1.8s}
.vring__t{position:absolute;right:0;width:44px;top:0;height:44px;display:grid;place-items:center;font:10px var(--mono);color:var(--ink-3);line-height:1;text-align:center}
.vring__t b{display:block;font:600 11px var(--mono);color:var(--ink)}
.vring__t{display:flex;flex-direction:column;justify-content:center}
.vfeed{display:grid;gap:4px;margin-top:8px}
.vrow{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto 26px 96px;align-items:center;gap:8px;padding:8px 6px;border-radius:12px;transition:background .4s ease calc(var(--d) + .5s)}
.vav{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c);color:#fff;font:600 13px var(--head)}
.vrow__n b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrow__n small{transition:color .3s ease calc(var(--d) + .5s)}
.vamt{font:600 13px var(--mono);text-align:right}
.vamt--in{color:var(--okc)}
.vlink{height:2px;background:#e3e5de;border-radius:1px;overflow:hidden}
.vlink i{display:block;height:100%;background:var(--okc);transform-origin:left;transition:transform .45s cubic-bezier(.5,0,.2,1) var(--d)}
.vrow__doc{display:flex;align-items:center;gap:6px;min-width:0;transition:opacity .35s ease calc(var(--d) + .3s),transform .45s cubic-bezier(.2,.8,.2,1) calc(var(--d) + .3s)}
.vrow__doc small{font-size:11px;line-height:1.25}
.vth{flex:none;position:relative;display:flex;flex-direction:column;gap:2px;justify-content:center;width:22px;height:28px;padding:0 4px;border-radius:3px;background:#fff;border:1px solid #d9dcd3;box-shadow:0 2px 4px -2px rgba(0,0,0,.2)}
.vth i{display:block;height:2px;border-radius:1px;background:#cfd3ca}.vth i:first-child{background:var(--b);width:70%}
.vth--bill i:first-child{background:#e17055}.vth--stripe i:first-child{background:#635bff}
.vth--q{align-items:center;font:700 13px var(--head);color:#8a5a00;background:#fff8ea;border:1.5px dashed #e3b55c}
.vtick{position:absolute;right:-6px;top:-4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--okc);color:#fff;transition:transform .35s cubic-bezier(.3,1.6,.5,1) calc(var(--d) + .6s)}
.vtick .i{width:11px;height:11px;stroke-width:3.2}
.vrow--q .vtick{display:none}
.vrow--q{background:#fff8ea}
.vrow--q .vrow__n small{color:#8a5a00;font-weight:500}
.vrow--q .vlink i{background:#e3b55c}
.vrow:not(.vrow--q) .vrow__n small{color:var(--okc)}
.motion .station:not(.is-near) .vlink i{transform:scaleX(0)}
.motion .station:not(.is-near) .vrow__doc{opacity:0;transform:translateX(10px)}
.motion .station:not(.is-near) .vtick{transform:scale(0)}
.motion .station:not(.is-near) .vrow__n small{color:var(--ink-3)}
@media (max-width:520px){
 .vrow{grid-template-columns:30px minmax(0,1fr) auto;row-gap:6px}
 .vlink{display:none}
 .vrow__doc{grid-column:2/4}
}

/* ================= v10: founder, the one-place story ================= */
.founder__quote{margin:0;font:500 clamp(18px,1.6vw,21px)/1.5 var(--font);color:var(--ink);letter-spacing:-.01em}
.founder__quote::before{content:"“";display:block;font:700 56px/0.6 var(--head);color:var(--green);margin:12px 0 6px}
.mess{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.mess li{padding:6px 12px;border-radius:999px;border:1px dashed #c9ccc4;color:var(--ink-3);font-size:13.5px;text-decoration:line-through;text-decoration-color:rgba(180,35,24,.55);text-decoration-thickness:1.5px}
.mess .to{border:0;padding:0 2px;text-decoration:none;color:var(--ink-3)}
.mess .one{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--green);color:#fff;text-decoration:none;font-weight:600;padding:7px 14px 7px 8px}
.mess .one .logo-tile{width:22px;height:22px;border-radius:6px;background:#fff;color:var(--green);display:grid;place-items:center}
.mess .one .mark{width:15px;height:15px}
.founder__quote::before{content:none}
.founder__quote{margin-top:14px}
.vrow{grid-template-columns:32px minmax(0,1fr) auto 22px 84px}
@media (max-width:520px){
 .vrow{grid-template-columns:32px minmax(0,1fr) auto;row-gap:4px}
 .vlink{display:none}
 .vrow__doc{grid-column:2/4}
 .vrow__doc small{font-size:11.5px}
}

/* ================= v10: real Stripe / Xero logos in the connection chips ================= */
.conn__logo{gap:6px !important}
.conn__logo img{height:20px;width:auto;display:block}
.conn__logo img.xero{height:22px;width:22px;border-radius:50%}

/* ================= v10: hero product window ================= */
.appwin{position:relative;z-index:2;max-width:1120px;margin:0 auto;border-radius:16px;background:#fff;border:1px solid #e3e5de;box-shadow:0 50px 90px -40px rgba(15,40,110,.45),0 8px 20px -10px rgba(0,0,0,.12);overflow:hidden;transform-origin:50% 0;will-change:transform;text-align:left;font-size:13px}
.appwin .i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.appwin small{display:block;font-size:11.5px;color:var(--ink-3)}
.appwin__bar{display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;background:#f7f7f4;border-bottom:1px solid #ecede8}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#e1e3dc}
.url{flex:1;max-width:360px;margin:0 auto;padding:4px 12px;border-radius:7px;background:#fff;border:1px solid #ecede8;font:12px var(--mono);color:var(--ink-3);text-align:center}
.appwin__tag{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--green-ink);background:var(--mint);padding:3px 8px;border-radius:6px}
.appwin__body{display:grid;grid-template-columns:200px minmax(0,1fr) 290px;min-height:470px}
.aw-side{padding:14px 10px;border-right:1px solid #f0f1ec;background:#fbfbf9}
.aw-org{display:flex;align-items:center;gap:10px;padding:6px;margin-bottom:12px}
.aw-org__l{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#0f3fb8;color:#fff;font:600 13px var(--head)}
.aw-org b{font-size:13px}
.aw-nav{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.aw-nav li{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;color:var(--ink-2)}
.aw-nav li span{flex:1}
.aw-nav li.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid #eceee8}
.pill{font-style:normal;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--green);color:#fff}
.pill--n{background:#fff4dc;color:#8a5a00;font-weight:500;white-space:nowrap}
.aw-main{padding:20px 22px;min-width:0}
.aw-hi{margin:0;color:var(--ink-3);font-size:12.5px}
.aw-h{margin:4px 0 10px;font:600 18px var(--head);letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.aw-h span{font:600 11px var(--font);padding:2px 8px;border-radius:999px;background:var(--green);color:#fff}
.aw-h--sm{font-size:14.5px;margin-top:18px}
.aw-h span.ok{background:var(--ok-bg);color:var(--okc,#1f7a4c);font-weight:500}
.aw-need{display:grid;gap:8px}
.aw-n{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid #eceee8;border-radius:12px;background:#fff}
.aw-n b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-n__i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px}
.aw-n__i--b{background:var(--mint);color:var(--green)}.aw-n__i--r{background:#fdecea;color:#b42318}.aw-n__i--g{background:#fff4dc;color:#8a5a00}
.aw-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.aw-k{padding:10px 12px;border:1px solid #eceee8;border-radius:12px;position:relative}
.aw-k b{display:block;font:600 17px var(--head);letter-spacing:-.02em;margin-top:2px}
.aw-k em{font-style:normal;font-size:11px;color:var(--ink-3)}.aw-k em.up{color:#1f7a4c;font-weight:600}
.aw-k svg{position:absolute;right:10px;bottom:10px;width:70px;height:22px}
.aw-k path{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aw-done{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.aw-done li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;background:#f7faf8;color:var(--ink-2)}
.aw-done li .i{color:#1f7a4c;stroke-width:2.6;width:15px;height:15px}
.aw-done li span{flex:1;min-width:0}
.aw-done li b{color:var(--ink)}
.aw-done li em{font-style:normal;font-size:11.5px;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.aw-chat{display:flex;flex-direction:column;gap:10px;padding:14px;border-left:1px solid #f0f1ec;background:linear-gradient(#fbfcff,#f4f7fe)}
.aw-chat__h{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #e8ecf6}
.arc-av{width:30px;height:auto;image-rendering:pixelated}
.aw-chat__h b{font-size:13.5px}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;margin-right:5px;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.aw-msg{max-width:88%;padding:9px 12px;border-radius:14px;line-height:1.45}
.aw-msg--me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.aw-msg--ai{background:#fff;border:1px solid #e3e8f5;border-bottom-left-radius:4px}
.aw-draft{padding:10px 12px;border-radius:12px;background:#fff;border:1px dashed #b9c9f5}
.aw-draft p{margin:4px 0 8px;color:var(--ink-2);font-size:12.5px}
.aw-draft div{display:flex;gap:6px}
.aw-input{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid #e3e8f5;color:var(--ink-3)}
.aw-input span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff}
.aw-input .i{width:14px;height:14px}
.appwin .btn--sm{padding:6px 12px;font-size:12px;min-height:0;height:auto}
@media (max-width:1100px){.appwin__body{grid-template-columns:minmax(0,1fr) 280px}.aw-side{display:none}}
@media (max-width:760px){
 .hero__stage{padding:0 0 40px}
 .appwin{border-radius:14px;font-size:12.5px}
 .appwin__body{grid-template-columns:1fr;min-height:0}
 .aw-chat{border-left:0;border-top:1px solid #f0f1ec}
 .aw-main{padding:16px}
 .aw-kpis{grid-template-columns:1fr 1fr}.aw-k--hide{display:none}
 .aw-k svg{display:none}
 .url{display:none}.appwin__bar{justify-content:space-between}
 .aw-done li em{display:none}
 .aw-chat .aw-msg--me,.aw-chat .aw-input{display:none}
}

/* ================= v10: Arcus with a prop at each stop ================= */
.station__art{position:relative}
.pose{position:absolute;z-index:3;top:-44px;left:-18px;width:84px;height:51px;image-rendering:pixelated;transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.station--r .pose{left:auto;right:-18px}
.motion .station:not(.is-near) .pose{opacity:0;transform:translateY(16px) scale(.6)}
@media (max-width:900px){.pose{top:-40px;left:auto;right:8px}}

/* ================= v10: Talk to Arcus ================= */
.talk__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,6vw,90px);align-items:center}
.talk__copy p:not(.how__step){color:var(--ink-2);font-size:17px;margin-top:14px;max-width:460px}
.talk__pts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.talk__pts li{display:flex;align-items:center;gap:10px;font-size:15px}
.talk__pts .i{width:18px;height:18px;fill:none;stroke:#1f7a4c;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.phone{border-radius:30px;background:#fff;border:1px solid #e3e5de;box-shadow:0 40px 80px -40px rgba(15,40,110,.45);overflow:hidden;font-size:14px}
.phone .i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.phone small{display:block;font-size:12px;color:var(--ink-3)}
.phone__h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid #eef0ea}
.phone__h .arc-av{width:34px}
.phone__body{display:flex;flex-direction:column;gap:10px;padding:16px;min-height:470px;background:linear-gradient(#fbfcff,#f3f6fe)}
.tm{max-width:88%;padding:10px 13px;border-radius:16px;line-height:1.45}
.tm p{margin:0}
.tm--me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.tm--ai{background:#fff;border:1px solid #e3e8f5;border-bottom-left-radius:4px}
.tm--done{display:flex;gap:8px;align-items:flex-start;background:#eef8f2;border-color:#cfe8d9}
.tm--done .i{color:#1f7a4c;stroke-width:2.6;margin-top:2px}
.tchart{display:flex;align-items:flex-end;gap:5px;height:70px;margin:10px 0 6px;padding-bottom:2px;border-bottom:1px solid #eceee8}
.tchart i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:var(--green)}
.tchart i.f{background:repeating-linear-gradient(135deg,#c9d7fb 0 4px,#eef3fe 4px 8px);border:1px dashed #7ea2f6;border-bottom:0}
.tchart i.low{background:#fff1d6;border-color:#c47f00}
.tsrc{font-size:11px !important}
.tdraft{margin-top:8px;padding:10px 12px;border-radius:12px;background:#f7f9ff;border:1px dashed #b9c9f5}
.tdraft b{display:block;font-size:13px;margin:2px 0 8px}
.tdraft div{display:flex;gap:6px}
.phone .btn--sm{padding:6px 12px;font-size:12px}
.phone__in{display:flex;justify-content:space-between;align-items:center;margin:12px;padding:10px 14px;border-radius:14px;border:1px solid #e3e8f5;color:var(--ink-3)}
.phone__in span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff}
.motion [data-talk] [data-t]{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.motion [data-talk] [data-t].on{opacity:1;transform:none}
.motion [data-talk] .tm--ai.typing{opacity:1;transform:none;color:transparent;width:64px;height:38px;overflow:hidden;position:relative}
.motion [data-talk] .tm--ai.typing>*{visibility:hidden}
.motion [data-talk] .tm--ai.typing::after{content:"•••";position:absolute;left:14px;top:7px;color:var(--ink-3);letter-spacing:2px;animation:tdots 1s steps(3) infinite}
@keyframes tdots{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}
@media (max-width:900px){.talk__in{grid-template-columns:1fr}.phone__body{min-height:0}}
.pose{width:112px;height:68px;top:-58px}
.tm--done .i{width:16px;height:16px}
@media (max-width:900px){.pose{width:96px;height:58px;top:-50px}}

/* =====================================================================
   v11 — hero rebuilt for launch: one message, one CTA, one product card.
   Text left, card right on desktop; stacked on phones with the card top
   visible in the first screen. Uses the existing tokens only.
   ===================================================================== */
.hx { position: relative; padding-block: 72px 88px; overflow: hidden; }
.hx__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; align-items: center; }
.hx__copy { min-width: 0; }
.hx__kicker { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.hx__title { margin: 18px 0 0; font-family: var(--font); font-weight: 650; font-size: clamp(40px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -0.038em; color: var(--ink); text-wrap: balance; }
.hx__title span { display: block; font-weight: 400; color: var(--ink-2); }
.hx__sub { margin: 22px 0 0; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.hx__ctas { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hx__ctas .btn--lg { min-height: 52px; padding: 0 26px; }
.hx__link { font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2, rgba(19,24,20,.2)); padding-bottom: 2px; }
.hx__link span { display: inline-block; transition: transform .2s ease; }
.hx__link:hover span { transform: translateX(3px); }
.hx__link:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 2px; }
.hx__proof { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); }
.hx__proof li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hx__proof li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.hx__price { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-3); }
.hx__price span { white-space: nowrap; }

.hx__card { position: relative; margin: 0; min-width: 0; padding: 24px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(19,24,20,.04), 0 30px 60px -32px rgba(20,40,90,.28); font-variant-numeric: tabular-nums; }
.hx__head { display: flex; align-items: center; gap: 12px; }
.hx__head .logo-tile { width: 36px; height: 36px; border-radius: 10px; }
.hx__head > div { min-width: 0; flex: 1; }
.hx__label { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.hx__co { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.hx__state { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--mint); color: var(--green-ink); font-size: 12px; font-weight: 600; }
.hx__amount { margin: 20px 0 0; font-family: var(--font); font-weight: 650; font-size: 40px; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.hx__amount span { margin-left: 10px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.hx__steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.hx__steps li { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.hx__steps li + li { border-top: 1px solid var(--line); }
.hx__steps li > div { min-width: 0; flex: 1; display: grid; gap: 1px; }
.hx__steps b { font-size: 14px; font-weight: 600; color: var(--ink); }
.hx__steps small { font-size: 12.5px; color: var(--ink-3); }
.hx__dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.is-done .hx__dot { background: var(--ok-bg, #e7f4ec); color: var(--ok, #1f7a4c); }
.hx__dot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.is-now .hx__dot { border: 1.5px solid var(--green); }
.is-now .hx__dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.hx__approve { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 9px; background: var(--green); color: #fff; font-size: 14px; font-weight: 600; }
.hx__rows { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.hx__rows p { margin: 0; display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.hx__rows span { color: var(--ink-3); }
.hx__rows b { font-weight: 500; color: var(--ink); }
.hx__rows em { font-style: normal; font-size: 12px; color: #8a5a00; background: #fdf3e1; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.hx__card figcaption { margin-top: 14px; font-size: 11px; color: var(--ink-3); text-align: right; }

@media (prefers-reduced-motion: no-preference) {
  .hx__card { animation: hx-in .6s cubic-bezier(.2,.7,.2,1) .1s both; }
  .is-now .hx__dot { animation: hx-pulse 2.4s ease-in-out infinite; }
}
@keyframes hx-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hx-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(20,86,240,.25); } 50% { box-shadow: 0 0 0 6px rgba(20,86,240,0); } }

@media (max-width: 960px) {
  .hx { padding-block: 40px 56px; }
  .hx__in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hx__card { max-width: 520px; }
}
@media (max-width: 760px) {
  .nav__end { display: none; }
  .hx { padding-block: 28px 48px; }
  .hx__title { font-size: clamp(36px, 10.6vw, 44px); margin-top: 14px; }
  .hx__sub { font-size: 16px; margin-top: 16px; }
  .hx__ctas { margin-top: 22px; flex-direction: column; align-items: stretch; gap: 14px; }
  .hx__ctas .btn--lg { width: 100%; }
  .hx__link { align-self: center; }
  .hx__proof { margin-top: 20px; gap: 6px 14px; font-size: 12.5px; }
  .hx__price { display: none; }
  .hx__label { font-size: 14px; white-space: nowrap; }
  .hx__state { padding: 3px 8px; font-size: 11.5px; }
  .hx__in { gap: 28px; }
  .hx__card { padding: 18px; border-radius: 18px; }
  .hx__amount { font-size: 34px; }
  .hx__steps li { gap: 10px; }
  .hx__approve { min-height: 32px; padding: 0 12px; font-size: 13px; }
}

/* v11b — the brand arcs return: a rainbow of arcs rising behind the top of the product card.
   Sizes are % of the card width so the arcs always frame it; the legs fade out before the text. */
.hx__copy { position: relative; z-index: 2; }
.hx__visual { position: relative; z-index: 1; min-width: 0; padding-top: 26%; }
.hx__arcs { position: absolute; left: 50%; top: 0; width: 163.6%; height: auto; transform: translateX(-50%); z-index: 0; pointer-events: none; overflow: visible;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%); mask-image: linear-gradient(to bottom, #000 45%, transparent 92%); }
.hx__arcs path { fill: none; stroke-width: 22; stroke-linecap: round; }
.hx__visual .hx__card { z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hx__arcs path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hx-draw 1.4s cubic-bezier(.3,.6,.2,1) forwards; }
  .hx__arcs path:nth-child(2) { animation-delay: .1s; }
  .hx__arcs path:nth-child(3) { animation-delay: .2s; }
  .hx__arcs path:nth-child(4) { animation-delay: .3s; }
}
@keyframes hx-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 960px) { .hx__visual { max-width: 520px; } .hx__visual .hx__card { max-width: none; } }
@media (max-width: 760px) { .hx__visual { padding-top: 19%; } .hx__arcs { top: -7%; } .hx__in { gap: 20px; } }

/* v11c — hero card as a flow: your documents → Arcus → a Chartered Accountant → your approval.
   Each stage is a row; a thin pipe with a travelling dot links them. */
.fl { display: grid; gap: 0; padding: 20px; }
.fl__step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.fl__who { min-width: 0; display: grid; gap: 4px; }
.fl__who > b { font-size: 14px; font-weight: 600; color: var(--ink); }
.fl__who > span { font-size: 12.5px; color: var(--ink-3); }

/* 1 · documents in */
.fl__docs { flex-wrap: wrap; gap: 10px 16px; background: var(--paper); }
.fl__papers { position: relative; width: 78px; height: 52px; flex: none; }
.fl__paper { position: absolute; top: 2px; width: 38px; height: 48px; border-radius: 5px; background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 4px 10px -6px rgba(19,24,20,.35); display: grid; align-content: start; gap: 4px; padding: 8px 6px; box-sizing: border-box; }
.fl__paper:nth-child(1) { left: 0; transform: rotate(-9deg); }
.fl__paper:nth-child(2) { left: 18px; transform: rotate(-2deg); z-index: 1; }
.fl__paper:nth-child(3) { left: 38px; transform: rotate(7deg); z-index: 2; }
.fl__paper i { display: block; height: 3px; border-radius: 2px; background: var(--line-2); }
.fl__paper i:first-child { width: 60%; background: var(--green); opacity: .8; }
.fl__paper i:nth-child(3) { width: 75%; }
.fl__paper b { position: absolute; right: 5px; bottom: 6px; width: 12px; height: 4px; border-radius: 2px; background: var(--ink-2); }
.fl__bank { flex: 1; min-width: 150px; display: grid; gap: 6px; }
.fl__line { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--bg); font-size: 12px; font-variant-numeric: tabular-nums; }
.fl__line i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.fl__line em { font-style: normal; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl__line b { font-weight: 600; color: var(--ink); }
.fl__line b.in { color: var(--ok, #1f7a4c); }
.fl__cap { width: 100%; margin: 0; font-size: 12px; color: var(--ink-3); }

/* pipe between stages */
.fl__pipe { position: relative; display: block; width: 2px; height: 22px; margin-left: 32px; background: repeating-linear-gradient(to bottom, var(--line-2) 0 4px, transparent 4px 7px); }
.fl__pipe i { position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--green); opacity: 0; }

/* 2 · Arcus */
.fl__agent { background: var(--mint); border-color: transparent; }
.fl__agent .logo-tile { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.fl__agent .fl__who > b { color: var(--green-ink); }
.fl__ticks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fl__ticks span { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--green-ink); }
.fl__ticks svg, .fl__badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* 3 · the accountant */
.fl__face { position: relative; flex: none; width: 40px; height: 40px; }
.fl__face img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--line-2); }
.fl__badge { position: absolute; right: -4px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ok, #1f7a4c); color: #fff; box-shadow: 0 0 0 2px var(--paper); }
.fl__badge svg { width: 11px; height: 11px; }

/* 4 · you */
.fl__you { justify-content: space-between; background: var(--paper); border-color: var(--line-2); box-shadow: 0 10px 24px -18px rgba(20,40,90,.45); }
.fl__you > div { display: grid; gap: 2px; }
.fl__you small { font-size: 12.5px; color: var(--ink-3); }
.fl__you > div > b { font-family: var(--font); font-size: 28px; font-weight: 650; letter-spacing: -0.03em; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
.fl__approve { flex: none; display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 10px; background: var(--green); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 8px 18px -10px rgba(20,86,240,.8); }
.fl figcaption { margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-2); text-align: left; }
.fl figcaption span { color: var(--ink-3); font-size: 11px; }

@media (prefers-reduced-motion: no-preference) {
  .fl__step { animation: fl-in .45s cubic-bezier(.2,.7,.2,1) both; }
  .fl__agent { animation-delay: .25s; } .fl__ca { animation-delay: .5s; } .fl__you { animation-delay: .75s; }
  .fl__pipe i { animation: fl-dot 3.2s ease-in-out infinite; }
  .fl__pipe:nth-of-type(2) i { animation-delay: .8s; }
  .fl__pipe:nth-of-type(3) i { animation-delay: 1.6s; }
  .fl__ring { animation: fl-ring 3.2s ease-in-out infinite; }
  .fl__approve { animation: fl-cta 3.2s ease-in-out 2.4s infinite; }
}
@keyframes fl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fl-dot { 0% { top: -4px; opacity: 0; } 15% { opacity: 1; } 45% { top: 18px; opacity: 1; } 55%,100% { top: 18px; opacity: 0; } }
@keyframes fl-ring { 0%,100% { box-shadow: 0 0 0 0 rgba(20,86,240,.28); } 50% { box-shadow: 0 0 0 7px rgba(20,86,240,0); } }
@keyframes fl-cta { 0%,70%,100% { transform: none; } 78% { transform: scale(.96); } 86% { transform: scale(1.02); } }

@media (max-width: 760px) {
  .fl { padding: 14px; }
  .fl__step { padding: 10px 12px; gap: 12px; }
  .fl__pipe { height: 16px; margin-left: 30px; }
  .fl__you > div > b { font-size: 24px; }
  .fl__approve { min-height: 38px; padding: 0 16px; font-size: 14px; }
  .fl__papers { width: 70px; }
}

/* v11d — accountant step shows a team, not one named person */
.fl__team { position: relative; flex: none; display: flex; align-items: center; padding-right: 6px; }
.fl__av { position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--paper); background: #dfe7fc; }
.fl__av + .fl__av { margin-left: -10px; }
.fl__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl__av--a, .fl__av--b { background: radial-gradient(circle at 50% 38%, #8fb0f8 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, #8fb0f8 0 42%, transparent 43%), #e6edfd; }
.fl__av--b { background: radial-gradient(circle at 50% 38%, #b5cbfa 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, #b5cbfa 0 42%, transparent 43%), #eef2fd; }
.fl__av:nth-child(1) { z-index: 3; } .fl__av--a { z-index: 2; } .fl__av--b { z-index: 1; }
.fl__team .fl__badge { right: 0; bottom: -3px; z-index: 4; }

/* v11e — Talk to Arcus: the phone keeps a fixed height. Messages arrive at the bottom and push
   older ones up, like a real chat, so the page never jumps. Plays once. */
.motion [data-talk] .phone__body { height: 480px; min-height: 0; justify-content: flex-end; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px); mask-image: linear-gradient(to bottom, transparent 0, #000 36px); }
.motion [data-talk] [data-t] { display: none; opacity: 1; transform: none; transition: none; flex: none; }
.motion [data-talk] [data-t].on { display: block; animation: tm-in .35s cubic-bezier(.2,.8,.2,1) both; }
.motion [data-talk] .tm--done.on { display: flex; }
.motion [data-talk] .tm--ai.typing { display: block; }
@keyframes tm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .motion [data-talk] .phone__body { height: 540px; } }
.fl__av--c { z-index: 3; background: radial-gradient(circle at 50% 38%, #5b8cff 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, #5b8cff 0 42%, transparent 43%), #dfe7fc; }

/* v12 — hero film: "a month with Arcus in 13 seconds". A 480×380 stage drawn in the 1Arc
   app's own look, scaled to the card width by assets/film.js. Scenes switch with .on, steps
   inside a scene appear with .in (data-at = seconds into the scene). Reduced motion shows the
   last frame, still. */
.hx__card.mv { padding: 12px 12px 14px; }
.mv__screen { position: relative; width: 100%; aspect-ratio: 480 / 380; border-radius: 14px; overflow: hidden; background: #f6f7f9; border: 1px solid #e5e7eb; }
.mv__stage { position: absolute; left: 0; top: 0; width: 480px; height: 380px; transform-origin: 0 0; transform: scale(var(--k, 1)); font-family: var(--font); color: #222; font-variant-numeric: tabular-nums; transition: opacity .4s ease; }
.mv__screen.fade .mv__stage { opacity: 0; }
.mv__stage.snap, .mv__stage.snap * { transition: none !important; }
.mv__stage p { margin: 0; }
.mv__stage svg { display: block; }
.mv__stage [data-mv-scene] { transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }

/* app chrome */
.mv__top { position: absolute; inset: 0 0 auto 0; height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.mv__brand { display: flex; align-items: center; gap: 7px; font-size: 15px; letter-spacing: -.02em; }
.mv__brand .logo-tile, .mv__fh .logo-tile, .mv__ph .logo-tile { width: 24px; height: 24px; border-radius: 7px; }
.mv__co { font-size: 12px; color: #45515e; padding: 4px 9px; border-radius: 7px; background: #f1f3f6; white-space: nowrap; }
.mv__status { margin-left: auto; position: relative; display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 10px; border-radius: 99px; background: #e6eefe; color: #1456f0; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mv__status > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: mv-pulse 1.2s ease-in-out infinite; }
.mv__status > span { display: none; }
.mv__status > span.on { display: inline-grid; }
.mv__status em { grid-area: 1 / 1; font-style: normal; transition: opacity .3s; }
.mv__status .mv__done { opacity: 0; color: #1c7d4a; }
.mv__status .mv__done.in { opacity: 1; }
.mv__status .mv__wait.in:has(~ .mv__done.in) { opacity: 0; }
.mv__stage:has(.mv__done.in) .mv__status { background: #e8ffea; color: #1c7d4a; }
.mv__stage:has(.mv__done.in) .mv__status > i { animation: none; }
.mv__side { position: absolute; left: 0; top: 46px; bottom: 0; width: 50px; display: grid; align-content: start; justify-items: center; gap: 8px; padding-top: 12px; background: #fff; border-right: 1px solid #e5e7eb; }
.mv__side span { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #6b7683; }
.mv__side span.on { background: #e6eefe; color: #1456f0; }
.mv__side svg, .mv__stage .mv__ck svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mv__main { position: absolute; left: 50px; top: 46px; right: 0; bottom: 0; }
.mv__sc { position: absolute; inset: 0; padding: 16px; opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none; }
.mv__sc.on { opacity: 1; transform: none; }
.mv__k { font-size: 11.5px; color: #5f6a76; }
.mv__pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; background: #e8ffea; color: #1c7d4a; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.mv__stage [data-mv-at] { transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1), background-color .3s, color .3s, box-shadow .3s; }

/* 1 · read */
.mv__doc { position: absolute; left: 16px; top: 16px; width: 170px; height: 256px; padding: 14px 13px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(16,17,20,.06), 0 14px 30px -14px rgba(44,30,116,.35); transform: rotate(-2deg); overflow: hidden; }
.mv__read:not(.on) .mv__doc { transform: translate(30px, -40px) rotate(-10deg); }
.mv__read.on .mv__doc { animation: mv-drop 1.1s cubic-bezier(.2,.9,.25,1.15) both; }
.mv__dhead { display: flex; align-items: center; gap: 6px; font-size: 9.5px; }
.mv__dhead i { width: 16px; height: 16px; border-radius: 4px; background: #f0a35e; }
.mv__dtitle { margin-top: 12px !important; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.mv__dtitle span { font-weight: 400; letter-spacing: 0; color: #5f6a76; font-size: 10px; margin-left: 4px; }
.mv__dsmall { margin-top: 6px !important; font-size: 8.5px; line-height: 1.4; color: #5f6a76; }
.mv__dlines { margin-top: 12px; display: grid; gap: 7px; }
.mv__dlines p { display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; color: #45515e; }
.mv__dlines i { height: 5px; border-radius: 3px; background: #e5e7eb; }
.mv__dtot { margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e7eb; display: grid; gap: 3px; }
.mv__dtot p { display: flex; justify-content: space-between; font-size: 9px; color: #45515e; padding: 2px 4px; margin: 0 -4px !important; border-radius: 4px; }
.mv__dtot .mv__dbig { font-size: 11px; font-weight: 700; color: #222; }
.mv__hl.in { background: #e6eefe; box-shadow: 0 0 0 1.5px #1456f0; color: #1456f0; }
.mv__beam { position: absolute; left: 0; right: 0; top: -30px; height: 30px; background: linear-gradient(to bottom, rgba(20,86,240,0), rgba(20,86,240,.18) 80%, rgba(20,86,240,.9)); opacity: 0; }
.mv__read.on .mv__beam { animation: mv-scan 2.6s cubic-bezier(.45,0,.55,1) .7s both; }
.mv__fields { position: absolute; left: 204px; right: 16px; top: 16px; display: grid; gap: 6px; }
.mv__fh { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 4px !important; }
.mv__f { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; background: #fff; border: 1px solid #e5e7eb; font-size: 11.5px; opacity: 0; transform: translateX(-14px); }
.mv__f.in { opacity: 1; transform: none; }
.mv__f span { color: #5f6a76; }
.mv__f b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv__chip { padding: 2px 7px; border-radius: 6px; background: #e6eefe; color: #1456f0; font-size: 11px; }
.mv__count { margin-top: 6px; padding: 9px 10px; border-radius: 10px; background: #1456f0; color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 11.5px; opacity: 0; transform: translateY(8px); }
.mv__count.in { opacity: 1; transform: none; }
.mv__count b { font-size: 14px; }
.mv__count > i { grid-column: 1 / -1; height: 4px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.mv__count em, .mv__bar em { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }

/* 2 · bank */
.mv__bh { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.mv__big { margin-top: 4px !important; font-size: 34px; font-weight: 650; letter-spacing: -.03em; line-height: 1; }
.mv__big small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #5f6a76; }
.mv__bh .mv__pill { opacity: 0; transform: scale(.8); }
.mv__bh .mv__pill.in { opacity: 1; transform: none; }
.mv__bar { display: block; margin-top: 12px; height: 6px; border-radius: 4px; background: #e5e7eb; overflow: hidden; }
.mv__bar em { background: #1f8a52; }
.mv__rows { position: relative; margin-top: 12px; height: 222px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.mv__list { display: grid; gap: 6px; }
.mv__bank.on .mv__list { animation: mv-roll 4.4s cubic-bezier(.5,0,.5,1) 1.8s both; }
.mv__r { display: grid; grid-template-columns: 8px minmax(0,1fr) auto 104px; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; background: #fff; border: 1px solid #e5e7eb; font-size: 12px; }
.mv__r > i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.mv__r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv__r b { font-weight: 600; }
.mv__r b.mv__in { color: #1c7d4a; }
.mv__r em { font-style: normal; justify-self: end; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: #e8ffea; color: #1c7d4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 104px; opacity: 0; transform: scale(.7); transition: inherit; }
.mv__r em::before { content: "✓ "; }
.mv__r.in { border-color: #9bd3b3; }
.mv__r.in em { opacity: 1; transform: none; }

/* 3 · VAT */
.mv__vc { padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 14px 30px -20px rgba(44,30,116,.3); display: grid; gap: 8px; }
.mv__vh { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.mv__vt { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.mv__pill--due { background: #fff0cf; color: #7a4a07; }
.mv__v { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #f6f7f9; font-size: 12.5px; opacity: 0; transform: translateY(10px); }
.mv__v.in { opacity: 1; transform: none; }
.mv__v span b { display: inline-grid; place-items: center; width: 26px; height: 20px; margin-right: 8px; border-radius: 5px; background: #fff; border: 1px solid #e5e7eb; font-size: 10.5px; color: #45515e; }
.mv__v strong { font-size: 16px; font-weight: 600; }
.mv__v--due { background: #e6eefe; padding-block: 13px; }
.mv__v--due > span { color: #1456f0; font-weight: 600; }
.mv__v--due strong { font-size: 26px; font-weight: 650; letter-spacing: -.03em; color: #1456f0; }
.mv__vf { font-size: 11px; color: #5f6a76; opacity: 0; }
.mv__vf.in { opacity: 1; }

/* 4 · check */
.mv__chk { display: grid; place-items: center; }
.mv__rc { position: relative; width: 340px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 20px 40px -22px rgba(44,30,116,.4); display: grid; gap: 9px; }
.mv__rh { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.mv__rt { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.mv__team { display: flex; flex: none; }
.mv__av { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; background: radial-gradient(circle at 50% 38%, var(--h) 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, var(--h) 0 42%, transparent 43%), var(--b); }
.mv__av + .mv__av { margin-left: -10px; }
.mv__av--1 { --h: #5b8cff; --b: #dfe7fc; z-index: 3; } .mv__av--2 { --h: #8fb0f8; --b: #e6edfd; z-index: 2; } .mv__av--3 { --h: #b5cbfa; --b: #eef2fd; z-index: 1; }
.mv__ck { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 10px; background: #f6f7f9; font-size: 12.5px; color: #9aa0ab; }
.mv__ck i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #d5d9e0; color: transparent; transition: inherit; }
.mv__ck.in { color: #222; }
.mv__ck.in i { background: #1f8a52; border-color: #1f8a52; color: #fff; }
.mv__stage .mv__ck svg { width: 12px; height: 12px; stroke-width: 3; }
.mv__stamp { position: absolute; right: -16px; top: -18px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px 6px 9px; border: 2px solid #1f8a52; border-radius: 9px; color: #1c7d4a; background: #e8ffea; font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; opacity: 0; transform: rotate(-9deg) scale(1.9); }
.mv__stamp.in { opacity: 1; transform: rotate(-9deg) scale(1); transition: opacity .2s, transform .35s cubic-bezier(.3,1.5,.5,1); }
.mv__stamp svg, .mv__filed svg, .mv__toast svg, .mv__apc svg, .mv__btn svg, .mv__done-list svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* 5 · approve */
.mv__end { padding: 22px 18px; }
.mv__et { margin-top: 6px !important; max-width: 190px; font-size: 24px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.mv__done-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; width: 200px; }
.mv__done-list li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #45515e; }
.mv__done-list i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #e8ffea; color: #1f8a52; }
.mv__done-list svg { width: 12px; height: 12px; }
.mv__filed { position: absolute; left: 18px; bottom: 22px; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 10px; background: #1f8a52; color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(10px); }
.mv__filed.in { opacity: 1; transform: none; }

.mv__phone { position: absolute; right: 22px; top: 58px; width: 178px; height: 340px; padding: 7px; border-radius: 30px; background: #131814; box-shadow: 0 30px 50px -20px rgba(16,17,20,.55); opacity: 0; transform: translateY(120px) rotate(4deg); }
.mv__phone.on { opacity: 1; transform: rotate(-3deg); transition: opacity .3s, transform .7s cubic-bezier(.2,.9,.25,1.1); }
.mv__ps { position: relative; height: 100%; border-radius: 24px; background: #f6f7f9; overflow: hidden; padding: 0 11px; display: flex; flex-direction: column; gap: 9px; }
.mv__pt { display: flex; justify-content: space-between; align-items: center; height: 26px; padding: 0 6px; font-size: 10px; font-weight: 600; }
.mv__pdots { display: flex; gap: 2px; } .mv__pdots i { width: 4px; height: 4px; border-radius: 50%; background: #222; }
.mv__ph { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; }
.mv__msg { padding: 9px 10px; border-radius: 4px 12px 12px 12px; background: #fff; border: 1px solid #e5e7eb; font-size: 10.5px; line-height: 1.4; opacity: 0; transform: translateY(8px); }
.mv__msg.in, .mv__ap.in { opacity: 1; transform: none; }
.mv__ap { padding: 11px; border-radius: 14px; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 10px 20px -14px rgba(44,30,116,.4); display: grid; gap: 3px; opacity: 0; transform: translateY(10px); }
.mv__apv { font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
.mv__apc { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: #1c7d4a; }
.mv__apc svg { width: 11px; height: 11px; }
.mv__btn { position: relative; margin-top: 8px; display: grid; height: 36px; border-radius: 10px; background: #1456f0; color: #fff; font-size: 13px; font-weight: 600; overflow: hidden; }
.mv__btn > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 5px; transition: opacity .25s, transform .3s; }
.mv__btn > span + span { opacity: 0; transform: translateY(10px); }
.mv__btn.in { background: #1f8a52; animation: mv-press .35s ease both; }
.mv__btn.in > span:first-child { opacity: 0; transform: translateY(-10px); }
.mv__btn.in > span + span { opacity: 1; transform: none; }
.mv__toast { position: absolute; left: 9px; right: 9px; top: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 12px; background: #131814; color: #fff; font-size: 11.5px; font-weight: 600; opacity: 0; transform: translateY(-50px); }
.mv__toast svg { color: #7ee2a8; }
.mv__toast.in { opacity: 1; transform: none; }
.mv__finger { position: absolute; left: 50%; top: 248px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: rgba(255,255,255,.55); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 6px 16px rgba(16,17,20,.35); opacity: 0; transform: translate(40px, 60px); pointer-events: none; }
.mv__finger.in { opacity: 1; transform: none; animation: mv-tap .7s ease .6s both; }
.mv__phone:has(.mv__btn.in) .mv__finger { opacity: 0; transform: translate(26px, 34px); transition-delay: .25s; }

/* chapters under the film */
.mv__cap { margin-top: 12px; display: grid; gap: 9px; text-align: left; }
.mv__prog { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.mv__prog i { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.mv__prog b { display: block; height: 100%; background: var(--arcus, #1456f0); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.mv__row { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.mv__chap { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv__chap span { margin-right: 8px; font-weight: 500; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mv__row small { font-size: 11px; color: var(--ink-3); }
.mv__pp { flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.mv__pp:hover { border-color: var(--line-2); }
.mv__pp:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.mv__pp svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mv__pp .mv__i-play { fill: currentColor; stroke-width: 1.5; display: none; }
.mv.paused .mv__i-play { display: block; } .mv.paused .mv__i-pause { display: none; }
.mv.still .mv__pp { display: none; }

@keyframes mv-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes mv-drop { from { transform: translate(30px, -60px) rotate(-12deg); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(-2deg); opacity: 1; } }
@keyframes mv-scan { 0% { top: -30px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 256px; opacity: 0; } }
@keyframes mv-roll { from { transform: none; } to { transform: translateY(-80px); } }
@keyframes mv-press { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes mv-tap { 0%, 100% { scale: 1; } 50% { scale: .78; } }

@media (prefers-reduced-motion: reduce) {
  .mv__stage *, .mv__stage { animation: none !important; transition: none !important; }
}
@media (max-width: 760px) {
  .hx__card.mv { padding: 8px 8px 12px; border-radius: 18px; }
  .mv__screen { border-radius: 11px; }
  .mv__cap { padding: 0 4px; }
  .mv__chap { font-size: 13.5px; }
}
.mv.paused .mv__stage, .mv.paused .mv__stage * { animation-play-state: paused !important; }