/* GratisParkering landing page, 2026-11 redesign (docs/specs/2026-11-01-website-redesign.md).
   Used by both landing pages (it replaced landing.css and the 3D layer, deleted 2026-11-03). No
   scroll-snap: normal sections, the real app in a phone frame, curb lines as the one decorative graphic.
   Tokens are the app's (src/constants/theme.ts), kept in sync by hand as before, except --subtle: #626963 here, not the
   app's #6A716C, which is 4.45:1 on paper (WCAG AA needs 4.5:1 for the 14 px small print). */

@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/schibsted-grotesk-latin.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:"Schibsted Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#F6F1E8;--white:#FFFFFF;--ink:#16201B;--muted:#4F5852;--subtle:#626963;--line:#E3DACB;
  --green:#0F3D2E;--green-deep:#0A2D21;--green-bright:#2A7A57;--green-tint:#E9F2D4;--green-dot:#4E9A1B;
  --forest:#0F3D2E;--forest-raised:#19503D;--forest-text:#C3D8CC;--forest-muted:#A6C5B5;--mint:#C8F169;--lime:#C8F169;
  --gold:#C8F169;--gold-light:#D6F58B;--gold-deep:#B4DB52;--gold-ink:#3F5F10;--on-gold:#0F3D2E;
  --amber:#D98A0B;--red:#C8352B;
  --wrap:1152px;--pad:clamp(16px,5vw,64px);--section:clamp(72px,10vw,120px);
  --shadow-card:0 1px 2px rgba(22,32,27,.04),0 10px 24px rgba(22,32,27,.05);
  --font:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:800;overflow-wrap:break-word}
h1{font-size:clamp(40px,6vw,76px);letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em;line-height:1.08}
h3{font-size:20px;letter-spacing:-.01em;line-height:1.25}
p{margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;z-index:20}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.end-card :focus-visible{outline-color:var(--mint)}
.free{color:var(--forest);background:linear-gradient(transparent 56%,var(--lime) 56%,var(--lime) 92%,transparent 92%);padding:0 .06em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.red{color:var(--red)}
.wrap{width:min(var(--wrap),100%);margin:0 auto}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:5;padding:0 var(--pad);padding-top:env(safe-area-inset-top);background:rgba(246,241,232,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(227,218,203,.8)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand img{width:34px;height:34px;border-radius:10px;flex:none}
.wordmark{font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.wordmark .g{color:var(--green)}
.menu-wide{display:flex;gap:28px}
.menu-wide a{text-decoration:none;font-weight:600;font-size:15px;color:var(--muted)}
.menu-wide a:hover{color:var(--ink)}
.top-right{display:flex;align-items:center;gap:10px;flex:none}
.lang{display:inline-grid;place-items:center;min-width:44px;height:44px;border-radius:999px;text-decoration:none;font-weight:700;font-size:14px;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line)}
.lang:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* phone menu: a <details> so it works without JS */
.menu-narrow{position:relative;display:none}
.menu-narrow summary{list-style:none;display:grid;place-content:center;gap:4px;width:44px;height:44px;border-radius:999px;cursor:pointer;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line)}
.menu-narrow summary::-webkit-details-marker{display:none}
.menu-narrow summary span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.menu-narrow[open] summary span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-narrow[open] summary span:nth-child(2){opacity:0}
.menu-narrow[open] summary span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-narrow nav{position:absolute;right:0;top:calc(100% + 10px);width:min(280px,calc(100vw - 32px));display:flex;flex-direction:column;padding:8px;border-radius:20px;background:var(--white);box-shadow:0 1px 0 var(--line),0 24px 48px -20px rgba(22,32,27,.45)}
.menu-narrow nav a{display:block;padding:13px 14px;border-radius:12px;text-decoration:none;font-weight:600;font-size:17px}
.menu-narrow nav a:hover{background:var(--green-tint);color:var(--green-deep)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:700 16px/1.1 var(--font);text-decoration:none;border:0;cursor:pointer;text-align:center}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px}
.btn-primary{background:linear-gradient(180deg,#184F3C,var(--green));color:#fff;box-shadow:0 10px 24px -12px var(--green-deep)}
.btn-primary:hover{background:var(--green-deep)}
.btn-ghost{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));color:var(--on-gold);box-shadow:0 12px 28px -14px rgba(120,160,30,.8)}
.btn-gold:hover{filter:brightness(1.05)}

/* ---------- shared text ---------- */
.stack{display:flex;flex-direction:column;gap:20px}
.eyebrow{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--green-tint);color:var(--green-deep);font-weight:700;font-size:14px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-dot)}
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.6;color:var(--muted);max-width:34em}
.kicker{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.small{font-size:14px;color:var(--subtle)}
.small a{color:inherit}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,7vw,96px) var(--pad) var(--section)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,88px);align-items:center}
.hero .stack{gap:24px}
.hero h1{max-width:12.5em}
.proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin:4px 0 0;padding:0;list-style:none;font-size:15px;font-weight:600;color:var(--muted)}
.proof li{display:flex;align-items:center;gap:8px}
.proof li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.2 2.6 2.6L14 7.4' fill='none' stroke='%230F3D2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}

/* The visual: a light map panel with curb lines, the app in a phone frame, two chips from the app. */
.hero-visual{position:relative;margin:0;padding:clamp(28px,4vw,44px) 0}
.panel{position:absolute;inset:clamp(28px,4vw,44px) 0;border-radius:32px;background:var(--green-tint);overflow:hidden}
.panel svg{position:absolute;inset:0;width:100%;height:100%}
/* Kept quiet on purpose (owner 2026-11-03): the phone and the chips lead, the map is only texture. */
.panel .road{stroke:#F3F8F4;stroke-width:30;stroke-linecap:round;fill:none}
.panel .curb{stroke-width:4;stroke-linecap:round;fill:none;stroke-dasharray:1;stroke-dashoffset:0}
.panel .curb.free{stroke:var(--green-dot);opacity:.35}
.panel .curb.paid{stroke:#9DB3A6;opacity:.6}
@media (prefers-reduced-motion:no-preference){
  .panel .curb{stroke-dashoffset:1;animation:draw .9s cubic-bezier(.3,.7,.4,1) forwards}
  .panel .curb:nth-of-type(2n){animation-delay:.15s}
  .panel .curb:nth-of-type(3n){animation-delay:.3s}
  .chip{animation:rise .6s cubic-bezier(.3,.7,.4,1) .7s both}
  .chip-walk{animation-delay:.9s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.phone{position:relative;z-index:1;width:min(58%,300px);margin:0 auto;padding:8px;border-radius:44px;background:#0E1512;box-shadow:0 40px 70px -34px rgba(4,20,14,.45),inset 0 0 0 1.5px #2B3A33}
.phone img{width:100%;height:auto;border-radius:36px;background:#EFE6D6}
.chip{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:18px;background:var(--white);box-shadow:0 2px 4px rgba(4,20,14,.12),0 22px 44px -16px rgba(4,20,14,.7);font-size:14px;line-height:1.3;color:var(--muted)}
.chip b{display:block;color:var(--ink);font-size:16px}
.chip-spot{left:0;top:22%}
.chip-walk{right:0;bottom:16%}
.chip .pin{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,var(--green-bright),var(--green));color:#fff;font-weight:800;font-size:20px}
.chip .walk{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--green-tint);color:var(--green-deep)}

/* ---------- sections (interim: sections 2-10 are rebuilt one by one, see the spec) ---------- */
.section{padding:var(--section) var(--pad);border-top:1px solid var(--line)}
.section.dark{background:var(--forest);color:var(--paper);border-top:0}
.section.dark .lead{color:var(--forest-text)}
.section.dark .kicker{color:var(--mint)}
.section.dark .small{color:var(--forest-muted)}
.dark .free,.end-card .free{color:var(--mint);background:none;padding:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.narrow{max-width:760px}

/* calculator */
.calc{display:grid;gap:14px;padding:28px;border-radius:24px;background:#fff;box-shadow:var(--shadow-card)}
.calc .row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px}
.calc label{font-weight:600;font-size:16px}
.calc output.v{font-weight:800;font-variant-numeric:tabular-nums;min-width:4.5ch;text-align:right}
.calc input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--green);height:32px;margin:0}
.total{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--line)}
.total strong{font-size:clamp(44px,5vw,60px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.compare{font-weight:700;color:var(--green-deep)}

/* rules */
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.rules li{background:#fff;border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-card)}
.rules b{display:block;font-size:17px}
.rules span{font-size:15px;color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;font-size:14px;font-weight:600}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{width:14px;height:14px;border-radius:5px;display:inline-block}

/* feature sections: text beside a phone on a tinted panel; .flip puts the visual first on wide screens */
.feature{align-items:center}
.feature.flip>:first-child{order:2}
.shot{display:grid;place-items:center;padding:clamp(32px,5vw,56px) 0;border-radius:32px;background:var(--green-tint)}
.shot .phone{width:min(62%,280px);box-shadow:0 30px 60px -30px rgba(4,20,14,.45),inset 0 0 0 1.5px #2B3A33}
.tag{display:inline-flex;align-items:center;vertical-align:middle;margin-left:6px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:0}
.tag-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));color:var(--on-gold)}

/* how it works (.how): three phones in a row; a sideways scroller on phones */
.how{margin:12px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.how li{display:flex;flex-direction:column;gap:10px}
.how .phone{width:min(100%,260px);margin:0 0 14px;box-shadow:0 24px 48px -28px rgba(4,20,14,.45),inset 0 0 0 1.5px #2B3A33}
.how h3{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.how .n{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--forest);color:var(--mint);font-size:15px;font-weight:800}
.how .tag{margin-left:0}
.how p{color:var(--muted);font-size:16px}

/* street parking: the app's own curb key */
.curb-key{display:grid;gap:12px;margin:4px 0 0;padding:0;list-style:none}
.curb-key li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.curb-key i{margin-top:9px;height:6px;border-radius:3px}
.curb-key b{display:block;font-size:17px}
.curb-key span{font-size:15px;color:var(--muted)}
.k-free{background:var(--green-dot)}
.k-later{background:var(--amber)}
.k-unsure{background:#8E968F}

/* share: three short steps on the forest band */
.share-steps{display:grid;gap:14px;margin:8px 0 0;padding:0;list-style:none;counter-reset:s}
.share-steps li{display:grid;grid-template-columns:36px 1fr;gap:2px 14px;counter-increment:s}
.share-steps li::before{content:counter(s);grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--forest-raised);color:var(--mint);font-weight:800;box-shadow:inset 0 0 0 1.5px rgba(200,241,105,.45)}
.share-steps b{font-size:17px}
.share-steps span{font-size:15px;color:var(--forest-text)}
/* the reward screen, cropped at the panel's lower edge, with a gold chip */
.share-visual{position:relative;display:flex;justify-content:center;height:clamp(440px,44vw,540px);padding-top:clamp(36px,4vw,52px);border-radius:32px;overflow:hidden;background:radial-gradient(70% 55% at 50% 35%,rgba(200,241,105,.14),transparent 70%),var(--forest-raised);box-shadow:inset 0 0 0 1px rgba(156,197,179,.18)}
.share-visual .phone{width:min(64%,300px);align-self:flex-start;box-shadow:0 30px 60px -24px rgba(0,0,0,.6),inset 0 0 0 1.5px #2B3A33}
.chip-gold{left:4%;right:auto;top:4%;bottom:auto;background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));color:var(--on-gold)}
.chip-gold b{color:var(--on-gold)}
.chip-gold .star{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(15,61,46,.14);font-size:20px}

/* pricing */
.perks{display:grid;gap:8px;margin:0;padding:0;list-style:none;font-weight:600}
.perks li{display:flex;align-items:center;gap:10px}
.perks li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.2 2.6 2.6L14 7.4' fill='none' stroke='%230F3D2E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.plan{background:#fff;border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-card)}
.plan.best{background:var(--forest);color:var(--paper);box-shadow:0 24px 48px -28px rgba(15,61,46,.9)}
.plan.best .small{color:var(--forest-text)}
.plan .price{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.plan .price small{font-size:16px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan.best .price small{color:var(--forest-muted)}
.plan .tag{align-self:flex-start;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));color:var(--on-gold)}
.plan .tag-plain{background:var(--green-tint);color:var(--green-deep)}

/* faq */
.faq h2{margin:12px 0 8px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:26px;line-height:.8;color:var(--green)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--muted)}
.faq a{color:var(--green-deep)}

/* closing card */
.end-card{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding:clamp(40px,6vw,72px) clamp(20px,5vw,64px);border-radius:32px;background:var(--forest);color:var(--paper)}
.end-card .lead{color:var(--forest-text);margin:0 auto}
.end-card .actions{justify-content:center}
.end-icon{width:80px;height:80px;border-radius:20px;box-shadow:0 0 0 2px rgba(200,241,105,.55),0 0 0 7px rgba(200,241,105,.12),0 18px 40px -18px rgba(0,0,0,.7)}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.store{display:inline-flex;flex-direction:column;align-items:flex-start;min-width:170px;padding:10px 20px;border-radius:14px;background:var(--forest-raised);color:var(--paper);font-weight:800;font-size:19px;line-height:1.15;box-shadow:inset 0 0 0 1px rgba(156,197,179,.35);cursor:default}
.store small{font-size:12px;font-weight:600;color:var(--forest-muted)}

/* ---------- topic pages (/gratis-parkering-oslo, /bedrift, 2026-11-03): same sections, a few extra parts ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;font-weight:600;color:var(--subtle)}
.crumbs a{color:var(--green-deep)}
/* cards: short facts in a grid of white cards; .cards-dark on the forest band */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin:8px 0 0;padding:0;list-style:none}
.cards li{display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:18px;padding:20px 22px;box-shadow:var(--shadow-card)}
.cards b{font-size:18px;line-height:1.3}
.cards span{font-size:16px;line-height:1.55;color:var(--muted)}
.cards-stack{grid-template-columns:minmax(0,1fr)}
.cards-5{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.cards-tight{grid-template-columns:minmax(0,1fr)}
.cards-tight li{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 20px}
.cards-dark li{background:var(--forest-raised);box-shadow:inset 0 0 0 1px rgba(156,197,179,.22)}
.cards-dark span{color:var(--forest-text)}
.cards-dark b{color:var(--paper)}
/* the price table */
.table-card{border-radius:24px;background:#fff;box-shadow:var(--shadow-card);overflow:hidden}
.prices{width:100%;border-collapse:collapse;font-size:16px}
.prices th,.prices td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.prices thead th{border-top:0;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);background:#FBF8F2}
.prices tbody th{font-weight:700}
.prices tbody th small{display:block;font-size:14px;font-weight:500;color:var(--subtle)}
.prices td{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.prices td+td{color:var(--green-deep)}
/* the sign illustration: a blue P sign with a white plate under it */
.sign-shot{margin:0;gap:18px;padding:clamp(32px,5vw,56px) 24px;text-align:center}
.sign{display:flex;flex-direction:column;align-items:center;gap:6px}
.sign-p{display:grid;place-items:center;width:132px;height:132px;border-radius:14px;background:#1F5FAD;color:#fff;font-size:96px;font-weight:800;line-height:1;box-shadow:inset 0 0 0 5px #fff,0 0 0 2px #1F5FAD,0 18px 36px -20px rgba(4,20,14,.6)}
.sign-sub{display:block;min-width:132px;padding:10px 14px;border-radius:8px;background:#fff;color:#111;font-size:26px;font-weight:800;line-height:1.2;box-shadow:inset 0 0 0 3px #111,0 18px 36px -20px rgba(4,20,14,.6)}
.sign-sub small{display:block;font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sign-sub em{font-style:normal;color:#C4161C}
.sign-shot figcaption{max-width:26em}
/* link lists: sources and the rest of the site */
.links-split{align-items:start;gap:clamp(24px,4vw,48px);margin-top:8px}
.links-split h3{font-size:17px;color:var(--muted)}
.links{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.links a{display:flex;flex-direction:column;padding:14px 18px;border-radius:16px;background:#fff;box-shadow:var(--shadow-card);text-decoration:none;font-weight:700;font-size:17px;line-height:1.35}
.links a:hover{box-shadow:inset 0 0 0 1.5px var(--green),var(--shadow-card);color:var(--green-deep)}
.links small{font-size:14px;font-weight:500;color:var(--subtle)}
/* business page: gold panels, the flag chip, light steps, who-it-suits tags */
.panel-gold{background:radial-gradient(60% 50% at 50% 40%,rgba(200,241,105,.5),transparent 75%),#EEF4DC}
.shot-gold{background:#EEF4DC}
.chip-flag{left:0;top:22%}
.hero h1.long{font-size:clamp(34px,4.8vw,60px)}
.share-steps-light li::before{background:var(--forest);color:var(--mint);box-shadow:none}
.share-steps-light span{color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0;padding:0;list-style:none}
.tags li{padding:10px 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-weight:700;font-size:16px}
.end-mail a{color:var(--forest-text)}

footer{padding:40px var(--pad) max(40px,env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:12px 24px}
footer a{text-decoration:none;color:var(--ink)}
footer a:hover{text-decoration:underline;color:var(--green-deep)}

/* ---------- tablet and phone ---------- */
@media (max-width:999px){
  .menu-wide{display:none}
  .menu-narrow{display:block}
}
@media (max-width:859px){
  .hero .wrap,.split{grid-template-columns:minmax(0,1fr)}
  .feature.flip>:first-child{order:0}
  .how{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(72%,260px);overflow-x:auto;scroll-snap-type:x mandatory;margin:4px calc(-1 * var(--pad)) 0;padding:0 var(--pad) 12px;scroll-padding:0 var(--pad)}
  .how li{scroll-snap-align:start}
  .hero-visual{width:min(440px,100%);margin:0 auto}
  .chip{font-size:13px;padding:10px 14px 10px 10px}
  .chip b{font-size:15px}
  .chip .pin,.chip .walk,.chip-gold .star{width:34px;height:34px;border-radius:10px}
}
@media (max-width:560px){
  body{font-size:17px}
  .rules,.plans{grid-template-columns:minmax(0,1fr)}
  .actions .btn{width:100%}
  .wordmark{font-size:18px}
  .brand img{width:32px;height:32px}
  .top-right .btn-sm{padding:0 14px}
  .calc{padding:20px}
  .plan .price{font-size:36px}
  .prices th,.prices td{padding:12px 12px}
  .prices{font-size:15px}
  .phone{width:62%;border-radius:36px;padding:6px}
  .phone img{border-radius:30px}
  footer .wrap{flex-direction:column}
}
@media (max-width:380px){
  .lang{display:none}
  .wordmark{font-size:17px}
}