:root {
    --ease-soft: cubic-bezier(.2, .7, .25, 1);
    --dialog-gap: max(14px, env(safe-area-inset-top), env(safe-area-inset-bottom));
    --dialog-side-gap: max(14px, env(safe-area-inset-left), env(safe-area-inset-right));
}
html { scrollbar-gutter: stable; }

/* A fixed header and a separate scroll area keep the close target in place. */
.site-dialog {
    position: fixed;
    inset: calc(var(--viewport-top, 0px) + var(--viewport-height, 100dvh) / 2) 0 auto;
    transform: translateY(-50%);
    width: min(600px, calc(100% - var(--dialog-side-gap) * 2));
    max-width: calc(100% - var(--dialog-side-gap) * 2);
    max-height: calc(var(--viewport-height, 100dvh) - var(--dialog-gap) * 2);
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
.site-dialog[open] { display: flex; flex-direction: column; }
.dialog-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    z-index: 1;
}
.dialog-toolbar h2 {
    flex: 1;
    align-self: center;
    min-width: 0;
    margin: 0;
    font-size: clamp(18px, 4.7vw, 24px);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.dialog-close {
    position: static;
    inset: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--raised);
    color: var(--cream);
    font-size: 18px;
    line-height: 1;
    transition: background-color 160ms ease, border-color 160ms ease, scale 100ms ease;
}
.dialog-close .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
    pointer-events: none;
}
.dialog-close .icon::before { line-height: 1; }
.dialog-close:active { scale: .94; }
.dialog-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding: 24px 28px 28px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-padding-block: 16px;
    -webkit-overflow-scrolling: touch;
}
.dialog-body > p:first-child { margin-top: 0; }
.dialog-body > .education-notice:first-child { margin-top: 0; }
.review-details > div { grid-template-columns: 110px minmax(0, 1fr); }
.review-details dt, .review-details dd { min-width: 0; overflow-wrap: anywhere; }
.review-total { flex-wrap: wrap; }
.dialog-legal-links button { min-height: 44px; padding: 8px 4px; }

/* Light is stationary, warm and quiet. */
.hero-copy { position: relative; isolation: isolate; }
.hero-glow {
    color: #e9c19b;
    text-shadow: 0 0 16px #dba26726, 0 0 42px #c7864924;
}
.hero-copy::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 5% 2% 30% 0;
    background: radial-gradient(ellipse at 42% 48%, #ca8f4e0c, transparent 68%);
    pointer-events: none;
}
@supports (color: color(display-p3 1 1 1)) {
    .hero-glow { color: color(display-p3 .91 .76 .60); }
}

/* Hover never moves the pointer target more than one pixel. */
.button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 180ms ease, transform 180ms var(--ease-soft);
}
.button::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(110px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #fff5, transparent 72%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}
.button .fa-arrow-right, .download-link .fa-download { transition: transform 180ms var(--ease-soft); }
.button:active { transform: scale(.985); box-shadow: inset 0 1px 4px #0002; }
.round-link, .quantity-control button, .step-back, .config-step-tabs button {
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, scale 100ms ease;
}
.round-link:active, .quantity-control button:active, .step-back:active, .config-step-tabs button:active { scale: .96; }
button:disabled:active { scale: 1; }
.flavor-surface { transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.flavor-option input:checked + .flavor-surface { box-shadow: inset 0 0 0 1px #cf9c7030; }
.has-motion .flavor-option input:checked + .flavor-surface .choice-mark { animation: choice-settle 180ms var(--ease-soft); }
.field input, .field select { transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.field input:focus, .field select:focus { border-color: var(--copper); }
.aroma-row input:focus-visible + output { color: var(--cream); }
.main-nav a { position: relative; }
.main-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 1px;
    background: var(--copper);
    transform: scaleX(.5);
    opacity: 0;
    transition: transform 180ms var(--ease-soft), opacity 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .button:hover { background: #d9ad85; transform: translateY(-1px); box-shadow: 0 5px 16px #0002; }
    .button-secondary:hover { background: var(--raised); border-color: var(--copper); }
    .button:hover::before { opacity: .55; }
    .button:hover .fa-arrow-right { transform: translateX(2px); }
    .button:active { transform: scale(.985); }
    .download-link:hover .fa-download { transform: translateY(2px); }
    .round-link:hover { box-shadow: 0 3px 10px #0002; }
    .dialog-close:hover { background: #3b2b20; border-color: var(--copper); }
    .flavor-option:hover .flavor-surface { border-color: #b48a68; }
    .main-nav a:hover::after { transform: scaleX(1); opacity: .7; }
    .has-motion .profile-card:hover .profile-orbit { transform: rotate(-26deg); }
    .has-motion .profile-card:hover .profile-core .icon { transform: rotate(5deg); }
}
.has-motion .hero-visual > img[data-parallax] {
    inset: -24px;
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    max-width: none;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
}
.has-motion .story-orbit[data-parallax] { translate: 0 var(--parallax-y, 0px); }
.is-parallax-visible { will-change: transform; }
.has-motion .menu-open .main-nav { animation: menu-arrive 180ms var(--ease-soft); }
@keyframes choice-settle { from { scale: .85; } to { scale: 1; } }
@keyframes menu-arrive { from { opacity: .6; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (pointer: coarse) {
    html, body { touch-action: pan-y; }
    .site-header { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
    .field select, .field input[type=text], .quantity-control input,
    .step-enhanced #config-step-1 select, .step-enhanced #config-step-1 input { font-size: 16px; }
    .menu-toggle { width: 44px; height: 44px; padding: 10px; }
    .header-actions > .button { min-height: 44px; }
    .field > label { font-size: 12px; }
    .field small, .step-enhanced #config-step-1 .field small { font-size: 11px; }
    .step-enhanced .field-help { font-size: 12px; }
    .aroma-sliders > p { font-size: 11px; }
    .step-enhanced .flavor-surface strong { font-size: 12px; }
    .step-enhanced .step-actions > .button, .step-back, .config-step-tabs button { min-height: 44px; }
    .aroma-row input[type=range] { height: 44px; touch-action: pan-y; }
    .footer-bottom nav a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 650px) {
    .site-dialog { border-radius: 14px; }
    .dialog-toolbar { padding: 12px 14px; gap: 12px; }
    .dialog-body { padding: 20px 20px 24px; }
    .dialog-body > p, .dialog-body #legal-dialog-copy > p { font-size: 14px; line-height: 1.8; }
    .review-details { font-size: 13px; }
    .review-details > div { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
    .review-total > strong { font-size: clamp(22px, 6vw, 27px); }
    .dialog-legal-links { gap: 20px; flex-wrap: wrap; }
    .menu-toggle { width: 44px; height: 44px; padding: 10px; }
    .main-nav a { min-height: 44px; display: inline-flex; align-items: center; }
    .hero-glow { text-shadow: 0 0 14px #dba26729, 0 0 30px #c786491c; }
}
@media (max-width: 480px) {
    .step-enhanced .batch-fields, .batch-fields { grid-template-columns: minmax(0, 1fr); }
    .quantity-control { min-height: 54px; }
    .quantity-control button { width: 44px; height: 44px; }
    .control-grid .field, .config-step-tabs button { min-width: 0; }
    .config-step-tabs button { white-space: normal; text-align: left; }
    .config-step-tabs button span { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .button:hover, .button:active { transform: none; }
    .round-link:active, .quantity-control button:active, .step-back:active,
    .config-step-tabs button:active, .dialog-close:active { scale: 1; }
    .button:hover .fa-arrow-right, .download-link:hover .fa-download { transform: none; }
    [data-parallax] { --parallax-y: 0px !important; }
}

@media (max-width: 650px) and (pointer: coarse) { .header-actions > .button { font-size: 11.5px; } }
@media (max-width: 370px) and (pointer: coarse) { .header-actions > .button { font-size: 10.5px; } }