/* ared.lt — base, layout and components. Consumes only tokens from tokens.css. */
@import url('/fonts/fonts.css');
@import url('/tokens.css');

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-body);line-height:1.55;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(240,58,46,.3);color:#fff}
:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:var(--r-chip)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid var(--bg)}
html{scrollbar-color:var(--line-strong) var(--bg)}
input,textarea{caret-color:var(--red)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:700}
.skip-link{position:absolute;left:var(--s-4);top:-48px;padding:var(--s-2) var(--s-4);background:var(--text);color:var(--bg);border-radius:var(--r-control);z-index:200}
.skip-link:focus{top:var(--s-4)}
/* type */
.h-display{font-size:var(--fs-display);letter-spacing:-0.035em;line-height:.95;font-weight:700}
.h1{font-size:var(--fs-h1);letter-spacing:-0.03em;line-height:1;font-weight:700}
.h2{font-size:var(--fs-h2);letter-spacing:-0.025em;line-height:1.05;font-weight:650}
.h3{font-size:var(--fs-h3);letter-spacing:-0.02em;line-height:1.15;font-weight:600}
.h4{font-size:var(--fs-h4);letter-spacing:-0.01em;line-height:1.3;font-weight:600}
.lead{font-size:var(--fs-lead);line-height:1.45;letter-spacing:-0.01em;color:var(--text-2)}
.small{font-size:var(--fs-small)}
.caption{font-size:var(--fs-caption);letter-spacing:.01em;font-weight:500;color:var(--text-2);line-height:1.4} /* text-2: 7.7:1; text-3 would be 3.9:1 at 13px */
.mono{font-family:var(--mono);font-size:var(--fs-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.measure{max-width:var(--measure)}
.muted{color:var(--text-2)}
.dot{display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--red);margin-left:.06em;vertical-align:baseline;transform:translateY(-.02em)}
/* body links */
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;color:var(--text-2)}
.prose a:hover{color:var(--text)}
/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.section-tight{padding:var(--s-8) 0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gap)}
.stack>*+*{margin-top:var(--s-5)}
.head>.lead{margin-top:var(--s-5)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:48px;padding:0 var(--s-5);border-radius:var(--r-pill);border:1px solid transparent;font:600 var(--fs-small)/1 var(--font);letter-spacing:-0.005em;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast),transform var(--dur-fast)}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--red);color:var(--on-red)}
.btn-primary:hover{background:var(--red-hover)}
.btn-primary:active{background:var(--red-pressed)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--bg-elevated)}
.btn-lg{height:56px;padding:0 var(--s-6);font-size:var(--fs-body)}
.btn-sm{height:40px;padding:0 var(--s-4);font-size:14px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.4;pointer-events:none;cursor:default}
.textlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text)}
.textlink svg{width:18px;height:18px;transition:transform var(--dur-fast) var(--ease-out)}
.textlink:hover svg{transform:translateX(3px)}
/* nav */
.nav{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:background var(--dur-base),border-color var(--dur-base)}
.nav.scrolled{background:rgba(10,10,11,.92);border-color:var(--line)}
.nav-inner{height:var(--nav-h);display:flex;align-items:center;gap:var(--s-6)}
.wordmark{font-size:22px;font-weight:700;letter-spacing:-0.04em;color:var(--text);display:inline-flex;align-items:baseline}
.wordmark .dot{width:.28em;height:.28em;margin-left:.08em}
.nav-links{display:flex;align-items:center;gap:var(--s-1);margin-left:var(--s-2)}
.nav-link{padding:var(--s-2) var(--s-3);border-radius:var(--r-chip);font-size:var(--fs-small);font-weight:500;color:var(--text-2);transition:color var(--dur-fast)}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--text)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:var(--s-3)}
.nav-burger{display:none;width:44px;height:44px;border:0;background:none;color:var(--text);cursor:pointer;border-radius:var(--r-chip)}
.nav-burger svg{width:24px;height:24px}
.nav-burger .i-close,.nav-burger[aria-expanded="true"] .i-menu{display:none}
.nav-burger[aria-expanded="true"] .i-close{display:block}
.nav-sheet{display:none}
@media (max-width:899px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:inline-flex;align-items:center;justify-content:center}
  .nav-sheet{position:fixed;inset:var(--nav-h) 0 0 0;background:var(--bg);padding:var(--s-6) var(--gutter);flex-direction:column;gap:var(--s-4);z-index:99;overflow-y:auto}
  .nav-sheet.open{display:flex}
  .nav-sheet a{font-size:var(--fs-h3);font-weight:600;letter-spacing:-0.02em;padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
  .nav-sheet .btn{margin-top:auto;justify-content:center;border-bottom:0;font-size:var(--fs-body);letter-spacing:-0.005em;padding:0 var(--s-6);flex:none}
  body.sheet-open{overflow:hidden}
  body.sheet-open .nav{background:var(--bg);border-color:var(--line)}
}
/* footer */
.footer{border-top:1px solid var(--line);padding:var(--s-8) 0 var(--s-6);color:var(--text-2);font-size:var(--fs-small)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-6)}
.footer-col h2{font-size:var(--fs-small);font-weight:600;letter-spacing:0;color:var(--text);margin-bottom:var(--s-3)}
.footer-col a{display:block;padding:var(--s-1) 0}
.footer-col a:hover{color:var(--text)}
.footer-about .wordmark{display:inline-flex;padding:0}
.footer-about p{margin-top:var(--s-3)}
.footer-about p:first-of-type{max-width:34ch}
.footer-about p a{display:inline;padding:0}
.footer-bottom{color:var(--text-2)} /* contrast: #6E6E73 is 3.9:1 on --bg, below the 4.5:1 floor for this 13px status line */
@media (max-width:899px){.footer-grid{grid-template-columns:1fr 1fr}.footer-about{grid-column:1/-1}}
/* image fade-in */
.fade{opacity:0;transform:translateY(12px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fade{opacity:1;transform:none;transition:none}.btn,.textlink svg{transition:none}}

/* components */
.panel{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--shadow-panel)}
.panel-pad{padding:var(--s-6)}
.feature-row{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-8);align-items:center}
.feature-row.rev .copy{order:2}
.feature-row .copy>.lead{margin-top:var(--s-5)}
.feature-row .copy>.list-check{margin-top:var(--s-6)}
.list-check{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.list-check li{display:flex;gap:var(--s-3);align-items:flex-start;color:var(--text-2)}
.list-check li b{color:var(--text);font-weight:600}
.list-check svg{width:20px;height:20px;flex:none;color:var(--text);margin-top:2px}
.deflist{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-8);margin:0}
.deflist>div{border-top:1px solid var(--line);padding-top:var(--s-4)}
.deflist dt{font-size:var(--fs-h4);font-weight:600;letter-spacing:-0.01em}
.deflist dd{margin:var(--s-2) 0 0;color:var(--text-2)}
/* device frames */
.device-ipad,.device-iphone,.device-mac .lid,.device-imac .body{background:var(--frame);box-shadow:var(--shadow-device),inset 0 0 0 1px var(--frame-line)}
.device-ipad{border-radius:var(--r-device);padding:14px}
.device-ipad .screen{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#000}
.device-iphone{border-radius:44px;padding:10px}
.device-iphone .screen{border-radius:36px;overflow:hidden;aspect-ratio:693/1500;background:#000}
.device-mac .lid{border-radius:18px;padding:12px 12px 14px}
.device-mac .screen{border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:#000}
.device-mac .base{height:12px;margin:0 -6%;background:linear-gradient(#3A3A3C,#2C2C2E);border-radius:0 0 10px 10px}
.device-imac{display:flex;flex-direction:column;align-items:center}
.device-imac .body{width:100%;border-radius:16px;padding:14px 14px 40px}
.device-imac .screen{border-radius:6px;overflow:hidden;aspect-ratio:4306/2488;background:#000}
.device-imac .stand{width:110px;height:36px;background:linear-gradient(#3A3A3C,#2C2C2E);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.device-imac .foot{width:40%;height:10px;background:#2C2C2E;border-radius:0 0 8px 8px}
.shot{width:100%;height:100%;object-fit:cover;object-position:top center}
/* receipt (synthetic sample) */
.receipt{background:#fff;color:#111;border-radius:var(--r-control);padding:var(--s-5);max-width:340px;box-shadow:var(--shadow-panel);font-size:var(--fs-small)}
.receipt-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:var(--s-3);border-bottom:1px solid #E5E5EA;font-weight:600}
.receipt-row{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-2) 0;color:#3A3A3C}
.receipt-total{display:flex;justify-content:space-between;padding-top:var(--s-3);margin-top:var(--s-2);border-top:1px solid #E5E5EA;font-weight:700;font-size:var(--fs-body)}
.receipt .mono{color:#6E6E73;font-size:12px}
.receipt-sig{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px dashed #C7C7CC;display:flex;gap:var(--s-2);align-items:center;color:#6E6E73;font-size:12px}
.receipt-sig .dot{background:#C7C7CC;width:8px;height:8px;margin:0}
.receipt-sig.ok{color:#1B7F3B}.receipt-sig.ok .dot{background:var(--ok)}
/* tags */
.tag{display:inline-flex;align-items:center;height:24px;padding:0 var(--s-2);border:1px solid var(--line-strong);border-radius:var(--r-chip);font-size:var(--fs-caption);font-weight:500;color:var(--text-2);white-space:nowrap;vertical-align:middle}
/* timeline */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-5);position:relative}
.timeline::before{content:'';position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line-strong)}
.timeline li{padding-top:var(--s-5);position:relative}
.timeline li::before{content:'';position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--line-strong)}
.timeline li.now::before{background:var(--red);border-color:var(--red)}
.timeline time{display:block;font-weight:600;color:var(--text)}
.timeline p{margin-top:var(--s-1);color:var(--text-2);font-size:var(--fs-small)}
/* pricing */
.price-card{max-width:520px;margin:0 auto}
.price{font-size:var(--fs-display);letter-spacing:-0.035em;line-height:1;font-weight:700}
.price small{font-size:var(--fs-lead);color:var(--text-2);font-weight:400;letter-spacing:-0.01em;margin-left:var(--s-2)}
/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding:var(--s-5) 0;font-size:var(--fs-h4);font-weight:600;letter-spacing:-0.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:none;transition:transform var(--dur-base) var(--ease-out)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details>p{padding:0 0 var(--s-5);color:var(--text-2);max-width:var(--measure)}
/* final cta */
.cta-final{text-align:center}
.cta-final .lead{margin:var(--s-5) auto 0;max-width:44ch}
.cta-final .actions{margin-top:var(--s-6);display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap}
.cta-final .contacts{margin-top:var(--s-5);display:flex;gap:var(--s-5);justify-content:center;flex-wrap:wrap;color:var(--text-2)}
/* three-device stage */
.stage{position:relative;display:grid;grid-template-columns:1fr;min-height:560px}
.stage .mac{width:64%;margin:0 auto}
.stage .ipad{position:absolute;left:0;bottom:0;width:38%}
.stage .iphone{position:absolute;right:4%;bottom:0;width:15%}
@media (max-width:899px){
  .feature-row{grid-template-columns:1fr;gap:var(--s-6)}
  .feature-row.rev .copy{order:0}
  .deflist{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr;gap:var(--s-4);padding-left:var(--s-5)}
  .timeline::before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto}
  .timeline li{padding-top:0;padding-left:var(--s-4)}
  .timeline li::before{left:-24px;top:6px}
  .stage{min-height:0;display:grid;gap:var(--s-5)}
  .stage .mac{width:90%}.stage .ipad,.stage .iphone{position:static;width:100%}
  .stage .iphone{max-width:220px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){.faq summary svg{transition:none}}

/* page helpers */
section[id]{scroll-margin-top:calc(var(--nav-h) + var(--s-6))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.section+.section{padding-top:0}
.head{margin-bottom:var(--s-8)}
.col-10{grid-column:span 10}
.after-list{margin-top:var(--s-7)}
.team-link{margin-top:var(--s-6)}
.roadmap-note{margin-top:var(--s-6)}
.roadmap-note .tag{margin:0 var(--s-1)}
.receipt-stage{display:flex;justify-content:center;align-items:center;padding:var(--s-8) var(--s-5)}
.receipt-note{margin-top:var(--s-2)}
.device-ipad .screen.screen-kds{aspect-ratio:1600/1103}
.device-captions{list-style:none;margin:var(--s-7) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);color:var(--text-2)}
.device-captions b{display:block;color:var(--text);font-weight:600;margin-bottom:var(--s-1)}
.imac-wrap{margin-top:var(--s-8)}
.imac-wrap .device-imac{max-width:1200px;margin:0 auto}
.price-teaser-lead{margin-top:var(--s-5)}
.faq-wrap .faq{margin-top:var(--s-7)}
.faq details>p a,.cta-final .contacts a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.faq details>p a{color:var(--text)}
.cta-final .contacts a:hover{color:var(--text)}
@media (max-width:899px){
  .col-10{grid-column:1/-1}
  .device-captions{grid-template-columns:1fr;gap:var(--s-4)}
  .receipt-stage{padding:var(--s-6) var(--s-4)}
}

/* hero */
.hero{position:relative;margin-top:calc(-1 * var(--nav-h));overflow-x:clip} /* one screen, nothing pinned; starts under the transparent nav */
.hero-sticky{min-height:100vh;display:flex;align-items:center;padding:calc(var(--nav-h) + var(--s-6)) 0 var(--s-8)}
.hero-grid{display:grid;grid-template-columns:11fr 13fr;gap:var(--s-8);align-items:center;width:100%}
.hero-copy .lead{margin-top:var(--s-5);max-width:36ch}
.hero-actions{margin-top:var(--s-6);display:flex;gap:var(--s-3);flex-wrap:wrap}
.hero-note{margin-top:var(--s-4);color:var(--text-2)} /* carries the price: 7.7:1, not the caption grey */
.hero-stage{position:relative;--p:0;--b1:.494;--b2:.692} /* --p is the autoplay timeline (0..1); b1/b2 are the time shares of the sell and pay acts (hero.js sets the exact values) */
.hero-frames{position:relative;isolation:isolate} /* own stacking context: frame z-indexes must not rise above the paper receipt */
.hero-ipad .screen{aspect-ratio:1600/1149} /* frames are cropped below the iPad status bar */
.hero-frames picture,.hero-frames img{position:absolute;inset:0;width:100%;height:100%}
.hero-frames img{visibility:hidden;opacity:0;z-index:0;transition:opacity 280ms ease-in-out} /* hidden, not merely transparent: only the current and previous frame are composited */
.hero-frames img.prev{visibility:visible;opacity:1;z-index:1}
.hero-frames img.on{visibility:visible;opacity:1;z-index:2}
.hero-paper{position:absolute;z-index:3;right:-24px;bottom:124px;width:184px;display:block;opacity:0;transform:rotate(2deg) translateY(32px);transition:opacity 360ms var(--ease-out),transform 360ms var(--ease-out)}
.hero-stage.done .hero-paper{opacity:1;transform:rotate(2deg) translateY(0)}
.hero-paper img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 30px 60px -20px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.4)}
/* segmented step control: every step visible, fills as you scroll, clickable */
.hero-steps{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.hero-steps button{display:block;width:100%;padding:0;border:0;background:none;text-align:left;font:600 var(--fs-small)/1.3 var(--font);letter-spacing:-0.005em;color:var(--text-2);cursor:pointer;transition:color var(--dur-base) var(--ease-out)}
.hero-steps button[aria-current="step"]{color:var(--text)}
.hero-steps button:hover{color:var(--text)}
.hero-steps button[aria-current="step"]:hover{color:var(--text)}
.hero-steps .bar{display:block;height:2px;margin-bottom:var(--s-3);background:var(--line-strong);border-radius:1px;overflow:hidden}
.hero-steps .bar i{display:block;height:100%;background:var(--red);width:calc(100% * clamp(0,var(--seg),1))}
.hero-steps [data-step="0"]{--seg:calc(var(--p) / var(--b1))}
.hero-steps [data-step="1"]{--seg:calc((var(--p) - var(--b1)) / (var(--b2) - var(--b1)))}
.hero-steps [data-step="2"]{--seg:calc((var(--p) - var(--b2)) / (1 - var(--b2)))}
@keyframes dot-pulse{0%{transform:scale(1)}45%{transform:scale(2)}100%{transform:scale(1)}} /* a scale pulse, never a glow */
.receipt-sig.ok .dot{animation:dot-pulse 800ms var(--ease-out) 1}
@media (max-width:899px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s-6);align-content:start}
  .hero-paper{width:104px;right:-6px;top:6%;bottom:auto}
  .hero-actions{flex-wrap:nowrap;gap:var(--s-2)}
  .hero-actions .btn{height:48px;padding:0 var(--s-4);font-size:var(--fs-small);flex:0 1 auto}
  .hero-note{display:none} /* the price is repeated in the pricing section; on phones the space goes to the demo */
  .hero-sticky{display:block;min-height:0;padding-bottom:var(--s-7)}
  .hero-stage{display:flex;flex-direction:column}
  .hero-steps{order:1;gap:var(--s-3)}
  .hero-steps button{font-size:var(--fs-caption)}
}
@media (prefers-reduced-motion:reduce){
  .hero-sticky{min-height:0}
  .hero-frames{display:grid;gap:var(--s-3);aspect-ratio:auto}
  .hero-frames picture,.hero-frames img{position:static;display:none;height:auto}
  .hero-frames picture{display:block}.hero-frames picture img,.hero-frames img[data-key]{display:block;visibility:visible;opacity:1;transition:none}
  .hero-paper{position:static;opacity:1;transform:none;margin:var(--s-4) auto 0;width:240px}  .hero-steps .bar i{width:100%}.hero-steps button{color:var(--text)}
  .receipt-sig.ok .dot{animation:none}
  .hero-stage{position:relative}.hero-grid{min-height:0;align-items:start;padding-top:var(--s-6)} /* copy and CTA stay in the first viewport above the stacked shots */
}
/* solutions / guides index list */
.solutions{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.solutions li{border-bottom:1px solid var(--line)}
.solutions a{display:grid;grid-template-columns:1fr auto;gap:var(--s-4);align-items:center;padding:var(--s-5) 0;color:var(--text)}
.solutions a svg{width:22px;height:22px;color:var(--text-2);transition:transform var(--dur-fast) var(--ease-out),color var(--dur-fast)}
.solutions a:hover svg{transform:translateX(4px);color:var(--text)}
.solutions h2{font-size:var(--fs-h3);letter-spacing:-0.02em;font-weight:600}
.solutions p{color:var(--text-2);margin-top:var(--s-1);max-width:var(--measure)}
/* prose (guides, about, vertical pages) */
.prose{max-width:var(--measure)}
.prose h2{font-size:var(--fs-h3);letter-spacing:-0.02em;font-weight:600;margin-top:var(--s-8)}
.prose h3{font-size:var(--fs-h4);letter-spacing:-0.01em;font-weight:600;margin-top:var(--s-6)}
.prose h2+p,.prose h3+p{margin-top:var(--s-3)}
.prose p,.prose li{margin-top:var(--s-4);color:var(--text-2)}
.prose li{margin-top:var(--s-2)}
.prose ul,.prose ol{padding-left:1.2em;margin:var(--s-4) 0 0}
.prose strong{color:var(--text);font-weight:600}
.prose table{width:100%;border-collapse:collapse;margin-top:var(--s-5);font-size:var(--fs-small)}
.prose th,.prose td{text-align:left;padding:var(--s-3) var(--s-2);border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--text);font-weight:600}
.prose .panel{margin-top:var(--s-6)}
.prose .panel p{margin-top:var(--s-2)}
.prose .panel p:first-child{margin-top:0}
.page-head{padding:calc(var(--s-9) + var(--nav-h)) 0 var(--s-8);margin-top:calc(-1 * var(--nav-h))}
.page-head .lead{margin-top:var(--s-5);max-width:var(--measure)}
/* article pages (guides, vertical pages) */

/* page head followed by content: the head already carries 64px bottom padding,
   so the next section does not add its own 128px top (hub + all guides) */
.page-head+.section{padding-top:0}

/* breadcrumbs line above the H1 (all seven guides) */
.breadcrumbs{margin-bottom:var(--s-5)}
.breadcrumbs a{color:var(--text-2)}
.breadcrumbs a:hover{color:var(--text)}

/* "Atnaujinta … · ared komanda" caption under the lead (all seven guides) */
.page-head .article-meta{margin-top:var(--s-5)}

/* first heading of an article sits at the top of its section (all seven guides) */
.prose>:first-child{margin-top:0}

/* FAQ inside the article (all seven guides) */
.prose .faq{margin-top:var(--s-5)}
.prose .faq details>p{margin-top:0}
/* feature-row device sizing, pricing add-on */
/* funkcijos.html: iPhone and Mac frames inside a .feature-row visual column. Without these the iPhone renders 420x886px at 1440 and the Mac base (margin 0 -6%) overflows the 16px gutter at 390px. */
.feature-row .visual>.device-iphone{width:min(280px,64%);margin:0 auto}
.feature-row .visual>.device-mac{width:90%;margin:0 auto}
/* funkcijos.html: status tag after a .deflist term ("Kita įranga  Pagal užklausą") */
.deflist dt .tag{margin-left:var(--s-2)}
/* kainos.html: Saugos modulis add-on panel under the pricing card (separate panel; panels never nest) */
.price-addon{max-width:520px;margin:var(--s-5) auto 0}
.price-addon p{margin-top:var(--s-2)}
.price-addon .tag{margin-left:var(--s-2)}
/* kainos.html: on phones "už kasą per mėnesį + PVM" wraps mid-phrase beside the 52px price and leaves "+ PVM" alone on a display-height line; set it under the price instead */
@media (max-width:899px){.price small{display:block;margin:var(--s-2) 0 0}}
/* printed receipt as the i.EKA visual */
.receipt-stage:not(.panel){display:flex;flex-direction:column;align-items:center;gap:var(--s-3);padding:0}
.receipt-stage .paper{width:min(300px,78%);height:auto;border-radius:3px;box-shadow:0 30px 60px -24px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.4)}
/* pricing card caption wraps as a whole beside or under the price */
.price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s-2)}
.price small{margin-left:0}
@media (max-width:899px){.price small{flex-basis:100%}}
/* privacy policy (privatumas.html, en/privacy.html): long-form legal text in .prose.legal */
.article-meta a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article-meta a:hover{color:var(--text)}
.legal h2[id],.legal h3[id]{scroll-margin-top:calc(var(--nav-h) + var(--s-6))}
.legal a{overflow-wrap:anywhere}
/* the recipients table scrolls inside its own box on narrow phones instead of widening the page */
.table-scroll{margin-top:var(--s-5);overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll>table{margin-top:0}