:root {
  --bg: #F7F7F8;
  --surface: #FFFFFF;
  --surface-2: #F1F1F3;
  --border: #E5E5E5;
  --border-strong: #868E9D;
  --text: #1A1A1A;
  --text-2: #4B5563;
  --text-3: #636B7A;
  --accent: #1F4E79;
  --accent-hover: #1A4268;
  --accent-active: #153657;
  --accent-ink: #FFFFFF;
  --accent-soft: #EDF2F8;
  --accent-2: #1F4E79;
  --accent-2-soft: #EDF2F8;
  --link: #1F4E79;
  --ok: #15803D;
  --ok-soft: #E8F8EF;
  --warn: #92400E;
  --warn-soft: #FDF3DC;
  --bad: #B91C1C;
  --bad-soft: #FDECEA;
  --focus: #1F4E79;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg: #0F172A;
    --surface: #1E293B;
    --surface-2: #273449;
    --border: #334155;
    --border-strong: #64748B;
    --text: #F1F5F9;
    --text-2: #CBD5E1;
    --text-3: #94A3B8;
    --accent: #7F9FC4;
    --accent-hover: #9CC0E8;
    --accent-active: #B8D4F1;
    --accent-ink: #0F172A;
    --accent-soft: #12263C;
    --accent-2: #9CC0E8;
    --accent-2-soft: #12263C;
    --link: #9CC0E8;
    --ok: #6EE7A0;
    --ok-soft: #173A2C;
    --warn: #FCD34D;
    --warn-soft: #3A2D10;
    --bad: #FCA5A5;
    --bad-soft: #391818;
    --focus: #9CC0E8;
    color-scheme: dark;
  }
}
:root[data-theme=dark] {
  --bg: #0F172A;
  --surface: #1E293B;
  --surface-2: #273449;
  --border: #334155;
  --border-strong: #64748B;
  --text: #F1F5F9;
  --text-2: #CBD5E1;
  --text-3: #94A3B8;
  --accent: #7F9FC4;
  --accent-hover: #9CC0E8;
  --accent-active: #B8D4F1;
  --accent-ink: #0F172A;
  --accent-soft: #12263C;
  --accent-2: #9CC0E8;
  --accent-2-soft: #12263C;
  --link: #9CC0E8;
  --ok: #6EE7A0;
  --ok-soft: #173A2C;
  --warn: #FCD34D;
  --warn-soft: #3A2D10;
  --bad: #FCA5A5;
  --bad-soft: #391818;
  --focus: #9CC0E8;
  color-scheme: dark;
}
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-note: 14px; --fs-small: 16px; --fs-body: 17px; --fs-lead: 20px;
  --fs-h2: clamp(24px, 1.5vw + 18px, 30px);
  --fs-h1: clamp(30px, 2.8vw + 20px, 44px);
  --fs-price: 28px;
  --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.65;
  --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px;
  --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-12: 64px;
  --radius-xs: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12);
  --duration-fast: 120ms; --duration-normal: 180ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --shell-max: 1120px;
}
@media (min-width: 641px) { :root { --fs-price: 32px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--line-height-relaxed);
  overflow-wrap: break-word;
}
h1, h2, h3 { line-height: var(--line-height-tight); font-weight: 600; margin: 0 0 var(--space-4); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-lead); }
p { margin: 0 0 var(--space-5); }
p, li { max-inline-size: 66ch; }
a { color: var(--link); text-decoration: underline; text-underline-offset: var(--space-1); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input, textarea, select, button { font: inherit; font-size: var(--fs-small); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.shell { width: min(var(--shell-max), 100% - 32px); margin-inline: auto; }
@media (min-width: 768px) { .shell { width: min(var(--shell-max), 100% - 64px); } }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-5); top: var(--space-5); background: var(--surface); padding: var(--space-3) var(--space-5); z-index: 10; }
.hdr { background: var(--bg); border-bottom: 1px solid var(--border); }
.hdr__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-4); }
.brand { font-weight: 600; font-size: var(--fs-lead); color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.nav { display: none; }
.nav a { color: var(--text-2); text-decoration: none; padding: var(--space-3) var(--space-3); min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--text); text-decoration: underline; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: var(--fs-small); }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel { position: absolute; right: 0; top: calc(100% + var(--space-3)); z-index: 5; width: min(320px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-3); }
.menu__panel a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); color: var(--text); text-decoration: none; border-radius: var(--radius-md); }
.menu__panel a:hover { background: var(--surface-2); }
.menu__panel .menu__sub { color: var(--text-2); padding-left: var(--space-7); }
@media (min-width: 961px) {
  .nav { display: flex; align-items: center; gap: var(--space-2); }
  .menu { display: none; }
}
.nav__drop { position: relative; }
.nav__drop > summary { list-style: none; cursor: pointer; color: var(--text-2); padding: var(--space-3); min-height: 44px; display: inline-flex; align-items: center; }
.nav__drop > summary::-webkit-details-marker { display: none; }
.nav__drop .menu__panel { left: 0; right: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: var(--space-3);
  min-height: 44px; padding: var(--space-3) var(--space-7); border-radius: var(--radius-md);
  font-weight: 600; font-size: var(--fs-small); line-height: var(--line-height-normal); text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard); }
.btn--primary { background: var(--accent); color: var(--accent-ink); border: 0; min-height: 52px; font-size: var(--fs-body); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-active); }
.btn--second { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn--second:hover { background: var(--surface-2); }
@media (max-width: 430px) { .btn--primary { width: 100%; } }
.hdr .btn--second { display: none; }
@media (min-width: 961px) { .hdr .btn--second { display: inline-flex; } }
main { display: block; }
.sec { padding-block: var(--space-9); }
@media (min-width: 431px) { .sec { padding-block: var(--space-12); } }
.sec + .sec { border-top: 1px solid var(--border); }
.sec--tint { background: var(--surface-2); }
.sec--tint .sec__more a, .sec--tint p { color: var(--text); }
.sec__more { margin-top: var(--space-7); }
.crumbs { font-size: var(--fs-note); color: var(--text-2); padding-top: var(--space-5); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.crumbs li + li::before { content: "→"; margin-right: var(--space-3); color: var(--text-2); }
.crumbs a { color: var(--link); }
.hero { padding-block: var(--space-9) var(--space-10); }
.hero__lead { font-size: var(--fs-lead); color: var(--text-2); line-height: var(--line-height-normal); max-inline-size: 40ch; }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-7); margin-top: var(--space-7); }
.hero__price { font-size: var(--fs-lead); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.hero__note { font-size: var(--fs-note); color: var(--text-2); margin-top: var(--space-4); margin-bottom: 0; }
.trustline { margin-top: var(--space-7); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text-2); font-size: var(--fs-small); max-inline-size: none; }
.grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 641px) { .grid--2, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 961px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  padding: var(--space-5); display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 431px) { .card { padding: var(--space-7); } }
.card--boundary { background: var(--surface-2); box-shadow: none; }
.card p { color: var(--text-2); }
.card--boundary p, .card--boundary li { color: var(--text); }
.card__price { font-size: var(--fs-price); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; line-height: var(--line-height-tight); margin: auto 0 var(--space-3); padding-top: var(--space-4); }
.card__price small { font-size: var(--fs-body); font-weight: 400; }
.card__tiers { font-size: var(--fs-note); color: var(--text-2); margin-bottom: var(--space-4); }
.card__link { margin-top: var(--space-2); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.card__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin-top: auto; }
.list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.list li { position: relative; padding-left: var(--space-8); }
.list li::before { content: "—"; position: absolute; left: 0; color: var(--text-2); }
.list--check li::before { content: ""; left: var(--space-2); top: 0.45em; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.steps { counter-reset: st; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-5); }
@media (min-width: 961px) { .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { counter-increment: st; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-12); position: relative; min-width: 0; }
.steps li::before { content: counter(st); position: absolute; left: var(--space-5); top: var(--space-5); width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--accent-2-soft); color: var(--accent-2); font-weight: 600; display: flex; align-items: center; justify-content: center; font-size: var(--fs-small); }
.steps h3 { font-size: var(--fs-body); margin-bottom: var(--space-3); }
.steps p { margin: 0; color: var(--text-2); }
.ptable { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ptable th, .ptable td { padding: var(--space-4) var(--space-5); text-align: left; border-top: 1px solid var(--border); vertical-align: top; }
.ptable thead th { background: var(--surface-2); color: var(--text); font-size: var(--fs-small); border-top: 0; }
.ptable td.p, .ptable th.p { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable td.p { font-weight: 600; }
.ptable .sub { display: block; font-size: var(--fs-note); color: var(--text-2); font-weight: 400; }
@media (max-width: 767px) {
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable thead { display: none; }
  .ptable { border: 0; background: none; display: grid; gap: var(--space-4); }
  .ptable tbody { display: grid; gap: var(--space-4); }
  .ptable tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
  .ptable td { border: 0; padding: var(--space-2) 0; }
  .ptable td.p { text-align: left; display: flex; justify-content: space-between; gap: var(--space-5); }
  .ptable td.p::before { content: attr(data-label); font-weight: 400; color: var(--text-2); }
}
.pnote { font-size: var(--fs-small); color: var(--text-2); margin-top: var(--space-5); }
.pnote strong { color: var(--text); }
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; min-height: 44px; padding: var(--space-4) var(--space-8) var(--space-4) 0; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: var(--space-3); top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: translateY(-75%) rotate(45deg); transition: transform var(--duration-normal) var(--ease-standard); }
.faq details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.faq .ans { padding-bottom: var(--space-5); }
.faq .ans p:last-child { margin-bottom: 0; }
.cta-end { text-align: left; }
.related { margin-top: var(--space-7); font-size: var(--fs-small); color: var(--text-2); }
.related a { margin-right: var(--space-5); display: inline-flex; min-height: 44px; align-items: center; }
.rekv { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); }
.rekv dt { color: var(--text-2); font-size: var(--fs-note); padding-top: var(--space-4); }
.rekv dd { margin: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.rekv dd:last-child { border-bottom: 0; }
@media (min-width: 768px) {
  .rekv { grid-template-columns: 240px minmax(0, 1fr); }
  .rekv dt, .rekv dd { padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--border); }
  .rekv dt:nth-last-of-type(1), .rekv dd:last-child { border-bottom: 0; }
}
.legal { max-inline-size: 75ch; }
.legal h1 { font-size: clamp(26px, 2vw + 18px, 36px); }
.legal h2 { font-size: var(--fs-lead); margin-top: var(--space-9); }
.legal h3 { font-size: var(--fs-body); margin-top: var(--space-7); }
.legal blockquote { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--border-strong); background: var(--surface); color: var(--text); }
.legal ul, .legal ol { padding-left: var(--space-7); }
.tblwrap { max-width: 100%; overflow-x: auto; margin-bottom: var(--space-5); }
.legal table { border-collapse: collapse; min-width: 100%; font-size: var(--fs-small); background: var(--surface); }
.legal th, .legal td { border: 1px solid var(--border); padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; }
.legal th { background: var(--surface-2); }
.legal code { font-size: 0.9em; }
.draft { border: 1px solid var(--warn); background: var(--warn-soft); color: var(--text); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; font-size: var(--fs-small); }
.ftr { border-top: 1px solid var(--border); background: var(--bg); color: var(--text-2); font-size: var(--fs-note); padding-block: var(--space-9); line-height: var(--line-height-normal); }
.ftr p { margin-bottom: var(--space-4); max-inline-size: none; }
.ftr a { color: var(--link); }
.ftr__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin-bottom: var(--space-4); padding: 0; list-style: none; }
.ftr__links li { max-inline-size: none; }
.ftr__links a, .ftr__links button { display: inline-flex; align-items: center; min-height: 44px; }
.ftr__legal { color: var(--text-3); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; text-underline-offset: var(--space-1); cursor: pointer; font-size: var(--fs-note); }
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-lg);
  padding: var(--space-3) 0; font-size: var(--fs-note); line-height: var(--line-height-normal); }
.cookie[hidden] { display: none; }
.cookie__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.cookie__text { margin: 0; color: var(--text); }
.cookie__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); flex: 1 1 100%; }
.cookie__btns .btn { min-height: 44px; padding: 0 var(--space-5); width: 100%; }
@media (min-width: 641px) { .cookie__btns { flex: 0 0 auto; grid-template-columns: 140px 140px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media print { .hdr, .cookie, .cta-end { display: none; } }
