/* AAED — base, layout, page sections */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;font-family:var(--font-ui);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text);background:var(--cream);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;text-rendering:optimizeLegibility}
main{flex:1 0 auto}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 var(--s-3);line-height:var(--lh-tight);font-weight:600;letter-spacing:0}
h1{font-size:var(--fs-h1);font-weight:700} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
p{margin:0 0 var(--s-4)} a{color:var(--petrol);text-underline-offset:3px}
a:hover{color:var(--petrol-600)}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:6px}
.on-petrol :focus-visible,.site-footer :focus-visible{outline-color:var(--yellow)}
::selection{background:var(--yellow);color:var(--charcoal)}
.num,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.latin{direction:ltr;unicode-bidi:isolate;display:inline-block}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:var(--s-4);top:-100px;background:var(--yellow);color:var(--charcoal);padding:var(--s-2) var(--s-4);border-radius:var(--r-sm);z-index:200;font-weight:600;text-decoration:none}
.skip-link:focus{top:var(--s-3)}
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--s-8)}
.section--tight{padding-block:var(--s-7)}
.section--white{background:var(--white)}
.section--petrol{background:var(--petrol);color:var(--text-on-petrol)}
.section--petrol h1,.section--petrol h2,.section--petrol h3{color:var(--cream)}
.section--petrol p{color:var(--text-on-petrol-muted)}
.section__head{max-width:720px;margin-bottom:var(--s-6)}
.section__head p{color:var(--text-muted);font-size:var(--fs-lg)}
.section--petrol .section__head p{color:var(--text-on-petrol-muted)}
.eyebrow{display:inline-flex;gap:var(--s-2);align-items:baseline;font-size:var(--fs-sm);font-weight:500;color:var(--accent-ink);margin-bottom:var(--s-3)}
.eyebrow .num{font-size:var(--fs-sm)}
.section--petrol .eyebrow,.hero .eyebrow{color:var(--yellow)}
.grid{display:grid;gap:var(--s-5)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack>*+*{margin-top:var(--s-4)}
.center{text-align:center}

/* Page entrance — opacity only, cheap */
@media (prefers-reduced-motion:no-preference){
  main{animation:page-in var(--t-med) var(--ease) both}
  @keyframes page-in{from{opacity:0}to{opacity:1}}
}
html.i18n-pending body{visibility:hidden}

/* ---- Hero ---- */
.hero{background:var(--petrol);color:var(--text-on-petrol);padding-block:var(--s-8) var(--s-9);position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-7);align-items:center}
.hero h1{color:var(--cream);margin-bottom:var(--s-4)}
.hero__lead{font-size:var(--fs-lg);color:var(--text-on-petrol-muted);max-width:34em;margin-bottom:var(--s-6)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero__kicker{color:var(--text-on-petrol-muted);font-size:var(--fs-sm);margin-top:var(--s-5);margin-bottom:0}
.page-hero{background:var(--petrol);color:var(--text-on-petrol);padding-block:var(--s-7)}
.page-hero h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem);color:var(--cream);margin-bottom:var(--s-3)}
.page-hero p{color:var(--text-on-petrol-muted);font-size:var(--fs-lg);max-width:40em;margin:0}
.page-hero--light{background:var(--cream);color:var(--text);padding-block:var(--s-7) var(--s-5)}
.page-hero--light h1{color:var(--text)} .page-hero--light p{color:var(--text-muted)}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.breadcrumb{font-size:var(--fs-sm);color:var(--text-on-petrol-muted);margin-bottom:var(--s-3)}
.breadcrumb a{color:inherit}

/* ---- Steps / numbered features ---- */
.step{position:relative}
.step__num{font-family:var(--font-mono);color:var(--accent-ink);font-size:var(--fs-sm);margin-bottom:var(--s-2);display:block;direction:ltr}
.steps-line{position:relative}

/* ---- Prose (legal / long text) ---- */
.prose{max-width:760px}
.prose h2{font-size:var(--fs-h3);margin-top:var(--s-6)}
.prose p,.prose li{color:var(--text)}
.prose ul{list-style:disc;padding-inline-start:1.25rem;margin-bottom:var(--s-4)}

/* ---- Split (form + aside) ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:var(--s-6);align-items:start}
.split--wide-form{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.aside-sticky{position:sticky;top:calc(var(--header-h) + var(--s-5))}

/* ---- Visual language blocks (from guide §06) ---- */
.load-blocks{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;direction:ltr}
.load-blocks i{aspect-ratio:3/4;border-radius:6px;background:var(--petrol)}
.load-blocks i.is-pay{background:var(--yellow)}
.load-blocks i.is-empty{background:transparent;border:1.5px dashed var(--outbound-gray)}
.cap-bar{display:flex;height:12px;border-radius:var(--r-sm);overflow:hidden;background:#E1E6E3;direction:ltr}
.cap-bar b{display:block;height:100%}
.cap-bar .p{background:var(--petrol)} .cap-bar .y{background:var(--yellow)} .cap-bar .g{background:var(--outbound-gray)}
.cap-row{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--s-2)}
.cap-row strong{color:var(--text)}
.route-svg{width:100%;height:auto;max-height:140px}

/* ---- Footer ---- */
.site-footer{background:var(--petrol);color:var(--text-on-petrol-muted);padding-block:var(--s-7) var(--s-5);margin-top:auto}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s-6)}
.footer__brand .brand{color:var(--cream)}
.footer__brand p{margin-top:var(--s-3);max-width:22em;font-size:var(--fs-sm)}
.site-footer h3{font-size:var(--fs-sm);color:var(--cream);font-weight:600;margin-bottom:var(--s-3)}
.site-footer li+li{margin-top:var(--s-2)}
.site-footer a{color:var(--text-on-petrol-muted);text-decoration:none;font-size:var(--fs-sm)}
.site-footer a:hover{color:var(--cream);text-decoration:underline}
.footer__bottom{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;align-items:center;margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid rgba(246,243,234,.16);font-size:var(--fs-xs)}

/* Reserve header space before JS mounts it (prevents layout shift) */
#site-header{min-height:var(--header-h)}

/* Author display rules (grid/flex) must never defeat the hidden attribute */
[hidden]{display:none!important}