:root {
    --color-cream: #faf6ee;
    --color-card: #ffffff;
    --color-card-radius: 18px;
    --color-separator: #f1ebdf;

    --color-terracotta: #e2725b;
    --color-terracotta-dark: #c05a45;
    --color-sage: #7d9b76;
    --color-mustard: #e8a13c;
    --color-blue: #6f93b5;
    --color-violet: #b08bc0;
    --color-ink: #4a4238;
    --color-muted: #8a7f70;
    --color-discreet: #b3a893;
    --color-border: #eee5d4;

    --color-tint-rose: #fdf0ec;
    --color-tint-sand: #f3e3c8;
    --color-tint-seafoam: #e9efe6;
    --color-tint-sky: #e8eef4;
    --color-tint-lilac: #f0eaf4;

    --color-toggle-off: #e5dcc9;

    --color-mascot-bg: #e9efe6;
    --color-mascot-text: #5c6e55;

    --font-ui: 'Nunito', sans-serif;
    --font-wordmark: 'Baloo 2', cursive;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--color-cream);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-weight: 600;
}

a {
    color: var(--color-terracotta-dark);
}

a:hover {
    color: var(--color-terracotta);
}

.wordmark {
    font-family: var(--font-wordmark);
    font-weight: 700;
    text-transform: lowercase;
}

.card {
    background-color: var(--color-card);
    border-radius: var(--color-card-radius);
    border: 1px solid var(--color-border);
    padding: 1.25rem 1.5rem;
}

.mascot-tip {
    background-color: var(--color-mascot-bg);
    color: var(--color-mascot-text);
    border-radius: var(--color-card-radius);
    padding: 0.75rem 1rem;
    font-weight: 600;
}

/* Base form-control styling — every screen's <label>/<input>/<select>/
   <textarea>/<button> across the app relies on this (checked: zero templates
   put their own inline style= on a <button>, so nothing here fights an
   existing override — inline styles always win over these rules anyway).
   Was missing entirely until now: every screen was rendering with raw
   browser-default form controls, only ever verified via curl (HTTP status +
   text content), never an actual screenshot. */
label {
    display: block;
    margin: 1rem 0 0.35rem;
    font-weight: 700;
    font-size: 0.9rem;
}

label:first-child {
    margin-top: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="file"],
select,
textarea {
    display: block;
    width: 100%;
    font: 600 15px var(--font-ui);
    color: var(--color-ink);
    background-color: var(--color-cream);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-terracotta);
}

button,
input[type="submit"] {
    font: 800 14px var(--font-ui);
    color: #fff;
    background-color: var(--color-terracotta);
    border: none;
    border-radius: 20px;
    padding: 0.65rem 1.4rem;
    cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
    background-color: var(--color-terracotta-dark);
}

/* Color/avatar "swatch" pickers (nid creation/join, README screens 12b/6b/6d)
   — a real radio input, visually hidden but still focusable/keyboard-usable,
   paired with a <label> styled as the clickable circle. CSS-only selection
   ring via the sibling :checked selector, no JS needed. */
.swatch-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

.color-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
}

.avatar-swatch {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    box-sizing: border-box;
}

.swatch-input:checked + .color-swatch,
.swatch-input:checked + .avatar-swatch {
    outline: 3px solid var(--color-ink);
    outline-offset: 2px;
}

.swatch-input:focus-visible + .color-swatch,
.swatch-input:focus-visible + .avatar-swatch {
    outline: 3px solid var(--color-terracotta);
    outline-offset: 2px;
}

/* Role-chip picker (README screen 20a invite panel) — same hidden-radio +
   sibling-label pattern as .swatch-input above, just pill-shaped instead
   of circular. */
.role-chip-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

.role-chip {
    background: #fff;
    color: var(--color-ink);
    border: 1.5px solid var(--color-border);
    border-radius: 16px;
    padding: 8px 16px;
    font: 800 12.5px var(--font-ui);
    cursor: pointer;
    display: inline-block;
}

.role-chip-input:checked + .role-chip {
    background: var(--color-terracotta);
    color: #fff;
    border-color: transparent;
}

.role-chip-input:focus-visible + .role-chip {
    outline: 2px solid var(--color-terracotta-dark);
    outline-offset: 2px;
}

/* Sidebar nid-switcher disclosure (README 21a) — background/caret/label
   color flip when open, driven entirely by the native <details open>
   attribute, no JS. */
.nid-switcher > summary {
    list-style: none;
}

.nid-switcher[open] > summary {
    background: var(--color-tint-rose);
}

.nid-switcher .switcher-caret-open {
    display: none;
}

.nid-switcher[open] .switcher-caret-open {
    display: inline;
}

.nid-switcher[open] .switcher-caret-closed {
    display: none;
}

.nid-switcher[open] .switcher-nid-name {
    color: var(--color-terracotta-dark);
}

.avatar-more-toggle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px dashed var(--color-discreet);
    display: grid;
    place-items: center;
    font: 700 10px var(--font-ui);
    color: var(--color-discreet);
    cursor: pointer;
    list-style: none;
    box-sizing: border-box;
}

summary::-webkit-details-marker {
    display: none;
}

/* A checkbox-style toggle rendered as a <button> (real checkboxes can't
   easily submit their own form on click without JS) — override the global
   button styling above so it reads as a checkbox, not a primary action
   pill (README screen 12d: shopping item rows). */
.checkbox-toggle {
    background: transparent;
    color: var(--color-ink);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    width: 23px;
    height: 23px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    display: grid;
    place-items: center;
}

.checkbox-toggle:hover {
    background: transparent;
    border-color: var(--color-terracotta);
}

.checkbox-toggle[aria-checked="true"] {
    background: var(--color-sage);
    border-color: var(--color-sage);
    color: #fff;
}

/* Visually hidden but announced by screen readers — for a page's semantic
   <h1> on screens whose visual design has no on-screen title text. */
.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;
}

/* Pill on/off switch (README Tour 25a "SECTIONS DU NID" / "LA LINOTTE
   VEILLE") — a <button> (not a checkbox) so a click submits its own
   surrounding <form> immediately, same immediate-apply idiom as every
   other click-choice in the app. */
.pill-toggle {
    background: var(--color-toggle-off);
    border: none;
    border-radius: 12px;
    width: 40px;
    height: 23px;
    position: relative;
    padding: 0;
    cursor: pointer;
    flex: none;
}

.pill-toggle[aria-checked="true"] {
    background: var(--color-sage);
}

/* Without these, the global `button:hover` rule above (a same-weight
   element+pseudo-class selector matched against every plain <button>)
   wins the cascade on hover and flashes the toggle terracotta-dark —
   easy to miss since it only shows up with a mouse actually over the
   element, never in a static screenshot. */
.pill-toggle:hover {
    background: var(--color-toggle-off);
}

.pill-toggle[aria-checked="true"]:hover {
    background: var(--color-sage);
}

.pill-toggle-knob {
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: left .15s ease;
}

.pill-toggle[aria-checked="true"] .pill-toggle-knob {
    left: 19.5px;
}

/* Emblem picker (README Tour 25a quick-row / 25c+26a full 30-emblem grid)
   — each emoji is its own submit button (mirrors the sidebar nid-switcher's
   per-item <form>), so picking one applies immediately with no JS. */
.emblem-option {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: none;
    display: grid;
    place-items: center;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.emblem-option[aria-current="true"] {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 1.5px;
}

.emblem-option-lg {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 25px;
}

.emblem-option-lg[aria-current="true"] {
    outline: 2.5px solid var(--color-terracotta);
    outline-offset: 2px;
}

.emblem-option-check {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--color-terracotta);
    color: #fff;
    display: grid;
    place-items: center;
    font: 800 10.5px var(--font-ui);
    border: 2px solid #fff;
}

/* Native <dialog> modals (README Tour 25b rename / 25c emblem picker) —
   showModal() gives free centering + focus trap + Escape-to-close; only the
   look needs overriding here. */
dialog {
    border: none;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(74, 66, 56, .35);
    padding: 24px 26px;
    box-sizing: border-box;
    color: var(--color-ink);
}

dialog::backdrop {
    background: rgba(74, 66, 56, .30);
    backdrop-filter: blur(2.5px);
}

/* README 36a "Quitter le nid — confirmation": the mock's voile is a touch
   darker than the shared dialog backdrop above. */
#leave-current-confirm::backdrop {
    background: rgba(74, 66, 56, .35);
}

/* README 35a/35b "Créer ou rejoindre un nid" option cards. */
.start-option-create:hover {
    border-color: #f4c3b2;
}

.start-option-join:hover {
    border-color: #c9d8c2;
}

/* Bottom-center confirmation toast (README "Règles de sauvegarde": every
   immediate-apply click-choice gets one, with an "Annuler" undo action). */
.toast-bar {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    background: #4a4238;
    color: #fff;
    border-radius: 16px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 12px 30px rgba(74, 66, 56, .35);
    z-index: 20;
    font: 700 13px var(--font-ui);
}

.toast-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-sage);
    display: grid;
    place-items: center;
    font: 800 11px var(--font-ui);
    flex: none;
}

.toast-undo {
    background: transparent;
    border: none;
    color: var(--color-mustard);
    font: 800 12.5px var(--font-ui);
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
}

/* Tour 33c: a row whose delete was just confirmed disappears immediately
   (see assets/delete-undo.js) — only the actual server request is
   deferred for the undo toast's ~5s window. !important is load-bearing
   here: every card in this app sets its own `display` inline (e.g.
   `style="display: flex; ..."`), which otherwise beats a plain class
   selector on specificity and silently no-ops the hide. */
.is-pending-delete {
    display: none !important;
}

/* Event form field label + bordered box (README Tour 28a "Nouvel
   événement") — every TITRE/DATE/DÉBUT/FIN/NOTES field shares this look. */
.field-label {
    font: 800 11px var(--font-ui);
    color: var(--color-muted);
    letter-spacing: .5px;
}

.field-box,
.field-box[type] {
    background: var(--color-cream);
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    padding: 11px 14px;
    font: 700 13.5px var(--font-ui);
    color: var(--color-ink);
    width: 100%;
    box-sizing: border-box;
}

.field-box:focus {
    outline: none;
    border-color: var(--color-terracotta);
    background: #fff;
}

textarea.field-box {
    font: 600 13px/1.5 var(--font-ui);
    resize: vertical;
    min-height: 56px;
}

/* Attendee/recurrence chip (README 28a "QUI EST CONCERNÉ" / "RÉCURRENCE")
   — same hidden-input + sibling-label idiom as .role-chip, but with room
   for a small avatar-initial circle inside the chip. */
.event-chip-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

.event-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 16px;
    padding: 6px 13px 6px 7px;
    font: 800 12px var(--font-ui);
    background: #fff;
    border: 1.5px solid var(--color-border);
    color: var(--color-ink);
    cursor: pointer;
}

.event-chip-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    display: grid;
    place-items: center;
    font: 800 10px var(--font-ui);
}

.event-chip-input:checked + .event-chip {
    background: var(--color-tint-rose);
    border-color: var(--color-terracotta);
    color: var(--color-terracotta-dark);
}

.event-chip-input:focus-visible + .event-chip {
    outline: 2px solid var(--color-terracotta-dark);
    outline-offset: 2px;
}

/* Recurrence chip — plain pill, no avatar, filled when selected (README
   28a "RÉCURRENCE"). */
.recurrence-chip-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

.recurrence-chip {
    background: #fff;
    color: var(--color-ink);
    border: 1.5px solid var(--color-border);
    border-radius: 16px;
    padding: 8px 14px;
    font: 700 12px var(--font-ui);
    cursor: pointer;
    display: inline-block;
}

.recurrence-chip-input:checked + .recurrence-chip {
    background: var(--color-terracotta);
    color: #fff;
    border-color: transparent;
    font-weight: 800;
}

.recurrence-chip-input:focus-visible + .recurrence-chip {
    outline: 2px solid var(--color-terracotta-dark);
    outline-offset: 2px;
}

/* Toggle switch (tour 29's various "activer/désactiver" fields — relance
   cadeau, rappel programmé, ajout auto aux courses, visible parents
   uniquement…) — same hidden-checkbox-plus-sibling-label idiom as
   .event-chip-input/.recurrence-chip-input above, styled as a pill. */
.toggle-switch-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

.toggle-switch {
    display: inline-block;
    width: 40px;
    height: 24px;
    border-radius: 12px;
    background: var(--color-border);
    position: relative;
    cursor: pointer;
    flex: none;
    transition: background .15s ease;
}

.toggle-switch::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(74, 66, 56, .25);
    transition: transform .15s ease;
}

.toggle-switch-input:checked + .toggle-switch {
    background: var(--color-terracotta);
}

.toggle-switch-input:checked + .toggle-switch::before {
    transform: translateX(16px);
}

.toggle-switch-input:focus-visible + .toggle-switch {
    outline: 2px solid var(--color-terracotta-dark);
    outline-offset: 2px;
}

/* Date picker (README Tour 28b) — trigger button opens a JS-rendered
   popover (assets/date-picker.js): shortcuts, month nav, and a tap-year
   month+year sub-picker. */
.date-picker-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid var(--color-terracotta);
    border-radius: 12px;
    padding: 10.5px 14px;
    font: 700 13.5px var(--font-ui);
    color: var(--color-ink);
    cursor: pointer;
}

.date-picker-trigger-icon {
    margin-left: auto;
    font-size: 13px;
}

.date-picker-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 296px;
    background: #fff;
    border-radius: 16px;
    border: 1.5px solid var(--color-border);
    box-shadow: 0 18px 44px rgba(74, 66, 56, .25);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
    box-sizing: border-box;
}

.date-picker-popover[hidden] {
    display: none;
}

.date-picker-shortcuts {
    display: flex;
    gap: 6px;
}

.date-picker-shortcut {
    background: var(--color-cream);
    color: #6d6459;
    border: none;
    border-radius: 12px;
    padding: 6px 10px;
    font: 800 11px var(--font-ui);
    cursor: pointer;
}

.date-picker-shortcut[data-active] {
    background: var(--color-tint-rose);
    color: var(--color-terracotta-dark);
}

.date-picker-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-picker-nav-btn {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--color-cream);
    display: grid;
    place-items: center;
    font: 800 13px var(--font-ui);
    color: var(--color-muted);
    border: none;
    cursor: pointer;
}

.date-picker-month-label {
    flex: 1;
    text-align: center;
    font: 800 13px var(--font-ui);
    color: var(--color-ink);
    cursor: pointer;
    background: none;
    border: none;
}

.date-picker-month-label .year {
    color: var(--color-terracotta-dark);
}

.date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    justify-items: center;
}

.date-picker-weekday {
    font: 800 10px var(--font-ui);
    color: var(--color-discreet);
    text-align: center;
}

.date-picker-day {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font: 700 12px var(--font-ui);
    color: var(--color-ink);
    cursor: pointer;
    background: none;
    border: none;
}

.date-picker-day[data-today] {
    background: var(--color-tint-rose);
    color: var(--color-terracotta-dark);
}

.date-picker-day[data-selected] {
    background: var(--color-terracotta);
    color: #fff;
    font-weight: 800;
}

.date-picker-hint {
    font: 600 10.5px var(--font-ui);
    color: var(--color-discreet);
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
}

.date-picker-month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.date-picker-month-cell {
    padding: 10px;
    border-radius: 10px;
    background: var(--color-cream);
    font: 700 12.5px var(--font-ui);
    color: var(--color-ink);
    cursor: pointer;
    border: none;
    text-align: center;
}

.date-picker-month-cell[data-active] {
    background: var(--color-terracotta);
    color: #fff;
}

/* Every date-picker/event-chip control above is a plain <button> with its
   own deliberate background — without this, the global `button:hover`
   rule (same specificity weight as these single-class selectors) wins on
   hover and flashes them terracotta-dark. Same bug class already fixed
   once for .pill-toggle; these need the same treatment. */
.date-picker-trigger:hover {
    background: #fff;
    color: var(--color-ink);
}

.date-picker-shortcut:hover {
    background: var(--color-cream);
    color: #6d6459;
}

.date-picker-shortcut[data-active]:hover {
    background: var(--color-tint-rose);
    color: var(--color-terracotta-dark);
}

.date-picker-nav-btn:hover {
    background: var(--color-cream);
    color: var(--color-muted);
}

.date-picker-month-label:hover {
    background: none;
    color: var(--color-ink);
}

.date-picker-day:hover {
    background: none;
    color: var(--color-ink);
}

.date-picker-day[data-today]:hover {
    background: var(--color-tint-rose);
    color: var(--color-terracotta-dark);
}

.date-picker-day[data-selected]:hover {
    background: var(--color-terracotta);
    color: #fff;
}

.date-picker-month-cell:hover {
    background: var(--color-cream);
    color: var(--color-ink);
}

.date-picker-month-cell[data-active]:hover {
    background: var(--color-terracotta);
    color: #fff;
}

/* Event detail popover (README Tour 28c) — anchored near the clicked
   agenda chip via inline top/left set by assets/event-detail.js, not
   centered like the <dialog> modals elsewhere. */
.event-detail-popover {
    position: absolute;
    width: 330px;
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid var(--color-border);
    box-shadow: 0 20px 50px rgba(74, 66, 56, .28);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10;
    box-sizing: border-box;
}

.event-detail-popover[hidden] {
    display: none;
}

.event-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9;
}

.event-detail-backdrop[hidden] {
    display: none;
}

/* Notes-existence badge on an agenda chip (README Tour 28c/4g). */
.event-note-badge {
    font-size: 9px;
}

/* README screens 12c/12e/12f/27a: a finished event (end < now) stays visible
   but reads as "done" — dimmed, subtitle swapped for "Terminé ✓". The
   `.is-past` class is set both on initial render (server-side, from the
   request time) and kept in sync afterwards by assets/past-event-greying.js
   polling each element's data-event-end, so a card crosses over mid-session
   without needing a reload. */
.event-subtitle-normal {
    display: flex;
}

[data-event-end] .event-subtitle-finished {
    display: none;
}

[data-event-end].is-past {
    opacity: .5;
}

[data-event-end].is-past .event-subtitle-normal {
    display: none;
}

[data-event-end].is-past .event-subtitle-finished {
    display: block;
}

/* PROMPT_MARKETING_MOBILE.md — promo landing page (7a desktop / 39a mobile /
   39b burger-open), single breakpoint at 900px (below that the desktop nav's
   6 items/pills can't fit on one line, matching the brief's "le burger
   apparaît dès que la nav ne tient plus sur une ligne"). Properties that
   must differ between breakpoints live here as classes rather than inline
   styles specifically so this media query can actually override them — an
   inline style attribute always wins over an external stylesheet rule
   regardless of specificity, so anything responsive can't stay inline. */
.promo-nav-bar {
    padding: 18px 48px;
    position: relative;
}

.promo-nav-desktop {
    display: flex;
}

.promo-nav-mobile {
    display: none;
}

.promo-hero-section {
    padding: 40px 48px 64px;
}

.promo-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center;
}

.promo-hero-actions-desktop {
    display: flex;
}

.promo-hero-subtitle-mobile,
.promo-hero-actions-mobile,
.promo-hero-visual-mobile,
.promo-feature-body-mobile {
    display: none;
}

.promo-features-section {
    padding: 56px 48px;
}

.promo-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.promo-trust-section {
    padding: 56px 48px;
}

.promo-trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.promo-cta-section {
    margin: 0 48px 56px;
}

.promo-cta-inner {
    padding: 48px;
    border-radius: 28px;
}

.promo-cta-actions-desktop {
    display: flex;
}

.promo-cta-actions-mobile {
    display: none;
}

.promo-footer-row {
    padding: 28px 48px;
}

@media (max-width: 900px) {
    .promo-nav-bar {
        padding: 14px 18px;
    }

    .promo-nav-desktop {
        display: none;
    }

    .promo-nav-mobile {
        display: flex;
    }

    .promo-hero-section {
        padding: 18px 20px 30px;
    }

    .promo-hero-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .promo-hero-text {
        text-align: center;
        align-items: center;
    }

    .promo-hero-subtitle-desktop,
    .promo-hero-actions-desktop,
    .promo-hero-visual-desktop {
        display: none;
    }

    .promo-hero-subtitle-mobile {
        display: block;
    }

    .promo-hero-actions-mobile {
        display: flex;
    }

    .promo-hero-visual-mobile {
        display: block;
    }

    .promo-features-section {
        padding: 36px 20px;
    }

    .promo-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .promo-feature-body-desktop {
        display: none;
    }

    .promo-feature-body-mobile {
        display: block;
    }

    .promo-trust-section {
        padding: 36px 20px;
    }

    .promo-trust-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .promo-cta-section {
        margin: 0 16px 36px;
    }

    .promo-cta-inner {
        padding: 30px 22px;
        border-radius: 24px;
    }

    .promo-cta-actions-desktop {
        display: none;
    }

    .promo-cta-actions-mobile {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .promo-footer-row {
        padding: 22px 20px;
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
}

/* PROMPT_MARKETING_MOBILE.md §2 — burger menu (39b): summary is the 38px
   square button, cross-vs-hamburger swap is a pure CSS icon toggle off the
   native <details>'s [open] state (no JS needed for that part — same
   disclosure pattern as .nid-switcher/the language selectors). Scrim +
   panel are plain children of <details>, so the browser's own open/close
   already shows/hides them; assets/promo-nav.js only adds "click the scrim
   closes it too" (a details element only natively toggles via its summary). */
.promo-burger > summary {
    list-style: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--color-border);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.promo-burger[open] > summary {
    background: var(--color-ink);
    border-color: var(--color-ink);
}

.promo-burger-icon-open {
    display: none;
}

.promo-burger-icon-closed {
    display: block;
}

.promo-burger[open] .promo-burger-icon-open {
    display: block;
}

.promo-burger[open] .promo-burger-icon-closed {
    display: none;
}