/* ============================================================
   wizard.css — landing + 4-step wizard pages
   Aligned with Craver Brand Guide (Nicholas + Helen, 06.13.2024 V1):
   - Poppins typography (SemiBold headings, Regular body)
   - Craver palette: Red #D93A01, Yellow #FFB000, Peach #FFF8F1, Black
   - Sentence case in long text
   - One CTA style (orange pill, no glow) used everywhere outside the
     phone preview interior
   ============================================================ */

:root {
    /* Craver brand palette */
    --craver-red:        #D93A01;
    --craver-red-hover:  #B82E00;
    --craver-yellow:     #FFB000;
    --craver-peach:      #FFF8F1;
    --craver-peach-deep: #FFEDD6;
    --craver-black:      #000000;
    --craver-ink:        #1A1A1A;
    --craver-ink-2:      #4A4A4A;
    --craver-ink-3:      #6B6B6B;
    --craver-line:       #E8E2D6;
    --craver-line-2:     #D9D3C7;
    --craver-surface:    #FFFFFF;

    /* Craver gradient (red → orange → yellow) per brand guide page 9 */
    --craver-gradient:   linear-gradient(90deg, #E93824 0%, #EB612A 45%, #F2B23E 100%);
    --craver-gradient-soft: linear-gradient(135deg, #FFEDD6 0%, #FFB38B 60%, #F36B41 100%);

    /* Status colors (kept for badges) */
    --status-good-bg:   #DDEBD9;
    --status-good-fg:   #2F6F40;
    --status-muted-bg:  #EFE9DC;
    --status-muted-fg:  #6B6B6B;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    color: var(--craver-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ============================================================
   Wizard header — Craver + Square lockup shown on every screen
   ============================================================ */
.wizard-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--craver-peach);
    border-bottom: 1px solid var(--craver-line);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
/* Landing leans on the hero for visual weight — drop the thin underline so
   the header reads as part of the same surface. */
.landing-body .wizard-header { border-bottom: none; }
.wizard-header.is-dark {
    background: var(--craver-black);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.wizard-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}
.wizard-brand-logo {
    display: inline-flex;
    align-items: center;
}
.wizard-brand-logo img,
.wizard-brand-logo svg { display: block; }
.wizard-brand-logo.is-on-dark img {
    /* Wordmark in the logo is near-black; invert luminance so it reads on a dark bg
       while keeping the brand-red clover color intact. */
    filter: invert(1) hue-rotate(180deg);
}

/* ============================================================
   Progress bar — steps shown on wizard screens
   ============================================================ */
.wizard-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    max-width: 560px;
    margin: 0 24px;
}
.wizard-progress-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    color: var(--craver-ink-3);
    text-decoration: none;  /* applies when rendered as <a> */
    transition: opacity 0.15s;
}
a.wizard-progress-step { cursor: pointer; }
a.wizard-progress-step:hover { opacity: 0.75; }
.wizard-progress-step .wp-num {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid var(--craver-line-2);
    color: var(--craver-ink-3);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wizard-progress-step .wp-label {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wizard-progress-step.is-done .wp-num {
    background: var(--craver-red);
    border-color: var(--craver-red);
    color: #fff;
}
.wizard-progress-step.is-done .wp-label { color: var(--craver-ink-2); }
.wizard-progress-step.is-current .wp-num {
    background: var(--craver-ink);
    border-color: var(--craver-ink);
    color: #fff;
}
.wizard-progress-step.is-current .wp-label {
    color: var(--craver-ink);
    font-weight: 600;
}
.wizard-progress-bar {
    flex: 0 0 24px;
    height: 2px;
    background: var(--craver-line);
    border-radius: 2px;
}
.wizard-progress-step.is-done + .wizard-progress-bar { background: var(--craver-red); }
.wizard-header.is-dark .wizard-progress-step .wp-num {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.7);
}
.wizard-header.is-dark .wizard-progress-step .wp-label { color: rgba(255, 255, 255, 0.7); }
.wizard-header.is-dark .wizard-progress-step.is-current .wp-num {
    background: #fff;
    border-color: #fff;
    color: var(--craver-black);
}
.wizard-header.is-dark .wizard-progress-step.is-current .wp-label {
    color: #fff;
}
.wizard-header.is-dark .wizard-progress-bar { background: rgba(255, 255, 255, 0.18); }

/* ============================================================
   LANDING — light themed (Peach bg, ink text)
   ============================================================ */
.landing-body {
    background: var(--craver-peach);
    color: var(--craver-ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.landing-main {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 56px 64px 72px;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
    align-items: center;
}
.early-access-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(217, 58, 1, 0.10);
    color: var(--craver-red);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 28px;
    align-self: flex-start;
}
.early-access-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--craver-red);
}
.landing-h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 80px;
    line-height: 1.02;
    font-weight: 700;
    margin: 0 0 24px;
    letter-spacing: -0.025em;
    color: var(--craver-ink);
}
.landing-h1 .accent {
    background: var(--craver-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.landing-sub {
    max-width: 560px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--craver-ink-2);
    margin: 0 0 36px;
}
.landing-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.landing-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--craver-red);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.landing-cta:hover { background: var(--craver-red-hover); transform: translateY(-1px); }
.landing-cta .arrow { font-size: 18px; line-height: 1; }
.landing-foot {
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--craver-ink-3);
}
.landing-cta-dev {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--craver-ink-3);
    border: 1px dashed var(--craver-line-2);
    font-size: 13px;
    font-weight: 500;
    padding: 12px 18px;
    border-radius: 999px;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.landing-cta-dev:hover { color: var(--craver-ink); border-color: var(--craver-ink); }
.landing-cta-dev::before {
    content: '⚙';
    font-size: 14px;
    opacity: 0.7;
}

/* What to expect — 4-step preview after the hero */
.landing-steps {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--craver-line);
}
.landing-steps-h {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--craver-ink-3);
    margin: 0 0 24px;
}
.landing-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.landing-step {
    background: #FFFFFF;
    border: 1px solid var(--craver-line);
    border-radius: 18px;
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.landing-step-num {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(217, 58, 1, 0.12);
    color: var(--craver-red);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.landing-step-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--craver-ink);
    margin: 0;
}
.landing-step-sub {
    font-size: 13px;
    line-height: 1.5;
    color: var(--craver-ink-2);
    margin: 0;
}

/* Social proof — animated logo strip */
.landing-social {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--craver-line);
}
.landing-social-h {
    font-size: 13px;
    font-weight: 600;
    color: var(--craver-ink-3);
    margin: 0 0 18px;
    letter-spacing: 0.04em;
}
.logo-strip-window {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-strip-track {
    display: flex;
    gap: 48px;
    align-items: center;
    animation: logo-scroll 36s linear infinite;
    width: max-content;
}
.logo-strip-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    min-width: 120px;
    flex-shrink: 0;
}
.logo-strip-item img {
    max-height: 54px;
    max-width: 130px;
    object-fit: contain;
    opacity: 0.95;
    transition: opacity 0.15s;
}
.logo-strip-item img:hover { opacity: 1; }
@keyframes logo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 980px) {
    .landing-main { padding: 48px 28px; }
    .landing-hero { grid-template-columns: 1fr; gap: 32px; }
    .landing-h1 { font-size: 56px; }
    .landing-steps-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
    .landing-h1 { font-size: 44px; }
    .landing-steps-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WIZARD card (steps 2-4)
   ============================================================ */
.wizard-body {
    background: var(--craver-peach);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.wizard-body main { flex: 1 0 auto; }

/* Disconnect button: lives inside the header now, not floating */
.wizard-disconnect-form { margin: 0; }
.wizard-disconnect-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--craver-ink-3);
    border: 1px solid var(--craver-line-2);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.wizard-disconnect-btn:hover { color: var(--craver-red); border-color: var(--craver-red); }
.wizard-header.is-dark .wizard-disconnect-btn {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.18);
}
.wizard-header.is-dark .wizard-disconnect-btn:hover { color: #fff; border-color: rgba(255,255,255,0.5); }

.wizard-card {
    background: var(--craver-surface);
    border-radius: 28px;
    padding: 56px 56px 48px;
    max-width: 680px;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    margin: 40px auto;
}
.wizard-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--craver-red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}
.wizard-h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    line-height: 1.15;
    text-align: center;
    margin: 0 0 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--craver-ink);
}
.wizard-sub {
    text-align: center;
    color: var(--craver-ink-2);
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 36px;
    min-height: 24px;
}
.wizard-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--craver-ink-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.locations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}
.loading-skeleton {
    height: 86px;
    background: linear-gradient(90deg, #F4EFE3 0%, #EAE3D2 50%, #F4EFE3 100%);
    background-size: 200% 100%;
    border-radius: 14px;
    animation: skel 1.4s infinite;
}
@keyframes skel {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.loc-row {
    display: flex;
    gap: 14px;
    border: 1.5px solid var(--craver-line);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    align-items: flex-start;
    transition: background 0.15s, border-color 0.15s;
    background: #fff;
}
.loc-row:hover { border-color: var(--craver-line-2); }
.loc-row.is-checked { background: #FFF4E9; border-color: var(--craver-red); }
.loc-row input { display: none; }
.loc-check {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--craver-line-2);
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
    background: #fff;
}
.loc-row.is-checked .loc-check {
    background: var(--craver-red);
    border-color: var(--craver-red);
}
.loc-row.is-checked .loc-check::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.loc-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.loc-name { font-weight: 600; font-size: 16px; color: var(--craver-ink); }
.loc-addr { color: var(--craver-ink-2); font-size: 14px; }
.loc-badge {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    margin-top: 2px;
}
.loc-badge.is-active { background: var(--status-good-bg); color: var(--status-good-fg); }
.loc-badge.is-inactive { background: var(--status-muted-bg); color: var(--status-muted-fg); }

/* ============================================================
   ONE canonical CTA — orange pill. Used on landing AND wizard.
   Designer flagged 3 inconsistent button styles; this collapses
   them into one. Black "Continue" → orange. No glow shadows.
   ============================================================ */
.wizard-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--craver-red);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    padding: 16px 28px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.wizard-cta:hover:not(:disabled) { background: var(--craver-red-hover); transform: translateY(-1px); }
.wizard-cta:disabled { background: #C9CACC; cursor: not-allowed; color: #fff; }
.wizard-cta .arrow { font-weight: 400; }

/* Secondary button — outline pill on Peach, kept consistent */
.brand-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--craver-line-2);
    background: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    font-size: 14px;
    color: var(--craver-ink);
    transition: border-color 0.15s, color 0.15s;
}
.brand-secondary-btn:hover { border-color: var(--craver-red); color: var(--craver-red); }

.wizard-back {
    display: block;
    text-align: center;
    margin-top: 18px;
    color: var(--craver-ink-3);
    text-decoration: none;
    font-size: 14px;
}
.wizard-back:hover { color: var(--craver-ink); }

/* ============================================================
   Branding step
   ============================================================ */
.branding-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}
.brand-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.brand-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--craver-ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.brand-help-text {
    font-size: 13px;
    color: var(--craver-ink-2);
    line-height: 1.45;
    margin: 0 0 4px;
}
.brand-input {
    border: 1.5px solid var(--craver-line);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 16px;
    font-family: inherit;
    background: #fff;
    color: var(--craver-ink);
}
.brand-input:focus { outline: none; border-color: var(--craver-red); }
.logo-preview-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}
.logo-preview {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #FFFFFF;
    border: 1px solid var(--craver-line);
    overflow: hidden;
}
.logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}
.logo-preview.is-fallback {
    background: var(--brand-color, var(--craver-red));
    border: none;
}
.logo-initial {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 700;
}
.color-row {
    display: flex;
    gap: 12px;
    align-items: center;
}
.color-swatch {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    border: 1.5px solid var(--craver-line);
    cursor: pointer;
    padding: 0;
}
.color-hex {
    font-family: ui-monospace, monospace;
    font-size: 15px;
    color: var(--craver-ink-2);
}

/* ============================================================
   5-token palette bento
   ============================================================ */
.palette-bento {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    grid-template-areas:
        "primary secondary bg"
        "primary topbar    bg2";
    gap: 10px;
    width: 100%;
    margin-bottom: 14px;
}
.palette-tile-secondary,
.palette-tile-topbar,
.palette-tile-bg,
.palette-tile-bg2 { aspect-ratio: 1 / 1; }

.palette-tile-primary  { grid-area: primary; }
.palette-tile-secondary{ grid-area: secondary; }
.palette-tile-topbar   { grid-area: topbar; }
.palette-tile-bg       { grid-area: bg; }
.palette-tile-bg2      { grid-area: bg2; }

.palette-tile {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    color: #FFFFFF;
    transition: transform 0.1s, box-shadow 0.1s;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.palette-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.palette-tile.palette-tile-dark { color: var(--craver-ink); }
.palette-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.palette-tile-title {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
@media (max-width: 540px) {
    .palette-tile { padding: 10px 12px; }
    .palette-tile-title { font-size: 11px; }
}
.regenerate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.regenerate-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.palette-help {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--craver-ink-3);
    line-height: 1.4;
    min-height: 18px;
}

/* ============================================================
   Merged step 4: brand controls + live phone preview
   ============================================================ */
.preview-shell {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(320px, 1fr);
    gap: 56px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 32px 64px;
}
.preview-shell.is-read-only {
    grid-template-columns: 1fr;
    place-items: center;
}
.preview-panel {
    background: #fff;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.preview-panel-head h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--craver-ink);
}
.preview-panel-head p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--craver-ink-2);
    margin: 0;
}
.panel-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.panel-section .brand-label { margin-bottom: 0; }
.panel-stack { gap: 0; }
.panel-cta-stack { gap: 10px; }

/* Locations / Menus link rows in the panel */
.panel-link-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    text-decoration: none;
    color: var(--craver-ink);
    border-top: 1px solid var(--craver-line);
    transition: color 0.15s;
}
.panel-link-row:last-child { border-bottom: 1px solid var(--craver-line); }
.panel-link-row:hover { color: var(--craver-red); }
.panel-link-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--craver-peach);
    color: var(--craver-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.panel-link-row:hover .panel-link-icon { color: var(--craver-red); }
.panel-link-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.panel-link-title { font-size: 14px; font-weight: 600; }
.panel-link-sub   { font-size: 12px; color: var(--craver-ink-3); }
.panel-link-chev  { color: var(--craver-ink-3); font-size: 22px; line-height: 1; }

/* Phone column — center vertically and constrain width */
.preview-phone {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: sticky;
    top: 88px; /* below the wizard-header */
}

/* Test-order result banner */
.result-banner {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
    background: #FFF4E9;
    color: var(--craver-ink);
    border: 1px solid var(--craver-line);
}
.result-banner.is-success {
    background: #ECFDF5;
    color: #065F46;
    border-color: #A7F3D0;
}
.result-banner.is-error {
    background: #FEF2F2;
    color: #991B1B;
    border-color: #FECACA;
}
.result-banner a { color: inherit; font-weight: 600; }

@media (max-width: 980px) {
    .preview-shell {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .preview-phone {
        position: static;
        order: -1;
    }
}

/* ============================================================
   Menu health inline card — sits below the phone preview
   ============================================================ */
.menu-health-card {
    /* Sit under the side-panel column only — the phone column is sticky and
       would visually overlap this card if we spanned full width. */
    grid-column: 1 / 2;
    background: #fff;
    border-radius: 24px;
    padding: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    margin-top: 8px;
    overflow: hidden;
}
@media (max-width: 980px) {
    /* When the grid stacks (phone above panel), the menu health card can
       safely span full width again. */
    .menu-health-card { grid-column: 1 / -1; }
}
.menu-health-card > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 28px;
}
.menu-health-card > summary::-webkit-details-marker { display: none; }
.menu-health-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.menu-health-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--craver-red);
}
.menu-health-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--craver-ink);
}
.menu-health-sub {
    font-size: 14px;
    color: var(--craver-ink-2);
    line-height: 1.5;
}
.menu-health-chev {
    font-size: 22px;
    color: var(--craver-ink-3);
    transition: transform 0.2s;
}
.menu-health-card[open] .menu-health-chev { transform: rotate(180deg); }
.menu-health-body {
    padding: 0 28px 24px;
    border-top: 1px solid var(--craver-line);
}

/* ============================================================
   Privacy footer — included on every wizard surface
   ============================================================ */
.wizard-privacy-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 18px 24px 22px;
    font-size: 12px;
    color: var(--craver-ink-3);
}
.wizard-privacy-footer a {
    color: var(--craver-ink-3);
    text-decoration: none;
    transition: color 0.15s;
}
.wizard-privacy-footer a:hover {
    color: var(--craver-ink);
    text-decoration: underline;
}

/* ============================================================
   Signup slide-in card — appears 30s after /preview load
   ============================================================ */
.signup-card {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 18px;
    padding: 22px 22px 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
    border: 1px solid var(--craver-line);
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease-out;
    z-index: 60;
}
.signup-card.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.signup-card-eyebrow {
    display: inline-block;
    background: rgba(217, 58, 1, 0.10);
    color: var(--craver-red);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.signup-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--craver-ink);
    margin: 0 0 6px;
}
.signup-card-title .price {
    background: var(--craver-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}
.signup-card-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--craver-ink-2);
    margin: 0 0 16px;
}
.signup-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.signup-card-cta {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--craver-red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    padding: 12px 18px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.signup-card-cta:hover { background: var(--craver-red-hover); }
.signup-card-dismiss {
    background: transparent;
    border: none;
    color: var(--craver-ink-3);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.signup-card-dismiss:hover { color: var(--craver-ink); background: var(--craver-peach-deep); }
.signup-card-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--craver-ink-3);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.signup-card-close:hover { background: var(--craver-peach); color: var(--craver-ink); }

/* Collapsed reopen pill — shown after dismissal so users can bring the card back */
.signup-pill {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--craver-red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    padding: 12px 18px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(217, 58, 1, 0.32);
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease-out, background 0.15s;
    z-index: 59;
}
.signup-pill.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.signup-pill:hover { background: var(--craver-red-hover); }
.signup-pill-price {
    background: rgba(255, 255, 255, 0.22);
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 700;
}
@media (max-width: 540px) {
    .signup-card,
    .signup-pill { right: 12px; bottom: 12px; }
}

/* ============================================================
   Signup confirm modal — opens when user clicks Sign up CTA
   ============================================================ */
.signup-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 14, 8, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 110;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: 16px;
}
.signup-modal-backdrop[hidden] { display: none; }
.signup-modal-card {
    background: #fff;
    border-radius: 24px;
    padding: 32px 32px 28px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    position: relative;
}
.signup-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--craver-ink-3);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}
.signup-modal-close:hover { background: var(--craver-peach); color: var(--craver-ink); }
.signup-modal-eyebrow {
    display: inline-block;
    background: rgba(217, 58, 1, 0.10);
    color: var(--craver-red);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.signup-modal-title {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--craver-ink);
    margin: 0 0 6px;
    line-height: 1.2;
}
.signup-modal-sub {
    font-size: 13px;
    color: var(--craver-ink-2);
    margin: 0 0 20px;
    line-height: 1.5;
}

.signup-locations-row {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid var(--craver-line);
    border-bottom: 1px solid var(--craver-line);
    margin-bottom: 16px;
}
.signup-locations-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--craver-ink);
}
.signup-locations-stepper {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.signup-locations-stepper button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--craver-line-2);
    background: #fff;
    color: var(--craver-ink);
    font-size: 18px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}
.signup-locations-stepper button:hover { border-color: var(--craver-red); color: var(--craver-red); }
.signup-locations-stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.signup-locations-stepper #signup-loc-count {
    font-size: 18px;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    color: var(--craver-ink);
}

.signup-price-breakdown {
    background: var(--craver-peach);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.signup-price-line {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--craver-ink-2);
    padding: 4px 0;
}
.signup-price-line.signup-price-total {
    font-size: 18px;
    font-weight: 700;
    color: var(--craver-ink);
    border-top: 1px solid var(--craver-line);
    margin-top: 6px;
    padding-top: 10px;
}
/* Guest-fee line — small, secondary, with a right-aligned "capped at $2" hint. */
.signup-price-fee {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 10px;
    font-size: 12px;
    color: var(--craver-ink-3);
}
.signup-price-fee-label { font-weight: 500; }
.signup-price-fee-cap {
    font-size: 11px;
    background: rgba(217, 58, 1, 0.08);
    color: var(--craver-red);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.signup-price-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--craver-ink-3);
    font-style: italic;
}

.signup-modal-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--craver-red);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 20px;
    border-radius: 999px;
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.signup-modal-cta:hover { background: var(--craver-red-hover); }
.signup-modal-fine {
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--craver-ink-3);
    line-height: 1.5;
    text-align: center;
}
.signup-modal-fine a { color: var(--craver-ink-2); text-decoration: underline; }

/* ============================================================
   Confirmation modal — used by Disconnect Square
   ============================================================ */
.confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.confirm-modal-backdrop[hidden] { display: none; }
.confirm-modal {
    background: #fff;
    border-radius: 18px;
    padding: 28px 28px 24px;
    max-width: 420px;
    width: calc(100% - 32px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.confirm-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(217, 58, 1, 0.12);
    color: var(--craver-red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 14px;
}
.confirm-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--craver-ink);
    margin: 0 0 8px;
    line-height: 1.25;
}
.confirm-modal-body {
    font-size: 14px;
    color: var(--craver-ink-2);
    margin: 0 0 22px;
    line-height: 1.5;
}
.confirm-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.confirm-modal-cancel,
.confirm-modal-confirm {
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.confirm-modal-cancel {
    background: transparent;
    color: var(--craver-ink-2);
    border: 1.5px solid var(--craver-line-2);
}
.confirm-modal-cancel:hover { border-color: var(--craver-ink); color: var(--craver-ink); }
.confirm-modal-confirm {
    background: var(--craver-red);
    color: #fff;
}
.confirm-modal-confirm:hover { background: var(--craver-red-hover); }