@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-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; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-500-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; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Concept 2 (Bento Board) as the base system, with the Live Flow scroll story (concept 8),
   the 360 lead orbit (concept 13) and the How it connects wiring (concept 11) rebuilt in its tokens.
   Motion: Lenis smooth scroll + GSAP ScrollTrigger. Everything degrades to a static page without JS
   or under prefers-reduced-motion. */
:root {
  color-scheme: light;
  --accent: #ED2024; --accent-fill: #D91C20; --accent-ink: #C8161A; --accent-soft: #FFE9E9;
  --ink: #142B2F; --ink-2: #1B3A40; --on-ink: #CFE0E0; --on-ink-2: #9FB6B8;
  --page: #F4F5F6; --tile: #FFFFFF; --tile-2: #ECEFF0; --tile-3: #F7F8F8;
  --text: #15191B; --muted: #4F585C; --subtle: #667074; --line: #E2E6E8; --line-2: #CDD4D7; --wire: #9AA5A9;
  --ok: #137535; --ok-soft: #E3F4E8; --amber-soft: #FFF1D6; --amber-ink: #8A5300;
  --shadow: 0 1px 2px rgba(20,43,47,.05), 0 12px 32px -12px rgba(20,43,47,.14);
  --shadow-lg: 0 2px 4px rgba(20,43,47,.05), 0 30px 70px -20px rgba(20,43,47,.28);
  --glow: rgba(237,32,36,.07);
  --f-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --r: 24px; --r-in: 14px; --wrap: 1180px;
  --ease: cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --accent: #DC3333; --accent-ink: #FF9494; --accent-soft: rgba(220,51,51,.18);
  --ink: #1A1A1A; --ink-2: #262626; --on-ink: #E0E0E0; --on-ink-2: #A3A3A3;
  --page: #121212; --tile: #1E1E1E; --tile-2: #262626; --tile-3: #222222;
  --text: #EDEDED; --muted: #A3A3A3; --subtle: #9A9A9A; --line: #313131; --line-2: #3A3A3A; --wire: #5A5A5A;
  --ok: #4ADE80; --ok-soft: rgba(74,222,128,.13); --amber-soft: rgba(242,180,90,.16); --amber-ink: #F2C27A;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 30px 70px -20px rgba(0,0,0,.7);
  --glow: rgba(255,255,255,.05);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #DC3333; --accent-ink: #FF9494; --accent-soft: rgba(220,51,51,.18);
  --ink: #1A1A1A; --ink-2: #262626; --on-ink: #E0E0E0; --on-ink-2: #A3A3A3;
  --page: #121212; --tile: #1E1E1E; --tile-2: #262626; --tile-3: #222222;
  --text: #EDEDED; --muted: #A3A3A3; --subtle: #9A9A9A; --line: #313131; --line-2: #3A3A3A; --wire: #5A5A5A;
  --ok: #4ADE80; --ok-soft: rgba(74,222,128,.13); --amber-soft: rgba(242,180,90,.16); --amber-ink: #F2C27A;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 30px 70px -20px rgba(0,0,0,.7);
  --glow: rgba(255,255,255,.05);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 16.5px/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
i[data-lucide], svg.lucide { width: 1em; height: 1em; flex: none; display: inline-block; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }
h2 em, h1 em { font-style: normal; color: var(--accent); }
.dot { margin-left: -.06em; }
h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.section { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.head { display: grid; gap: .9rem; max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.head p { color: var(--muted); font-size: 1.1rem; max-width: 40rem; }
.head.center { margin-inline: auto; text-align: center; justify-items: center; }
/* Wide screens, left-aligned heads with copy. One paragraph: H2 left, paragraph right, both ending on the same line.
   Several paragraphs: H2 across the top, paragraphs balanced in two columns below. No empty corner either way. */
@media (min-width: 1001px) {
  .head:not(.center):has(> p):not(:has(> p + p)) { max-width: none; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: end; grid-auto-flow: dense; row-gap: .6rem; }
  .head:not(.center):has(> p):not(:has(> p + p)) > :not(p) { grid-column: 1; }
  .head:not(.center):has(> p):not(:has(> p + p)) > p { grid-column: 2; grid-row: 1 / span 2; }
  .head:not(.center):has(> p + p) { display: block; max-width: none; columns: 2; column-gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
  .head:not(.center):has(> p + p) > :not(p) { column-span: all; max-width: 24ch; margin-bottom: 1.4rem; }
  .head:not(.center):has(> p + p) > p { max-width: none; margin-bottom: .9rem; }
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: 0 1.5rem; border-radius: 999px; font: 700 1rem/1 var(--f-sans); text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease), background .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: var(--accent-fill); color: #fff; box-shadow: 0 8px 20px -8px rgba(237,32,36,.55); }
.btn-primary:hover { background: #D41B1F; }
.btn-dark { background: var(--text); color: var(--page); }
.btn-light { background: var(--tile); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cta a:focus-visible { outline-color: #fff; }
.kicker { display: inline-flex; gap: .55rem; align-items: center; font-weight: 600; font-size: .9rem; color: var(--muted); background: var(--tile); padding: .35rem .9rem .35rem .4rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.kicker b { background: var(--accent); color: #fff; font: 500 .7rem/1 var(--f-mono); padding: .32rem .55rem; border-radius: 999px; letter-spacing: .04em; }
.label { font: 500 .72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--subtle); }
.ex { font: 500 .7rem/1 var(--f-mono); color: var(--subtle); letter-spacing: .04em; }

/* Initial states that only apply when the motion layer will run (html.js is removed otherwise). */
.js [data-reveal] { opacity: 0; }
/* The H1 and dashboard shot (the LCP candidates) paint at once; only the small hero bits wait for the intro.
   The shot starts in its tilted pose so the scroll animation takes over without a jump. */
.js .hero [data-hero]:not(h1), .js .float { opacity: 0; }
.js .hero h1 .w > span { transform: translateY(110%); }
.js .hero-shot { transform: rotateX(16deg) scale(.94); }

/* Dark mode: dim product screenshots a touch */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-shot img, :root:not([data-theme="light"]) .tile .media img, :root:not([data-theme="light"]) .shot img { filter: brightness(.88); } }
:root[data-theme="dark"] .hero-shot img, :root[data-theme="dark"] .tile .media img, :root[data-theme="dark"] .shot img { filter: brightness(.88); }
/* Dark: mock panels, rule chips and avatars use the app's dark palette (mobile app match) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel { background: #262626; color: #EDEDED; box-shadow: 0 20px 50px rgba(0,0,0,.55), inset 0 0 0 1px #313131; }
  :root:not([data-theme="light"]) .form-pane .fl, :root:not([data-theme="light"]) .form-pane .fld small { color: #A3A3A3; }
  :root:not([data-theme="light"]) .form-pane .fld { border-color: #3A3A3A; }
  :root:not([data-theme="light"]) .rule.on { background: #391F1E; color: #FF9494; }
  :root:not([data-theme="light"]) .av { background: #391F1E; color: #FF9494; }
  :root:not([data-theme="light"]) .bar i b { background: #DC3333; }
}
:root[data-theme="dark"] .panel { background: #262626; color: #EDEDED; box-shadow: 0 20px 50px rgba(0,0,0,.55), inset 0 0 0 1px #313131; }
:root[data-theme="dark"] .form-pane .fl, :root[data-theme="dark"] .form-pane .fld small { color: #A3A3A3; }
:root[data-theme="dark"] .form-pane .fld { border-color: #3A3A3A; }
:root[data-theme="dark"] .rule.on { background: #391F1E; color: #FF9494; }
:root[data-theme="dark"] .av { background: #391F1E; color: #FF9494; }
:root[data-theme="dark"] .bar i b { background: #DC3333; }

/* Hero */
.hero { text-align: center; padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.hero h1 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5rem); margin: 1.3rem auto 1.3rem; max-width: 15ch; }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.hero h1 .w > span { display: inline-block; }
.hero .lede { font-size: 1.2rem; color: var(--muted); max-width: 38rem; margin: 0 auto 2.1rem; }
.ctas { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.hero-stage { position: relative; margin-top: clamp(2.75rem, 2rem + 3vw, 4rem); perspective: 1700px; }
.hero-shot { position: relative; border-radius: var(--r) var(--r) 0 0; overflow: hidden; background: var(--tile); padding: 12px 12px 0; box-shadow: 0 -1px 0 var(--line), var(--shadow-lg); transform-origin: 50% 0%; will-change: transform; }
.hero-shot img { border-radius: 14px 14px 0 0; }
.float { position: absolute; z-index: 2; background: var(--tile); border-radius: 18px; padding: .8rem 1rem; box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); display: flex; gap: .7rem; align-items: center; text-align: left; font-size: .85rem; will-change: transform; }
.float b { display: block; font-size: .95rem; }
.float span { color: var(--subtle); }
.float .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 1.05rem; flex: none; }
.float .ic.ok { background: var(--ok-soft); color: var(--ok); }
.float-a { left: -2.5rem; top: 18%; }
.float-b { right: -2.5rem; top: 46%; }
@media (max-width: 1240px) { .float-a { left: .5rem; } .float-b { right: .5rem; } }
@media (max-width: 900px) { .float { display: none; } }

/* Proof marquee (the one marquee on the page) */
.proof { padding-block: 1.6rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; gap: .6rem; width: max-content; animation: marquee 48s linear infinite; }
.proof:hover .track, .paused .track, .paused .spark { animation-play-state: paused !important; }
.proof-wrap { position: relative; }
.pause { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); top: 50%; translate: 0 -50%; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tile); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); display: grid; place-items: center; cursor: pointer; font-size: 1rem; }
.pause .ic-play, .paused .pause .ic-pause { display: none; }
.paused .pause .ic-play { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .pause { display: none; } }
.pill { display: inline-flex; gap: .45rem; align-items: center; background: var(--tile); border-radius: 999px; padding: .6rem 1.05rem; font-weight: 600; font-size: .9rem; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.pill svg { color: var(--ok); }
@keyframes marquee { to { transform: translateX(calc(-50% - .3rem)); } }

/* Bento */
.board { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: 16px; }
.tile { position: relative; isolation: isolate; background: var(--tile); border-radius: var(--r); padding: 1.75rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), var(--glow), transparent 45%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.tile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.tile:hover::before { opacity: 1; }
.tile p { color: var(--muted); font-size: .97rem; }
.s8 { grid-column: span 8; } .s6 { grid-column: span 6; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s7 { grid-column: span 7; } .s12 { grid-column: span 12; }
.tile.dark { background: var(--ink); color: #fff; box-shadow: none; --glow: rgba(255,255,255,.07); }
.tile.dark p { color: var(--on-ink-2); }
.tile.dark .label { color: #8FA6A9; }
.tile.red { background: var(--accent-fill); color: #fff; box-shadow: none; --glow: rgba(255,255,255,.14); }
.tile.red p { color: #fff; }
.tile .media { margin: auto -1.75rem -1.75rem; padding: 0 1.75rem; }
.tile .media img { border-radius: var(--r-in) var(--r-in) 0 0; box-shadow: 0 0 0 1px var(--line); transition: transform .6s var(--ease); }
.tile:hover .media img { transform: translateY(-4px); }
.big-num { font: 800 clamp(3rem, 2rem + 3vw, 4.5rem)/0.95 var(--f-sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.rules { display: grid; gap: .5rem; margin-top: .4rem; }
.rule { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: var(--r-in); background: rgba(255,255,255,.07); font-weight: 600; font-size: .92rem; transition: background .4s, color .4s; }
.rule.on { background: #fff; color: #15191B; }
.rule small { font: 500 .72rem/1 var(--f-mono); opacity: 0; transition: opacity .3s; }
.rule.on small { opacity: .7; }
.who { display: flex; align-items: center; gap: .6rem; margin-top: auto; padding: .8rem; border-radius: var(--r-in); background: rgba(255,255,255,.07); }
.av { width: 34px; height: 34px; border-radius: 50%; background: #FFD7D7; color: #B3141A; display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
.who b { display: block; font-size: .95rem; }
.who span { font-size: .82rem; color: var(--on-ink-2); }
.invoice { margin-top: auto; background: var(--tile-2); border-radius: var(--r-in); padding: 1rem 1.1rem; display: grid; gap: .4rem; font-size: .9rem; }
.invoice div { display: flex; justify-content: space-between; gap: 1rem; }
.invoice span:last-child { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.invoice .tot { border-top: 1px solid var(--line-2); padding-top: .45rem; font-weight: 700; }
.badge { justify-self: start; display: inline-flex; gap: .35rem; align-items: center; font: 500 .72rem/1 var(--f-mono); padding: .35rem .55rem; border-radius: 999px; background: var(--ok-soft); color: var(--ok); }
.due { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: auto; }
.due div { border-radius: var(--r-in); padding: .9rem .8rem; background: var(--tile-2); }
.due b { display: block; font: 800 1.9rem/1 var(--f-sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.due .od { background: var(--accent-soft); color: var(--accent-ink); }
.due span { font-size: .8rem; font-weight: 600; color: var(--muted); }
.due .od span { color: var(--accent-ink); }
.bars { display: grid; gap: .55rem; margin-top: auto; }
.bar { display: grid; grid-template-columns: 6.5rem 1fr 2.2rem; gap: .6rem; align-items: center; font-size: .85rem; }
.bar i { display: block; height: 10px; border-radius: 99px; overflow: hidden; }
.bar i b { display: block; height: 100%; border-radius: 99px; background: var(--text); transform-origin: 0 50%; }
.bar span:last-child { font-family: var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.mini-list { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: .45rem; font-size: .92rem; }
.mini-list li { display: flex; gap: .55rem; align-items: center; }
.mini-list svg { color: var(--ok); }
.tile.dark .mini-list svg { color: #7FD1AE; }
.icon-xl { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; background: rgba(255,255,255,.18); }
@media (max-width: 1000px) { .s8, .s7, .s6, .s5 { grid-column: span 12; } .s4 { grid-column: span 6; } .board > .tile:last-child { grid-column: 1 / -1; } }
@media (max-width: 620px) { .board { grid-template-columns: minmax(0, 1fr); } .s4, .s5, .s6, .s7, .s8, .s12 { grid-column: auto; } }

/* Live flow (from concept 8) */
.flow-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
.stage-wrap { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); align-self: start; }
.stage { background: var(--ink); border-radius: var(--r); padding: 1.1rem; color: var(--on-ink); box-shadow: var(--shadow-lg); }
.stage-bar { display: flex; justify-content: space-between; align-items: center; padding: .2rem .3rem .9rem; font: 500 .74rem/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.stage-bar b { color: #fff; font-weight: 500; }
.stepdots { display: flex; gap: 5px; }
.stepdots i { width: 18px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); transition: background .35s; }
.sboard { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-height: 300px; }
.bcol { background: var(--ink-2); border-radius: 14px; padding: .6rem; display: grid; align-content: start; gap: .5rem; }
.bcol .fh { margin: 0 0 .2rem; font: 500 .7rem/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--on-ink); display: flex; justify-content: space-between; }
.ghost { height: 54px; border-radius: 10px; background: rgba(255,255,255,.06); }
.mover { position: absolute; top: 2.05rem; left: .6rem; width: calc((100% - 24px) / 4 - 1.2rem); background: #fff; color: #15191B; border-radius: 11px; padding: .6rem; display: grid; gap: .35rem; font-size: .78rem; box-shadow: 0 12px 28px rgba(0,0,0,.35); z-index: 3; transition: opacity .4s; }
.mover b { font-size: .86rem; }
.mover .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem; }
.mover .av { width: 22px; height: 22px; font: 600 .6rem/1 var(--f-mono); transition: opacity .3s, scale .3s var(--ease); }
.tag { font: 500 .62rem/1 var(--f-mono); padding: .25rem .4rem; border-radius: 5px; background: #FFF1D6; color: #8A5300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag.red { background: #D91C20; color: #fff; }
.col-tag { display: none; background: #E6F0F1; color: #1B3A40; }
.bcol { transition: background .4s; }
.bcol.on { background: #24505A; }
.panel { position: absolute; z-index: 2; background: #fff; color: #15191B; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35); padding: 1rem; transition: opacity .4s, translate .5s var(--ease); font-size: .85rem; }
.form-pane { left: 8%; right: 8%; top: 12px; display: grid; gap: .5rem; }
.form-pane .fl { font: 500 .7rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #5D686C; }
.form-pane .fld { border: 1px solid #DCE2E4; border-radius: 9px; padding: .45rem .6rem; display: grid; }
.form-pane .fld small { color: #5D686C; font-size: .68rem; }
.form-pane .sub { background: #D91C20; color: #fff; border-radius: 9px; text-align: center; padding: .55rem; font-weight: 700; }
.quote-pane { right: 6px; bottom: 6px; width: 62%; display: grid; gap: .3rem; }
.quote-pane .r { display: flex; justify-content: space-between; gap: .5rem; }
.quote-pane .r span:last-child { font-family: var(--f-mono); }
.quote-pane .t { border-top: 1px solid #DCE2E4; padding-top: .3rem; font-weight: 700; }
.quote-pane header { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: .2rem; }
.quote-pane .conv { justify-self: start; font: 500 .65rem/1 var(--f-mono); padding: .3rem .45rem; border-radius: 5px; background: #E3F4E8; color: #137535; }
.notify { left: 6px; bottom: 6px; width: 58%; display: flex; gap: .6rem; align-items: center; }
.notify .ic { width: 30px; height: 30px; border-radius: 9px; background: #D91C20; color: #fff; display: grid; place-items: center; flex: none; }
.notify small { font: 500 .7rem/1 var(--f-mono); color: #5D686C; }
.stage-cap { margin-top: .9rem; padding: .2rem .3rem; font-size: .92rem; color: var(--on-ink); min-height: 2.8em; }
.stage-cap b { color: #fff; }
/* Stage state machine (data-step on .stage). Markup default is step 7 so the stage reads complete without JS. */
.stage[data-step="1"] .mover { opacity: 0; }
.stage:not([data-step="1"]) .form-pane { opacity: 0; translate: 0 -12px; pointer-events: none; }
.stage[data-step="1"] .mover .av, .stage[data-step="2"] .mover .av { opacity: 0; scale: .5; }
.mover .p-new, .mover .p-rem, .mover .p-quote, .mover .p-won { display: none; }
.stage[data-step="2"] .p-new, .stage[data-step="3"] .p-new { display: block; }
.stage[data-step="4"] .p-rem, .stage[data-step="5"] .p-rem { display: block; }
.stage[data-step="6"] .p-quote { display: block; }
.stage[data-step="7"] .p-won { display: block; }
.notify { opacity: 0; translate: 0 10px; pointer-events: none; }
.stage[data-step="3"] .notify { opacity: 1; translate: 0 0; }
.quote-pane { opacity: 0; translate: 0 10px; pointer-events: none; }
.stage[data-step="6"] .quote-pane, .stage[data-step="7"] .quote-pane { opacity: 1; translate: 0 0; }
.quote-pane .conv { display: none; }
.stage[data-step="7"] .quote-pane .conv { display: inline-block; }
.stage[data-step="7"] .quote-pane .qt-title::after { content: " → Invoice"; color: #137535; }
.stage .stepdots i:nth-child(1) { background: var(--accent); }
/* The five steps reuse stage states 1, 3, 4, 5 and 7. */
.stage[data-step="3"] .stepdots i:nth-child(-n+2), .stage[data-step="4"] .stepdots i:nth-child(-n+3), .stage[data-step="5"] .stepdots i:nth-child(-n+4), .stage[data-step="7"] .stepdots i { background: var(--accent); }
/* Six-step variant (.stage.six, 6 dots): data-step 1, 2, 3, 4, 6, 7. */
.stage.six[data-step="2"] .stepdots i:nth-child(-n+2), .stage.six[data-step="3"] .stepdots i:nth-child(-n+3), .stage.six[data-step="4"] .stepdots i:nth-child(-n+4), .stage.six[data-step="6"] .stepdots i:nth-child(-n+5) { background: var(--accent); }
/* Seven-step variant (.stage.seven, 7 dots, /in): data-step 1-7. */
.stage.seven[data-step="2"] .stepdots i:nth-child(-n+2), .stage.seven[data-step="3"] .stepdots i:nth-child(-n+3), .stage.seven[data-step="4"] .stepdots i:nth-child(-n+4), .stage.seven[data-step="5"] .stepdots i:nth-child(-n+5), .stage.seven[data-step="6"] .stepdots i:nth-child(-n+6) { background: var(--accent); }
.steps { position: relative; display: grid; padding-left: 1.6rem; }
.rail, .rail-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; }
.rail { background: var(--line); }
.rail-fill { background: var(--accent); transform-origin: 50% 0; }
.js .rail-fill { transform: scaleY(0); }
.step { min-height: 60vh; display: grid; align-content: center; gap: .9rem; padding-block: 2rem; }
.step h3 { transition: color .45s; }
.js .step:not(.is-on) h3 { color: var(--muted); }
.step .n { font: 500 .8rem/1 var(--f-mono); color: var(--accent-ink); }
.step h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; }
.step p { color: var(--muted); font-size: 1.06rem; max-width: 34rem; }
.feat { display: flex; flex-wrap: wrap; gap: .4rem; }
.feat span { font: 500 .72rem/1 var(--f-mono); padding: .45rem .65rem; border-radius: 999px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
@media (max-width: 900px) {
  .flow-grid { grid-template-columns: minmax(0, 1fr); }
  .stage-wrap { top: calc(84px + env(safe-area-inset-top, 0px)); z-index: 5; }
  #flow .head { position: relative; z-index: 6; }
  .stage-wrap::before { content: ""; position: absolute; inset: -120px -16px -14px; background: var(--page); z-index: -1; }
  .mover .av { display: none; }
  .mover b { font-size: .74rem; }
  .stage { padding: .7rem; }
  .sboard { min-height: 220px; }
  .bcol { padding: .4rem; }
  .ghost { height: 36px; }
  .mover { left: .4rem; width: calc((100% - 24px) / 4 - .8rem); font-size: .68rem; padding: .45rem; top: 1.8rem; }
  .stage-cap { display: none; }
  .step { min-height: 50vh; }
}
@media (max-width: 600px) {
  .bcol .fh span { display: none; } .bcol .fh { font-size: .6rem; }
  .sboard { min-height: 300px; }
  .mover { left: .4rem; right: .4rem; width: auto; font-size: .74rem; }
  .mover .row { justify-content: flex-start; gap: .5rem; }
  .mover .col-tag { display: inline-block; margin-left: auto; }
}

/* 360 orbit (from concept 13) */
.orbit { display: grid; gap: 1.25rem; }
.ring, .spokes { display: none; }
.core { background: var(--tile); border-radius: var(--r); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); padding: 1.1rem 1.2rem; display: grid; gap: .55rem; width: 100%; max-width: 300px; margin-inline: auto; font-size: .88rem; position: relative; z-index: 3; }
.rec-head { display: flex; gap: .7rem; align-items: center; margin-bottom: .2rem; }
.rec-head b { display: block; font-size: 1.05rem; }
.rec-head span { color: var(--subtle); font-size: .82rem; }
.av.lg { width: 42px; height: 42px; font-size: .85rem; }
.core-row { display: flex; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--line); padding-top: .5rem; color: var(--subtle); }
.core-row b { color: var(--text); font-weight: 700; }
.sat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.sat li { min-width: 0; z-index: 2; }
.sat .sc { font: inherit; color: inherit; text-align: left; border: 0; cursor: pointer; width: 100%; display: flex; align-items: center; gap: .7rem; background: var(--tile); border-radius: 18px; padding: .7rem .85rem; min-width: 0; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); transition: box-shadow .3s, transform .3s var(--ease); }
.sat li:hover .sc, .sat .sc:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-lg); transform: scale(1.04); }
.sat .sc[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-lg); }
.sat .sc[aria-pressed="true"] .si { background: var(--accent-fill); color: #fff; }
.core-rows { display: grid; gap: .55rem; }
.core-detail { display: none; border-top: 1px solid var(--line); padding-top: .55rem; }
.core-detail .cd-t { font-weight: 700; color: var(--accent-ink); font-size: .82rem; }
.core-detail .cd-b { color: var(--text); line-height: 1.45; margin-top: .15rem; }
.core.has-detail .core-rows { display: none; }
.core.has-detail .core-detail { display: block; }
.sat .si { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-size: 1.05rem; flex: none; }
.sat span { display: grid; line-height: 1.3; font-size: .8rem; color: var(--subtle); }
.sat b { font-size: .95rem; color: var(--text); }
@media (min-width: 900px) {
  .orbit { display: block; position: relative; width: 640px; height: 640px; margin: 1rem auto 2.5rem; }
  .ring { display: block; position: absolute; inset: 0; margin: auto; border-radius: 50%; }
  .r1 { width: 100%; height: 100%; background: radial-gradient(circle, var(--tile-3) 0%, var(--tile-2) 100%); }
  .r1::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--line-2); animation: spin 120s linear infinite; }
  .r2 { width: 70%; height: 70%; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); }
  .r3 { width: 44%; height: 44%; background: var(--accent-soft); }
  .spokes { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
  .spokes line { stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .3s; }
  .js .spokes line { stroke-dashoffset: 1; }
  .spokes line.on { stroke: var(--accent); }
  .core { position: absolute; inset: 0; margin: auto; width: 248px; height: fit-content; }
  .sat { display: block; }
  /* Zero-size anchor at the orbit point; the card centres on it, so GSAP can own the li's transform. */
  .sat li { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; display: flex; align-items: center; justify-content: center; }
  .sat .sc { flex: none; width: 200px; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* How it connects (from concept 11) */
.pill-eb { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .9rem; border-radius: 999px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: .85rem; justify-self: start; }
.connect-card { background: var(--tile-2); border-radius: 32px; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); box-shadow: inset 0 0 0 1px var(--line-2); }
.dg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 72px; align-items: center; margin-top: 3.25rem; }
.side { position: relative; display: grid; gap: 14px; }
.side-lab { position: absolute; bottom: 100%; left: 0; margin-bottom: 12px; }
.side::before { content: ""; position: absolute; top: 38px; bottom: 38px; border-left: 1.5px solid var(--wire); transform-origin: 50% 50%; transition: transform .6s var(--ease) .35s; }
.side.in::before { right: -36px; }
.side.out::before { left: -36px; transition-delay: .9s; }
.nd { position: relative; height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--tile); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.nd > div { min-width: 0; }
.nd b { display: block; font-weight: 700; font-size: .95rem; }
.nd small { display: block; font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndi { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 1.1rem; }
.nd::after { content: ""; position: absolute; top: 50%; width: 36px; border-top: 1.5px solid var(--wire); transform-origin: 0 50%; transition: transform .45s var(--ease) var(--d, 0s); }
.nd::before { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 2px; background: var(--text); }
.in .nd::after { left: 100%; } .in .nd::before { right: -4px; }
.out .nd::after { right: 100%; } .out .nd::before { left: -4px; }
.spark { position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--accent); opacity: 0; pointer-events: none; }
.in .spark { left: 100%; }
.out .spark { right: calc(100% + 30px); }
.hub { position: relative; background: var(--tile); border-radius: var(--r); padding: 1.4rem; box-shadow: inset 0 0 0 1.5px var(--text), var(--shadow-lg); font-size: .9rem; }
.hub::before, .hub::after { content: ""; position: absolute; top: 50%; width: 36px; border-top: 1.5px solid var(--wire); transform-origin: 0 50%; transition: transform .4s var(--ease) .7s; }
.hub::before { right: 100%; } .hub::after { left: 100%; transition-delay: .85s; }
.hub-top { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; font-weight: 600; color: var(--muted); }
.hub-top .tg { background: var(--accent-soft); color: var(--accent-ink); padding: .25rem .6rem; border-radius: 999px; font-weight: 700; }
.hc-name { font-size: 1.9rem; font-weight: 800; letter-spacing: -.035em; margin: .5rem 0 .8rem; }
.kv { display: grid; gap: .4rem; margin: 0; }
.kv div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: .4rem; }
.kv dt { color: var(--subtle); }
.kv dd { margin: 0; font-weight: 600; text-align: right; }
.hub .ex { margin-top: .9rem; }
.js .side::before { transform: scaleY(0); }
.js .nd::after, .js .hub::before, .js .hub::after { transform: scaleX(0); }
.js .dg.live .side::before { transform: scaleY(1); }
.js .dg.live .nd::after, .js .dg.live .hub::before, .js .dg.live .hub::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .js .dg.live .spark { animation: spark 2.8s var(--ease) infinite; animation-delay: calc(1.6s + var(--d, 0s)); }
}
@keyframes spark { 0% { opacity: 0; transform: translateX(0); } 15%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(30px); } }
@media (max-width: 960px) {
  .dg { grid-template-columns: minmax(0, 1fr); row-gap: 14px; margin-top: 1.5rem; }
  .side-lab { position: static; margin: 10px 0 0; grid-column: 1 / -1; }
  .side { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side::before, .nd::before, .nd::after, .hub::before, .hub::after, .spark { display: none; }
  .nd { height: auto; min-height: 64px; padding-block: 12px; }
  .nd small { white-space: normal; }
  .hub { margin-block: 10px; width: 100%; max-width: 560px; justify-self: center; }
}
@media (max-width: 600px) { .side { grid-template-columns: minmax(0, 1fr); } }

/* Industries */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: 1rem; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.05rem; border-radius: 999px; background: var(--tile-2); text-decoration: none; font-weight: 600; font-size: .92rem; transition: background .2s, color .2s; }
.chip:hover { background: var(--text); color: var(--page); }

/* Pricing */
.prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.price { background: var(--tile); border-radius: var(--r); padding: 1.6rem; display: grid; gap: .4rem; align-content: start; box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.price:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.price.pop { background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); }
.price .amt { font: 800 2.4rem/1 var(--f-sans); letter-spacing: -.05em; margin-top: .4rem; }
.price .amt small { font-size: .9rem; font-weight: 600; letter-spacing: 0; opacity: .65; }
.price .alt { font-size: .85rem; color: var(--subtle); }
.price.pop .alt { color: var(--on-ink-2); }
.price ul { list-style: none; margin: .8rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .35rem; font-size: .9rem; }
.price.pop ul { border-color: rgba(255,255,255,.14); }
.price .label { display: flex; justify-content: space-between; }
.price.pop .label { color: #FF8A8C; }
.price-note { margin-top: 1.2rem; text-align: center; color: var(--subtle); font-size: .88rem; }
@media (max-width: 960px) { .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .prices { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 50rem; margin-inline: auto; }
.faq details { background: var(--tile); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.15rem 1.35rem; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { transition: transform .3s var(--ease); flex: none; }
.faq details[open] summary svg { transform: rotate(45deg); color: var(--accent); }
.faq details p { padding: 0 1.35rem 1.3rem; color: var(--muted); max-width: 62ch; }

/* CTA + footer */
.cta { position: relative; overflow: hidden; background: var(--accent-fill); color: #fff; border-radius: 32px; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1.25rem, 1rem + 3vw, 4rem); display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: end; grid-auto-flow: dense; row-gap: .6rem; }
.cta::before { content: ""; position: absolute; right: -10%; top: -60%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%); pointer-events: none; }
.cta h2 { position: relative; }
.cta p { color: #fff; margin-top: 1rem; font-size: 1.1rem; position: relative; }
.cta .ctas { justify-content: flex-end; position: relative; }
.cta .btn-light { box-shadow: none; background: #fff; color: #15191B; }
.cta .btn-ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
@media (max-width: 820px) { .cta { grid-template-columns: minmax(0, 1fr); } .cta .ctas { justify-content: flex-start; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .track { width: auto; flex-wrap: wrap; justify-content: center; }
  .track [aria-hidden="true"] { display: none; }
  .proof { -webkit-mask-image: none; mask-image: none; }
  .tile:hover, .btn:hover, .price:hover, .sat li:hover .sc { transform: none; }
}

/* Book a demo: fixed tab on the right edge opens a dialog that slides in from the right. */
button.btn { border: 0; cursor: pointer; }
.demo-tab { position: fixed; right: 0; top: 50%; z-index: 70; translate: 0 -50%; writing-mode: vertical-rl; rotate: 180deg; display: flex; align-items: center; gap: .5rem; padding: 1.1rem .7rem; border: 0; border-radius: 0 14px 14px 0; background: var(--accent-fill); color: #fff; font: 700 .95rem/1 var(--f-sans); letter-spacing: .01em; cursor: pointer; box-shadow: -6px 10px 24px -10px rgba(237,32,36,.6); transition: padding .25s var(--ease), background .2s; }
.demo-tab:hover, .demo-tab:focus-visible { background: #D41B1F; padding-right: 1rem; }
.demo-tab svg { rotate: 180deg; }
.demo-tab:active { scale: .97; }
@media (max-width: 600px) { .demo-tab { font-size: .82rem; padding: .85rem .55rem; } }
body .demo-dlg { --dd-accent: var(--accent); --dd-accent-fill: var(--accent-fill); --dd-accent-ink: var(--accent-ink); --dd-tile: var(--tile); --dd-tile-2: var(--tile-2); --dd-tile-3: var(--tile-3); --dd-text: var(--text); --dd-muted: var(--muted); --dd-subtle: var(--subtle); --dd-line: var(--line); --dd-line-2: var(--line-2); --dd-ok: var(--ok); --dd-ok-soft: var(--ok-soft); --dd-shadow: var(--shadow-lg); --dd-ease: var(--ease); } /* dialog itself: partials/demo-dialog */

/* Home-v3 additions: in-copy links, "Explore" links, longer SEO H1, 4-up row, store badge. */
.head p a, .tile p a, .faq p a, .step p a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; }
.tile.dark p a, .tile.red p a { color: #fff; }
.go { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-top: auto; font-weight: 700; font-size: .93rem; color: var(--accent-ink); text-decoration: none; }
.go:hover { text-decoration: underline; text-underline-offset: 3px; }
.tile.dark .go { color: #fff; }
.hero h1.long { max-width: 21ch; font-size: clamp(2.2rem, 1.3rem + 3.3vw, 3.9rem); }
.hero .kicker { margin-bottom: .2rem; }
.hero .sub { margin: 1.1rem auto 0; color: var(--subtle); font-size: .95rem; }
.s3 { grid-column: span 3; }
@media (max-width: 1000px) { .s3 { grid-column: span 6; } }
@media (max-width: 620px) { .s3 { grid-column: auto; } }
.store { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 1.1rem; border-radius: 12px; background: var(--text); color: var(--page); text-decoration: none; font-weight: 700; font-size: .92rem; }
.store small { display: block; font-weight: 500; font-size: .72rem; opacity: .8; }
.store.soon { background: var(--tile-2); color: var(--muted); }
.stores { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .6rem; }
.tile.dark .store { background: #fff; color: #15191B; }
.tile.dark .store.soon { background: var(--ink-2); color: var(--on-ink-2); }
.tile .stores + .go { margin-top: .2rem; }

/* Homepage (doc §9): announcement bar and H3 sub-point cards. */
.announce { margin: 0; padding: .55rem 16px; text-align: center; font-size: .88rem; font-weight: 600; background: var(--ink); color: var(--on-ink); }
.announce a { color: #fff; text-underline-offset: 3px; }
.announce span { opacity: .5; margin-inline: .5rem; }
.subs { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: .75rem; margin-top: .4rem; }
@media (min-width: 1001px) {
  .subs.c3 { --cols: 3; } .subs.c4 { --cols: 4; } .subs.c5 { --cols: 5; }
  .subs.c4 > :last-child:nth-child(4n+3) { grid-column: span 2; } /* 7 cards: 4 + 3, the last fills the row */
}
@media (min-width: 561px) and (max-width: 1000px) { .subs > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .subs { --cols: 1; } }
.subs > div { background: var(--tile-3); border-radius: var(--r-in); padding: 1rem 1.05rem; box-shadow: inset 0 0 0 1px var(--line); }
.subs h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin-bottom: .3rem; text-wrap: pretty; }
.subs p { font-size: .9rem; color: var(--muted); }
.tile.dark .subs > div { background: var(--ink-2); box-shadow: none; }
.tile.dark .subs h3 { color: #fff; }
.tile.dark .subs p { color: var(--on-ink-2); }
.cta h3 { font-size: 1rem; margin-top: .8rem; color: #fff; }
.cta .label { display: block; margin-bottom: 1rem; color: rgba(255,255,255,.8); position: relative; }

/* Copy beside a framed screenshot inside one tile, sub-cards full width below (no half-empty image tiles). */
.tile.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: center; }
.split .copy { display: flex; flex-direction: column; gap: .7rem; }
.split > .subs { grid-column: 1 / -1; }
.shot { background: var(--tile-2); border-radius: var(--r-in); padding: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.shot img { border-radius: calc(var(--r-in) - 4px); }
@media (max-width: 900px) { .tile.split { grid-template-columns: minmax(0, 1fr); } }
/* Showcase: one frame size so screenshots line up whatever their aspect ratio. */
#showcase .media img { aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
/* Feature visuals fill their tile instead of leaving an empty band. */
.due { flex: 1 1 auto; }
.due div { display: flex; flex-direction: column; justify-content: flex-end; }
.tile.red .mini-list svg, .tile.red .go { color: #fff; }