/* ----------------------------------------------------------------------------
   Public storefront marketing layer — "rus_mieter" brand (Nebenkosten rebrand).
   Warm-paper canvas (#F4EEE2), forest-green ink/brand (#2D4A38), amber accent
   (#DD9A3C). Display face: Newsreader (serif, incl. italic). Body/UI: Hanken
   Grotesk. Both SIL OFL, self-hosted from /fonts — no CDN (DSGVO).
   Everything structural elsewhere uses raw MudBlazor components.
---------------------------------------------------------------------------- */

/* ---- Self-hosted fonts (Google css2 woff2 subsets, latin + latin-ext) ------ */
/* Hanken Grotesk — variable 400..700, body/UI */
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/hanken-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: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* Newsreader — variable 400..600 roman + italic, display headings */
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/newsreader-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: 'Newsreader';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/newsreader-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
@font-face {
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/newsreader-italic-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: 'Newsreader';
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/newsreader-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

/* ---- Brand palette (scoped semantic vars, cascade to all public pages) ------ */
.public-shell, .acc {
    --paper: #f4eee2;
    --paper-glow: #fbf7ee;
    --ink: #20271f;
    --green: #2d4a38;
    --green-dark: #243c2d;
    --green-darker: #1f3329;
    --amber: #dd9a3c;
    --amber-light: #e7a94e;
    --body: #4b564d;
    --body-strong: #3c4a40;
    --body-soft: #5a645b;
    --muted: #6b746a;
    --faint: #8a9085;
    --card: var(--paper-glow);
    --card-border: #e9dfcc;
    --line: #e4dac6;
    --line-strong: #d4c7ae;
    --input-border: #e0d6c2;
    --band: #ede4d1;
    --sage: #e3eae0;
    --trust-green: #3c6b52;
    --dark: var(--ink);
    --dark-body: #c7d2c2;
    --dark-line: #46503f;
    --error-bg: #fbe9e7;
    --error-border: #e5a79c;
    --error-ink: #8c3a2c;
    --pending-bg: #fbf0da;
    --pending-border: #ebcf95;
    --pending-ink: #9a6a16;
    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
}

/* ---- Shared marketing classes (used across all public pages) --------------- */
.public-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--amber);
    margin-bottom: 0.9rem;
}

.public-muted { color: var(--muted); }

.public-lead {
    font-size: 1.15rem;
    color: var(--body);
    line-height: 1.6;
}

.long-copy {
    color: var(--body);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.long-copy p:last-child { margin-bottom: 0; }

/* legal text body card (brand replacement for the former MudPaper) */
.legal-copy {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 2rem;
    margin-top: 1.5rem;
}

/* The legal bodies are verbatim generator/lawyer HTML (bare h2/h3/h4, p, ul, a, em — no
   classes to hook onto), and the global reset strips default margins — style the card's
   inner elements here so the texts read in the brand instead of as a wall of text.
   Headings follow the public serif convention (.detail-h2 family, scaled down a step). */
.legal-copy h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.375rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ink);
    margin: 2.25rem 0 0.75rem;
}

.legal-copy h2:first-child { margin-top: 0; }

.legal-copy h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
    margin: 1.5rem 0 0.5rem;
}

.legal-copy h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--body-strong);
    margin: 1.25rem 0 0.5rem;
}

.legal-copy p { margin: 0 0 0.875rem; }
.legal-copy p:last-child { margin-bottom: 0; }

.legal-copy ul {
    margin: 0 0 0.875rem;
    padding-left: 1.375rem;
}

.legal-copy li { margin-bottom: 0.375rem; }

.legal-copy a {
    color: var(--green);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.legal-copy a:hover { color: var(--green-dark); }

/* §356a withdrawal function (/widerruf): checkout-family form fields inside the legal card
   need their own rhythm (in the checkout, spacing comes from the co-hint elements). */
.legal-copy .co-label { margin-top: 1.125rem; }
.legal-copy .co-label:first-of-type { margin-top: 0; }
.legal-copy .co-hint { margin-bottom: 0; }
.wf-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
/* .detail-buy is a full-width checkout CTA by default — in this action ROW it must size to its
   label or the ghost button wraps beneath it and the row layout never materializes. */
.wf-actions .detail-buy { width: auto; }

.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 0;
}

/* Anfrage confirmation — a centred terminal card in the os/receipt width family (620px). */
.confirmation-panel {
    max-width: 620px;
    margin: 1.5rem auto 0;
    padding: 2.25rem 2rem;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    background: var(--card);
}
.confirm-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sage);
    color: var(--green);
    margin-bottom: 1rem;
}
.confirm-number { margin: 0.25rem 0 1.5rem; }
.confirmation-panel .page-h1 { margin-bottom: 0.875rem; }

/* ============================================================================
   HOME (hp-) — Nebenkosten rebrand
   ========================================================================= */
.hp { color: var(--ink); }

/* Full-bleed bands: span the viewport even though .public-main is a centred,
   max-width, padded box. Centring a 100vw child on the viewport centre (which
   coincides with the container centre) gives an exact edge-to-edge stripe; the
   scrollbar-width overflow is clipped by overflow-x:hidden on .public-shell. */
.hp-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: var(--band);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.hp-bleed-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.25rem 40px;
}

/* ---- shared type ---- */
.hp-h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.55rem, 1.5rem + 3.2vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin: 0 0 1.25rem;
}

.hp-h1-accent { font-style: italic; color: var(--green); }

.hp-h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2rem, 1.4rem + 1.8vw, 2.85rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}

.hp-lead {
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--body);
    margin: 0;
}

/* ---- buttons ---- */
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 1rem 1.6rem;
    border-radius: 14px;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.hp-btn svg { flex-shrink: 0; }

.hp-btn-primary {
    background: var(--green);
    color: var(--paper);
    box-shadow: 0 8px 22px -10px rgba(45, 74, 56, 0.6);
}
.hp-btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.hp-btn-primary:active { background: var(--green-darker); transform: translateY(0) scale(0.985); transition-duration: 0.05s; }

.hp-btn-ghost {
    background: transparent;
    color: var(--green);
    border-color: var(--line-strong);
}
/* Secondary-on-light hover system: sage fill + green border (see .cat-btn-ghost, .hp-social-icons). */
.hp-btn-ghost:hover { border-color: var(--green); background: var(--sage); transform: translateY(-1px); }
.hp-btn-ghost:active { background: var(--band); transform: translateY(0) scale(0.985); transition-duration: 0.05s; }

.hp-btn-amber {
    background: var(--amber);
    color: var(--ink);
    font-weight: 700;
    justify-content: space-between;
}
.hp-btn-amber:hover { background: var(--amber-light); transform: translateY(-1px); }
.hp-btn-amber:active { transform: translateY(0) scale(0.985); transition-duration: 0.05s; }

.hp-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* keyboard focus (WCAG 2.4.7) */
.hp-btn:focus-visible,
.hp a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 14px; }
.hp-cta-dark .hp-btn:focus-visible,
.hp-cta-dark a:focus-visible { outline-color: var(--amber); }

/* ---- hero ---- */
.hp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 4rem;
    align-items: center;
    padding: 1rem 0 5.5rem;
}

.hp-hero .hp-lead { max-width: 31rem; margin: 0 0 1.6rem; }
.hp-hero .hp-cta-row { margin-bottom: 2.1rem; }

/* social proof */
.hp-social { display: flex; align-items: center; gap: 1rem; }
.hp-social-text { font-size: 0.9rem; color: var(--body); line-height: 1.3; }
.hp-social-text strong { color: var(--ink); font-weight: 700; }
.hp-social-icons { display: flex; align-items: center; gap: 0.5rem; }
.hp-social-icons a {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.hp-social-icons a:hover { border-color: var(--green); color: var(--green); background: var(--sage); transform: translateY(-1px); }

/* ---- hero art (decorative tilted document) ---- */
/* Illustration palette — deliberately literal (art, not UI); exempt from the semantic vars. */
.hp-art { position: relative; height: 480px; }
.hp-art-halo {
    position: absolute;
    inset: 4% 2%;
    border-radius: 34px;
    background: radial-gradient(72% 68% at 52% 36%, #e7efe3 0%, #efe7d6 72%);
}
.hp-art-back {
    position: absolute;
    top: 42px;
    left: calc(50% - 80px);
    width: 240px;
    height: 324px;
    border-radius: 18px;
    background: #fbf8f1;
    border: 1px solid #eae0ce;
    transform: rotate(6deg);
    box-shadow: 0 18px 40px -22px rgba(32, 39, 31, 0.35);
}
.hp-art-card {
    position: absolute;
    top: 60px;
    left: calc(50% - 135px);
    width: 258px;
    height: 340px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #ece3d2;
    box-shadow: 0 26px 60px -28px rgba(32, 39, 31, 0.45);
    transform: rotate(-3deg);
    padding: 26px 24px;
}
.hp-art-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 7px;
    background: var(--sage);
    color: var(--green);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.hp-art-bar { border-radius: 4px; }
.hp-art-bar-title { height: 13px; background: #262e25; width: 78%; margin-top: 22px; }
.hp-art-bar-line { height: 9px; background: #e7e0d2; margin-top: 10px; }
.hp-art-checks { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.hp-art-check { display: flex; align-items: center; gap: 11px; }
.hp-art-check span:first-child {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hp-art-check span:last-child { height: 8px; border-radius: 4px; background: #dce4d7; flex: 1; }
.hp-art-badge {
    position: absolute;
    top: 44px;
    left: calc(50% + 96px);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--amber);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 30px -12px rgba(221, 154, 60, 0.7);
}

/* ---- trust strip ---- */
.hp-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.875rem 2.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--trust-green);
}
.hp-trust span.hp-trust-item { display: inline-flex; align-items: center; gap: 0.55rem; }
.hp-trust-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }

/* ---- home section rhythm: bands sit flush, sections carry the vertical space ---- */
.hp-section { padding: 5.5rem 0; }

/* ---- section heading block ---- */
.hp-head { max-width: 38rem; margin-bottom: 3.25rem; }
.hp-head .hp-lead { margin-top: 0.875rem; }

/* ---- card grids ---- */
.hp-cards-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.hp-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 1.9rem 1.75rem 2rem;
}

.hp-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--sage);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.4rem;
}

.hp-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 0.6rem;
}

.hp-card p { margin: 0; font-size: 0.97rem; line-height: 1.55; color: var(--body-soft); }

/* numbered process steps */
.hp-step-num {
    font-family: var(--serif);
    font-size: 3.25rem;
    font-weight: 500;
    line-height: 1;
    color: #d8c8a6;
    margin-bottom: 1.1rem;
}
.hp-card-dark {
    background: var(--green);
    border-color: var(--green);
    color: var(--paper);
}
.hp-card-dark h3 { color: var(--paper); }
.hp-card-dark p { color: var(--dark-body); }
.hp-card-dark .hp-step-num { color: var(--amber); }

/* process head: title left, "lieber persönlich?" link right */
.hp-process-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 3.25rem;
}
.hp-process-head > div { max-width: 35rem; }
.hp-aside-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.97rem;
    color: var(--green);
    text-decoration: none;
    padding-bottom: 0.375rem;
    border-bottom: 2px solid var(--amber);
    white-space: nowrap;
    transition: color 0.15s ease;
}
.hp-aside-link:hover { color: var(--green-dark); }

/* ---- stat band ---- */
.hp-stat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    text-align: center;
}
.hp-stat-value {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.65rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--green);
}
.hp-stat-label { font-size: 0.95rem; font-weight: 600; color: var(--trust-green); }
.hp-stat-source { font-size: 0.875rem; color: var(--faint); }

/* ---- Nadja band ---- */
.hp-nadja { display: flex; align-items: center; gap: 1.4rem; }
.hp-nadja-avatar {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--green);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.5rem;
}
.hp-nadja-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 0.375rem;
}
.hp-nadja p { font-size: 1rem; line-height: 1.5; color: var(--body); margin: 0; max-width: 56rem; }
.hp-nadja p strong { color: var(--ink); font-weight: 700; }

/* ---- closing CTA (dark) ---- */
.hp-closing { padding: 5.5rem 0 0.5rem; }
.hp-cta-dark {
    position: relative;
    background: var(--dark);
    border-radius: 28px;
    padding: 4rem 3.5rem;
    overflow: hidden;
}
.hp-cta-glow {
    position: absolute;
    top: -60px;
    right: -40px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(221, 154, 60, 0.32) 0%, rgba(221, 154, 60, 0) 70%);
    pointer-events: none;
}
.hp-cta-dark-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
}
.hp-cta-dark .hp-h2 { color: var(--paper); margin-bottom: 1rem; }
.hp-cta-dark p { font-size: 1.1rem; line-height: 1.55; color: var(--dark-body); margin: 0; max-width: 28rem; }
/* AFTER the p rule (same specificity): the eyebrow is a <p> too and would otherwise inherit the
   band's body-text size and margin:0 — which crammed it onto the title at 1.1rem. */
.hp-cta-dark .public-eyebrow { color: var(--amber); font-size: 0.78rem; line-height: 1.2; margin: 0 0 0.9rem; max-width: none; }
.hp-cta-dark-actions { display: flex; flex-direction: column; gap: 0.875rem; }
.hp-cta-dark .hp-btn-ghost { color: var(--paper); border-color: var(--dark-line); justify-content: space-between; }
/* Deliberate exception: on the dark band the ghost hover fills with the darker green, not sage. */
.hp-cta-dark .hp-btn-ghost:hover { background: #2a3227; border-color: #5c6753; }

/* ============================================================================
   Inner catalog-style pages — Leitfäden (/leitfaeden) + Beratung (/beratung).
   Static for now; the CTA band reuses the home's .hp-cta-dark.
   ========================================================================= */
.catpage { color: var(--ink); }

.page-h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.75rem, 2rem + 2vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin: 0 0 1.125rem;
}

.page-lead { font-size: 1.1875rem; line-height: 1.55; color: var(--body); max-width: 36rem; margin: 0; }

.cat-intro { padding: 1.25rem 0 2.5rem; }
.cat-list { padding: 0 0 4.5rem; }
.cat-cta { padding: 0 0 1.5rem; }

.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }

.cat-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 1.75rem 1.625rem;
    display: flex;
    flex-direction: column;
}

.cat-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 7px;
    background: var(--sage);
    color: var(--green);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.375rem;
}

.cat-card h3 {
    font-size: 1.3125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 0.5625rem;
}

.cat-card p { font-size: 0.97rem; line-height: 1.55; color: var(--body-soft); margin: 0 0 1.625rem; }

.cat-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding-top: 1.375rem;
    border-top: 1px solid var(--line);
}

.cat-price { font-family: var(--serif); font-weight: 600; font-size: 1.4375rem; color: var(--ink); line-height: 1.1; }

.cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0.7rem 1.2rem;
    border-radius: 11px;
    background: var(--green);
    color: var(--paper);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease, transform 0.12s ease;
}
.cat-btn:hover { background: var(--green-dark); transform: translateY(-1px); }
.cat-btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.05s; }
.cat-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* "coming soon" / contact aside card — same chrome + type anatomy as .cat-card */
.cat-soon {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 1.75rem 1.625rem;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}
/* spacing mirrors .cat-card exactly: badge 1.375rem (its own margin), title 0.5625rem */
.cat-soon-title { font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); margin: 0 0 0.5625rem; }
.cat-soon p { font-size: 0.95rem; line-height: 1.55; color: var(--muted); margin: 0; }
/* Aside-card foot: same divider/bottom-anchor as .cat-foot; actions sit right,
   mirroring the Details button position on the product/service cards. */
.cat-foot-end { justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
/* Compact ghost sibling of .cat-btn — secondary actions inside catalog cards. */
.cat-btn-ghost {
    background: transparent;
    color: var(--green);
    border: 1.5px solid var(--line-strong);
    padding: calc(0.7rem - 1.5px) calc(1.2rem - 1.5px);
}
.cat-btn-ghost:hover { background: var(--sage); border-color: var(--green); }
/* empty catalog: the contact card is the only tile — let it span the whole grid row */
.cat-soon-wide { grid-column: 1 / -1; max-width: 620px; }

/* ============================================================================
   Detail pages — Leitfaden (PDF) + Nebenkosten-Check (Beratung).
   Two-column (content + sticky buy/booking card); single column on phones.
   ========================================================================= */
.detail { color: var(--ink); padding-bottom: 1.5rem; }
/* shared not-found / unavailable state (guide+service detail, checkouts, legal, confirmation) */
.detail-missing { text-align: center; padding: 2.5rem 0 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.detail-missing .page-h1 { margin-bottom: 0; }
.detail-missing .page-lead { max-width: 34rem; margin: 0; }

.detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--trust-green);
    text-decoration: none;
    margin-bottom: 2.5rem;
    transition: color 0.15s ease;
}
.detail-back:hover { color: var(--green); }
.detail-back:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }

.detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: start; }

.detail-lead { font-size: 1.25rem; line-height: 1.5; color: var(--body-strong); font-weight: 500; margin: 0 0 0.875rem; }
.detail-desc { font-size: 1.0625rem; line-height: 1.6; color: var(--body-soft); margin: 0 0 2.75rem; max-width: 35rem; }

.detail-h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.625rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 1.5rem;
}

.detail-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; max-width: 35rem; }
.detail-check { display: flex; align-items: flex-start; gap: 13px; }
.detail-check-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--sage);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.detail-check-text { font-size: 1rem; line-height: 1.5; color: var(--body-strong); }

.detail-side { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 32px; align-self: start; }

.detail-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 22px;
    padding: 1.875rem 1.75rem;
    box-shadow: 0 18px 44px -30px rgba(32, 39, 31, 0.4);
}
.detail-card .cat-badge { margin-bottom: 1.375rem; }

.detail-info-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem 1.625rem; }
.detail-info-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.detail-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.detail-info-list li { font-size: 0.84rem; line-height: 1.5; color: var(--faint); padding-left: 1.125rem; position: relative; }
.detail-info-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.detail-info-list a { color: var(--green); font-weight: 600; }
.detail-info-list a:hover { color: var(--green-dark); }

.detail-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.detail-row-top { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
/* The 1rem/1.375rem rhythm frames the WHOLE spec block (below the price divider, above the buy
   button). Consecutive mid rows tighten to a list — without this, every extra row (Seiten,
   Sprache, Datei) paid the full block padding twice and the card fell apart vertically. */
.detail-row-mid { padding: 1rem 0 1.375rem; }
.detail-row-mid:not(:last-of-type) { padding-bottom: 0.625rem; }
.detail-row-mid + .detail-row-mid { padding-top: 0; }
.detail-row-label { font-size: 0.9375rem; color: var(--muted); }
.detail-row-price { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; color: var(--ink); line-height: 1.1; }
.detail-row-value { font-size: 1rem; font-weight: 600; color: var(--ink); }

.detail-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 1rem;
    border-radius: 13px;
    background: var(--green);
    color: var(--paper);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 8px 22px -10px rgba(45, 74, 56, 0.6);
    transition: background-color 0.15s ease, transform 0.12s ease;
}
.detail-buy:hover { background: var(--green-dark); transform: translateY(-1px); }
.detail-buy:active { transform: translateY(0) scale(0.985); transition-duration: 0.05s; }
.detail-buy:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.detail-note { font-size: 0.84rem; line-height: 1.5; color: var(--faint); margin: 1.125rem 0 0; text-align: center; }
.detail-note a { color: var(--green); font-weight: 600; }
.detail-note a:hover { color: var(--green-dark); }
/* §19 UStG Kleinunternehmer line — shared with .co-tax so it renders identically everywhere it appears. */
.detail-note-tax, .co-tax { font-size: 0.75rem; line-height: 1.5; color: var(--faint); text-align: center; margin: 0.75rem 0 0; }

/* ============================================================================
   Checkout (/leitfaeden/{slug}/checkout + /service-requests/{id}/checkout) — form + sticky order summary.
   The submit action is duplicated (.co-action-in inside the summary on desktop,
   .co-action-out at the page bottom on mobile) so each breakpoint matches its mockup.
   ========================================================================= */
.co { color: var(--ink); padding-bottom: 1.5rem; }
.co-h1 { font-size: clamp(2.5rem, 2rem + 1.5vw, 3rem); margin-bottom: 2.5rem; }

.co-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3.5rem; align-items: start; }
.co-form { grid-column: 1; grid-row: 1; }
.co-summary {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 32px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 22px;
    padding: 1.875rem 1.75rem;
    box-shadow: 0 18px 44px -30px rgba(32, 39, 31, 0.4);
}

.co-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber);
    margin: 0 0 1.125rem;
}

.co-item { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 1.375rem; border-bottom: 1px solid var(--line); }
.co-item-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--sage);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
}
.co-item-body { flex: 1; }
.co-item-title { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.co-item-sub { font-size: 0.84rem; color: var(--muted); }
.co-item-price { font-weight: 600; font-size: 0.97rem; white-space: nowrap; }

.co-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 1.375rem 0 1.5rem; }
.co-total-label { font-weight: 700; font-size: 1.0625rem; }
.co-total-price { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; color: var(--ink); }

.co-action-out { display: none; margin-top: 2rem; }
/* §312j Abs. 2 on mobile: the stacked layout scrolls the Bestellübersicht far above the bottom
   button — this line restates item + Gesamtpreis in räumlich-funktionalem Zusammenhang with it. */
.co-mini {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 0 0 0.875rem;
    padding: 0.875rem 1.125rem;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 13px;
    font-size: 0.875rem;
}
.co-mini-title { font-weight: 600; color: var(--body-strong); min-width: 0; }
.co-mini-price { font-weight: 700; color: var(--ink); white-space: nowrap; }

.co-label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--body-strong); margin-bottom: 8px; }
.co-input {
    width: 100%;
    padding: 15px 16px;
    border-radius: 13px;
    border: 1.5px solid var(--input-border);
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
}
.co-input:focus { outline: none; border-color: var(--green); }
.co-hint { font-size: 0.84rem; line-height: 1.5; color: var(--faint); margin: 8px 0 1.125rem; }

.co-methods { display: flex; flex-direction: column; gap: 14px; }
.co-method {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 16px;
    background: #fff;
    border: 2px solid var(--line);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font: inherit;
    color: inherit;
    transition: border-color 0.15s ease;
}
.co-method.selected { border-color: var(--green); }
.co-method:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.co-radio { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; }
.co-method.selected .co-radio { border-color: var(--green); }
.co-radio-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--green); }
.co-method-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--sage);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
}
.co-method-text { display: flex; flex-direction: column; }
.co-method-title { font-weight: 700; font-size: 1rem; }
.co-method-sub { font-size: 0.84rem; color: var(--muted); }

/* ---- shared form-field extensions (checkout + request) ---- */
.co-input::placeholder, .co-textarea::placeholder { color: #a8a99e; }
.co-textarea { line-height: 1.55; min-height: 8.5rem; resize: vertical; }

button.detail-buy { border: none; cursor: pointer; font: inherit; width: 100%; }
button.detail-buy:disabled { opacity: 0.6; cursor: not-allowed; }

.co-error {
    background: var(--error-bg);
    border: 1.5px solid var(--error-border);
    color: var(--error-ink);
    border-radius: 13px;
    padding: 14px 18px;
    font-size: 0.9rem;
    margin: 0 0 1.75rem;
}

/* Shared card chrome for form sections (fields, checkboxes) — matches .co-method's treatment
   so the whole checkout form reads as one consistent set of grouped cards. */
.co-card { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 24px 22px; }
.co-fields-card, .co-payment-card { margin-bottom: 1.75rem; }

.co-checks { display: flex; flex-direction: column; gap: 14px; margin: 1.75rem 0; }
.co-check { display: flex; align-items: flex-start; gap: 12px; }
.co-check label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; line-height: 1.45; color: var(--ink); cursor: pointer; }
.co-check input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--green); cursor: pointer; }
.co-check label a { color: var(--green); font-weight: 600; }
.co-check label a:hover { color: var(--green-dark); }

/* ============================================================================
   Beratung request (/beratung/{slug}/request) — form + co-summary/steps side column.
   ========================================================================= */
.rq-h1 { margin-bottom: 0.875rem; }
.rq-lead { margin-bottom: 2.75rem; }
.rq-field { margin-bottom: 18px; }
.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }

/* Request summary has no co-total row — give the in-card action the same 1.375rem
   breathing room below the divider that .co-total provides on the checkout card. */
.co .detail-side .co-action-in { padding-top: 1.375rem; }

/* "So läuft's" steps — light context inside the detail-info-card. */
.rq-steps { display: flex; flex-direction: column; gap: 1.125rem; }
/* Numeral and text: plain vertical centring, nothing else (owner call). */
.rq-step { display: flex; gap: 14px; align-items: center; }
.rq-step-num { flex-shrink: 0; font-family: var(--serif); font-size: 1.375rem; font-weight: 500; color: var(--amber); line-height: 1; }
.rq-step-text { font-size: 0.9rem; line-height: 1.5; color: var(--body-soft); }
.rq-step-text strong { color: var(--ink); font-weight: 700; }

/* ============================================================================
   Order-status page (/purchases/{id}) — branded "Bestellstatus" skin.
   Narrow single column: status pill, step timeline, download + summary cards.
   ========================================================================= */
.os { max-width: 620px; margin: 0 auto; color: var(--ink); padding-bottom: 1.5rem; }

.os-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 0.625rem; }
.os-h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.5rem); line-height: 1.06; letter-spacing: -0.018em; margin: 0; }

.os-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; margin-top: 8px; white-space: nowrap; }
.os-pill-dot { width: 7px; height: 7px; border-radius: 50%; }
.os-pill-pending { background: var(--pending-bg); border: 1px solid var(--pending-border); color: var(--pending-ink); }
.os-pill-pending .os-pill-dot { background: var(--amber); }
.os-pill-paid { background: var(--sage); border: 1px solid #c5d4c0; color: var(--green); }
.os-pill-paid .os-pill-dot { background: #3c8c5c; }

.os-sub { font-size: 0.97rem; color: var(--muted); margin: 0 0 2.125rem; }
.os-sub strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.os-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 22px;
    padding: 1.875rem;
    box-shadow: 0 18px 44px -30px rgba(32, 39, 31, 0.4);
    margin-bottom: 1.375rem;
}
.os-card .co-eyebrow { margin-bottom: 1.5rem; }

.os-steps { display: flex; flex-direction: column; gap: 1.375rem; }
.os-step { display: flex; gap: 15px; align-items: flex-start; }
.os-dot { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.os-dot-done { background: var(--green); color: var(--paper); }
.os-dot-active { background: var(--pending-bg); border: 2px solid var(--amber); }
.os-dot-active .os-dot-inner { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
.os-dot-pending { background: var(--band); }
.os-dot-pending .os-dot-inner { width: 9px; height: 9px; border-radius: 50%; background: #c9bca1; }
.os-step-title { font-weight: 700; font-size: 1rem; }
.os-step-text { font-size: 0.84rem; color: var(--muted); line-height: 1.5; }

.os-hint { margin-top: 1.625rem; background: var(--pending-bg); border: 1px solid var(--pending-border); border-radius: 14px; padding: 16px 18px; display: flex; align-items: flex-start; gap: 13px; }
.os-hint-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: #f4e1b6; color: #b97a14; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.os-hint-text { font-size: 0.875rem; line-height: 1.55; color: #6b5a33; margin: 0; }
.os-hint-text strong { color: #6b5a33; font-weight: 700; }

.os-resume { margin-top: 1.625rem; display: flex; flex-direction: column; gap: 0.875rem; }

.os-pill-cancelled { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-ink); }

.os-cancel { margin-top: 1.625rem; padding-top: 1.375rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.os-cancel-btn { border: 1.5px solid var(--line-strong); background: none; border-radius: 999px; padding: 9px 18px; font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--muted); cursor: pointer; }
/* Deliberate exception: destructive action - hover shifts toward the error triad, never sage. */
.os-cancel-btn:hover { border-color: var(--error-border); color: var(--error-ink); }
.os-cancel-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.os-file { display: flex; align-items: center; gap: 14px; }
.os-file-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 13px; background: var(--sage); color: var(--green); display: flex; align-items: center; justify-content: center; }
.os-file-icon-muted { background: var(--band); color: var(--faint); }
.os-file-name { font-weight: 700; font-size: 1.03rem; }
.os-file-meta { font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
.os-file-note { font-size: 0.8125rem; line-height: 1.5; color: var(--faint); margin: 0.875rem 0 0; text-align: center; }

.os-summary { margin-bottom: 0; }
.os-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.os-sum-label { font-size: 0.9rem; color: var(--muted); }
.os-sum-value { font-size: 0.95rem; font-weight: 600; text-align: right; }
.os-sum-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0.95rem 0 0.125rem; }
.os-sum-total-label { font-size: 0.97rem; font-weight: 700; }
.os-sum-total-value { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; }
.os-tax { font-size: 0.78rem; color: var(--faint); margin: 0.5rem 0 0; }

.os-closing { font-size: 0.875rem; line-height: 1.55; color: var(--faint); margin: 1.75rem 0 0; text-align: center; }

/* ============================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
    .hp-hero { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3.5rem; }
    /* art moves below the copy and centres */
    .hp-art { order: 2; }
    .hp-cta-dark-grid { grid-template-columns: 1fr; gap: 2rem; }
    .hp-cta-dark { padding: 2.75rem 2rem; }
    .hp-section { padding: 4rem 0; }
    .hp-closing { padding: 4rem 0 0.5rem; }
    .hp-head { margin-bottom: 2.5rem; }
}

@media (max-width: 760px) {
    .hp-bleed-inner { padding: 1.25rem 22px; }
    .hp-cards-3 { grid-template-columns: 1fr; gap: 1rem; }
    /* trust strip stacks left-aligned, drop the dot separators */
    .hp-trust { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
    .hp-trust .hp-trust-dot { display: none; }
    /* stat band stacks and centres */
    .hp-stat { flex-direction: column; gap: 0.4rem; }
    .hp-stat .hp-trust-dot { display: none; }
    .hp-stat-value { font-size: 1.85rem; }
    .hp-nadja { align-items: flex-start; gap: 1rem; }
    .hp-art { height: 368px; }
    .hp-art-back { top: 52px; left: calc(50% - 80px); width: 228px; height: 288px; transform: rotate(7deg); }
    .hp-art-card { top: 32px; left: calc(50% - 130px); width: 242px; height: 300px; padding: 22px 20px; }
    .hp-art-badge { top: 20px; left: auto; right: 26px; width: 54px; height: 54px; }
    .hp-process-head { margin-bottom: 2rem; }
    .hp-cta-dark { padding: 2.5rem 1.75rem; }
}

/* Phones: CTAs go full-width and stack (hero + closing band). */
@media (max-width: 640px) {
    .hp-hero .hp-cta-row { flex-direction: column; align-items: stretch; }
    .hp-cta-dark-actions, .hp-cta-row { width: 100%; }
    .hp-hero .hp-btn, .hp-cta-dark .hp-btn { width: 100%; }
    /* land ~43px (mockup) around 390–440px, scale down on tiny phones, cap at 45.6px */
    .hp-h1 { font-size: clamp(2.2rem, 11vw, 2.85rem); }
    .hp-social { flex-wrap: wrap; gap: 0.875rem; }
}

/* Inner catalog pages — stack on phones */
@media (max-width: 760px) {
    .cat-grid { grid-template-columns: 1fr; }
    .cat-intro { padding: 0.5rem 0 1.75rem; }
    .cat-list { padding-bottom: 3rem; }
}

/* Detail + checkout — collapse the two-column layout, un-stick the side card */
@media (max-width: 860px) {
    .detail-grid { grid-template-columns: 1fr; gap: 0; }
    .detail-side { position: static; margin-top: 2.5rem; }
    .detail-desc, .detail-checks { max-width: none; }

    .co-grid { grid-template-columns: 1fr; gap: 0; }
    .co-summary { grid-column: 1; grid-row: auto; position: static; margin-bottom: 2.25rem; }
    /* Request page: the side WRAPPER owns the stacked spacing — kill the detail-page top margin,
       let the flex gap (1.25rem) space summary→steps, and give the block the checkout's 2.25rem
       before the form (the summary's own margin would otherwise stack onto the gap). */
    .co .detail-side { position: static; margin: 0 0 2.25rem; }
    .co .detail-side .co-summary { margin-bottom: 0; }
    /* The in-card button is hidden on mobile — don't leave its divider dangling. */
    .co .detail-side .co-item { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
    .os-card { padding: 1.25rem; border-radius: 16px; }   /* order-status cards follow the checkout cards */
    .legal-copy, .confirmation-panel { padding: 1.5rem 1.25rem; }
    .co-form { grid-column: 1; grid-row: auto; }
    .co-action-in { display: none; }
    .co-action-out { display: block; }

    .co-row2 { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .detail-back { margin-bottom: 1.5rem; }
    .detail-card { padding: 1.625rem 1.5rem; border-radius: 20px; }

    .co-h1 { margin-bottom: 2rem; }
    .co-summary { padding: 1.5rem; border-radius: 20px; }
    .co-method { padding: 18px; gap: 14px; }
    .co-method-icon { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-btn, .hp-social-icons a, .cat-btn, .detail-buy, .os-cancel-btn, .co-method, .acc-btn { transition: none; transform: none; }
}

/* ============================================================================
   Account / auth pages (static-SSR login + password reset) — branded card on paper.
   ========================================================================= */
.acc { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--paper); background-image: radial-gradient(120% 80% at 50% -10%, var(--card) 0%, var(--paper) 55%); }
.acc-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--card-border); border-radius: 22px; padding: 40px 36px; box-shadow: 0 26px 60px -34px rgba(32, 39, 31, 0.45); }
.acc-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 26px; text-decoration: none; }
.acc-brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--green); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--paper); }
.acc-brand-name { font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: -0.01em; }
.acc-title { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 6px; }
.acc-sub { font-size: 14.5px; color: var(--muted); line-height: 1.5; margin: 0 0 24px; }
.acc-sub strong { color: var(--ink); font-weight: 600; }
.acc-field { margin-bottom: 16px; }
.acc-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--body-strong); margin-bottom: 7px; }
.acc-input { width: 100%; padding: 13px 15px; border-radius: 11px; border: 1.5px solid var(--input-border); background: #fff; font-family: inherit; font-size: 15px; color: var(--ink); }
.acc-input:focus { outline: none; border-color: var(--green); }
.acc-validation { display: block; font-size: 12.5px; color: var(--error-ink); margin-top: 5px; }
.acc-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--body); margin: 4px 0 20px; cursor: pointer; }
.acc-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 12px; background: var(--green); color: var(--paper); font-family: inherit; font-weight: 600; font-size: 15.5px; border: none; cursor: pointer; box-shadow: 0 8px 22px -10px rgba(45, 74, 56, 0.6); transition: background-color 0.15s ease, transform 0.12s ease; }
.acc-btn:hover { background: var(--green-dark); transform: translateY(-1px); }
.acc-error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-ink); font-size: 14px; line-height: 1.45; border-radius: 11px; padding: 12px 14px; margin-bottom: 18px; }
.acc-success { background: var(--sage); border: 1px solid #c5d4c0; color: var(--green); font-size: 14px; line-height: 1.45; border-radius: 11px; padding: 12px 14px; margin-bottom: 18px; }
.acc-link { font-size: 13.5px; font-weight: 600; color: var(--trust-green); text-decoration: none; }
.acc-link:hover { color: var(--green); }
.acc-foot { margin-top: 20px; text-align: center; }