/* Oslo Car Club – én side for påmelding */
:root {
  --bg: #eeeff0;
  --tile: #fff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #8e8e93;
  --line: rgba(0, 0, 0, 0.1);
  --blue: #1f4bff;
  --cta: #ff3d00; /* oransje på alle påmeldingsknapper */
  --cta-hover: #e03500;
  --blue-hot: #2f6bff;
  --blue-glow: #5b8cff;
  --display: "DM Sans", system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(20px, 4vw, 48px);
  --r: 28px;
  --gap: clamp(96px, 12vw, 160px); /* samme avstand mellom alle seksjonene */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 18px/1.55 var(--body); letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--blue); color: #fff; }
h1, h2, h3 { font-family: var(--display); margin: 0; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
p { margin: 0 0 1em; }
.wrap { width: min(1120px, 100% - 2 * var(--pad)); margin-inline: auto; }
.center { text-align: center; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.h2 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); margin-bottom: clamp(40px, 6vw, 80px); }
.badge { display: inline-block; font: 700 1.25rem/1 var(--display); letter-spacing: -0.05em; }

/* Knapper */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; border-radius: 999px; border: 0; background: var(--text); color: var(--bg); font: 700 1rem var(--body); letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; transition: transform 0.35s var(--ease), background 0.3s, box-shadow 0.3s; }
.btn:hover { transform: scale(1.03); }
.btn:active { transform: scale(0.98); }
.btn-cta { background: var(--cta); color: #fff; }
.btn-cta:hover { background: var(--cta-hover); }
.btn-line { background: none; color: var(--text); border: 1px solid var(--line); }
.btn-full { width: 100%; }
.btn-big { padding: 19px 40px; font-size: 1.1rem; }
.btn[disabled] { opacity: 0.7; cursor: wait; transform: none; }

/* Første skjerm */
.top { position: relative; overflow: hidden; }
/* Tekst og biler bygger på samme mål (--mw), så bilene alltid er like store i forhold til «OSLO CAR CLUB».
   Bilgruppen er 1440/1120 × --mw (1440 px på full skjerm). Blir vinduet for smalt til at bilene får plass,
   krymper tekst og biler sammen. Høyden på vinduet påvirker ikke størrelsen. */
.top { --mw: min(1120px, 100vw - 2 * var(--pad), (100vw - 16px) / 1.224); }
.hx { position: relative; width: min(1120px, 100% - 2 * var(--pad)); margin: 0 auto; padding: 24px 0 0; }

.bar { display: flex; justify-content: center; align-items: center; animation: fadein 0.8s var(--ease) both; }
.logo { font: 700 1.45rem/1 var(--display); letter-spacing: -0.06em; color: var(--text); }
.bar-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 500 0.95rem var(--body); color: var(--text); transition: border-color 0.2s, transform 0.3s var(--ease); }
.bar-btn:hover { border-color: var(--text); transform: scale(1.03); }
.opens { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 7px 14px 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; color: var(--text); }
.opens-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(31, 75, 255, 0.15); }
.hero-btn { display: flex; width: fit-content; margin: 24px auto 0; }
@keyframes fadein { from { opacity: 0; } }
/* Navnet går over hele bredden, og bilen står foran og dekker nederste del */
.mark { position: relative; z-index: 1; top: 0.36em; /* litt ned, så bilen står foran bokstavene */ margin: clamp(48px, 9vh, 110px) 0 0; text-align: center; white-space: nowrap; color: var(--blue);
  font: 700 calc(var(--mw) / 7.2)/0.8 var(--display); letter-spacing: -0.06em; text-transform: uppercase; }
.hero-txt { margin-top: clamp(20px, 3vh, 36px); text-align: center; animation: fadein 0.8s var(--ease) 1.1s both; }
.hero-l1 { margin: 0 0 8px; font: 700 clamp(1.4rem, 2.6vw, 2rem)/1.15 var(--display); letter-spacing: -0.03em; }
.hero-l2 { margin: 0; color: var(--muted); font-size: 1.05rem; }
.mark-l { display: inline-block; animation: rise 1s var(--ease) both; }
.mark-l + .mark-l { animation-delay: 0.08s; }
@keyframes rise { from { opacity: 0; transform: translateY(30%); } }
.hx-stage { position: relative; z-index: 2; left: 50%; transform: translateX(-50%); width: calc(var(--mw) * 1440 / 1120); aspect-ratio: 3946 / 1060; margin: clamp(0px, 1vh, 16px) 0 0; } /* 1,41 × tekstbredden */
/* To biler kjører inn fra hver sin side og stopper nese mot nese.
   --p (0–1) settes fra scroll: bilene glir fra hverandre og teksten løfter seg. */
.hx-car { position: absolute; height: auto; will-change: transform; }
.hx-tt { left: 0; top: 0; width: 47.82%; animation: in-left 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; translate: calc(var(--p, 0) * -22%) calc(var(--p, 0) * -6%); scale: calc(1 - var(--p, 0) * 0.06); }
.hx-po { left: 35.76%; top: 5.66%; width: 64.24%; animation: in-right 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; translate: calc(var(--p, 0) * 16%) calc(var(--p, 0) * 4%); scale: calc(1 + var(--p, 0) * 0.06); }
@keyframes in-left { from { transform: translateX(-55%); opacity: 0; filter: blur(8px); } 60% { filter: blur(0); } }
@keyframes in-right { from { transform: translateX(55%); opacity: 0; filter: blur(8px); } 60% { filter: blur(0); } }
.mark { translate: 0 calc(var(--p, 0) * -60px); scale: calc(1 + var(--p, 0) * 0.08); }

/* Påmelding: to like kort. Søknaden er mørk og kommer først. */
.join { padding: var(--gap) 0 0; }
#meld { padding-top: min(var(--gap), 96px); } /* kortet har mye luft inni, så mindre luke over */
.join-2 { padding: 0 0 var(--gap); } /* lik avstand over og under, som de andre seksjonene */
.join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card { display: flex; flex-direction: column; padding: clamp(36px, 5vw, 64px); border-radius: var(--r); background: var(--tile); }
.kick { margin: 0 0 6px; font: 500 1rem var(--body); color: var(--muted); }
.card-h { font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: -0.05em; margin-bottom: clamp(22px, 2.6vw, 30px); }
.card-s { margin: 0 0 clamp(32px, 4vw, 48px); max-width: 400px; color: var(--muted); font-size: 1.05rem; }
/* Ventelisten: bredt kort, alt sentrert */
.card-one { max-width: 1100px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 96px); text-align: center; }
.wl-h { max-width: 820px; text-wrap: balance; font: 700 clamp(2rem, 4.2vw, 3.4rem)/1.05 var(--display); letter-spacing: -0.045em; margin: 0 auto 14px; }
.wl-s { margin: 0 auto 40px; max-width: 560px; color: var(--muted); font-weight: 400; font-size: 20px; }
.wl-row { display: flex; gap: 10px; max-width: 620px; margin: 0 auto; }
.card .wl-row input { flex: 1; min-width: 0; height: 60px; padding: 0 24px; border: 2px solid var(--text); border-radius: 999px; background: #fff; font-size: 17px; outline: none; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.45); }
.card .wl-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31, 75, 255, 0.15); }
.card .wl-row input.bad { border-color: #ff5a4e; animation: shake 0.35s; }
.wl-row .btn { height: 60px; padding: 0 32px; font-size: 1.05rem; }
.wl-form .jmsg { margin: 12px 0 0; }
.consent { position: relative; display: flex; gap: 12px; align-items: flex-start; max-width: 620px; margin: 18px auto 0; text-align: left; font-size: 0.92rem; line-height: 1.45; color: var(--muted); cursor: pointer; }
.consent input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.consent .box { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--text); border-radius: 7px; background: #fff; transition: background 0.2s, border-color 0.2s; }
.consent input:checked + .box { border-color: var(--blue); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.consent input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(31, 75, 255, 0.2); }
.consent.bad .box { border-color: #ff5a4e; animation: shake 0.35s; }
.consent a { color: var(--text); text-decoration: underline; }
/* Felle for roboter: usynlig for mennesker */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.unsub { margin: 0 0 clamp(40px, 6vw, 64px); }
.unsub .wl-row { justify-content: flex-start; margin: 0; }
.unsub .jmsg { margin: 12px 0 0; }
.first30 { margin: 18px 0 0; font-size: 0.95rem; font-weight: 500; color: var(--text); }
.vat { font: 500 1rem var(--body); letter-spacing: 0; color: var(--muted); }
/* Trekkes opp under prisen, så streken står på samme høyde som i kortet ved siden av */
.bind { margin: calc(10px - clamp(32px, 4vw, 48px)) 0 max(12px, clamp(32px, 4vw, 48px) - 35px); line-height: 25px; }
/* Samme stil som «Kommer»-merkene på fellesskapskortene */
.opens-pill { display: table; margin: 0 auto 18px; padding: 6px 12px; border-radius: 999px; background: var(--bg); color: var(--text); font-size: 0.85rem; font-weight: 500; line-height: 1; }
.wl-done { animation: fade 0.4s var(--ease) both; }
.wl-done .sent-ic { margin: 0 auto 22px; width: 64px; height: 64px; background-size: 30px; }
.wl-done .wl-h { margin-bottom: clamp(24px, 3vw, 36px); }
.wl-done .btn { height: 60px; padding: 0 36px; font-size: 1.05rem; }
.card-one .tiles { text-align: left; }
.count { margin: 16px 0 0; font-size: 0.95rem; color: var(--muted); text-align: center; }
.card-one .jmsg { margin-left: 0; }
.card-one .sent-ic { margin-inline: auto; }
.tiles { list-style: none; margin: 0 0 clamp(28px, 3.4vw, 40px); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tiles li { padding: 18px 20px; border-radius: 18px; background: #f4f4f6; }
.tiles b { display: block; margin-bottom: 6px; font: 700 clamp(1.35rem, 2vw, 1.7rem)/1 var(--display); letter-spacing: -0.04em; white-space: nowrap; }
.card-seat .tiles li:first-child b { color: var(--blue); }
.tiles span { display: block; color: var(--muted); font-size: 0.95rem; line-height: 1.4; }
/* Begge kortene: små ruter, tydelige felt */
.tiles { gap: 8px; }
.tiles li { padding: 12px 14px; border-radius: 14px; }
.tiles b { margin-bottom: 3px; font-size: 1.1rem; }
.tiles span { font-size: 0.88rem; }
.card .jform input { height: 64px; background: #fff; border: 2px solid var(--text); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.45); }
.card .jform input::placeholder { color: var(--muted); }
.card .jform input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31, 75, 255, 0.15); }
.card .jform .btn { height: 60px; }
.jform { margin-top: auto; }
.jform, .sf-1, .sf-2 { display: grid; gap: 12px; }
.jform input { width: 100%; height: 58px; padding: 0 24px; border: 2px solid transparent; border-radius: 999px; background: #f2f2f4; color: var(--text); font-size: 17px; /* over 16px, så iPhone ikke zoomer */ outline: none; transition: border-color 0.2s; }
.jform input::placeholder { color: var(--faint); }
.jform input:focus { border-color: var(--blue); }
.jform input.bad { border-color: #ff5a4e; animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.jform .btn { height: 58px; font-size: 1.05rem; }
.btn-dark { background: var(--text); color: #fff; }
.sf-2 { animation: fade 0.4s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
.jmsg { margin: 2px 0 0 24px; font-size: 1rem; }
.jmsg:empty { display: none; }
.jmsg.err { color: #e0362b; }

.sent-box { margin-top: auto; animation: fade 0.4s var(--ease) both; }
.sent-ic { display: block; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 24px no-repeat; }
.sent-h { margin: 0 0 4px; font: 700 1.6rem/1.15 var(--display); letter-spacing: -0.03em; }
.sent-s { margin: 0 0 18px; color: var(--muted); }
.sent-s:empty { display: none; }
.free { margin: 28px 0 0; text-align: center; color: var(--muted); font-size: 1rem; }

/* Bilene */
.cars { padding: var(--gap) 0 0; }
.cars-h { margin-bottom: 12px; }
.cars-s { margin: 0 0 clamp(32px, 4vw, 48px); text-align: center; color: var(--muted); font-size: 1.05rem; }
.car-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.car { border-radius: var(--r); background: var(--tile); overflow: hidden; }
.car-img { aspect-ratio: 16 / 10; overflow: hidden; background: #e6e6e8; }
.car-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 0.8s var(--ease); }
.car:hover .car-img img { transform: scale(1.2); }
.car-body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 34px 32px; }
.car-name { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.04em; }
.car-spec { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.car-spec li { padding: 6px 14px; border-radius: 999px; background: #f2f2f4; font-size: 0.95rem; color: var(--muted); }

/* Medlemskap */
.member { padding: var(--gap) 0; }
.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.big { margin: 0 0 clamp(32px, 4vw, 48px); font: 700 clamp(3.4rem, 6.4vw, 5.4rem)/0.95 var(--display); letter-spacing: -0.055em; }
.ok { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ok li { position: relative; padding-left: 36px; font-size: 1.05rem; }
.ok li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.price-btn { margin-top: auto; align-self: stretch; }
.price-card .ok { margin-bottom: 40px; }
.svc-card .ok { margin-bottom: 40px; } /* bygget likt som priskortet: strek, liste, og stegene nederst */
.svc-card .svc-h { margin-bottom: clamp(32px, 4vw, 48px); } /* som prisen */
/* På PC: like høy luft som «I måneden» over prisen, så strekene står på linje */
@media (min-width: 901px) { .svc-top::before { content: "I måneden"; display: block; visibility: hidden; margin: 0 0 6px; font: 500 1rem var(--body); } }
.ok-lg { gap: 20px; } /* samme i begge kortene */
.ok-lg li { font-size: 18px; line-height: 1.4; }
.steps { list-style: none; margin: auto 0 0; padding: 32px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps li { display: flex; flex-direction: column; }
.st-n { font: 700 48px/1 var(--display); color: var(--blue); letter-spacing: -0.04em; margin-bottom: 12px; }
.steps b { font: 700 20px/1.25 var(--display); }
.st-s { margin-top: 4px; color: var(--muted); font-size: 16px; line-height: 1.4; }
.svc-h { margin: 0 0 32px; font: 700 clamp(3.4rem, 6.4vw, 5.4rem)/0.95 var(--display); letter-spacing: -0.055em; } /* samme som prisen */
.m-line { margin: 0 0 32px; border: 0; border-top: 1px solid var(--line); }
.points { padding: 0 0 var(--gap); }
.points .try { margin-top: 0; }
.faq { padding: 0 0 var(--gap); }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; font: 700 1.2rem/1.3 var(--display); letter-spacing: -0.02em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.6rem; font-weight: 400; line-height: 1; color: var(--blue); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -8px 0 24px; max-width: 620px; color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.m-cta { margin-top: var(--gap); }

/* Prøv poengene: kalender for april 2027 */
.try { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 6vw, 88px); align-items: center; margin-top: var(--gap); }
.try-copy { max-width: 440px; }
.try-h { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.045em; margin-bottom: 16px; }
.try-s { color: var(--muted); font-size: 1.1rem; line-height: 1.5; margin: 0 0 28px; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.legend li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 1rem; }
.ldot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #c7c7cc; }
.ldot.we { background: var(--blue); }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.cal-h { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.04em; }
.gauge { position: relative; width: 84px; height: 84px; flex: none; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 8; }
.g-track { stroke: #f0f0f2; }
.g-fill { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 0.5s var(--ease); }
.gauge-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gauge-num span { font: 700 1.7rem/0.9 var(--display); }
.gauge-num small { margin-top: 2px; font-size: 0.7rem; line-height: 1.1; color: var(--muted); }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { margin-bottom: 8px; text-align: center; color: var(--faint); font-size: 0.8rem; font-weight: 500; }
.day { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 7px 8px; border: 0; border-radius: 12px; background: #f2f2f4; text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.2s var(--ease); }
.day { position: relative; }
.day b { font: 600 0.95rem/1 var(--display); }
.day.we::after { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); } /* helgedag */
.day:hover:not(:disabled) { transform: scale(1.05); }
.day.on { background: var(--blue); color: #fff; }
.day.on::after { background: #fff; }
.day:disabled { opacity: 0.3; cursor: not-allowed; }
.day.blank { visibility: hidden; }
.cal-wrap { position: relative; }
.ghost { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; transition: transform 0.9s var(--ease), opacity 0.4s; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)); }
.ghost.show { opacity: 1; }
.ghost.tap svg { transform: scale(0.82); }
.ghost svg { display: block; transition: transform 0.15s; }
.cal-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; }
.cal-foot p { margin: 0; color: var(--muted); font-size: 1rem; }
.cal-reset { flex: none; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: none; font-size: 0.95rem; cursor: pointer; }

/* Mer enn biler */
.more-than { padding: var(--gap) 0 0; }
.mt-h { margin-bottom: 12px; }
.mt-s { margin: 0 0 clamp(32px, 4vw, 48px); text-align: center; color: var(--muted); font-size: 1.05rem; }
.mt-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mt-grid li { position: relative; height: 420px; border-radius: 22px; overflow: hidden; background: #d2d2d7; } /* grå til bildene er på plass */
.mt-grid li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.6)); pointer-events: none; }
.mt-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
@media (hover: hover) { .mt-grid li:hover img { transform: scale(1.04); } }
.mt-grid b { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 24px; color: #fff; font: 700 24px/1.1 var(--display); letter-spacing: -0.02em; }
.mt-pill { position: absolute; z-index: 1; top: 16px; right: 16px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--text); font-size: 0.85rem; font-weight: 500; line-height: 1; }

.footer { padding: 40px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 1rem; color: var(--muted); }
.foot-row a:hover { color: var(--text); text-decoration: underline; }
.foot-info { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 20px; font-size: 0.9rem; color: var(--muted); }
.foot-info p { margin: 0; }
.foot-info a { color: var(--muted); text-decoration: underline; }
.foot-info a:hover { color: var(--text); }

/* Fast knapp på mobil */
.dock { display: none; }

@media (max-width: 900px) {
  .join-grid, .car-grid, .m-grid, .try { grid-template-columns: 1fr; }
}

/* Lave vinduer: bilene beholder størrelsen, avstandene og teksten under krymper */
@media (min-width: 761px) and (max-height: 860px) {
  .hx { padding-top: clamp(10px, 2.2vh, 24px); }
  .mark { margin-top: clamp(12px, 12vh - 56px, 110px); }
  .hero-txt { margin-top: clamp(4px, 2.5vh - 6px, 36px); }
  .hero-l1 { margin-bottom: 4px; font-size: clamp(1.15rem, 3.4vh, 2rem); }
  .hero-l2 { font-size: clamp(0.92rem, 2.1vh, 1.05rem); }
  .hero-btn { margin-top: clamp(10px, 2.4vh, 24px); padding: clamp(12px, 2vh, 19px) 36px; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .hx { padding: 16px 0 0; }
  .logo { font-size: 1.3rem; }
  .bar-btn { height: 34px; padding: 0 14px; font-size: 0.9rem; }
  .hero-btn { width: 100%; }
  .consent { font-size: 0.88rem; }
  .foot-info { flex-direction: column; }
  .mark { margin-top: 44px; font-size: calc((100vw - 2 * var(--pad)) / 4.9); line-height: 0.84; white-space: normal; }
  .mark-l { display: block; }
  .hx-stage { width: 122vw; margin: 8px 0 0; }
  .hero-l2 { font-size: 1rem; }
  .join .wrap { width: calc(100% - 32px); }
  .card-one { padding: 40px 20px; }
  .wl-row { flex-direction: column; }
  .card .wl-row input { flex: none; }
  .wl-row .btn, .wl-done .btn { width: 100%; }
  .mt-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mt-grid li { height: 240px; }
  .card { padding: 34px 26px 30px; }
  .card-s { margin-bottom: 28px; }
  .tiles { gap: 8px; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .faq summary { font-size: 1.05rem; padding: 20px 0; }
  .faq details p { font-size: 1rem; }
  .tiles li { padding: 12px 14px; }
  .cal { padding: 22px 16px; }
  .day { padding: 5px 6px; border-radius: 9px; }
  .day b { font-size: 0.85rem; }
  .day.we::after { top: 5px; right: 5px; width: 5px; height: 5px; }
  .gauge { width: 70px; height: 70px; }
  .gauge-num span { font-size: 1.4rem; }
  .join-grid, .car-grid, .m-grid { gap: 18px; }
  .car-body { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 24px 26px; }
  .car-spec { justify-content: flex-start; }
      .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .dock { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 20; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 56px; border-radius: 999px; background: var(--cta); color: #fff; font: 600 1.05rem var(--body); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.35); transform: translateY(160%); transition: transform 0.4s var(--ease); }
  .dock.show { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* Personvern */
.legal { padding: 24px 0 var(--gap); }
.legal-wrap { width: min(720px, 100% - 2 * var(--pad)); margin: 0 auto; }
.legal-h { margin: clamp(56px, 10vh, 120px) 0 16px; font: 700 clamp(2.6rem, 6vw, 4.4rem)/1 var(--display); letter-spacing: -0.05em; }
.legal-lead { margin: 0 0 clamp(40px, 6vw, 64px); font-size: 1.2rem; line-height: 1.5; }
.legal section { padding: 24px 0; border-top: 1px solid var(--line); }
.legal h2 { margin: 0 0 8px; font: 700 1.2rem/1.3 var(--display); letter-spacing: -0.02em; }
.legal section p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.legal-back { margin: 32px 0 0; }
.legal-back a { text-decoration: underline; }

/* Venstre medlemskapskort: de tre stegene under hverandre og fordelt i høyden */
.svc-card .steps { flex: 1; grid-template-columns: 1fr; align-content: space-evenly; gap: 28px; margin: 0; padding: 8px 0 0; border-top: 0; }
.svc-card .steps li { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; }
.svc-card .st-n { grid-row: span 2; margin: 0; font-size: 56px; }
.svc-card .st-s { margin-top: 2px; }
@media (max-width: 900px) { .svc-card .steps { gap: 24px; padding-top: 0; } .svc-card .st-n { font-size: 48px; } }
.legal section a { color: var(--text); text-decoration: underline; }