/* Atelier GLK (/personnaliser-bijoux) — step-by-step jewellery configurator.
 * Desktop: a large 3D stage on the left, a structured panel on the right (sticky header with
 * the five steps, scrolling choices, docked actions). Mobile: the ring stays at the top, the
 * choices sit in a sheet under it, each list scrolls sideways, the actions are docked below. */
:root {
    --ag-bg: #f7f4ee;
    --ag-surface: #ffffff;
    --ag-surface-2: #faf7f2;
    --ag-ink: #1d1b18;
    --ag-muted: #6d665c;
    --ag-line: #e6dfd2;
    --ag-accent: #84652d; /* 4.8:1 on --ag-bg, 5.4:1 on white (WCAG AA) */
    --ag-accent-ink: #ffffff;
    --ag-accent-soft: #f1e7d3;
    --ag-focus: #1d5fd1;
    --ag-radius: 14px;
    --ag-shadow: 0 1px 2px rgba(29, 27, 24, .05), 0 8px 24px rgba(29, 27, 24, .07);
    --ag-ease: cubic-bezier(.2, .7, .2, 1);
    --ag-serif: 'Cormorant Garamond', Georgia, serif;
    --ag-header: 57px;
}

* { box-sizing: border-box; }
body.ag-page {
    margin: 0;
    background: var(--ag-bg);
    color: var(--ag-ink);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.ag-sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* Visible keyboard focus everywhere, never on mouse click. */
.ag-page :focus { outline: none; }
.ag-page :focus-visible { outline: 2px solid var(--ag-focus); outline-offset: 2px; border-radius: 6px; }

.ag-eyebrow {
    margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ag-accent);
}

/* ------------------------------------------------------------------ brand bar */
.ag-brandbar {
    display: flex; align-items: center; gap: 12px; height: var(--ag-header);
    padding: 0 20px; border-bottom: 1px solid var(--ag-line); background: var(--ag-surface);
}
.ag-brandbar__logo img { display: block; width: 38px; height: 38px; }
.ag-brandbar__title { margin: 0; flex: 1; font-family: var(--ag-serif); font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.ag-brandbar__link {
    color: var(--ag-accent); text-decoration: none; font-weight: 500; font-size: 14px;
    padding: 8px 14px; border: 1px solid var(--ag-line); border-radius: 999px;
}
.ag-brandbar__link:hover { border-color: var(--ag-accent); }

/* ------------------------------------------------------------------ layout */
.ag-layout { display: grid; grid-template-columns: minmax(0, 1fr); }

.ag-stage {
    position: sticky; top: 0; z-index: 1; height: 44vh; min-height: 240px; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 40%, #fdfbf7 0%, #f1ebe0 60%, #e7dfd0 100%);
}
.ag-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ag-stage.is-switching canvas { opacity: .85; transition: opacity .2s; }

.ag-stage__caption {
    position: absolute; left: 20px; bottom: 18px; z-index: 2; display: grid; gap: 2px; pointer-events: none;
    max-width: calc(100% - 140px);
}
.ag-stage__model { font-family: var(--ag-serif); font-size: 30px; font-weight: 600; line-height: 1.1; }
.ag-stage__detail { font-size: 13px; color: var(--ag-muted); }
.ag-stage__recentre {
    position: absolute; top: 14px; right: 14px; z-index: 2; min-height: 36px; padding: 6px 14px;
    border: 1px solid var(--ag-line); border-radius: 999px; background: rgba(255, 255, 255, .85);
    color: var(--ag-ink); font: inherit; font-size: 13px; cursor: pointer; backdrop-filter: blur(6px);
}
.ag-stage__recentre:hover { border-color: var(--ag-accent); }
.ag-stage__hint {
    position: absolute; right: 20px; bottom: 18px; z-index: 2; margin: 0; pointer-events: none;
    font-size: 12px; color: var(--ag-muted);
}

/* First load: a spinner and a progress line, on the stage. */
.ag-stage__status {
    position: absolute; inset: auto 16px 50%; transform: translateY(50%); margin: 0;
    display: grid; justify-items: center; gap: 10px; color: var(--ag-muted); font-size: 14px; text-align: center;
}
.ag-stage__status::before {
    content: ''; width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--ag-line); border-top-color: var(--ag-accent); animation: ag-spin .9s linear infinite;
}
.ag-stage__status::after {
    content: ''; width: min(220px, 60%); height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--ag-accent) calc(var(--progress, 0) * 100%), var(--ag-line) 0);
}
.ag-stage__status[hidden] { display: none; }

/* Model switch: discreet pill on the stage, the current model stays visible underneath. */
.ag-stage__loading {
    position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0;
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--ag-ink);
    font-size: 13px; box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.ag-stage__loading::before {
    content: ''; width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--ag-line); border-top-color: var(--ag-accent); animation: ag-spin .8s linear infinite;
}
.ag-stage__loading[hidden] { display: none; }
@keyframes ag-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ panel */
.ag-panel { min-width: 0; display: flex; flex-direction: column; background: var(--ag-surface); }
.ag-panel__head { padding: 18px 20px 0; background: var(--ag-surface); }
.ag-panel__title { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ag-muted); }

/* Stepper: numbered steps on a progress track, each with its current choice. */
.ag-stepper { position: relative; display: flex; gap: 4px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.ag-stepper::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ag-line); }
.ag-stepper::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 2px;
    width: calc(var(--ag-progress, 0) * 100%); background: var(--ag-accent); transition: width .35s var(--ag-ease);
}
.ag-stepper__item {
    flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px;
    border: 0; background: none; color: var(--ag-muted); font: inherit; text-align: left; cursor: pointer;
    transition: color .15s;
}
.ag-stepper__number {
    flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid var(--ag-line); background: var(--ag-surface); font-size: 12px; font-weight: 600;
    transition: background .2s, color .2s, border-color .2s;
}
.ag-stepper__text { display: grid; min-width: 0; gap: 1px; }
.ag-stepper__label { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-stepper__value { font-size: 11px; color: var(--ag-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-stepper__item.is-done { color: var(--ag-ink); }
.ag-stepper__item.is-done .ag-stepper__number { background: var(--ag-accent-soft); border-color: var(--ag-accent-soft); color: transparent; position: relative; }
.ag-stepper__item.is-done .ag-stepper__number::after { content: '✓'; position: absolute; color: var(--ag-accent); }
.ag-stepper__item[aria-current='step'] { color: var(--ag-ink); }
.ag-stepper__item[aria-current='step'] .ag-stepper__number { background: var(--ag-accent); border-color: var(--ag-accent); color: var(--ag-accent-ink); }
.ag-stepper__item[aria-current='step'] .ag-stepper__label { font-weight: 600; }

/* Step content. */
.ag-step { outline: none; display: flex; flex-direction: column; gap: 22px; padding: 22px 20px 28px; }
.ag-step__header { display: grid; gap: 6px; }
.ag-step__title { margin: 0; font-family: var(--ag-serif); font-size: 34px; font-weight: 600; line-height: 1.05; }
.ag-step__title:focus-visible { outline-offset: 4px; }
.ag-step__intro { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ag-muted); }

.ag-field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.ag-field__legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; float: left; width: 100%;
    padding: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.ag-field__value { margin: -4px 0 0; clear: both; font-family: var(--ag-serif); font-size: 20px; font-weight: 600; }
.ag-badge { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-weight: 500; letter-spacing: .02em; text-transform: none; }
.ag-badge--3d { background: #e5f0e3; color: #2f5a2a; }
.ag-badge--note { background: #f3e8d4; color: #7a5520; }

/* Option cards. */
.ag-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; clear: both; }
.ag-choice {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
    min-height: 44px; padding: 14px 8px 12px; border: 1px solid var(--ag-line); border-radius: var(--ag-radius);
    background: var(--ag-surface-2); color: var(--ag-ink); font: inherit; font-size: 14px; text-align: center; cursor: pointer;
    transition: border-color .15s, box-shadow .2s, transform .2s var(--ag-ease), background .15s;
}
.ag-choice:hover:not(.is-unavailable) { background: var(--ag-surface); box-shadow: var(--ag-shadow); transform: translateY(-2px); }
.ag-choice[aria-checked='true'] { background: var(--ag-surface); border-color: var(--ag-accent); box-shadow: inset 0 0 0 1px var(--ag-accent), var(--ag-shadow); }
.ag-choice[aria-checked='true']::after {
    content: '✓'; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11px; background: var(--ag-accent); color: var(--ag-accent-ink);
}
/* A choice beyond the real product's sources: dashed, with its "À confirmer" tag. */
.ag-choice.is-undocumented { border-style: dashed; }
.ag-choice.is-undocumented[aria-checked='true'] { box-shadow: var(--ag-shadow); }
.ag-choice__tag {
    align-self: center; margin-top: 2px; padding: 1px 7px; border-radius: 999px;
    background: #f3e8d4; color: #7a5520; font-size: 10px; font-weight: 600; letter-spacing: .02em;
}
.ag-badge--undocumented { background: #f3e8d4; color: #7a5520; }
.ag-product-link { display: inline-block; margin-top: 6px; font-size: 13px; }
.ag-model-step { display: grid; gap: 12px; }
.ag-choice.is-unavailable { opacity: .45; cursor: not-allowed; background: repeating-linear-gradient(135deg, var(--ag-surface), var(--ag-surface) 6px, #f6f2ea 6px, #f6f2ea 12px); }
.ag-choice__media { display: grid; place-items: center; width: 60px; height: 60px; }
.ag-choice__text { display: flex; flex-direction: column; gap: 2px; }
.ag-choice__label { font-size: 13px; line-height: 1.25; }
.ag-choice__sub { font-size: 11px; color: var(--ag-muted); }

.ag-thumb { width: 100%; height: 100%; display: block; }
.ag-thumb--img { border-radius: 50%; object-fit: cover; background: #f1ede6; }
.ag-thumb--wide { border-radius: 6px; object-fit: contain; background: none; }
.ag-choice__media:has(.ag-thumb--wide) { width: 100%; max-width: 120px; height: 60px; }
.ag-thumb--swatch { border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); width: 38px; height: 38px; box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .08); }
.ag-thumb__stone { fill: #eef3fb; stroke: #8a97ab; stroke-width: .05; stroke-linejoin: round; }
.ag-thumb__facet { fill: none; stroke: #b4c0d2; stroke-width: .03; }
.ag-thumb__metal { fill: #c9b48a; stroke: #9c8556; stroke-width: .03; }
.ag-thumb__bezel { fill: none; stroke: #a99266; stroke-width: .14; }
.ag-thumb__v { fill: none; stroke: #9c8556; stroke-width: .1; stroke-linecap: round; stroke-linejoin: round; }
.ag-thumb__band { fill: none; stroke: #c9b48a; stroke-width: .12; }

/* Model cards: a large preview tile, then the family and the name. */
.ag-choices--models { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ag-choices--models .ag-choice { padding: 0 0 14px; overflow: hidden; align-items: stretch; text-align: left; }
.ag-choices--models .ag-choice__media {
    width: 100%; height: 112px; padding: 14px;
    background: radial-gradient(90% 90% at 50% 40%, #ffffff 0%, #f1ebe0 100%); border-bottom: 1px solid var(--ag-line);
}
.ag-choices--models .ag-choice__media svg { width: 84px; height: 84px; }
.ag-choices--models .ag-choice__text { padding: 0 14px; flex-direction: column-reverse; }
.ag-choices--models .ag-choice__label { font-family: var(--ag-serif); font-size: 19px; font-weight: 600; line-height: 1.15; }
.ag-choices--models .ag-choice__sub { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ag-accent); }
.ag-choices--models[aria-busy='true'] .ag-choice[aria-checked='true'] { opacity: .7; cursor: progress; }

.ag-choices--sizes { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
.ag-choices--sizes .ag-choice { padding: 10px 4px; border-radius: 10px; }
.ag-choices--sizes .ag-choice[aria-checked='true']::after { display: none; }
.ag-choices--sizes .ag-choice[aria-checked='true'] { background: var(--ag-accent); color: var(--ag-accent-ink); }
.ag-choices--sizes .ag-choice:last-child { grid-column: 1 / -1; }

.ag-reason, .ag-notice { margin: 0; font-size: 13px; color: var(--ag-muted); line-height: 1.5; }
.ag-link { color: var(--ag-accent); font-size: 14px; }
.ag-switch-notice {
    margin: 16px 20px 0; padding: 12px 14px; border-radius: 12px; border-left: 3px solid var(--ag-accent);
    background: var(--ag-accent-soft); color: var(--ag-ink); font-size: 13.5px; line-height: 1.45;
}
.ag-switch-notice[hidden] { display: none; }

/* ------------------------------------------------------------------ recap */
.ag-summary { display: grid; gap: 18px; }
.ag-summary__hero {
    display: grid; gap: 4px; padding: 18px; border-radius: var(--ag-radius);
    background: radial-gradient(120% 120% at 0% 0%, #fffdf9 0%, var(--ag-accent-soft) 100%);
}
.ag-summary__model { margin: 0; font-family: var(--ag-serif); font-size: 26px; font-weight: 600; }
.ag-summary__list { margin: 0; display: grid; border: 1px solid var(--ag-line); border-radius: var(--ag-radius); overflow: hidden; }
.ag-summary__row { position: relative; display: grid; gap: 2px; padding: 10px 96px 10px 14px; border-top: 1px solid var(--ag-line); }
.ag-summary__row:first-child { border-top: 0; }
.ag-summary__row dt { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ag-muted); letter-spacing: .04em; }
.ag-summary__media { width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.ag-summary__row dd { margin: -20px 0 0 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 500; font-size: 14px; }
.ag-summary__edit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--ag-accent); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 4px; }
.ag-summary__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ag-save { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ag-save > .ag-button { flex: 1 1 auto; }
.ag-save__status { flex: 1 0 100%; margin: 0; font-size: 13px; color: var(--ag-muted); }
.ag-save__status:empty { display: none; }
.ag-save__link { flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--ag-line); border-radius: 10px; font: inherit; font-size: 13px; background: var(--ag-surface-2); color: var(--ag-ink); }

/* ------------------------------------------------------------------ actions */
.ag-nav {
    position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px; margin-top: auto;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--ag-line); backdrop-filter: blur(8px);
}
.ag-nav__count { flex: 1; font-size: 13px; color: var(--ag-muted); text-align: center; }
.ag-button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
    padding: 12px 22px; border: 1px solid var(--ag-accent); border-radius: 999px;
    background: var(--ag-accent); color: var(--ag-accent-ink); font: inherit; font-weight: 500; letter-spacing: .02em;
    text-decoration: none; cursor: pointer; transition: background .15s, transform .15s var(--ag-ease);
}
.ag-button:hover:not(:disabled) { background: #6f5424; }
.ag-button--ghost { background: transparent; color: var(--ag-accent); }
.ag-button--ghost:hover:not(:disabled) { background: var(--ag-accent-soft); }
.ag-button:disabled { opacity: .35; cursor: not-allowed; }
.ag-button[hidden] { display: none; }
.ag-nav [data-ag-next] { min-width: 180px; }

/* ------------------------------------------------------------------ transitions */
.ag-step > * { animation: ag-in .28s var(--ag-ease) both; }
.ag-step > *:nth-child(2) { animation-delay: .04s; }
.ag-step > *:nth-child(3) { animation-delay: .08s; }
.ag-step > *:nth-child(4) { animation-delay: .12s; }
@keyframes ag-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ desktop */
@media (min-width: 960px) {
    .ag-layout { grid-template-columns: minmax(0, 1.55fr) minmax(400px, 1fr); height: calc(100vh - var(--ag-header)); }
    .ag-stage { height: calc(100vh - var(--ag-header)); }
    .ag-stage__caption { left: 32px; bottom: 28px; }
    .ag-stage__model { font-size: 40px; }
    .ag-stage__hint { right: 28px; bottom: 30px; }
    .ag-panel { height: calc(100vh - var(--ag-header)); overflow-y: auto; border-left: 1px solid var(--ag-line); box-shadow: -12px 0 32px rgba(29, 27, 24, .04); }
    .ag-panel__head { position: sticky; top: 0; z-index: 3; padding: 22px 32px 0; border-bottom: 1px solid var(--ag-line); }
    .ag-step { padding: 28px 32px 36px; }
    .ag-switch-notice { margin: 20px 32px 0; }
    .ag-nav { padding: 14px 32px; }
    .ag-nav__title { display: inline; }
    /* Number above the label: the five step names fit without being cut. */
    .ag-stepper__item { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
    .ag-stepper__text { width: 100%; justify-items: stretch; }
    .ag-stepper__label, .ag-stepper__value { display: block; }
}
@media (min-width: 1400px) {
    .ag-layout { grid-template-columns: minmax(0, 1.7fr) minmax(460px, 1fr); }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 959px) {
    .ag-brandbar { height: 52px; padding: 0 14px; }
    .ag-brandbar__title { font-size: 19px; }
    /* The ring stays in view while choosing. */
    .ag-stage { height: 40vh; min-height: 230px; max-height: 380px; }
    .ag-stage__caption { left: 16px; top: 12px; bottom: auto; max-width: calc(100% - 130px); }
    .ag-stage__model { font-size: 20px; }
    .ag-stage__detail { display: none; }
    .ag-stage__hint { display: none; }
    .ag-stage__recentre { top: 10px; right: 10px; min-height: 32px; padding: 4px 12px; font-size: 12px; }
    /* The choices: a sheet over the bottom of the stage. */
    .ag-panel { position: relative; z-index: 2; margin-top: -18px; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 24px rgba(29, 27, 24, .08); }
    .ag-panel::before { content: ''; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: var(--ag-line); }
    .ag-panel__head { padding: 8px 16px 0; }
    .ag-panel__title { display: none; }
    .ag-stepper__item { flex: 1 0 auto; justify-content: center; align-items: center; }
    .ag-stepper__item:not([aria-current='step']) .ag-stepper__text { display: none; }
    .ag-stepper__value { display: none; }
    /* The active step reads at once: a filled pill with its name; done steps ticked. */
    .ag-stepper { padding-bottom: 10px; }
    .ag-stepper::before, .ag-stepper::after { height: 3px; }
    .ag-stepper__item[aria-current='step'] { flex: 0 0 auto; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--ag-accent); color: var(--ag-accent-ink); }
    .ag-stepper__item[aria-current='step'] .ag-stepper__number { background: var(--ag-accent-ink); border-color: var(--ag-accent-ink); color: var(--ag-accent); }
    .ag-stepper__item[aria-current='step'] .ag-stepper__label { font-size: 14px; }
    .ag-stepper__item:not([aria-current='step']):not(.is-done) .ag-stepper__number { color: var(--ag-muted); background: var(--ag-surface-2); }
    /* A step scrolled into view lands below the sticky ring, never under it. */
    .ag-step { padding: 18px 16px 24px; gap: 20px; scroll-margin-top: calc(clamp(230px, 40vh, 380px) - 8px); }
    .ag-step__title { font-size: 28px; }
    .ag-field__value { font-size: 18px; }
    /* Each list scrolls sideways: the screen stays clear, the ring stays visible. */
    .ag-choices:not(.ag-choices--sizes) {
        display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
        margin: 0 -16px; padding: 2px 16px 6px; scroll-padding: 0 16px;
    }
    .ag-choices:not(.ag-choices--sizes)::-webkit-scrollbar { display: none; }
    .ag-choices:not(.ag-choices--sizes) > .ag-choice { flex: 0 0 104px; scroll-snap-align: start; }
    /* Discreet hint that a list goes on: its edge fades where more cards wait. */
    .ag-choices.has-more-right { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
    .ag-choices.has-more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
    .ag-choices.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
    .ag-choices--models > .ag-choice { flex-basis: 168px !important; }
    .ag-choices--models .ag-choice__media { height: 96px; }
    .ag-switch-notice { margin: 14px 16px 0; }
    .ag-nav { margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
    .ag-nav__title { display: none; }
    .ag-nav [data-ag-next] { min-width: 0; flex: none; }
    .ag-summary__actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ag-step > *, .ag-stage__status::before, .ag-stage__loading::before { animation: none; }
    .ag-choice, .ag-stepper::after, .ag-stepper__item, .ag-button { transition: none; }
    .ag-choice:hover:not(.is-unavailable) { transform: none; }
}

/* ------------------------------------------------------------------ page */
.ag-unavailable { max-width: 560px; margin: 48px auto; padding: 0 16px; }
.ag-about { max-width: 760px; margin: 0 auto; padding: 48px 16px 56px; line-height: 1.6; }
.ag-about h2 { font-family: var(--ag-serif); font-size: 30px; font-weight: 600; margin: 0 0 12px; }
.ag-about p { margin: 0 0 12px; color: var(--ag-ink); }
.ag-about__links { display: flex; flex-wrap: wrap; gap: 16px; }
.ag-about__links a { color: var(--ag-accent); }