:root{
  color-scheme:light;
  /* A serif display face is the single biggest break from the generated-SaaS look.
     Georgia / Iowan ship on every system and carry full Lithuanian diacritics. */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Segoe UI Variable Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono","Segoe UI Mono",Consolas,monospace;

  --paper:#FAF7F2;      /* warm, not clinical white */
  --paper-2:#FFFDFA;
  --ink:#151B22;
  --ink-900:#0D1218;
  --text:#3E4650;
  --muted:#5F6672;      /* 5.4:1 — holds up even over the translucent header */
  --muted-dk:#7A828C;   /* muted text ON the dark bands */
  --line:#E6E0D6;
  --line-2:#D3CBBE;
  --gold:#C4881A;       /* FILLS only — 2.8:1 on paper, never use as text */
  --gold-text:#8F620F;  /* gold-flavoured TEXT on light — 4.8:1 (AA at small sizes) */
  --gold-lite:#E8A92B;  /* text/fills on the DARK bands */
  --gold-tint:#F6EEDF;
  --gold-ink:#1B1206;   /* text ON a gold fill — 5.8:1 */
  --focus:var(--gold-text); /* focus ring on PAPER — 5.0:1. --gold was 2.86:1 and failed
                               WCAG 2.2 1.4.11 (3:1 for non-text UI). .on-dark overrides it. */
  --green:#1B7A45;
  --r:14px;
  /* motion system — named so timings stay coherent instead of ad-hoc */
  --e-out:cubic-bezier(.2,.7,.3,1);      /* things arriving */
  --e-glide:cubic-bezier(.16,.84,.44,1); /* long entrances, settles in the tail */
  --e-soft:cubic-bezier(.4,0,.2,1);      /* neutral state change */
  --d1:120ms; --d2:220ms; --d3:340ms; --d4:520ms; --d5:760ms;
  --s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:104px;
  --wrap:1140px;
}
/* 1ms rather than 0 so transitionend still fires and nothing strands mid-state */
@media (prefers-reduced-motion:reduce){
  :root{--d1:1ms;--d2:1ms;--d3:1ms;--d4:1ms;--d5:1ms}
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:86px}
/* The sticky CTA targets #kontaktai, the last of eleven sections. On a phone that is a
   ~12,000px animated scroll past twenty screens: reads as a glitch, and drags the
   IntersectionObserver across every .rv mid-flight so all reveals fire at once. */
@media(max-width:900px){html{scroll-behavior:auto}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font:400 17px/1.62 var(--sans);color:var(--text);background:var(--paper);
  font-synthesis-weight:none;font-variant-numeric:tabular-nums;overflow-x:hidden;position:relative}
/* Paper grain. Kills the flat-gradient look that reads as machine-made. */
/* Touch devices skip the grain: it is a full-viewport fixed layer that repaints
   on every scroll frame, which is real cost on a weak Android for a texture
   nobody notices on a small screen. */
@media(hover:none){body::after{display:none}}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%}
/* height:auto so an <img>'s width/height ATTRS can't force a fixed px height that
   overrides aspect-ratio (that cropped photos into 1000px-tall strips). img only. */
img{height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
/* Line 5 sets viewport-fit=cover, so the page draws under the notch and owes the
   horizontal insets. Longhand AFTER the shorthand so it wins; max() keeps the normal
   24px where there is no inset (portrait, non-notched, desktop). */
.wrap{padding-left:max(var(--s5),env(safe-area-inset-left));padding-right:max(var(--s5),env(safe-area-inset-right))}

h1,h2,h3,.dspl{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.012em}
h1{font-size:clamp(40px,7.4vw,74px);line-height:1.08}
h2{font-size:clamp(30px,4.6vw,46px);line-height:1.13}
h3{font-size:21px;line-height:1.3}
.lede{font-size:clamp(18px,2.2vw,21px);line-height:1.55;color:var(--text);max-width:38ch}
.eyebrow{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.rule{width:44px;height:2px;background:var(--gold);margin:var(--s5) 0;transform-origin:left center}
.js-rv .rv .rule{transform:scaleX(0);transition:transform var(--d4) var(--e-out) 120ms}
.js-rv .rv.in .rule{transform:scaleX(1)}
p{max-width:64ch}

/* Reveal on scroll. Hiding is applied ONLY under .js-rv, which JS adds itself —
   so if the script fails, is blocked, or the observer never fires, the page is
   simply visible rather than blank. A stalled observer can never hide content. */
.js-rv .rv{opacity:0;transform:translateY(18px);
  transition:opacity var(--d4) var(--e-out),transform var(--d4) var(--e-out)}
.js-rv .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-rv .rv{opacity:1;transform:none;transition:none}
}

.btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;font:600 16px/1 var(--sans);
  padding:16px 26px;border-radius:6px;
  transition:transform var(--d1) var(--e-out),background-color var(--d2) var(--e-soft),
             box-shadow var(--d2) var(--e-soft)}
.btn:active{transform:translateY(1px) scale(.985)}
@media (hover:hover){
  .btn-gold:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(196,136,26,.85)}
  .btn-ink:hover{transform:translateY(-1px)}
}
/* Two CTAs used inline styles to shrink themselves, which beat .btn's 44px touch target
   (header 37px, sticky bar 41px). Same specificity as .btn but later in source, so it wins,
   and the @media(max-width:900px) block below grows it back to 45px on phones. */
.btn-sm{padding:12px 20px;font-size:15px}
.btn-gold{background:var(--gold);color:var(--gold-ink);box-shadow:0 10px 26px -12px rgba(196,136,26,.9)}
.btn-gold:hover{background:#b07914}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink);}
.on-dark .btn-line{color:#EDE6DA;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.on-dark .btn-line:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}

/* ── header ── */
header{position:sticky;top:0;z-index:80;background:rgba(250,247,242,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transition:box-shadow var(--d2) var(--e-soft)}
header.stuck{box-shadow:0 6px 22px -14px rgba(21,27,34,.5)}
/* Without blur support, opacity has to carry it or the H1 scrolls through the bar */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header,.sticky{background:rgba(250,247,242,.975)}
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
/* padding+matching negative margin grows the hit area to 28px for WCAG 2.2 SC 2.5.8
   (was 22px) without shifting the logo a single pixel visually. */
.logo{display:flex;align-items:center;gap:9px;font:400 21px/1 var(--serif);color:var(--ink);
  letter-spacing:-.01em;padding:3px 0;margin:-3px 0}
.logo svg{width:22px;height:22px;color:var(--gold)}
.nav-links{display:flex;gap:var(--s7);align-items:center}
/* :not(.btn) — otherwise this (0,1,1) rule beats .btn-gold (0,1,0) and paints the
   header CTA muted grey on gold, which measured 1.58:1. */
.nav-links a:not(.btn){font-size:15px;color:var(--muted)}
.nav-links a:not(.btn):hover{color:var(--ink)}
@media(max-width:900px){.nav-links a:not(.btn){display:none}}

/* ── hero: editorial, asymmetric ── */
.hero{background:var(--ink-900);color:#C9CFD6;position:relative;overflow:hidden;
  padding:clamp(64px,9vw,116px) 0 clamp(72px,10vw,128px)}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 460px at 72% 8%,rgba(232,169,43,.15),transparent 66%)}
.hero>*{position:relative}
.hero .eyebrow{color:var(--gold-lite)}
.hero h1{color:#FDFBF7}
/* Two-line thesis: loud good news in white, then the quiet turn at 56% in muted grey.
   Emphasis from scale + voice, not from colouring one word gold (the serif-headline tell).
   1.14 line-height clears the Lithuanian ogonek floor (ą ę į ų). Replaced .hero h1 em. */
.hero h1 span{display:block;font-size:.56em;line-height:1.14;color:#8D96A1;margin-top:.28em;letter-spacing:0}
.hero .lede{color:#A9B2BC;margin-top:var(--s6)}
.hgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,72px);align-items:center}

/* Orchestrated hero entrance. Exists only under .js-in, which the script adds,
   so with no JS the hero is simply visible — the failure mode is "no animation",
   never "no content". */
@media (prefers-reduced-motion:no-preference){
  .js-in .hero-seq > *{animation:heroIn var(--d5) var(--e-glide) both}
.js-in .hero-seq > *:nth-child(1){animation-delay:60ms}
.js-in .hero-seq > *:nth-child(2){animation-delay:130ms}
.js-in .hero-seq > *:nth-child(3){animation-delay:220ms}
.js-in .hero-seq > *:nth-child(4){animation-delay:320ms}
.js-in .hero-seq > *:nth-child(5){animation-delay:420ms}
  .js-in .herophoto{animation:cardIn 900ms var(--e-glide) 260ms both}
}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}

@media(max-width:940px){
  .hgrid{grid-template-columns:1fr;gap:var(--s7)}
  /* On a phone the demo was ~95px below the fold and its instruction ~377px
     below that, so the first thing seen was an unlabelled dark rectangle.
     Lead with the demo, and put the instruction above it. */
  .hgrid .demo{order:-1}
  .hgrid .tapnote{order:-1;margin-block:0 var(--s4)}
  .hgrid .demo{display:flex;flex-direction:column}
  .hgrid .demo .stage{order:1}
}
.hero-ctas{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s7)}
.hero .facts{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s7);margin-top:var(--s8);
  padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.13);font-size:14.5px;color:#8D96A1}
.hero .facts b{color:#EDE6DA;font-weight:600}

/* ── the interactive card: tap it, it actually responds ── */
.stage{display:grid;place-items:center;min-height:380px;perspective:1200px}
@media(max-width:940px){.stage{min-height:330px}}
.tapcard{width:min(330px,84%);aspect-ratio:1.586;min-height:180px;border-radius:16px;position:relative;cursor:pointer;
  background:linear-gradient(158deg,#1B2534 0%,#243348 55%,#2E4258 100%);
  box-shadow:0 34px 70px -22px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.13);
  padding:24px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(-2.5deg);
  transition:transform var(--d3) var(--e-out);will-change:transform;
 /* TILT IS 100% CSS — Motion must never animate .tapcard's transform. animateMini compiles
    x/scale/rotate into ONE transform keyframe and would wipe the rotate(-2.5deg) base tilt.
    Full `animate` (springs) = ~25 KB gz vs the current ~7 KB bundle, for an effect gated to
    pointer:fine — mice, not the phone this is pitched on. Settled; do not re-litigate. */
  -webkit-tap-highlight-color:transparent}
.tapcard.live{transition:transform .1s linear}
.tapcard .brandline{font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#A9BCD1}
.tapcard .headline{font:400 25px/1.15 var(--serif);margin-top:6px}
.tapcard .stars{color:var(--gold-lite);font-size:18px;letter-spacing:5px;margin-top:10px}
.tapcard .hint{font-size:12.5px;color:#9FB0C2;display:flex;align-items:center;gap:7px}
.tapcard .hint svg{width:15px;height:15px;color:var(--gold-lite)}
.ripple{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;
  border:1px solid var(--gold-lite);border-radius:50%;opacity:0;pointer-events:none}
.tapcard.tapped .ripple{animation:rp 900ms cubic-bezier(.12,.72,.3,1) forwards}
.tapcard.tapped .ripple:nth-child(2){animation-delay:110ms}
.tapcard.tapped .ripple:nth-child(3){animation-delay:220ms}
@keyframes rp{0%{transform:scale(.34);opacity:.9}55%{opacity:.26}100%{transform:scale(2.15);opacity:0}}
.tapnote{margin-top:var(--s5);font:500 13px/1.45 var(--mono);letter-spacing:.06em;color:#8D96A1;
  text-align:center;transition:color var(--d2) var(--e-soft);min-height:2.9em}
.tapnote.done{color:var(--gold-lite)}

/* Hero photo — the real card in context replaces the CSS mockup. Shadow only (no
   border). Uses .rv so it is visible even if JS never runs; the .js-in entrance is
   a bonus that self-clears. */
.herophoto{margin:0;border-radius:var(--r);overflow:hidden;
  box-shadow:0 40px 84px -30px rgba(0,0,0,.82)}
.herophoto img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
/* The interactive tap-demo, moved out of the hero into #kaip ("try it yourself").
   #kaip is a light band, so the tapnote (built for the dark hero) needs darker text. */
.trydemo{margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid var(--line);text-align:center}
.trydemo h3{margin-top:var(--s3)}
.trydemo .th{max-width:46ch;margin:0 auto;color:var(--muted)}
.trydemo .stage{margin-top:var(--s4);min-height:340px}
.trydemo .tapnote{color:var(--muted)}
.trydemo .tapnote.done{color:var(--gold-text)}

/* phone sheet that rises when the card is tapped */
.phone{position:absolute;right:-6px;bottom:-30px;width:206px;border-radius:20px;overflow:hidden;
  background:#fff;box-shadow:0 26px 54px -18px rgba(0,0,0,.62);
  transform:translateY(26px) scale(.92);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .4s;
  pointer-events:none}
.phone.show{transform:none;opacity:1}
@media(max-width:940px){.phone{right:-4px;bottom:-24px;width:186px}}
.phone .top{background:#F1F3F4;padding:9px 11px;font:500 11px/1.3 var(--sans);color:#5F6368;
  display:flex;align-items:center;gap:5px;border-bottom:1px solid #E3E6E8}
.phone .top i{width:11px;height:11px;border-radius:50%;background:#4285F4;display:block;flex:none}
.phone .body{padding:12px 11px 14px}
.phone .biz{font:600 13px/1.25 var(--sans);color:#202124}
.phone .addr{font-size:11px;color:#5F6368;margin-top:2px}
.phone .rate{margin-top:9px;font-size:11px;color:#5F6368}
.phone .st{display:flex;gap:3px;margin-top:5px}
.phone .st span{width:19px;height:19px;color:#DADCE0}
.phone.show .st span{animation:starpop var(--d3) var(--e-out) forwards}
.phone.show .st span:nth-child(1){animation-delay:.28s}
.phone.show .st span:nth-child(2){animation-delay:.35s}
.phone.show .st span:nth-child(3){animation-delay:.42s}
.phone.show .st span:nth-child(4){animation-delay:.49s}
.phone.show .st span:nth-child(5){animation-delay:.56s}
@keyframes starpop{
  0%{transform:scale(.4);color:#DADCE0}
  60%{transform:scale(1.18);color:#FBBC04}
  100%{transform:scale(1);color:#FBBC04}}
.phone .send{margin-top:11px;background:#1A73E8;color:#fff;border-radius:4px;
  font:600 11px/1 var(--sans);padding:8px 0;text-align:center}
@media (prefers-reduced-motion:reduce){
  .tapcard,.phone{transition:none}
  .tapcard.tapped .ripple{animation:none}
  .phone.show .st span{animation:none;color:#FBBC04}
}

/* ── sections ── */
section{padding-block:clamp(64px,8.5vw,var(--s9))}
.band-paper2{background:
    radial-gradient(1100px 420px at 88% 0%,rgba(196,136,26,.055),transparent 62%),
    radial-gradient(760px 380px at 4% 100%,rgba(21,27,34,.035),transparent 60%),
    var(--paper-2);
  border-block:1px solid var(--line)}
.on-dark{background:var(--ink-900);color:#AEB6C0;--focus:var(--gold-lite)} /* 9.08:1 on ink-900 */
.on-dark h2,.on-dark h3{color:#FDFBF7}
.on-dark .eyebrow{color:var(--gold-lite)}
.on-dark .rule{background:var(--gold-lite)}

/* editorial numbered steps — a list, not cards */
.steps{margin-top:var(--s8);display:grid;gap:0}
.stp{display:grid;grid-template-columns:88px 1fr 1fr;gap:var(--s6);
  padding:var(--s7) 0;border-top:1px solid var(--line);align-items:start}
.stp:last-child{border-bottom:1px solid var(--line)}
@media(max-width:820px){.stp{grid-template-columns:56px 1fr;gap:var(--s4) var(--s5)}
  .stp .sbody{grid-column:2}}

/* ── Scene gallery — the real card shown in real settings. Dark band so the warm
   photos pop. The <img>s are always in the DOM; .rv only adds a fade the global
   failsafe removes, so no image is ever hidden behind JS (rule 1). ── */
.scenes .sub{margin-top:var(--s5);color:var(--muted-dk);max-width:54ch}
.scenes .vlabel{margin-top:var(--s3);font:500 10.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:#7A828C}
.scene-grid{margin-top:var(--s7);display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.scene{margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:0 26px 54px -22px rgba(0,0,0,.7)}
.scene img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.scene figcaption{position:absolute;left:var(--s4);bottom:var(--s4);
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgba(13,18,24,.66);padding:7px 11px;border-radius:6px}
@media(max-width:620px){.scene-grid{grid-template-columns:1fr;gap:var(--s4)}
  .scene figcaption{font-size:10px}}
.stp .n{font:400 40px/1 var(--serif);color:var(--gold-text);opacity:.8}
.stp h3{margin-bottom:var(--s3)}
.stp p{color:var(--muted);font-size:16px}
.stp .say{font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--ink);font-style:italic;
  border-left:2px solid var(--gold);padding-left:var(--s5)}

/* report */
.rgrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:940px){.rgrid{grid-template-columns:1fr}}
.rlist{list-style:none;margin-top:var(--s6);display:grid;gap:var(--s4)}
.rlist li{display:grid;grid-template-columns:22px 1fr;gap:var(--s3);font-size:16.5px;color:var(--ink)}
.rlist svg{width:18px;height:18px;color:var(--green);margin-top:4px}
.screen{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 30px 60px -26px rgba(21,27,34,.35);overflow:hidden}
.screen .bar{height:42px;display:flex;align-items:center;gap:6px;padding:0 var(--s4);
  border-bottom:1px solid var(--line);background:rgba(0,0,0,.015)}
.screen .bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.screen .bar b{margin-left:auto;font:400 11.5px/1 var(--mono);color:var(--muted)}
.screen .in{padding:var(--s6) var(--s5) var(--s5)}
.js-rv .screen svg{clip-path:inset(0 100% 0 0);transition:clip-path 900ms var(--e-glide) 220ms}
.js-rv .screen.in svg{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.js-rv .screen svg{clip-path:none;transition:none}}
.tag{display:inline-block;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:#6B4A0C;background:var(--gold-tint);border-radius:3px;padding:6px 9px}
.big{font:400 clamp(34px,6vw,52px)/1 var(--serif);color:var(--green);margin:var(--s4) 0 var(--s2);
  display:flex;align-items:baseline;gap:12px}
.big .slot{display:inline-block;width:84px;border-bottom:2px dashed var(--line-2)}
.cap{font-size:14px;color:var(--muted)}
/* x=96 in a 320-wide viewBox is 30%, so the label stays under the marker at every width
   while keeping a constant 11px — SVG <text> would have scaled with the box. */
.chartwrap{position:relative;margin-top:var(--s5);padding-bottom:19px}
.cmark{position:absolute;left:30%;bottom:0;transform:translateX(-50%);white-space:nowrap;
  font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.foot{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s8)}
@media(max-width:820px){.nums{grid-template-columns:1fr}}
.nm{padding:0 var(--s6)}
.nm+.nm{border-left:1px solid rgba(255,255,255,.13)}
@media(max-width:820px){.nm{padding:var(--s6) 0}.nm+.nm{border-left:0;border-top:1px solid rgba(255,255,255,.13)}}
.nm b{display:block;font:400 clamp(44px,6.5vw,62px)/1 var(--serif);color:#FDFBF7}
.nm p{margin-top:var(--s3);font-size:15.5px;color:#8D96A1;max-width:28ch}
.nm cite{display:block;margin-top:var(--s2);font:400 12px/1 var(--mono);color:var(--muted-dk);font-style:normal}

/* included — hairline grid */
.inc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:var(--s8)}
@media(max-width:900px){.inc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.inc{grid-template-columns:1fr}}
.ic{background:var(--paper);padding:var(--s6) var(--s5)}
.ic svg{width:21px;height:21px;color:var(--gold-text);margin-bottom:var(--s4)}
.ic h3{font-size:18px}
.ic p{margin-top:var(--s2);font-size:14.5px;color:var(--muted);line-height:1.55}

/* comparison */
.cmp{margin-top:var(--s8);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{width:100%;min-width:660px;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:var(--s4) var(--s4);text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line-2);white-space:nowrap}
.cmp tbody th{font:400 16px/1.4 var(--serif);color:var(--ink);width:210px}
.cmp .me{background:var(--gold-tint)}
.cmp thead .me{color:var(--gold-text);font-weight:700}
.cmp td{color:var(--muted)}
.cmp td.me{color:var(--ink);font-weight:600}
.cmp-note{margin-top:var(--s5);font-size:14px;color:var(--muted)}
.only-wide{display:none}
@media(max-width:760px){.only-wide{display:inline}}
/* On a phone the full table pushed the TapStar column ~650px off-screen, so a
   visitor read three competitor columns and never saw us win. Collapse to
   "other options" vs "TapStar" instead. */
/* Three columns of Lithuanian will not fit 327px, so on phones the table stops
   being a table and each row becomes a small block with its column named. */
@media(max-width:760px){
  .cmp{overflow-x:visible}
  .cmp table{min-width:0;width:100%;display:block}
  .cmp thead{display:none}
  .cmp tbody,.cmp tbody tr,.cmp tbody th,.cmp tbody td{display:block;width:auto}
  .cmp tbody tr{border-bottom:1px solid var(--line);padding:var(--s5) 0}
  .cmp tbody tr:last-child{border-bottom:0}
  .cmp tbody th{font:400 18px/1.3 var(--serif);color:var(--ink);border:0;padding:0 0 var(--s3)}
  .cmp tbody td{border:0;padding:0 0 var(--s2);font-size:15px}
  .cmp tbody td::before{content:attr(data-l);display:block;font:500 10.5px/1 var(--mono);
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  /* keep the two that carry the argument: subscription cost vs one-off */
  .cmp tbody td:nth-child(2),.cmp tbody td:nth-child(3){display:none}
  /* one row shows the tap-vs-QR contrast instead of two identical „vienas prilietimas".
     td.keep/.drop = (0,2,3), beats the nth-child rule (0,2,2) whatever the source order. */
  .cmp tbody tr td.keep{display:block}
  .cmp tbody tr td.drop{display:none}
  .cmp tbody td.me{background:var(--gold-tint);border-left:2px solid var(--gold);
    padding:var(--s3) var(--s4);border-radius:0 4px 4px 0;margin-top:var(--s2)}
  .cmp tbody td.me::before{color:var(--gold-text)}
}

/* founding */
.fnd{margin-top:var(--s7);border:1px solid var(--line-2);background:var(--paper-2);
  display:grid;grid-template-columns:1.3fr .7fr}
@media(max-width:820px){.fnd{grid-template-columns:1fr}}
.fnd .l{padding:var(--s7)}
.fnd .r{padding:var(--s7);border-left:1px solid var(--line);display:grid;place-content:center;text-align:center;
  background:var(--gold-tint)}
@media(max-width:820px){.fnd .r{border-left:0;border-top:1px solid var(--line)}}
.fnd ul{list-style:none;margin-top:var(--s5);display:grid;gap:var(--s3)}
.fnd li{display:grid;grid-template-columns:20px 1fr;gap:var(--s3);font-size:16px;color:var(--ink)}
.fnd li svg{width:17px;height:17px;color:var(--gold-text);margin-top:4px}
.fnd .price{font:400 clamp(50px,8vw,68px)/1 var(--serif);color:var(--ink)}
.fnd .sm{font-size:14px;color:var(--text);margin:var(--s3) 0 var(--s5)}

/* pricing */
.tiers{margin-top:var(--s8);border:1px solid var(--line-2);display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper-2)}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}
.tr{padding:var(--s7) var(--s5);display:flex;flex-direction:column}
.tr+.tr{border-left:1px solid var(--line)}
@media(max-width:900px){.tr+.tr{border-left:0;border-top:1px solid var(--line)}}
.tr.pick{background:var(--paper);box-shadow:0 24px 54px -26px rgba(21,27,34,.4);position:relative;z-index:2}
.tr .lbl{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:var(--s4)}
.tr .amt{font:400 clamp(42px,5.4vw,54px)/1 var(--serif);color:var(--ink);margin-top:var(--s3)}
.tr .amt i{font-style:normal;font-size:.46em;vertical-align:.42em;margin-left:6px;color:var(--muted)}
.tr .sub{font-size:13.5px;color:var(--muted);margin-top:var(--s2)}
.tr .fp{margin-top:var(--s3);font:500 13px/1 var(--mono);color:var(--gold-text)}
.tr .why{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:var(--s4);max-width:32ch}
.tr ul{list-style:none;display:grid;gap:var(--s3);margin:var(--s6) 0}
.tr li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:14.5px}
.tr li svg{width:16px;height:16px;color:var(--green);margin-top:3px}
.tr .btn{margin-top:auto;justify-content:center}
/* payback calculator */
.calc{margin-top:var(--s7);border:1px solid var(--line-2);background:var(--paper-2);
  padding:var(--s6);display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
@media(max-width:760px){.calc{grid-template-columns:1fr;gap:var(--s5)}}
.calc label{display:block;font-size:15.5px;color:var(--ink);margin-bottom:var(--s3)}
.calc-row{display:flex;align-items:center;gap:var(--s2)}
.calc .cur{font:400 26px/1 var(--serif);color:var(--muted)}
.calc input{font:400 26px/1 var(--serif);color:var(--ink);width:120px;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:6px;background:var(--paper);
  font-variant-numeric:tabular-nums}
.calc input:focus{outline:2px solid var(--gold-text);outline-offset:2px}
.calc-out{border-left:2px solid var(--gold);padding-left:var(--s5)}
@media(max-width:760px){.calc-out{border-left:0;border-top:1px solid var(--line);
  padding:var(--s5) 0 0}}
.calc-out b{display:block;font:400 clamp(38px,6vw,52px)/1 var(--serif);color:var(--green)}
.calc-out span{font-size:15.5px;color:var(--muted)}
.calc-note{grid-column:1/-1;font-size:14px;color:var(--muted);margin:0;
  padding-top:var(--s4);border-top:1px solid var(--line)}

.pnote{margin-top:var(--s6);font-size:15.5px;color:var(--muted)}
.pnote a,.inc-note a{color:var(--gold-text);border-bottom:1px solid currentColor;font-weight:600}
/* where it sits, per trade — concrete placement proves you thought about THEIR counter */
.places{margin-top:var(--s7);border-top:1px solid var(--line);padding-top:var(--s6)}
.places h3{font-size:19px;margin-bottom:var(--s5)}
.places-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
@media(max-width:820px){.places-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.places-grid{grid-template-columns:1fr;gap:var(--s4)}}
.places-grid div{font-size:14.5px;color:var(--muted);border-left:2px solid var(--gold);
  padding-left:var(--s4)}
.places-grid b{display:block;font:400 16px/1.3 var(--serif);color:var(--ink);margin-bottom:4px}

.inc-note{margin-top:var(--s6);font-size:15.5px;color:var(--muted)}

/* letter */
.letter{max-width:660px;border-left:2px solid var(--gold);padding-left:var(--s6)}
.letter p{font-family:var(--serif);font-size:19px;line-height:1.65;color:var(--ink);margin-top:var(--s4)}
.letter p:first-of-type::first-letter{float:left;font-size:58px;line-height:.86;
  padding:4px 10px 0 0;color:var(--gold-text)}

/* Photo slots — drop an <img class="ph"> in and it fills the frame correctly.
   Until then the CSS illustration stands in. */
.photoframe{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line)}
.photoframe img.ph{width:100%;height:100%;object-fit:cover;display:block}
.photoframe.wide{aspect-ratio:16/10}
.photoframe.square{aspect-ratio:1}
.letter .sig{font-family:var(--serif);font-style:italic;font-size:19px;margin-top:var(--s5);color:var(--ink)}

/* Grid children all intersect at once, so without a stagger nine tiles snap in
   together. Delay is on the reveal transition, not a new animation. */
@media (prefers-reduced-motion:no-preference){
.js-rv .inc .rv:nth-child(1).in{transition-delay:0ms}
.js-rv .inc .rv:nth-child(2).in{transition-delay:55ms}
.js-rv .inc .rv:nth-child(3).in{transition-delay:110ms}
.js-rv .inc .rv:nth-child(4).in{transition-delay:165ms}
.js-rv .inc .rv:nth-child(5).in{transition-delay:220ms}
.js-rv .inc .rv:nth-child(6).in{transition-delay:275ms}
.js-rv .inc .rv:nth-child(7).in{transition-delay:330ms}
.js-rv .inc .rv:nth-child(8).in{transition-delay:385ms}
.js-rv .inc .rv:nth-child(9).in{transition-delay:440ms}
.js-rv .tiers .rv:nth-child(1).in{transition-delay:0ms}
.js-rv .tiers .rv:nth-child(2).in{transition-delay:70ms}
.js-rv .tiers .rv:nth-child(3).in{transition-delay:140ms}
.js-rv .track .rv:nth-child(1).in{transition-delay:0ms}
.js-rv .track .rv:nth-child(2).in{transition-delay:60ms}
.js-rv .track .rv:nth-child(3).in{transition-delay:120ms}
.js-rv .track .rv:nth-child(4).in{transition-delay:180ms}
.js-rv .track .rv:nth-child(5).in{transition-delay:240ms}
.js-rv .places-grid .rv:nth-child(1).in{transition-delay:0ms}
.js-rv .places-grid .rv:nth-child(2).in{transition-delay:60ms}
.js-rv .places-grid .rv:nth-child(3).in{transition-delay:120ms}
.js-rv .places-grid .rv:nth-child(4).in{transition-delay:180ms}
}

/* ordering track */
.track{list-style:none;counter-reset:t;margin-top:var(--s7);display:grid;gap:0}
.track li{counter-increment:t;display:grid;grid-template-columns:44px 1fr;gap:var(--s5);
  padding:var(--s5) 0;border-top:1px solid var(--line);align-items:start}
.track li:last-child{border-bottom:1px solid var(--line)}
.track li::before{content:counter(t);font:400 20px/44px var(--serif);color:var(--gold-text);
  text-align:center;border:1px solid var(--line-2);border-radius:50%;width:44px;height:44px}
.track b{display:block;font:400 19px/1.3 var(--serif);color:var(--ink);margin-bottom:4px}
.track span{font-size:15.5px;color:var(--muted)}
/* li is a 2-col grid with THREE items (::before, b, span). Without this, auto-placement
   put the description in column 1 — a 44px-wide, 450px-tall ribbon of one-word lines.
   Both text elements belong in column 2; the counter keeps column 1 to itself. */
.track b,.track span{grid-column:2}
@media(max-width:600px){.track li{grid-template-columns:34px 1fr;gap:var(--s4)}
  .track li::before{width:34px;height:34px;font-size:16px;line-height:34px}}

/* ── Scroll-linked progress rail (Motion.dev) ────────────────────────────────
   PURELY ADDITIVE. --tp defaults to 0, so the gold fill is simply absent until
   script sets it. If Motion never loads you get the plain grey rail and all five
   steps stay fully readable — this can never hide content (rule 1).
   --rc is the circle's radius, so the rail lands dead-centre in the number gutter
   and stops at the first and last circle rather than running past them. */
.track{position:relative;--rc:22px}
.track::before,.track::after{content:"";position:absolute;width:2px;z-index:0;
  left:calc(var(--rc) - 1px);
  top:calc(var(--s5) + var(--rc) + 1px);      /* +1px clears the li border-top */
  bottom:calc(var(--s5) + var(--rc) + 1px)}
.track::before{background:var(--line)}
.track::after{background:var(--gold);transform:scaleY(var(--tp,0));transform-origin:top}
/* paper fill + z-index so the rail reads as passing behind each numbered step */
.track li::before{background:var(--paper-2);position:relative;z-index:1}
@media(max-width:600px){.track{--rc:17px}}
@media (prefers-reduced-motion:reduce){.track::after{display:none}}

/* faq */
.faq{max-width:800px;margin-top:var(--s7)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:var(--s5) 40px var(--s5) 0;font:400 20px/1.35 var(--serif);
  color:var(--ink);list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--d3) var(--e-soft)}
details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
details .ans{padding:0 var(--s6) var(--s5) 0;color:var(--muted);font-size:16px}
/* Unsupported -> nothing is declared and it opens instantly, exactly as before. */
@supports selector(details::details-content){
  @media (prefers-reduced-motion:no-preference){
    details::details-content{display:grid;grid-template-rows:0fr;
      transition-property:grid-template-rows,content-visibility;
      transition-duration:var(--d3);transition-timing-function:var(--e-out);
      transition-behavior:allow-discrete}
    details[open]::details-content{grid-template-rows:1fr}
    details .ans{overflow:hidden;min-height:0}
  }
}

/* contact */
.cta{background:var(--ink-900);color:#AEB6C0;text-align:center}
.cta h2{color:#FDFBF7}
.cta .mail{display:inline-block;margin-top:var(--s6);font:400 clamp(26px,5.4vw,44px)/1.1 var(--serif);
  color:var(--gold-lite);border-bottom:1px solid rgba(232,169,43,.4);padding-bottom:6px}
/* enquiry form — no backend, no third-party service */
.ask{max-width:640px;margin:var(--s8) auto 0;text-align:left;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:var(--s6);
  background:rgba(255,255,255,.035)}
@media(max-width:600px){.ask{padding:var(--s5)}}
.ask-head{font:400 19px/1.4 var(--serif);color:#FDFBF7;margin-bottom:var(--s5)}
.ask-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:600px){.ask-grid{grid-template-columns:1fr}}
.ask label{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.05em;
  text-transform:uppercase;color:#9FA8B3}
.ask label.wide{grid-column:1/-1}
.ask .opt{text-transform:none;letter-spacing:0;color:#79818C;font-weight:400}
.ask input,.ask select{width:100%;margin-top:7px;padding:13px 14px;
  font:400 16px/1.2 var(--sans);color:#FDFBF7;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);border-radius:6px;text-transform:none;letter-spacing:0}
.ask input::placeholder{color:#6E7782}
.ask select option{color:#151B22;background:#fff}
.ask input:focus,.ask select:focus{outline:2px solid var(--gold-lite);outline-offset:1px;
  border-color:transparent}
.ask-actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.ask-note{margin-top:var(--s4);font-size:13.5px;color:#8D96A1}
.ask-note.ok{color:var(--gold-lite)}
/* Shown only when the in-app browser blocks mailto/clipboard, so the lead can long-press
   -> Kopijuoti. 16px is load-bearing: .focus() is programmatic and <16px makes iOS zoom.
   Matches .ask input (1px border, no shadow -> border-OR-shadow rule). */
#ask-fallback{width:100%;margin-top:var(--s4);min-height:150px;padding:12px 14px;
  font:400 16px/1.5 var(--sans);color:#FDFBF7;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);border-radius:6px;resize:vertical;
  -webkit-user-select:text;user-select:text}

.cta .soon{margin-top:var(--s5);font:500 13px/1 var(--mono);color:var(--muted-dk);letter-spacing:.05em}

footer{background:var(--ink-900);color:#77808B;padding-bottom:var(--s8);font-size:14px}
footer .in{border-top:1px solid rgba(255,255,255,.11);padding-top:var(--s6);
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;justify-content:space-between}
footer .logo{color:#FDFBF7;font-size:19px}
footer nav{display:flex;gap:var(--s5);flex-wrap:wrap}
footer a:hover{color:#FDFBF7}
.rekv{margin-top:var(--s5);font:400 12.5px/1.6 var(--mono);color:var(--muted-dk)}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;align-items:center;
  justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background:rgba(250,247,242,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line)}
/* L/R insets for the fixed bar in landscape on a notched phone. Longhand after the
   shorthand above, so it wins; max() preserves --s4 where there is no inset. */
.sticky{padding-left:max(var(--s4),env(safe-area-inset-left));padding-right:max(var(--s4),env(safe-area-inset-right))}
.sticky .p{font:400 19px/1 var(--serif);color:var(--ink)}
.sticky .p small{display:block;font:500 11.5px/1.4 var(--mono);color:var(--text);margin-top:3px}
@media(max-width:900px){
  .sticky{display:flex}
  /* The bar is ~66px PLUS the notch inset — a fixed 80px left the footer covered. */
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  /* 44px minimum touch targets. */
  .btn{padding:15px 26px}
  .btn-sm{padding:15px 20px}                                   /* 45px */
  footer nav a{padding:11px 0;display:inline-block}
  .cta .mail{padding-bottom:16px}                              /* 38.6 -> 44.6 */
  .pnote a,.inc-note a{display:inline-block;padding:10px 0}     /* 37.1 -> 45.1 */
  /* negative margin cancels the box growth, so the 71px header does not move.
     Footer logo stays at 27px, which already clears the 24px minimum. */
  header .logo{padding:12px 0;margin:-12px 0}
}

/* ── Touch-device tuning ──────────────────────────────────────────────────────
   Placed last: specificity ties the base rules and the @supports block above,
   so source order is the whole mechanism. Anywhere earlier and these do nothing. */
@media(hover:none){
  /* Same reasoning as the paper grain: two full-width blurs re-sampling their
     backdrop every scroll frame, top and bottom, across ~22 screens. Nobody sees
     a blur on a phone. Opaque instead — and the header stops ghosting hero text. */
  header,.sticky{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
  /* Tilt is pointer:fine only, so --rx/--ry are unset here; restate the base tilt so
     the press does not snap the card upright. --d1 (not a hardcoded ms) because
     .tapcard:active outranks the reduced-motion transition:none further up. */
  .tapcard:active{transform:rotate(-2.5deg) scale(.985);transition:transform var(--d1) var(--e-out)}
}
/* fire() is a toggle, so tap-open-tap-close is the natural gesture — and two fast taps
   is a double-tap-zoom. The card also holds real text, so long-press raises the iOS
   Copy/Look-Up bubble over the demo. */
.tapcard{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.btn,summary{touch-action:manipulation}

/* ── Sticky price bar: hidden until the visitor is past the hero ──────────────
   It only shows at <=900px (display:flex above). At scroll 0 it ate ~24% of the
   usable viewport and showed „19 €" before the visitor read what it buys; on
   Android it re-anchored over the #ask field being typed into.
   .js-bar is added by the bottom script, so NO script = bar behaves exactly as
   today (constraint 1). transition:none until .bar-anim means the first hide is
   instant — the bar never slides away while motion.min.js is still downloading. */
.sticky{transition:transform var(--d2) var(--e-out)}
.js-bar .sticky{transform:translateY(115%);transition:none}
.js-bar.bar-anim .sticky{transition:transform var(--d2) var(--e-out)}
.js-bar .sticky.up{transform:none}
.js-bar .sticky.up.hush{transform:translateY(115%)}   /* (0,4,0) — must stay after .up */
@media (prefers-reduced-motion:reduce){.sticky{transition:none}}

/* ── Sub-page additions (kainos.html, duk.html only; index.html never loads this file) ──
   .pagehead = a compact paper intro that replaces the dark hero on standalone pages.
   Kept a real block-height so the sticky price bar has something to hide behind until
   the visitor scrolls past it (tapstar.js anchors the bar to .hero OR .pagehead). */
.pagehead{padding:clamp(52px,7vw,92px) 0 clamp(30px,4vw,48px);border-bottom:1px solid var(--line);
  background:radial-gradient(720px 360px at 82% 0%,rgba(196,136,26,.06),transparent 62%),var(--paper)}
.pagehead .rule{margin-top:var(--s4)}
.pagehead h1{font-size:clamp(32px,5vw,50px);margin-top:var(--s4)}
.pagehead .lede{margin-top:var(--s5);max-width:52ch}
.pagehead .back{display:inline-block;margin-top:var(--s5);font-size:14.5px;color:var(--muted)}
.pagehead .back:hover{color:var(--ink)}
/* current page in the top nav */
.nav-links a[aria-current="page"]{color:var(--ink);position:relative}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:2px;background:var(--gold)}
/* a lightweight cross-link block used at the foot of a sub-page's content */
.more{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;font-size:15.5px;color:var(--muted)}
.more a{color:var(--gold-text);border-bottom:1px solid currentColor;font-weight:600;padding-bottom:1px}


/* ── Hover affordances (pointer devices only; the "smooth hover effects" done in
   vanilla CSS, not a React kit). transform+shadow are cheap and never reflow.
   Reduced-motion and touch both opt out. ── */
@media (hover:hover) and (pointer:fine){
  .tr{transition:transform var(--d2) var(--e-out),box-shadow var(--d2) var(--e-soft)}
  .tr:hover{transform:translateY(-4px);box-shadow:0 22px 46px -26px rgba(21,27,34,.45);z-index:3}
  .scene img{transition:transform var(--d4) var(--e-glide)}
  .scene:hover img{transform:scale(1.035)}
}
@media (prefers-reduced-motion:reduce){
  .tr,.scene img{transition:none}
  .tr:hover{transform:none;box-shadow:none}
  .scene:hover img{transform:none}
}