@font-face{font-family:"Jakarta";font-weight:400;font-display:swap;src:url(/static/fonts/jakarta-regular.woff2) format("woff2")}
@font-face{font-family:"Jakarta";font-weight:500;font-display:swap;src:url(/static/fonts/jakarta-medium.woff2) format("woff2")}
@font-face{font-family:"Jakarta";font-weight:600;font-display:swap;src:url(/static/fonts/jakarta-semibold.woff2) format("woff2")}
@font-face{font-family:"Jakarta";font-weight:800;font-display:swap;src:url(/static/fonts/jakarta-extrabold.woff2) format("woff2")}
/* Laadio website. Layout: one centred column (max 1080px); full-width bands carry
   the rhythm; screenshots sit in a simple phone frame beside short text. */
:root {
  --paper: #F5F6F8; --surface: #FFFFFF; --line: #E4E7EC; --ink: #111827; --dim: #5F6877;
  --accent: #167A4F; --on-accent: #FFFFFF; --mark: #1A8F5C; --busy: #C77D12;
  --band: #111827; --band-fg: #F2F4F7; --band-dim: #A3ACBA;
  --cta: #167A4F; --cta-fg: #FFFFFF; --frame: #111827;
  --sans: "Jakarta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1115; --surface: #171A21; --line: #2A2F3A; --ink: #F2F4F7; --dim: #9AA3B2;
    --accent: #34B27B; --on-accent: #111827; --mark: #34B27B; --busy: #E0A33E;
    --band: #171A21; --band-fg: #F2F4F7; --band-dim: #9AA3B2;
    --cta: #167A4F; --cta-fg: #FFFFFF; --frame: #2A2F3A; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1115; --surface: #171A21; --line: #2A2F3A; --ink: #F2F4F7; --dim: #9AA3B2;
  --accent: #34B27B; --on-accent: #111827; --mark: #34B27B; --busy: #E0A33E;
  --band: #171A21; --band-fg: #F2F4F7; --band-dim: #9AA3B2;
  --cta: #167A4F; --cta-fg: #FFFFFF; --frame: #2A2F3A; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
h2 { font-size: clamp(28px, 4.2vw, 40px); }
h3 { font-size: 18px; letter-spacing: -0.01em; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* Header */
.top { padding-block: 18px; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo, .foot-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.logo .mark { width: 22px; height: auto; color: var(--mark); }
.top-nav { display: flex; align-items: center; gap: 18px; }
.lang { color: var(--dim); text-decoration: none; font-weight: 500; font-size: 15px; }
.lang:hover { color: var(--ink); }
.nav-link { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav-link:hover, .nav-link[aria-current="page"] { text-decoration: underline; }
@media (max-width: 520px) { .top-nav .btn-small { display: none; } } /* the form is right below */

/* Buttons and form */
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 14px; background: var(--accent); color: var(--on-accent);
  font: 600 16px/1 var(--sans); padding: 0 22px; min-height: 52px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .12s ease; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 14.5px; border-radius: 12px; }
.signup { display: grid; gap: 10px; max-width: 480px; }
.signup-row { display: flex; gap: 8px; }
.signup input[type=email] { flex: 1; min-width: 0; min-height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 500 16px var(--sans); padding: 0 16px; }
.signup input::placeholder { color: var(--dim); }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup-msg { font-size: 14.5px; color: var(--dim); }
.signup-msg.ok { color: var(--accent); font-weight: 600; }
.signup-msg.bad { color: #D92D3A; font-weight: 600; }
.signup.done .signup-row { display: none; }
@media (max-width: 460px) { .signup-row { flex-direction: column; } }

/* Hero */
.hero { padding-block: 32px 56px; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.hero-text { display: grid; gap: 22px; }
h1 { font-size: clamp(38px, 6.2vw, 64px); letter-spacing: -0.035em; line-height: 1.04; }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--dim); max-width: 34em; }
.trust { font-size: 14.5px; font-weight: 600; }
.reach { font-size: 15px; color: var(--dim); max-width: 34em; border-top: 1px solid var(--line); padding-top: 18px; }
.phone { justify-self: center; width: min(100%, 290px); border-radius: 36px; padding: 9px; background: var(--frame); }
.phone img { border-radius: 28px; width: 100%; }
.phone-hero { width: min(100%, 320px); }
@media (max-width: 820px) {
  .hero-in { grid-template-columns: 1fr; gap: 36px; }
  .phone-hero { width: min(78%, 300px); }
}

/* Screens: four app screens in a row, captions under them (swipe sideways on phones) */
.gallery { padding-block: 24px 72px; }
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.shot { margin: 0; display: grid; gap: 18px; align-content: start; }
.shot .phone { width: 100%; border-radius: 30px; padding: 7px; }
.shot .phone img { border-radius: 24px; }
.shot figcaption { display: grid; gap: 6px; }
.shot p { color: var(--dim); font-size: 15.5px; }
@media (max-width: 900px) {
  .gallery .wrap { padding-right: 0; }
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding-bottom: 12px; padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .shot { flex: 0 0 min(64vw, 250px); scroll-snap-align: start; }
}

/* Extras */
.extras { padding-block: 56px; }
.extras h2 { margin-bottom: 28px; }
.extras-list, .principles-list, .sources-list { list-style: none; margin: 0; padding: 0; }
.extras-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.extras-list li { display: grid; gap: 6px; align-content: start; border-top: 2px solid var(--ink); padding-top: 14px; }
.extras-list p { color: var(--dim); font-size: 16px; }
@media (max-width: 760px) { .extras-list { grid-template-columns: 1fr; gap: 24px; } }

/* Principles: the one dark band */
.principles { background: var(--band); color: var(--band-fg); padding-block: 64px; }
.principles h2 { margin-bottom: 32px; }
.principles-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.principles-list li { display: grid; gap: 8px; align-content: start; }
.principles-list p { color: var(--band-dim); font-size: 16px; }
@media (max-width: 760px) { .principles-list { grid-template-columns: 1fr; gap: 28px; } }

/* Sources */
.sources { padding-block: 64px; }
.sources h2 { margin-bottom: 24px; }
.sources-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.sources-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--line); align-items: baseline; }
.cc { font-weight: 800; font-size: 13.5px; letter-spacing: .04em; color: var(--dim); grid-row: span 2; }
.sources-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.sources-list a:hover { text-decoration: underline; }
.src-sub { grid-column: 2; color: var(--dim); font-size: 14.5px; }
.src-note { margin-top: 18px; color: var(--dim); font-size: 14.5px; }
@media (max-width: 680px) { .sources-list { grid-template-columns: 1fr; } }

/* FAQ */
.faq { padding-block: 24px 72px; }
.faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; padding-block: 18px; font-weight: 600; font-size: 17.5px; display: flex; justify-content: space-between; gap: 16px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--dim); font-weight: 500; font-size: 22px; line-height: 1; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { color: var(--dim); padding-bottom: 18px; max-width: 38em; }
@media (max-width: 760px) { .faq-in { grid-template-columns: 1fr; gap: 12px; } }

/* Final call to action */
.cta { background: var(--cta); color: var(--cta-fg); padding-block: 64px; }
.cta-in { display: grid; gap: 22px; justify-items: start; }
.cta h2 { max-width: 16em; }
.cta .btn { background: #FFFFFF; color: #111827; }
.cta .signup input[type=email] { border-color: transparent; background: #FFFFFF; color: #111827; }
.cta .signup input::placeholder { color: #5F6877; }
.cta .signup-msg, .cta .signup-msg.ok { color: rgba(255, 255, 255, .92); }
.cta .signup-msg.bad { color: #FFFFFF; text-decoration: underline; }

/* Footer */
.foot { padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 14.5px; color: var(--dim); }
.foot-in a { color: var(--dim); }
.foot-logo { font-size: 18px; }
.foot-logo .mark { width: 16px; height: auto; color: var(--mark); }
.foot-legal { margin-left: auto; }
@media (max-width: 600px) { .foot-legal { margin-left: 0; } }

/* Privacy policy */
.doc { padding-block: 24px 72px; }
.doc-in { max-width: 720px; display: grid; gap: 28px; }
.doc h1 { font-size: clamp(34px, 5vw, 48px); }
.doc section { display: grid; gap: 8px; }
.doc h2 { font-size: 21px; letter-spacing: -0.01em; }
.doc p { color: var(--dim); }
.doc p a { color: var(--accent); }
.back { font-weight: 600; text-decoration: none; font-size: 15px; }
.updated { font-size: 14.5px; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .shots { scroll-behavior: auto; } }

/* Explore links on the home page */
.explore { padding-block: 8px 56px; }
.explore-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.explore a { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; }
.explore a:hover { border-color: var(--accent); }
.explore p { color: var(--dim); font-size: 15.5px; }
@media (max-width: 960px) { .explore-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .explore-in { grid-template-columns: 1fr; } }

/* Search pages: cities, operators, charge cards */
.seo { padding-block: 8px 72px; }
.seo-in { max-width: 860px; display: grid; gap: 18px; }
.seo h1 { font-size: clamp(32px, 5vw, 46px); }
.seo h2 { font-size: 23px; letter-spacing: -0.01em; margin-top: 18px; }
.seo .lead { max-width: none; }
.crumbs { font-size: 14px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--dim); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.data th, table.data td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-size: 13.5px; font-weight: 600; color: var(--dim); background: var(--paper); white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.data td:first-child { min-width: 11em; }
table.data td strong { white-space: nowrap; }
table.data a { color: var(--ink); font-weight: 600; }
table.facts td:first-child, table.narrow td:first-child { color: var(--dim); width: 38%; }
table.facts thead, table.narrow thead { display: none; }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.links.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; }
@media (max-width: 680px) { .links.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.links a { color: var(--ink); font-weight: 600; text-decoration: none; }
.links a:hover { text-decoration: underline; }
.dim { color: var(--dim); font-size: 14px; }
.app-box { margin-top: 18px; padding: 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; justify-items: start; }
.app-box h2 { margin-top: 0; }
.app-box p { color: var(--dim); }
.seo .updated, .doc .updated { color: var(--dim); font-size: 14px; }
.seo .faq-list summary { font-size: 16.5px; }
.top-nav .lang + .lang { margin-left: -6px; }
.foot-in { row-gap: 10px; }

/* Charger pages (rendered by the backend inside _shell) and the map's detail panel */
.charger-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.charger-status strong { display: inline-flex; align-items: center; gap: 8px; }
.charger-status strong::before { content: ""; flex: none; box-sizing: border-box; width: 11px; height: 11px; border-radius: 50%; }
.charger-status.st-free strong { color: var(--accent); }
.charger-status.st-free strong::before { background: currentColor; }
.charger-status.st-busy strong { color: var(--busy); }
.charger-status.st-busy strong::before { border: 2.5px solid currentColor; }
.charger-status.st-unknown strong { color: var(--dim); }
.charger-status.st-unknown strong::before { height: 3px; border-radius: 2px; background: currentColor; }
.btn-quiet { background: var(--surface); color: var(--ink); border: 1px solid var(--line); gap: 8px; }
.btn-quiet:hover { border-color: var(--accent); }
.btn-quiet svg { color: var(--accent); flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Charge points (map panel and charger pages): one row each, status by shape and colour */
.points { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.pt { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 14.5px; }
.pt:first-child { border-top: 0; }
.pt .glyph { width: 12px; height: 12px; margin-top: 4px; }
.pt-main, .pt-kind { display: grid; gap: 1px; min-width: 0; }
.pt-kind { text-align: right; white-space: nowrap; }
.pt-status { font-weight: 600; }
.pt-free .pt-status { color: var(--accent); }
.pt-busy .pt-status { color: var(--busy); }
.pt-broken .pt-status { color: #D92D3A; }
.pt-unknown .pt-status { color: var(--dim); font-weight: 500; }
.pt-ref { color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.points .glyph { display: inline-block; flex: none; }
.points .glyph-free { color: var(--mark); } .points .glyph-busy { color: var(--busy); } .points .glyph-broken { color: #D92D3A; } .points .glyph-unknown { color: var(--dim); }