/* ============================================================================
   Tiny Tinfle landing + /help (Phase 3, tinytinflefinal.md; built 2026-09-29).
   Loads AFTER full-landing-v3.css (the shared kit: theme channels, nav,
   sections, buttons, reveals) and adds only these pages' own pieces. The
   parts reused from the old front door were COPIED here under the tl-
   namespace, never shared, so public/css/beamlanding.css stays frozen for
   rollback. All page colors ride the theme channels (light default, dark
   via the stored toggle choice); the only literal darks are inside the
   phone mock, which depicts the app, and the app is always dark.
   Mobile-first.
   ========================================================================== */

/* ----- header: logo, quiet Log in, Create one, language, theme ----- */
.tl-nav .nav-brand { text-decoration: none; }
.tl-nav-login {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding: 10px 2px;
    transition: color 0.2s ease;
}
.tl-nav-login:hover { color: var(--v3-coral-ink); }
/* Small phones: the wordmark goes (the logo stays) so the bar never wraps */
@media (max-width: 419px) {
    .tl-nav .nav-word { display: none; }
    .tl-nav .nav-links { gap: 6px; }
    .tl-nav .theme-toggle { width: 34px; }
    .tl-nav .nav-cta { padding: 8px 12px; }
    .tl-nav-login { font-size: 0.76rem; }
}

/* ----- hero ----- */
/* Mobile pays extra clearance so the hero pill never rides under the
   seasonal corner ribbon; desktop copy is left-aligned and clear. The hero
   clips its 120vw glow (iOS Safari ignores body-level overflow for panning). */
.tl-hero { padding-top: calc(var(--v3-nav-h) + 80px); overflow: hidden; }
.tl-hero-grid { display: grid; gap: 4px; }
.tl-hero-copy, .tl-hero-mock, .tl-hero-act {
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.tl-h1 { font-size: clamp(1.9rem, 6.6vw, 2.9rem); max-width: 680px; }
/* Every headline's coral sentence gets its own line */
.tl .h2 .coral { display: block; }
.tl .eyebrow { margin-bottom: 10px; }
.tl-hero .btn-coral,
.tl #waitlist .btn-coral { min-width: min(320px, 100%); margin-top: 26px; text-decoration: none; }
.tl #waitlist .btn-coral { margin-top: 6px; }
@media (min-width: 900px) {
    .tl-hero { padding-top: calc(var(--v3-nav-h) + 56px); }
    .tl-hero-grid {
        grid-template-areas: "copy mock" "act mock";
        grid-template-columns: 1.1fr 0.9fr;
        column-gap: 48px;
        align-content: center;
    }
    .tl-hero-copy { grid-area: copy; align-items: flex-start; text-align: left; align-self: end; }
    .tl-hero-mock { grid-area: mock; }
    .tl-hero-act { grid-area: act; align-items: flex-start; text-align: left; align-self: start; }
    .tl-hero-copy .lede { margin-left: 0; margin-right: 0; }
}

/* ----- seasonal corner ribbon (filled by occasions-page.js by id) -----
   The box sits at the hero's top-right just below the fixed nav; its
   overflow clips the rotated band into the diagonal. Only the band is
   clickable. Coral fill with --v3-ink text resolves in both themes. */
.tl-corner {
    position: absolute;
    top: var(--v3-nav-h);
    right: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}
.tl-corner-band {
    pointer-events: auto;
    position: absolute;
    top: 42px;
    right: -54px;
    width: 210px;
    transform: rotate(45deg);
    text-align: center;
    padding: 7px 0;
    background: var(--v3-coral);
    color: var(--v3-ink);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 14px var(--v3-coral-glow);
}
@media (max-width: 899px) {
    .tl-corner { width: 118px; height: 118px; }
    .tl-corner-band {
        top: 33px;
        right: -42px;
        width: 165px;
        padding: 6px 0;
        font-size: 0.6rem;
        letter-spacing: 0.08em;
    }
}

/* ----- the phone: the recipient's side in four beats -----
   The phone shows the app and the app is ALWAYS dark: pin the dark theme
   channels inside the frame so the light page can't relight it. */
.tl-phone { margin: 26px auto 0; }
.tl-phone {
    --lp-ink-rgb: 255, 255, 255;
    --lp-paper-rgb: 26, 26, 26;
    --lp-surface-rgb: 37, 37, 37;
    --lp-deep-rgb: 10, 10, 10;
    --lp-panel: #1A1A1A;
    --v3-ink: #1A1A1A;
    --v3-coral-ink: var(--v3-coral);
    --v3-white-04: rgba(255, 255, 255, 0.04);
    --v3-white-08: rgba(255, 255, 255, 0.08);
    --v3-white-14: rgba(255, 255, 255, 0.14);
    --color-bg: #1A1A1A;
    --color-surface: #252525;
    --color-border: #333333;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #A0A0A0;
    --color-text-muted: #777777;
    color: var(--color-text-primary);
}
.tl-beat {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}
.tl-beat.is-active { opacity: 1; }

/* The card's video, full-bleed behind everything */
.tl-brick-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
/* The receiver page's glass: the video waits blurred behind the choice */
.tl-glass { filter: blur(10px) brightness(0.5); transform: scale(1.12); }
.tl-dim { filter: brightness(0.28); }

/* The Tinfle mark, upper-left (the receiver page's .bv-logo) */
.tl-logo-mark {
    position: absolute;
    top: 14px; left: 12px;
    z-index: 30;
    height: 18px;
    opacity: 0.92;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}

/* Beat 1: the sealed coral envelope (generic by rule: the sealed face
   never hints the occasion) */
.tl-beat-open {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
    background: var(--color-bg);
}
.tl-env {
    position: relative;
    display: block;
    width: 64%;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    background: var(--v3-coral);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.tl-env-flap {
    position: absolute; top: 0; left: 0; right: 0;
    height: 58%;
    background: rgba(0, 0, 0, 0.16);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tl-env-seal {
    position: absolute; top: 50%; left: 50%;
    width: 34px; height: 34px;
    transform: translate(-50%, -40%);
    border-radius: 50%;
    background: #FFFFFF url('/assets/tinfle-logo.svg') center / 22px 22px no-repeat;
}
.tl-env-for {
    color: var(--color-text-primary);
    font-family: var(--v3-font-display);
    font-weight: 800;
    font-size: 1.05rem;
}
.tl-env-hint {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Beats 2 and 3: the receiver page's card (beam.css .bv-* scaled to the
   290px screen), with its real strings */
.tl-rcard {
    position: absolute;
    left: 14px; right: 14px; bottom: 26px;
    z-index: 30;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 8px;
    padding: 16px 14px 12px;
    background: rgba(26, 26, 26, 0.94);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    text-align: center;
}
.tl-beat-review .tl-rcard { top: 50%; bottom: auto; transform: translateY(-50%); }
.tl-rcard-badge {
    color: var(--color-text-secondary);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.tl-rcard-title {
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: 4px;
}
.tl-rbtn, .tl-rbtn-quiet {
    display: block;
    border-radius: 9px;
    font-weight: 700;
    line-height: 1.2;
}
.tl-rbtn {
    position: relative;
    background: var(--v3-coral);
    color: #FFFFFF;
    padding: 10px;
    font-size: 0.8rem;
}
.tl-rbtn-quiet {
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 8px;
    font-size: 0.74rem;
    font-weight: 600;
}
/* Their own clip on the decision screen: never mirrored, plays on tap */
.tl-selfclip {
    position: relative;
    display: block;
    width: 74px;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--v3-white-14);
}
.tl-selfclip img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.tl-selfclip-play {
    position: absolute; top: 50%; left: 50%;
    width: 26px; height: 26px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
}
.tl-selfclip-play::before {
    content: "";
    position: absolute; top: 50%; left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent #FFFFFF;
}
.tl-rcard-note {
    color: var(--color-text-secondary);
    font-size: 0.66rem;
    line-height: 1.35;
}
.tl-rpills {
    display: flex; gap: 6px;
    justify-content: center; flex-wrap: wrap;
}
.tl-rpill {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px 9px;
    color: var(--color-text-secondary);
    font-size: 0.62rem;
    font-weight: 600;
}
.tl-rpill.is-on { border-color: var(--v3-coral); color: var(--color-text-primary); }
/* The tap on Send: a ring pulses while beat 3 is up (never under reduced
   motion, where the beat never auto-plays anyway) */
.tl-rbtn--tap::after {
    content: "";
    position: absolute; inset: -4px;
    border: 2px solid var(--v3-coral);
    border-radius: 12px;
    opacity: 0;
}
.tl-beat-review.is-active .tl-rbtn--tap::after { animation: tl-tap 1.4s ease-out 0.5s infinite; }
@keyframes tl-tap {
    0% { opacity: 0.9; transform: scale(0.96); }
    100% { opacity: 0; transform: scale(1.08); }
}

/* Beat 4: the sender's returned view, named by the chip */
.tl-pip {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 30;
    width: 34%;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: block;
}
.tl-pip-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.tl-back-chip {
    position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    z-index: 30;
    white-space: nowrap;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--v3-coral);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.8rem;
    backdrop-filter: blur(10px);
}

/* Step dots (outside the phone, so they ride the page theme): shipped
   hidden, revealed by JS. The hit area is bigger than the dot. */
.tl-seq-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 4px;
    margin-top: 14px;
}
.tl-seq-dot {
    width: 26px; height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.tl-seq-dot::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 999px;
    background: rgba(var(--lp-ink-rgb), 0.25);
    transition: background 0.2s ease, width 0.2s ease;
}
.tl-seq-dot.is-active::before {
    width: 18px;
    background: var(--v3-coral-ink);
}
.tl-seq-dot:focus-visible {
    outline: 3px solid var(--v3-coral);
    outline-offset: 2px;
    border-radius: 999px;
}
/* The caption under the phone: two lines reserved so beat changes never
   shift the CTA below */
.tl-caption {
    font-family: var(--v3-font-display);
    font-weight: 800;
    font-size: clamp(1.05rem, 4vw, 1.3rem);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    text-wrap: balance;
    max-width: 420px;
    min-height: 2.7em;
    margin: 14px auto 0;
}

/* ----- under the CTA: the seasonal line, then the trust line ----- */
.tl-offer-line {
    margin: 16px 0 0;
    max-width: 420px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}
.tl-offer-line a {
    color: var(--v3-coral-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tl-trust {
    margin: 16px 0 0;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    max-width: 420px;
}
@media (min-width: 900px) {
    .tl-offer-line, .tl-trust { text-align: left; }
}

/* ----- three steps (kit .how-wall/.how-brick) -----
   One narrow column until 900px (the kit's 2-col at 720px orphans the
   third card), then three across. */
.tl-how-wall { grid-template-columns: 1fr; max-width: 560px; width: 100%; }
.tl-how-wall .how-brick { text-align: left; }
@media (min-width: 900px) {
    .tl-how-wall { grid-template-columns: repeat(3, 1fr); max-width: 960px; align-items: start; }
}

/* ----- the moment: the real receipts, side by side always ----- */
.tl-ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 560px;
    width: 100%;
    margin-top: 28px;
    align-items: start;
}
.tl-ba-item {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.tl-ba-label {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--v3-white-14);
    border-radius: 999px;
    padding: 5px 12px;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.tl-ba-label--coral {
    color: var(--v3-coral-ink);
    border-color: var(--v3-coral-ink);
}
.tl-ba-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--v3-white-14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    background: #000;
}
.tl-ba-line {
    margin: 0;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.86rem;
    line-height: 1.45;
}
/* The authenticity stamp sits ON the media (which never themes), so its
   white paper and ink are literal by design */
.tl-ba-media { position: relative; display: block; width: 100%; }
.tl-ba-stamp {
    position: absolute;
    top: 22px; left: 14px;
    z-index: 5;
    transform: rotate(-7deg);
    border: 2.5px solid var(--v3-coral);
    color: #D64545;
    background: rgba(255, 255, 255, 0.87);
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.25;
    max-width: calc(100% - 28px);
    text-align: center;
    pointer-events: none;
}
@media (max-width: 559px) {
    .tl-ba-stamp {
        top: 16px; left: 10px;
        border-width: 2px;
        padding: 5px 8px;
        font-size: 0.56rem;
        letter-spacing: 0.08em;
        max-width: calc(100% - 20px);
    }
}
.tl-founder-line {
    margin: 24px 0 0;
    max-width: 560px;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
    text-wrap: balance;
}
.tl-founder-sig {
    color: var(--color-text-primary);
    font-weight: 700;
    white-space: nowrap;
}

/* ----- their choice (#control): four checked lines ----- */
.tl-control {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    max-width: 560px;
    width: 100%;
    display: grid;
    gap: 10px;
    text-align: left;
}
.tl-control li {
    position: relative;
    padding: 14px 16px 14px 48px;
    background: rgba(var(--lp-surface-rgb), 0.6);
    border: 1px solid var(--v3-white-08);
    border-radius: 12px;
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.96rem;
    line-height: 1.5;
}
.tl-control li::before {
    /* the check, drawn in CSS (glyphs stay out of copy strings) */
    content: "";
    position: absolute;
    left: 19px; top: 20px;
    width: 13px; height: 7px;
    border-left: 2.5px solid var(--v3-coral-ink);
    border-bottom: 2.5px solid var(--v3-coral-ink);
    transform: rotate(-45deg);
}
.tl-control-links {
    margin: 18px 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}
.tl-control-links a { color: var(--v3-coral-ink); font-weight: 700; }

/* ----- closing: the live price line + the member path ----- */
/* The price line is a link to /pricing (membership, 2026-10-08): a 44px
   target that does not move the line. */
.tl-price-line a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -14px 0;
    padding: 0 4px;
}
.tl-price-line {
    margin: 14px 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
}
.tl-member { margin: 18px 0 0; font-size: 0.92rem; font-weight: 600; color: var(--color-text-secondary); }
.tl-member a { color: var(--color-text-secondary); text-decoration: underline; }
.tl-member a:hover { color: var(--v3-coral-ink); }

/* ----- footer ----- */
.tl-footer {
    border-top: 1px solid var(--v3-white-08);
    padding: 26px 20px 34px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 2;
}
.tl-footer a { color: var(--color-text-secondary); text-decoration: none; }
.tl-footer a:hover { color: var(--v3-coral-ink); }
/* The social links (2026-10-20), drawn by the server into the slot
   (services/socialLinks.js); the same 44px targets as tiny.css */
.tl-social { margin: 4px 0 0; line-height: 1; }
.tl-footer .tt-social { display: inline-flex; align-items: center; justify-content: center; }
.tl-footer .tt-social-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.tl-footer .tt-social-link svg { display: block; width: 20px; height: 20px; }
.tl-footer .tt-social-link:focus-visible { outline: 2px solid var(--v3-coral-ink); outline-offset: -2px; border-radius: 8px; }

/* ----- /help ----- */
.tl-doc-top { padding-top: calc(var(--v3-nav-h) + 48px); padding-bottom: 32px; }
.tl-doc-top .hero-pill { margin-bottom: 16px; }
.tl-toc {
    margin: 18px 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.8;
}
.tl-toc a { color: var(--v3-coral-ink); font-weight: 700; text-decoration: none; }
.tl-toc a:hover { text-decoration: underline; }
/* The FAQ accordion: native details/summary, zero JS. The list also carries
   the old .bl-faq class ONLY as the occasions-page.js injection hook. */
.tl-faq {
    width: 100%;
    max-width: 680px;
    margin-top: 28px;
    display: grid;
    gap: 10px;
    text-align: left;
}
.tl-faq details {
    background: rgba(var(--lp-surface-rgb), 0.6);
    border: 1px solid var(--v3-white-08);
    border-radius: 12px;
    padding: 0 16px;
}
.tl-faq details[open] { border-color: var(--v3-white-14); }
.tl-faq summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 14px 28px 14px 0;
    color: var(--color-text-primary);
    font-weight: 800;
    font-size: 0.96rem;
    line-height: 1.4;
}
.tl-faq summary::-webkit-details-marker { display: none; }
.tl-faq summary:focus-visible {
    outline: 3px solid var(--v3-coral);
    outline-offset: 2px;
    border-radius: 8px;
}
.tl-faq summary::after {
    /* chevron drawn in CSS (copy rules keep arrow glyphs out of strings) */
    content: "";
    position: absolute;
    right: 4px; top: 50%;
    width: 8px; height: 8px;
    border-right: 2px solid var(--v3-coral-ink);
    border-bottom: 2px solid var(--v3-coral-ink);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.15s ease;
}
.tl-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.tl-faq details > p {
    margin: 0;
    padding: 0 0 16px;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}
.tl-faq details > p a { color: var(--v3-coral-ink); font-weight: 700; }
.tl-facts {
    display: grid;
    gap: 10px;
    margin-top: 28px;
    max-width: 680px;
    width: 100%;
    text-align: left;
}
.tl-fact {
    background: rgba(var(--lp-surface-rgb), 0.6);
    border: 1px solid var(--v3-white-08);
    border-radius: 12px;
    padding: 16px 18px;
}
.tl-fact h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 800; color: var(--color-text-primary); }
.tl-fact p { margin: 0; color: var(--color-text-secondary); font-size: 0.92rem; line-height: 1.6; }
.tl-ideas {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 560px;
    text-align: left;
}
.tl-ideas a {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--v3-white-08);
    background: rgba(var(--lp-surface-rgb), 0.6);
    color: var(--color-text-primary);
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.tl-ideas a:hover { border-color: var(--v3-coral-ink); color: var(--v3-coral-ink); }

/* ----- the free-first swap + [hidden] guards -----
   occasions-page.js reveals [data-occ-free] items only while the live
   catalog answers freeFirst:true. !important beats any author display (the
   [hidden]-vs-display trap), same for the dynamic offer shells. */
.occ-free-hidden { display: none !important; }
.tl-corner[hidden],
.tl-offer-line[hidden] { display: none !important; }

/* ----- reduced motion: no crossfades, no pulsing ring ----- */
@media (prefers-reduced-motion: reduce) {
    .tl-beat { transition: none; }
    .tl-beat-review.is-active .tl-rbtn--tap::after { animation: none; }
    .tl-seq-dot::before { transition: none; }
    .tl-faq summary::after { transition: none; }
}

/* The help page's language toggle as two flags (2026-10-18, founder: a small
   American flag for EN, a Spanish flag for ES; the same files and look as
   the sender app's header switch in tiny.css): no pill, 44px targets, the
   page's own language in a thin ring, the other a little dimmed. */
.lang-toggle--flags { border: 0; border-radius: 0; overflow: visible; }
.lang-toggle--flags .lang-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
}
.lang-toggle--flags .lang-opt.is-active { background: transparent; }
.lang-toggle--flags .tt-flag {
    display: block;
    width: 24px;
    height: 16px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.35);
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
.lang-toggle--flags .lang-opt:hover .tt-flag,
.lang-toggle--flags .lang-opt:focus-visible .tt-flag { opacity: 1; }
.lang-toggle--flags .lang-opt.is-active .tt-flag {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3.5px var(--color-text-primary);
}
@media (prefers-reduced-motion: reduce) { .lang-toggle--flags .tt-flag { transition: none; } }