/* ============================================================
   Kyber marketing site: shared look (index, pricing, contact)
   Oct 2026 redesign. Warm paper + Kyber green in light, calm
   charcoal + Kyber mint in dark. Road-sign type (Barlow).
   Mobile first: written for a 360px phone, then widened.

   Theme: <html data-theme="light|dark">, set before first paint by
   the inline snippet in each page's <head> (saved choice, else the
   device setting). brand/site.js runs the switch. Same storage key
   as the app (kyber-theme), so the choice carries into sign-in.
   Without JavaScript the device setting still applies (media query).
   ============================================================ */
:root{
  color-scheme:light;
  --paper:#F4F1EA; --paper-2:#EBE6DB; --card:#FFFFFF; --band:#16191B;
  --ink:#16191B; --ink-2:#3D4246; --muted:#656B70;
  --line:#D8D2C4; --line-2:#E6E1D6;
  --green:#073A26; --green-2:#0E5A3C; --on-green:#FFFFFF; --green-soft:#DCEBE2; --mint:#2ED08A;
  --plate:#F7C600;
  --red:#B42318; --red-soft:#FBE4E1;
  --amber:#9A5B00; --amber-soft:#FCEFD5; --amber-line:#EBC27A; --amber-ink:#5A3A00;
  --ok:#1D6B43; --ok-soft:#E1F0E6;
  --go:#1E4E86; --go-soft:#E1ECF7;
  --pill-ink:#3D4246; --pill-bg:#EEF0F1;
  --chrome:#F1EEE7; --dots:#D3CCBD; --field:#FFFFFF; --mock-border:#CFC8B8;
  --shadow:0 18px 40px -20px rgba(22,25,27,.35);
  --bar-bg:rgba(244,241,234,.94);
  --radius:4px; --wrap:1180px; --gutter:16px;
  --head:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#111513; --paper-2:#171C19; --card:#1B211E; --band:#0A0D0B;
  --ink:#ECEAE4; --ink-2:#C3C7C2; --muted:#949B95;
  --line:#2D3531; --line-2:#242B27;
  --green:#2ED08A; --green-2:#62DBA5; --on-green:#05271A; --green-soft:#16362A;
  --red:#FF8F80; --red-soft:#3B1C18;
  --amber:#F3B856; --amber-soft:#382A12; --amber-line:#6B5020; --amber-ink:#F6D9A3;
  --ok:#74D9A3; --ok-soft:#163A27;
  --go:#96C0F0; --go-soft:#1A2B3F;
  --pill-ink:#C3C7C2; --pill-bg:#262D29;
  --chrome:#202724; --dots:#3A433E; --field:#141916; --mock-border:#323B36;
  --shadow:0 18px 40px -20px rgba(0,0,0,.7);
  --bar-bg:rgba(17,21,19,.92);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;
    --paper:#111513; --paper-2:#171C19; --card:#1B211E; --band:#0A0D0B;
    --ink:#ECEAE4; --ink-2:#C3C7C2; --muted:#949B95;
    --line:#2D3531; --line-2:#242B27;
    --green:#2ED08A; --green-2:#62DBA5; --on-green:#05271A; --green-soft:#16362A;
    --red:#FF8F80; --red-soft:#3B1C18;
    --amber:#F3B856; --amber-soft:#382A12; --amber-line:#6B5020; --amber-ink:#F6D9A3;
    --ok:#74D9A3; --ok-soft:#163A27;
    --go:#96C0F0; --go-soft:#1A2B3F;
    --pill-ink:#C3C7C2; --pill-bg:#262D29;
    --chrome:#202724; --dots:#3A433E; --field:#141916; --mock-border:#323B36;
    --shadow:0 18px 40px -20px rgba(0,0,0,.7);
    --bar-bg:rgba(17,21,19,.92);
  }
}
@media (min-width:700px){:root{--gutter:28px}}
@media (min-width:1100px){:root{--gutter:40px}}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--paper);color:var(--ink);font:400 17px/1.55 'Barlow',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.05;letter-spacing:-.005em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.kicker{font:600 13px/1.2 'Barlow',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--green-2)}
.lede{font-size:18px;color:var(--ink-2);max-width:58ch}
@media (min-width:900px){.lede{font-size:19px}}
.skip{position:absolute;left:-9999px;top:8px;z-index:99}
.skip:focus{left:8px}

/* logo: dark ink on light, white on dark */
.logo-d{display:none}
:root[data-theme="dark"] .logo-l{display:none}
:root[data-theme="dark"] .logo-d{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .logo-l{display:none}:root:not([data-theme]) .logo-d{display:block}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--radius);font:600 16px/1 'Barlow',sans-serif;text-decoration:none;border:2px solid var(--green);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-fill{background:var(--green);color:var(--on-green)}
.btn-fill:hover{background:var(--green-2);border-color:var(--green-2)}
.btn-line{background:transparent;color:var(--green)}
.btn-line:hover{background:var(--green);color:var(--on-green)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--plate);outline-offset:2px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-row .btn{flex:1 1 200px}
@media (min-width:520px){.btn-row .btn{flex:0 0 auto}}

/* number plates (UK rear = yellow, front / Irish = white) */
.plate{display:inline-block;background:var(--plate);color:#111;font:700 .78em/1 'Barlow Semi Condensed',sans-serif;letter-spacing:.06em;padding:.28em .45em .24em;border-radius:2px;border:1px solid rgba(0,0,0,.25);white-space:nowrap}
.plate.front{background:#fff}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:50;background:var(--bar-bg);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;gap:12px;height:64px}
.bar-logo img{height:26px;width:auto}
.bar-links{display:none;list-style:none;gap:24px;margin-left:24px}
.bar-links a{text-decoration:none;font-weight:500;font-size:16px;color:var(--ink-2)}
.bar-links a:hover,.bar-links a[aria-current="page"]{color:var(--green)}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.bar-signin{display:none;text-decoration:none;font-weight:500;color:var(--ink-2);padding:0 8px}
.bar .btn{min-height:40px;padding:0 14px;font-size:15px;white-space:nowrap}
.icon-btn{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--radius);display:grid;place-items:center;cursor:pointer}
.icon-btn svg{width:20px;height:20px}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:transform .2s}
.menu-btn span::before,.menu-btn span::after{content:'';position:absolute;left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.menu{display:none;border-top:1px solid var(--line);background:var(--paper);padding:8px var(--gutter) 20px;max-height:calc(100vh - 64px);overflow-y:auto}
.menu.open{display:block}
.menu a{display:block;padding:14px 0;border-bottom:1px solid var(--line-2);text-decoration:none;font-size:18px;font-weight:500}
.menu a:last-child{border-bottom:0}
@media (max-width:379px){.bar-in{gap:8px}.bar .btn{padding:0 10px;font-size:14px}.bar-logo img{height:22px}.icon-btn{width:40px;height:40px;flex-basis:40px}}
@media (min-width:1000px){.bar-links{display:flex}.bar-signin{display:inline}.menu-btn,.menu{display:none!important}}

/* ---------- sections ---------- */
section{padding:64px 0}
@media (min-width:900px){section{padding:96px 0}}
.sec-head{max-width:760px;margin-bottom:36px}
.sec-head h2{font-size:clamp(32px,7vw,54px);margin:10px 0 14px}
.rule{border-top:1px solid var(--line)}
.page-hero{padding:44px 0 8px}
.page-hero h1{font-size:clamp(40px,10vw,72px);margin:12px 0 18px;max-width:16ch}
.page-hero h1 em{font-style:normal;color:var(--green-2)}
@media (min-width:1000px){.page-hero{padding-top:72px}}
.ticks{list-style:none;margin-top:16px;display:grid;gap:9px}
.ticks li{position:relative;padding-left:28px;color:var(--ink-2)}
.ticks li::before{content:'';position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2.5px solid var(--green-2);border-bottom:2.5px solid var(--green-2);transform:rotate(-45deg)}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
@media (min-width:900px){.box{padding:36px}}

/* faq */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font:600 19px/1.3 'Barlow',sans-serif;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:12px;font:400 30px/1 'Barlow',sans-serif;color:var(--green-2)}
.faq details[open] summary::after{content:'–'}
.faq details p{padding:0 0 20px;color:var(--ink-2);max-width:68ch}

/* final call to action (always dark, over a photo) */
.final{position:relative;color:#fff;padding:0;overflow:hidden;background:#1d2326}
.final .ph{position:absolute;inset:0;border-radius:0;background:none}
.final .ph img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:grayscale(.3)}
.final .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,24,17,.92) 0%,rgba(7,24,17,.78) 55%,rgba(7,24,17,.55) 100%)}
.final-in{position:relative;padding-top:80px;padding-bottom:80px}
.final h2{font-size:clamp(34px,8vw,60px);max-width:16ch;margin-bottom:14px}
.final p{font-size:19px;max-width:52ch;color:rgba(255,255,255,.88);margin-bottom:26px}
.final .btn-fill{background:#fff;color:#073A26;border-color:#fff}
.final .btn-fill:hover{background:#DCEBE2;border-color:#DCEBE2}
.final .btn-line{color:#fff;border-color:rgba(255,255,255,.7)}
.final .btn-line:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- footer ---------- */
footer{background:var(--paper);border-top:1px solid var(--line);padding:48px 0 calc(110px + env(safe-area-inset-bottom))}
@media (min-width:1000px){footer{padding-bottom:40px}}
.f-grid{display:grid;gap:28px;grid-template-columns:1fr 1fr}
.f-brand{grid-column:1/-1}
.f-brand img{height:26px;width:auto;margin-bottom:12px}
.f-brand p{color:var(--ink-2);font-size:15px;max-width:40ch}
.f-col h5{font:600 13px/1 'Barlow',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.f-col a{display:block;text-decoration:none;padding:6px 0;font-size:15.5px;color:var(--ink-2)}
.f-col a:hover{color:var(--green)}
.f-bot{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:grid;gap:6px}
@media (min-width:800px){.f-grid{grid-template-columns:2fr 1fr 1fr 1fr}.f-brand{grid-column:auto}}

/* sticky "Book a demo" bar on phones */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--bar-bg);border-top:1px solid var(--line);display:flex;gap:10px;transform:translateY(110%);transition:transform .25s}
.mcta.show{transform:none}
.mcta .btn{flex:1;min-height:46px;white-space:nowrap;padding:0 12px}
@media (min-width:1000px){.mcta{display:none}}
@media (prefers-reduced-motion:reduce){.mcta{transition:none}}
body:not(:has(.mcta)) footer{padding-bottom:40px}