/* Layout: Ramp-style editorial grid. Left-aligned oversized headlines, product UI as the hero image,
   alternating light paper sections and ink bands. Single committed light theme with dark bands.
   Brand colors taken from univooz.com (logo, wordmark, product UI). */
:root {
  color-scheme: light;
  --paper: #F8F7FB;        /* page ground */
  --card: #FFFFFF;
  --ink: #140A26;          /* text + dark bands */
  --ink-2: #4E4A5C;        /* secondary text */
  --line: #E6E3EE;
  --brand: #6202F7;        /* univooz purple (wordmark + product UI) */
  --brand-tint: #F0E8FF;
  --signal: #B98CFF;       /* light violet highlight for dark bands */
  --ok: #1F9D62;
  --on-ink: #F8F7FB;
  --on-ink-2: #ABA3BF;
  --ink-line: #2A2140;

  --f-display: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1240px;
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; letter-spacing: -0.035em; line-height: 1.02; font-weight: 600; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 500; font-size: 15px; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: transform .15s ease, background .15s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--card); }
.btn-light { background: var(--on-ink); color: var(--ink); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }

/* Announcement */
.announce { background: var(--ink); color: var(--on-ink); font-size: 13.5px; }
.announce .wrap { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 40px; padding-block: 8px; text-align: center; flex-wrap: wrap; }
.tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; background: var(--signal); color: var(--ink); padding: 2px 7px; border-radius: 4px; font-weight: 500; }
.announce a { text-decoration: underline; text-underline-offset: 3px; color: var(--on-ink); }

/* Hero */
.hero { padding-block: 72px 0; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.hero h1 { font-size: clamp(36px, 8.6vw, 116px); letter-spacing: -0.05em; line-height: .98; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hh, .hh-l { display: block; }
.hh-l { white-space: nowrap; }
.rot { display: inline-grid; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; overflow: hidden; }
.rot em { grid-area: 1 / 1; white-space: nowrap; }
.rot em:not(.on):not(.out) { visibility: hidden; }
.rot .ch { display: inline-block; opacity: 0; transform: translateY(.7em); filter: blur(6px); transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .45s ease, filter .5s ease; transition-delay: calc(var(--i) * 35ms); }
.rot em.on .ch { opacity: 1; transform: none; filter: none; transition-delay: calc(220ms + var(--i) * 35ms); }
.rot em.out .ch { opacity: 0; transform: translateY(-.6em); filter: blur(6px); transition-duration: .4s, .3s, .35s; transition-delay: calc(var(--i) * 20ms); }
.rot:not(.ready) em.on { visibility: visible; }
.hero-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 600px; }
.hero-side p { font-size: 18px; color: var(--ink-2); max-width: 46ch; }
.signup { display: flex; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px; max-width: 460px; }
.signup input { flex: 1; width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; padding: 0 14px; color: var(--ink); }
.signup input:focus { outline: none; }
.signup:focus-within { border-color: var(--brand); }
.hero-sub { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.hero-sub a { text-decoration: underline; text-underline-offset: 3px; }
.form-note { font-size: 13px; color: var(--ok); min-height: 1em; }
@media (max-width: 480px) { .hero h1 { font-size: 11.6vw; } .hero-top { gap: 28px; } }

/* Product frame (hero mock) */
.stage { margin-top: 56px; position: relative; border-radius: var(--r-l) var(--r-l) 0 0; background: linear-gradient(180deg, var(--brand-tint), var(--paper)); padding: 28px 28px 0; overflow: hidden; }
.app { background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-m) var(--r-m) 0 0; box-shadow: 0 30px 60px -30px rgba(15,17,21,.25); overflow: hidden; }
.app-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.dots { display: flex; gap: 6px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.app-bar .crumb { font-weight: 500; color: var(--ink); }
.app-bar .live { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-family: var(--f-mono); font-size: 11.5px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(31,157,98,.5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(31,157,98,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,98,0); } }
.app-body { display: grid; grid-template-columns: 210px minmax(0, 1fr) 300px; min-height: 440px; }
.side { border-right: 1px solid var(--line); padding: 14px 10px; display: grid; align-content: start; gap: 2px; font-size: 13.5px; color: var(--ink-2); }
.side span { padding: 7px 10px; border-radius: 7px; display: flex; justify-content: space-between; }
.side span.on { background: var(--brand-tint); color: var(--brand); font-weight: 500; }
.side small { font-family: var(--f-mono); font-size: 11px; }
.side .grp { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 10px 6px; color: var(--ink-2); opacity: .7; }
.map { position: relative; background: #EEF0EA; min-width: 0; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kpis { position: absolute; left: 14px; right: 14px; top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.kpi b { display: block; font-family: var(--f-mono); font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }
.kpi span { font-size: 11.5px; color: var(--ink-2); }
.orders { border-left: 1px solid var(--line); padding: 14px; display: grid; align-content: start; gap: 8px; }
.orders h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; }
.orders h4 small { font-family: var(--f-mono); font-weight: 400; color: var(--ink-2); }
.ord { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; font-size: 12.5px; }
.ord .r1 { display: flex; justify-content: space-between; gap: 8px; }
.ord .id { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); }
.chip { font-family: var(--f-mono); font-size: 10.5px; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.chip.ok { background: #E3F4EB; color: #157048; }
.chip.go { background: var(--brand-tint); color: var(--brand); }
.chip.wait { background: #FFF3D3; color: #8A6100; }
.bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; } .bar i { display: block; height: 100%; background: var(--brand); }
.illus { position: absolute; right: 40px; bottom: 12px; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-2); opacity: .7; }
@media (max-width: 1080px) { .app-body { grid-template-columns: minmax(0, 1fr) 270px; } .side { display: none; } }
@media (max-width: 720px) { .stage { padding: 14px 14px 0; } .app-body { grid-template-columns: 1fr; } .map { min-height: 300px; } .orders { border-left: 0; border-top: 1px solid var(--line); } .kpi b { font-size: 16px; } .ord:nth-of-type(n+3) { display: none; } }

/* Stats */
.stats { background: var(--ink); color: var(--on-ink); }
.stats .wrap { display: grid; grid-template-columns: 1.1fr repeat(3, minmax(0, 1fr)); gap: 0; padding-block: 64px; }
.stats .lead { padding-right: 32px; }
.stats .lead h2 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.03em; line-height: 1.1; }
.stat { border-left: 1px solid var(--ink-line); padding: 0 28px; display: grid; align-content: start; gap: 10px; }
.stat b { font-family: var(--f-display); font-weight: 500; font-size: clamp(48px, 5vw, 72px); letter-spacing: -0.05em; line-height: 1; }
.stat b small { font-size: .45em; letter-spacing: -0.02em; color: var(--signal); margin-left: 4px; }
.stat h3 { font-size: 15px; letter-spacing: 0; font-weight: 600; line-height: 1.3; }
.stat p { font-size: 14px; color: var(--on-ink-2); }
@media (max-width: 900px) { .stats .wrap { grid-template-columns: 1fr; gap: 32px; } .stats .lead { padding: 0; } .stat { border-left: 0; border-top: 1px solid var(--ink-line); padding: 24px 0 0; } }

/* Section scaffolding */
.section { padding-block: 112px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 56px; }
.sec-head h2 { font-size: clamp(36px, 4.8vw, 64px); }
.sec-head p { font-size: 18px; color: var(--ink-2); max-width: 48ch; }
.sec-head .eyebrow { margin-bottom: 18px; display: block; }
@media (max-width: 900px) { .section { padding-block: 72px; } .sec-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; } }

/* Product tabs */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.tab { font: inherit; font-size: 14.5px; font-weight: 500; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.panel-copy { padding: 44px; display: grid; align-content: start; gap: 18px; }
.panel-copy h3 { font-size: clamp(28px, 2.8vw, 38px); }
.panel-copy p { color: var(--ink-2); font-size: 16.5px; }
.ticks { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; font-size: 15px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.ticks li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%236202F7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.panel-vis { background: var(--brand-tint); padding: 36px; display: grid; place-items: center; min-height: 460px; min-width: 0; }
.vis { width: 100%; max-width: 520px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 24px 48px -28px rgba(15,17,21,.3); padding: 18px; display: grid; gap: 12px; font-size: 13px; }
.vis-h { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; }
.vis-h small { font-family: var(--f-mono); font-weight: 400; color: var(--ink-2); font-size: 11.5px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.row .who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.av { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.spark { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 8px; }
.spark i { flex: 1; background: var(--brand); border-radius: 4px 4px 0 0; opacity: .85; }
.spark i.dim { background: var(--line); }
.axis { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-2); }
.code { background: var(--ink); color: var(--on-ink); border-radius: 10px; padding: 14px; font-family: var(--f-mono); font-size: 12px; line-height: 1.7; overflow-x: auto; white-space: pre; }
.code .k { color: var(--signal); } .code .s { color: #9FB2FF; } .code .c { color: var(--on-ink-2); }
.integr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.integr span { border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 12.5px; text-align: center; color: var(--ink-2); }
@media (max-width: 900px) { .panel { grid-template-columns: 1fr; } .panel-copy { padding: 28px; } .panel-vis { padding: 20px; min-height: 0; } }

/* Statement */
.statement { padding-block: 40px 112px; }
.statement p { font-family: var(--f-display); font-size: clamp(30px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -0.04em; font-weight: 500; max-width: 22ch; text-wrap: balance; }
.statement p span { color: var(--brand); }

/* Compare */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.col { border-radius: var(--r-l); padding: 36px; display: grid; gap: 18px; align-content: start; }
.col.before { background: var(--card); border: 1px solid var(--line); }
.col.after { background: var(--ink); color: var(--on-ink); }
.col h3 { font-size: 24px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.col li { padding: 13px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; }
.col.after li { border-color: var(--ink-line); }
.col.before li { color: var(--ink-2); }
.col.before li::before { content: "×"; font-family: var(--f-mono); color: #B4452E; }
.col.after li::before { content: "✓"; font-family: var(--f-mono); color: var(--signal); }
@media (max-width: 820px) { .compare { grid-template-columns: 1fr; } .col { padding: 26px; } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 30px; display: grid; gap: 14px; align-content: start; }
.step .n { font-family: var(--f-mono); font-size: 12px; color: var(--brand); letter-spacing: .06em; }
.step h3 { font-size: 24px; letter-spacing: -0.025em; }
.step p { color: var(--ink-2); font-size: 15px; }
.acct { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.acct span { font-family: var(--f-mono); font-size: 11.5px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* Go app band */
.go { background: var(--ink); color: var(--on-ink); overflow: hidden; }
.go .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: 96px 0; }
.go h2 { font-size: clamp(36px, 4.8vw, 64px); }
.go .eyebrow { color: var(--on-ink-2); display: block; margin-bottom: 18px; }
.go p.lead { font-size: 18px; color: var(--on-ink-2); max-width: 46ch; margin-top: 20px; }
.go .ticks li::before { background-color: var(--ink-line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23B98CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.go .ticks { margin: 28px 0 32px; color: var(--on-ink); }
.stores { display: flex; gap: 10px; flex-wrap: wrap; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; border: 1px solid var(--ink-line); border-radius: 12px; font-size: 14px; }
.store:hover { border-color: var(--on-ink-2); }
.store small { display: block; font-size: 10.5px; color: var(--on-ink-2); line-height: 1; }
.phone-wrap { display: flex; justify-content: center; align-self: end; padding-bottom: 0; }
.phone { width: 300px; max-width: 100%; background: #1B1E24; border: 1px solid var(--ink-line); border-bottom: 0; border-radius: 40px 40px 0 0; padding: 14px 14px 0; }
.screen { background: var(--paper); color: var(--ink); border-radius: 28px 28px 0 0; padding: 18px 16px 24px; display: grid; gap: 12px; font-size: 12.5px; }
.screen .top { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); }
.next { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.next b { font-size: 16px; letter-spacing: -0.02em; }
.mini-map { height: 120px; border-radius: 12px; background: #EEF0EA; overflow: hidden; }
.mini-map svg { width: 100%; height: 100%; display: block; }
.swipe { background: var(--brand); color: #fff; border-radius: 999px; height: 46px; display: flex; align-items: center; padding: 0 6px; gap: 10px; font-weight: 500; font-size: 13.5px; }
.swipe i { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--brand); font-style: normal; }
.shift { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); }
@media (max-width: 900px) { .go .wrap { grid-template-columns: 1fr; padding-block: 72px 0; } }

/* Why grid */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.why > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px; display: grid; gap: 10px; align-content: start; }
.why h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.why p { color: var(--ink-2); font-size: 15px; }
.why svg { width: 28px; height: 28px; margin-bottom: 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pills span { font-size: 13.5px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } .why > div { padding: 24px; } }
@media (min-width: 901px) and (max-width: 1100px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pricing */
.pricing { background: var(--card); border-block: 1px solid var(--line); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { border: 1px solid var(--line); border-radius: var(--r-l); padding: 32px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 18px; background: var(--paper); }
.plan.pop { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.plan-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan h3 { font-size: 22px; letter-spacing: -0.02em; }
.badge { font-family: var(--f-mono); font-size: 11px; background: var(--signal); color: var(--ink); padding: 3px 9px; border-radius: 999px; }
.price { display: flex; align-items: baseline; gap: 6px; }
.price small { font-size: 14px; color: var(--ink-2); }
.plan.pop .price small, .plan.pop .who-for { color: var(--on-ink-2); }
.price b { font-family: var(--f-display); font-size: 52px; font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.who-for { color: var(--ink-2); font-size: 15px; }
.plan .ticks { font-size: 14.5px; border-top: 1px solid var(--line); padding-top: 18px; margin: 0; }
.plan.pop .ticks { border-color: var(--ink-line); }
.plan.pop .ticks li::before { background-color: var(--ink-line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23B98CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan .btn { width: 100%; }
.plan-note { margin-top: 24px; font-size: 14px; color: var(--ink-2); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; } .plan { padding: 26px; } }

/* Blog */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post { display: grid; gap: 14px; align-content: start; }
.post-art { aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--r-m); overflow: hidden; background: var(--brand-tint); border: 1px solid var(--line); }
.post-art svg { width: 100%; height: 100%; display: block; }
.post .meta { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); display: flex; gap: 12px; }
.post h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; }
.post:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr; gap: 32px; } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; }
.faq-grid h2 { font-size: clamp(36px, 4.2vw, 56px); }
.faq-grid > div:first-child p { color: var(--ink-2); font-size: 17px; margin-top: 18px; max-width: 38ch; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; gap: 18px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--f-mono); font-size: 20px; color: var(--ink-2); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 0 22px; color: var(--ink-2); max-width: 64ch; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } summary { font-size: 16.5px; } }

/* CTA */
.cta { padding-block: 0 112px; }
.cta-box { background: var(--brand); color: #fff; border-radius: 28px; padding: 72px 56px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: end; position: relative; overflow: hidden; }
.cta-box h2 { font-size: clamp(36px, 4.6vw, 64px); position: relative; }
.cta-box p { font-size: 17px; opacity: .85; position: relative; }
.cta-act { display: grid; gap: 18px; position: relative; }
.cta-act .row2 { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-box .btn-outline { border-color: rgba(255,255,255,.4); color: #fff; }
.cta-box svg.routes { position: absolute; right: -40px; top: -40px; width: 520px; opacity: .22; pointer-events: none; }
@media (max-width: 900px) { .cta-box { grid-template-columns: 1fr; padding: 40px 24px; } }

/* Real product imagery */
.logo img { display: block; height: 26px; width: auto; }
.tab[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.stage { background: #fff; border: 1px solid var(--line); border-bottom: 0; padding: 0; }
.hero-shot { display: block; width: 100%; height: auto; }
.panel-vis { padding: 0; background: #fff; display: block; min-height: 0; }
.panel-vis img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; }
.go .wrap { padding-block: 96px; }
.go-photo { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--ink-line); }
.go-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.post-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .go .wrap { padding-block: 72px; } }

/* ───────── Header + Ramp-style mega menu ───────── */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.hdr.is-open { background: var(--card); }
.hdr-bar { display: flex; align-items: center; gap: 32px; height: 68px; }
.logo { display: inline-flex; align-items: center; flex: none; }
.hdr-nav { display: flex; align-items: center; gap: 2px; height: 100%; }
.hdr-link, .hdr-trigger { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 14.5px; color: var(--ink-2); background: none; border: 0; cursor: pointer; transition: background .15s, color .15s; }
.hdr-link:hover, .hdr-trigger:hover, .hdr-trigger[aria-expanded="true"] { color: var(--ink); background: var(--brand-tint); }
.hdr-link[aria-current="page"] { color: var(--ink); font-weight: 500; }
.chev { width: 10px; height: 10px; transition: transform .2s; }
.hdr-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.hdr-cta .signin { font-size: 14.5px; color: var(--ink-2); padding: 0 8px; }
.hdr-cta .signin:hover { color: var(--ink); }
.burger { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(20,10,38,.28); opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; }
.mega.is-shown { opacity: 1; transform: none; }
.mega-in { display: grid; grid-template-columns: 200px minmax(0, 1fr) 340px; gap: 40px; padding-block: 32px 40px; }
.mega-intro h3 { font-size: 22px; letter-spacing: -0.025em; line-height: 1.15; }
.mega-intro p { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.mega-intro a { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--brand); }
.mega-group h4 { margin: 0 0 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; }
.mega-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.mega-groups { display: grid; gap: 22px; align-content: start; }
.mi { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 12px; align-items: start; transition: background .15s; }
.mi:hover, .mi:focus-visible { background: var(--paper); }
.mi-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; }
.mi-ic svg { width: 18px; height: 18px; }
.mi > span:last-child { display: block; min-width: 0; }
.mi b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.mi > span:last-child > span { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
.mega-feature { border-radius: var(--r-m); background: var(--paper); border: 1px solid var(--line); overflow: hidden; display: grid; align-content: start; }
.mega-feature img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mega-feature div { padding: 16px 18px 18px; display: grid; gap: 6px; }
.mega-feature small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.mega-feature b { font-size: 16px; letter-spacing: -0.015em; line-height: 1.25; }
.mega-feature span { font-size: 13.5px; color: var(--ink-2); }
.mega-feature:hover b { text-decoration: underline; text-underline-offset: 3px; }
.scrim { position: fixed; inset: 0; background: rgba(20,10,38,.28); z-index: 40; opacity: 0; transition: opacity .18s; pointer-events: none; }
.scrim.is-shown { opacity: 1; pointer-events: auto; }

/* Mobile menu: full screen, drills into each section with a Back control */
.mnav { position: fixed; inset: 0; z-index: 70; background: var(--card); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.mnav-top { display: flex; align-items: center; justify-content: space-between; height: 68px; flex: none; border-bottom: 1px solid var(--line); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.mnav-stage { position: relative; flex: 1; overflow: hidden; }
.mnav-panel { position: absolute; inset: 0; overflow-y: auto; padding-block: 12px 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s; background: var(--card); }
.mnav-panel.sub { transform: translateX(100%); }
.mnav-panel.sub.is-active { transform: none; }
.mnav-panel.root.is-pushed { transform: translateX(-25%); opacity: 0; }
.mnav-row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); cursor: pointer; text-align: left; }
.mnav-row svg { width: 14px; height: 14px; color: var(--ink-2); }
.mnav-back { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink-2); padding: 8px 0 14px; cursor: pointer; }
.mnav-back svg { width: 12px; height: 12px; transform: rotate(180deg); }
.mnav-title { font-size: 28px; letter-spacing: -0.035em; margin-bottom: 10px; }
.mnav-panel .mega-group { margin-top: 18px; }
.mnav-panel .mega-links { grid-template-columns: 1fr; }
.mnav-panel .mi { padding: 10px 4px; }
.mnav-panel .mega-feature { margin-top: 20px; }
.mnav-foot { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid var(--line); padding-block: 14px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.mnav-foot .btn { width: 100%; }
body.menu-open { overflow: hidden; }

@media (max-width: 1080px) { .mega-in { grid-template-columns: minmax(0, 1fr) 300px; } .mega-intro { display: none; } }
@media (max-width: 980px) { .hdr-nav, .hdr-cta .signin, .hdr-cta .btn-ghost { display: none; } .burger { display: inline-flex; } .hdr-cta .btn-ink { display: none; } .mega, .scrim { display: none; } }

/* ───────── Footer ───────── */
.ftr { background: var(--ink); color: var(--on-ink); padding-block: 80px 40px; font-size: 14.5px; }
.ftr-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.ftr-brand p { color: var(--on-ink-2); margin-top: 16px; max-width: 32ch; }
.ftr-brand .logo img { filter: brightness(0) invert(1); }
.ftr h4 { margin: 0 0 16px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-2); font-weight: 400; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ftr-apps { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.ftr-brand .stores { margin-top: 28px; }
.ftr-legal { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--ink-line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--on-ink-2); font-size: 13px; }
.ftr-legal div { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 900px) { .ftr-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr-brand { grid-column: 1 / -1; } }

/* ───────── Shared page building blocks ───────── */
.phero { padding-block: 72px 80px; }
.phero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.phero .eyebrow { display: block; margin-bottom: 20px; color: var(--brand); }
.phero h1 { font-size: clamp(40px, 5.6vw, 76px); letter-spacing: -0.05em; line-height: .98; }
.phero .lead { font-size: 19px; color: var(--ink-2); margin-top: 24px; max-width: 50ch; }
.phero .ticks { margin-top: 28px; }
.phero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
.from { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 32px; padding: 10px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.from b { font-family: var(--f-display); font-size: 22px; color: var(--ink); letter-spacing: -0.03em; font-weight: 600; }
.phero-img { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.phero-img img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; }
.phero.center { text-align: left; padding-block: 72px 56px; }
.phero.center h1 { max-width: 16ch; }
@media (max-width: 900px) { .phero { padding-block: 48px 56px; } .phero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

.shot-band { padding-block: 0 112px; }
.shot { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.shot img { display: block; width: 100%; height: auto; }
.shot-cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 32px; }
.shot-cap h2 { font-size: clamp(30px, 3.6vw, 48px); }
.shot-cap p { color: var(--ink-2); font-size: 17px; max-width: 48ch; }
.shot.square { max-width: 920px; margin: 0 auto; }
@media (max-width: 900px) { .shot-band { padding-block: 0 72px; } .shot-cap { grid-template-columns: 1fr; gap: 14px; } }

.feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feat > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px; display: grid; gap: 16px; align-content: start; background: var(--paper); }
.feat .mi-ic { width: 40px; height: 40px; }
.feat p { font-size: 17px; line-height: 1.45; letter-spacing: -0.01em; }
@media (max-width: 900px) { .feat { grid-template-columns: 1fr; } .feat > div { padding: 24px; } }
@media (min-width: 901px) and (max-width: 1100px) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dark-band { background: var(--ink); color: var(--on-ink); }
.dark-band .eyebrow { color: var(--on-ink-2); }
.dark-band .sec-head p { color: var(--on-ink-2); }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink-line); }
.timeline li { padding: 28px 28px 32px 0; border-bottom: 1px solid var(--ink-line); display: grid; gap: 12px; align-content: start; }
.timeline li:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--ink-line); }
.timeline .n { font-family: var(--f-mono); font-size: 12px; color: var(--signal); letter-spacing: .06em; }
.timeline p { font-size: 17px; line-height: 1.45; }
@media (max-width: 900px) { .timeline { grid-template-columns: 1fr; } .timeline li, .timeline li:not(:nth-child(3n+1)) { padding: 22px 0; border-left: 0; } }

.plan-solo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.plan-solo > div { padding: 44px; display: grid; gap: 16px; align-content: start; }
.plan-solo > div:first-child { background: var(--ink); color: var(--on-ink); }
.plan-solo h2 { font-size: clamp(30px, 3.4vw, 44px); }
.plan-solo .price small, .plan-solo .muted { color: var(--on-ink-2); }
.plan-solo .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
@media (max-width: 900px) { .plan-solo { grid-template-columns: 1fr; } .plan-solo > div { padding: 28px; } .plan-solo .ticks { grid-template-columns: 1fr; } }

.xsell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.xcard { border-radius: var(--r-l); border: 1px solid var(--line); background: var(--card); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 42%; min-height: 220px; transition: transform .2s; }
.xcard:hover { transform: translateY(-2px); }
.xcard > div { padding: 28px; display: grid; gap: 10px; align-content: start; }
.xcard small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.xcard h3 { font-size: 24px; letter-spacing: -0.025em; line-height: 1.15; }
.xcard p { color: var(--ink-2); font-size: 15px; }
.xcard .go-on { margin-top: 6px; font-weight: 500; font-size: 14.5px; }
.xcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) { .xsell { grid-template-columns: 1fr; } .xcard { grid-template-columns: 1fr; } .xcard img { aspect-ratio: 16 / 9; height: auto; } }

.stores.light .store { border-color: var(--line); color: var(--ink); background: var(--card); }
.stores.light .store small { color: var(--ink-2); }

/* Pricing page */
.which { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.which > div { border: 1px solid var(--line); border-radius: var(--r-l); padding: 28px; background: var(--card); display: grid; gap: 12px; align-content: start; }
.which h3 { font-size: 22px; letter-spacing: -0.02em; }
.which p { color: var(--ink-2); }
.which a { font-weight: 500; color: var(--brand); font-size: 14.5px; }
@media (max-width: 900px) { .which { grid-template-columns: 1fr; } }
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
.cmp th, .cmp td { padding: 14px 20px; border-bottom: 1px solid var(--line); text-align: left; }
.cmp thead th { font-size: 14px; font-weight: 600; background: var(--paper); position: sticky; top: 0; }
.cmp thead th small { display: block; font-weight: 400; color: var(--ink-2); font-family: var(--f-mono); font-size: 12px; }
.cmp td:not(:first-child), .cmp th:not(:first-child) { text-align: center; width: 16%; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp .y { color: var(--brand); font-weight: 600; }
.cmp .n { color: var(--line); }
.cmp .grp td { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cform { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 36px; display: grid; gap: 18px; align-content: start; }
.cform h2 { font-size: 28px; letter-spacing: -0.03em; }
.frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fld { display: grid; gap: 6px; font-size: 13.5px; font-weight: 500; }
.fld .fl { display: block; }
.fld .fl em { font-style: normal; font-weight: 400; color: var(--ink-2); }
.fld.err input, .fld.err textarea, .fld.err .seg, .fld.err .ao { border-color: #B4452E; }
#c-user-l { padding-left: 18px; margin-bottom: 4px; }
.seg-fill { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.seg-fill span { text-align: center; padding: 7px 10px; line-height: 1.4; }
.cform-body { display: grid; gap: 18px; }
.cform-new { display: grid; gap: 18px; }
.cform-new[hidden] { display: none; }
.acct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.acct-opt { position: relative; display: flex; }
.acct-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.ao { flex: 1; display: grid; gap: 4px; align-content: start; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.ao-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); margin-bottom: 6px; transition: border .15s; }
.ao b { font-size: 15px; font-weight: 600; }
.ao small { font-size: 13px; font-weight: 400; color: var(--ink-2); line-height: 1.4; }
.ao a { margin-top: 6px; font-size: 13px; color: var(--brand); font-weight: 500; width: max-content; position: relative; z-index: 1; }
.ao a:hover { text-decoration: underline; text-underline-offset: 3px; }
.acct-opt input:checked + .ao { border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 1px var(--brand); }
.acct-opt input:checked + .ao .ao-dot { border: 5px solid var(--brand); }
.acct-opt input:focus-visible + .ao { outline: 2px solid var(--brand); outline-offset: 2px; }
.cform-done { display: grid; justify-items: center; align-content: center; text-align: center; gap: 14px; padding: 56px 12px; outline: none; }
.cform-done[hidden] { display: none; }
.cform-done h2 { font-size: clamp(26px, 3vw, 34px); max-width: 18ch; }
.cform-done p { color: var(--ink-2); max-width: 40ch; font-size: 16px; }
.cform-done p b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.cform-done .btn { margin-top: 8px; }
.cd-tick circle { fill: #E3F6EA; stroke: #1F9D55; stroke-width: 2.5; }
.cd-tick path { fill: none; stroke: #1F9D55; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.cform-done.show .cd-tick { animation: cd-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.cform-done.show .cd-tick path { animation: cd-draw .45s .3s ease-out forwards; }
@keyframes cd-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cd-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cd-tick path { stroke-dashoffset: 0; } }
@media (max-width: 640px) { .acct-grid { grid-template-columns: minmax(0, 1fr); } .ao { grid-template-columns: auto 1fr; column-gap: 12px; } .ao-dot { grid-row: 1 / span 3; margin: 2px 0 0; } .ao b, .ao small, .ao a { grid-column: 2; } }
.fld input, .fld textarea { font: inherit; font-size: 15px; font-weight: 400; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; }
.fld textarea { min-height: 140px; resize: vertical; }
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; width: max-content; max-width: 100%; flex-wrap: wrap; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: block; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.seg input:checked + span { background: var(--ink); color: var(--on-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.cside { display: grid; gap: 16px; }
.ccard { border-radius: var(--r-l); padding: 28px; display: grid; gap: 10px; background: var(--card); border: 1px solid var(--line); }
.ccard.dark { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ccard.dark p { color: var(--on-ink-2); }
.ccard h3 { font-size: 20px; letter-spacing: -0.02em; }
.ccard p { color: var(--ink-2); font-size: 15px; }
.mail { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.mail code { font-family: var(--f-mono); font-size: 15px; background: var(--brand-tint); color: var(--brand); padding: 8px 12px; border-radius: 10px; user-select: all; }
.ok-note { font-size: 14px; color: var(--ok); min-height: 1.2em; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } .cform { padding: 24px; } .frow { grid-template-columns: 1fr; } }

/* Blog */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.feature-post { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--line); }
.feature-post .post-art { aspect-ratio: 16 / 10; }
.feature-post h2 { font-size: clamp(30px, 3.4vw, 44px); margin-top: 14px; }
.feature-post p { color: var(--ink-2); font-size: 17px; margin-top: 16px; }
.feature-post:hover h2 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.cat { font-family: var(--f-mono); font-size: 11.5px; color: var(--brand); letter-spacing: .04em; }
.post p.ex { color: var(--ink-2); font-size: 14.5px; }
@media (max-width: 900px) { .feature-post { grid-template-columns: 1fr; gap: 24px; } }
.news { background: var(--brand-tint); border-radius: var(--r-l); padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.news h2 { font-size: clamp(26px, 3vw, 36px); }
.news p { color: var(--ink-2); margin-top: 8px; }
.news .signup { max-width: none; }
@media (max-width: 820px) { .news { grid-template-columns: 1fr; padding: 28px; } }

/* Article */
.art-head { padding-block: 56px 40px; max-width: 880px; }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); margin-bottom: 28px; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.art-head h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.045em; line-height: 1.02; }
.art-head .lead { font-size: 20px; color: var(--ink-2); margin-top: 22px; max-width: 60ch; }
.art-meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); margin-top: 28px; }
.art-meta .cat { font-size: 12.5px; }
.art-hero { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); }
.art-hero img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.art-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; gap: 56px; padding-block: 56px 112px; align-items: start; }
.toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); display: grid; gap: 4px; font-size: 13.5px; }
.toc h4 { margin: 0 0 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; }
.toc a { color: var(--ink-2); padding: 6px 0 6px 12px; border-left: 2px solid var(--line); line-height: 1.35; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--brand); border-left-color: var(--brand); font-weight: 500; }
.aside-card { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); background: var(--ink); color: var(--on-ink); border-radius: var(--r-l); padding: 24px; display: grid; gap: 12px; }
.aside-card h4 { margin: 0; font-size: 19px; letter-spacing: -0.02em; line-height: 1.2; font-weight: 600; }
.aside-card p { color: var(--on-ink-2); font-size: 14px; }
@media (max-width: 1100px) { .art-layout { grid-template-columns: 200px minmax(0, 1fr); } .art-layout > .aside-col { display: none; } }
@media (max-width: 820px) { .art-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 32px 72px; } .toc { position: static; display: none; } }

.prose { font-size: 17.5px; line-height: 1.7; max-width: 70ch; min-width: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.15; margin-top: 2em; scroll-margin-top: 100px; }
.prose h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; margin-top: 1.6em; scroll-margin-top: 100px; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose li > p { margin: 0; }
.prose li::marker { color: var(--brand); }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose .tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.5; }
.prose th, .prose td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--paper); font-weight: 600; }
.prose tr:last-child td { border-bottom: 0; }
.prose td p, .prose th p { margin: 0; }

/* Docs */
.docs { display: grid; grid-template-columns: 260px minmax(0, 1fr) 200px; gap: 48px; padding-block: 40px 112px; align-items: start; }
.dside { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); display: grid; gap: 14px; }
.dsearch { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 0 12px; }
.dsearch input { border: 0; background: transparent; font: inherit; font-size: 14px; padding: 11px 0; width: 100%; min-width: 0; color: var(--ink); }
.dsearch input:focus { outline: none; }
.dsearch:focus-within { border-color: var(--brand); }
.dsearch svg { width: 14px; height: 14px; color: var(--ink-2); flex: none; }
.dnav { display: grid; gap: 2px; }
.dnav h4 { margin: 8px 0 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; }
.dnav a { padding: 9px 12px; border-radius: 10px; font-size: 14.5px; color: var(--ink-2); display: flex; gap: 10px; }
.dnav a span { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); opacity: .7; padding-top: 2px; }
.dnav a:hover { background: var(--card); color: var(--ink); }
.dnav a[aria-current="page"] { background: var(--brand-tint); color: var(--brand); font-weight: 500; }
.dnav a[aria-current="page"] span { color: var(--brand); }
.dnav .empty { font-size: 13.5px; color: var(--ink-2); padding: 8px 12px; }
.dmain h1 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.04em; margin-bottom: 28px; }
.dpager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 64px; }
.dpager a { border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 20px; background: var(--card); display: grid; gap: 4px; }
.dpager a:hover { border-color: var(--brand); }
.dpager small { font-size: 12.5px; color: var(--ink-2); }
.dpager b { font-size: 16px; letter-spacing: -0.01em; }
.dpager .nx { text-align: right; grid-column: 2; }
.dhelp { margin-top: 24px; border-radius: var(--r-m); padding: 18px; background: var(--brand-tint); font-size: 13.5px; display: grid; gap: 8px; }
.dhelp a { color: var(--brand); font-weight: 500; }
@media (max-width: 1100px) { .docs { grid-template-columns: 240px minmax(0, 1fr); } .docs > .toc-col { display: none; } }
@media (max-width: 820px) { .docs { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 24px 72px; } .dside { position: static; } .dnav { grid-template-columns: 1fr; } }

/* Legal */
.legal-hero { padding-block: 64px 40px; border-bottom: 1px solid var(--line); }
.legal-hero h1 { font-size: clamp(38px, 5vw, 64px); letter-spacing: -0.045em; }
.legal-hero p { color: var(--ink-2); font-size: 18px; margin-top: 18px; max-width: 56ch; }
.legal-hero .stamp { display: inline-block; margin-top: 22px; font-family: var(--f-mono); font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); }
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; padding-block: 48px 112px; align-items: start; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } .legal-layout .toc { position: static; display: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dmenu > summary { display: none; }
@media (max-width: 820px) {
  .dmenu > summary { display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-weight: 500; font-size: 14.5px; }
  .dmenu > summary::-webkit-details-marker { display: none; }
  .dmenu > summary::after { content: "+"; font-family: var(--f-mono); color: var(--ink-2); }
  .dmenu[open] > summary::after { content: "–"; }
  .dmenu[open] > .dnav { margin-top: 8px; }
  .dhelp { display: none; }
}

/* Language switch */
.lang-sw { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; background: var(--card); }
.lang-sw span { padding: 4px 8px; border-radius: 999px; color: var(--ink-2); }
.lang-sw span.on { background: var(--ink); color: var(--on-ink); }
.lang-sw:hover span:not(.on) { color: var(--ink); }
.ftr-legal b { color: var(--on-ink); font-weight: 500; }
@media (max-width: 980px) { .hdr-cta .lang-sw { display: inline-flex; } }

/* Long Danish compounds must break instead of pushing the page sideways */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
.cta-box { overflow: hidden; }

/* ── Animated hero film: a looping product scene built from the real Univooz UI ── */
.film-wrap { --fw: 1200; --fh: 720; position: relative; aspect-ratio: 1200 / 720; padding: 0; overflow: hidden; background: #fff; }
.film { position: absolute; left: 0; top: 0; width: 1200px; height: 720px; transform-origin: 0 0; transform: scale(var(--s, 1)); font-family: inherit; color: var(--ink); transition: opacity .6s ease; }
.film.out { opacity: 0; }
.f-chrome { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #FBFAFD; }
.f-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #E3DFEA; }
.f-chrome span { margin-left: 14px; font: 500 12px/1 var(--mono, monospace); color: #8A8496; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; }
.f-live { margin-left: auto; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; line-height: 1; color: #1F9D55; }
.f-live em { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; animation: f-pulse 1.6s ease-in-out infinite; }
@keyframes f-pulse { 50% { box-shadow: 0 0 0 5px rgba(34,197,94,.18); } }
.f-body { display: grid; grid-template-columns: 330px 870px; height: 680px; }
.f-side { background: #17131E; color: #EDEAF3; padding: 18px 16px; display: grid; align-content: start; gap: 10px; overflow: hidden; }
.f-h { font: 600 12px/1 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #A59EB3; }
.f-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #221D2B; border-radius: 10px; padding: 3px; font-size: 13px; text-align: center; }
.f-tabs > span { padding: 7px 0; border-radius: 8px; color: #A59EB3; }
.f-tabs > span.on { background: #2E2839; color: #fff; }
.f-search { font-size: 13px; color: #7F7890; border: 1px solid #2E2839; border-radius: 9px; padding: 9px 12px; }
.f-ord { border: 1px dashed #2E2839; border-radius: 10px; padding: 11px 12px; display: grid; gap: 4px; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1), border-color .4s; transition-delay: var(--d); }
.f-ord > div { display: flex; justify-content: space-between; align-items: center; }
.f-ord b { font: 600 13px/1 var(--mono, monospace); }
.f-ord p { margin: 0; font-size: 13px; color: #C9C3D4; }
.f-ord small { font-size: 12px; color: #8D86A0; }
.f-chip { font-weight: 600; font-size: 10.5px; line-height: 1; text-transform: uppercase; letter-spacing: .04em; }
.f-chip > span { display: none; padding: 5px 8px; border-radius: 999px; }
.c0 { background: #2E2839; color: #B8B1C6; }
.c1 { background: rgba(185,140,255,.16); color: #CDB0FF; }
.c2 { background: rgba(245,158,11,.16); color: #FBBF5A; }
.c3 { background: rgba(34,197,94,.16); color: #5BD98B; }
.f-a { display: inline; } .f-b { display: none; }
.film .f-chip .c0 { display: inline-block; }
.film.s4 .f-chip .c0 { display: none; } .film.s4 .f-chip .c1 { display: inline-block; }
.film.s5 .f-ord.f-go .f-chip .c1 { display: none; } .film.s5 .f-ord.f-go .f-chip .c2 { display: inline-block; }
.film.s6 .f-ord.f-done .f-chip .c2 { display: none; } .film.s6 .f-ord.f-done .f-chip .c3 { display: inline-block; }
.film.s1 .f-ord { opacity: 1; transform: none; }
.film.s4 .f-ord { border-style: solid; }
.film.s4 .f-tabs .f-a { display: none; } .film.s4 .f-tabs .f-b { display: inline; }

.f-map { position: relative; overflow: hidden; }
.f-layer { position: absolute; left: 0; top: 0; width: 870px; height: 680px; }
.f-layer > svg { display: block; }
.f-city { font-weight: 600; font-size: 22px; line-height: 1; letter-spacing: .14em; fill: #B5B0C0; }
.f-area { font-weight: 600; font-size: 16px; line-height: 1; fill: #BDB8C7; }
.f-route { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.f-route.a { stroke: var(--brand); } .f-route.b { stroke: #F59E0B; }
.film.s4 .f-route { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1); }
.film.s4 .f-route.b { transition-delay: .25s; }
.f-depot rect { fill: var(--ink); }
.f-pin { opacity: 0; transition: opacity .3s ease var(--d); }
.f-pin circle { fill: #8C8599; stroke: #fff; stroke-width: 3; transition: fill .4s ease; }
.f-pin text { font-weight: 700; font-size: 13px; line-height: 1; fill: #fff; text-anchor: middle; }
.f-pin > * { transform-box: fill-box; transform-origin: center; }
.film.s1 .f-pin { opacity: 1; }
.film.s1 .f-pin > * { animation: f-pop .5s cubic-bezier(.3,1.6,.5,1) var(--d) both; }
@keyframes f-pop { from { transform: scale(0); } }
.film.s4 .f-pin.a circle { fill: var(--brand); transition-delay: calc(var(--d) + .6s); }
.film.s4 .f-pin.b circle { fill: #F59E0B; transition-delay: calc(var(--d) + .8s); }
.f-van { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 6px rgba(98,2,247,.18), 0 6px 14px rgba(20,10,38,.3); display: grid; place-items: center; offset-path: path('M300 150 L270 230 L380 300 L500 380'); offset-rotate: 0deg; offset-distance: 0%; opacity: 0; }
.film.s5 .f-van { opacity: 1; transition: opacity .3s; animation: f-drive 6s cubic-bezier(.45,0,.4,1) .2s forwards; }
@keyframes f-drive { to { offset-distance: 100%; } }

.f-auto, .f-route-card { position: absolute; right: 24px; top: 24px; border-radius: 16px; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.f-auto { width: 300px; background: #fff; border: 2px solid var(--brand); padding: 16px; display: grid; gap: 8px; box-shadow: 0 18px 40px rgba(20,10,38,.14); opacity: 0; transform: translateY(-10px) scale(.97); }
.f-auto-h { font-weight: 600; font-size: 15px; }
.f-auto small { color: #6F6880; font-size: 12.5px; }
.f-auto .f-c { text-align: center; }
.f-btn { background: var(--brand); color: #fff; border-radius: 10px; padding: 12px; text-align: center; font-weight: 600; font-size: 15px; transition: transform .15s ease, background .2s; }
.f-spin { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: f-rot .7s linear infinite; }
@keyframes f-rot { to { transform: rotate(360deg); } }
.film.s2 .f-auto { opacity: 1; transform: none; }
.film.s3 .f-btn { transform: scale(.96); background: #4E02C5; }
.film.s3 .f-btn .f-a { display: none; } .film.s3 .f-btn .f-b { display: inline; }
.film.s4 .f-auto { opacity: 0; transform: translateY(-8px) scale(.97); }
.f-route-card { width: 280px; background: #17131E; color: #EDEAF3; padding: 16px; display: grid; gap: 10px; box-shadow: 0 22px 50px rgba(20,10,38,.3); opacity: 0; transform: translateX(30px); }
.f-route-card > small { font: 600 11px/1 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: #A59EB3; }
.f-route-card > b { font-size: 17px; margin-top: -4px; }
.f-pills { display: flex; gap: 6px; font-size: 12px; font-weight: 600; }
.f-pills span { background: #2E2839; border-radius: 999px; padding: 5px 10px; }
.f-pills .f-saved { background: rgba(34,197,94,.16); color: #5BD98B; }
.f-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.f-stats div { background: #221D2B; border-radius: 10px; padding: 10px; text-align: center; display: grid; gap: 4px; }
.f-stats b { font-size: 18px; } .f-stats small { font-size: 10.5px; color: #8D86A0; text-transform: uppercase; letter-spacing: .06em; }
.f-route-card .f-lbl { margin-bottom: -4px; }
.f-driver { border: 1px solid #2E2839; border-radius: 10px; padding: 10px 12px; font-size: 14px; color: #A59EB3; }
.f-driver i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--violet, #B98CFF); color: var(--ink); font-weight: 700; font-size: 10px; line-height: 1; font-style: normal; margin-right: 8px; vertical-align: middle; }
.film.s4 .f-route-card { opacity: 1; transform: none; transition-delay: .5s; }
.film.s5 .f-driver { color: #fff; border-color: var(--brand); }
.film.s5 .f-driver .f-a { display: none; } .film.s5 .f-driver .f-b { display: inline; }
.f-toast { position: absolute; left: 24px; top: 24px; background: var(--ink); color: #fff; border-radius: 12px; padding: 11px 16px 11px 12px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; box-shadow: 0 14px 30px rgba(20,10,38,.25); opacity: 0; transform: translateY(-14px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.f-toast i { width: 22px; height: 22px; border-radius: 50%; background: #22C55E; display: grid; place-items: center; font-style: normal; font-size: 12px; }
.film.s5 .f-toast { opacity: 1; transform: none; }
.film.s6 .f-toast { opacity: 0; transform: translateY(-14px); }
.f-kpis { position: absolute; left: 24px; bottom: 24px; width: 600px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: #fff; border: 2px solid var(--brand); border-radius: 16px; padding: 12px; box-shadow: 0 18px 40px rgba(20,10,38,.14); opacity: 0; transform: translateY(24px); transition: opacity .45s, transform .6s cubic-bezier(.2,.8,.2,1); }
.f-kpis > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.f-kpis small { font-size: 11.5px; color: #6F6880; white-space: nowrap; }
.f-kpis b { font-size: 24px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.f-kpis em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #1F9D55; }
.film.s6 .f-kpis { opacity: 1; transform: none; }
.f-cursor { position: absolute; right: 80px; top: 600px; opacity: 0; filter: drop-shadow(0 3px 5px rgba(20,10,38,.3)); transition: right 1.1s cubic-bezier(.5,0,.2,1), top 1.1s cubic-bezier(.5,0,.2,1), opacity .3s, transform .15s; }
.film.s2 .f-cursor { opacity: 1; right: 150px; top: 108px; transition-delay: .35s; }
.film.s3 .f-cursor { transform: scale(.85); }
.film.s4 .f-cursor { opacity: 0; transition-delay: .4s; }
.film-pause { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.92); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.film-pause path { fill: currentColor; }
.film-pause .i-play, .film-pause[aria-pressed="true"] .i-pause { display: none; }
.film-pause[aria-pressed="true"] .i-play { display: block; }
.film-wrap.paused .film, .film-wrap.paused .film * { animation-play-state: paused !important; }
/* Phones: drop the sidebar and centre the map on the routes */
@media (max-width: 720px) {
  .film-wrap { aspect-ratio: 560 / 640; }
  .film { width: 560px; height: 640px; }
  .f-body { grid-template-columns: 560px; height: 600px; }
  .f-side { display: none; }
  .f-layer { left: -120px; top: -60px; }
  .f-auto { width: 250px; right: 16px; top: 16px; }
  .f-route-card { width: 230px; right: 16px; top: 16px; }
  .f-toast { left: 16px; top: 16px; }
  .f-kpis { left: 16px; right: 82px; bottom: 16px; width: auto; grid-template-columns: repeat(2, 1fr); }
  .f-kpis > div:nth-child(n+3) { display: none; }
  .film.s2 .f-cursor { right: 125px; top: 100px; }
  .f-chrome span { display: none; }
}

/* ── Platform tab films: one short looping scene per tab ── */
.panel-vis.film-wrap { aspect-ratio: 5 / 4; position: relative; overflow: hidden; background: var(--brand-tint); background-image: radial-gradient(rgba(98,2,247,.13) 1px, transparent 1.2px); background-size: 16px 16px; border-left: 1px solid var(--line); }
.film.pf { width: 640px; height: 512px; font-size: 15px; }
.film.pf.out { opacity: 0; }
/* generic step helpers: reveal (rv), pop, draw, swap (sw), press (pr) at step N */
.film .rv { opacity: 0; transform: translateY(12px); transition: opacity .45s ease var(--d, 0ms), transform .6s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
.film .rv.grow { opacity: 1; transform: scaleY(0); transform-origin: bottom; }
.film .rv.grow-x { opacity: 1; transform: scaleX(0); transform-origin: left; }
.film .pop { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .25s ease var(--d, 0ms), transform .5s cubic-bezier(.3,1.6,.5,1) var(--d, 0ms); }
.film .draw { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.6,0,.2,1) var(--d, 0ms); }
.film .sw > .f-b { display: none; }
.film .pr1, .film .pr2, .film .pr3, .film .pr4, .film .pr5, .film .pr6 { transition: transform .15s ease, filter .15s ease; }
.film.s1 .rv.at1, .film.s1 .pop.at1 { opacity: 1; transform: none; }
.film.s1 .draw.at1 { stroke-dashoffset: 0; }
.film.s1 .sw1 > .f-a { display: none; }.film.s1 .sw1 > .f-b { display: inline-block; }
.film.s1 .pr1 { transform: scale(.94); filter: brightness(.88); }
.film.s2 .pr1 { transform: none; filter: none; }
.film.s2 .rv.at2, .film.s2 .pop.at2 { opacity: 1; transform: none; }
.film.s2 .draw.at2 { stroke-dashoffset: 0; }
.film.s2 .sw2 > .f-a { display: none; }.film.s2 .sw2 > .f-b { display: inline-block; }
.film.s2 .pr2 { transform: scale(.94); filter: brightness(.88); }
.film.s3 .pr2 { transform: none; filter: none; }
.film.s3 .rv.at3, .film.s3 .pop.at3 { opacity: 1; transform: none; }
.film.s3 .draw.at3 { stroke-dashoffset: 0; }
.film.s3 .sw3 > .f-a { display: none; }.film.s3 .sw3 > .f-b { display: inline-block; }
.film.s3 .pr3 { transform: scale(.94); filter: brightness(.88); }
.film.s4 .pr3 { transform: none; filter: none; }
.film.s4 .rv.at4, .film.s4 .pop.at4 { opacity: 1; transform: none; }
.film.s4 .draw.at4 { stroke-dashoffset: 0; }
.film.s4 .sw4 > .f-a { display: none; }.film.s4 .sw4 > .f-b { display: inline-block; }
.film.s4 .pr4 { transform: scale(.94); filter: brightness(.88); }
.film.s5 .pr4 { transform: none; filter: none; }
.film.s5 .rv.at5, .film.s5 .pop.at5 { opacity: 1; transform: none; }
.film.s5 .draw.at5 { stroke-dashoffset: 0; }
.film.s5 .sw5 > .f-a { display: none; }.film.s5 .sw5 > .f-b { display: inline-block; }
.film.s5 .pr5 { transform: scale(.94); filter: brightness(.88); }
.film.s6 .pr5 { transform: none; filter: none; }
.film.s6 .rv.at6, .film.s6 .pop.at6 { opacity: 1; transform: none; }
.film.s6 .draw.at6 { stroke-dashoffset: 0; }
.film.s6 .sw6 > .f-a { display: none; }.film.s6 .sw6 > .f-b { display: inline-block; }
.film.s6 .pr6 { transform: scale(.94); filter: brightness(.88); }
.film.s7 .pr6 { transform: none; filter: none; }
.film.s7 .rv.at7, .film.s7 .pop.at7 { opacity: 1; transform: none; }
.film.s7 .draw.at7 { stroke-dashoffset: 0; }
.film.s7 .sw7 > .f-a { display: none; }.film.s7 .sw7 > .f-b { display: inline-block; }
.film.s7 .pr7 { transform: scale(.94); filter: brightness(.88); }
.film .pc { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 34px rgba(20,10,38,.10); padding: 16px; }
.film .pc.dk { background: #17131E; border-color: #17131E; color: #EDEAF3; box-shadow: 0 18px 40px rgba(20,10,38,.28); }
.film .pc.br { border: 2px solid var(--brand); }
.film .pc-h { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.film .pc small { color: #6F6880; font-size: 12px; }
.film .pc.dk small { color: #8D86A0; }
.film .dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; animation: f-pulse 1.6s ease-in-out infinite; }
.film .st { font-weight: 600; font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: .04em; }
.film .st > span, .film .st.s-new, .film .st.s-go, .film .st.s-ok { padding: 5px 8px; border-radius: 999px; }
.film .s-new { background: rgba(185,140,255,.18); color: #CDB0FF; }
.film .s-go { background: rgba(245,158,11,.16); color: #FBBF5A; }
.film .s-ok { background: rgba(34,197,94,.16); color: #4CC97E; }
.film .pc:not(.dk) .s-go { color: #B45309; }.film .pc:not(.dk) .s-ok { color: #15803D; }
.film .prog { height: 6px; border-radius: 3px; background: rgba(127,120,144,.25); overflow: hidden; }
.film .prog i { display: block; height: 100%; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.4,0,.2,1) .2s; }
.film .toast2 { display: flex; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; }
.film .toast2 > i { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #22C55E; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.film .toast2 > div { display: grid; gap: 2px; }.film .toast2 b { font-size: 14px; }
.film .chip2 { font-size: 12px; font-weight: 600; background: var(--brand-tint); color: var(--brand); border-radius: 999px; padding: 6px 10px; }
.film .btn2 { font-size: 13px; font-weight: 600; background: var(--ink); color: #fff; border-radius: 9px; padding: 8px 12px; display: inline-block; }
.film .lg-top { display: flex; align-items: center; gap: 10px; }.film .lg-top .pc-h { margin-right: auto; }
.film .tbl { display: grid; gap: 2px; font-size: 13px; }
.film .tbl .th, .film .tbl .tr { display: grid; gap: 8px; padding: 8px 10px; border-radius: 8px; align-items: center; }
.film .tbl .th { color: #8A8496; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.film .tbl .tr { border-top: 1px solid var(--line); border-radius: 0; }
.film .tbl .tr span:last-child, .film .tbl .th span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* dashboard */
.film .kpis4 { left: 24px; top: 24px; width: 592px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; }
.film .kpis4 > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.film .kpis4 b { font-size: 24px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pf-dash .chart { left: 24px; top: 140px; width: 330px; height: 220px; display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.film .bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; }
.film .bars > div { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 6px; text-align: center; }
.film .bars i { align-self: end; height: var(--h); border-radius: 6px 6px 3px 3px; background: #D9C7FF; }
.film .bars i.hi { background: var(--brand); }
.film .feed { left: 370px; top: 140px; width: 246px; height: 348px; display: grid; align-content: start; gap: 8px; }
.film .feed .fd-row { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-radius: 10px; background: #221D2B; font-size: 13px; }
.film .feed .fd-row b { font-family: var(--mono, monospace); font-weight: 600; }
.film .track { left: 24px; top: 376px; width: 330px; display: grid; gap: 8px; }
.film .track p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.film.s5 .track .prog i { transform: scaleX(.7); }

/* routing */
.pf-map { position: absolute; inset: 0; }
.pf-route .draw { stroke-width: 5; }.film .draw.a { stroke: var(--brand); }.film .draw.b { stroke: #F59E0B; }.film .draw.c { stroke: #F59E0B; stroke-dasharray: .1 .08; stroke-dashoffset: 0; opacity: 0; transition: opacity .5s ease .3s; }
.film.s4 .draw.c { opacity: 1; }
.film .bundle { fill: rgba(98,2,247,.06); stroke: var(--brand); stroke-width: 2; stroke-dasharray: 6 6; transform-box: fill-box; transform-origin: center; }
.film.s3 .bundle.rv { opacity: 0; transition-delay: 0ms; }
.film .pin circle { fill: #8C8599; stroke: #fff; stroke-width: 3; transition: fill .4s ease .6s; }
.film .pin text { font-weight: 700; font-size: 12px; fill: #fff; text-anchor: middle; }
.film.s3 .pin.a circle { fill: var(--brand); }.film.s3 .pin.b circle { fill: #F59E0B; }
.film .pin.n circle { fill: #E0368A; transition: none; }
.pf-route .btag { left: 24px; top: 24px; display: grid; gap: 4px; }
.pf-route .btag b { font-size: 15px; }
.film.s3 .btag.rv { opacity: 0; transition-delay: 0ms; }
.pf-route .toast2 { right: 24px; top: 24px; }
.film.pf-route.s5 .toast2.rv { opacity: 0; transition-delay: 0ms; }
.film .save { left: 24px; right: 24px; bottom: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; }
.film .save > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.film .save b { font-size: 24px; letter-spacing: -0.03em; color: #15803D; }

/* reporting */
.film .ledger { left: 24px; top: 24px; width: 592px; height: 464px; display: grid; align-content: start; gap: 14px; }
.film .trend { display: block; width: 100%; height: auto; }
.film .trend .draw { stroke-width: 3; }
.film .trend .area { fill: rgba(98,2,247,.08); }
.pf-report .tbl .th, .pf-report .tbl .tr { grid-template-columns: .9fr 1.1fr 1.1fr .7fr .9fr; }
.pf-report .tr.mark3 { transition: background .4s, opacity .45s ease var(--d), transform .6s cubic-bezier(.2,.8,.2,1) var(--d); }
.film.s3 .tr.mark3 { background: var(--brand-tint); }
.film .audit { right: 40px; top: 300px; width: 290px; display: grid; gap: 4px; }
.film .audit b { font-size: 14px; }.film .audit span { font-size: 13px; color: #C9C3D4; }
.film.s5 .audit.rv { opacity: 0; transition-delay: 0ms; }
.pf-report .toast2, .pf-pay .toast2 { right: 24px; bottom: 24px; }

/* KYC */
.film .kyc { left: 24px; top: 24px; width: 380px; height: 464px; display: grid; align-content: start; gap: 12px; }
.film .kwho { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #2E2839; }
.film .kwho > i { width: 44px; height: 44px; border-radius: 50%; background: #B98CFF; color: #140A26; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.film .kwho > div { display: grid; gap: 2px; margin-right: auto; }.film .kwho b { font-size: 16px; }
.film .doc { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: #221D2B; font-size: 14px; }
.film .doc .prog { grid-column: 1 / -1; height: 4px; }
.film.s1 .doc .p2 i { transform: scaleX(1); }
.film.s2 .doc .p3 i { transform: scaleX(1); }
.film.s3 .doc .p4 i { transform: scaleX(1); }
.film.s4 .doc .p5 i { transform: scaleX(1); }
.film .doc .prog i { background: #22C55E; transition-duration: .9s; }
.film .contract { left: 416px; top: 120px; width: 200px; display: grid; gap: 10px; }
.film .kv { display: flex; justify-content: space-between; font-size: 13px; color: #6F6880; }.film .kv b { color: var(--ink); }
.film .signed { font-size: 13px; font-weight: 600; color: #15803D; background: rgba(34,197,94,.12); border-radius: 8px; padding: 7px 10px; }

/* payroll & CO2 */
.film .payroll { left: 24px; top: 24px; width: 592px; display: grid; gap: 10px; }
.pf-pay .tbl .th, .pf-pay .tbl .tr { grid-template-columns: 1.6fr .8fr .8fr 1fr; }
.pf-pay .tr.bonus { color: #15803D; font-weight: 600; background: rgba(34,197,94,.08); }
.film .co2 { left: 24px; top: 278px; width: 380px; height: 210px; display: grid; align-content: start; gap: 12px; }
.film .hb { display: grid; grid-template-columns: 64px 1fr 52px; gap: 10px; align-items: center; font-size: 13px; }
.film .hb i { height: 10px; width: var(--w); border-radius: 5px; background: #4CC97E; }
.film .hb b { text-align: right; font-variant-numeric: tabular-nums; }
.film .co2 .down { color: #4CC97E !important; font-weight: 600; font-size: 13px; }
.film .settle { left: 420px; top: 278px; width: 196px; display: grid; gap: 8px; }
.film .settle > b { font-size: 26px; letter-spacing: -0.03em; }.film .settle .btn2 { justify-self: start; margin-top: 6px; }
.film.pf-pay.s5 .settle.rv { opacity: .35; }

/* integrations */
.film .wires { position: absolute; inset: 0; }
.film .draw.w { stroke: #B9A2EE; stroke-width: 2.5; }
.film .hub { position: absolute; left: 284px; top: 144px; width: 72px; height: 72px; border-radius: 20px; background: #fff; border: 2px solid var(--brand); display: grid; place-items: center; box-shadow: 0 14px 34px rgba(98,2,247,.22); }
.film .node { width: 180px; display: grid; gap: 2px; padding: 12px 14px; }
.film .node b { font-size: 15px; }
.film .pkt { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(98,2,247,.18); opacity: 0; offset-rotate: 0deg; }
.film .pkt.k1 { offset-path: path('M140 95 C220 95 250 180 320 180'); }
.film .pkt.k2 { offset-path: path('M320 180 C390 180 420 95 500 95'); }
.film .pkt.k3 { offset-path: path('M140 265 C220 265 250 180 320 180'); }
.film .pkt.k4 { offset-path: path('M320 180 C390 180 420 265 500 265'); }
.film.s2 .pkt { opacity: 1; animation: f-flow 1.8s cubic-bezier(.5,0,.5,1) infinite; }
.film.s2 .pkt.k2 { animation-delay: .5s; }.film.s2 .pkt.k3 { animation-delay: .9s; }.film.s2 .pkt.k4 { animation-delay: 1.3s; }
@keyframes f-flow { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.film .log { left: 24px; top: 340px; width: 592px; height: 148px; display: grid; align-content: start; gap: 6px; }
.film .ln { display: grid; grid-template-columns: 54px 1fr 70px 48px; gap: 10px; align-items: center; font-family: var(--mono, monospace); font-size: 13px; padding: 5px 8px; border-radius: 8px; background: #221D2B; }
.film .ln code { color: #CDB0FF; font: inherit; }.film .ln b { color: #4CC97E; font-weight: 600; }.film .ln small { text-align: right; }

.film.s5 .tr.mark3 { background: transparent; }
.panel-copy .film-pause { position: static; width: auto; height: auto; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; font: inherit; font-size: 13px; color: var(--ink-2); background: transparent; }
.panel-copy .film-pause:hover { color: var(--ink); border-color: var(--ink-2); }

/* ── Film mosaic (solution pages): one app screen, several animated blocks ── */
.mosaic { border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--card); box-shadow: 0 30px 60px -30px rgba(20,10,38,.25); }
.mo-chrome { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); background: var(--paper); font-size: 12.5px; color: var(--ink-2); }
.mo-chrome > i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mo-chrome span { margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-family: var(--f-mono); font-size: 11.5px; }
.mo-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
.mo-live em { width: 7px; height: 7px; border-radius: 50%; background: #1F9D55; box-shadow: 0 0 0 3px rgba(31,157,85,.18); }
.mosaic .mo-pause { position: static; width: 28px; height: 28px; margin-left: 10px; }
.mo-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; padding: 12px; background: var(--paper); }
.mo-tile { aspect-ratio: 5 / 4; border-radius: 14px; border: 1px solid var(--line); background: var(--brand-tint); background-image: radial-gradient(rgba(98,2,247,.13) 1px, transparent 1.2px); background-size: 16px 16px; }
.mo-tile.mo-big { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 760px) {
  .mo-grid { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 8px; }
  .mo-tile.mo-big { grid-row: auto; aspect-ratio: 5 / 4; }
  .mo-chrome span { display: none; }
}

/* ── Work-email field in the purple CTA banner ── */
.cta-box .lead-form { max-width: 460px; border-color: transparent; box-shadow: 0 10px 30px -12px rgba(20,10,38,.45); position: relative; }
.cta-box .lead-form:focus-within { border-color: #fff; }
.cta-box .form-note { color: #fff; font-size: 13.5px; min-height: 0; position: relative; }
.cta-box .form-note:empty { display: none; }
.cta-demo { position: relative; color: #fff; font-size: 14.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; width: max-content; }
.cta-demo:hover { opacity: .85; }
.cta-box .form-note[style] { color: #fff !important; }