/* Lora — self-hosted variable display serif (no third-party font calls).
   Replaced Fraunces (owner feedback: its J/F letterforms were hard to read);
   Lora keeps the premium serif feel with conventional, highly legible shapes.

   Only latin + latin-ext are subset here, so Ukrainian headings fall through the
   --font-display stack to Georgia, which carries Cyrillic on every target OS. Body text is
   unaffected (--font-sans is a system stack). Adding a lora-cyrillic.woff2 subset would put
   Ukrainian headings back on Lora — until then this is a deliberate fallback, not a gap. */
@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/lora-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: "Lora";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/lora-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;
}

:root {
    /* === Premium LIGHT wellness theme (2026) — token names kept, values light ===
       Vitality · wellness · health · prevention. Warm off-white canvas, deep vital
       green as the primary, warm gold accent, white cards with soft green-tinted
       shadows. Token-driven so the whole site follows; hardcoded surfaces mapped below. */

    /* Ink + neutrals — deep forest text on light */
    --color-ink: #16281f;
    --color-ink-soft: #3f5449;
    --color-muted: #6a7d72;

    /* Surfaces — white cards on a soft warm canvas */
    --color-canvas: #eef5ea;
    --color-surface: #ffffff;
    --color-surface-soft: #f6faf5;
    --color-surface-warm: #faf5e9;

    /* Feedback states — one palette for every alert/banner/status on the site.
       These were previously hardcoded per component, which is why the same
       "success" green appeared in three slightly different shades. */
    --color-success: #1c6b3a;
    --color-success-bg: #eaf6ee;
    --color-success-border: #bfe3cb;
    --color-danger: #a03030;
    --color-danger-bg: #fdeaea;
    --color-danger-border: #f0bcbc;
    --color-warn: #8a6410;
    --color-warn-bg: #fdf4e3;
    --color-warn-border: #ecd9a8;
    /* Shared focus ring — every interactive element uses this one value. */
    --focus-ring: 0 0 0 3px rgba(22, 160, 106, 0.28);

    /* Brand — deep vital green (readable on light) + a brighter fresh green for fills + warm gold */
    --color-green: #0f7d54;
    --color-green-bright: #16a06a;
    --color-green-deep: #0a5c3e;
    --color-green-pale: #e7f3ec;
    --color-gold: #9c7016;
    --color-gold-soft: #faf3e0;
    --color-border: #e3ece5;
    --color-border-strong: #cfe0d4;
    /* A boundary you can actually see. --color-border (1.09:1) and -strong (1.24:1) are
       tints for dividers between things that already read as separate; neither clears the
       3:1 that a card edge, a message bubble or a drop target needs to be found on its own.
       This one is 3.32:1 on the canvas and 3.79:1 on white — a muted sage that reads as an
       edge without shouting. Introduced for the feedback surfaces; reusable anywhere a real
       hairline is wanted. */
    --color-rule: #6f897c;

    /* Accent glow used by hero / premium visuals */
    --glow-green: 0 0 0 1px rgba(22, 160, 106, 0.14), 0 18px 50px -20px rgba(18, 140, 90, 0.28);

    /* Type */
    --font-display: "Lora", Georgia, "Times New Roman", serif;
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Radius scale — soft, premium */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Shadow scale — soft, green-tinted for a spa-like lift on light */
    --shadow-subtle: 0 1px 2px rgba(18, 70, 50, 0.05), 0 8px 22px rgba(18, 70, 50, 0.06);
    --shadow-soft: 0 4px 14px rgba(18, 70, 50, 0.07), 0 20px 44px rgba(18, 70, 50, 0.1);
    --shadow-lift: 0 8px 22px rgba(18, 70, 50, 0.09), 0 30px 60px rgba(18, 70, 50, 0.14);

    color-scheme: light;
    font-family: var(--font-sans);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html {
    /* The hero's decorative ::before sits partly off the left edge, which inflates the
       document's width on a narrow screen. Nothing scrolls sideways — the browser clamps
       it — but the *initial containing block* follows that inflated width, so a fixed
       full-bleed layer (the home page's ambient background) came out ~55 px wider than
       the viewport and its gradients were centred off-screen.
       `clip`, not `hidden`: hidden would make this a scroll container and break every
       position:sticky descendant. clip only trims the overflow. */
    overflow-x: clip;
}

body {
    margin: 0;
    /* One green field plus the wash. The warm-gold radial that used to sit here as well
       stacked with the home page's ambient gold and turned the lower left into a beige
       haze; gold now belongs to that layer alone. Inner pages keep this green so they
       do not drop to a flat colour. */
    background:
        radial-gradient(1100px 620px at 84% -12%, rgba(43, 179, 124, 0.15), transparent 62%),
        linear-gradient(170deg, #f7fbf4 0%, var(--color-canvas) 56%);
    background-repeat: no-repeat;
    background-color: var(--color-canvas);
    color: var(--color-ink);
    line-height: 1.62;
    font-size: 1.02rem;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
.brand-name {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 560;
    letter-spacing: 0;
    font-feature-settings: "ss01" 1;
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible {
    outline: 0.18rem solid var(--color-gold);
    outline-offset: 0.2rem;
}

/* Form controls had no focus style of their own — only the browser default, which a
   few components then removed outright. One visible ring for every field, everywhere. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--color-green);
    box-shadow: var(--focus-ring);
}

/* Checkbox/radio/file have no border to tint, so they keep a real outline. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="file"]:focus-visible {
    outline: 0.15rem solid var(--color-green);
    outline-offset: 0.15rem;
    box-shadow: none;
}

.site-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-footer,
.page-content,
.site-header-inner {
    /* Fluid side gutters: ~20px on mobile, growing to ~57px before the 1160px cap,
       so content never feels glued to the page edges. */
    width: min(1160px, calc(100% - clamp(2.5rem, 9vw, 9rem)));
    margin: 0 auto;
}

/* Full-width sticky bar; the content inside stays contained via .site-header-inner. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(150%) blur(16px);
    box-shadow: 0 0.5rem 1.4rem rgba(18, 70, 50, 0.06);
}

.site-header-inner {
    padding: 0.7rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-weight: 760;
}

.brand-mark {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
}

.brand-mark svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0.3rem 0.7rem rgba(16, 39, 31, 0.18));
}

.brand-text {
    min-width: 0;
    display: grid;
    line-height: 1.15;
}

.brand-name {
    font-size: 1rem;
    white-space: nowrap;
}

.brand-note {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
}

/* Language switcher — dropdown, ready to scale to many EU languages. */
.lang-switch {
    position: relative;
    flex: 0 0 auto;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    padding: 0.34rem 0.62rem;
    background: rgba(15, 90, 62, 0.05);
    color: var(--color-green-bright);
    font: inherit;
    font-weight: 800;
    font-size: 0.86rem;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.lang-btn:hover,
.lang-switch.is-open .lang-btn {
    border-color: var(--color-green);
    background: rgba(37, 215, 150, 0.12);
}

.lang-btn .lang-flag { font-size: 1rem; line-height: 1; }
.lang-btn .lang-caret { font-size: 0.58rem; color: var(--color-muted); transition: transform 160ms ease; }
.lang-switch.is-open .lang-btn .lang-caret { transform: rotate(180deg); }

.lang-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 40;
    width: 13rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-lift);
    padding: 0.4rem;
    display: grid;
    gap: 0.1rem;
}

.lang-menu[hidden] { display: none; }

.lang-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-ink);
    font-size: 0.92rem;
    font-weight: 700;
}

.lang-item .lang-flag { font-size: 1.1rem; }

a.lang-item:hover {
    background: var(--color-surface-soft);
    color: var(--color-green);
}

.lang-item.is-current {
    background: var(--color-green-pale);
    color: var(--color-green);
}

.lang-item.is-current::after {
    content: "✓";
    margin-left: auto;
    font-weight: 900;
}

.lang-item.is-soon {
    color: var(--color-muted);
    cursor: default;
}

.lang-item.is-soon em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lang-menu-note {
    margin: 0.25rem 0.35rem 0.1rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.site-nav {
    display: none;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    color: var(--color-ink-soft);
    font-size: 0.9rem;
    font-weight: 720;
}

.site-nav a,
.site-nav button {
    border: 0;
    border-radius: 999px;
    padding: 0.42rem 0.62rem;
    color: inherit;
    background: transparent;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.site-nav a:hover,
.site-nav button:hover {
    color: var(--color-ink);
    background: rgba(15, 90, 62, 0.06);
}

.site-nav .nav-strong {
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-green-bright), var(--color-green));
    box-shadow: 0 8px 20px -10px rgba(37, 215, 150, 0.6);
}

/* Must re-assert the green fill: the generic .site-nav a:hover background (a near-white
   wash) outranks the base .nav-strong rule, which made the register pill go white on
   hover. Mirror the site-wide green .button-primary:hover gradient instead. */
.site-nav .nav-strong:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #1ec08a, #0d7a54);
    box-shadow: 0 10px 24px -10px rgba(37, 215, 150, 0.7);
    transform: translateY(-1px);
}

.site-nav form {
    margin: 0;
}

/* Nav dropdown — groups the automated tools (Smart finder + AI Scanner) in one menu. */
.nav-group {
    position: relative;
}

.nav-group-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    border: 0;
    border-radius: 999px;
    padding: 0.42rem 0.62rem;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.nav-group-btn .nav-caret {
    font-size: 0.58rem;
    color: var(--color-muted);
    transition: transform 160ms ease;
}

.nav-group:hover .nav-group-btn,
.nav-group:focus-within .nav-group-btn,
.nav-group.is-open .nav-group-btn {
    color: var(--color-ink);
    background: rgba(15, 90, 62, 0.06);
}

.nav-group:hover .nav-group-btn .nav-caret,
.nav-group:focus-within .nav-group-btn .nav-caret,
.nav-group.is-open .nav-group-btn .nav-caret {
    transform: rotate(180deg);
}

.nav-group-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    z-index: 40;
    width: 17.5rem;
    padding: 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lift);
    display: grid;
    gap: 0.15rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.nav-group:hover .nav-group-menu,
.nav-group:focus-within .nav-group-menu,
.nav-group.is-open .nav-group-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-group-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-ink);
}

.nav-group-item:hover {
    background: rgba(37, 215, 150, 0.1);
}

.nav-group-ic {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(37, 215, 150, 0.12);
    font-size: 1.05rem;
}

.nav-group-txt {
    display: grid;
    line-height: 1.22;
}

.nav-group-txt strong {
    font-size: 0.92rem;
    font-weight: 760;
}

.nav-group-txt small {
    font-size: 0.74rem;
    color: var(--color-muted);
    font-weight: 600;
}

/* Burger button — mobile-only toggle for the whole nav panel. */
.nav-burger {
    display: none;
    margin-left: 0.45rem;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    cursor: pointer;
    box-shadow: var(--shadow-subtle);
}

.nav-burger-box {
    display: grid;
    gap: 4px;
}

.nav-burger-box i {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-ink);
    transition: transform 200ms ease, opacity 200ms ease;
}

.nav-burger[aria-expanded="true"] .nav-burger-box i:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-burger[aria-expanded="true"] .nav-burger-box i:nth-child(2) {
    opacity: 0;
}

.nav-burger[aria-expanded="true"] .nav-burger-box i:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


.page-content {
    flex: 1;
    padding: 1.2rem 0 3.5rem;
}

.hero-section {
    display: grid;
    gap: 1.35rem;
    align-items: center;
    padding: 1.65rem 0 2.2rem;
}

.hero-copy-block {
    max-width: 48rem;
}

.eyebrow {
    margin: 0 0 0.7rem;
    color: var(--color-gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-section h1,
.content-page h1 {
    margin: 0;
    max-width: 12ch;
    font-size: 2.65rem;
    /* 1.02 was the root cause of the collisions the owner saw on the ÁSZF: at 3.55rem on
       desktop that is 56.8px of type on a 57.9px line, and Hungarian puts an accent ABOVE
       the cap height (Á, Ő, Ű) and a descender below (gy, j). Two stacked lines of a
       Hungarian title therefore touched. English never showed it. 1.12 clears the accent
       without loosening the display type into looking airy — the marketing hero is the
       only place that wants a really tight line, and it has its own rule. */
    line-height: 1.12;
}

.hero-subtitle {
    margin: 1rem 0 0;
    color: var(--color-green-bright);
    font-size: 1.18rem;
    font-weight: 720;
}

.hero-intro {
    max-width: 43rem;
    margin: 1rem 0 0;
    color: var(--color-ink-soft);
    font-size: 1rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* ---------- Scanner-led hero ---------- */
.eyebrow-live {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-green);
    margin-right: 8px;
    vertical-align: 1px;
    animation: eyebrowLive 2.2s ease-in-out infinite;
}

@keyframes eyebrowLive {
    0%, 100% { box-shadow: 0 0 0 3px rgba(37, 215, 150, 0.22); }
    50% { box-shadow: 0 0 0 6px rgba(37, 215, 150, 0.04); }
}

.scan-loop {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.scan-loop-step {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.scan-loop-ic {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 1.2rem;
    background: linear-gradient(150deg, rgba(37, 215, 150, 0.22), rgba(37, 215, 150, 0.07));
    border: 1px solid rgba(37, 215, 150, 0.28);
}

.scan-loop-txt {
    display: grid;
    line-height: 1.25;
}

.scan-loop-txt strong {
    font-size: 0.99rem;
    font-weight: 750;
}

.scan-loop-txt span {
    font-size: 0.87rem;
    color: var(--color-muted);
}

.hero-micro {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    color: var(--color-muted);
    font-weight: 600;
}

.hero-hook {
    margin: 0.6rem 0 0;
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 600;
    font-style: italic;
    color: var(--color-green);
    letter-spacing: -0.01em;
}

/* ---------- Scanner preview "dashboard" (hero right panel) ---------- */
.scan-showcase {
    align-self: start;
}

.scan-preview {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(420px 180px at 82% -10%, rgba(43, 179, 124, 0.1), transparent 70%),
        #ffffff;
    box-shadow: var(--shadow-lift);
    padding: 1.15rem 1.2rem 1.2rem;
    overflow: hidden;
}

.scan-pv-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.scan-pv-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.scan-pv-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-green);
    animation: eyebrowLive 2.2s ease-in-out infinite;
}

.scan-pv-sample {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold);
    background: rgba(232, 183, 95, 0.14);
    border: 1px solid rgba(232, 183, 95, 0.32);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

.scan-pv-body {
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.scan-ring-wrap {
    flex: 0 0 auto;
    display: grid;
    justify-items: center;
    gap: 0.4rem;
}

.scan-ring {
    position: relative;
    width: 6.6rem;
    height: 6.6rem;
}

.scan-ring svg {
    width: 100%;
    height: 100%;
}

.scan-ring-bg {
    fill: none;
    stroke: rgba(15, 90, 62, 0.09);
    stroke-width: 8;
}

.scan-ring-fg {
    fill: none;
    stroke: var(--color-green);
    stroke: url(#scanGrad);
    stroke-width: 8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(37, 215, 150, 0.45));
}

/* Only the score lives INSIDE the ring — the label sits below it, so nothing
   ever touches the ring stroke (the old in-ring label used to overflow). */
.scan-ring-c {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1;
}

.scan-ring-c b {
    font-family: var(--font-display);
    font-size: 2.1rem;
    color: #15352a;
}

.scan-ring-pts {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.scan-ring-lbl {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    background: var(--color-green-pale);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    white-space: nowrap;
}

.scan-metrics {
    flex: 1;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.scan-metrics li {
    display: grid;
    grid-template-columns: 4.2rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
}

.sm-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-ink-soft);
}

.sm-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 90, 62, 0.1);
    overflow: hidden;
}

.sm-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.sm-bar.sm-ok i {
    background: linear-gradient(90deg, #14a877, var(--color-green));
}

.sm-bar.sm-watch i {
    background: linear-gradient(90deg, #b3841f, var(--color-gold));
}

.sm-tag {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sm-tag.sm-ok {
    color: var(--color-green-bright);
}

.sm-tag.sm-watch {
    color: var(--color-gold);
}

.scan-pv-trend {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.95rem 0 0.9rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: rgba(15, 90, 62, 0.04);
}

.tr-lbl {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-muted);
    white-space: nowrap;
}

.tr-spark {
    flex: 1;
    height: 24px;
}

.tr-spark polyline {
    fill: none;
    stroke: var(--color-green);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tr-arrow {
    color: var(--color-green-bright);
    font-weight: 900;
    font-size: 1.05rem;
}

.scan-pv-recos {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.scan-pv-recos-lbl {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--color-ink-soft);
    white-space: nowrap;
}

.scan-pv-thumbs {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.scan-pv-thumb {
    flex: 0 0 auto;
}

.scan-pv-thumb {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-border-strong);
    display: grid;
    place-items: center;
    padding: 3px;
}

.scan-pv-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* No mix-blend-mode here: on these tiny tiles it can glitch the first paint to
       an empty white box. The product photos are already on white, so a plain white
       tile shows them cleanly without blending. */
}

.scan-pv-illus {
    display: block;
    margin-top: 0.75rem;
    text-align: right;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(20, 45, 34, 0.4);
}

/* Hero scanner-card entrance — premium, subtle. Respects reduced-motion. */
@keyframes scanFadeIn { from { opacity: 0; } }
@keyframes scanFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes scanRingFill { from { stroke-dashoffset: 264; } }
@keyframes scanBarGrow { from { transform: scaleX(0); } }
@keyframes scanSparkDraw { from { stroke-dashoffset: 200; } }

.scan-preview {
    animation: scanFadeIn 0.7s ease both, scanFloat 7s ease-in-out 1.2s infinite;
}
.scan-ring-fg {
    animation: scanRingFill 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.sm-bar i {
    transform-origin: left center;
    animation: scanBarGrow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.tr-spark polyline {
    stroke-dasharray: 200;
    animation: scanSparkDraw 1.7s ease 0.7s both;
}

@media (prefers-reduced-motion: reduce) {
    .scan-preview,
    .scan-ring-fg,
    .sm-bar i,
    .tr-spark polyline,
    .eyebrow-live,
    .scan-pv-dot {
        animation: none !important;
    }
}

/* Consistent, gentle hover lift on the homepage content cards (premium feel). */
.feeling-card,
.how-step,
.value-card,
.faq-item {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.feeling-card:hover,
.how-step:hover,
.value-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
    border-color: var(--color-border-strong);
}

.scan-loop-ic,
.category-ic,
.how-step-ic,
.value-ic,
.feeling-ic {
    transition: transform 180ms ease;
}

.scan-loop-step:hover .scan-loop-ic,
.category-card:hover .category-ic,
.value-card:hover .value-ic {
    transform: scale(1.08) rotate(-2deg);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* inline-flex swallows the whitespace between a label and a trailing <span>→</span>,
       so "Csapattag regisztráció→" was printing with no gap at all. */
    gap: 0.42rem;
    min-height: 2.72rem;
    border-radius: 999px;
    padding: 0.64rem 0.95rem;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 800;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(189, 140, 53, 0.14);
}

.button-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #16a877, #0a6b4a);
    box-shadow: 0 12px 26px -14px rgba(20, 170, 118, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.button-primary:hover {
    background: linear-gradient(135deg, #1ec08a, #0d7a54);
}

.button-secondary {
    border: 1px solid var(--color-border-strong);
    color: var(--color-ink);
    background: rgba(15, 90, 62, 0.05);
}

.button-secondary:hover {
    border-color: var(--color-green);
    background: rgba(37, 215, 150, 0.1);
}

.button-danger {
    border: 1px solid rgba(224, 104, 88, 0.4);
    color: #c0392b;
    background: rgba(224, 104, 88, 0.1);
}

.preview-panel,
.pillar-card,
.compliance-note,
.error-panel {
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: var(--radius);
    background: rgba(248, 251, 247, 0.82);
    box-shadow: var(--shadow-soft);
}

.preview-panel {
    position: relative;
    overflow: hidden;
    padding: 1.3rem;
    min-height: 17rem;
}

.preview-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(18, 120, 84, 0.1), rgba(189, 140, 53, 0.12));
    pointer-events: none;
}

.preview-panel > * {
    position: relative;
}

.status-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 0 0.35rem rgba(189, 140, 53, 0.14);
}

.panel-label,
.pillar-kicker {
    margin: 0.75rem 0 0.2rem;
    color: var(--color-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.preview-panel strong {
    display: block;
    color: var(--color-green);
    font-size: 1.35rem;
}

.preview-panel p:last-child {
    margin-bottom: 0;
    color: var(--color-ink-soft);
}

.hero-showcase {
    position: relative;
    display: grid;
    gap: 1.1rem;
    padding: 1.05rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #ffffff, var(--color-surface-soft));
    box-shadow: var(--shadow-soft);
}

.hero-showcase-head {
    display: grid;
    gap: 0.3rem;
}

.hero-showcase-head strong {
    font-family: var(--font-display);
    font-size: 1.42rem;
    font-weight: 560;
    color: var(--color-green);
    line-height: 1.05;
}

.hero-showcase-head p:last-child {
    margin: 0.2rem 0 0;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.hero-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.hero-showcase-item {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-soft);
}

/* Product photos are shot on white — give them a light tile so they read on the
   dark card, and contain (not cover) so the product isn't cropped. */
.hero-showcase-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #ffffff;
    padding: 0.55rem;
}

.hero-showcase-item figcaption {
    padding: 0.5rem 0.65rem;
    color: var(--color-green);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-showcase-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-green);
    font-weight: 750;
    text-decoration: none;
    transition: gap 160ms ease, color 160ms ease;
}

.hero-showcase-link span {
    transition: transform 160ms ease;
}

.hero-showcase-link:hover {
    color: var(--color-gold);
}

.hero-showcase-link:hover span {
    transform: translateX(0.2rem);
}

.trust-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    margin: 0 0 3rem;
}

.trust-strip span {
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: 999px;
    padding: 0.62rem 0.78rem;
    color: var(--color-green);
    background: rgba(248, 251, 247, 0.72);
    font-size: 0.88rem;
    font-weight: 760;
    text-align: center;
}

.trust-strip span::before {
    content: "";
    display: inline-block;
    width: 0.48rem;
    height: 0.48rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    background: var(--color-gold);
    vertical-align: 0.08rem;
}

/* Emotional welcome band — a calm, human first-impression moment after the hero. */
.home-welcome {
    margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}

.home-welcome-inner {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 50% -20%, rgba(205, 234, 220, 0.5), transparent 60%),
        linear-gradient(160deg, rgba(231, 243, 236, 0.96), rgba(250, 245, 233, 0.85));
    box-shadow: var(--shadow-soft);
    padding: clamp(1.6rem, 4vw, 3rem);
    text-align: center;
}

.home-welcome h2 {
    font-family: var(--font-display);
    color: var(--color-green);
    font-size: clamp(1.85rem, 4.2vw, 2.7rem);
    line-height: 1.08;
    margin: 0.35rem 0 0.7rem;
}

.home-welcome-lead {
    max-width: 46rem;
    margin: 0 auto;
    color: var(--color-ink-soft);
    font-size: 1.06rem;
    line-height: 1.66;
}

.welcome-feelings {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.9rem 0 1.5rem;
    text-align: left;
}

.feeling-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: rgba(248, 251, 247, 0.74);
    padding: 1.15rem 1.25rem;
}

.feeling-ic {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 0.45rem;
}

.feeling-card h3 {
    margin: 0 0 0.3rem;
    color: var(--color-green);
    font-size: 1.06rem;
}

.feeling-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.home-welcome-more {
    max-width: 42rem;
    margin: 0 auto 1.4rem;
    color: var(--color-ink-soft);
    font-style: italic;
}

@media (min-width: 720px) {
    .welcome-feelings {
        grid-template-columns: repeat(3, 1fr);
    }
}

.section-block {
    padding: 1.85rem 0;
}

.section-heading {
    max-width: 43rem;
    margin-bottom: 1.35rem;
}

.section-heading h2,
.feature-row h2,
.compliance-note h2 {
    margin: 0;
    color: var(--color-green);
    font-size: 1.68rem;
    line-height: 1.12;
}

.section-heading p,
.feature-row p,
.compliance-note p {
    color: var(--color-muted);
}

.pillar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

.pillar-card {
    min-height: 11.5rem;
    padding: 1rem;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.pillar-card:hover {
    transform: translateY(-0.12rem);
    box-shadow: var(--shadow-soft);
}

.pillar-card h3 {
    margin: 0.2rem 0 0.55rem;
    color: var(--color-green);
    font-size: 1.25rem;
}

.pillar-card p:last-child {
    margin: 0;
    color: var(--color-muted);
}

.feature-section {
    display: grid;
    gap: 0.95rem;
}

.feature-row {
    display: grid;
    gap: 0.65rem;
    border-top: 1px solid rgba(18, 120, 84, 0.18);
    padding: 1.2rem 0;
}

.feature-row p {
    margin: 0;
}

.feature-row-alt {
    border-color: rgba(189, 140, 53, 0.28);
}

/* ---------- Homepage: how it works ---------- */
.how-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.how-step {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 1.4rem;
    box-shadow: var(--shadow-subtle);
}

.how-step-n {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: rgba(18, 120, 84, 0.45);
    font-weight: 600;
}

.how-step-ic {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius);
    background: linear-gradient(150deg, rgba(37, 215, 150, 0.24), rgba(37, 215, 150, 0.08));
    border: 1px solid rgba(37, 215, 150, 0.28);
    font-size: 1.5rem;
    margin-bottom: 0.7rem;
}

.how-step h3 {
    margin: 0 0 0.35rem;
    color: var(--color-green);
    font-size: 1.2rem;
}

.how-step p {
    margin: 0;
    color: var(--color-muted);
}

/* ---------- Homepage: category cards → finder ---------- */
.category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.category-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: var(--color-green);
    font-weight: 750;
    box-shadow: var(--shadow-subtle);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.category-card:hover {
    transform: translateY(-2px);
    border-color: rgba(29, 138, 97, 0.4);
    box-shadow: var(--shadow-soft);
}

.category-ic {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(150deg, rgba(37, 215, 150, 0.24), rgba(37, 215, 150, 0.08));
    border: 1px solid rgba(37, 215, 150, 0.28);
    font-size: 1.2rem;
    flex: 0 0 auto;
}

.category-label {
    flex: 1;
    min-width: 0;
}

.category-arrow {
    color: var(--color-gold);
    font-weight: 800;
    transition: transform 160ms ease;
}

.category-card:hover .category-arrow {
    transform: translateX(0.25rem);
}

/* ---------- Homepage: value props ---------- */
.value-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.value-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 1.3rem;
    box-shadow: var(--shadow-subtle);
}

.value-ic {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--radius);
    background: linear-gradient(150deg, rgba(37, 215, 150, 0.24), rgba(37, 215, 150, 0.08));
    border: 1px solid rgba(37, 215, 150, 0.28);
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
}

.value-card h3 {
    margin: 0 0 0.35rem;
    color: var(--color-green);
    font-size: 1.15rem;
}

.value-card p {
    margin: 0;
    color: var(--color-muted);
}

/* ---------- Homepage: FAQ ---------- */
.faq-list {
    display: grid;
    gap: 0.7rem;
}

.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-subtle);
    transition: border-color 160ms ease;
}

.faq-item[open] {
    border-color: rgba(29, 138, 97, 0.28);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    color: var(--color-green);
    font-weight: 800;
    cursor: pointer;
    border-radius: var(--radius);
}

.faq-item summary::after {
    content: "+";
    color: var(--color-gold);
    font-weight: 800;
    font-size: 1.3rem;
    line-height: 1;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item summary:hover {
    background: var(--color-surface-soft);
}

.faq-item p {
    margin: 0;
    padding: 0 1.15rem 1.1rem;
    color: var(--color-ink-soft);
}

/* ---------- Homepage: CTA band ---------- */
.home-cta {
    width: min(1160px, calc(100% - clamp(2.5rem, 9vw, 9rem)));
    margin: 3rem auto 0;
}

.home-cta-inner {
    border-radius: var(--radius-xl);
    padding: clamp(1.6rem, 5vw, 3rem);
    text-align: center;
    background:
        radial-gradient(680px 240px at 50% -12%, rgba(43, 179, 124, 0.14), transparent 70%),
        linear-gradient(135deg, #f1f8f2, #e7f3ec);
    border: 1px solid var(--color-border-strong);
    color: var(--color-ink);
    box-shadow: var(--shadow-soft);
}

.home-cta-inner .eyebrow {
    color: var(--color-gold);
}

.home-cta-inner h2 {
    margin: 0 0 0.5rem;
    color: var(--color-ink);
    font-size: clamp(1.7rem, 4vw, 2.4rem);
}

.home-cta-inner p {
    margin: 0 auto 1.3rem;
    max-width: 40rem;
    color: var(--color-ink-soft);
}

.home-cta-inner .button-primary {
    background: var(--color-surface);
    color: var(--color-green);
}

.compliance-note {
    margin-top: 2rem;
    padding: 1.05rem;
    background: linear-gradient(135deg, rgba(250, 245, 233, 0.95), rgba(248, 251, 247, 0.9));
}

.compliance-note p:last-child {
    margin-bottom: 0;
}

.error-panel {
    max-width: 42rem;
    margin: 4rem 0;
    padding: 2rem;
}

.content-page {
    max-width: 48rem;
    padding: 2.35rem 0 3.5rem;
}

.content-page h1 {
    max-width: 14ch;
}

.legal-page,
.member-page {
    max-width: 68rem;
}

.legal-page h2,
.member-page h2 {
    color: var(--color-green);
}

.legal-page h3 {
    color: var(--color-green);
    font-size: 1.05rem;
    margin: 1.25rem 0 0.4rem;
}

.legal-page p,
.legal-page li {
    line-height: 1.62;
}

.legal-meta {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin-top: -0.3rem;
}

.legal-disclaimer {
    margin-top: 1.7rem;
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--color-gold);
    background: var(--color-surface-soft);
    border-radius: 8px;
    color: var(--color-ink-soft);
    font-size: 0.9rem;
}

.legal-data-list {
    display: grid;
    gap: 0.5rem;
    margin: 0.6rem 0 1.2rem;
    max-width: 44rem;
}

.legal-data-list > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.1rem 1rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}

.legal-data-list dt {
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.legal-data-list dd {
    margin: 0;
    color: var(--color-ink);
    font-weight: 650;
}

.legal-todo {
    color: #a97e1b;
    font-weight: 700;
    font-size: 0.85rem;
}

.legal-related {
    margin-top: 1.5rem;
    color: var(--color-muted);
}

.legal-related a {
    color: var(--color-green);
    font-weight: 700;
}

@media (min-width: 560px) {
    .legal-data-list > div {
        grid-template-columns: 14rem minmax(0, 1fr);
        align-items: baseline;
    }
}

.member-shell {
    display: grid;
    gap: 1rem;
}

.member-program {
    display: grid;
    gap: 1rem;
}

.member-hero-card,
.member-progress-card,
.member-week-panel,
.member-compliance-note {
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: var(--radius);
    background: rgba(248, 251, 247, 0.88);
    box-shadow: var(--shadow-subtle);
}

.member-hero-card {
    display: grid;
    gap: 1rem;
    align-items: end;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    background:
        linear-gradient(135deg, rgba(231, 243, 236, 0.98), rgba(250, 245, 233, 0.9)),
        #ffffff;
}

.member-hero-card h2,
.member-progress-card h2,
.member-week-head h2,
.member-compliance-note h2 {
    margin: 0;
    color: var(--color-green);
    line-height: 1.1;
}

.member-hero-card p,
.member-week-head p,
.member-compliance-note p {
    color: var(--color-ink-soft);
}

.member-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.member-progress-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
}

.member-progress-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
}

.member-progress-percent {
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    border: 0.42rem solid rgba(18, 120, 84, 0.16);
    border-radius: 50%;
    color: var(--color-green);
    background: linear-gradient(135deg, #ffffff, rgba(231, 243, 236, 0.82));
    font-size: 1.05rem;
    font-weight: 950;
}

.member-progress-summary h2,
.member-progress-summary p {
    margin: 0;
}

.member-save-status {
    font-size: 0.9rem;
}

.member-save-status[data-tone="success"] {
    color: var(--color-green);
}

.member-save-status[data-tone="warning"] {
    color: #a97e1b;
}

.member-progress-track {
    overflow: hidden;
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(18, 120, 84, 0.11);
}

.member-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-green), var(--color-gold));
    transition: width 180ms ease;
}

.member-week-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.member-week-tab {
    display: grid;
    gap: 0.18rem;
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: var(--radius);
    padding: 0.82rem;
    color: var(--color-green);
    background: rgba(248, 251, 247, 0.82);
    cursor: pointer;
    font: inherit;
    font-weight: 850;
    text-align: left;
}

.member-week-tab span,
.member-week-tab strong {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.member-week-tab.is-active {
    border-color: rgba(189, 140, 53, 0.44);
    background: linear-gradient(135deg, rgba(250, 245, 233, 0.96), rgba(231, 243, 236, 0.92));
    box-shadow: var(--shadow-subtle);
}

.member-week-panel {
    display: none;
    padding: clamp(1rem, 3vw, 1.35rem);
}

.member-week-panel.is-active {
    display: grid;
    gap: 1.25rem;
}

.member-week-head {
    display: grid;
    gap: 0.65rem;
}

.member-week-head p {
    margin: 0;
}

.member-week-focus {
    display: inline-flex;
    align-items: center;
    align-self: start;
    width: fit-content;
    margin: 0.1rem 0 0.2rem;
    border-radius: 999px;
    padding: 0.34rem 0.8rem;
    background: rgba(192, 137, 47, 0.12);
    color: #a97e1b;
    font-size: 0.82rem;
    font-weight: 800;
}

.member-week-milestone {
    margin-top: 0.4rem;
    border: 1px solid rgba(18, 120, 84, 0.18);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, rgba(231, 243, 236, 0.7), rgba(250, 245, 233, 0.7));
    color: var(--color-green);
    font-weight: 760;
    line-height: 1.5;
}

.member-mentor-tip {
    display: grid;
    gap: 0.28rem;
    border-left: 0.28rem solid var(--color-gold);
    padding: 0.72rem 0.85rem;
    background: rgba(250, 245, 233, 0.74);
    color: var(--color-ink-soft);
}

.member-mentor-tip strong {
    color: var(--color-green);
}

/* Energetic "why now" nudge — visually distinct from the gold mentor tip. */
.member-week-nudge {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    border-radius: var(--radius);
    padding: 0.95rem 1.1rem;
    background: linear-gradient(135deg, var(--color-green-deep), var(--color-green));
    color: #ffffff;
    box-shadow: 0 0.7rem 1.6rem rgba(16, 59, 49, 0.18);
}

.member-week-nudge-ic {
    font-size: 1.45rem;
    line-height: 1;
}

.member-week-nudge p {
    margin: 0;
    font-weight: 780;
    line-height: 1.45;
}

.member-section-list {
    display: grid;
    gap: 0.9rem;
}

.member-training-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-subtle);
    transition: box-shadow 160ms ease, border-color 160ms ease;
}

.member-training-section[open] {
    border-color: rgba(18, 120, 84, 0.28);
    box-shadow: var(--shadow-soft);
}

.member-training-section summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 1rem 1.05rem;
    color: var(--color-green);
    cursor: pointer;
    border-radius: var(--radius);
}

.member-training-section summary:hover {
    background: var(--color-surface-soft);
}

.member-training-section summary strong,
.member-training-section summary small {
    display: block;
}

.member-training-section summary strong {
    font-size: 1.05rem;
    font-weight: 850;
    letter-spacing: -0.01em;
}

.member-training-section summary small {
    margin-top: 0.25rem;
    color: var(--color-muted);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.45;
}

.member-section-count {
    border-radius: 999px;
    padding: 0.34rem 0.58rem;
    background: var(--color-surface);
    color: var(--color-green);
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.member-checklist {
    display: grid;
    gap: 0.6rem;
    padding: 0 1.05rem 1.05rem;
}

.member-check-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 0.95rem;
    background: var(--color-surface-soft);
    color: var(--color-ink-soft);
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.member-check-item:hover {
    border-color: rgba(18, 120, 84, 0.32);
    background: var(--color-surface);
}

.member-check-item input {
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.05rem;
    accent-color: var(--color-green);
    cursor: pointer;
}

.member-check-item.is-done {
    border-color: rgba(18, 120, 84, 0.2);
    color: var(--color-muted);
    background: rgba(231, 243, 236, 0.52);
}

.member-check-item.is-done span {
    text-decoration: line-through;
    text-decoration-color: rgba(18, 120, 84, 0.45);
}

.member-compliance-note {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(250, 245, 233, 0.94), rgba(248, 251, 247, 0.9));
}

.admin-page {
    max-width: 68rem;
    padding: 2.75rem 0 4rem;
}

/* Data table base. This used to live only in business.css, which the layout links
   ONLY for the tools page — so the three admin tables that actually use it rendered
   with default browser table styling. It lives here now (app.css is always linked).
   The wrapper scrolls horizontally instead of clipping: these tables are 6-8 columns
   wide, so on a narrow screen the far columns must stay reachable, not disappear. */
.price-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
}

.price-table th,
.price-table td {
    padding: 0.65rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.price-table th {
    background: var(--color-surface-soft);
    color: var(--color-green);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* td.r was used in the markup but only th.r was ever defined — the cells never
   right-aligned under their own header. */
.price-table th.r,
.price-table td.r { text-align: right; }
.price-table tbody tr:last-child td { border-bottom: 0; }

/* Below this width the wrapper scrolls rather than squashing 6-8 columns. */
.admin-page .price-table { min-width: 46rem; }

/* Admin access table — clearer separation so each member's info, approval controls
   and quota inputs read as distinct groups instead of blurring together. */
.admin-page .price-table td {
    vertical-align: top;              /* short cells align to the top of a tall Tag cell */
    padding: 0.9rem 1rem;
}
.admin-page .price-table tbody tr:not(.admin-group-row) + tr:not(.admin-group-row) td {
    border-top: 1px solid var(--color-border);
}
.admin-page .price-table tbody tr:not(.admin-group-row):hover td {
    background: var(--color-surface-soft);
}
.admin-page .price-table td:first-child {
    border-left: 3px solid transparent;   /* status accent stripe on the row */
}
.admin-page .price-table tr.admin-row-pending td:first-child { border-left-color: #e0bf62; }
.admin-page .price-table tr.admin-row-rejected td:first-child { border-left-color: #e0b4ac; }
.admin-page .price-table th { vertical-align: bottom; }
/* quota input group: keep "used / [limit]" on one tidy line */
.admin-page .price-table input[type="number"] { vertical-align: middle; }
.admin-page .price-table td form { margin-top: 0.15rem; }

/* The two list pages open their table right under the intro copy. */
.admin-page .price-wrap { margin-top: 1.1rem; }

/* ============================================================
   Admin console controls + the few shared helpers the views need.
   These replace ~48 inline style="" attributes. Three different reds had
   been pasted inline for destructive buttons (#8a3e2f/#e0b4ac, #a03030,
   plus .button-danger's own #c0392b), and the quota fields carried inline
   widths while the .quota-input rule they were written for went unused.
   ============================================================ */

/* One destructive button, everywhere. */
.button-danger {
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger);
    background: var(--color-danger-bg);
}

.button-danger:hover,
.button-danger:focus-visible {
    border-color: var(--color-danger);
}

/* Dense rows (inside table cells) need smaller buttons. */
.button-sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.button-xs { padding: 0.25rem 0.6rem; font-size: 0.78rem; }

.text-muted { color: var(--color-muted); }
.text-gold { color: var(--color-gold); }
.nowrap { white-space: nowrap; }
.form-inline { display: inline; }

.admin-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.admin-subhead { margin: 1.2rem 0 0.4rem; font-size: 1.05rem; }

/* Access table: approval buttons + the full-erasure form under "Mentés". */
.approval-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.4rem; }
.member-delete-form { margin-top: 0.45rem; }

/* Quota fields — .quota-input supplies the border/background/focus ring.
   Doubled up on purpose: .quota-input sets its own width further down the file,
   and at equal specificity the later rule would win and flatten these. */
.quota-input.quota-input-lg { width: 5.5rem; }
.quota-input.quota-input-sm { width: 4.6rem; }
.quota-input.quota-input-xs { width: 4.2rem; }

/* Report archive: the checkbox bulk bar. */
.rep-bulkbar {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 0.4rem 0 0;
    padding: 0.7rem 0.9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.rep-selinfo { font-size: 0.88rem; color: var(--color-muted); }

/* Riport-letöltés csomagonként (40-esével). Sok riportnál ez tíz-húsz gomb is lehet,
   ezért kicsik és tördelnek — nem tolhatják szét a művelet-sort. */
.rep-batch-lbl { font-size: 0.9rem; font-weight: 700; align-self: center; }
.rep-batch {
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
/* Az utolsó csomag rendszerint kisebb — a jelölés megmondja, hogy ez nem hiány. */
.rep-batch-rest {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rep-batch-hint { margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.5; }
.rep-check-col { width: 2.2rem; }

/* Activity import: the one option that can take a member's quota away. */
.ai-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.7rem 0 0.2rem;
    font-weight: 650;
    cursor: pointer;
}

.ai-option input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-danger);
    cursor: pointer;
}

/* "Above checking" flag + the last import's verdict, on the access table. */
.exempt-flag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 650; }
.exempt-flag input[type="checkbox"] { width: 0.95rem; height: 0.95rem; accent-color: var(--color-green); }
.activity-badge { display: inline-block; padding: 0.15rem 0.45rem; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 800; }
.activity-badge.is-active { background: var(--color-success-bg); color: var(--color-success); }
.activity-badge.is-inactive { background: var(--color-danger-bg); color: var(--color-danger); }

/* A one-line confirmation inside a result panel. */
.result-line { margin: 0; font-weight: 700; }
.mailtest-result.is-compact { margin: 0.6rem 0; }

.unsub-form { margin-top: 1.2rem; }
.unsub-links { margin-top: 1.4rem; }

/* Header logo + the admin-only "(hidden)" hint on the Education nav item. */
.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.nav-hidden-badge { font-size: 0.68rem; font-weight: 700; opacity: 0.7; }

/* ---------- Admin · backups ----------
   Lifted out of a 33-line <style> block inside admin/backups.php, where the
   alert palette was hardcoded a second time. Now token-driven. */
.bk-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }

.bk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: 0.85rem;
    font-weight: 600;
}

.bk-chip.is-ok { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.bk-chip.is-warn { background: var(--color-warn-bg); border-color: var(--color-warn-border); color: var(--color-warn); }
.bk-chip.is-err { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }

.bk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.bk-card {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.bk-card-hd { display: flex; align-items: center; gap: 0.7rem; }
.bk-card-hd h2 { margin: 0; font-size: 1.15rem; }
.bk-ic { font-size: 1.6rem; }
.bk-freq { font-size: 0.8rem; color: var(--color-muted); }

.bk-state {
    margin-left: auto;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.bk-state.is-ok { background: var(--color-success-bg); color: var(--color-success); }
.bk-state.is-warn { background: var(--color-warn-bg); color: var(--color-warn); }
.bk-state.is-err { background: var(--color-danger-bg); color: var(--color-danger); }
.bk-state.is-none { background: var(--color-surface-soft); color: var(--color-muted); }

.bk-blurb { margin: 0.5rem 0 0.6rem; font-size: 0.88rem; color: var(--color-muted); }
.bk-facts { display: grid; gap: 0.3rem; margin: 0 0 0.6rem; font-size: 0.9rem; }
.bk-facts div { display: flex; gap: 0.6rem; align-items: baseline; }

.bk-facts dt {
    flex: 0 0 9.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}

.bk-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.bk-file { font-size: 0.8rem; }
.bk-err { padding: 0.5rem 0.7rem; border-radius: 8px; background: var(--color-danger-bg); font-size: 0.85rem; }
.bk-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.4rem; }
.bk-actions .button { padding: 0.45rem 0.9rem; font-size: 0.9rem; }
.bk-note { font-size: 0.83rem; color: var(--color-muted); }
.bk-note-gap { margin-top: 0.6rem; }
/* Az önjáró mentés doboza: ez a lap egyetlen MEGNYUGTATÓ mondata, ezért nem tompa
   szürke, mint a többi jegyzet — a cron-hibakeresés fölött kell látszania. */
.bk-auto { padding: 0.7rem 0.85rem; border-radius: 10px; font-size: 0.86rem;
  background: var(--color-success-bg); border: 1px solid var(--color-success-border);
  color: var(--color-text); }
.bk-auto p { margin: 0; }
/* A próbagomb a magyarázat ALATT, egy sorban a rövid leírásával. */
.bk-auto-test { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-top: 0.6rem; }
.bk-auto-test .text-muted { font-size: 0.8rem; }
.bk-disk-table { margin: 0.6rem 0; font-size: 0.86rem; }
.bk-disk-table td { vertical-align: top; }
/* .bk-set-block h3 is (0,1,1); a bare .bk-disk-h (0,1,0) would silently lose. Qualify. */
.bk-set-block h3.bk-disk-h { margin-top: 1.2rem; }
.bk-junk { color: var(--color-danger); white-space: nowrap; }
.bk-checks { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.bk-check {
    display: flex;
    gap: 0.55rem;
    align-items: baseline;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 0.88rem;
}
.bk-check.is-warn { border-color: var(--color-warn-border); background: var(--color-warn-bg); }
.bk-check.is-err { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.bk-check-ic { flex: 0 0 auto; }
.bk-check-tx { display: flex; flex-direction: column; gap: 0.1rem; }
.bk-settings { margin-top: 1.2rem; }
.bk-settings > summary { cursor: pointer; padding: 0.6rem 0; font-weight: 700; font-size: 1.05rem; }

.bk-set-block {
    margin: 0.7rem 0;
    padding: 1rem 1.2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.bk-set-block h3 { margin: 0.1rem 0 0.5rem; font-size: 1rem; }
/* The one-time refresh token: framed so it can't be missed before it's gone. */
.bk-set-block.is-token { border: 2px solid var(--color-gold); }
.bk-token { white-space: pre-wrap; word-break: break-all; }
.bk-restore-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.6rem; }
.bk-inline-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.bk-folder-input { flex: 1; min-width: 16rem; padding: 0.45rem 0.6rem; }

@media (max-width: 560px) {
    .bk-facts dt { flex-basis: 7.5rem; }
}

.admin-approval-grid,
.admin-user-card-list,
.admin-compact-list {
    display: grid;
    gap: 1rem;
}

.admin-panel,
.admin-user-card {
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: var(--radius);
    background: rgba(248, 251, 247, 0.88);
    box-shadow: var(--shadow-subtle);
}

.admin-panel {
    padding: clamp(1rem, 3vw, 1.2rem);
}

.admin-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    margin-bottom: 0.9rem;
}

.admin-panel-head h2 {
    margin: 0;
    color: var(--color-green);
}

.admin-panel-head span {
    display: grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: rgba(231, 243, 236, 0.8);
    color: var(--color-green);
    font-weight: 900;
}

.admin-user-card {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
}

.admin-user-card h3,
.admin-user-card p {
    margin: 0;
}

.admin-user-card h3 {
    color: var(--color-green);
}

.admin-user-card p,
.admin-empty {
    color: var(--color-muted);
}

.admin-meta-list {
    display: grid;
    gap: 0.55rem;
    margin: 0.85rem 0 0;
}

.admin-meta-list div {
    display: grid;
    gap: 0.1rem;
}

.admin-meta-list dt {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-meta-list dd {
    margin: 0;
    color: var(--color-ink-soft);
}

.admin-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.admin-compact-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    border-top: 1px solid rgba(18, 120, 84, 0.1);
    padding-top: 0.72rem;
}

.admin-compact-main {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.admin-compact-list .inline-form {
    margin: 0;
    flex: 0 0 auto;
}

.admin-compact-list .button {
    padding: 0.42rem 0.85rem;
    font-size: 0.84rem;
}

.admin-quota-hint {
    margin: 0 0 1.1rem;
    color: var(--color-muted);
    font-size: 0.9rem;
    max-width: 46rem;
}

.inline-form-quota {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.quota-lbl {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-ink-soft);
    white-space: nowrap;
}

.quota-input {
    width: 4.4rem;
    padding: 0.34rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-border-strong);
    background: rgba(15, 90, 62, 0.05);
    color: var(--color-ink);
    font: inherit;
    font-size: 0.86rem;
}

.quota-input:focus-visible {
    outline: none;
    border-color: var(--color-green);
    box-shadow: var(--focus-ring);
}

.admin-compact-list strong {
    color: var(--color-green);
}

.admin-compact-list span,
.admin-compact-list small {
    color: var(--color-muted);
}

.content-lead,
.content-body {
    color: var(--color-muted);
    font-size: 1.05rem;
}

.cookie-banner {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 20;
    display: grid;
    gap: 0.75rem;
    width: min(38rem, calc(100vw - 2rem));
    border: 1px solid rgba(18, 120, 84, 0.2);
    border-radius: var(--radius);
    padding: 0.9rem;
    background: rgba(248, 251, 247, 0.98);
    box-shadow: 0 1.2rem 3rem rgba(13, 35, 29, 0.16);
}

.cookie-banner[hidden],
.cookie-settings[hidden],
.cookie-actions [hidden] {
    display: none;
}

.cookie-banner h2,
.cookie-banner p {
    margin: 0;
}

.cookie-banner-copy {
    display: grid;
    gap: 0.32rem;
}

.cookie-settings {
    display: grid;
    gap: 0.55rem;
    border: 1px solid rgba(18, 120, 84, 0.12);
    border-radius: var(--radius);
    padding: 0.75rem;
    background: rgba(231, 243, 236, 0.72);
}

.cookie-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-green);
    font-weight: 780;
}

.cookie-toggle input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-green);
}

.cookie-toggle.disabled {
    color: var(--color-muted);
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.site-footer {
    padding: 2rem 0;
    border-top: 1px solid rgba(18, 120, 84, 0.14);
    color: var(--color-muted);
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.footer-links a {
    color: var(--color-green);
    font-weight: 750;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--color-green);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Footer newsletter signup */
.footer-newsletter {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(231, 243, 236, 0.96), rgba(250, 245, 233, 0.85));
    box-shadow: var(--shadow-subtle);
    padding: clamp(1.2rem, 3vw, 1.8rem);
    margin-bottom: 1.7rem;
}

.footer-news-copy {
    max-width: 44rem;
    margin-bottom: 0.95rem;
}

.footer-news-copy .eyebrow {
    margin: 0 0 0.3rem;
}

.footer-news-copy strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-green);
    line-height: 1.15;
    margin-bottom: 0.3rem;
}

.footer-news-copy p {
    margin: 0;
}

.footer-news-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: 34rem;
}

.footer-news-form input[type="email"] {
    flex: 1 1 15rem;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.7rem 1.1rem;
    font: inherit;
    background: var(--color-surface);
    color: var(--color-ink);
}

.footer-news-form input[type="email"]:focus-visible {
    outline: none;
    border-color: var(--color-green);
    box-shadow: 0 0 0 3px rgba(29, 138, 97, 0.18);
}

.footer-news-form button {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 0.7rem 1.4rem;
    background: var(--color-green-deep);
    color: #ffffff;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    transition: background 160ms ease;
}

.footer-news-form button:hover {
    background: var(--color-green);
}

.footer-news-msg {
    margin: 0.7rem 0 0;
    font-weight: 750;
}

.footer-news-msg.is-ok {
    color: var(--color-green);
}

.footer-news-msg.is-err {
    color: #a23b2e;
}

.footer-news-note {
    margin: 0.7rem 0 0;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.footer-news-note a {
    color: var(--color-green);
    font-weight: 700;
}

.footer-bottom {
    display: grid;
    gap: 0.4rem;
}

/* Admin mail-test page */
.mailtest-lead {
    color: var(--color-ink-soft);
    max-width: 44rem;
}

.mailtest-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin: 1.4rem 0;
}

.mailtest-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 1.2rem;
    box-shadow: var(--shadow-subtle);
}

.mailtest-card h2 {
    margin: 0 0 0.7rem;
    color: var(--color-green);
    font-size: 1.15rem;
}

.mailtest-dl {
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.mailtest-dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 0.4rem;
}

.mailtest-dl dt {
    color: var(--color-muted);
    font-weight: 700;
    margin: 0;
}

.mailtest-dl dd {
    margin: 0;
    color: var(--color-ink);
    font-weight: 700;
    text-align: right;
    word-break: break-word;
}

.mailtest-form {
    display: grid;
    gap: 0.5rem;
    max-width: 26rem;
}

.mailtest-form label {
    font-weight: 700;
    color: var(--color-ink-soft);
    font-size: 0.9rem;
}

.mailtest-form input {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font: inherit;
    background: var(--color-surface);
}

.mailtest-result {
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    background: var(--color-surface);
    margin-top: 1rem;
}

.mailtest-result.is-ok {
    border-left-color: var(--color-green);
}

.mailtest-result.is-err {
    border-left-color: #c0432f;
}

.mailtest-result h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.mailtest-log {
    background: #0f241d;
    color: #d6efe2;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0.4rem 0 0;
}

.mailtest-hint {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin: 0.6rem 0 0;
}

.mailtest-help {
    margin-top: 1.4rem;
}

.mailtest-help summary {
    cursor: pointer;
    font-weight: 750;
    color: var(--color-green);
}

@media (min-width: 760px) {
    .mailtest-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.form-page,
.recommendation-page,
.dashboard-page,
.result-page {
    max-width: 52rem;
    padding: 2.35rem 0 3.5rem;
}

.recommendation-search-page,
.product-result-page {
    max-width: none;
}

.recommendation-hero {
    max-width: 48rem;
    margin-bottom: 1.15rem;
}

.recommendation-hero h1 {
    margin: 0;
    color: var(--color-green);
    font-size: 2.35rem;
    line-height: 1.04;
}

.recommendation-hero p {
    color: var(--color-muted);
    font-size: 1rem;
}

.form-intro {
    max-width: 38rem;
    margin-bottom: 1.05rem;
}

.form-intro h1,
.dashboard-page h1,
.result-page h1 {
    margin: 0;
    color: var(--color-green);
    font-size: 2.15rem;
    line-height: 1.06;
}

.form-intro p,
.dashboard-page .section-heading p,
.result-page .content-lead {
    color: var(--color-muted);
    font-size: 1rem;
}

.form-card,
.question-form,
.notice-panel,
.info-card {
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: var(--radius);
    background: rgba(248, 251, 247, 0.86);
    box-shadow: var(--shadow-subtle);
}

.form-card,
.question-form {
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem;
}

.recommendation-finder {
    display: grid;
    gap: 0.85rem;
    border: 1px solid rgba(18, 120, 84, 0.18);
    border-radius: var(--radius);
    padding: 1rem;
    background:
        linear-gradient(180deg, rgba(248, 251, 247, 0.96), rgba(231, 243, 236, 0.86)),
        #ffffff;
    box-shadow: var(--shadow-soft);
}

.search-field {
    display: grid;
    gap: 0.55rem;
    color: var(--color-green);
    font-weight: 850;
}

.search-field input {
    width: 100%;
    min-height: 3.05rem;
    border: 1px solid rgba(18, 120, 84, 0.2);
    border-radius: 999px;
    padding: 0.76rem 1rem;
    color: var(--color-ink);
    background: linear-gradient(135deg, #ffffff, rgba(231, 243, 236, 0.9));
    font: inherit;
    box-shadow: inset 0 0 0 1px rgba(248, 251, 247, 0.55);
}

.quick-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.quick-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(18, 120, 84, 0.16);
    border-radius: 999px;
    padding: 0.42rem 0.65rem;
    color: var(--color-green);
    background: var(--color-surface);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
}

.quick-chip:hover {
    border-color: var(--color-gold);
    background: var(--color-surface-warm);
}

.finder-grid {
    display: grid;
    gap: 0.85rem;
}

.form-card label {
    display: grid;
    gap: 0.38rem;
    color: var(--color-green);
    font-weight: 780;
}

/* "Remember me" — a checkbox row, not a stacked field. Without these overrides the
   generic .form-card label (grid) and input (width:100%) would stretch the box. */
.form-remember {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.2rem;
    color: var(--color-ink);
    font-weight: 650;
    cursor: pointer;
}

.form-card .form-remember input[type="checkbox"] {
    width: 1.15rem;
    min-height: 0;
    height: 1.15rem;
    margin: 0;
    padding: 0;
    border: 0;                       /* the generic field border would skew the square */
    background: none;
    accent-color: var(--color-green);
    cursor: pointer;
}

.form-remember-note {
    display: block;
    margin: -0.15rem 0 0.2rem;
    color: var(--color-muted);
    font-size: 0.8rem;
}

/* Registration consent — a checkbox row with an inline linked label. Same overrides
   as .form-remember so the generic .form-card grid/label + input:100% don't apply. */
.form-consent {
    display: flex !important;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.3rem;
    color: var(--color-ink);
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
}

.form-card .form-consent input[type="checkbox"] {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    min-height: 0;
    margin: 0.15rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--color-green);
    cursor: pointer;
}

.form-consent a {
    color: var(--color-green);
    font-weight: 700;
    text-decoration: underline;
}

.form-consent-err {
    display: block;
    margin-top: 0.3rem;
    color: var(--color-danger);
    font-weight: 700;
    font-size: 0.85rem;
}

/* ---- Személyre szóló vízjel ----------------------------------------------
   A csempézett hátteret a szerver adja inline `style`-ban (tagonként más), itt csak
   az kell, hogy a háttér a tartalom MÖGÖTT maradjon, és a kijelölés/másolás ne tudja
   véletlenül magával vinni. A látható hivatkozás-sor dokumentum-hivatkozásnak néz ki. */
.vl-wm { background-position: 0 0; }
/* Admin: a négy erősség-fokozat egymás mellett, mindegyik a tulaj SAJÁT vízjelével —
   szemre lehet választani, nem leírásból. */
.wm-lvl-h { margin: 1.6rem 0 0.3rem; }
.wm-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.7rem;
    margin: 0.8rem 0 0.4rem;
}
.wm-mode {
    display: block !important;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--color-border, #e4ddcb);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}
.wm-mode.is-current { border-color: var(--color-green, #1f5133); background: #f6faf7; }
.wm-mode-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.3rem; }
.wm-mode-name { font-weight: 700; color: var(--color-green); font-size: 0.92rem; }
.wm-mode-desc { display: block; color: var(--color-ink); font-size: 0.82rem; line-height: 1.45; font-weight: 400; }
.wm-mode-sample { display: block; margin-top: 0.45rem; font-size: 0.78rem; color: var(--color-muted, #6b6455); font-weight: 400; }
.wm-mode-sample code { font-size: 0.78rem; }
.wm-levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.9rem;
    margin: 0.8rem 0 1.2rem;
}
.wm-level { display: block !important; cursor: pointer; }
.wm-level-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-ink);
}
.wm-level-name { color: var(--color-green); }
.wm-level-now {
    padding: 0.06rem 0.4rem;
    border-radius: 999px;
    background: #e8f5ec;
    border: 1px solid #b9dcc5;
    color: #1f5133;
    font-size: 0.66rem;
    font-weight: 800;
}
.wm-level-box {
    display: block;
    min-height: 8.5rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-border, #e4ddcb);
    border-radius: 12px;
    background-color: #fff;
    color: var(--color-ink);
    font-size: 0.76rem;
    line-height: 1.9;
    overflow: hidden;
}
.wm-level-box span { display: block; }
.wm-level.is-current .wm-level-box { border-color: var(--color-green, #1f5133); }
/* HALK mód: iktatószámnak látszó hivatkozás. Semmi nem kiabál rajta — se felirat, se
   keret, se ikon; a lap természetes záró metaadatának néz ki, és pontosan ez a lényeg.
   Kijelölhető marad: a tulaj így ki tudja másolni ellenőrzéskor. */
.vl-doc {
    margin: 1.4rem 0 0;
    color: var(--color-muted, #6b6455);
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    opacity: 0.55;
    text-align: right;
}
.vl-doc span { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

.vl-wmref {
    margin: 1.6rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(18, 120, 84, 0.14);
    color: var(--color-muted, #6b6455);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    opacity: 0.75;
    user-select: none;
}

/* Jelölőnégyzet és rádiógomb a form-cardban.
   A lenti `.form-card input` szabály (100% széles, 2.78rem magas, kerettel, háttérrel)
   MINDEN mezőre vonatkozik, tehát a jelölőnégyzeteket is nagy üres dobozzá fújta:
   a nyitókép-eltávolítónál egy fél képernyőnyi keretes négyzet állt a felirat FÖLÖTT.
   Eddig ezt osztályonként foltoztuk (.form-remember, .form-consent, .edu-admin-check),
   így minden ÚJ jelölőnégyzet újra elromlott. Ez az egy szabály mindet megfogja. */
/* ==================== Jelszó-mutatás gomb ====================
   A forms.js MINDEN jelszómezőt burokba tesz, és a jobb szélére rak egy szem-ikont
   (tulaj, 2026-08-04: „sokan elrontják a jelszavukat"). A burok azért kell, mert a gombot
   a mezőn BELÜLRE kell tenni — a mező mellé rakva a `.form-card input{width:100%}` szabály
   miatt a gomb kiszorult volna a következő sorba.

   ⚠️ A burok `display:block`, hogy pontosan a mező helyét vegye át: enélkül a körülötte
   lévő elrendezés (label-grid, form-card) elmozdulna. */
.pw-wrap { position: relative; display: block; }
/* Hely a gombnak, hogy a hosszú jelszó ne fusson alá. A gomb 2.6rem széles. */
.pw-wrap input { padding-right: 2.9rem !important; }
.pw-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--color-muted, #6a7d72);
    cursor: pointer;
}
.pw-toggle:hover { color: var(--color-green, #0f7d54); background: rgba(15, 125, 84, 0.08); }
.pw-toggle:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.pw-toggle svg { width: 1.2rem; height: 1.2rem; display: block; }
/* Rejtett jelszónál a nyitott szem látszik („kattints, hogy lásd"), megjelenítettnél az
   áthúzott („kattints, hogy elrejtsd") — az ikon mindig azt mutatja, MI TÖRTÉNIK. */
.pw-toggle .pw-eye-off { display: none; }
.pw-wrap.is-shown .pw-toggle .pw-eye { display: none; }
.pw-wrap.is-shown .pw-toggle .pw-eye-off { display: block; }
.pw-wrap.is-shown .pw-toggle { color: var(--color-green, #0f7d54); }

.form-card input[type="checkbox"],
.form-card input[type="radio"] {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--color-green);
    cursor: pointer;
}

/* Jelölőnégyzet + felirat EGY sorban. A .form-card label alapból grid (mező a címke
   alatt), ezért a felirat a doboz alá csúszott. */
.form-check {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-ink);
    font-weight: 650;
    cursor: pointer;
}

.form-card input,
.form-card select {
    width: 100%;
    min-height: 2.78rem;
    border: 1px solid rgba(18, 120, 84, 0.22);
    border-radius: var(--radius);
    padding: 0.62rem 0.75rem;
    color: var(--color-ink);
    background: var(--color-surface);
    font: inherit;
}

.form-fieldset {
    display: grid;
    gap: 0.65rem;
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: var(--radius);
    padding: 0.8rem;
    background: rgba(231, 243, 236, 0.72);
}

.form-fieldset legend {
    padding: 0 0.35rem;
    color: var(--color-green);
    font-weight: 900;
}

.form-hint {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.form-card small {
    color: var(--color-danger);
    font-weight: 700;
}

/* Neutral helper text inside a form label (e.g. the Vital Health username hint) —
   overrides the red error styling of .form-card small. */
.form-card small.form-hint {
    color: var(--color-muted);
    font-weight: 500;
}

/* "That looks like your e-mail address" panel under the Vital Health username field.
   Amber, not red: it is a warning the member can knowingly override, not a rejection. */
.vh-warn {
    margin: -0.35rem 0 0.2rem;
    border: 1px solid rgba(156, 112, 22, 0.35);
    border-left: 4px solid var(--color-gold, #9c7016);
    border-radius: var(--radius);
    padding: 0.7rem 0.85rem;
    background: rgba(252, 246, 231, 0.9);
}

.vh-warn[hidden] {
    display: none;
}

.vh-warn-text {
    margin: 0;
    color: #6f4f0f;
    font-size: 0.88rem;
    line-height: 1.5;
}

.vh-warn-confirm {
    display: flex !important;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.6rem;
    color: var(--color-ink);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
}

.form-card .vh-warn-confirm input[type="checkbox"] {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    min-height: 0;
    margin: 0.12rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--color-gold, #9c7016);
    cursor: pointer;
}

/* === Admin console (access + newsletter pages) === */
.admin-stats {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 1.2rem;
}

.admin-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 1rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-ink-soft);
    /* The chips double as filter buttons. */
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.admin-stat:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-1px);
}

.admin-stat.is-active {
    border-color: var(--color-green);
    box-shadow: 0 0 0 2px rgba(15, 125, 84, 0.18);
}

.admin-stat b {
    font-size: 1.2rem;
    color: var(--color-green);
    margin-right: 0.3rem;
}

.admin-stat.is-pending {
    border-color: #ecd9a4;
    background: #fdf8ea;
}

.admin-stat.is-pending.is-active {
    border-color: #c79a2e;
    box-shadow: 0 0 0 2px rgba(168, 112, 10, 0.2);
}

.admin-stat.is-pending b {
    color: #a8700a;
}

tr.admin-group-row td {
    background: var(--color-green-pale);
    color: var(--color-green-deep);
    font-weight: 800;
    font-size: 0.95rem;
    border-top: 2px solid var(--color-border-strong);
}

tr.admin-row-pending td {
    background: #fdf7e2;
}

/* Rejected members sit in their own dimmed section at the bottom. */
tr.admin-row-rejected td {
    opacity: 0.7;
    background: #faf6f4;
}

.badge-approval {
    display: inline-block;
    padding: 0.12rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.badge-approval.is-pending { background: #fdf1cd; color: #8a6207; }
.badge-approval.is-approved { background: var(--color-green-pale); color: var(--color-green-deep); }
.badge-approval.is-rejected { background: #f7e1dc; color: #8a3e2f; }

/* Soft account-sharing warning (login from many distinct IPs) — a heads-up, not a block. */
.badge-share {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.14rem 0.55rem;
    border-radius: 999px;
    background: #fdecc8;
    border: 1px solid #e6c266;
    color: #8a5a06;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: help;
}

.admin-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 1.1rem;
}

/* Unified admin sub-navigation (shared _nav.php partial on every admin page) */
.admin-subnav {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.65rem;
    margin: 0 0 1.5rem;
    background: var(--color-surface);
    border: 1px solid rgba(20, 60, 40, 0.12);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 60, 40, 0.04);
}
.admin-subnav-home {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-muted);
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    border-radius: 9px;
    white-space: nowrap;
}
.admin-subnav-home:hover { color: var(--color-green); background: rgba(28, 107, 58, 0.06); }
.admin-subnav-sep { width: 1px; align-self: stretch; background: rgba(20, 60, 40, 0.12); margin: 0.15rem 0; }
.admin-subnav-links { display: flex; gap: 0.35rem; flex-wrap: wrap; flex: 1; }
.admin-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.admin-subnav-link:hover { background: rgba(28, 107, 58, 0.08); border-color: rgba(28, 107, 58, 0.18); }
.admin-subnav-link.is-active {
    background: var(--color-green);
    color: #fff;
    border-color: var(--color-green);
}
.admin-subnav-link.is-active:hover { background: var(--color-green-deep); }
.admin-subnav-ic { font-size: 1.05em; line-height: 1; }
@media (max-width: 640px) {
    .admin-subnav { padding: 0.5rem; }
    .admin-subnav-link { font-size: 0.85rem; padding: 0.4rem 0.65rem; }
}
.admin-subnav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; height: 1.25rem; margin-left: 0.35rem; padding: 0 0.35rem;
    background: #d9483b; color: #fff; border-radius: 999px; font-size: 0.72rem; font-weight: 800;
}
.admin-subnav-link.is-active .admin-subnav-badge { background: #fff; color: #1c6b3a; }
.nav-dot { color: #d9483b; font-size: 0.7em; vertical-align: middle; }

/* ============================================================
   Alerts — ONE component for every inline status message.
   The site had grown four separate ones (.fb-banner, .status-message,
   .result-banner and the success variant of .notice-panel), each with its
   own radius, weight and slightly different greens/reds. `.alert` is the
   canonical name; the older class names are kept as aliases so no view has
   to change, but they now all resolve to the same look.
   ============================================================ */
.alert,
.fb-banner,
.status-message {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin: 1rem 0;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-border-strong);
    border-left: 3px solid var(--color-muted);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
    color: var(--color-ink-soft);
    font-weight: 650;
    line-height: 1.45;
}

.alert-success,
.fb-banner.is-ok,
.status-success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    border-left-color: var(--color-success);
    color: var(--color-success);
}

.alert-error,
.fb-banner.is-err,
.status-error {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    border-left-color: var(--color-danger);
    color: var(--color-danger);
}

.alert-warning,
.status-warning {
    background: var(--color-warn-bg);
    border-color: var(--color-warn-border);
    border-left-color: var(--color-warn);
    color: var(--color-warn);
}

.alert-info {
    background: var(--color-green-pale);
    border-color: var(--color-border-strong);
    border-left-color: var(--color-green);
    color: var(--color-green-deep);
}

/* ============================================================
   Page header — icon badge + eyebrow + title + lead.
   Rendered by _private/views/partials/page_header.php and shared by the admin
   console, the education section and the feedback pages, so every inner page
   opens the same way. `.fb-hero*` are kept as aliases (feedback shipped first).
   Must sit AFTER `.content-page h1` so its narrow 12ch max-width is overridden.
   ============================================================ */
.page-hero,
.fb-hero {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0.2rem 0 1.6rem;
}

.page-hero-ic,
.fb-hero-ic {
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    line-height: 1;
    border-radius: var(--radius);
    background: linear-gradient(140deg, var(--color-green-pale), var(--color-surface));
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 14px rgba(20, 60, 40, 0.08);
}

.page-hero-text,
.fb-hero-text { min-width: 0; }

.page-hero-text .eyebrow,
.fb-hero-text .eyebrow { margin: 0 0 0.35rem; }

/* Tool pages speak the UI's language: a big serif title sitting on top of nothing but sans
   cards, fields and buttons is the break that read as "not harmonious" (owner). The
   marketing/legal pages keep their Lora titles via `.content-page h1` — a serif belongs
   where the page IS prose. This rule only covers the shared page-hero (13 tool pages).
 *
 * ⚠️ The parent classes are load-bearing, not decoration. `.page-hero-text h1` is only
 * (0,1,1) — EXACTLY as specific as `.content-page h1` — so the later `.content-page h1`
 * inside `@media (min-width: 780px)` won on order and rendered this title at 3.55rem/56.8px
 * instead of the intended size on every desktop. Qualifying with the wrapper makes it
 * (0,2,1) so it wins regardless of source order. The partial always emits
 * .page-hero > .page-hero-text > h1, so this always matches. */
.page-hero .page-hero-text h1,
.fb-hero .fb-hero-text h1 {
    max-width: none;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.72rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.page-hero-lead,
.fb-hero-text .fb-lead {
    margin: 0.55rem 0 0;
    color: var(--color-muted);
    max-width: 62ch;
}

@media (max-width: 560px) {
    .page-hero-ic,
    .fb-hero-ic { width: 2.7rem; height: 2.7rem; font-size: 1.3rem; border-radius: var(--radius-sm); }
    /* Was 1.7rem to step down from a 2.15rem base; the base is 1.72rem now, so it no longer
       shrank anything. Same wrapper qualification as above — unqualified it is only (0,1,1)
       and the `.content-page h1` mobile rules would beat it on order. */
    .page-hero .page-hero-text h1,
    .fb-hero .fb-hero-text h1 { font-size: 1.42rem; }
}

/* ============ Feedback / member ⇄ admin messaging ============ */
.fb-page .fb-lead { color: var(--color-muted); max-width: 60ch; }
/* .fb-banner + .is-ok/.is-err are styled by the shared .alert component above. */
/* Two-column: the form beside a calm "what to expect" panel. The lone narrow card under a
   huge title read cheap; the panel fills the width AND sets expectations up front (a person
   reads this, when the reply comes), which is what makes members write real feedback. */
/* `.content-page` caps at 48rem — a READING width, right for prose, too tight for a
   two-column form: it squeezed the message box into a narrow strip. This page gets a wider
   canvas and a bigger share for the form; the aside only needs enough for short lines. */
.fb-page { max-width: 66rem; }
.fb-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; margin: 1.2rem 0 2rem; }
.fb-new-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 1.3rem 1.5rem; }
.fb-new-card h2 { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 500; }
.fb-form .fb-field-label { display: block; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-soft); margin: 1rem 0 0.5rem; }
.fb-form .fb-field-label:first-of-type { margin-top: 0; }
/* topic: real cards with a line icon — the emoji pills read toy-like */
.fb-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.fb-cat { display: block; text-align: center; padding: 0.75rem 0.5rem; border: 1px solid var(--color-border-strong); border-radius: 12px; background: var(--color-surface); cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.fb-cat input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fb-cat-ic { width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-surface-soft); color: var(--color-green-deep); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.4rem; transition: background 0.15s, color 0.15s; }
.fb-cat-ic svg { width: 1.05rem; height: 1.05rem; }
.fb-cat-l { display: block; font-size: 0.84rem; font-weight: 600; color: var(--color-ink); line-height: 1.3; }
.fb-cat:hover { border-color: var(--color-border-strong); background: var(--color-surface-soft); }
.fb-cat:has(input:checked) { border-color: var(--color-green); background: var(--color-green-pale); box-shadow: inset 0 0 0 1px var(--color-green); }
.fb-cat:has(input:checked) .fb-cat-ic { background: var(--color-surface); color: var(--color-green); }
.fb-cat:has(input:focus-visible) { box-shadow: var(--focus-ring); }
/* The box follows the text instead of making people write into a slot: a comfortable
   min-height, and the script grows it while typing. max-height caps the growth, after
   which it scrolls internally; the drag handle stays as an escape hatch. */
.fb-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--color-border-strong); border-radius: 12px; padding: 0.8rem 0.9rem; font: inherit; line-height: 1.6; resize: vertical; min-height: 11rem; max-height: 60vh; overflow-y: auto; }
.fb-reply textarea { min-height: 7rem; }
.fb-count { text-align: right; font-size: 0.75rem; color: var(--color-muted); margin-top: 0.3rem; }
/* drop zone — replaces the raw browser file input, same language as the QRMA tools */
.fb-drop { display: block; border: 1.5px dashed var(--color-border-strong); border-radius: 12px; background: var(--color-surface-soft); padding: 1rem; text-align: center; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.fb-drop:hover, .fb-drop.is-over { border-color: var(--color-green); background: var(--color-green-pale); }
.fb-drop:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.fb-drop-ic { display: block; color: var(--color-green); }
.fb-drop-ic svg { width: 1.5rem; height: 1.5rem; }
.fb-drop b { display: block; color: var(--color-green); font-size: 0.9rem; margin: 0.35rem 0 0.15rem; }
.fb-drop p { margin: 0; color: var(--color-muted); font-size: 0.78rem; }
/* compact variant for the in-thread reply, where the drop zone is a secondary control */
.fb-drop-sm { padding: 0.7rem; }
.fb-drop-sm .fb-drop-ic svg { width: 1.15rem; height: 1.15rem; }
.fb-drop-sm b { font-size: 0.85rem; margin-top: 0.25rem; }
.fb-drop-sm p { font-size: 0.74rem; }
.fb-file-sr { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fb-thumb { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.fb-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface-soft); }
.fb-thumb-n { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--color-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-submit { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.2rem; }
.fb-reassure { font-size: 0.8rem; color: var(--color-muted); }
/* The "what to expect" panel is a quiet aside, NOT a second card: the message is the point
   of this page (owner). No fill, no box — just a hairline, muted type and small icons, so
   the white form card stays the only thing with weight. */
.fb-side { background: none; border: 0; border-left: 1px solid var(--color-border); border-radius: 0; padding: 0.15rem 0 0 1.1rem; position: sticky; top: 1rem; }
.fb-side h3 { font-family: inherit; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.8rem; color: var(--color-muted); }
.fb-side ul { list-style: none; margin: 0; padding: 0; }
.fb-side li { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; font-size: 0.78rem; color: var(--color-muted); line-height: 1.5; }
.fb-side li svg { width: 0.85rem; height: 0.85rem; color: var(--color-border-strong); flex: none; margin-top: 0.2rem; }
.fb-side-count { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--color-border); font-size: 0.75rem; color: var(--color-muted); }
.fb-side-count b { color: var(--color-ink-soft); font-weight: 600; }

/* Shared styled file picker — replaces the raw browser widget ("Fájl kiválasztása | Nincs
   fájl kiválasztva") wherever a plain file field is enough and no image preview is wanted.
   The input sits inside the label, so browsing works with no JS; the script only fills in
   the chosen file name. */
.file-pick { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; cursor: pointer; max-width: 100%; }
/* min-height/padding/border are zeroed on purpose: `.form-card input` sets width:100% and
   min-height:2.78rem on EVERY input, which would inflate this hidden one. */
.file-pick input[type=file] { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; }
.file-pick-btn { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); padding: 0.42rem 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--color-ink); white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.file-pick-btn svg { width: 0.95rem; height: 0.95rem; color: var(--color-green); }
.file-pick:hover .file-pick-btn { background: var(--color-green-pale); border-color: var(--color-green); }
.file-pick:has(input:focus-visible) .file-pick-btn { box-shadow: var(--focus-ring); }
.file-pick-name { font-size: 0.82rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file-pick.has-file .file-pick-name { color: var(--color-ink-soft); font-weight: 600; }
@media (max-width: 860px) { .fb-layout { grid-template-columns: 1fr; } .fb-side { position: static; } }
.fb-list-title { margin: 1.8rem 0 0.8rem; font-size: 1.15rem; }
.fb-empty { color: var(--color-muted); }

.fb-thread-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.fb-thread-item > a { display: block; text-decoration: none; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 0.9rem 1.1rem; transition: border-color 0.15s, box-shadow 0.15s; }
.fb-thread-item > a:hover { border-color: var(--color-green); box-shadow: 0 2px 10px rgba(20,60,40,0.07); }
.fb-thread-item.is-unread > a { border-left: 4px solid #d9483b; }
.fb-thread-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fb-cat-tag { font-weight: 700; font-size: 0.92rem; }
.fb-from { font-size: 0.9rem; }
.fb-status { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.55rem; border-radius: 999px; }
.fb-status-new { background: #fdecec; color: #c23b2f; }
.fb-status-open { background: #fdf4e3; color: #8a6410; }
.fb-status-resolved { background: #eaf6ee; color: #1c6b3a; }
.fb-unread-dot { color: #d9483b; font-weight: 800; font-size: 0.78rem; }
.fb-thread-excerpt { margin: 0.5rem 0; color: var(--color-ink); overflow-wrap: anywhere; }
.fb-thread-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--color-muted); }
.fb-thread-meta .fb-open { margin-left: auto; color: var(--color-green); font-weight: 700; }

.fb-back { display: inline-block; margin-bottom: 0.6rem; color: var(--color-green); text-decoration: none; font-weight: 600; }
.fb-thread-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.fb-thread-head h1 { margin: 0; font-size: 1.4rem; }
.fb-member-line { color: var(--color-muted); font-size: 0.92rem; }
.fb-member-line a { color: var(--color-green); }

.fb-conversation { display: flex; flex-direction: column; gap: 0.8rem; margin: 1.2rem 0; }
.fb-msg { max-width: 82%; border-radius: 16px; padding: 0.7rem 1rem; border: 1px solid transparent; }
.fb-msg.is-theirs { align-self: flex-start; background: #f1f3f2; border-color: var(--color-border); border-bottom-left-radius: 5px; }
.fb-msg.is-mine { align-self: flex-end; background: var(--color-green-pale); border-color: #bfe3cb; border-bottom-right-radius: 5px; }
.fb-msg-meta { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.25rem; }
.fb-msg-sender { font-weight: 800; font-size: 0.82rem; }
.fb-msg.is-admin .fb-msg-sender { color: var(--color-green-deep); }
.fb-msg-time { font-size: 0.72rem; color: var(--color-muted); }
.fb-msg-body { line-height: 1.5; overflow-wrap: anywhere; }
.fb-msg-img { display: inline-block; margin-top: 0.5rem; }
.fb-msg-img img { max-width: min(320px, 100%); max-height: 240px; border-radius: 10px; border: 1px solid var(--color-border-strong); display: block; }

.fb-admin-status { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin: 0.5rem 0 1.2rem; }
.fb-admin-status .fb-inline { margin: 0; }
.fb-admin-status .button.is-current { background: var(--color-green); color: #fff; border-color: var(--color-green); }
.fb-resolved-note { background: #eaf6ee; border-radius: 10px; padding: 0.6rem 0.9rem; color: #1c6b3a; font-size: 0.9rem; }
.fb-reply { margin-top: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 1rem 1.1rem; }
.fb-reply-row { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
.fb-reply-row .button { margin: 0; }

.fb-filters { margin: 1rem 0 1.4rem; display: grid; gap: 0.5rem; }
.fb-filter-row { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.fb-filter-lbl { font-weight: 700; font-size: 0.85rem; color: var(--color-muted); }
.fb-chip { text-decoration: none; color: var(--color-ink); background: #fff; border: 1px solid var(--color-border-strong); border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.85rem; font-weight: 600; }
.fb-chip.is-on { background: var(--color-green); color: #fff; border-color: var(--color-green); }
.fb-notify-toggle { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.6rem 1rem; margin: 0.8rem 0 1.2rem; font-size: 0.9rem; }
.fb-notify-toggle .button { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.fb-switch { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; font-weight: 600; }
.fb-switch input { width: 1.15rem; height: 1.15rem; accent-color: var(--color-green); cursor: pointer; }
.fb-close-form { margin: 0.5rem 0 1rem; }
.fb-close-btn { color: var(--color-muted); }
.fb-danger { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px dashed rgba(20,60,40,0.15); }
/* The thread delete buttons now use the shared .button-danger. */
@media (max-width: 560px) { .fb-msg { max-width: 92%; } }

.admin-copy-emails {
    width: 100%;
    min-height: 5.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--color-ink-soft);
    background: var(--color-surface-soft);
}

/* ============================================================
   V2 — experience layer: scroll-reveal, micro-interactions, ambient
   motion. Transform/opacity only (no layout thrash); everything is
   fully disabled under prefers-reduced-motion.
   ============================================================ */

/* Scroll-reveal — motion.js toggles .is-inview via IntersectionObserver. */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.75s cubic-bezier(0.22, 0.7, 0.3, 1), transform 0.75s cubic-bezier(0.22, 0.7, 0.3, 1);
    will-change: opacity, transform;
}

[data-reveal].is-inview {
    opacity: 1;
    transform: none;
}

/* Hero ambient — two soft light blobs drifting slowly behind the content. */
.labor-hero {
    position: relative;
    isolation: isolate;
}

.labor-hero::before,
.labor-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(52px);
    pointer-events: none;
}

.labor-hero::before {
    width: 380px;
    height: 380px;
    top: -90px;
    left: -130px;
    background: radial-gradient(circle, rgba(22, 160, 106, 0.16), transparent 65%);
    animation: v2Float 16s ease-in-out infinite alternate;
}

.labor-hero::after {
    width: 300px;
    height: 300px;
    right: -70px;
    bottom: -70px;
    background: radial-gradient(circle, rgba(156, 112, 22, 0.13), transparent 65%);
    animation: v2Float 19s ease-in-out infinite alternate-reverse;
}

@keyframes v2Float {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(26px, -20px) scale(1.08); }
}

/* Primary CTA — premium lift + glow. */
.button-primary:hover,
.button-primary:focus-visible {
    box-shadow: 0 14px 30px -12px rgba(15, 125, 84, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    filter: brightness(1.05);
}

.button:active {
    transform: translateY(0) scale(0.985);
    transition-duration: 80ms;
}

/* Tool cards — livelier hover: deeper lift, green glow, arrow slides ahead. */
.labor-tool-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--glow-green);
}

.labor-tool-arr {
    transition: transform 0.22s ease;
}

.labor-tool-card:hover .labor-tool-arr {
    transform: translateX(6px);
}

/* Brand mark — a small sign of life on hover. */
.brand-mark {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand:hover .brand-mark {
    transform: rotate(-5deg) scale(1.07);
}

/* Language menu — soft entrance (the nav dropdown already transitions). */
@keyframes v2MenuIn {
    from { opacity: 0; transform: translateY(-7px); }
    to { opacity: 1; transform: none; }
}

.lang-switch.is-open .lang-menu {
    animation: v2MenuIn 0.22s ease both;
}

/* The CTA panel's breathing glow is GONE, and this is a correction of my own
   regression, not a change of taste.

   `animation: v2Breath 7s infinite` animated box-shadow, and its 0%/100% stop was
   `var(--shadow-soft)` — the pale mint glow written for the OLD light CTA card.
   A CSS animation beats a normal declaration, so when the panel became deep green
   its designed shadow never rendered once: the computed value on the live page was
   the mint glow, not the dark lift. The panel meant to say "the page is ending" was
   floating on a leftover highlight.

   Removing it also removes a continuous repaint. box-shadow is a PAINT property and
   cannot be composited, and I later gave this same element a masked ::before — so
   every frame, forever, the browser repainted the panel and re-applied the mask, on
   the page that already runs the ambient layer. That is the exact anti-pattern
   documented at .amb-grid below.

   And it contradicted a decision already shipped here: the CTA's grid is deliberately
   static, because "this panel is a destination, and something moving under a decision
   is a distraction". A breathing shadow was the same distraction, one layer down.

   To restore it, the shadow colours have to move with it — v2Breath's stops were
   never updated for the dark panel. .labor-ai-card keeps its own v2AiGlow: that one
   is in the hero, is unmasked, and glows a colour that belongs to it. */

.labor-ai-card {
    animation: v2AiGlow 6s ease-in-out infinite;
}

@keyframes v2AiGlow {
    0%, 100% { box-shadow: var(--shadow-lift); }
    50% { box-shadow: 0 26px 60px -24px rgba(47, 213, 152, 0.35); }
}

/* Brand-tinted text selection. */
::selection {
    background: rgba(22, 160, 106, 0.22);
}

/* Reduced motion: the V2 layer switches off entirely, content shows instantly. */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .labor-hero::before,
    .labor-hero::after,
    .home-cta-inner,
    .labor-ai-card,
    .lang-switch.is-open .lang-menu {
        animation: none !important;
    }
}

.form-footnote {
    margin: 0;
    color: var(--color-muted);
}

/* A panel, not a one-line alert: it wraps copy and sometimes a button. It keeps its
   own box, but now shares the alert family's border, radius and left accent so the
   two read as one system. */
.notice-panel {
    margin: 1rem 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--color-border-strong);
    border-left: 3px solid var(--color-muted);
    border-radius: var(--radius-sm);
    color: var(--color-ink-soft);
    background: var(--color-surface-warm);
}

.notice-panel > :first-child { margin-top: 0; }
.notice-panel > :last-child { margin-bottom: 0; }

/* Positive confirmation (e.g. reset link sent / password changed) — a calm green
   tint with a left accent so success reads differently from the neutral notice. */
.notice-panel.notice-success {
    color: var(--color-success);
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    border-left-color: var(--color-success);
}

.question-form fieldset {
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

.question-form legend {
    margin-bottom: 0.75rem;
    color: var(--color-green);
    font-size: 1.05rem;
    font-weight: 850;
}

.option-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.option-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgba(18, 120, 84, 0.16);
    border-radius: var(--radius);
    padding: 0.72rem;
    background: rgba(231, 243, 236, 0.8);
    color: var(--color-ink-soft);
    font-weight: 730;
}

.option-card input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--color-green);
}

.dashboard-grid,
.result-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.2rem 0;
}

.info-card {
    padding: 1.15rem;
}

.info-card h2 {
    margin: 0 0 0.45rem;
    color: var(--color-green);
}

.info-card p {
    color: var(--color-muted);
}

.inline-form {
    margin-top: 1rem;
}

.direction-list {
    margin: 1.5rem 0;
}

.direction-list h2 {
    color: var(--color-green);
}

.direction-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    border-top: 1px solid rgba(18, 120, 84, 0.14);
    padding: 0.9rem 0;
}

.direction-item span {
    width: 0.72rem;
    height: 0.72rem;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: var(--color-gold);
}

.direction-item p {
    margin: 0;
    color: var(--color-ink-soft);
}

.catalog-preview {
    padding: 2.5rem 0 0;
}

.search-hero {
    position: relative;
    overflow: hidden;
    max-width: none;
    border: 1px solid rgba(18, 120, 84, 0.16);
    border-radius: var(--radius);
    padding: 1.35rem;
    background:
        linear-gradient(135deg, rgba(231, 243, 236, 0.98), rgba(250, 245, 233, 0.94) 62%, rgba(248, 251, 247, 0.96));
    box-shadow: var(--shadow-soft);
}

.search-hero h1 {
    max-width: 13ch;
}

.search-hero p {
    max-width: 58rem;
}

.search-first-finder {
    border: 1px solid rgba(18, 120, 84, 0.18);
    border-radius: var(--radius);
    padding: 1rem;
    background: rgba(248, 251, 247, 0.92);
    box-shadow: 0 1.2rem 2.6rem rgba(20, 52, 44, 0.09);
}

.hero-search-field {
    gap: 0.6rem;
}

.hero-search-field span {
    color: var(--color-green);
    font-size: 0.94rem;
    font-weight: 900;
}

.hero-search-field input {
    min-height: 3.35rem;
    border: 1px solid rgba(18, 120, 84, 0.18);
    border-radius: var(--radius);
    padding: 0 1rem;
    background: linear-gradient(180deg, #ffffff, rgba(231, 243, 236, 0.92));
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 760;
    outline: none;
    box-shadow:
        inset 0 0 0 1px rgba(248, 251, 247, 0.5),
        0 0.75rem 1.6rem rgba(20, 52, 44, 0.06);
}

.hero-search-field input:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 4px rgba(189, 140, 53, 0.16);
}

.quick-chip-row {
    align-items: center;
}

.quick-chip {
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.quick-chip:hover {
    transform: translateY(-1px);
}

.all-products-panel {
    border: 1px solid rgba(18, 120, 84, 0.12);
    border-radius: var(--radius);
    padding: 0.65rem 0.8rem;
    background: rgba(231, 243, 236, 0.62);
}

.all-products-panel > summary {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    color: var(--color-green);
    cursor: pointer;
    font-weight: 900;
    line-height: 1.2;
}

.all-products-panel[open] > summary {
    margin-bottom: 1rem;
}

.search-submit {
    justify-self: start;
}

.result-banner {
    display: grid;
    gap: 0.8rem;
    margin: 1.5rem 0;
    border: 1px solid rgba(189, 140, 53, 0.24);
    border-radius: var(--radius);
    padding: 1rem;
    background: linear-gradient(135deg, rgba(250, 245, 233, 0.95), rgba(231, 243, 236, 0.95));
    box-shadow: var(--shadow-subtle);
}

.result-banner::before {
    content: "";
    width: 4.25rem;
    height: 0.28rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-green), var(--color-gold));
}

.result-banner h2,
.result-banner p {
    margin: 0;
}

.topic-pill-row,
.product-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
}

.topic-pill-row span,
.product-meta-row span {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: 999px;
    padding: 0.34rem 0.62rem;
    background: rgba(248, 251, 247, 0.78);
    color: var(--color-green);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
}

.topic-group-section {
    margin: 2rem 0;
}

.topic-group {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.2rem;
    border-top: 1px solid rgba(18, 120, 84, 0.12);
    padding-top: 1rem;
}

.topic-group h3 {
    margin: 0;
    color: var(--color-green);
}

.result-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1rem 0 1.5rem;
}

.result-meta-row span,
.mini-product-row span {
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
    color: var(--color-green);
    background: rgba(248, 251, 247, 0.78);
    font-size: 0.88rem;
    font-weight: 800;
}

.product-result-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.top-products-section {
    margin: 2rem 0;
}

.top-products-grid {
    align-items: stretch;
    justify-content: center;
}

.top-products-grid .product-card {
    height: 100%;
}

.product-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 0.56rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.68rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-subtle);
    min-width: 0;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.product-card:hover,
.product-card:focus-visible {
    border-color: rgba(189, 140, 53, 0.42);
    transform: translateY(-1px);
    box-shadow: 0 0.95rem 2.2rem rgba(31, 74, 62, 0.1);
    outline: none;
}

.featured-product {
    border-top: 0.25rem solid var(--color-gold);
}

.product-card-image,
.product-card-head {
    display: grid;
    place-items: center;
}

.product-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 3;
    max-height: 8.6rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(231, 243, 236, 0.72), rgba(250, 245, 233, 0.86)),
        #ffffff;
}

/* Harmonise the varied product photos into a cohesive set: a consistent inset ring
   and a faint bottom scrim so every card frame reads the same regardless of the photo. */
.product-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(16, 39, 31, 0.06);
    background: linear-gradient(180deg, transparent 62%, rgba(16, 39, 31, 0.06));
    pointer-events: none;
}

.product-card-image img,
.modal-product-visual img,
.synergy-product-image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--product-image-fit, contain);
    object-position: var(--product-image-position, center);
}

.product-image-role-poster img {
    object-fit: contain;
}

.product-card-image span {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-green-deep), var(--color-green), var(--color-gold));
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 900;
}

.product-card-body {
    min-width: 0;
}

.product-icon-box {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(189, 140, 53, 0.28);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(18, 63, 53, 0.96), rgba(18, 120, 84, 0.88) 64%, rgba(189, 140, 53, 0.72));
    color: #ffffff;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.product-card h3 {
    margin: 0 0 0.2rem;
    color: var(--color-green);
    font-size: 1.12rem;
    line-height: 1.12;
}

.product-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.93rem;
    line-height: 1.45;
}

.product-tagline {
    color: var(--color-ink-soft);
    font-weight: 760;
}

.product-fit-line {
    font-size: 0.88rem;
}

.product-fit-line strong {
    color: var(--color-green);
}

.dose-note {
    font-size: 0.88rem;
}

.benefit-list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--color-ink-soft);
}

.why-box {
    border-radius: var(--radius);
    padding: 0.68rem;
    border: 1px solid rgba(18, 120, 84, 0.1);
    background: linear-gradient(135deg, rgba(231, 243, 236, 0.72), rgba(250, 245, 233, 0.58));
}

.why-box strong {
    color: var(--color-green);
}

.why-box ul {
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
    color: var(--color-ink-soft);
}

.product-detail-button {
    width: 100%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-green);
    box-shadow: none;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.product-card:hover .product-detail-button,
.product-card:focus-within .product-detail-button,
.product-detail-button:hover,
.product-detail-button:focus-visible {
    border-color: var(--color-green-deep);
    background: var(--color-green-deep);
    color: #ffffff;
}

.product-detail-fallback {
    border-top: 1px solid rgba(18, 120, 84, 0.12);
    padding-top: 0.65rem;
}

.product-detail-fallback summary {
    color: var(--color-green);
    cursor: pointer;
    font-weight: 850;
}

.synergy-section {
    margin: 2rem 0;
}

.synergy-card {
    border: 1px solid rgba(189, 140, 53, 0.3);
    border-left: 0.35rem solid var(--color-gold);
    border-radius: var(--radius);
    padding: 1rem;
    background:
        linear-gradient(135deg, rgba(250, 245, 233, 0.94), rgba(248, 251, 247, 0.9));
    box-shadow: 0 1rem 2.2rem rgba(76, 54, 24, 0.08);
}

.primary-synergy-card {
    border-color: rgba(189, 140, 53, 0.34);
    background:
        linear-gradient(135deg, rgba(250, 245, 233, 0.96), rgba(231, 243, 236, 0.94));
}

.secondary-synergy-panel {
    border: 1px solid rgba(18, 120, 84, 0.12);
    border-radius: var(--radius);
    padding: 0.75rem 0.9rem;
    background: rgba(248, 251, 247, 0.72);
}

.secondary-synergy-panel summary {
    color: var(--color-green);
    cursor: pointer;
    font-weight: 900;
}

.secondary-synergy-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.8rem;
}

.secondary-synergy-card {
    border-top: 1px solid rgba(18, 120, 84, 0.12);
    padding-top: 0.75rem;
}

.secondary-synergy-card h3,
.secondary-synergy-card p {
    margin: 0;
}

.synergy-product-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0.9rem 0;
}

.synergy-product-card {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 3.75rem;
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: var(--radius-sm);
    padding: 0.45rem;
    background: rgba(248, 251, 247, 0.82);
    color: var(--color-green);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    text-align: left;
}

.synergy-product-image {
    position: relative;
    width: 3.2rem;
    height: 3.2rem;
    overflow: hidden;
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(231, 243, 236, 0.8), rgba(250, 245, 233, 0.8)),
        rgba(231, 243, 236, 0.92);
}

.synergy-product-image span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #ffffff;
    background: var(--color-green);
    font-weight: 900;
}

.synergy-card h3 {
    margin: 0 0 0.5rem;
    color: var(--color-green);
}

.synergy-card p {
    color: var(--color-ink-soft);
}

.finder-compliance-note {
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    background: rgba(231, 243, 236, 0.82);
    color: var(--color-muted);
    font-size: 0.94rem;
}

.finder-compliance-note p {
    margin: 0;
}

.synergy-goal {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    background: rgba(18, 120, 84, 0.1);
    color: var(--color-green);
    font-size: 0.86rem;
    font-weight: 850;
}

.synergy-caution {
    border-top: 1px solid rgba(189, 140, 53, 0.22);
    padding-top: 0.75rem;
    font-size: 0.92rem;
}

.mini-product-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
    align-items: flex-start;
}

.mini-product-row span {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    line-height: 1.1;
    white-space: nowrap;
}

.save-recommendation-panel,
.saved-recommendations-card,
.saved-recommendation-item {
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: var(--radius);
    background: rgba(248, 251, 247, 0.86);
    box-shadow: var(--shadow-subtle);
}

.save-recommendation-panel {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1rem;
}

.save-recommendation-panel h2,
.save-recommendation-panel p {
    margin: 0;
}

.saved-recommendations-card {
    padding: 1rem;
}

.saved-recommendation-list {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
}

.saved-recommendation-item {
    display: grid;
    gap: 0.62rem;
    padding: 0.78rem;
    background: linear-gradient(180deg, rgba(248, 251, 247, 0.96), rgba(231, 243, 236, 0.86));
}

.saved-recommendation-item h3,
.saved-recommendation-item p {
    margin: 0;
}

.saved-recommendation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.saved-recommendation-actions .button {
    min-height: 2.45rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.88rem;
}

.compact-inline-form {
    margin: 0;
}

/* .status-message + .status-success/.status-warning are styled by the shared
   .alert component (see the Alerts section). */

.product-modal-open {
    overflow: hidden;
}

.product-modal[hidden] {
    display: none;
}

.product-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.product-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 35, 29, 0.62);
    backdrop-filter: blur(8px);
}

.product-modal-dialog {
    position: relative;
    width: min(1040px, 100%);
    max-height: min(86vh, 900px);
    overflow: auto;
    border: 1px solid rgba(248, 251, 247, 0.62);
    border-radius: var(--radius);
    padding: 1.15rem;
    background:
        linear-gradient(180deg, #ffffff, rgba(231, 243, 236, 0.97));
    box-shadow: 0 2rem 5rem rgba(13, 35, 29, 0.34);
}

.product-modal-close {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    margin-left: auto;
    border: 1px solid rgba(18, 120, 84, 0.18);
    border-radius: 999px;
    background: rgba(248, 251, 247, 0.94);
    color: var(--color-green);
    cursor: pointer;
    font-size: 1.45rem;
    font-weight: 900;
}

.product-modal-close:focus-visible {
    outline: 3px solid rgba(189, 140, 53, 0.38);
}

.modal-product-layout {
    display: grid;
    grid-template-columns: minmax(17rem, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(1rem, 3vw, 1.45rem);
    align-items: start;
    margin-bottom: 1rem;
}

.modal-product-visual {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    max-height: min(60vh, 34rem);
    overflow: hidden;
    border: 1px solid rgba(189, 140, 53, 0.26);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(231, 243, 236, 0.62), rgba(250, 245, 233, 0.82)),
        #ffffff;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.modal-product-visual span {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-green-deep), var(--color-green), var(--color-gold));
    color: #ffffff;
    font-size: 1.55rem;
    font-weight: 950;
}

.modal-product-copy h2 {
    margin: 0.1rem 0 0.4rem;
    color: var(--color-green);
    font-size: 2.1rem;
}

.modal-save-hint {
    border-left: 0.22rem solid var(--color-gold);
    padding-left: 0.75rem;
    font-size: 0.94rem;
    font-weight: 760;
}

.modal-info-grid {
    display: grid;
    gap: 0.8rem;
    margin: 1rem 0;
}

.modal-info-grid section,
.modal-section,
.modal-caution {
    border: 1px solid rgba(18, 120, 84, 0.12);
    border-radius: var(--radius);
    padding: 0.9rem;
    background: rgba(248, 251, 247, 0.72);
}

.modal-info-grid h3,
.modal-section h3,
.modal-caution h3 {
    margin: 0 0 0.45rem;
    color: var(--color-green);
    font-size: 1rem;
}

.modal-info-grid p,
.modal-section p,
.modal-caution p {
    margin: 0;
    color: var(--color-ink-soft);
}

.modal-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.modal-tag-row span {
    border: 1px solid rgba(18, 120, 84, 0.14);
    border-radius: 999px;
    padding: 0.42rem 0.65rem;
    background: rgba(231, 243, 236, 0.92);
    color: var(--color-green);
    font-size: 0.88rem;
    font-weight: 850;
}

.modal-caution {
    border-color: rgba(189, 140, 53, 0.28);
    background: rgba(250, 245, 233, 0.9);
}

@media (max-width: 380px) {
    .site-header-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-section h1,
    .content-page h1 {
        font-size: 2.18rem;
    }

    .button {
        width: 100%;
    }
}

@media (min-width: 620px) {
    .trust-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pillar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .option-grid-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-grid,
    .result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finder-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .top-products-grid {
        grid-template-columns: repeat(auto-fit, minmax(17rem, 22rem));
    }

    .modal-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .synergy-product-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .member-week-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-user-card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

@media (min-width: 780px) {
    .page-content {
        padding-top: 1.85rem;
    }

    .hero-section {
        grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.82fr);
        padding: 3.1rem 0 2.75rem;
    }

    .hero-section h1,
    .content-page h1 {
        font-size: 3.55rem;
    }

    .hero-subtitle {
        font-size: 1.32rem;
    }

    .hero-intro {
        font-size: 1.06rem;
    }

    .recommendation-hero h1 {
        font-size: 3.2rem;
    }

    .site-nav {
        display: flex;
    }

    .feature-row {
        grid-template-columns: minmax(15rem, 0.85fr) minmax(0, 1.15fr);
        align-items: start;
        gap: 2rem;
        padding: 1.6rem 0;
    }

    .member-hero-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .member-week-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .product-result-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .top-products-grid {
        grid-template-columns: repeat(auto-fit, minmax(18.5rem, 22.25rem));
    }

    .compact-products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media print {
    .site-header,
    .site-footer,
    .cookie-banner,
    .member-hero-actions,
    .member-week-tabs {
        display: none !important;
    }

    .page-content,
    .content-page,
    .member-page {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .member-week-panel {
        display: grid !important;
        break-inside: avoid;
        box-shadow: none;
    }
}

@media (max-width: 779px) {
    .site-header {
        position: static;
    }

    .site-header-inner {
        flex-wrap: wrap;
        padding: 0.75rem 0 0.65rem;
    }

    .lang-switch {
        margin-left: auto;
    }

    .nav-burger {
        display: grid;
        order: 2;
    }

    /* Mobile: the nav is a full-width panel under the header row, opened by the
       burger. Dropdown groups render in-flow (no absolute clipping issues). */
    .site-nav {
        order: 3;
        display: none;
        width: 100%;
        font-size: 0.95rem;
    }

    .site-nav.is-open {
        display: grid;
        gap: 0.15rem;
        padding: 0.55rem 0 0.75rem;
        border-top: 1px solid var(--color-border);
        margin-top: 0.55rem;
    }

    .site-nav a,
    .site-nav button {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.62rem 0.7rem;
        border-radius: 12px;
    }

    .site-nav .nav-strong {
        text-align: center;
        margin-top: 0.25rem;
    }

    .nav-group {
        width: 100%;
    }

    .nav-group-btn {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .nav-group-menu {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        display: none;
        box-shadow: none;
        border: 1px solid var(--color-border);
        background: var(--color-surface-soft);
        margin: 0.15rem 0 0.3rem;
    }

    .nav-group:hover .nav-group-menu,
    .nav-group:focus-within .nav-group-menu {
        display: none;
    }

    .nav-group.is-open .nav-group-menu {
        display: grid;
    }

    .site-nav form {
        width: 100%;
    }

    .hero-section h1,
    .content-page h1 {
        font-size: 2.35rem;
    }

    .hero-showcase-grid {
        grid-template-columns: repeat(4, minmax(4.6rem, 1fr));
        overflow-x: auto;
    }

    .form-page,
    .recommendation-page,
    .dashboard-page,
    .result-page {
        padding-top: 1.65rem;
    }

    .recommendation-hero h1,
    .form-intro h1,
    .dashboard-page h1,
    .result-page h1 {
        font-size: 2rem;
    }

    .search-hero {
        padding: 1rem;
    }

    .topic-pill-row span,
    .product-meta-row span,
    .mini-product-row span {
        white-space: normal;
    }

    .cookie-banner {
        right: 0.5rem;
        bottom: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-height: 58vh;
        overflow: auto;
        font-size: 0.94rem;
    }

    .cookie-banner h2 {
        font-size: 1.38rem;
        line-height: 1.08;
    }

    .cookie-actions .button {
        flex: 1 1 9rem;
        min-height: 2.5rem;
        padding: 0.58rem 0.75rem;
        font-size: 0.9rem;
    }

    .product-card {
        grid-template-rows: auto;
    }

    .modal-product-layout {
        grid-template-columns: 1fr;
    }

    .modal-product-visual {
        aspect-ratio: 4 / 3;
        max-height: 20rem;
    }

    .product-modal {
        align-items: end;
        padding: 0.65rem;
    }

    .product-modal-dialog {
        width: 100%;
        max-height: 88vh;
    }
}

@media (min-width: 1040px) {
    .trust-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pillar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------- Homepage block grids (responsive) ---------- */
@media (min-width: 560px) {
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .how-grid { grid-template-columns: repeat(3, 1fr); }
    .category-grid { grid-template-columns: repeat(4, 1fr); }
    .value-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==================== VITALITÁS LABOR ==================== */
/* Landing hero: copy + a decorative AI "terminal" card. */
.labor-hero{display:grid;gap:2rem;align-items:center;padding:2.6rem 0 2.2rem}
@media(min-width:900px){.labor-hero{grid-template-columns:minmax(0,1.15fr) minmax(19rem,0.85fr);padding:3.4rem 0 2.8rem}}
.labor-hero-copy h1{margin:.35rem 0 .6rem}
.labor-hero-lead{max-width:36rem;color:var(--color-ink-soft);font-size:1.08rem;line-height:1.7;margin:0 0 1.2rem}

.labor-ai-card{
    border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;
    background:linear-gradient(170deg,#0d2b1f,#10382a 60%,#0d2b1f);color:#dcefe4;
    box-shadow:var(--shadow-lift);padding:1.1rem 1.2rem 1.25rem;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.86rem
}
.labor-ai-top{display:flex;align-items:center;gap:.55rem;margin-bottom:.9rem}
.labor-ai-dot{width:9px;height:9px;border-radius:50%;background:#2fd598;box-shadow:0 0 8px #2fd598;animation:eyebrowLive 2.2s ease-in-out infinite}
.labor-ai-title{font-weight:700;letter-spacing:.04em}
.labor-ai-badge{margin-left:auto;font-size:.66rem;font-weight:700;border:1px solid rgba(220,239,228,.3);border-radius:999px;padding:.1rem .5rem;opacity:.8}
.labor-ai-lines{display:grid;gap:.45rem;min-height:9.5rem}
/* The per-line stagger is data (the loop index), passed in as --line-delay. */
.labor-ai-line{margin:0;opacity:0;animation:laborLineIn .5s ease forwards;animation-delay:var(--line-delay,0s)}
.labor-ai-ok{color:#2fd598;font-weight:800;margin-right:.35rem}
.labor-ai-cursor{margin:0;color:#2fd598;animation:laborBlink 1s steps(1) infinite}
.labor-ai-meter{height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:.9rem}
.labor-ai-meter i{display:block;height:100%;width:86%;border-radius:999px;background:linear-gradient(90deg,#16a06a,#2fd598);animation:laborMeter 3.2s cubic-bezier(.22,1,.36,1) .4s both}
@keyframes laborLineIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes laborBlink{50%{opacity:0}}
@keyframes laborMeter{from{width:0}}

/* Tool cards */
.labor-tools-grid{display:grid;gap:1rem}
@media(min-width:760px){.labor-tools-grid{grid-template-columns:repeat(3,1fr)}}
.labor-tool-card{
    position:relative;display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:var(--color-ink);
    border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);
    padding:1.35rem 1.3rem 1.2rem;box-shadow:var(--shadow-subtle);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.labor-tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);border-color:var(--color-border-strong)}
.labor-tool-ic{width:3rem;height:3rem;display:grid;place-items:center;border-radius:14px;background:var(--color-green-pale);font-size:1.5rem;transition:transform .18s ease}
.labor-tool-card:hover .labor-tool-ic{transform:scale(1.08) rotate(-2deg)}
.labor-tool-card h3{margin:.2rem 0 0;font-size:1.12rem}
.labor-tool-card p{margin:0;color:var(--color-muted);font-size:.93rem;line-height:1.55}
.labor-tool-badge{align-self:flex-start;margin-top:.35rem;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--color-gold);background:var(--color-gold-soft);border:1px solid rgba(156,112,22,.25);border-radius:999px;padding:.18rem .6rem}
.labor-tool-arr{position:absolute;right:1.1rem;bottom:1rem;color:var(--color-green-bright);font-weight:900;font-size:1.1rem}

/* Locked (guest) page for gated tools */
.labor-locked{display:grid;place-items:center;padding:3rem 0}
.labor-locked-card{
    max-width:34rem;text-align:center;border:1px solid var(--color-border);border-radius:var(--radius-lg);
    background:var(--color-surface);box-shadow:var(--shadow-soft);padding:2.4rem 2rem
}
.labor-locked-ic{font-size:2.6rem;display:block;margin-bottom:.6rem}
.labor-locked-lead{color:var(--color-ink-soft);line-height:1.65;margin:.6rem 0 1.2rem}
.labor-locked .hero-actions{justify-content:center}

/* ==========================================================================
   Icon system
   Every icon on the site used to be an emoji. Emoji are a font, not artwork:
   Windows drew them in cartoon-coloured Segoe UI Emoji, macOS in a different
   style again, so the same page looked like a different product on every
   machine and nothing matched the green brand. They are now one hand-drawn
   stroke family (see _private/app/Icon.php).

   The base rule below is what makes them behave like TYPE rather than images:
   they size themselves from the surrounding font-size and take the inherited
   colour, so an icon inside an amber warning banner turns amber by itself.
   ========================================================================== */

.icon {
    /* 1.15em, not a fixed px: an icon next to 0.82rem micro-copy and one inside a
       1.2rem heading both come out visually matched to their line. */
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -0.19em;
    color: inherit;
    /* Non-scaling strokes would go hairline-thin when an icon is blown up into a
       tile; letting them scale keeps the drawing's own weight. */
    overflow: visible;
}

/* Icons that sit inline with a line of text. Deliberately NOT display:flex on the
   paragraph: the lock line is left-aligned on the home page and centred inside the
   member lock card, and a flex row pinned the icon to the far left there, away from
   the sentence it belongs to. Inline flow follows the text-align of whatever it
   lands in. */
.hero-micro .icon,
.eyebrow .icon {
    margin-right: 0.42em;
    color: var(--color-green);
}

/* --- Tiles: the three tool cards and the three how-it-works steps ----------
   The emoji used to be sized with font-size; an SVG ignores that, so each tile
   sets the icon size explicitly. */

.labor-tool-ic .icon,
.how-step-ic .icon {
    /* 1.7rem in a 3rem tile. Much under ~55% of the tile and the icon reads as an
       afterthought sitting in an empty box. */
    width: 1.7rem;
    height: 1.7rem;
    vertical-align: middle;
}

.labor-tool-ic,
.how-step-ic {
    color: var(--color-green);
}

.nav-group-ic {
    color: var(--color-green);
}

.nav-group-ic .icon {
    width: 1.15rem;
    height: 1.15rem;
}

/* The tool tile used to wobble on hover (scale + rotate). With a real drawn icon
   that reads as a toy; a lift and a deepening tint reads as a control. */
.labor-tool-card:hover .labor-tool-ic {
    transform: translateY(-2px);
    background: var(--color-green);
    color: #fff;
}

.labor-tool-ic {
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

/* The AI card's check marks — were a bare "✓" glyph, whose weight jumped
   between fonts. */
.labor-ai-ok {
    display: inline-flex;
    margin-right: 0.42rem;
    color: #2fd598;
}

.labor-ai-ok .icon {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
}

.labor-ai-line {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

@media (prefers-reduced-motion: reduce) {
    .labor-tool-ic { transition: none; }
    .labor-tool-card:hover .labor-tool-ic { transform: none; }
}

/* ==========================================================================
   Ambient background — home page
   The page sat on a flat wash, which read as "a template with the colours
   changed". This gives it depth and slow life without asking anything of the
   scroll: three soft colour fields drift on different periods so the pattern
   never visibly repeats, a fine measurement grid underneath says "lab", and a
   sparse mote layer crosses very slowly.

   PERFORMANCE IS THE WHOLE DESIGN CONSTRAINT HERE. Everything is
   position:fixed and animates transform ONLY, so the layer is composited once
   and scrolling never repaints it. No filter:blur() — the softness comes from
   the gradients themselves, which cost nothing per frame; a blurred 1000px
   element does not. No backdrop-filter anywhere: that is exactly what made the
   finder's refine bar stutter the scroll.
   ========================================================================== */

.amb {
    position: fixed;
    top: 0;
    left: 0;
    /* 100vw, not inset:0. A fixed element is sized by the initial containing block, and
       that block follows the document's width — which the hero's decorative ::before
       inflates by ~55 px on a narrow screen. With inset:0 the layer came out wider than
       the phone and its gradients were centred off to the right. 100vw is the viewport,
       full stop. Safe against the desktop scrollbar too, because html is overflow-x:clip
       and this layer is overflow:hidden, so a few excess pixels cannot start a scroll. */
    width: 100vw;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    /* Nothing inside can affect layout or paint outside this box, so the browser
       can skip it entirely while laying out the page. */
    contain: strict;
}

.amb-f {
    position: absolute;
    display: block;
    border-radius: 50%;
    will-change: transform;
}

/* Deep vital green, top right — anchors the hero's AI card side. */
.amb-f1 {
    top: -34vh;
    right: -16vw;
    width: 82vw;
    height: 82vw;
    background: radial-gradient(closest-side, rgba(22, 160, 106, 0.42), rgba(22, 160, 106, 0.13) 54%, transparent 100%);
    animation: ambDrift1 27s ease-in-out infinite;
}

/* Warm gold, low left — the brand's second colour, kept far from the green so
   they never mix into a muddy olive. */
.amb-f2 {
    bottom: -38vh;
    left: -28vw;
    width: 66vw;
    height: 66vw;
    background: radial-gradient(closest-side, rgba(198, 152, 52, 0.26), rgba(198, 152, 52, 0.07) 50%, transparent 100%);
    animation: ambDrift2 34s ease-in-out infinite;
}

/* A cooler mint, mid right, on the longest period — this is the one that stops
   the other two from looking like a fixed two-colour gradient. */
.amb-f3 {
    top: 28vh;
    left: 34vw;
    width: 58vw;
    height: 58vw;
    background: radial-gradient(closest-side, rgba(47, 213, 152, 0.28), rgba(47, 213, 152, 0.06) 56%, transparent 100%);
    animation: ambDrift3 41s ease-in-out infinite;
}

/* The light source. Without it the three colour fields tint the whole viewport
   evenly and the page reads as hazy — headings and body copy end up sitting on a
   coloured wash rather than on paper. This is a broad, near-white pool over the
   reading column: the fields survive at the edges, the text gets a clean ground,
   and the page gains a direction for its light. Breathes on its own period so it
   never syncs with the fields underneath. */
.amb-light {
    position: absolute;
    inset: 0;
    display: block;
    /* Reaches far enough down to cover the whole reading column — the pool used to
       end below the hero and the lower sections were left sitting in the warm field.
       Kept deliberately lighter than that first fix: the cards now carry their own
       edge (stronger hairline + a real shadow), so the pool no longer has to bleach
       the ground to keep them legible, and the colour survives around them. */
    background: radial-gradient(88vw 128vh at 46% 40%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.46) 40%, rgba(255, 255, 255, 0.14) 64%, transparent 82%);
    will-change: transform;
    animation: ambLight 31s ease-in-out infinite;
}

/* Measurement grid — two elements, on purpose.
   This one only holds the soft-ellipse mask that stops the ruling reaching an edge
   and turning into "a table with borders". It never moves, so the mask is rasterised
   once; masking a layer that animates makes some GPUs re-apply the mask every frame,
   and this layer covers the whole viewport. */
.amb-grid {
    position: absolute;
    inset: -10%;
    display: block;
    opacity: 0.62;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(120vh 100vh at 62% 26%, #000 10%, transparent 76%);
    mask-image: radial-gradient(120vh 100vh at 62% 26%, #000 10%, transparent 76%);
}

/* ...and the ruling itself lives here, where it can drift.
   This is where most of the page's perceived movement comes from, and it took a
   while to see why: the colour fields are so soft that even a 14vw slide barely
   changes the picture — there is no edge for the eye to follow. A ruled pattern is
   nothing but edges, so a slow crawl across it is unmistakable, and it reads as an
   instrument taking a measurement rather than as decoration.
   The inset covers the travel; the cycle is exactly one cell, so there is no seam. */
.amb-grid::before {
    content: "";
    position: absolute;
    inset: -80px;
    background-image:
        linear-gradient(rgba(15, 125, 84, 0.085) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 125, 84, 0.075) 1px, transparent 1px);
    background-size: 58px 58px;
    will-change: transform;
    animation: ambGrid 19s linear infinite;
}

/* Motes — light caught in the air. Two offset dot fields on one layer, drifting
   diagonally; the tile is deliberately not square so the two never lock into a
   visible repeat. */
.amb-motes {
    position: absolute;
    inset: -30%;
    display: block;
    opacity: 0.8;
    background-image:
        radial-gradient(circle, rgba(15, 125, 84, 0.5) 1.4px, transparent 1.5px),
        radial-gradient(circle, rgba(176, 132, 40, 0.4) 1.3px, transparent 1.4px);
    /* Both dot fields MUST share one tile size. They used to be 190x190 and 273x249,
       and the loop translated by 190px — a whole tile for the first field, an arbitrary
       fraction of the second, so the far field jumped back every cycle. One tile, two
       offsets, two dot sizes: same scattered look, and the loop is seamless. */
    background-size: 210px 190px, 210px 190px;
    background-position: 0 0, 105px 95px;
    will-change: transform;
    animation: ambMotes 21s linear infinite;
}

@keyframes ambDrift1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.92); opacity: 0.72; }
    35% { transform: translate3d(-11vw, 4vh, 0) scale(1.2); opacity: 1; }
    70% { transform: translate3d(-3vw, 11vh, 0) scale(1.04); opacity: 0.85; }
}

@keyframes ambDrift2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.12); opacity: 1; }
    40% { transform: translate3d(13vw, -9vh, 0) scale(0.9); opacity: 0.7; }
    75% { transform: translate3d(4vw, -3vh, 0) scale(1.05); opacity: 0.9; }
}

@keyframes ambDrift3 {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.86); opacity: 0.7; }
    30% { transform: translate3d(-14vw, -10vh, 0) rotate(40deg) scale(1.18); opacity: 1; }
    62% { transform: translate3d(9vw, 8vh, 0) rotate(-25deg) scale(0.98); opacity: 0.82; }
}

@keyframes ambLight {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(5vw, -4vh, 0) scale(1.12); }
}

@keyframes ambGrid {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(58px, 58px, 0); }
}

@keyframes ambMotes {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(210px, -190px, 0); }
}

@keyframes ambMotesBack {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-158px, 174px, 0); }
}

/* The content has to own a stacking context above the ambient layer, or a
   negative z-index puts it behind the section backgrounds too. */
.labor-hero,
.section-block,
.home-cta,
.compliance-note {
    position: relative;
    z-index: 1;
}

/* Motion is decoration here, so it is the first thing to go. The fields stay —
   frozen they are still a better background than the flat wash was. */
@media (prefers-reduced-motion: reduce) {
    .amb-f,
    .amb-light,
    .amb-grid::before,
    .amb-motes {
        animation: none;
    }
}

/* A second mote field, smaller and slower, travelling the OTHER way. One field
   drifting on its own reads as a texture sliding past; two crossing at different
   speeds read as depth — the eye takes the slower, fainter one as further away.
   This is where most of the sense of movement comes from, and it costs one more
   composited layer. */
.amb-motes-far {
    opacity: 0.42;
    background-image:
        radial-gradient(circle, rgba(15, 125, 84, 0.34) 1px, transparent 1.1px),
        radial-gradient(circle, rgba(47, 213, 152, 0.3) 0.9px, transparent 1px);
    background-size: 158px 174px, 158px 174px;
    background-position: 31px 0, 79px 87px;
    animation: ambMotesBack 37s linear infinite;
}

/* On a phone the fields are proportionally enormous and the motes read as dirt
   on the screen. Keep the colour, drop the busywork. */
@media (max-width: 640px) {
    .amb-motes { display: none; }
    .amb-grid { opacity: 0.34; }
}

/* ==========================================================================
   Ambient background — every page EXCEPT home (.qamb, "quiet ambient")
   Owner: "a főoldalon kívül a háttér mindenhol egyhangú unalmas… valami szép
   kellemes görgetéssel picit úszó háttér, ami nem tolakodó."

   Why the inner pages actually went flat: body's decoration is painted at the
   DOCUMENT origin, not the viewport (background-attachment defaults to scroll,
   and it is no-repeat). Its radial is 620px tall, so past the first screenful
   every page drops to the bare --color-canvas. On a long page — ÁSZF, the
   evaluator, the account — that is most of what you look at.

   So this layer is position:fixed: it stays with the eye instead of scrolling
   away. It is deliberately NOT the home page's layer at lower opacity — home
   keeps its own identity (grid, motes, three fields, always moving). This one
   is two soft fields and a light pool, and its movement comes FROM the scroll:
   the fields translate along a scroll timeline, in opposite directions, so the
   page reads as having depth without anything ever crossing your reading line.

   Same performance rule as home, for the same reason: transform only, no
   filter/backdrop-filter. The sticky header already re-blurs its backdrop while
   you scroll; a layer that only moves DURING scroll adds nothing to that cost,
   which is why the drift is a fallback here rather than the main event.
   ========================================================================== */

.qamb {
    position: fixed;
    top: 0;
    left: 0;
    /* 100vw for the same reason as .amb: a fixed element is sized by the initial
       containing block, which follows the document width, not the viewport. */
    width: 100vw;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

/* Two elements per field on purpose: the wrapper carries the scroll-linked
   float, the inner one the slow autonomous drift. Composing them on one element
   is not possible — the second `transform` would simply replace the first. */
.qamb-f {
    position: absolute;
    display: block;
    will-change: transform;
}

.qamb-f > i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    will-change: transform;
}

/* Vital green, high right. Kept clear of the very top: body's own radial sits at
   84% -12%, and the two stacked there turned the first screenful noticeably
   greener than the rest of the page. */
.qamb-f1 {
    top: -18vh;
    right: -22vw;
    width: 76vw;
    height: 76vw;
    animation: qambDriftA 74s ease-in-out infinite;
}

.qamb-f1 > i {
    background: radial-gradient(closest-side, rgba(22, 160, 106, 0.19), rgba(22, 160, 106, 0.055) 55%, transparent 100%);
}

/* Cooler mint, low left. No gold on the inner pages — body's comment above is
   the reason: gold belongs to the home layer alone, or the lower left silts up
   into a beige haze. */
.qamb-f2 {
    bottom: -28vh;
    left: -24vw;
    width: 64vw;
    height: 64vw;
    animation: qambDriftB 91s ease-in-out infinite;
}

.qamb-f2 > i {
    background: radial-gradient(closest-side, rgba(47, 213, 152, 0.17), rgba(47, 213, 152, 0.045) 56%, transparent 100%);
}

/* Measurement grid, in patches — the home page's signature, quoted rather than
   copied (owner: "nem kell 1:1-ben másolni… halványodva foltokban").
   Three differences from .amb-grid, each deliberate:
     · a coarser cell (72px vs 58px), so it reads as a related ruling, not the same one
     · roughly half the effective ink (0.42 × 0.07 against home's 0.62 × 0.085)
     · a mask made of three separate blobs instead of one big ellipse, so it shows
       up in islands and dissolves between them

   It sits BELOW .qamb-veil on purpose. Home puts its grid above the light pool,
   because there the grid IS the motion. Here the pool washes it out exactly over
   the reading column and lets it survive at the edges — which is both the
   "faded patches" look and the reason body copy never sits on ruling.

   Two elements for the same reason as home: the mask lives on the static wrapper.
   Masking a layer that animates makes some GPUs re-apply the mask every frame,
   and this one covers the viewport. */
.qamb-grid {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0.5;
    overflow: hidden;
    -webkit-mask-image:
        radial-gradient(38vw 36vh at 79% 16%, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 78%),
        radial-gradient(32vw 30vh at 12% 64%, #000 0%, rgba(0, 0, 0, 0.45) 44%, transparent 76%),
        radial-gradient(26vw 24vh at 61% 93%, #000 0%, rgba(0, 0, 0, 0.4) 42%, transparent 74%);
    mask-image:
        radial-gradient(38vw 36vh at 79% 16%, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 78%),
        radial-gradient(32vw 30vh at 12% 64%, #000 0%, rgba(0, 0, 0, 0.45) 44%, transparent 76%),
        radial-gradient(26vw 24vh at 61% 93%, #000 0%, rgba(0, 0, 0, 0.4) 42%, transparent 74%);
}

.qamb-grid > i {
    position: absolute;
    inset: -100px;
    display: block;
    /* Stronger per-line than home's 0.085/0.075, which looks wrong written down —
       but this layer sits UNDER the veil and behind a partial mask, and both
       multiply it down. Measured at the patch centres the ruling lands ~4 RGB
       steps against its own gap; home's lands ~5. Set from that delta, not from
       the declared alpha. */
    background-image:
        linear-gradient(rgba(15, 125, 84, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 125, 84, 0.115) 1px, transparent 1px);
    background-size: 72px 72px;
    will-change: transform;
}

/* The reading ground. Without it the two fields tint the whole viewport evenly
   and body copy ends up on a coloured wash — the same problem .amb-light solves
   on home. Static: this one is for legibility, not for life. */
.qamb-veil {
    position: absolute;
    inset: 0;
    display: block;
    /* Narrower than it first was (94vw), and centred on the reading column rather
       than the viewport width. At 94vw it reached both fields and bleached them:
       the page came out white on the right and green only in the lower left, which
       read as lopsided rather than lit. */
    background: radial-gradient(72vw 112vh at 50% 34%, rgba(255, 255, 255, 0.63), rgba(255, 255, 255, 0.31) 46%, rgba(255, 255, 255, 0.09) 68%, transparent 84%);
}

/* Fallback life for browsers without scroll-driven animations — very long
   periods, so on its own it is barely perceptible and never competes with home. */
@keyframes qambDriftA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-4vw, 3vh, 0) scale(1.07); }
}

@keyframes qambDriftB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
    50% { transform: translate3d(5vw, -3vh, 0) scale(0.97); }
}

/* The float itself. Opposite directions and different distances: the eye reads
   the slower, fainter field as further away, which is what turns two gradients
   into depth. */
@keyframes qambFloatA {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -11vh, 0); }
}

@keyframes qambFloatB {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, 7vh, 0); }
}

/* The grid moves LEAST — a third of f1. In parallax the deepest plane travels
   the shortest distance, and ruling is the one thing here that should read as
   anchored rather than floating. It gets no fallback drift either: a ruled
   pattern is nothing but edges, so a continuous crawl would be the loudest
   thing on an inner page. On home that is the point; here it is not. */
@keyframes qambGridFloat {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -3.5vh, 0); }
}

/* Scroll-driven animations where they exist (Chrome/Edge 115+, Firefox 136+,
   Safari 26+). Everywhere else the drift above is all there is — quiet, but not
   dead. NOTE the declaration order: the `animation` shorthand resets
   animation-timeline to `auto`, so the timeline MUST come after it. */
@supports (animation-timeline: scroll()) {
    .qamb-f1 > i {
        animation: qambFloatA linear both;
        animation-timeline: scroll(root block);
    }

    .qamb-f2 > i {
        animation: qambFloatB linear both;
        animation-timeline: scroll(root block);
    }

    .qamb-grid > i {
        animation: qambGridFloat linear both;
        animation-timeline: scroll(root block);
    }
}

@media (prefers-reduced-motion: reduce) {
    .qamb-f,
    .qamb-f > i,
    .qamb-grid > i {
        animation: none;
    }
}

/* On a phone the fields are proportionally huge and the veil ends up bleaching
   the middle of the screen. Smaller fields, weaker pool. */
@media (max-width: 640px) {
    .qamb-f1 { width: 108vw; height: 108vw; right: -30vw; }
    .qamb-f2 { width: 96vw; height: 96vw; left: -34vw; }
    /* A phone screen is barely wider than one patch, so three of them stop reading
       as islands and just tile the screen. One patch, dimmer, high on the right. */
    .qamb-grid {
        opacity: 0.3;
        -webkit-mask-image: radial-gradient(78vw 34vh at 76% 14%, #000 0%, rgba(0, 0, 0, 0.5) 46%, transparent 78%);
        mask-image: radial-gradient(78vw 34vh at 76% 14%, #000 0%, rgba(0, 0, 0, 0.5) 46%, transparent 78%);
    }
    .qamb-veil {
        background: radial-gradient(120vw 100vh at 50% 40%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.24) 48%, transparent 78%);
    }
}

/* --- Cards on the ambient ground ------------------------------------------
   A white card with a pale-green hairline works on a plain canvas. It stops
   working once the ambient layer's warm field passes under it: cream ground,
   white card, near-white border — the edge disappears and the lower sections
   read as one soft mass. The fix is not to dim the background but to let the
   card carry its own edge: a stronger hairline, and a shadow that actually
   describes a lift rather than a hint of one. */
.labor-tool-card,
.how-step {
    border-color: var(--color-border-strong);
    box-shadow:
        0 1px 2px rgba(18, 70, 50, 0.06),
        0 10px 26px rgba(18, 70, 50, 0.09),
        0 2px 0 rgba(255, 255, 255, 0.9) inset;
}

/* Hover has to still read as a step up from that. */
.labor-tool-card:hover {
    border-color: var(--color-green-bright);
    box-shadow:
        0 2px 4px rgba(18, 70, 50, 0.08),
        0 18px 40px rgba(18, 70, 50, 0.14);
}

/* ==========================================================================
   The closing block — call to action + the compliance notice
   The page used to end on two pale boxes of nearly equal weight: a soft mint
   panel with one sentence and one button, then a cream card of fine print.
   Nothing said "this is the end of the page", and nothing said which of the two
   mattered. Both problems are hierarchy, not decoration.

   The call to action is now the page's one dark moment. It rhymes with the AI
   panel in the hero, so the page is bookended in the brand's deep green, and it
   is the highest-contrast thing on screen at exactly the point where the reader
   has to decide. The notice below steps back into being a footnote.
   ========================================================================== */

.home-cta {
    /* Full content width. It carried its own `width: min(1160px, 100% - gutter)` while
       already sitting inside .page-content, which applies that same gutter — so the
       panel was inset twice and its edges missed the card grid directly above it by a
       clear margin. Read as misalignment, not as a deliberate inset. */
    width: auto;
    margin: 4.2rem 0 0;
}

.home-cta-inner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(760px 340px at 50% -22%, rgba(47, 213, 152, 0.26), transparent 68%),
        radial-gradient(520px 300px at 92% 118%, rgba(190, 145, 46, 0.16), transparent 66%),
        linear-gradient(158deg, #14563f 0%, #0c3a2c 56%, #092c22 100%);
    border: 1px solid rgba(143, 214, 180, 0.24);
    color: #eafaf2;
    box-shadow:
        0 22px 54px -20px rgba(9, 52, 38, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.07) inset;
}

/* The same measurement grid as the ambient background, so the two read as one
   idea rather than as a dark box that happens to be here. Static: this panel is
   a destination, and something moving under a decision is a distraction. */
.home-cta-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(143, 214, 180, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(143, 214, 180, 0.11) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(90% 120% at 50% 0%, #000 5%, transparent 72%);
    mask-image: radial-gradient(90% 120% at 50% 0%, #000 5%, transparent 72%);
}

.home-cta-inner .eyebrow {
    color: #e3c179;
}

.home-cta-inner h2 {
    color: #ffffff;
}

.home-cta-inner p {
    color: #b6d6c5;
}

.home-cta-inner .hero-actions {
    justify-content: center;
    margin-top: 1.5rem;
}

/* On the dark ground the primary button is the white one — a green fill would
   sink into the panel. */
.home-cta-inner .button-primary {
    background: #ffffff;
    color: #0c3a2c;
    border-color: transparent;
}

.home-cta-inner .button-primary:hover,
.home-cta-inner .button-primary:focus-visible {
    background: #eafaf2;
    box-shadow: 0 0 0 4px rgba(234, 250, 242, 0.16);
}

/* The second action borrows the exact green of the progress bar in the hero's AI
   panel (#16a06a → #2fd598). It was a muted grey-green pill that read as disabled
   next to the white primary; the bar's green is the brightest note the brand has,
   so it stays clearly secondary in WEIGHT — outline, not fill — while looking like
   something you may press.

   `color` is in the transition list on purpose: the base .button rule animates
   background, border and shadow but not colour, so on hover the text used to snap
   to dark a frame before the fill arrived under it. */
.home-cta-inner .button-secondary {
    background: rgba(47, 213, 152, 0.08);
    border: 1px solid rgba(47, 213, 152, 0.5);
    color: #2fd598;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease,
                box-shadow 160ms ease, color 160ms ease;
}

.home-cta-inner .button-secondary:hover,
.home-cta-inner .button-secondary:focus-visible {
    /* Fills with the bar itself. Dark ink on top, because #2fd598 is far too bright
       to carry white text. */
    background: linear-gradient(90deg, #16a06a, #2fd598);
    border-color: transparent;
    color: #06291d;
    box-shadow:
        0 0 0 4px rgba(47, 213, 152, 0.18),
        0 10px 24px -10px rgba(47, 213, 152, 0.55);
}

.home-cta-inner .button-secondary:active {
    transform: translateY(0);
    box-shadow: 0 0 0 3px rgba(47, 213, 152, 0.22);
}

/* What is behind the button, named. */
.cta-chips {
    list-style: none;
    margin: 1.9rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}

.cta-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border-radius: var(--radius-pill);
    background: rgba(234, 250, 242, 0.06);
    border: 1px solid rgba(143, 214, 180, 0.22);
    color: #cfe6d9;
    font-size: 0.86rem;
    font-weight: 650;
}

.cta-chips .icon {
    width: 1.05rem;
    height: 1.05rem;
    color: #7fd8ae;
}

/* --- The compliance notice, as a footnote ---------------------------------- */

.compliance-note {
    margin-top: 2.6rem;
    padding: 1.4rem 0 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--color-border-strong);
    border-radius: 0;
    box-shadow: none;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1rem;
    align-items: start;
}

.compliance-ic {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--radius-sm);
    background: var(--color-green-pale);
    color: var(--color-green);
}

.compliance-ic .icon {
    width: 1.2rem;
    height: 1.2rem;
}

/* Was 1.68rem — heading size for something that is a footnote. Smaller, but
   deliberately NOT faded: this is a required notice and it has to stay easy to
   read. Only its weight in the hierarchy changes, not its legibility. */
.compliance-note h2 {
    margin: 0.1rem 0 0.25rem;
    font-size: 1.12rem;
    color: var(--color-green);
}

.compliance-note .eyebrow {
    margin: 0;
}

.compliance-note p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 62ch;
}

@media (max-width: 560px) {
    .compliance-note {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }
}

/* ============================================================================
   THE FOOTER PLANE
   Owner: "még az alsó részt kellene picit profibbra mert egybeolvad eléggé."

   That complaint is literally true, and it is arithmetic rather than taste.
   Everything at the bottom of the page sat inside a 1.02-1.24:1 band against the
   canvas: the newsletter card fill measured 1.02:1 at BOTH its gradient stops,
   its border 1.09:1, the footer hairline 1.20:1, the compliance hairline 1.24:1
   - those last two the same colour to within 4/255 in one channel, i.e. one line
   drawn twice, ~197px apart. On top of that the body text (--color-muted,
   3.94:1) and the links (--color-green, 4.63:1) sit at nearly the same
   LUMINANCE, so the type read as one uniform grey-green wash.

   So the footer gets a ground of its own instead of a better hairline. Deep
   green, not white and not a deeper tint of the canvas: white is the same
   material as every content card here and is LIGHTER than the canvas (a document
   that ends on its brightest note has no closing gesture), and a tint has
   already been tried - the newsletter card IS a tint of the canvas, and it
   measures 1.02:1. The ground pays for itself twice: it deletes the hairline
   problem outright, and it flips every failing grey-on-pale string in the site's
   compliance surface to 6.7-13.5:1 white-on-dark.

   COLOUR POLICY, stated once so it survives the next round of feedback:
   --color-muted is BANNED from this footer. It is 3.94:1 on the canvas, below
   AA, and it is the physical cause of the blend. When "make it quieter" is asked
   for, the levers are SIZE and WEIGHT - never opacity, never a lighter grey.

   MATERIAL: this palette is not invented. #eafaf2 / #b6d6c5 / #e3c179 / #cfe6d9
   / #0c3a2c are already in service on .home-cta-inner and .cta-chips. Only the
   two plane stops, one quiet green and one autofill fill are new, and they are
   footer-local custom properties rather than :root additions, because nothing
   outside this footer wants them.

   NO backdrop-filter, NO blur, NO masked layer, NO texture pseudo-element. That
   is stricter than it looks: .site-header is position:sticky with
   backdrop-filter: blur(16px), and EVERY pixel of this footer scrolls underneath
   it, so the header re-samples and re-blurs it on every scroll frame. A flat
   gradient is the cheapest thing that can pass under a live backdrop-filter; a
   masked grid is not. Losing the texture is also a design win - the 46px
   measurement grid now belongs to the CTA panel alone, which is what makes
   "lifted panel above a flat ground" read as a rank instead of as two dark
   boxes stacked.
   ------------------------------------------------------------------------- */

/* --- 1. The plane -------------------------------------------------------- */

/* `footer.site-footer`, not `.site-footer`: this has to beat the shared gutter
   rule near the top of this file, which groups the footer with .page-content and
   gives it width:min(1160px,...);margin:0 auto. A bare class would win only by
   SOURCE ORDER, and would silently lose the moment anyone appends another
   .site-footer rule or moves this block into its own stylesheet - collapsing the
   plane into a centred 1150px dark band with page canvas either side, which is
   materially worse than the nothing it replaced. The type selector makes it
   0-1-1 and the order stops mattering. */
footer.site-footer {
    /* Footer-local tokens. The whole ground retunes from these six. */
    --fg-ink: #eafaf2;                      /* = .home-cta-inner colour   - 12.51:1 */
    --fg-soft: #b6d6c5;                     /* = .home-cta-inner p        -  8.62:1 */
    --fg-quiet: #9dbfae;                    /* fine print                 -  6.75:1 */
    --fg-gold: #e3c179;                     /* = .home-cta-inner .eyebrow -  7.82:1 */
    --fg-rule: rgba(255, 255, 255, 0.13);
    --footer-pad: 3rem;                     /* THE dial for vertical weight */

    /* width:100%, never 100vw - 100vw includes the scrollbar and would push the
       document sideways. html is overflow-x:clip, so full bleed is safe. */
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;

    position: relative;
    /* The 1.20:1 hairline is deleted outright, not restyled: 12.14:1 replaces it,
       and it now runs wall to wall instead of stopping ~58px short of each
       viewport edge - which is why the old rule read as a divider between two
       content blocks rather than as the end of the document. */
    border-top: 0;

    /* Descends as it goes, so the page sinks rather than stops. Percentage stops,
       so it retunes itself on a ~400px desktop footer and a ~700px mobile one
       with no media query. Every contrast figure in this block is computed
       against the LIGHTEST stop - the worst case for light type. */
    background: linear-gradient(180deg, #0b3529 0%, #061c16 100%);
    color: var(--fg-soft);
    font-size: 0.9rem;

    /* #hirlevel lives on this element (the newsletter redirect anchor) and the
       header is sticky - without this the anchor jump lands under the bar. */
    scroll-margin-top: 5rem;
}

/* A catch-light on the top edge, not a border: it belongs to the DARK side, so it
   does not repeat the hairline gesture the light side already owns. */
.site-footer::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: rgba(234, 250, 242, 0.16);
    pointer-events: none;
}

/* The contained column, restated - mirrors .site-header-inner. */
.site-footer-inner {
    width: min(1160px, calc(100% - clamp(2.5rem, 9vw, 9rem)));
    margin: 0 auto;
    /* The closing air. The page used to end 32px after the last link, flush with
       the padding - footer bottom to document end measured 0px, i.e. it stopped
       mid-gesture. env() so the plane reaches the physical bottom edge on an
       iPhone rather than stopping above the home indicator. */
    padding: var(--footer-pad) 0 calc(2.4rem + env(safe-area-inset-bottom, 0px));
}

/* --- 2. Masthead row: brand | newsletter --------------------------------- */

.footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 900px) {
    /* Fills the ~386px of dead gradient the old card left beside its copy and the
       ~546px beside its form (both were max-width-capped inside a full-width
       card). That emptiness was half the "unresolved" feeling; darkening the fill
       alone would only have produced a bigger VISIBLE empty rectangle. */
    .footer-top {
        grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
        column-gap: clamp(2.2rem, 4vw, 3.4rem);
    }

    /* Rule on the newsletter's leading edge with matching padding, so the divider
       sits the same distance from both columns instead of hugging one. */
    .footer-newsletter {
        border-inline-start: 1px solid var(--fg-rule);
        padding-inline-start: clamp(2.2rem, 4vw, 3.4rem);
    }

    /* NO measure caps here, and that is the correction of a real mistake.
       `.footer-news-note { max-width: 46ch }` computed to 317px while the line
       needs 380px and the column offers 622px — so the cap itself was breaking a
       one-line legal note onto two, leaving 305px of the column empty beside it
       and costing a line of height for nothing. A measure cap earns its place on
       running text; on a single 69-character sentence it only decides where the
       break lands. The column IS the measure here: 622px at 12.8px is ~69ch,
       already inside the comfortable 45–75ch band, and the longest locale (CZ/SK
       at ~85 characters) still fits on one line. `.footer-brand-note` had the
       same problem in miniature — a 34ch cap inside a 272px (~40ch) column. */
}

/* --- 3. Brand block ------------------------------------------------------ */

.footer-brand {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    align-content: start;
    gap: 0.85rem;
}

/* The artwork is PLACED, never touched: no recolour, no redraw, and - note - no
   `overflow: hidden` and no mobile shrink. The <picture> is an auto-width grid
   item, so the img resolves to its intrinsic 44px; clipping it inside a smaller
   box would be a CROP of the logo, not a placement. 2.75rem is exactly 44px, at
   every breakpoint. The 12px radius is the mark's established presentation here.
   The mark carries its own pale ground, so on the plane it reads as a light tile
   - deliberate, and the same treatment the share cover uses. */
.footer-mark {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.55);
}

/* Both, not just the img: <picture> is the auto-width box in between, so sizing
   only the img makes width:100% resolve against the intrinsic 44px instead of
   against the container. */
.footer-mark picture,
.footer-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

/* The ONLY serif element in the footer. A brand name is always Latin, so this is
   Lora in all 12 locales - the self-hosted subset is latin + latin-ext only, so
   anything here carrying Cyrillic would fall through to Georgia. That is exactly
   why nl_head below is in the sans stack. 13.50:1. */
.footer-brand-name {
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff;
}

/* footer_note, lifted out of the 175-character copyright span. That move alone
   takes the terminal sentence from 175 characters to 86 in Hungarian - the
   difference between a line that is read and a line that is skipped. 6.75:1. */
.footer-brand-note {
    grid-column: 1 / -1;
    margin: 0.85rem 0 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--fg-quiet);
}

/* --- 4. Newsletter, de-carded -------------------------------------------- */

/* The card was 1.02:1 against the canvas at both gradient stops, and half empty.
   On its own ground it does not need to be a card at all - that is the point of
   the treatment: the ground does the work, so the contents stop needing boxes. */
.footer-newsletter {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.footer-news-copy {
    max-width: 40rem;
    margin-bottom: 1rem;
}

/* PARENT-SCOPED ON PURPOSE (0-2-0). `.footer-news-copy p` is 0-1-1 and would
   silently eat this colour and margin, leaving a mint eyebrow flush against the
   heading with no error anywhere - the identical specificity trap that had been
   killing the compliance eyebrow. Do not "simplify" this selector to a bare
   class. And NOT `.eyebrow`: finder.css redefines that globally as a white pill
   chip and loads after app.css on the recommendation page. */
.footer-news-copy .footer-eyebrow {
    margin: 0 0 0.35rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.4;
    text-transform: uppercase;
    /* 7.82:1 here. The same string is 3.98:1 on the canvas and FAILS AA at this
       size - the ground is what makes brand gold usable at 11.5px. */
    color: var(--fg-gold);
}

/* var(--font-sans), NOT var(--font-display). This is the only TRANSLATED heading
   in the footer and therefore the only one that renders Cyrillic; in Lora it
   would drop to Georgia on /uk/ alone, at 1.3rem in white on dark - the most
   conspicuous possible place for a face swap. 13.50:1. */
.footer-news-copy strong {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

.footer-news-copy p {
    margin: 0;
    color: var(--fg-soft);          /* 8.62:1 - was 3.85:1 */
}

.footer-news-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: 34rem;
}

/* A recessed field then a solid button: the pair reads as "type here, then
   press". Two white pills side by side would have merged into one shape. The
   border alpha is .56, not the .46 that looks right - .46 measures 2.90:1
   against the plane and misses the 3:1 a form control's visible boundary needs.
   .56 is 3.59:1. */
.footer-news-form input[type="email"] {
    flex: 1 1 15rem;
    min-width: 0;                   /* flex default is auto; without this the field
                                       cannot shrink below its intrinsic width and
                                       overflows at 375px */
    padding: 0.72rem 1.15rem;
    border: 1px solid rgba(143, 214, 180, 0.56);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    font: inherit;
}

.footer-news-form input[type="email"]::placeholder {
    color: var(--fg-quiet);
    opacity: 1;                     /* Firefox dims placeholders by default, which
                                       would drop this under AA */
}

/* Chrome paints autofilled fields pale yellow, which on a dark ground looks as
   though the field has been replaced by a light box. */
.footer-news-form input[type="email"]:-webkit-autofill,
.footer-news-form input[type="email"]:-webkit-autofill:hover,
.footer-news-form input[type="email"]:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #173a2e inset;
    caret-color: #ffffff;
}

/* White, matching .home-cta-inner .button-primary: the site has already decided
   that on a dark ground the primary action is white. The bright #2fd598 stays
   reserved for the AI/progress language, where it means something. */
.footer-news-form button {
    flex: 0 0 auto;
    padding: 0.72rem 1.45rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: #0c3a2c;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.footer-news-form button:hover {
    background: var(--fg-ink);
    box-shadow: 0 0 0 4px rgba(234, 250, 242, 0.14);
}

/* The ?hirlevel=ok|already|invalid slot, kept exactly where it was. Rendered as a
   LIGHT chip on the site's own feedback tokens rather than as tinted text:
   --color-danger is 1.9:1 on this plane and every danger/warn value in :root is
   tuned for light grounds, so tinted text here would have needed an invented
   pale red. A chip works on any ground, is the same object the rest of the site
   uses for status, and carries an icon so the state is not signalled by colour
   alone. 5.89:1 success, 6.13:1 error, on their own backgrounds. */
.footer-news-msg {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.85rem 0 0;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
}

.footer-news-msg .icon { width: 1.05rem; height: 1.05rem; }

.footer-news-msg.is-ok {
    border: 1px solid var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--color-success);
}

.footer-news-msg.is-err {
    border: 1px solid var(--color-danger-border);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.footer-news-note {
    margin: 0.85rem 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--fg-quiet);         /* 6.75:1 - was 3.85:1 */
}

.footer-news-note a {
    color: #cfe6d9;                 /* = .cta-chips li colour - 10.42:1 */
    font-weight: 700;
}

/* --- 5. The colophon band ------------------------------------------------ */

.footer-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.15rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--fg-rule);
}

@media (min-width: 900px) {
    /* TWO EQUAL minmax(0,1fr) TRACKS, not `1fr auto`. An `auto` track sizes to the
       nav's max-content - Ukrainian's four links run ~630px unwrapped - which
       between roughly 760px and 1000px squeezes the copyright column into a
       ~120px ribbon of ten-plus lines. Silent, locale-dependent, and invisible to
       anyone testing in Hungarian on a 1280px screen. Two shrinkable halves
       cannot crush each other. */
    .footer-bottom {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        gap: 1.15rem 2.5rem;
    }

    .footer-legal { text-align: right; }
}

/* DOM order == visual order at every width - no `order`, no grid reordering - so
   focus order and reading order stay identical in all 12 locales. */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;            /* was a flat 0.75rem, where every gap in the
                                       footer landed in the same 18-33px band and
                                       nothing grouped with anything */
    margin: 0;
}

/* padding + an explicit line-height, not decoration: 0.88rem at the inherited
   1.62 gives a 23.5px tap target, under the 24px minimum. This is ~31px. On a
   phone a legal link you cannot reliably hit is not "clearly legible" in any
   useful sense, and this is the compliance surface. */
.footer-links a {
    display: inline-block;
    padding: 0.3rem 0;
    border-bottom: 1px solid transparent;
    color: var(--fg-ink);           /* 12.51:1 - was 4.63:1 */
    font-size: 0.88rem;
    font-weight: 620;
    line-height: 1.5;
    text-decoration: none;
    transition: border-color 140ms ease;
}

.footer-links a:hover {
    border-bottom-color: rgba(234, 250, 242, 0.55);
}

.footer-legal {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.6;
}

/* Two weights on two lines. No white-space:nowrap and no CSS-drawn separator:
   nowrap is inherited by a ::after, so the separator cannot break away and
   orphans at the end of line one at 375px, and it removes the only escape valve
   if the configured site name is ever lengthened. */
.footer-copy {
    color: var(--fg-soft);
    font-weight: 650;
}

.footer-rights { color: var(--fg-quiet); }

/* --- 6. Focus, on a dark ground ------------------------------------------ */

/* --focus-ring is rgba(22,160,106,.28), which composites to 1.84:1 against this
   plane - effectively no indicator, and on the legal links it would REPLACE the
   browser default with something worse. One solid gold outline for everything in
   here; #e3c179 is 7.82:1. Specificity 0-2-1 so it beats the global rules. */
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.site-footer input:focus-visible {
    outline: 0.18rem solid var(--fg-gold);
    outline-offset: 0.2rem;
    box-shadow: none;
}

.site-footer input[type="email"]:focus-visible {
    border-color: rgba(143, 214, 180, 0.85);
}

/* --- 7. Mobile ----------------------------------------------------------- */

/* The brand block costs ~110px at 375px and the de-carding gives back ~40px.
   That is the honest price of a footer that reads as an ending. --footer-pad is
   the first dial if it turns out to be too much; the next cut would be hiding
   .footer-brand-note below 560px, which should NOT be the first move - that is
   now the only place footer_note appears. */
@media (max-width: 560px) {
    footer.site-footer { --footer-pad: 2.2rem; }

    .site-footer-inner {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    }

    .footer-top { gap: 1.7rem; }
    .footer-bottom { margin-top: 2rem; }

    .footer-brand-note {
        margin-top: 0.7rem;
        font-size: 0.8rem;
        line-height: 1.5;
    }
}

/* ============================================================================
   TWO ADJACENT FIXES - same complaint, different elements. Both were found by
   reading the cascade, both verified in the browser before changing.
   ------------------------------------------------------------------------- */

/* (a) The compliance eyebrow had NEVER rendered as an eyebrow. `.eyebrow` is
   0-1-0; `.compliance-note p` is 0-1-1 and sets both colour and font-size, so it
   won. "FONTOS TÁJÉKOZTATÁS" printed at 14.4px in the same #6a7d72 as the body
   two lines below it - three lines of identical grey, which is the owner's
   complaint in miniature, on the one block that is legally required to be read.
   Measured before the fix: this eyebrow 14.4px/#6a7d72, the newsletter eyebrow
   (which was correct) 11.52px/#9c7016.

   --color-warn, not --color-gold: at 0.72rem on a required notice the brand gold
   is 3.98:1 and fails AA. --color-warn #8a6410 is 4.83:1 and already in use. */
.compliance-note .eyebrow {
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.09em;
    color: var(--color-warn);
}

/* The notice's body was 3.94:1 - below AA on a compliance surface. */
.compliance-note p {
    color: var(--color-ink-soft);   /* 7.33:1 */
}

/* ============================================================================
   Oktatások + Visszajelzés — joining the design language
   Owner: "dolgozd át ennek mintájára profin az oktatás és visszajelzés oldalakat
   is, profi designnak tűnjenek."

   The headline finding was not a design one. education/index.php is built
   entirely from account.css classes (.account-page/.account-grid/.account-card/
   .account-card-ic/.account-card-kicker/.account-count/.account-btn), but
   Router::renderEducation passes only educationAssets, and layout.php emits
   account.css ONLY on accountAssets — which no education route sets. Those
   classes are defined nowhere else. So /hu/oktatasok has been shipping as bare
   <article> blocks: no grid, no card, no border, no fill, no padding, no icon
   tile, and the CTA as an underlined color:inherit link. The page did not need a
   redesign so much as it needed its stylesheet to arrive.

   The hub is moved onto its own classes here rather than by adding the flag,
   because the alternative is 10.7 KB of dashboard CSS on a page that wanted six
   selectors from it, and because "the education hub silently depends on the
   account page's stylesheet" is a trap that would be re-sprung the next time
   either page is touched.
   ------------------------------------------------------------------------- */

/* --- 1. The shared page header badge ------------------------------------- */

/* The badge is the FIRST object on fifteen inner pages, and it was invisible:
   a linear-gradient from --color-green-pale to --color-surface measures 1.02:1
   against the canvas, with a --color-border hairline at 1.09:1. A tile you
   cannot see is not a tile, it is padding.

   Ground, exactly where it is singular and small — one badge per page, never
   repeated, so it cannot restage the footer's plane. --color-green-deep is
   7.23:1 against the canvas and carries the glyph at 8.04:1.

   `.is-drawn` only: an emoji is a colour bitmap from a system font, and dropping
   one on a solid deep-green tile makes a sticker. The ten admin callers still
   passing emoji keep the pale tile, which is also how you can see at a glance
   which pages have been converted. */
.page-hero-ic.is-drawn {
    background: var(--color-green-deep);
    border-color: var(--color-green-deep);
    color: #eafaf2;
    box-shadow: 0 6px 18px -8px rgba(10, 92, 62, 0.55);
}

.page-hero-ic.is-drawn .icon {
    width: 1.65rem;
    height: 1.65rem;
}

/* --color-gold is 3.98:1 on the canvas and FAILS AA at 11.5px. --color-warn
   #8a6410 is 4.83:1 and is already the site's AA-safe gold — the same swap the
   compliance note needed. Scoped to the shared header so the home page's own
   hero eyebrow, which sits at a larger size, is untouched. */
.page-hero-text .eyebrow,
.fb-hero-text .eyebrow {
    color: var(--color-warn);
}

/* --color-muted is 3.94:1 on the canvas — below AA — and this is the lead
   paragraph of fifteen pages. --color-ink-soft is 7.33:1. The lead does not
   become louder: it is one step down from the title in SIZE and WEIGHT, which
   is how this codebase is supposed to make things quiet. */
.page-hero-lead,
.fb-hero-text .fb-lead {
    color: var(--color-ink-soft);
}

@media (max-width: 560px) {
    .page-hero-ic.is-drawn .icon { width: 1.4rem; height: 1.4rem; }
}

/* --- 2. The education hub ------------------------------------------------ */

/* Deliberately the same object as the home page's tool cards — same radius,
   same edge, same lift, same icon tile — because "ennek mintájára" is a request
   for one product, not for a second good-looking page. What differs is only
   what the content differs by. */
.edu-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1.6rem;
}

.edu-hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.35rem 1.3rem 1.2rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
    /* The hairline alone is 1.24:1 on the canvas and 1.38:1 on white — it misses
       the 3:1 a boundary needs by more than double. The shadow is what actually
       draws the card's edge here, exactly as on the home page. */
    box-shadow:
        0 1px 2px rgba(18, 70, 50, 0.06),
        0 10px 26px rgba(18, 70, 50, 0.09),
        0 2px 0 rgba(255, 255, 255, 0.9) inset;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* The whole card is the link. It also removes a shipped defect: the materials
   card's button read "Írott anyagok" because there is no materials_open key in
   any of the twelve packs, and each card printed its own title twice — once as
   the kicker, once as the heading. No .labor-tool-card on the home page carries
   a verb either. */
a.edu-hub-card:hover,
a.edu-hub-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--color-green-bright);
    box-shadow:
        0 2px 4px rgba(18, 70, 50, 0.08),
        0 18px 40px rgba(18, 70, 50, 0.14);
}

.edu-hub-ic {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--color-green-pale);
    color: var(--color-green);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.edu-hub-ic .icon { width: 1.7rem; height: 1.7rem; }

a.edu-hub-card:hover .edu-hub-ic,
a.edu-hub-card:focus-visible .edu-hub-ic {
    background: var(--color-green);
    color: #ffffff;
}

/* h2, not h3: the hub has no section heading between the h1 and these cards, so
   an h3 would skip a level. The home page's cards are h3 because they sit under
   an h2 there — same object, correct level for its own page. */
.edu-hub-card h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.22rem;
    line-height: 1.2;
    color: var(--color-green);
}

.edu-hub-card p {
    margin: 0;
    color: var(--color-ink-soft);      /* 7.33:1 — was --color-muted at 3.94:1 */
    line-height: 1.55;
}

/* The count is the card's own datum, so it sits with the title rather than in a
   corner. Tabular figures so 3 and 11 occupy the same width and the badges do
   not jitter between sections. */
.edu-hub-n {
    display: inline-grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.42rem;
    margin-left: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-green-deep);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    vertical-align: 0.12em;
}

/* The arrow is the affordance now that the button is gone. It is the same
   gesture as the tool cards: it advances on hover. */
.edu-hub-go {
    margin-top: auto;
    padding-top: 0.7rem;
    color: var(--color-green);
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
    align-self: flex-end;
    transition: transform 0.18s ease;
}

a.edu-hub-card:hover .edu-hub-go { transform: translateX(6px); }

/* A section that exists but has nothing in it yet is NOT a link — there is
   nowhere to go. It renders as the same card, quieter, with no arrow, so the
   member can see the shape of what is coming without being invited to click
   into an empty room. */
.edu-hub-card.is-soon {
    border-style: dashed;
    border-color: var(--color-border-strong);
    background: var(--color-surface-soft);
    box-shadow: none;
}

.edu-hub-card.is-soon .edu-hub-ic {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    color: var(--color-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
    .edu-hub-card,
    .edu-hub-ic,
    .edu-hub-go { transition: none; }
    a.edu-hub-card:hover { transform: none; }
    a.edu-hub-card:hover .edu-hub-go { transform: none; }
}

/* ============================================================================
   Visszajelzés — joining the design language
   Appended after the original .fb-* block (app.css:3481-3616), so these win on
   source order. Every value is a token; the only literals are the ones already
   in the file, kept where a computed contrast was already correct.

   The through-line is the same as the footer's: nothing here was a boundary. The
   message bubbles were 1.00:1 against the canvas and 1.02:1 against each other,
   the aside's content icons were drawn in a BORDER token at 1.24:1, and most text
   was --color-muted at 3.94:1 — below AA. Colour did no work, so the eye found
   nothing. This gives each object a real edge and lifts the type onto --color-
   ink-soft, then keys the one thing that carries meaning — who is speaking — off
   identity instead of viewpoint.
   ------------------------------------------------------------------------- */

/* --- The shared header badge + the new context bar ----------------------- */

/* thread.php now uses the shared page header; the status chip and back link sit
   in one row under it instead of three stacked lines. */
.fb-thread-bar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin: 0 0 1.2rem;
}

.fb-thread-bar .fb-back { margin: 0; }

/* --- The aside: quiet, but no longer invisible --------------------------- */

.fb-side h3 { color: var(--color-ink-soft); }          /* was --color-muted 3.94:1 → 7.33:1 */
.fb-side li { color: var(--color-ink-soft); }

/* These are CONTENT icons — a person, a clock, a lock — that were being drawn in
   a border token at 1.24:1, i.e. a meaningful graphic rendered as a hairline. */
.fb-side li .icon,
.fb-side li svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-green);                          /* 4.63:1 */
    flex: none;
    margin-top: 0.15rem;
}

.fb-side-count { border-top-color: var(--color-rule); color: var(--color-ink-soft); }
.fb-side-count b { color: var(--color-green); }

/* --- The composer: real edges, real focus -------------------------------- */

/* The category radio and the file input are 1px/opacity:0, so a ring on the
   label is the ONLY focus cue for the whole group and both pickers, and
   --focus-ring (the earlier rule) is 1.34:1 there. This is the site's own
   solid-outline treatment.

   outline ONLY — deliberately NO box-shadow property. :has() inherits its
   argument's specificity, so .fb-cat:has(input:focus-visible) and
   .fb-cat:has(input:checked) both compute to (0,2,1); a box-shadow here would
   tie the selected tile's inset ring and, appended later, silently strip it the
   instant a keyboard user tabbed onto the checked tile. The outline is a
   separate property, so it stacks over the checked ring instead of replacing it. */
.fb-cat:has(input:focus-visible),
.fb-drop:has(input:focus-visible) {
    outline: 0.18rem solid var(--color-gold);
    outline-offset: 2px;
}

/* The selected tile carried its state on a 1px inset ring over a pale fill. Bump
   the ring to 2px so selection reads without depending on the faint fill. */
.fb-cat:has(input:checked) { box-shadow: inset 0 0 0 2px var(--color-green); }

/* Edges that were not edges. The category tiles and the drop target sat on
   1.30–1.38:1 borders — a drop zone whose boundary you cannot find. */
.fb-cat { border-color: var(--color-rule); }
.fb-drop { border-color: var(--color-rule); }

/* --- The thread list ----------------------------------------------------- */

/* The row takes the shipped card recipe, so it reacts like every other clickable
   card on the site: a real edge, and a lift on hover. */
.fb-thread-item > a {
    border-color: var(--color-border-strong);
    box-shadow:
        0 1px 2px rgba(18, 70, 50, 0.06),
        0 8px 20px rgba(18, 70, 50, 0.07);
}

.fb-thread-item > a:hover {
    border-color: var(--color-green-bright);
    box-shadow:
        0 2px 4px rgba(18, 70, 50, 0.08),
        0 14px 32px rgba(18, 70, 50, 0.12);
}

/* The unread rail was #d9483b at 3.82:1 as a graphic; --color-danger is 6.38:1. */
.fb-thread-item.is-unread > a { border-left-color: var(--color-danger); }

/* The dot is drawn by CSS so the word can stand alone as text — unread is never
   colour only. */
.fb-unread-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-danger);
    font-weight: 800;
    font-size: 0.78rem;
}
.fb-unread-dot::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.fb-thread-meta { color: var(--color-ink-soft); }

/* The excerpt was cut mid-word at 140 chars with no ellipsis. It is cut at 260
   now and clamped to two lines, so the browser ends it at a real line break. */
.fb-thread-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Status chips: the token families that already pass ------------------ */
/* Shared with admin/feedback.php, which inherits the same lift for free. */
.fb-status-new { background: var(--color-danger-bg); color: var(--color-danger); }        /* 4.64 → 6.13:1 */
.fb-status-open { background: var(--color-warn-bg); color: var(--color-warn); }            /* → 4.92:1 */
.fb-status-resolved { background: var(--color-success-bg); color: var(--color-success); }  /* → 5.89:1 */

/* --- The conversation: colour is WHO, side is WHOSE VIEW ------------------ */

/* The fill USED to key on .is-mine/.is-theirs — which flip with the audience, so
   in the admin inbox the admin's own replies were painted in the member's
   colour. It keys on identity now (.is-admin/.is-user, stable in both views);
   .is-mine/.is-theirs keep only the SIDE and the tail radius, which correctly
   flip. Two genuinely different materials, both edges clearing 3:1 on the canvas.
   No dark bubble — a Labor reply is not the place to spend the site's one
   terminal-plane gesture, N times per thread. */
.fb-msg.is-theirs,
.fb-msg.is-mine {
    background: none;
    border-color: transparent;
}

.fb-msg.is-user {
    background: var(--color-surface);
    border: 1px solid var(--color-rule);               /* 3.32:1 on canvas */
    box-shadow: 0 1px 2px rgba(18, 70, 50, 0.05), 0 6px 16px rgba(18, 70, 50, 0.06);
}

.fb-msg.is-admin {
    background: var(--color-green-pale);
    border: 1px solid var(--color-green);              /* 4.63:1 on canvas */
    box-shadow: none;
}

.fb-msg.is-admin .fb-msg-sender { color: var(--color-green-deep); }   /* 7.05:1 */
.fb-msg-time { color: var(--color-ink-soft); }                        /* was --color-muted */

/* A thread whose message rows are gone renders .fb-conversation as an empty flex
   column with margins — a hole. The header, context bar and reply form still
   stand, so the page still works. */
.fb-conversation:empty { display: none; }

/* --- The rest ------------------------------------------------------------ */

.fb-member-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    color: var(--color-ink-soft);
}
.fb-member-line .icon { width: 1.1rem; height: 1.1rem; color: var(--color-green); }

.fb-close-btn { color: var(--color-ink-soft); }
.fb-close-btn .icon { width: 1rem; height: 1rem; vertical-align: -0.15em; }

/* resolved_note carries no glyph of its own, so an icon is safe to add. Was
   #eaf6ee at 1.00:1 against the canvas — a "resolved" note you could not see. */
.fb-resolved-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success);
}
.fb-resolved-note .icon { width: 1.1rem; height: 1.1rem; flex: none; }

.fb-danger { border-top-color: var(--color-rule); }

/* --- The empty state: one statement ------------------------------------- */

.fb-empty-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    margin-top: 1.4rem;
    padding: 2.6rem 1.4rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-soft);
}

.fb-empty-panel .fb-empty-ic {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius);
    background: var(--color-green-pale);
    color: var(--color-green);
}
.fb-empty-panel .fb-empty-ic .icon { width: 1.7rem; height: 1.7rem; }

.fb-empty-panel p {
    margin: 0;
    max-width: 42ch;
    color: var(--color-ink-soft);                      /* 7.33:1 — was --color-muted */
    line-height: 1.6;
}

/* --- Mobile: the category row -------------------------------------------- */

/* .fb-cats is repeat(3,1fr); at 375px each cell is ~92px and the middle label
   wraps to three lines. One column below 480px, tile inline with the label. */
@media (max-width: 480px) {
    .fb-cats { grid-template-columns: 1fr; }
    .fb-cat {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        text-align: left;
    }
    /* the tile centred its icon with margin:auto — undo that for the inline row */
    .fb-cat .fb-cat-ic { margin: 0; flex: none; }
    .fb-cat .fb-cat-l { text-align: left; }
}

/* ============================================================================
   Legal pages — ÁSZF, adatkezelés, cookie, impresszum
   Owner: "ott még más a betűtípus, és néhol összeérnek a betűk a sorokban."

   Both observations were right and both were measurable.

   THE TOUCHING LETTERS. The title was 2.65rem Lora at line-height 1.02 — 56.8px
   type on a 57.9px line. In English that survives; in Hungarian it does not. "Á",
   "Ő" and "Ű" put an accent above the cap height and "gy", "j" put a descender
   below the baseline, so on "Általános / Szerződési / Feltételek (ÁSZF)" the
   accents of one line ran into the line above it. Worse, .legal-meta carried
   `margin-top: -0.3rem`, pulling the date up under the parenthesis descenders of
   the title. The fix is not a nudge: these pages now use the same header partial
   as every other inner page, whose title is sans at 1.2.

   THE DIFFERENT TYPEFACE. The old title and every h2 were Lora while the rest of
   the site had already moved to the sans header. A reader landing on the ÁSZF from
   the footer arrived somewhere that looked like a different site. Headings here
   are sans now. Lora keeps the home page and the marketing hero, where the page
   IS the display.

   AND THE MEASURE, which the owner did not name but is the reason these pages are
   hard to read: .legal-page is max-width 68rem = 1088px, and the body ran the full
   width at 135 CHARACTERS PER LINE. The comfortable range is 45–75. At 135 the eye
   loses the line it is returning to — on the one document a member is most likely
   to have to read carefully. The page stays wide, because the operator-data grid
   wants the room; the PROSE is capped instead.
   ------------------------------------------------------------------------- */

/* The reading column. Applied to the prose only, so .legal-data-list keeps the
   full width for its two-column layout. */
.legal-page > p,
.legal-page > ul,
.legal-page > ol,
.legal-page > h2,
.legal-page > h3,
.legal-page .legal-disclaimer,
.legal-page .legal-summary {
    max-width: 68ch;
}

/* Sans, like every other heading on the site outside the marketing hero. The
   numbers ("1. A Szolgáltató") are part of the string, so tabular figures keep
   the section numbers aligned down the page. */
.legal-page h2,
.legal-page h3 {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Rhythm: a section heading belongs to what follows it, not to what came before.
   The old margins were symmetrical, so the page read as an undifferentiated
   column of equal-weight blocks. */
.legal-page h2 {
    margin: 2.4rem 0 0.6rem;
    font-size: 1.32rem;
    line-height: 1.3;
    font-weight: 650;
}

.legal-page h3 {
    margin: 1.6rem 0 0.4rem;
    font-size: 1.04rem;
    line-height: 1.35;
    font-weight: 650;
}

/* Never orphan a heading at the foot of a column or a printed page. */
.legal-page h2,
.legal-page h3 {
    break-after: avoid;
    page-break-after: avoid;
}

.legal-page p { margin: 0 0 0.9rem; }

.legal-page ul,
.legal-page ol { margin: 0 0 1rem; padding-left: 1.35rem; }

.legal-page li { margin-bottom: 0.35rem; }

/* The date under the title. It was pulled UP by a negative margin into the
   title's descenders; now it sits under the shared header as its own line, and
   off --color-muted (3.94:1 — below AA) onto --color-ink-soft (7.33:1). It is
   metadata on a legal document: it has to be readable. */
.legal-meta {
    margin: -0.9rem 0 1.8rem;
    color: var(--color-ink-soft);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}

/* --color-muted again, on a required notice. */
.legal-disclaimer { color: var(--color-ink-soft); }

/* Long legal documents are the one place on this site where a reader genuinely
   scans for a section, so the numbered headings get a little more air above and
   the whole document a slightly longer line-height than the UI default. */
.legal-page p,
.legal-page li { line-height: 1.7; }

@media print {
    /* These get printed and filed. */
    .legal-page > p,
    .legal-page > ul,
    .legal-page > ol,
    .legal-page > h2,
    .legal-page > h3 { max-width: none; }
    .legal-page h2 { margin-top: 1.6rem; }
}

/* Icons inside the shared alert. It is already a flex row with a gap, so the glyph only
   needs a size and a guard against being squashed by a long message. The colour is
   inherited, which is the point — a success alert's tick is green, an error's warning
   triangle is red, with no per-variant rule. */
.alert .icon,
.fb-banner .icon,
.status-message .icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    margin-top: 0.1rem;
}

/* The unsubscribe outcome links, when the form is gone and this is all that is left. */
.unsub-links { margin-top: 1.2rem; }

/* A Fiókom-legördülőben a kijelentkezés is egy sor — de POST marad (CSRF), tehát
   űrlap. Ez adja neki ugyanazt a kinézetet, mint a másik két menüsornak. */
.nav-group-form { padding: 0; margin: 0; }
.nav-group-form button {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.55rem 0.8rem;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.nav-group-form button:hover { background: rgba(31, 81, 51, 0.07); }
/* Az olvasatlan pötty a nyitógombon: egy új válasz ne bújjon el a becsukott menüben. */
.nav-group-btn .nav-dot { font-size: 0.6em; vertical-align: middle; }