/* ============================================================
   Ordia Automation — production stylesheet (Main)
   Direction: warm cream paper, warm-ink text, muted coral used
   sparingly, vintage butterfly flock, mono labels, calm motion.
   Tokens live in :root; components read tokens only.
   ============================================================ */
:root{
  --bg:#f3eee2;            /* warm cream (paper ground) */
  --surface:#fbf7ec;       /* cards / panels */
  --fg:#26231d;            /* warm near-black */
  --ink:#26231d;           /* buttons / neutral fill */
  --ink-fg:#f3eee2;
  --muted:#6d6656;         /* AA on --bg (4.9:1) and --surface */
  --line:#e6ddca;
  --line-2:#efe8d7;
  --soft-mark:#96482f;     /* muted coral, AA at small sizes (5.6:1 on bg) */
  --ok:#4f6a43;            /* terminal success green, AA (5.7:1) */
  --band-bg:#332f28;       /* dark shell around the brand band */
  --band-card:#efe5d0;     /* paper panel inside the band */
  --band-muted:#665e4d;    /* AA on --band-card (5.1:1) */
  --term-body:#514c40;
  --term-dim:#766d5a;
  --term-bar:#f7f1e4;
  --term-dot:#e2d9c8;
  --line-strong:#cdc3ab;   /* hover borders */
  --line-strong-2:#d9cfb8;
  --feat-border:#d9c3a8;   /* featured plan */
  --radius:12px;
  --nav-h:64px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
}

/* ---- Ukrainian type ----
   The system face draws a clumsy ї at heavy display weights, so Ukrainian
   pages use self-hosted Onest (OFL; a neutral, system-like sans drawn with
   Ukrainian Cyrillic in mind — the most even ї/є of the ones compared).
   Variable weight, two subsets, fetched only when the page is Ukrainian. */
@font-face{font-family:"Onest var";font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/onest-var-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest var";font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/onest-var-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}
html[lang="uk"]{--sans:"Onest var",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

/* ---- dark theme (manual toggle, light is the brand default) ----
   Every value verified WCAG AA against its ground. The brand band keeps its
   cream paper card in both themes; its local tokens are pinned below. */
[data-theme="dark"]{
  --bg:#211e19;
  --surface:#2a2620;
  --fg:#f0ead9;
  --ink:#f0ead9;
  --ink-fg:#26231d;
  --muted:#a89f8c;
  --line:#3a352c;
  --line-2:#332e26;
  --soft-mark:#cf8265;
  --ok:#9ab785;
  --band-bg:#191612;
  --term-body:#d8cfba;
  --term-dim:#a2977f;
  --term-bar:#322d25;
  --term-dot:#453e33;
  --line-strong:#55503f;
  --line-strong-2:#4e4636;
  --feat-border:#5a4c38;
}
[data-theme="dark"] .card:nth-child(1) .ic{background:#2e3a36;color:#9fc4b8}
[data-theme="dark"] .card:nth-child(2) .ic{background:#3d2f29;color:#d8a08d}
[data-theme="dark"] .card:nth-child(3) .ic{background:#2e3341;color:#a9b6dd}
[data-theme="dark"] .card:nth-child(4) .ic{background:#3a3320;color:#cbb571}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
/* Lenis smooth scroll (self-hosted). When active it owns scrolling, so the
   native smooth-scroll above is turned off to avoid the two fighting. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
a{color:inherit}
main section[id],section[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

.nav-sentinel{position:absolute;top:0;height:140px;width:1px;pointer-events:none;visibility:hidden}

/* ---- skip link ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--ink-fg);
  padding:10px 16px;border-radius:0 0 10px 0;font-size:14px;text-decoration:none}
.skip-link:focus{left:0}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease)}
.nav.scrolled{box-shadow:0 10px 28px -22px rgba(90,70,50,.5)}
.nav-in{display:flex;align-items:center;gap:20px;height:var(--nav-h)}
/* brand: "Ordia." wordmark, coral full stop (logo option B).
   In the nav the "rdia" collapses away on scroll, leaving "O." */
.brand{display:flex;align-items:center;font-weight:730;letter-spacing:-.025em;font-size:18.5px;text-decoration:none}
.brand .dot{color:var(--soft-mark)}
.nav .brand .rest{max-width:2.6em;overflow:hidden;
  transition:max-width .75s cubic-bezier(.55,.06,.25,1),opacity .55s cubic-bezier(.55,.06,.25,1)}
.nav.scrolled .brand .rest{max-width:0;opacity:0}
@media (prefers-reduced-motion:reduce){
  .nav .brand .rest{transition:none}
}
.nav .links{display:flex;gap:22px;margin-left:8px}
.nav .links a{color:var(--muted);text-decoration:none;font-size:14px;transition:color .18s}
.nav .links a:hover{color:var(--fg)}
.nav .links a:focus-visible,.foot a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.lang button{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;border:0;background:transparent;
  color:var(--muted);padding:8px 12px;cursor:pointer;transition:background .18s,color .18s}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--ink-fg)}
.lang button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* ---- theme toggle ---- */
.theme-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);cursor:pointer;padding:0;transition:color .18s,border-color .18s}
.theme-btn:hover{color:var(--fg);border-color:var(--line-strong)}
.theme-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.theme-btn svg{width:16px;height:16px;display:block}
.theme-btn .ic-sun{display:none}
[data-theme="dark"] .theme-btn .ic-sun{display:block}
[data-theme="dark"] .theme-btn .ic-moon{display:none}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;border-radius:10px;
  padding:11px 18px;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform .16s var(--ease),filter .2s,border-color .2s,background .2s}
.btn:active{transform:scale(.975)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn-primary{background:var(--ink);color:var(--ink-fg)}
.btn-ghost{background:var(--surface);color:var(--fg);border-color:var(--line)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{filter:brightness(1.28);transform:translateY(-1px)}
  .btn-ghost:hover{border-color:var(--line-strong);transform:translateY(-1px)}
}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;
  min-height:clamp(560px,84vh,860px);padding:clamp(40px,6vw,72px) 0 clamp(44px,6vw,72px)}
/* flow field lives behind the copy; a scrim keeps the headline legible */
.hero-flow{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 92% at 12% 45%,var(--bg),color-mix(in srgb,var(--bg) 55%,transparent) 48%,transparent 74%)}
.hero-in{position:relative;z-index:2;width:100%}
.hero-copy{max-width:min(100%,720px)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px}
.hero-head{font-weight:730;font-size:clamp(34px,5.6vw,64px);line-height:1.05;letter-spacing:-.033em;margin:0;
  text-wrap:balance;padding-bottom:.06em}
.hero-head .lead{display:block}
.hero-head em{font-style:italic;font-weight:730}
/* kinetic roller: outcome words cycle under the static lead */
.roll{display:inline-block;overflow:hidden;height:1.08em;vertical-align:bottom;color:var(--soft-mark);
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.roll-track{display:flex;flex-direction:column;transition:transform .62s var(--ease-drawer)}
.roll-track.blur{filter:blur(.6px)}
.roll-track span{height:1.08em;line-height:1.08em;white-space:nowrap}
.hero .sub{color:var(--muted);font-size:clamp(16px,1.7vw,19px);line-height:1.55;max-width:46ch;margin:22px 0 30px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.02em}
/* visually hidden, still read by assistive tech and crawlers */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- butterfly wings (public-domain Hewitson specimens) ----
   The flock appears ONCE on the page, inside the brand band (Anthropic-style
   expanding panel), never in the hero. */
.wings{display:flex;width:var(--w);height:var(--h);opacity:.94}
.wing{width:50%;height:100%;background-size:100% 100%;background-repeat:no-repeat;filter:saturate(.9)}
.wing.l{transform-origin:100% 50%;transform:perspective(560px) rotateY(18deg)}
.wing.r{transform-origin:0% 50%;transform:perspective(560px) rotateY(-18deg)}
/* wing bursts: app.js schedules 1, 2, or a fast 4-in-a-row, like a live specimen */
.pbfly.flap .wing.l{animation:flapBurstL var(--fbd,.3s) ease-in-out var(--fbc,1)}
.pbfly.flap .wing.r{animation:flapBurstR var(--fbd,.3s) ease-in-out var(--fbc,1)}
@keyframes flapBurstL{0%,100%{transform:perspective(560px) rotateY(18deg)}50%{transform:perspective(560px) rotateY(60deg)}}
@keyframes flapBurstR{0%,100%{transform:perspective(560px) rotateY(-18deg)}50%{transform:perspective(560px) rotateY(-60deg)}}

/* wing artwork: one class per wing half, files in assets/wings/ */
.w-zeuxidia-4-l{background-image:url('assets/wings/zeuxidia-4-l.webp')}
.w-zeuxidia-4-r{background-image:url('assets/wings/zeuxidia-4-r.webp')}
.w-papilioXII-4-l{background-image:url('assets/wings/papilioXII-4-l.webp')}
.w-papilioXII-4-r{background-image:url('assets/wings/papilioXII-4-r.webp')}
.w-papilioVI-2-l{background-image:url('assets/wings/papilioVI-2-l.webp')}
.w-papilioVI-2-r{background-image:url('assets/wings/papilioVI-2-r.webp')}
.w-heliconia-4-l{background-image:url('assets/wings/heliconia-4-l.webp')}
.w-heliconia-4-r{background-image:url('assets/wings/heliconia-4-r.webp')}
.w-heliconia-2-l{background-image:url('assets/wings/heliconia-2-l.webp')}
.w-heliconia-2-r{background-image:url('assets/wings/heliconia-2-r.webp')}
.w-diadema-1-l{background-image:url('assets/wings/diadema-1-l.webp')}
.w-diadema-1-r{background-image:url('assets/wings/diadema-1-r.webp')}
.w-harma-2-l{background-image:url('assets/wings/harma-2-l.webp')}
.w-harma-2-r{background-image:url('assets/wings/harma-2-r.webp')}
.w-cybdelis-1-l{background-image:url('assets/wings/cybdelis-1-l.webp')}
.w-cybdelis-1-r{background-image:url('assets/wings/cybdelis-1-r.webp')}
.w-pieris-3-l{background-image:url('assets/wings/pieris-3-l.webp')}
.w-pieris-3-r{background-image:url('assets/wings/pieris-3-r.webp')}
.w-catagramma-3-l{background-image:url('assets/wings/catagramma-3-l.webp')}
.w-catagramma-3-r{background-image:url('assets/wings/catagramma-3-r.webp')}
.w-catagramma-2-l{background-image:url('assets/wings/catagramma-2-l.webp')}
.w-catagramma-2-r{background-image:url('assets/wings/catagramma-2-r.webp')}
.w-catagramma8-6-l{background-image:url('assets/wings/catagramma8-6-l.webp')}
.w-catagramma8-6-r{background-image:url('assets/wings/catagramma8-6-r.webp')}
.w-erycina-6-l{background-image:url('assets/wings/erycina-6-l.webp')}
.w-erycina-6-r{background-image:url('assets/wings/erycina-6-r.webp')}

/* ---- light terminal panel ---- */
.term{position:relative;z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 26px 50px -30px rgba(90,70,50,.34),0 2px 4px rgba(90,70,50,.05)}
.term .bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line-2);background:var(--term-bar)}
.term .bar i{width:10px;height:10px;border-radius:50%;background:var(--term-dot);display:block}
.term .bar i:first-child{background:var(--soft-mark)}
.term .bar .name{margin-left:6px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.term .body{padding:16px 16px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--term-body)}
.term .body .k{color:var(--soft-mark)}
.term .body .g{color:var(--ok)}
.term .body .m{color:var(--term-dim)}
.term .foot{border-top:1px solid var(--line-2);padding:12px 16px;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:12px;color:var(--muted)}
.term .foot b{color:var(--fg);font-variant-numeric:tabular-nums}
.term .caret{display:inline-block;width:7px;height:13px;background:var(--soft-mark);margin-left:3px;vertical-align:-2px;
  animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- sections ---- */
.sec{padding:clamp(44px,6vw,72px) 0;border-top:1px solid var(--line)}
.sec h2{font-weight:700;font-size:clamp(24px,3.2vw,34px);letter-spacing:-.025em;margin:0 0 6px;text-wrap:balance}
.sec .lead{color:var(--muted);font-size:16px;margin:0 0 32px;max-width:54ch}

.strip{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;padding:22px 0;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--muted)}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;
  transition:border-color .2s,transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:var(--line-strong-2);transform:translateY(-2px)}
}
.card .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-family:var(--mono);
  font-weight:700;font-size:14px;margin-bottom:14px}
/* soft, varied icon tones (drawn from the butterflies) */
.card:nth-child(1) .ic{background:#dce7e2;color:#3c554f}
.card:nth-child(2) .ic{background:#ecddd4;color:#733a2c}
.card:nth-child(3) .ic{background:#dfe3ee;color:#3f4d70}
.card:nth-child(4) .ic{background:#ece2c9;color:#6f531b}
.card h3{margin:0 0 7px;font-size:16.5px;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.card .out{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--soft-mark)}

/* ---- problem grid ---- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prob{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px;
  transition:border-color .2s,transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .prob:hover{border-color:var(--line-strong-2);transform:translateY(-2px)}
}
.prob .tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft-mark)}
.prob h3{margin:12px 0 6px;font-size:16.5px;letter-spacing:-.01em}
.prob p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}

/* ---- process: 4 phases ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{padding:22px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em}
.step h3{margin:12px 0 6px;font-size:17px;letter-spacing:-.01em}
.step p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.step .tail{margin-top:12px;font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em}

/* ---- promises row ---- */
.promises{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.promise{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:20px}
.promise .l{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft-mark)}
.promise h3{margin:10px 0 5px;font-size:16px;letter-spacing:-.01em}
.promise p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}

/* ---- case ---- */
.case{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,48px);align-items:center}
.case .metric{font-weight:750;letter-spacing:-.03em;line-height:.92}
.case .metric .n{font-size:clamp(56px,9vw,104px);color:var(--fg);font-variant-numeric:tabular-nums}
.case .metric .u{font-size:clamp(18px,2.4vw,24px);color:var(--muted);display:block;margin-top:6px}
.case .metric .subm{font-family:var(--mono);font-size:12.5px;color:var(--soft-mark);margin-top:14px;letter-spacing:.03em}
.case h2{margin:0 0 12px}
.case p{color:var(--muted);font-size:15.5px;line-height:1.62;margin:0}
.case .fam{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--muted);
  text-decoration:none;transition:color .18s}
.case a.fam:hover{color:var(--soft-mark)}
.case a.fam:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ---- cases showcase (two cards; the live one opens a UI preview) ---- */
.case-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(16px,2vw,22px);margin-top:30px}
.case-card{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,34px);text-align:left}
.case-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.case-tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;border:1px solid var(--line-strong-2);color:var(--muted)}
.case-tag.is-live{color:var(--ok);border-color:var(--ok)}
.case-tag.is-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);
  display:inline-block;margin-right:7px;vertical-align:1px}
.case-metric{display:flex;align-items:baseline;gap:8px;font-weight:750;letter-spacing:-.03em}
.case-metric .n{font-size:clamp(40px,6vw,64px);color:var(--fg);font-variant-numeric:tabular-nums;line-height:.9}
.case-metric .u{font-size:15px;color:var(--muted)}
.case-card h3{font-weight:730;letter-spacing:-.02em;font-size:clamp(19px,2.2vw,23px);margin:14px 0 0;text-wrap:balance}
.case-card p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:10px 0 0}
.case-card .case-sub{font-family:var(--mono);font-size:12px;color:var(--soft-mark);margin-top:14px;letter-spacing:.03em}
.case-card .case-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:auto;padding-top:22px}
.case-open{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;padding:10px 15px;border-radius:8px;border:1px solid var(--ink);background:var(--ink);
  color:var(--ink-fg);cursor:pointer;transition:transform .16s var(--ease),opacity .16s var(--ease)}
.case-open:hover{opacity:.9}
.case-open:active{transform:scale(.98)}
.case-open:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.case-card.soon{background:transparent;border-style:dashed}
.case-card.soon h3,.case-card.soon p{opacity:.85}
@media (max-width:760px){.case-grid{grid-template-columns:1fr}}

/* ---- expert-dashboard preview (modal). Its own dark palette, fully scoped
   under .exd so the source's generic class names can't touch the site. ---- */
.exd-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(10px,2vw,28px);
  background:rgba(12,10,8,.62);backdrop-filter:blur(3px)}
.exd-overlay[hidden]{display:none}
.exd-modal{position:relative;display:flex;flex-direction:column;width:min(1180px,100%);height:min(88vh,860px);
  background:#17171b;border:1px solid #3a3a42;border-radius:14px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);opacity:0;transform:scale(.985);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.exd-overlay.in .exd-modal{opacity:1;transform:scale(1)}
.exd-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;
  padding:11px 14px 11px 18px;border-bottom:1px solid #2c2c33;background:#1d1d22}
.exd-cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:#86868d}
.exd-x{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:7px;
  border:1px solid #4a4a53;background:transparent;color:#aeaeb4;font-size:15px;cursor:pointer;transition:.15s}
.exd-x:hover{background:#2a2a31;color:#f0f0f3}
.exd-x:focus-visible{outline:2px solid #9a9aa3;outline-offset:2px}
.exd-scroll{overflow:auto;flex:1}

/* ---- ported dashboard, namespaced ---- */
.exd{--txt:#dcdce0;--strong:#f0f0f3;--dim:#aeaeb4;--muted:#86868d;--faint:#6a6a72;
  --panel:#1d1d22;--card:#222228;--card-hi:#29292f;--field:#15151a;
  --line:#3a3a42;--line-soft:#2c2c33;--line-strong:#4a4a53;--accent:#c4c4cb;
  color:var(--txt);font-size:13px;line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.exd-app{display:grid;grid-template-columns:clamp(230px,22vw,286px) 1fr;min-height:100%}
.exd-aside{background:var(--panel);border-right:1px solid var(--line);
  padding:24px 22px;display:flex;flex-direction:column;gap:24px}
.exd-eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--faint);text-transform:uppercase}
.exd-brand h4{font-size:16px;font-weight:600;margin:6px 0 0;letter-spacing:.2px;color:var(--strong)}
.exd-nav{display:flex;flex-direction:column;gap:2px}
.exd-navlbl{font-size:10px;letter-spacing:2px;color:var(--faint);text-transform:uppercase;margin-bottom:8px}
.exd-nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;color:var(--muted);
  text-decoration:none;border:1px solid transparent;font-size:12.5px;cursor:pointer}
.exd-nav a:hover{background:#2a2a31;color:var(--dim)}
.exd-nav a.on{background:var(--card-hi);color:var(--txt);border-color:var(--line)}
.exd-nav a .ix{width:22px;height:22px;flex:none;display:grid;place-items:center;font-size:11px;font-weight:600;
  border:1px solid var(--line-strong);color:var(--muted)}
.exd-nav a.on .ix{background:var(--accent);color:#0a0a0b;border-color:var(--accent)}
.exd-nav a .dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none}
.exd-nav a .dot.ok{background:#6f9f6f}.exd-nav a .dot.warn{background:#c9a14a}
.exd-summary{margin-top:auto;background:var(--card);border:1px solid var(--line);padding:18px}
.exd-summary .l{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.exd-summary .v{font-size:26px;font-weight:700;letter-spacing:-.3px;margin-top:6px;color:var(--strong)}
.exd-summary .row{display:flex;gap:18px;margin-top:14px}
.exd-summary .row span{display:block;font-size:13px;color:var(--dim);margin-top:3px}
.exd-summary .acts{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.exd-main{padding:26px clamp(20px,2.4vw,38px) 40px;min-width:0}
.exd-ph{margin-bottom:22px}
.exd-ph h3{font-size:22px;font-weight:600;margin:8px 0 0;letter-spacing:-.4px;color:var(--strong)}
.exd-tools{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
.exd-notice{background:var(--card);border:1px solid var(--line);border-left:2px solid var(--accent);
  color:var(--muted);font-size:12px;line-height:1.65;padding:14px 16px;margin-bottom:22px}
.exd-card{background:var(--card);border:1px solid var(--line);padding:22px;margin-bottom:20px}
.exd-cardhead{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:15px;border-bottom:1px solid var(--line-soft)}
.exd-cardhead .num{width:26px;height:26px;flex:none;border:1px solid var(--line-strong);display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--txt)}
.exd-cardhead h5{margin:0;font-size:13.5px;font-weight:600;letter-spacing:.2px;color:var(--txt)}
.exd-cardhead .hint{margin-left:auto;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.8px}
.exd table{width:100%;border-collapse:collapse;font-size:12.5px}
.exd th,.exd td{padding:11px 12px;text-align:left;vertical-align:middle}
.exd thead th{color:var(--muted);font-weight:500;text-transform:uppercase;font-size:10px;letter-spacing:1px;border-bottom:1px solid var(--line)}
.exd tbody tr{border-bottom:1px solid var(--line-soft)}
.exd tbody tr:hover{background:var(--card-hi)}
.exd .tblwrap{overflow-x:auto}
.exd-badge{font-size:10px;padding:3px 9px;border:1px solid var(--line-strong);color:var(--dim);
  text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
.exd-badge.done{background:var(--card-hi);color:var(--strong);border-color:var(--dim)}
.exd-inp{padding:9px 12px;background:var(--field);border:1px solid var(--line);color:var(--txt);font-size:12.5px;font-family:inherit}
.exd-inp::placeholder{color:var(--faint)}
.exd-btn{background:var(--accent);color:#0a0a0b;border:1px solid var(--accent);padding:10px 16px;font-weight:600;
  font-size:10.5px;cursor:pointer;text-transform:uppercase;letter-spacing:1.1px;font-family:inherit}
.exd-btn.ghost{background:transparent;color:var(--dim);border-color:var(--line-strong)}
.exd-btn.block{width:100%}
.exd-btn:disabled{opacity:.32;cursor:not-allowed}
.exd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.exd-stat{background:var(--card);padding:18px}
.exd-stat .l{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
.exd-stat .big{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.5px;color:var(--strong);margin-top:8px}
.exd-stat .mid{font-size:20px;font-weight:600;margin-top:8px;color:var(--txt)}
.exd-samp{font-size:10.5px;color:var(--faint);margin-top:12px}
.exd-code{font-family:var(--mono);font-size:11px;color:var(--faint);display:block;margin-bottom:2px}
/* multi-view workspace: cases list, single case, new case */
.exd-view[hidden]{display:none}
.exd-rowhint{font-size:11px;color:var(--faint);margin-top:14px}
.exd .exd-empty{color:var(--faint);text-align:center}
.exd-row{cursor:pointer}
.exd-row:hover .exd-code{color:var(--dim)}
.exd-back{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;color:var(--dim);
  font-family:inherit;font-size:12px;letter-spacing:.4px;cursor:pointer;padding:2px 0;margin-bottom:18px}
.exd-back:hover{color:var(--strong)}
.exd-dethead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.exd-dethead h3{font-size:22px;font-weight:600;margin:4px 0 0;letter-spacing:-.4px;color:var(--strong)}
.exd-detmeta{display:flex;align-items:center;gap:14px;margin-top:2px}
.exd-detdue{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.8px}
.exd-detdue b{color:var(--dim);font-weight:600}
.exd-steps2{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.exd-steps2 span{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted);background:var(--card);border:1px solid var(--line);padding:7px 12px}
.exd-steps2 span i{width:18px;height:18px;flex:none;display:grid;place-items:center;font-size:10px;font-style:normal;font-weight:600;background:var(--card-hi);border:1px solid var(--line);color:var(--muted)}
/* completed steps read green, the current step amber — matching the sidebar dots; no white fills */
.exd-steps2 span.on{color:var(--txt)}
.exd-steps2 span.on i{color:#8fbf8f;border-color:color-mix(in srgb,#6f9f6f 55%,var(--line))}
.exd-steps2 span.warn{color:var(--txt)}
.exd-steps2 span.warn i{color:#e0be6f;border-color:color-mix(in srgb,#c9a14a 60%,var(--line))}
.exd-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.exd-kv>div{background:var(--card);padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.exd-kv .k{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
.exd-kv .v{font-size:14px;color:var(--txt)}
.exd-sub{font-size:13px;color:var(--dim);margin:10px 0 0;max-width:52ch;line-height:1.5}
.exd-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.exd-field{display:flex;flex-direction:column;gap:7px}
.exd-field label{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
.exd-field input,.exd-field select{padding:10px 12px;background:var(--field);border:1px solid var(--line);color:var(--txt);font-size:13px;font-family:inherit;border-radius:0}
.exd-field select{appearance:none;-webkit-appearance:none;cursor:default;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) center,calc(100% - 10px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
.exd-field input::placeholder{color:var(--faint)}
/* valuation approaches (checkbox group) */
.exd-approaches{margin-bottom:22px}
.exd-flabel{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.exd-checks{display:flex;gap:10px;flex-wrap:wrap}
.exd-check{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dim);border:1px solid var(--line);padding:9px 13px;cursor:default}
.exd-check.on{color:var(--txt);border-color:var(--dim);background:var(--card-hi)}
.exd-check input{width:14px;height:14px;accent-color:var(--accent);pointer-events:none;margin:0}
.exd-fhint{font-size:11.5px;color:var(--faint);margin-top:11px;line-height:1.5;max-width:70ch}
.exd-notice--warn{border-left-color:#c9a14a}
.exd-formacts{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.exd-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.exd-count{font-size:11px;color:var(--faint);font-family:var(--mono)}
.exd-chip{display:inline-block;font-size:10.5px;letter-spacing:.4px;color:var(--muted);background:var(--card-hi);border:1px solid var(--line-strong);padding:2px 9px;border-radius:3px}
.exd-method{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.exd-method .l{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
.exd-method p{margin:6px 0 0;font-size:13px;color:var(--dim);line-height:1.55;max-width:70ch}
.exd-audit{display:flex;flex-direction:column}
.exd-evrow{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.exd-evrow:last-child{border-bottom:0}
.exd-evd{font-family:var(--mono);font-size:11px;color:var(--faint)}
.exd-evl{color:var(--txt)}
.exd-eva{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.exd-blank{font-size:12.5px;color:var(--faint);padding:4px 0}
.exd-pinote{margin-top:16px;font-size:11.5px;color:var(--dim);line-height:1.5;border-left:2px solid var(--accent);padding-left:12px}
@media (max-width:560px){.exd-form{grid-template-columns:1fr}}
@media (max-width:720px){
  .exd-app{grid-template-columns:1fr}
  .exd-aside{border-right:0;border-bottom:1px solid var(--line)}
  .exd-summary{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .exd-modal,.case-open{transition:none}
}

/* ---- integrations / stack ---- */
.stack{display:grid;gap:0}
.stackrow{display:grid;grid-template-columns:170px 1fr;gap:18px;align-items:start;padding:16px 0;border-top:1px solid var(--line-2)}
.stackrow:first-child{border-top:0}
.stackrow .cat{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;padding-top:5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;transition:border-color .18s}
@media (hover:hover) and (pointer:fine){
  .chip:hover{border-color:var(--line-strong)}
}
.stacknote{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:18px;letter-spacing:.02em}

/* ---- automations accordion (what we automate) ---- */
.autolist{display:grid;gap:0;border-top:1px solid var(--line);margin-top:8px}
.autolist details{border-bottom:1px solid var(--line)}
.autolist summary{list-style:none;cursor:pointer;padding:20px 2px;display:flex;justify-content:space-between;
  gap:20px;align-items:flex-start}
.autolist summary::-webkit-details-marker{display:none}
.autolist summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.au-head{display:flex;flex-direction:column;gap:5px}
.au-t{font-size:16px;font-weight:650;letter-spacing:-.01em}
.au-d{font-size:14px;color:var(--muted);line-height:1.55;max-width:72ch}
.autolist summary .plus{font-family:var(--mono);font-size:18px;color:var(--muted);flex:none;line-height:1;
  margin-top:3px;transition:transform .22s var(--ease),color .22s var(--ease)}
.autolist details[open] summary .plus{transform:rotate(45deg);color:var(--soft-mark)}
.au-ideas{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 30px}
.au-ideas li{font-size:13.5px;color:var(--muted);line-height:1.5;padding-left:20px;position:relative}
.au-ideas li::before{content:"\2192";position:absolute;left:0;color:var(--soft-mark)}

/* ---- shared icon badge ---- */
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-badge{display:grid;place-items:center;border-radius:12px;flex:none;background:color-mix(in srgb,var(--soft-mark) 13%,transparent);color:var(--soft-mark)}

/* ---- problem: split now / with Ordia ---- */
.spl{display:grid;grid-template-columns:1fr 44px 1fr;gap:10px;align-items:stretch;margin-top:8px}
.spl-col{border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--surface)}
.spl-col .cap{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:15px}
.spl-mess{display:flex;flex-wrap:wrap;gap:9px}
.spl-mess span{font-size:13px;color:var(--muted);border:1px dashed var(--line-strong);border-radius:8px;padding:8px 12px;background:color-mix(in srgb,var(--fg) 3%,transparent)}
.spl-mess span:nth-child(2n){transform:rotate(-2deg)} .spl-mess span:nth-child(3n){transform:rotate(1.6deg)}
.spl-flow{display:flex;flex-direction:column;gap:10px}
.spl-flow .step{display:flex;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface);font-size:15px;font-weight:600}
.spl-flow .step .b{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--soft-mark) 14%,transparent);color:var(--soft-mark)}
.spl-flow .step .b svg{width:20px;height:20px}
/* the Ordia step: inverted ink card with a coral outline, so it carries the eye */
.spl-flow .step.is-ordia{background:var(--ink);color:var(--ink-fg);border-color:var(--ink);font-weight:700;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--soft-mark) 55%,transparent),0 20px 44px -24px rgba(38,35,29,.5)}
.spl-flow .step.is-ordia .b{background:color-mix(in srgb,var(--soft-mark) 28%,transparent);color:#e69069}
.spl-flow .down{color:var(--line-strong);font-size:14px;margin-left:20px;line-height:.6}
.spl-flow .down.lead{color:color-mix(in srgb,var(--soft-mark) 55%,var(--line-strong))}
.spl-mid{display:grid;place-items:center;color:var(--soft-mark);font-size:24px}
.spl-value{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.spl-value span{font-size:13px;color:var(--fg);display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:8px 15px;background:var(--surface)}
.spl-value span::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--soft-mark) 18%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9573f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:11px;background-repeat:no-repeat;background-position:center}

/* ---- services: icon tiles + expanding panel ---- */
.svx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.svx-tile{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:15px;padding:18px;background:var(--surface);
  cursor:pointer;text-align:left;font:inherit;color:inherit;transition:transform .18s var(--ease),border-color .2s,box-shadow .2s}
.svx-tile:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 18px 32px -24px color-mix(in srgb,var(--soft-mark) 55%,transparent)}
.svx-tile:active{transform:scale(.985)}
.svx-tile[aria-expanded="true"]{border-color:var(--soft-mark);box-shadow:0 0 0 1px var(--soft-mark)}
.svx-tile .ic-badge{width:44px;height:44px;transition:transform .3s var(--ease)}
.svx-tile[aria-expanded="true"] .ic-badge,.svx-tile:hover .ic-badge{transform:scale(1.08)}
.svx-tile .h{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.svx-tile .go{margin-top:auto;font-family:var(--mono);font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:color .18s,gap .2s var(--ease)}
.svx-tile:hover .go,.svx-tile[aria-expanded="true"] .go{color:var(--soft-mark);gap:9px}
.svx-tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.svx-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease-drawer)}
.svx-wrap.open{grid-template-rows:1fr;margin-top:14px}
.svx-detail{overflow:hidden}
.svx-panel{display:none;border:1px solid var(--line);border-left:3px solid var(--soft-mark);border-radius:12px;padding:20px 22px;background:var(--surface)}
.svx-panel.on{display:block}
.svx-panel .svx-d{color:var(--fg);font-size:14.5px;line-height:1.55;margin:0 0 15px;max-width:74ch}

/* ---- stack: marquee ---- */
.mq{display:flex;flex-direction:column;gap:11px;margin-top:8px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-row{display:flex;gap:11px;width:max-content;animation:mqmove 34s linear infinite}
.mq-row.rev{animation-direction:reverse}
.mq:hover .mq-row{animation-play-state:paused}
.mq .chip{font-size:13px;white-space:nowrap}
@keyframes mqmove{to{transform:translateX(-50%)}}

/* ---- pricing ---- */
/* heading and currency toggle share one row; the toggle wraps below on narrow */
.price-head{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-bottom:6px}
.price-head h2{margin:0}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.plan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--surface);
  padding:26px 22px;position:relative;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .plan:hover{transform:translateY(-3px);border-color:var(--line-strong-2)}
}
/* featured plan: the high-contrast inverse of the page, so the recommended
   tier reads first — and stays legible in both light and dark themes */
.plan.feat{background:var(--ink);color:var(--ink-fg);border-color:transparent;
  box-shadow:0 26px 50px -30px rgba(90,70,50,.5)}
@media (hover:hover) and (pointer:fine){
  .plan.feat:hover{transform:translateY(-3px)}
}
.plan .flag{position:absolute;top:-11px;left:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--soft-mark);color:#fff;padding:5px 11px;border-radius:999px;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.plan .pname{font-size:15px;font-weight:700;letter-spacing:-.01em}
.plan .price{font-weight:750;letter-spacing:-.02em;font-size:27px;line-height:1.05;margin:14px 0 2px}
.plan .price .p-amt{font-variant-numeric:tabular-nums}
/* "On request" tiers read as an intentional statement, not a missing number */
.plan .price.price-quote{font-size:19px;font-weight:650;color:var(--soft-mark);display:inline-flex;align-items:center;gap:9px}
.plan .price.price-quote::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.plan.feat .price.price-quote{color:var(--ink-fg)}
.plan .cad{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:16px}
/* hairline splits the price header from what's included; the list grows to fill
   so every card's CTA — quiet link or solid button — pins to the same bottom
   baseline (no floating button, no dark void beneath it) */
.plan ul{list-style:none;margin:0 0 18px;padding:16px 0 0;border-top:1px solid var(--line);
  display:grid;gap:12px;flex:1 1 auto}
.plan li{font-size:13.5px;color:var(--muted);line-height:1.45;padding-left:22px;position:relative}
.plan li::before{content:"\2192";position:absolute;left:0;color:var(--soft-mark)}
.plan .btn{margin-top:0;justify-content:center}
/* quiet text CTA for the non-featured tiers — replaces three near-identical
   ghost buttons so only the recommended tier carries a solid button */
.plan-cta{align-self:flex-start;font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  color:var(--fg);text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  transition:color .18s var(--ease)}
.plan-cta::after{content:"\2192";color:var(--soft-mark);transition:transform .18s var(--ease)}
.plan-cta:hover{color:var(--soft-mark)}
.plan-cta:hover::after{transform:translateX(3px)}
.plan-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
/* recolour the featured card's inner text against the inverted background */
.plan.feat ul{border-top-color:color-mix(in srgb,var(--ink-fg) 16%,transparent)}
.plan.feat .cad{color:color-mix(in srgb,var(--ink-fg) 60%,transparent)}
.plan.feat li{color:color-mix(in srgb,var(--ink-fg) 74%,transparent)}
.plan.feat li::before{color:color-mix(in srgb,var(--soft-mark) 45%,var(--ink-fg))}
.plan.feat .btn-primary{background:var(--ink-fg);color:var(--ink);border-color:transparent}

/* price is authored in USD; JS swaps the amount/symbol when UAH is chosen */
.plan .price .p-from{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;margin-right:3px}
.plan .price .p-per{font-size:15px;font-weight:600;color:var(--muted)}
.plan.feat .price .p-from,.plan.feat .price .p-per{color:color-mix(in srgb,var(--ink-fg) 60%,transparent)}

/* currency toggle — segmented pill, same language as the nav lang switcher */
.cur-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.cur-switch[hidden]{display:none}
.cur-switch .cur-opt{font-family:var(--mono);font-size:12px;letter-spacing:.04em;border:0;background:transparent;
  color:var(--muted);padding:9px 17px;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),transform .12s var(--ease)}
.cur-switch .cur-opt.on{background:var(--ink);color:var(--ink-fg)}
.cur-switch .cur-opt:hover:not(.on){color:var(--fg)}
.cur-switch .cur-opt:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.cur-switch .cur-opt:active{transform:scale(.96)}
.price-fx{margin:18px 0 0;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted);max-width:64ch}
.price-fx .fx-rate{color:var(--fg);font-variant-numeric:tabular-nums}

/* ---- FAQ: a sticky intro + fit-call CTA beside a refined accordion ---- */
/* lets the <details> answer animate open where supported (Chromium); an
   instant, still-accessible fallback everywhere else */
:root{interpolate-size:allow-keywords}
.faq-split{display:grid;grid-template-columns:.64fr 1fr;gap:36px 64px;align-items:start;margin-top:8px}
.faq-aside{position:sticky;top:96px}
.faq-aside .eyebrow{margin-bottom:14px}
.faq-aside h2{font-size:clamp(23px,2.6vw,28px);letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.faq-aside p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 22px;max-width:34ch}
.faq-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;
  text-decoration:none;color:var(--ink-fg);background:var(--ink);border-radius:999px;padding:12px 20px;
  transition:transform .12s var(--ease)}
.faq-cta::after{content:"\2192";transition:transform .18s var(--ease)}
.faq-cta:hover::after{transform:translateX(3px)}
.faq-cta:active{transform:scale(.97)}
.faq-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.faq{display:grid;gap:0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:21px 4px;display:flex;justify-content:space-between;gap:22px;
  align-items:center;font-size:16.5px;letter-spacing:-.01em;font-weight:650;color:var(--fg);transition:color .18s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
@media (hover:hover){.faq summary:hover{color:var(--soft-mark)}}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:5px}
/* + / − toggle drawn from two bars; the vertical bar collapses on open */
.faq summary .ic{flex:none;width:20px;height:20px;position:relative}
.faq summary .ic::before,.faq summary .ic::after{content:"";position:absolute;border-radius:2px;background:var(--muted);
  transition:transform .28s var(--ease),background .18s var(--ease)}
.faq summary .ic::before{top:50%;left:1px;right:1px;height:1.6px;transform:translateY(-50%)}
.faq summary .ic::after{left:50%;top:1px;bottom:1px;width:1.6px;transform:translateX(-50%)}
.faq details[open] summary .ic::after{transform:translateX(-50%) scaleY(0)}
.faq details[open] summary .ic::before{background:var(--soft-mark)}
.faq .ans{margin:0 0 22px;color:var(--muted);font-size:14.5px;line-height:1.62;max-width:62ch}
.faq details::details-content{block-size:0;overflow:hidden;
  transition:block-size .32s var(--ease),content-visibility .32s var(--ease) allow-discrete}
.faq details[open]::details-content{block-size:auto}
@media (max-width:820px){
  .faq-split{grid-template-columns:1fr;gap:22px}
  .faq-aside{position:static}
  .faq-aside p{max-width:52ch}
}
@media (prefers-reduced-motion:reduce){
  .faq details::details-content{transition:none}
  .faq summary .ic::before,.faq summary .ic::after,.faq-cta::after{transition:none}
}

/* ---- brand band: rounded paper panel that expands on scroll ---- */
.band{background:var(--band-bg)}
.band-card{position:relative;overflow:hidden;background:var(--band-card);color:#26231d;--ink:#26231d;--ink-fg:#f3eee2;--soft-mark:#96482f;min-height:clamp(560px,72vw,780px);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.5);
  --exp:0;--pad:calc((1 - var(--exp)) * clamp(18px,6vw,76px));--rad:calc((1 - var(--exp)) * 44px);
  clip-path:inset(var(--pad) round var(--rad))}
/* subtle grain; normal blend (not mix-blend-mode) so it costs nothing to
   recomposite while the card repaints during the scroll expand */
.band-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
/* reduced motion / no JS: skip the scroll expand, show the bands fully open */
@media (prefers-reduced-motion:reduce){.band-card{--exp:1}}
/* the brand "O." — sixteen specimens on a letter-O ellipse, coral dot as the
   full stop; the closing flourish beside the contact form */
.oring{position:relative;width:min(100%,400px);aspect-ratio:1;margin:0 auto}
.pbfly{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg))}
.oring .odot{position:absolute;left:89%;top:85.5%;width:8.5%;aspect-ratio:1;border-radius:50%;
  background:#a9573f;transform:translate(-50%,-50%)}
.pbfly .wings{display:flex;width:var(--w);height:var(--h);opacity:.95}

/* ambient flock behind the problem module — subtle, edge-scattered, sits under
   the content; reuses the .pbfly specimens + the shared wing-flap scheduler */
/* "What we automate" reuses the band's dark background + scroll-expand
   card (same .band-card mechanics), single-column instead of the footer
   band's copy+flock split. It carries its own .cards grid, so the tokens
   that grid reads (--surface/--line/--muted etc.) are pinned to their light
   values, so it reads as cream paper in light mode; the [data-theme=dark]
   override below re-points them so it reads as a dark panel in dark mode. */
.band-card--plain{min-height:0;
  --fg:#26231d;--surface:#fbf7ec;--line:#e6ddca;--line-2:#efe8d7;--line-strong-2:#d9cfb8;--muted:#665e4d}
.band-plain{max-width:1120px;margin-inline:auto;padding:clamp(40px,6vw,80px) clamp(26px,5vw,56px);
  transform:scale(calc(.9 + var(--exp) * .1));transform-origin:center}
.band-plain h2{font-weight:700;font-size:clamp(24px,3.2vw,34px);letter-spacing:-.025em;margin:0 0 6px;text-wrap:balance}
.band-plain .lead{color:var(--muted);font-size:16px;margin:0 0 32px;max-width:54ch}
/* problem module rides the same expanding card; pin the one extra token its
   split-screen reads (dashed pill borders) to a cream-paper tone */
.prob-card{--line-strong:#d4c9b1}
/* dark theme: drop the cream-paper pin — the split-screen is entirely
   token-driven, so re-pointing these tokens makes the whole module read as a
   dark panel that matches the rest of the page (footer brand band is untouched) */
[data-theme="dark"] .band-card--plain{
  background:#201c16;color:#f0ead9;
  --fg:#f0ead9;--surface:#2a2620;--line:#3a352c;--line-2:#332e26;
  --line-strong-2:#4e4636;--muted:#a89f8c;
  --ink:#f0ead9;--ink-fg:#26231d;--soft-mark:#cf8265}
[data-theme="dark"] .prob-card{--line-strong:#55503f}
[data-theme="dark"] .band-card--plain .card:nth-child(1) .ic{background:#dce7e2;color:#3c554f}
[data-theme="dark"] .band-card--plain .card:nth-child(2) .ic{background:#ecddd4;color:#733a2c}
[data-theme="dark"] .band-card--plain .card:nth-child(3) .ic{background:#dfe3ee;color:#3f4d70}
[data-theme="dark"] .band-card--plain .card:nth-child(4) .ic{background:#ece2c9;color:#6f531b}

/* ---- case-study page ---- */
.cs-hero{padding:clamp(48px,6vw,76px) 0 clamp(36px,4vw,56px)}
.cs-hero h1{font-weight:730;font-size:clamp(30px,4.6vw,52px);line-height:1.06;letter-spacing:-.03em;margin:0;
  max-width:22ch;text-wrap:balance}
.cs-hero .intro{color:var(--muted);font-size:clamp(16px,1.7vw,18.5px);line-height:1.55;max-width:52ch;margin:20px 0 0}
.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(28px,4vw,44px)}
.cs-metric{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:20px}
.cs-metric .n{display:block;font-weight:750;letter-spacing:-.02em;font-size:clamp(24px,3vw,34px);
  font-variant-numeric:tabular-nums}
.cs-metric .l{display:block;margin-top:6px;color:var(--muted);font-size:13.5px;line-height:1.45}
.cs-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px)}
.cs-cols h2{margin-bottom:12px}
.cs-cols p{color:var(--muted);font-size:15.5px;line-height:1.62;margin:0;max-width:56ch}
/* the result is the story's payoff — a confident coral-eyebrowed statement,
   not another muted column */
.cs-result{max-width:640px}
.cs-result .eyebrow{display:block;color:var(--soft-mark);margin-bottom:16px}
.cs-result-lead{margin:0;font-size:clamp(22px,3.1vw,31px);line-height:1.3;letter-spacing:-.02em;
  font-weight:600;color:var(--fg);text-wrap:balance}
/* the closing CTA gets its own centered card so the ask lands as a moment */
.cs-cta{max-width:600px;margin-inline:auto;text-align:center;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;padding:clamp(32px,5vw,52px) clamp(24px,4vw,40px)}
.cs-cta h2{margin:0 0 10px}
.cs-cta p{max-width:44ch;margin:0 auto 24px;color:var(--muted);font-size:16px;line-height:1.6}
.runs table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px;color:var(--term-body)}
.runs td,.runs th{text-align:left;padding:9px 16px;white-space:nowrap}
.runs thead th{color:var(--term-dim);font-weight:500;border-bottom:1px solid var(--line-2)}
.runs tbody tr + tr td{border-top:1px solid var(--line-2)}
.runs td:last-child{text-align:right}
.runs .g{color:var(--ok)}
.runs .k{color:var(--soft-mark)}
.runs-note{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:10px;letter-spacing:.02em}

/* ---- legal / privacy page ---- */
.legal{max-width:640px;display:grid;gap:30px}
.legal h2{font-size:19px;letter-spacing:-.02em;margin:0 0 8px}
.legal p{color:var(--muted);line-height:1.65;margin:0}
.legal .updated{font-family:var(--mono);font-size:12px;letter-spacing:.02em;margin-top:6px}
.runs-scroll{overflow-x:auto}
@media (max-width:720px){
  .cs-metrics{grid-template-columns:1fr}
  .cs-cols{grid-template-columns:1fr}
}

/* ---- contact ---- */
/* .contact shares its element with .wrap: only touch vertical padding so the
   .wrap horizontal padding survives the cascade */
/* form on the left, the butterfly "O." flourish on the right (spans both rows) */
.contact{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"main aside" "slots aside";gap:6px 52px;align-items:start;
  padding-block:clamp(36px,5vw,56px)}
.contact-main{grid-area:main}
.contact-aside{grid-area:aside;align-self:center;justify-self:center;width:min(40vw,400px)}
.slots{grid-area:slots;display:flex;flex-wrap:wrap;gap:9px;min-width:0;margin-top:22px}
.contact h2{margin:0 0 10px}
.contact p{margin:0;color:var(--muted);font-size:16px;max-width:46ch}
.contact .cta-row{margin-top:20px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.slot{font-family:var(--mono);font-size:12.5px;color:var(--muted);border:1px dashed var(--line);border-radius:9px;
  padding:10px 13px;display:flex;justify-content:space-between;gap:12px}
.slot b{color:var(--fg);font-weight:600}
.slot a{color:var(--fg);text-decoration:none}
.slot a:hover{text-decoration:underline}

/* ---- intake form ---- */
.intake{margin-top:24px;max-width:540px;display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--muted)}
/* submit-button arrow nudges on hover, echoing the site's motion language */
.btn-arrow{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(3px)}
.intake input,.intake textarea{font:inherit;font-size:15px;color:var(--fg);background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%;box-sizing:border-box;
  transition:border-color .18s,box-shadow .18s}
.intake textarea{resize:vertical;min-height:120px;line-height:1.5}
.intake input::placeholder,.intake textarea::placeholder{color:var(--muted);opacity:.72}
.intake input:focus,.intake textarea:focus{outline:none;border-color:var(--line-strong);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--soft-mark) 18%,transparent)}
.intake input:user-invalid,.intake textarea:user-invalid{border-color:var(--soft-mark)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.form-foot .btn-primary{min-width:120px;justify-content:center}
.form-or{font-size:13.5px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-strong);
  padding-bottom:1px;transition:color .18s}
.form-or:hover{color:var(--fg)}
.form-note{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0;letter-spacing:.02em}
.form-status{margin:0;font-size:14px;line-height:1.5;padding:11px 14px;border-radius:10px;border:1px solid var(--line);color:var(--muted)}
.form-status[data-state="error"]{color:var(--soft-mark);border-color:var(--soft-mark);
  background:color-mix(in srgb,var(--soft-mark) 8%,transparent)}
.intake.sending{opacity:.65;pointer-events:none}
.intake-ok{margin-top:22px;max-width:520px;border:1px solid var(--line);border-left:3px solid var(--soft-mark);
  border-radius:12px;background:var(--surface);padding:22px}
.intake-ok h3{margin:0 0 8px;font-size:18px;letter-spacing:-.01em}
.intake-ok p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55;max-width:none}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--muted);font-size:13.5px}
.foot-in{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;width:100%}
.foot .links{display:flex;gap:22px;flex-wrap:wrap}
.foot .links a{color:var(--muted);text-decoration:none}
.foot .links a:hover{color:var(--fg)}
.foot-copy{margin-left:auto}
.to-top{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);transition:color .18s,border-color .18s,transform .16s var(--ease)}
.to-top svg{width:16px;height:16px}
.to-top:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .to-top:hover{color:var(--fg);border-color:var(--line-strong);transform:translateY(-2px)}
}
.to-top:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---- reveal on scroll (JS-gated: no-JS visitors see everything) ---- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn,.card,.prob,.lang button,.chip{transition:none}
  .bfly,.term .caret{animation:none}
  .roll-track{transition:none}
  .wing.l{transform:perspective(560px) rotateY(21deg);animation:none}
  .wing.r{transform:perspective(560px) rotateY(-21deg);animation:none}
  .band-card{--exp:1}
}

/* ---- responsive ---- */
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:1000px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:820px){
  .case{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr;grid-template-areas:"main" "slots" "aside"}
  .contact-aside{width:min(70vw,300px);margin-top:12px}
  .slots{min-width:0}
  .svx-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .field-row{grid-template-columns:1fr}
}
@media (max-width:700px){
  .spl{grid-template-columns:1fr}
  .spl-mid{transform:rotate(90deg);padding:2px 0}
}
@media (prefers-reduced-motion:reduce){
  .mq-row{animation:none;flex-wrap:wrap;width:auto}
  .svx-wrap{transition:none}
  .svx-tile,.svx-tile .ic-badge{transition:none}
}
/* On small screens the O-ring drops below the form, smaller and softened.
   Wing sizes are fixed px, so they scale down with the container to keep the
   same clearances as the desktop layout (no overlaps). */
@media (max-width:760px){
  .oring{opacity:.9}
  .oring .pbfly .wings{width:calc(var(--w) * .66);height:calc(var(--h) * .66)}
}
@media (max-width:720px){.promises{grid-template-columns:1fr}}
@media (max-width:640px){
  .nav .links{display:none}
  /* On phones the nav keeps only brand + language + theme; the CTA is
     redundant here (the hero and every section already carry it) and its
     width was forcing the nav past the viewport. */
  .nav .right .btn-primary{display:none}
  .cards{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .au-ideas{grid-template-columns:1fr}
  .svx-grid{grid-template-columns:1fr}
}
@media (max-width:600px){.stackrow{grid-template-columns:1fr;gap:8px}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}