/* Khodni Maak — marketing site styles. One file, no build step. Tokens mirror the app. */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-400-normal.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}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-500-normal.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}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-600-normal.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}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-700-normal.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}

/* ---------- Tokens ---------- */
:root{
  --ink:#0F2A3D;--primary:#0F8B7F;--primary-dark:#0A6A61;--primary-darker:#085850;--mint:#E3F4F1;--amber:#F2A33A;
  --sand:#FAF7F2;--surface:#FFFFFF;--text:#14212B;--muted:#5B6B76;--border:#E4E0D8;--danger:#C8402F;--success:#1F9D62;
  --r-card:14px;--r-btn:12px;--r-pill:999px;
  --shadow-sm:0 1px 2px rgba(15,42,61,.06),0 2px 8px rgba(15,42,61,.04);
  --shadow-md:0 2px 4px rgba(15,42,61,.05),0 12px 32px rgba(15,42,61,.08);
  --font:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --container:1120px;--gutter:24px;
}
html[lang="en"]{--font:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--sand);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.75;text-align:start;-webkit-font-smoothing:antialiased}
html[lang="en"] body{line-height:1.65}
img,svg{max-width:100%;height:auto;vertical-align:middle}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{color:var(--ink);line-height:1.3;font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.125rem,5.4vw,3.5rem);line-height:1.2;letter-spacing:0}
h2{font-size:clamp(1.625rem,3.4vw,2.25rem)}
h3{font-size:1.1875rem;font-weight:600}
a{color:var(--primary-dark);text-underline-offset:3px}
a:hover{color:var(--primary-darker)}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.on-dark:focus-visible{outline-color:#fff}
[hidden]{display:none!important}
.num{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .icon--flip{transform:scaleX(-1)}

.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:absolute;inset-inline-start:16px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r-btn);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px;color:#fff}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border:1.5px solid transparent;border-radius:var(--r-btn);font:inherit;font-weight:600;font-size:1.0625rem;line-height:1.3;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.btn--primary{background:var(--primary-dark);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--primary-darker);color:#fff}
.btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.btn--secondary:hover{background:var(--ink);color:#fff}
.btn--ghost{background:transparent;color:var(--primary-dark);border-color:transparent}
.btn--ghost:hover{background:var(--mint);color:var(--primary-darker)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--mint);color:var(--ink)}
.btn--sm{min-height:44px;padding:8px 16px;font-size:1rem}
.btn--block{width:100%}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.94);border-bottom:1px solid var(--border)}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){.site-header{background:rgba(250,247,242,.82);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}}
.site-header__row{display:flex;align-items:center;gap:16px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:var(--ink);font-weight:700;font-size:1.3125rem;text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--ink)}
.brand img{width:36px;height:36px}
.nav{display:none;margin-inline-start:auto}
.nav ul{display:flex;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border-radius:10px;color:var(--text);font-weight:500;font-size:1rem;text-decoration:none}
.nav a:hover{background:var(--mint);color:var(--ink)}
.header-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.lang-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border-radius:10px;color:var(--ink);font-weight:500;font-size:1rem;text-decoration:none}
.lang-link:hover{background:var(--mint);color:var(--ink)}
.lang-link .icon{width:20px;height:20px}
.header-cta{display:none}
@media (min-width:560px){.header-cta{display:inline-flex}}
@media (min-width:960px){.nav{display:block}.header-actions{margin-inline-start:8px}}

/* ---------- Sections ---------- */
.section{padding-block:56px}
.section--surface{background:var(--surface);border-block:1px solid var(--border)}
.section--mint{background:var(--mint)}
@media (min-width:800px){.section{padding-block:88px}}
.section__head{max-width:720px;margin-block-end:32px}
.section__head p:not(.eyebrow){margin-block-start:12px;color:var(--muted);font-size:1.125rem}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-block-end:12px;color:var(--primary-dark);font-weight:600;font-size:.9375rem}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);background:var(--mint);color:var(--primary-darker);font-weight:600;font-size:.875rem;line-height:1.6}
.pill--amber{background:#FDF1DE;color:#7A4A05}
.pill--outline{background:transparent;border:1px solid var(--border);color:var(--muted)}

/* ---------- Hero ---------- */
.hero{padding-block:40px 56px;overflow:hidden}
.hero__grid{display:grid;gap:40px;align-items:center}
.hero__lead{margin-block-start:20px;max-width:34em;color:var(--muted);font-size:1.1875rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:28px}
.hero__facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-block-start:24px;color:var(--muted);font-size:.9375rem;font-weight:500}
.hero__facts li{display:inline-flex;align-items:center;gap:6px}
.hero__facts .icon{width:18px;height:18px;color:var(--success);stroke-width:2.4}
h1 .accent{color:var(--primary-dark);display:block}
.hero__visual{position:relative;max-width:560px;margin-inline:auto;width:100%}
.hero__visual svg{display:block;width:100%;aspect-ratio:480/360;border-radius:24px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md)}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-block-start:16px;color:var(--muted);font-size:.875rem}
.legend li{display:inline-flex;align-items:center;gap:8px}
.legend i{width:12px;height:12px;border-radius:50%;background:var(--primary)}
.legend .l-rider{background:var(--amber)}
.legend .l-hub{background:var(--surface);border:3px solid var(--primary)}
@media (min-width:480px){.hero__cta .btn{flex:0 1 auto}}
@media (max-width:479px){.hero__cta .btn{flex:1 1 100%}}
@media (min-width:920px){.hero{padding-block:72px 96px}.hero__grid{grid-template-columns:1.05fr .95fr;gap:56px}}

/* Hero route animation: opacity/transform/dashoffset only, so nothing shifts layout.
   The captain marker follows points sampled from the route path (plain transforms work everywhere). */
.route-line{stroke-dasharray:1;stroke-dashoffset:0}
.route-captain{transform:translate(150px,245px)}
@media (prefers-reduced-motion:no-preference){
  .route-line{animation:route-draw 2.4s cubic-bezier(.6,0,.3,1) .2s both}
  .route-walk{animation:fade-in .6s ease 1.6s both}
  .route-rider{animation:pop-in .5s cubic-bezier(.3,1.4,.5,1) 1.2s both;transform-box:fill-box;transform-origin:center}
  .route-pin{animation:pop-in .5s cubic-bezier(.3,1.4,.5,1) 2.2s both;transform-box:fill-box;transform-origin:50% 100%}
  .route-pulse{animation:pulse 2.8s ease-out 2.6s infinite;transform-box:fill-box;transform-origin:center}
  .route-captain{animation:drive 10s linear 1.2s infinite both;will-change:transform}
}
@keyframes route-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes pop-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}}
@keyframes drive{0%{transform:translate(60px,292px);opacity:0}4%{transform:translate(60px,292px);opacity:1}8.3%{transform:translate(71.1px,291.5px);opacity:1}12.5%{transform:translate(96.3px,285.9px);opacity:1}16.8%{transform:translate(124.1px,269.9px);opacity:1}21%{transform:translate(150px,244.8px);opacity:1}25.3%{transform:translate(175.9px,218.6px);opacity:1}29.5%{transform:translate(203.7px,200px);opacity:1}33.8%{transform:translate(228.9px,191.7px);opacity:1}38%{transform:translate(240px,190px);opacity:1}52%{transform:translate(240px,190px);opacity:1}56.5%{transform:translate(251.2px,188.2px);opacity:1}61%{transform:translate(276.9px,179.4px);opacity:1}65.5%{transform:translate(306.2px,159.4px);opacity:1}70%{transform:translate(333.8px,130.8px);opacity:1}74.5%{transform:translate(360.3px,102.7px);opacity:1}79%{transform:translate(387.1px,84.2px);opacity:1}83.5%{transform:translate(410.1px,77px);opacity:1}88%{transform:translate(420px,76px);opacity:1}96%,100%{transform:translate(420px,76px);opacity:0}}

/* ---------- Cards & grids ---------- */
.grid{display:grid;gap:16px}
@media (min-width:640px){.grid--2,.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid{gap:24px}}
@media (min-width:960px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow-sm)}
.section--surface .card{background:var(--sand);box-shadow:none}
.card h3{margin-block-end:8px}
.card p{color:var(--muted);font-size:1rem}
.card__icon{display:grid;place-items:center;width:48px;height:48px;margin-block-end:16px;border-radius:12px;background:var(--mint);color:var(--primary-dark)}
.card--role{padding:28px}
.card__title{display:flex;align-items:center;gap:12px;margin-block-end:20px}
.card__title h3{margin:0;font-size:1.3125rem;font-weight:700}
.card__title .card__icon{margin:0}

.steps{counter-reset:step;display:grid;gap:20px}
.steps li{counter-increment:step;position:relative;padding-inline-start:52px}
.steps li::before{content:counter(step);position:absolute;inset-inline-start:0;top:0;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-family:"IBM Plex Sans",var(--font);font-weight:700;font-size:1rem;line-height:1}
.steps h4{margin:0 0 4px;color:var(--ink);font-size:1.0625rem;font-weight:600;line-height:1.5}
.steps p{color:var(--muted);font-size:1rem}
.card__foot{margin-block-start:24px}

.checks{display:grid;gap:14px}
.checks li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.checks .icon{margin-block-start:4px;color:var(--primary)}
.checks strong{display:block;color:var(--ink)}
.checks span{color:var(--muted);font-size:1rem}

.split{display:grid;gap:32px;align-items:start}
@media (min-width:920px){.split{grid-template-columns:1fr 1fr;gap:56px}.split--wide{grid-template-columns:1.1fr .9fr}}

/* ---------- Pricing ---------- */
.price-card{background:var(--ink);color:#fff;border-radius:20px;padding:32px;box-shadow:var(--shadow-md)}
.price-card h3{color:#fff;font-size:1.125rem;font-weight:600}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin-block:12px 4px;font-weight:700;line-height:1.1}
.price b{font-family:"IBM Plex Sans",var(--font);font-size:4rem;font-weight:700}
.price span{font-size:1.25rem;font-weight:600}
.price small{font-size:1rem;font-weight:500;color:#C9D6DC}
.price-card__tag{display:inline-block;margin-block:12px 20px;padding:6px 14px;border-radius:var(--r-pill);background:var(--amber);color:var(--ink);font-weight:700;font-size:1rem}
.price-card .checks .icon{color:var(--amber)}
.price-card .checks span{color:#DCE6EA}
.price-card .btn{margin-block-start:28px}
.price-card__note{margin-block-start:16px;color:#C9D6DC;font-size:.9375rem}

/* ---------- Match example ---------- */
.match-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--shadow-md)}
.match-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:16px}
.match-card svg.match-map{display:block;width:100%;border-radius:12px;background:var(--sand);aspect-ratio:400/150}
.match-score{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-block:20px 8px;color:var(--ink);font-weight:600}
.match-score b{font-family:"IBM Plex Sans",var(--font);font-size:2rem;font-weight:700;color:var(--primary-dark);line-height:1}
.meter{height:10px;border-radius:var(--r-pill);background:var(--mint);overflow:hidden}
.meter__fill{display:block;height:100%;width:96%;border-radius:inherit;background:var(--primary)}
.match-rows{margin-block-start:16px;display:grid;gap:10px;font-size:1rem}
.match-rows li{display:flex;align-items:center;gap:10px;color:var(--text)}
.match-rows .icon{width:20px;height:20px;color:var(--primary-dark)}
.match-card__note{margin-block-start:16px;padding-block-start:16px;border-block-start:1px dashed var(--border);color:var(--muted);font-size:.875rem}
.prose-list{display:grid;gap:20px;margin-block-start:24px}
.prose-list h3{margin-block-end:4px}
.prose-list p{color:var(--muted)}

/* ---------- Notice ---------- */
.notice{display:grid;grid-template-columns:24px 1fr;gap:12px;margin-block-start:32px;padding:16px 20px;border:1px solid var(--border);border-inline-start:4px solid var(--amber);border-radius:var(--r-card);background:var(--surface);color:var(--text);font-size:1rem}
.notice .icon{margin-block-start:4px;color:var(--ink)}

/* ---------- Install ---------- */
.install-grid{display:grid;gap:16px}
@media (min-width:860px){.install-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.install-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:24px}
.install-card h3{display:flex;align-items:center;gap:10px;margin-block-end:16px}
.install-card h3 .icon{color:var(--primary-dark)}
.install-card .steps{gap:14px}
.install-card .steps li{padding-inline-start:44px;min-height:32px;padding-block-start:2px}
.install-card .steps li::before{width:30px;height:30px;font-size:.9375rem;background:var(--mint);color:var(--primary-darker)}
.install-card .btn{margin-block-start:20px}
.install-card--qr{align-items:center;text-align:center}
.install-card--qr img{width:176px;height:176px;border:1px solid var(--border);border-radius:12px;padding:6px;background:#fff}
.install-card--qr p{margin-block-start:12px;color:var(--muted);font-size:1rem}
.install-card--qr .url{font-family:"IBM Plex Sans",var(--font);font-weight:600;color:var(--ink);direction:ltr}
.install-note{margin-block-start:24px;color:var(--muted);font-size:.9375rem}
/* app.js sets data-platform on <html>; without JS every card stays visible. */
[data-platform="android"] [data-panel]:not([data-panel="android"]),
[data-platform="ios"] [data-panel]:not([data-panel="ios"]){display:none}
[data-platform="android"] .install-grid,[data-platform="ios"] .install-grid{grid-template-columns:minmax(0,520px)}
[data-platform="standalone"] [data-install],[data-platform="standalone"] #install{display:none}

/* ---------- Dialog ---------- */
.dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 24px 64px rgba(15,42,61,.3)}
.dialog::backdrop{background:rgba(15,42,61,.55)}
.dialog__body{padding:24px}
.dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-block-end:20px}
.dialog__head h2{font-size:1.3125rem}
.dialog__close{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:-8px;margin-inline-start:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.dialog__close:hover{background:var(--mint)}
.ios-steps{display:grid;gap:12px}
.ios-steps li{display:grid;grid-template-columns:36px 1fr 44px;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--sand);font-weight:500}
.ios-steps b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-family:"IBM Plex Sans",var(--font);font-weight:700}
.ios-steps .ios-glyph{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--primary-dark)}
.dialog__foot{margin-block-start:20px;color:var(--muted);font-size:.9375rem}
.dialog .btn{margin-block-start:20px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 20px;color:var(--ink);font-weight:600;font-size:1.0625rem;cursor:pointer;list-style:none;border-radius:var(--r-card)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-inline:6px;border-right:2px solid var(--primary-dark);border-bottom:2px solid var(--primary-dark);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq summary:hover{color:var(--primary-darker)}
.faq .faq__a{padding:0 20px 20px;color:var(--text)}
.faq .faq__a p+p,.faq .faq__a ol{margin-block-start:10px}
.faq .faq__a ol{list-style:decimal;padding-inline-start:24px;display:grid;gap:4px}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---------- Support ---------- */
.support{display:grid;gap:24px;align-items:center;padding:32px;border-radius:20px;background:var(--surface);border:1px solid var(--border)}
.support p{margin-block-start:8px;color:var(--muted)}
.support__mail{font-family:"IBM Plex Sans",var(--font);direction:ltr;unicode-bidi:isolate}
@media (min-width:800px){.support{grid-template-columns:1fr auto;padding:40px}}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#DCE6EA;padding-block:48px 32px;font-size:1rem}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline;color:#fff}
.footer-grid{display:grid;gap:32px}
@media (min-width:800px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:48px}}
.footer-brand{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1.3125rem}
.footer-brand img{width:40px;height:40px}
.footer-about{margin-block-start:12px;max-width:36em;color:#C9D6DC;font-size:.9375rem}
.site-footer h2{margin-block-end:12px;color:#fff;font-size:1rem;font-weight:600}
.footer-links{display:grid;gap:2px}
.footer-links a{display:inline-flex;align-items:center;min-height:40px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-block-start:32px;padding-block-start:24px;border-block-start:1px solid rgba(255,255,255,.16);color:#C9D6DC;font-size:.875rem}

/* ---------- Legal & simple pages ---------- */
.page{padding-block:40px 72px}
.page__inner{max-width:780px}
.draft-banner{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;margin-block-end:32px;padding:14px 18px;border:1px solid #E9C98F;border-inline-start:4px solid var(--amber);border-radius:var(--r-card);background:#FDF1DE;color:#5C3803;font-weight:600}
.draft-banner .icon{margin-block-start:3px}
.breadcrumb{margin-block-end:16px;color:var(--muted);font-size:.9375rem}
.legal h1{font-size:clamp(1.875rem,4.4vw,2.5rem)}
.legal__meta{margin-block:8px 32px;color:var(--muted);font-size:.9375rem}
.legal h2{margin-block:36px 12px;font-size:1.375rem}
.legal p+p,.legal ul+p,.legal p+ul{margin-block-start:12px}
.legal ul{list-style:disc;padding-inline-start:24px;display:grid;gap:6px}
.legal li::marker{color:var(--primary)}
.legal-nav{margin-block-start:48px;padding-block-start:24px;border-block-start:1px solid var(--border)}
.legal-nav h2{margin:0 0 8px;font-size:1rem}
.legal-nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px}
.legal-nav a{display:inline-flex;align-items:center;min-height:40px}
.status{display:grid;place-items:center;min-height:calc(100dvh - 69px);padding-block:48px;text-align:center}
.status__inner{max-width:560px}
.status img{width:72px;height:72px;margin-block-end:24px}
.status__code{display:block;margin-block-end:8px;color:var(--primary-dark);font-family:"IBM Plex Sans",var(--font);font-weight:700;letter-spacing:.08em}
.status p{margin-block-start:12px;color:var(--muted)}
.status .btn{margin-block-start:24px}
.status hr{width:64px;margin:36px auto;border:0;border-block-start:2px solid var(--border)}

/* ---------- Scroll reveal (class added by app.js only to below-the-fold elements) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal.is-pending{opacity:0;transform:translateY(16px)}
  .reveal.is-ready{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{.site-header,.site-footer,.hero__visual,.skip-link{display:none}body{background:#fff}}