/* Chocks – öffentliche Startseite. Bildsprache: Flugplatz-Beschilderung und Kontrollleuchten.
   Schwarz = Positionsschild, Gelb = die eine Hauptaktion (Richtungsschild), Grün/Amber = Zustand. */

@font-face { font-family: "Atkinson"; font-weight: 400; font-display: swap; src: url(fonts/atkinson-hyperlegible-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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Atkinson"; font-weight: 400; font-display: swap; src: url(fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson"; font-weight: 700; font-display: swap; src: url(fonts/atkinson-hyperlegible-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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Atkinson"; font-weight: 700; font-display: swap; src: url(fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow C"; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow C"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }

:root {
  --beton: #E9EDF2;      /* Vorfeld */
  --white: #FFFFFF;
  --ink: #13213C;
  --muted: #4A5970;
  --line: #C9D2DD;
  --taxi: #F5C400;       /* Rollweg-Gelb */
  --black: #000000;      /* Positionsschild */
  --night: #0F1B2D;      /* Cockpit bei Dämmerung */
  --go: #1F8A4C;
  --go-lamp: #3DDC84;
  --amber: #F0A202;
  --sky: #2C6CB0;
  --body: "Atkinson", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sign: "Barlow C", "Arial Narrow", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.lp { margin: 0; background: var(--beton); color: var(--ink); font: 400 18px/1.55 var(--body); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--black); color: var(--taxi); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

.lp-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .lp-wrap { padding: 0 16px; } body.lp { font-size: 17px; } }

h1, h2 { font-family: var(--sign); font-weight: 700; line-height: .98; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(48px, 6vw, 84px); }
h1 span { display: block; }
@media (max-width: 600px) { h1 { font-size: clamp(44px, 12vw, 60px); } }
h2 { font-size: clamp(34px, 5vw, 58px); max-width: 16ch; }
h3 { font: 700 20px/1.3 var(--body); margin: 0 0 8px; }
p { margin: 16px 0 0; max-width: 62ch; }

/* --- Kopf ------------------------------------------------------------------------- */
.lp-top { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; margin: 0 auto; padding: 20px 24px; }
@media (max-width: 600px) { .lp-top { padding: 14px 16px; } }
.lp-plate { display: inline-block; background: var(--black); border: 2px solid var(--taxi); border-radius: 4px; padding: 2px 12px 1px; text-decoration: none; }
.lp-plate span { font: 700 26px/1.1 var(--sign); color: var(--taxi); letter-spacing: .06em; }
.lp-link { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lp-link:hover { text-decoration-color: var(--taxi); }

/* --- Richtungsschild: die eine Hauptaktion ---------------------------------------- */
.lp-sign { display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 6px 26px 4px 20px;
  background: var(--taxi); color: var(--black); border-radius: 5px; text-decoration: none;
  font: 700 28px/1 var(--sign); text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 0 0 2px var(--black) inset, 0 4px 0 rgba(19, 33, 60, .18); }
.lp-sign .lp-arrow { font-size: .8em; transition: transform .18s ease-out; }
.lp-sign:hover .lp-arrow, .lp-sign:focus-visible .lp-arrow { transform: translateX(-7px); }
.lp-sign:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--black) inset, 0 2px 0 rgba(19, 33, 60, .18); }
.lp-sign.big { font-size: clamp(30px, 4.4vw, 44px); min-height: 84px; padding: 8px 34px 6px 26px; }

/* --- Held ------------------------------------------------------------------------- */
.lp-hero { padding: clamp(20px, 4vw, 48px) 0 0; }
.lp-intro { display: grid; grid-template-columns: minmax(0, 52ch) auto; gap: 24px 56px; align-items: end; margin-top: 26px; }
@media (max-width: 960px) { .lp-intro { grid-template-columns: 1fr; } }
.lp-lead { font-size: clamp(19px, 1.7vw, 21px); color: var(--ink); margin: 0; }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

.lp-flight { overflow: hidden; margin: clamp(32px, 4.5vw, 56px) 0 0; background: var(--white); border-block: 1px solid var(--line); }
.lp-flight-in { position: relative; padding-top: 22px; padding-bottom: 10px; }
.lp-instruments { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 34px; }
.lp-clock b, .lp-read b { display: block; font: 600 clamp(44px, 6vw, 68px)/1 var(--sign); font-variant-numeric: tabular-nums; }
.lp-read b { font-size: clamp(26px, 3.2vw, 36px); min-width: 3.2ch; }
.lp-instruments small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.lp-lamps { display: flex; gap: 8px; list-style: none; margin: 0 0 6px auto; padding: 0; }
.lp-lamps li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; border-radius: 999px; background: #EEF1F5; color: var(--muted); font-size: 15px; font-weight: 700; transition: background .2s, color .2s; }
.lp-lamps i { width: 12px; height: 12px; border-radius: 50%; background: #B9C3CF; transition: background .2s, box-shadow .2s; }
.lp-lamps li.on { background: var(--night); color: var(--white); }
.lp-lamps li[data-lamp="roll"].on i { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.lp-lamps li[data-lamp="air"].on i, .lp-lamps li[data-lamp="land"].on i { background: var(--go-lamp); box-shadow: 0 0 10px var(--go-lamp); }
@media (max-width: 760px) { .lp-lamps { margin-left: 0; width: 100%; } .lp-lamps li { font-size: 13px; padding: 5px 10px 5px 8px; } }

.lp-profile { width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.lp-runway { stroke: var(--ink); stroke-width: 2; }
.lp-marks line { stroke: var(--white); stroke-width: 2; }
.lp-area { fill: url(#lp-fill); }
.lp-path { fill: none; stroke: var(--sky); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lp-craft { fill: var(--ink); }
.lp-ticks text { font: 600 14px var(--sign); fill: var(--muted); }

.lp-stamp { position: absolute; right: clamp(24px, 9%, 120px); bottom: clamp(48px, 9vw, 110px); transform: rotate(-7deg); border: 4px solid var(--go); border-radius: 8px;
  padding: 4px 18px 6px; color: var(--go); background: rgba(255, 255, 255, .92); text-align: center; }
.lp-stamp b { display: block; font: 700 clamp(28px, 4vw, 44px)/1 var(--sign); text-transform: uppercase; letter-spacing: .04em; }
.lp-stamp span { font: 600 15px var(--sign); letter-spacing: .06em; }
@media (max-width: 760px) { .lp-stamp { bottom: 40px; right: 16px; padding: 2px 12px 4px; } .lp-stamp span { font-size: 13px; } }

.lp-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 4px; padding-bottom: 18px; color: var(--muted); font-size: 15px; }
.lp-cap span { max-width: 70ch; }
.lp-replay { font: 700 15px var(--body); color: var(--ink); background: none; border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.lp-replay:hover { background: var(--ink); color: var(--white); }

/* Animation: Startzustand nur, wenn JavaScript läuft – ohne JS steht der Endzustand */
.js .lp-stamp { opacity: 0; transform: rotate(-7deg) scale(1.5); }
.lp-stamp.stamped { animation: stamp .42s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.7); }
  60% { opacity: 1; transform: rotate(-6deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}

/* --- Abschnitte ------------------------------------------------------------------- */
.lp-sec { padding: clamp(64px, 9vw, 120px) 0; }
.lp-alt { background: var(--white); border-block: 1px solid var(--line); }
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 860px) { .lp-split { grid-template-columns: 1fr; } }
.lp-small { font-size: 15px; color: var(--muted); }

/* Vorher / nachher */
.lp-compare { display: grid; gap: 16px; }
.lp-paper, .lp-entry { padding: 22px 24px; border-radius: 8px; }
.lp-paper { background: repeating-linear-gradient(#F6F8FA 0 31px, #D9E2EC 31px 32px); border: 1px solid var(--line); color: var(--muted); }
.lp-paper ul { list-style: none; margin: 0; padding: 0; }
.lp-paper li { line-height: 32px; padding-left: 30px; position: relative; }
.lp-paper li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 15px; height: 15px; border: 2px solid #9AA8BA; border-radius: 3px; }
.lp-entry { background: var(--white); border: 1px solid var(--line); border-left: 6px solid var(--go); box-shadow: 0 6px 24px rgba(19, 33, 60, .08); }
.lp-entry h3 { display: flex; align-items: center; gap: 10px; }
.lp-dot { width: 12px; height: 12px; border-radius: 50%; }
.lp-dot.go { background: var(--go); }
.lp-entry dl { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 24px; margin: 6px 0 0; justify-content: start; }
.lp-entry dl div { display: contents; }
.lp-entry dt { grid-row: 1; color: var(--muted); font-size: 14px; }
.lp-entry dd { grid-row: 2; margin: 0; font: 600 26px/1.1 var(--sign); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .lp-entry dl { grid-template-columns: repeat(2, auto); } .lp-entry dl div { display: block; } .lp-entry dt, .lp-entry dd { grid-row: auto; } }
.lp-seal { font-size: 14px; color: var(--muted); margin-top: 14px; }

/* Recency-Tafel: der einzige dunkle Abschnitt – wie ein Panel im Cockpit */
.lp-dark { background: var(--night); color: #E8EEF6; }
.lp-dark .lp-small { color: #9FB0C6; }
.lp-board { display: grid; gap: 10px; }
.lp-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; background: #16253B; border: 1px solid #2E4161; border-radius: 10px; }
.lp-row b { display: block; font: 700 22px/1.1 var(--sign); color: #fff; }
.lp-row span { color: #B7C4D6; font-size: 15px; }
.lp-row em { font-style: normal; font: 600 17px var(--sign); color: #B7C4D6; }
.lp-lamp { --lamp: #3A4A63; width: 22px; height: 22px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
.lp-row[data-state="green"] .lp-lamp { --lamp: var(--go-lamp); box-shadow: 0 0 14px rgba(61, 220, 132, .55); }
.lp-row[data-state="amber"] .lp-lamp { --lamp: var(--amber); box-shadow: 0 0 14px rgba(240, 162, 2, .55); }
.lp-note { font-size: 14px; color: #9FB0C6; margin: 4px 0 0; }
/* Lampentest beim ersten Erscheinen: alle Leuchten kurz an, dann der echte Zustand */
.lp-board.lamptest .lp-lamp { animation: lamptest .9s steps(1) 1; }
.lp-board.lamptest .lp-row:nth-child(2) .lp-lamp { animation-delay: .08s; }
.lp-board.lamptest .lp-row:nth-child(3) .lp-lamp { animation-delay: .16s; }
@keyframes lamptest { 0% { background: var(--amber); } 33% { background: #F06B63; } 66% { background: var(--go-lamp); } 100% { background: var(--lamp); } }

/* Ablauf – echte Reihenfolge, Nummern als Positionsschilder */
.lp-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); margin: 48px 0 0; padding: 0; }
@media (max-width: 860px) { .lp-steps { grid-template-columns: 1fr; } }
.lp-steps li { counter-increment: step; }
.lp-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px;
  background: var(--black); color: var(--taxi); border: 2px solid var(--taxi); border-radius: 5px; font: 700 34px/1 var(--sign); }
.lp-by { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; font: 600 14px/1.5 var(--sign); letter-spacing: .02em; vertical-align: 2px; background: #DCE3EB; color: var(--ink); }
.lp-by.you { background: var(--taxi); color: var(--black); }
.lp-steps p { margin-top: 6px; color: var(--muted); }

/* Hash-Kette */
.lp-list { padding-left: 20px; margin: 20px 0 0; }
.lp-list li { margin-top: 8px; }
.lp-chain { display: grid; gap: 22px; position: relative; }
.lp-chain::before { content: ""; position: absolute; left: 34px; top: 20px; bottom: 20px; width: 2px; background: var(--line); }
.lp-link-block { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 2px 14px; align-items: baseline; padding: 14px 18px; background: var(--beton); border-radius: 8px; border: 1px solid var(--line); }
.lp-link-block b { grid-row: span 2; font: 700 22px var(--sign); }
.lp-link-block code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.lp-link-block.struck span { text-decoration: line-through; color: var(--muted); }
.lp-link-block.fix { border-left: 6px solid var(--amber); background: var(--white); }
.lp-own { margin-top: clamp(48px, 7vw, 80px); padding-top: 32px; border-top: 1px solid var(--line); }
.lp-own h3 { font: 700 clamp(26px, 3vw, 34px)/1.1 var(--sign); }

/* Verein & Ausbildung */
.lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 48px; margin: 48px 0 0; }
@media (max-width: 860px) { .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lp-features { grid-template-columns: 1fr; } }
.lp-features dt { font: 700 24px/1.1 var(--sign); padding-top: 14px; border-top: 3px solid var(--ink); }
.lp-features dd { margin: 8px 0 0; color: var(--muted); }

/* Rechner */
.lp-calc { display: grid; gap: 26px; padding: 28px; background: var(--beton); border-radius: 10px; border: 1px solid var(--line); }
.lp-calc label { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-weight: 700; }
.lp-calc output { font: 600 28px/1 var(--sign); font-variant-numeric: tabular-nums; }
.lp-calc input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--ink); height: 28px; }
.lp-result { margin: 0; font-size: 17px; color: var(--muted); }
.lp-result b { font: 700 clamp(56px, 7vw, 80px)/1 var(--sign); color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-result #o-unit { font: 700 24px var(--sign); color: var(--ink); }

/* Fragen */
.lp-faq > * { max-width: 860px; }
.lp-faq h2 { margin-bottom: 28px; }
.lp-faq details { border-top: 1px solid var(--line); }
.lp-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.lp-faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font: 700 20px/1.35 var(--body); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font: 600 30px/1 var(--sign); transition: transform .2s ease-out; }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p { margin: 0 0 22px; color: var(--muted); }

/* Abschluss */
.lp-end { padding: clamp(72px, 10vw, 140px) 0; text-align: left; }
.lp-end h2 { max-width: 14ch; margin-bottom: 36px; }
.lp-end p { color: var(--muted); }

/* Fuß */
.lp-foot { background: var(--black); color: #C3CEDD; font-size: 15px; padding: 26px 0; }
.lp-foot .lp-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.lp-foot a { color: #fff; }
.lp-foot form { margin-left: auto; display: flex; gap: 6px; }
.lp-foot button { font: 700 14px var(--body); color: #C3CEDD; background: none; border: 1px solid #3A4A63; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.lp-foot button[aria-current="true"] { color: var(--black); background: var(--taxi); border-color: var(--taxi); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .lp-stamp { opacity: 1; transform: rotate(-7deg); }
}

/* --- Rechtstexte ------------------------------------------------------------------ */
.lp-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.lp-legal a[aria-current="page"] { color: var(--taxi); text-decoration: none; }
.lg-main { padding: 8px 0 72px; }
.lg-doc { max-width: 760px; margin: 0 auto; padding: 0 24px; font-size: 17px; line-height: 1.6; }
@media (max-width: 600px) { .lg-doc { padding: 0 16px; font-size: 16px; } }
.lg-doc h1 { font-size: clamp(40px, 6vw, 60px); margin: 24px 0 6px; }
.lg-doc .lg-stand { color: var(--muted); margin: 0 0 28px; font-size: 15px; }
.lg-doc h2 { font-size: 28px; max-width: none; margin: 44px 0 0; padding-top: 14px; border-top: 3px solid var(--black); }
.lg-doc h3 { margin: 26px 0 0; font-size: 18px; }
.lg-doc p, .lg-doc ul, .lg-doc ol, .lg-doc dl, .lg-doc address { max-width: 66ch; }
.lg-doc ul, .lg-doc ol { margin: 12px 0 0; padding-left: 1.3em; }
.lg-doc li { margin: 6px 0; }
.lg-doc address { font-style: normal; margin: 14px 0 0; padding: 14px 18px; background: var(--white); border-left: 6px solid var(--taxi); border-radius: 0 4px 4px 0; }
.lg-doc dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 14px 0 0; }
.lg-doc dt { font-weight: 700; } .lg-doc dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .lg-doc dl { grid-template-columns: 1fr; } .lg-doc dd { margin-bottom: 8px; } }
.lg-doc a { text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lg-toc { background: var(--white); border-radius: 4px; padding: 14px 18px 14px 50px; margin: 22px 0 0; columns: 2 260px; column-gap: 32px; }
.lg-toc li { break-inside: avoid; margin: 3px 0; }
.lg-box { margin: 18px 0 0; padding: 14px 18px; border: 2px solid var(--black); border-radius: 4px; background: var(--white); }
.lg-box p:first-child { margin-top: 0; }
.lg-admin, .lg-flash, .lg-lang { margin: 18px 0 0; padding: 12px 16px; border-radius: 4px; font-size: 15px; }
.lg-admin { background: #FFF4CC; border: 1px solid var(--amber); }
.lg-flash { background: #E3F4EA; border: 1px solid var(--go); }
.lg-lang { background: var(--white); border: 1px solid var(--line); }
.lg-missing { background: #FFF4CC; padding: 0 4px; border-radius: 2px; }
.lg-steps { counter-reset: s; list-style: none; padding-left: 0 !important; }
.lg-steps li { counter-increment: s; position: relative; padding-left: 44px; margin: 14px 0; }
.lg-steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--black); color: var(--taxi); font: 700 18px/1 var(--sign); border-radius: 3px; }
.lg-done { margin: 28px 0 0; padding: 22px; background: var(--black); color: #fff; border-radius: 5px; }
.lg-done h2 { border: 0; margin: 0; padding: 0; color: var(--taxi); }
.lg-form { display: grid; gap: 6px; max-width: 34rem; margin: 22px 0 0; padding: 18px; background: var(--white); border: 2px solid var(--black); border-radius: 5px; }
.lg-form label { font-weight: 700; margin-top: 8px; }
.lg-form input, .lg-form select, .lg-form textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); width: 100%; }
.lg-form fieldset { border: 0; padding: 0; margin: 8px 0 0; }
.lg-form legend { font-weight: 700; padding: 0; }
.lg-form .lg-radio { font-weight: 400; display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.lg-form .lg-radio input { width: auto; }
.lg-err { color: #B42318; margin: 2px 0 0; font-size: 15px; }
.lg-confirm { margin-top: 14px; justify-self: start; font: 700 22px/1 var(--sign); letter-spacing: .03em; padding: 14px 22px 12px; border: 0; border-radius: 5px; background: var(--taxi); color: var(--black); cursor: pointer; }
.lg-confirm:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
/* Tarife */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 22px 0 0; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 20px; display: flex; flex-direction: column; }
.plan-main { border: 3px solid var(--black); box-shadow: 6px 6px 0 var(--taxi); }
.plan h3 { font: 700 28px/1 var(--sign); margin: 0; }
.plan-price { margin: 10px 0 0; } .plan-price b { font: 700 34px/1 var(--sign); } .plan-price span, .plan-sub, .plan-note, .plans-note { color: var(--muted); font-size: 15px; }
.plan-sub { margin: 4px 0 0; } .plan-lead { font-weight: 700; margin: 14px 0 0; }
.plan ul { margin: 8px 0 0; padding-left: 1.2em; } .plan li { margin: 5px 0; font-size: 16px; }
.plan-btn { display: block; text-align: center; margin-top: 14px; padding: 12px; border: 2px solid var(--black); border-radius: 5px; font-weight: 700; text-decoration: none; color: var(--black); }
.plan .plan-btn:first-of-type { margin-top: auto; }
.plan-btn.primary { background: var(--taxi); }
.plan-current { margin-top: auto; padding-top: 14px; font-weight: 700; color: var(--go); }
.plans-note { margin-top: 16px; max-width: 70ch; }