/* Restaurant-owned ordering: all surfaces inherit the shared design tokens. */
.direct-page { padding-block: var(--space-5) var(--space-8); }
.direct-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--space-8); padding-block: var(--space-6) var(--space-8); }
.direct-hero h1 { font-size: clamp(var(--text-3xl), 4.8vw, calc(var(--text-3xl) * 1.5)); line-height: 1.06; letter-spacing: -.05em; margin-block: var(--space-4) var(--space-5); text-wrap: balance; }
.direct-hero h1 span { color: var(--brand-dark); }
.direct-lead { font-size: var(--text-lg); color: var(--ink-soft); max-width: 36em; line-height: 1.7; }
.direct-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.direct-actions .btn { min-height: var(--space-8); }
.direct-note { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--muted); font-size: var(--text-sm); margin-block: var(--space-4) 0; }
.direct-note .ico { flex: 0 0 auto; color: var(--ok); margin-top: .2em; }
.direct-customer-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); font-size: var(--text-sm); color: var(--ink-soft); font-weight: var(--fw-semibold); }
.direct-preview { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-lg); overflow: hidden; }
.direct-preview-address { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); font-size: var(--text-xs); color: var(--muted); }
.direct-preview-address > span:first-of-type { overflow-wrap: anywhere; }
.direct-preview-label { margin-left: auto; white-space: nowrap; background: var(--bg); padding: var(--space-1) var(--space-2); border-radius: var(--r-sm); }
.direct-preview-cover { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.direct-preview-body { padding: var(--space-5); }
.direct-preview-body h2 { font-size: var(--text-2xl); letter-spacing: -.035em; margin-block: var(--space-2); }
.direct-preview-body p { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.direct-preview-options { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.direct-preview-options span { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--bg); border-radius: var(--r-sm); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.direct-preview-payment { display: flex; align-items: center; gap: var(--space-3); background: var(--ok-tint); color: var(--ok); padding: var(--space-4) var(--space-5); }
.direct-preview-payment > .ico { flex: 0 0 auto; }
.direct-preview-payment > .ico:last-child { margin-left: auto; }
.direct-preview-payment strong, .direct-preview-payment span { display: block; font-size: var(--text-sm); }
.direct-preview-payment span { font-size: var(--text-xs); margin-top: var(--space-1); }
.direct-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); border-block: 1px solid var(--line-strong); padding-block: var(--space-6); }
.direct-benefit { display: flex; align-items: flex-start; gap: var(--space-3); }
.direct-benefit > .ico { flex: 0 0 auto; color: var(--brand-dark); margin-top: var(--space-1); }
.direct-benefit h2 { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.direct-benefit p { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.direct-section { margin-top: calc(var(--space-8) * 1.6); scroll-margin-top: calc(var(--bar-h) + var(--space-5)); }
.direct-section-heading { max-width: 46em; margin-bottom: var(--space-5); }
.direct-section-heading h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); line-height: 1.18; letter-spacing: -.035em; margin-block: var(--space-2) var(--space-3); text-wrap: balance; }
.direct-section-heading p { color: var(--muted); margin: 0; }
.direct-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); padding: 0; margin: var(--space-6) 0 0; list-style: none; counter-reset: none; }
.direct-steps li { border-top: 1px solid var(--line-strong); padding-top: var(--space-5); }
.direct-step-number { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.direct-steps h3, .direct-feature h3 { font-size: var(--text-lg); margin-block: var(--space-4) var(--space-2); }
.direct-steps p, .direct-feature p { color: var(--muted); margin: 0; font-size: var(--text-sm); line-height: 1.7; }
.direct-directory-tools { display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap; }
.direct-directory-tools .hm-search { width: 22em; }
.direct-city-select { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.direct-city-select select { min-width: 10em; }
.direct-directory-note { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-4); }
.direct-directory-note .ico { flex: 0 0 auto; margin-top: .2em; }
.direct-empty { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: var(--space-8) var(--space-5); text-align: center; background: var(--tint-row); }
.direct-empty[hidden] { display: none; }
.direct-empty-icon { display: inline-grid; place-items: center; color: var(--brand-dark); background: var(--brand-tint); padding: var(--space-3); border-radius: var(--r); }
.direct-empty h3 { margin-block: var(--space-4) var(--space-2); }
.direct-empty p { max-width: 40em; margin: 0 auto var(--space-5); color: var(--muted); }
.direct-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); background: var(--ink); color: var(--card); padding: var(--space-8); border-radius: var(--r-lg); margin-top: calc(var(--space-8) * 1.6); }
.direct-cta .kicker { color: var(--on-dark-muted); }
.direct-cta h2 { font-size: var(--text-2xl); line-height: 1.2; margin-block: var(--space-2) var(--space-3); }
.direct-cta p { color: var(--on-dark-text); margin: 0; max-width: 35em; }
.direct-cta .btn { flex: 0 0 auto; }
.direct-photo { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.direct-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.direct-photo figcaption { padding: var(--space-4) var(--space-5); display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.direct-photo figcaption .ico { flex: 0 0 auto; color: var(--brand-dark); }
.direct-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.direct-feature { padding: var(--space-5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.direct-feature > .ico { color: var(--brand-dark); }
.direct-faq { max-width: 52em; margin-inline: auto; }
.direct-faq details { border-bottom: 1px solid var(--line-strong); }
.direct-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-5); cursor: pointer; font-weight: var(--fw-semibold); list-style: none; }
.direct-faq summary::-webkit-details-marker { display: none; }
.direct-faq summary .ico { flex: 0 0 auto; transition: transform var(--t); }
.direct-faq details[open] summary .ico { transform: rotate(180deg); }
.direct-faq details p { margin: 0 0 var(--space-5); color: var(--ink-soft); line-height: 1.7; max-width: 46em; }
.direct-signup { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: var(--space-8); max-width: 62em; margin: var(--space-8) auto; align-items: start; }
.direct-signup h1 { font-size: var(--text-3xl); line-height: 1.15; letter-spacing: -.04em; text-wrap: balance; }
.direct-signup .direct-steps { display: block; }
.direct-signup .direct-steps li { margin-bottom: var(--space-5); padding-top: var(--space-4); }
.direct-signup .direct-steps h3 { display: inline; margin-left: var(--space-3); }
.direct-signup .direct-steps p { margin-top: var(--space-2); }
.direct-signup .card { padding: var(--space-6); }
.direct-signup .card h2 { font-size: var(--text-xl); }
.direct-signup .form-row input { min-height: var(--space-8); }
.direct-form-error { color: var(--danger); font-size: var(--text-sm); margin-top: var(--space-2); }
.direct-signup input[aria-invalid="true"] { border-color: var(--danger); }
.direct-promote-grid { align-items: start; }
.direct-copy-row { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.direct-copy-row input { flex: 1; min-width: 0; font-weight: var(--fw-semibold); }
.direct-copy-feedback { min-height: 1.5em; font-size: var(--text-sm); margin-block: var(--space-2) 0; color: var(--muted); }
.direct-promote-ideas { padding-left: var(--space-5); line-height: 1.9; }
.direct-qr { width: 16em; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r); margin-block: var(--space-3); }
@media (max-width: 55rem) {
    .direct-hero { gap: var(--space-6); }
    .direct-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .direct-cta { padding: var(--space-6); flex-direction: column; align-items: flex-start; }
}
@media (max-width: 42rem) {
    .direct-page { padding-top: 0; }
    .direct-hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-5); }
    .direct-hero h1 { font-size: clamp(var(--text-3xl), 9vw, calc(var(--text-3xl) * 1.2)); }
    .direct-lead { font-size: var(--text-base); }
    .direct-actions { gap: var(--space-2); margin-top: var(--space-5); }
    .direct-actions .btn { flex: 1 1 auto; }
    .direct-preview { margin-top: var(--space-3); }
    .direct-benefits, .direct-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .direct-section, .direct-cta { margin-top: var(--space-8); }
    .direct-photo img { aspect-ratio: 4 / 3; }
    .direct-feature-grid { gap: var(--space-3); }
    .direct-feature { padding: var(--space-4); }
    .direct-feature h3 { font-size: var(--text-base); }
    .direct-signup { display: flex; flex-direction: column; gap: var(--space-5); margin-block: var(--space-5); }
    .direct-signup > * { width: 100%; }
    .direct-signup .card { padding: var(--space-5); }
    .direct-signup .direct-steps { display: none; }
    .direct-cta .btn { width: 100%; }
    .direct-preview-address { padding-inline: var(--space-4); }
    .direct-city-select { flex-wrap: wrap; }
}

.direct-sr-only { position: absolute; inline-size: .0625rem; block-size: .0625rem; padding: 0; margin: -.0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.direct-readiness { margin-top: var(--space-5); padding: var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--tint-row); }
.direct-readiness legend { font-weight: var(--fw-semibold); padding-inline: var(--space-2); }
.direct-readiness .checkbox { align-items: flex-start; margin-top: var(--space-4); font-size: var(--text-sm); }
.direct-readiness input { flex: 0 0 auto; margin-top: .3em; }

.manage-context { background: var(--card); border-bottom: 1px solid var(--line); }
.manage-context-inner { max-width: var(--maxw); margin-inline: auto; padding: var(--space-3) var(--space-5); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.manage-context-identity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.manage-context-identity > .ico { flex: 0 0 auto; color: var(--brand-dark); }
.manage-context-identity div { min-width: 0; }
.manage-context-identity span { display: block; color: var(--muted); font-size: var(--text-xs); }
.manage-context-identity strong { font-size: var(--text-sm); overflow-wrap: anywhere; }
.manage-context-identity small { margin-left: var(--space-2); color: var(--muted); }
.manage-context-switch { display: flex; gap: var(--space-2); align-items: center; margin: 0; min-width: 0; }
.manage-context-switch .btn { min-height: var(--space-8); }
.manage-context-switch select { min-height: var(--space-8); max-width: 24em; min-width: 0; font-size: var(--text-sm); padding: var(--space-2); }
@media (max-width: 42rem) {
    .manage-context-inner { flex-wrap: wrap; padding-inline: var(--space-4); gap: var(--space-2); }
    .manage-context-switch { width: 100%; }
    .manage-context-switch select { flex: 1; max-width: none; font-size: var(--text-base); }
}