/* LaundryCareer Marketplace — v1.1.0 national redesign (Apple-inspired)
   Ink #1d1d1f on white / #f5f5f7 surfaces, hairlines #d2d2d7 / #e8e8ed,
   one accent blue #0071e3, system font stack, soft neutral shadows only.
   All pre-existing class hooks preserved for assets/js/lc.js + lc-nav.js. */

/* ==========================================================================
   DESIGN TOKENS — v2.4.0 Phase T (ONE token system for every layer)
   --------------------------------------------------------------------------
   The --lcx-* tokens below are the single source of truth for the adopted
   design standard: warm-neutral canvas #FAFAF9, one warm-gray family, ink
   scale, hairlines at 6-8% alpha, the layered shadow pair, radii
   12 / 16-20 / 999, the 4px spacing scale, one motion curve (150-250ms),
   and the 12/14/16/20/28/40 type scale. Every legacy family (--lc-*,
   --lc2-*, and --lcc-* in lc-cities.css) ALIASES these tokens: names stay
   for compatibility, values live here only. Accent roles unchanged:
   green = money/go (pro actions), blue = trust/booking (customer actions
   on a pro's own page). The dark remap under this block is the ONE dark
   block for the whole plugin — token-driven surfaces adopt it through
   the aliases; hardcoded colors are inventoried for Phase S in
   v2.4.0-DESIGN-T-REPORT.md. Booking templates (the --pt- and --lm-
   families in includes/referrals.php) are standalone documents that
   never load this stylesheet, so they carry the same values as literals.
   ========================================================================== */

:root {
    color-scheme: light dark;
    --lcx-font: -apple-system, 'SF Pro Display', Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --lcx-canvas: #fafaf9;
    --lcx-surface: #ffffff;
    --lcx-mist: #f5f5f4;
    --lcx-mist-2: #e7e5e4;
    --lcx-ink: #1c1917;
    --lcx-ink-2: #44403c;
    --lcx-ink-3: #78716c;
    --lcx-line: rgba(28, 25, 23, .08);
    --lcx-line-strong: rgba(28, 25, 23, .16);
    --lcx-green: #0b9e57;
    --lcx-green-deep: #067647;
    --lcx-green-ink: #055c33;
    --lcx-green-soft: #e2f4e9;
    --lcx-blue: #0b63d8;
    --lcx-blue-deep: #0a4ca6;
    --lcx-blue-soft: #e3edfb;
    --lcx-amber: #b97a06;
    --lcx-amber-soft: #fdf0d3;
    --lcx-red: #c92a2a;
    --lcx-red-soft: #fdecea;
    --lcx-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
    --lcx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --lcx-r-sm: 12px;
    --lcx-r-md: 16px;
    --lcx-r-lg: 20px;
    --lcx-r-pill: 999px;
    --lcx-s-1: 4px;
    --lcx-s-2: 8px;
    --lcx-s-3: 12px;
    --lcx-s-4: 16px;
    --lcx-s-5: 24px;
    --lcx-s-6: 32px;
    --lcx-s-7: 48px;
    --lcx-s-8: 64px;
    --lcx-s-9: 96px;
    --lcx-dur-fast: 150ms;
    --lcx-dur: 200ms;
    --lcx-dur-slow: 250ms;
    --lcx-ease: cubic-bezier(.2, .8, .2, 1);
    --lcx-fs-1: 12px;
    --lcx-fs-2: 14px;
    --lcx-fs-3: 16px;
    --lcx-fs-4: 20px;
    --lcx-fs-5: 28px;
    --lcx-fs-6: 40px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --lcx-canvas: #0b0b0c;
        --lcx-surface: #141416;
        --lcx-mist: #1c1c1f;
        --lcx-mist-2: #26262a;
        --lcx-ink: #f5f5f4;
        --lcx-ink-2: #d6d3d1;
        --lcx-ink-3: #a8a29e;
        --lcx-line: rgba(255, 255, 255, .08);
        --lcx-line-strong: rgba(255, 255, 255, .16);
        --lcx-green-ink: #7ce3ab;
        --lcx-green-soft: #12301f;
        --lcx-blue-deep: #8db9f8;
        --lcx-blue-soft: #16283f;
        --lcx-amber: #e8b23e;
        --lcx-amber-soft: #33270a;
        --lcx-red: #ff8787;
        --lcx-red-soft: #3d1a16;
        --lcx-shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .45);
        --lcx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    }
}

:root {
  /* v2.4.0 Phase T: every value below aliases the master --lcx-* tokens
     (top of file) — names kept for compatibility, values live there only.
     Three names LIE about their value and are flagged for Phase C renames:
     --lc-green / --lc-green-deep hold INK (the black structure color),
     --lc-coral holds BLUE, --lc-gold holds a warm gray. Side effect worth
     noting: --lc-muted now resolves to #78716c, which passes WCAG AA on
     the canvas (the old #86868b did not). */
  --lc-green: var(--lcx-ink);
  --lc-green-deep: var(--lcx-ink);
  --lc-cream: var(--lcx-canvas);
  --lc-cream-2: var(--lcx-surface);
  --lc-hero-text: #ffffff;
  --lc-card: var(--lcx-surface);
  --lc-ink: var(--lcx-ink);
  --lc-ink-soft: var(--lcx-ink-2);
  --lc-muted: var(--lcx-ink-3);
  --lc-secondary: var(--lcx-ink-3);
  --lc-line: var(--lcx-line-strong);
  --lc-line-soft: var(--lcx-line);
  --lc-coral: var(--lcx-blue);
  --lc-coral-dark: var(--lcx-blue-deep);
  --lc-coral-ink: var(--lcx-blue-deep);
  --lc-coral-tint: var(--lcx-blue-soft);
  --lc-accent: var(--lcx-blue);
  --lc-accent-dark: var(--lcx-blue-deep);
  --lc-link: var(--lcx-blue-deep);
  --lc-gold: var(--lcx-ink-3);
  --lc-gold-soft: var(--lcx-line-strong);
  --lc-sage: var(--lcx-green);
  --lc-sage-deep: var(--lcx-green-deep);
  --lc-sage-tint: var(--lcx-green-soft);
  --lc-honey-bg: var(--lcx-canvas);
  --lc-honey-line: var(--lcx-line-strong);
  --lc-honey-ink: var(--lcx-ink-2);
  --lc-danger: var(--lcx-red);
  --lc-danger-bg: var(--lcx-red-soft);
  --lc-display: var(--lcx-font);
  --lc-body: var(--lcx-font);
  --lc-shadow-warm: var(--lcx-shadow);
  --lc-shadow-lift: var(--lcx-shadow);
  --lc-shadow: var(--lcx-shadow);
  --lc-shadow-lg: var(--lcx-shadow);
}

/* ============ App shell ============ */
.lc-wrap { max-width: 1120px; margin: 0 auto; padding: 24px; font-family: var(--lc-body); color: var(--lc-ink); background: var(--lc-cream); }
@media (min-width: 1024px) { .lc-wrap { padding-left: 48px; padding-right: 48px; } }
@media (min-width: 820px) {
  .lc-wrap { border-radius: 24px; margin-top: 18px; margin-bottom: 18px; box-shadow: var(--lc-shadow-warm); border: 1px solid var(--lc-line-soft); }
}
.lc-narrow { max-width: 480px; }
.lc-card { background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: var(--lcx-r-lg); padding: 24px; margin: 0 0 16px; }
.lc-card-title { margin: 0 0 14px; font-size: 20px; letter-spacing: -0.01em; font-family: var(--lc-display); font-weight: 600; color: var(--lc-ink); }
.lc-muted { color: var(--lc-muted); font-size: .92em; }
.lc-center { text-align: center; }
.lc-landing { margin: 0 auto; font-family: var(--lc-body); font-size: 16px; line-height: 1.5; color: var(--lc-ink); background: var(--lc-cream); }

/* ============ Buttons ============ */
.lc-btn { display: inline-block; border: 1px solid transparent; border-radius: var(--lcx-r-sm); padding: 12px 24px; min-height: 48px; font-size: 16px; font-weight: 600; font-family: var(--lc-body); cursor: pointer; text-decoration: none; text-align: center; line-height: 1.4; white-space: nowrap; vertical-align: middle; transition: transform var(--lcx-dur-fast) var(--lcx-ease), box-shadow var(--lcx-dur-fast) var(--lcx-ease), background var(--lcx-dur-fast) var(--lcx-ease), border-color var(--lcx-dur-fast) var(--lcx-ease); }
.lc-btn-block { display: block; width: 100%; box-sizing: border-box; }
.lc-btn-lg { padding: 16px 32px; font-size: 16px; min-height: 56px; }
.lc-btn-primary { background: var(--lc-coral); border-color: var(--lc-coral); color: #fff; box-shadow: var(--lcx-shadow-sm); }
.lc-btn-primary:hover { background: var(--lc-coral-dark); border-color: var(--lc-coral-dark); color: #fff; box-shadow: var(--lcx-shadow-sm); }
.lc-btn-outline { background: transparent; border-color: var(--lc-coral); color: var(--lc-coral-ink); }
.lc-btn-outline:hover { background: var(--lc-coral-tint); border-color: var(--lc-coral-dark); color: var(--lc-coral-ink); }
.lc-btn-cream { background: var(--lcx-surface); border-color: var(--lcx-surface); color: var(--lc-ink); box-shadow: var(--lcx-shadow-sm); }
.lc-btn-cream:hover { background: var(--lcx-surface); border-color: var(--lcx-surface); color: var(--lc-ink); }
.lc-btn-ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .35); color: var(--lc-hero-text); backdrop-filter: blur(6px); }
.lc-btn-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.lc-btn-link { background: none; border: none; color: var(--lc-danger); padding: 8px 0; font-size: 14px; font-weight: 600; }
.lc-btn-small { padding: 8px 16px; min-height: 44px; font-size: 14px; font-weight: 600; margin-top: 6px; letter-spacing: .01em; }
.lc-btn:disabled { opacity: .55; cursor: default; transform: none; }
.lc-btn:focus-visible, .lcx-nav a:focus-visible, .lcx-acct-btn:focus-visible { outline: 2px solid var(--lcx-blue); outline-offset: 2px; }
/* ---------- Button text law (2026-10-18) — legacy .lc-btn system ----------
   Mohamed's rule, no exceptions: a button with a colored fill gets WHITE
   text; a white or outlined button gets dark text. These (0,2,0) pins
   restate every variant's own text color above scoped link rules like
   .lc-footer a (0,1,1) that could otherwise recolor a button anchor,
   while intentional scoped overrides of equal specificity that come
   later (.lc-portal-hero .lc-btn-primary, lc-cities.css final card)
   still win inside their scopes. */
.lc-btn.lc-btn-primary, .lc-btn.lc-btn-primary:hover { color: #fff; }
.lc-btn.lc-btn-cream, .lc-btn.lc-btn-cream:hover { color: var(--lc-ink); }
.lc-btn.lc-btn-ghost { color: var(--lc-hero-text); }
.lc-btn.lc-btn-ghost:hover { color: #fff; }
.lc-btn.lc-btn-outline, .lc-btn.lc-btn-outline:hover { color: var(--lc-coral-ink); }
.lc-btn.lc-btn-link { color: var(--lc-danger); }


/* ============ Notices ============ */
.lc-notice { border-radius: var(--lcx-r-md); padding: 16px; margin: 0 0 16px; font-size: 16px; border: 1px solid; }
.lc-notice-error { background: var(--lc-danger-bg); border-color: var(--lc-line); color: #8F1D13; }
.lc-notice-success { background: var(--lc-sage-tint); border-color: var(--lc-line); color: var(--lc-sage-deep); }
.lc-notice-info { background: var(--lcx-mist); border-color: var(--lc-line); color: var(--lc-honey-ink); }

/* ============ Forms ============ */
.lc-form-row { margin: 0 0 14px; }
.lc-form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 16px; color: var(--lc-ink); }
.lc-form-row input[type="text"],
.lc-form-row input[type="email"],
.lc-form-row input[type="tel"],
.lc-form-row input[type="password"],
.lc-form-row input[type="number"],
.lc-form-row select,
.lc-form-row textarea { width: 100%; max-width: 100%; border: 1px solid var(--lc-line); border-radius: var(--lcx-r-sm); padding: 12px 16px; min-height: 48px; font-size: 16px; font-family: var(--lc-body); background: var(--lc-card); color: var(--lc-ink); box-sizing: border-box; transition: border-color var(--lcx-dur-fast) var(--lcx-ease), box-shadow var(--lcx-dur-fast) var(--lcx-ease); }
.lc-form-row input:focus, .lc-form-row select:focus, .lc-form-row textarea:focus { outline: none; border-color: var(--lcx-blue); box-shadow: 0 0 0 2px rgba(11, 99, 216, .30); }
.lc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.lc-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) {
  .lc-form-grid, .lc-grid-3 { grid-template-columns: 1fr; }
}

/* Radio cards (account type) */
.lc-radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .lc-radio-cards { grid-template-columns: 1fr; } }
.lc-radio-card { display: block; border: 1px solid var(--lc-line); border-radius: var(--lcx-r-md); padding: 16px; cursor: pointer; background: var(--lc-card); transition: border-color var(--lcx-dur-fast) var(--lcx-ease), background var(--lcx-dur-fast) var(--lcx-ease), box-shadow var(--lcx-dur-fast) var(--lcx-ease); }
.lc-radio-card input { margin-right: 6px; accent-color: var(--lc-coral); }
.lc-radio-card strong { display: block; margin: 6px 0 2px; color: var(--lc-ink); }
.lc-radio-card span { color: var(--lc-muted); font-size: .9em; }
.lc-radio-card:has(input:checked) { border-color: var(--lc-coral); background: var(--lc-coral-tint); box-shadow: 0 0 0 1px var(--lc-coral); }

/* Driver-only fields toggle */
.lc-driver-fields { display: none; }
.lc-driver-fields.lc-show { display: block; }

/* ZIP checkbox grid */
.lc-zip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; border: 1px solid var(--lc-line); border-radius: var(--lcx-r-sm); padding: 10px; background: var(--lc-card); }
.lc-zip { display: flex; align-items: center; gap: 6px; font-size: 14px; background: var(--lc-cream-2); border-radius: var(--lcx-r-sm); padding: 6px 8px; cursor: pointer; }
.lc-zip input { margin: 0; accent-color: var(--lc-coral); }

/* Stripe card element */
.lc-card-element { border: 1px solid var(--lc-line); border-radius: var(--lcx-r-sm); padding: 12px 16px; min-height: 48px; background: var(--lc-card); }
.lc-card-errors { color: var(--lc-danger); margin-top: 8px; font-size: 14px; }

/* ============ Orders ============ */
.lc-order-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.lc-order-meta { color: var(--lc-ink-soft); margin-bottom: 8px; }
.lc-customer-box { background: var(--lc-coral-tint); border: 1px solid var(--lc-line); border-radius: var(--lcx-r-md); padding: 16px; margin-bottom: 10px; }
.lc-driver-info { background: var(--lc-sage-tint); border: 1px solid var(--lc-line); border-radius: var(--lcx-r-md); padding: 12px 16px; margin-bottom: 10px; }
.lc-completed { opacity: .94; }

/* ============ Badges ============ */
.lc-badge { display: inline-block; font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--lc-cream-2); color: var(--lc-ink-soft); white-space: nowrap; }
.lc-badge-match { background: var(--lc-sage-tint); color: var(--lc-sage-deep); }
.lc-status-posted { background: var(--lc-honey-bg); color: var(--lc-honey-ink); }
.lc-status-accepted { background: var(--lc-coral-tint); color: var(--lc-coral-ink); }
.lc-status-picked_up, .lc-status-at_laundry { background: var(--lc-coral-tint); color: var(--lc-coral-ink); }
.lc-status-out_for_delivery { background: var(--lcx-mist); color: var(--lc-ink-soft); }
.lc-status-returned { background: var(--lc-sage-tint); color: var(--lc-sage-deep); }
.lc-status-cancelled { background: var(--lcx-mist); color: var(--lc-muted); }
.lc-pay-payable { background: var(--lc-honey-bg); color: var(--lc-honey-ink); }
.lc-pay-paid { background: var(--lc-sage-tint); color: var(--lc-sage-deep); }

/* Payout row */
.lc-pay-row { display: flex; gap: 24px; margin: 12px 0 16px; flex-wrap: wrap; }
.lc-net { color: var(--lc-sage-deep); font-size: 1.15em; font-weight: 600; }

/* Timeline */
.lc-timeline { list-style: none; margin: 14px 0 0; padding: 0; }
.lc-timeline li { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--lc-line-soft); color: var(--lc-ink-soft); }
.lc-tl-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--lc-coral); margin-top: 6px; }

/* Earnings stats */
.lc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.lc-stat { background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: var(--lcx-r-md); padding: 16px; text-align: center; }
.lc-stat-num { display: block; font-size: 1.45em; font-weight: 600; color: var(--lc-sage-deep); letter-spacing: -0.02em; }
.lc-stat-label { font-size: .85em; color: var(--lc-muted); }
@media (max-width: 560px) { .lc-stats { grid-template-columns: 1fr; } }

/* Tables */
.lc-table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--lc-line-soft); }
.lc-table { width: 100%; border-collapse: collapse; background: var(--lc-card); font-size: 16px; }
.lc-table th, .lc-table td { padding: 12px 16px; border-bottom: 1px solid var(--lc-line-soft); text-align: left; color: var(--lc-ink); }
.lc-table th { font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: var(--lc-muted); font-weight: 600; }
.lc-table tr:last-child td { border-bottom: none; }

/* ============ Legacy landing blocks ============ */
.lc-hero { background: var(--lc-coral); color: #ffffff; padding: 64px 20px; text-align: center; }
.lc-hero-inner { max-width: 720px; margin: 0 auto; }
.lc-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; opacity: .85; margin: 0 0 12px; font-weight: 600; }
.lc-hero h1 { font-size: 2.2em; margin: 0 0 14px; line-height: 1.15; font-family: var(--lc-display); font-weight: 600; letter-spacing: -0.02em; }
.lc-hero-sub { font-size: 1.1em; max-width: 560px; margin: 0 auto 26px; line-height: 1.6; }
.lc-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lc-offer-banner { background: var(--lc-honey-bg); border-bottom: 1px solid var(--lc-honey-line); padding: 16px 20px; text-align: center; font-size: 1.05em; color: var(--lc-honey-ink); }
.lc-offer-banner a { margin-left: 10px; font-weight: 600; color: var(--lc-honey-ink); }
.lc-how { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 960px; margin: 0 auto; padding: 48px 20px; }
@media (max-width: 720px) { .lc-how { grid-template-columns: 1fr; } }
.lc-how h2 { margin-top: 0; font-family: var(--lc-display); font-weight: 600; }
.lc-steps { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: step; }
/* v1.0.43: vertical steps — coral number at left, title + text stacked to its
   right. (The old li { display:flex } put the title and description in two
   side-by-side columns.) */
.lc-steps li { counter-increment: step; position: relative; padding-left: 50px; margin-bottom: 20px; line-height: 1.6; }
.lc-steps li:last-child { margin-bottom: 4px; }
.lc-steps li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 34px; height: 34px; border-radius: 50%; background: var(--lc-coral); color: #fff; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.lc-steps strong { display: block; color: var(--lc-ink); margin-bottom: 2px; }
.lc-steps span { color: var(--lc-ink-soft); }
.lc-area { background: var(--lc-cream-2); text-align: center; padding: 40px 20px; }
.lc-area h2 { margin-top: 0; font-family: var(--lc-display); font-weight: 600; }
/* Canvas template reset: the landing owns the full viewport (no theme chrome). */
body.lc-canvas { margin: 0; padding: 0; background: var(--lc-green-deep); }
body.lc-canvas .lc-landing { width: 100%; max-width: none; }

.lc-footer { background: var(--lc-green-deep); color: #d6d6d6; }
.lc-footer-inner { max-width: 1120px; margin: 0 auto; padding: 48px 24px 28px; }
.lc-footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 36px; margin-bottom: 36px; }
@media (max-width: 760px) { .lc-footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.lc-footer strong { color: var(--lc-hero-text); }
.lc-footer a { color: #2997ff; }
.lc-footer-brand p { font-size: 16px; line-height: 1.6; margin: 10px 0 12px; }
.lc-footer-logo { display: block; height: 37px; width: auto; }
.lc-footer-locale { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #86868b; }
.lc-footer-links { display: flex; flex-direction: column; gap: 10px; }
.lc-footer-links strong { margin-bottom: 4px; }
.lc-footer-links a { text-decoration: none; font-size: 16px; }
.lc-footer-links a:hover { text-decoration: underline; }
.lc-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #86868b; }
.lc-footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.lc-footer-legal a { color: #d6d6d6; text-decoration: underline; text-underline-offset: 3px; }
.lc-footer-legal a:hover { color: var(--lc-hero-text); }

/* Contact form in the landing footer */
.lcx-contact { min-width: 260px; max-width: 360px; flex: 1 1 280px; }
.lcx-contact strong { display: block; margin-bottom: 10px; font-size: 16px; color: var(--lc-hero-text); }
.lcx-contact input[type="text"], .lcx-contact input[type="email"], .lcx-contact textarea { width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); color: var(--lc-hero-text); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; font-size: 14px; font-family: var(--lc-body); }
.lcx-contact input::placeholder, .lcx-contact textarea::placeholder { color: #86868b; }
.lcx-contact input:focus, .lcx-contact textarea:focus { outline: none; border-color: var(--lc-coral); background: rgba(255, 255, 255, .1); }
.lcx-contact textarea { resize: vertical; min-height: 70px; }
.lcx-contact .lc-btn { width: 100%; }
.lcx-contact-ok { color: #7bc47f; font-size: 16px; }
.lcx-contact-err { color: #ffb4ab; font-size: 16px; }

/* Keep the theme's own site logo compact — premium feel everywhere. */
.wp-block-site-logo img, img.custom-logo { max-width: 40px; height: auto; }

/* ============ Account dropdown + mobile menu (lcx-) ============ */
.lcx-acct { position: relative; }
.lcx-acct-btn { display: inline-flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, .9); border: 1px solid var(--lc-line); border-radius: 999px; padding: 6px 14px 6px 6px; cursor: pointer; font-size: 16px; font-weight: 600; font-family: var(--lc-body); color: var(--lc-ink); transition: box-shadow var(--lcx-dur-fast) var(--lcx-ease), transform var(--lcx-dur-fast) var(--lcx-ease); }
.lcx-acct-btn:hover { box-shadow: var(--lc-shadow-warm); transform: translateY(-1px); }
.lcx-acct-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--lct-accent, #1E7A4C); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; }
.lcx-acct-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcx-acct-caret { color: var(--lc-muted); font-size: 12px; }
.lcx-acct-menu { display: none; position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: 18px; box-shadow: var(--lc-shadow-lift); padding: 8px; z-index: 60; }
.lcx-acct.open .lcx-acct-menu { display: block; }
.lcx-acct.open .lcx-acct-caret { transform: rotate(180deg); display: inline-block; }
.lcx-acct-menu a { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--lc-ink); }
.lcx-acct-menu a:hover { background: var(--lc-cream-2); }
.lcx-acct-label { display: block; color: var(--lc-ink); font-weight: 600; font-size: 16px; }
.lcx-acct-desc { display: block; color: var(--lc-muted); font-size: 14px; margin-top: 1px; }

/* Mobile hamburger + slide-down panel */
.lcx-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; margin-left: auto; }
.lcx-nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; margin: 5px 0; transition: transform var(--lcx-dur) var(--lcx-ease), opacity var(--lcx-dur) var(--lcx-ease); }
.lcx-nav-mobile { display: none; border-top: 1px solid var(--lc-line-soft); padding: 8px 14px 14px; background: rgba(255, 255, 255, .96); }
.lcx-nav-mobile a { display: block; padding: 12px 8px; color: var(--lc-ink); text-decoration: none; font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--lc-line-soft); }
.lcx-nav-mobile a:last-child { border-bottom: none; }
.lcx-nav.lcx-nav-open .lcx-nav-mobile { display: block; }
.lcx-nav.lcx-nav-open .lcx-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lcx-nav.lcx-nav-open .lcx-nav-toggle span:nth-child(2) { opacity: 0; }
.lcx-nav.lcx-nav-open .lcx-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .lcx-nav-app .lcx-nav-toggle { display: block; }
  .lcx-nav-app .lcx-nav-ctas { display: none; }
  .lcx-nav-app .lcx-nav-inner { gap: 10px; }
}

/* ============ Landing nav (lcx-) ============ */
.lcx-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--lc-line); box-shadow: none; color: var(--lc-ink); }
.lcx-nav-inner { max-width: 1120px; margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; gap: 24px; }
.lcx-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; color: var(--lc-ink); text-decoration: none; letter-spacing: -0.03em; font-family: var(--lc-body); }
.lcx-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; color: var(--lcx-blue); }
.lcx-brand-mark svg { width: 100%; height: 100%; display: block; }
/* Brand mark: accent blue on the light chrome (v1.1.0) */
.lc-landing .lcx-brand-mark { color: var(--lc-coral); }
.lcx-nav-links { display: flex; gap: 24px; margin-left: 14px; }
.lcx-nav-links a { color: var(--lc-ink-soft); text-decoration: none; font-size: 16px; font-weight: 500; position: relative; transition: color var(--lcx-dur-fast) var(--lcx-ease); }
.lcx-nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; border-radius: 2px; background: var(--lc-coral); transition: right var(--lcx-dur) var(--lcx-ease); }
.lcx-nav-links a:hover { color: var(--lc-ink); }
.lcx-nav-links a:hover::after { right: 0; }
.lcx-nav-ctas { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lcx-link { color: var(--lc-ink-soft); text-decoration: none; font-weight: 600; font-size: 16px; }
.lcx-link:hover { color: var(--lc-ink); }
.lcx-nav-btn { padding: 10px 22px; font-size: 16px; white-space: nowrap; transition: transform var(--lcx-dur-fast) var(--lcx-ease), box-shadow var(--lcx-dur-fast) var(--lcx-ease), background var(--lcx-dur-fast) var(--lcx-ease); }
@media (max-width: 760px) {
  .lcx-nav-links { display: none; }
  .lcx-nav-inner { gap: 10px; padding: 10px 14px; }
  .lcx-nav-ctas { gap: 8px; }
  .lcx-nav-btn { padding: 9px 16px; font-size: 14px; }
  .lcx-brand { font-size: 16px; gap: 8px; }
  .lcx-brand-mark { width: 28px; height: 28px; }
}

/* Landing nav: same light glass bar as the rest of the site (v1.1.0) */
.lc-landing .lcx-nav { background: rgba(255, 255, 255, .82); border-bottom: 1px solid var(--lc-line); color: var(--lc-ink); }
.lc-landing .lcx-brand { color: var(--lc-ink); }
.lc-landing .lcx-nav-links a { color: var(--lc-ink-soft); }
.lc-landing .lcx-nav-links a:hover { color: var(--lc-ink); }
.lc-landing .lcx-link { color: var(--lc-ink-soft); }
.lc-landing .lcx-link:hover { color: var(--lc-ink); }
.lc-landing .lcx-acct-btn { background: rgba(255, 255, 255, .9); border-color: var(--lc-line); color: var(--lc-ink); }
.lc-landing .lcx-nav-toggle { color: var(--lc-ink); }
.lc-landing .lcx-nav-mobile { background: rgba(255, 255, 255, .98); border-top: 1px solid var(--lc-line-soft); }
.lc-landing .lcx-nav-mobile a { color: var(--lc-ink); border-bottom-color: var(--lc-line-soft); }

/* ============ Hero (lcx-) ============ */
.lcx-hero { position: relative; overflow: hidden; background: var(--lc-cream); color: var(--lc-ink); }
.lcx-hero-bg { position: absolute; inset: 0; background: none; pointer-events: none; }
.lcx-hero-inner { position: relative; max-width: 1120px; margin: 0 auto; padding: 96px 24px 80px; text-align: left; }
@media (max-width: 640px) { .lcx-hero-inner { padding: 56px 18px 52px; } }
.lcx-pills { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 26px; }
.lcx-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lc-ink-soft); background: var(--lcx-surface); border: 1px solid var(--lc-line); padding: 9px 18px; border-radius: 999px; }
.lcx-pill-gold { color: var(--lc-coral-ink); background: var(--lc-coral-tint); border-color: rgba(0, 113, 227, .35); }
.lcx-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lc-sage); box-shadow: 0 0 0 4px rgba(36, 138, 61, .2); animation: lcx-pulse 2s infinite; }
@keyframes lcx-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(36, 138, 61, .2); } 50% { box-shadow: 0 0 0 7px rgba(36, 138, 61, .07); } }
.lcx-hero h1 { font-family: var(--lc-display); font-weight: 600; font-size: clamp(28px, 6vw, 40px); line-height: 1.05; letter-spacing: -0.022em; margin: 0 0 20px; color: var(--lc-ink); }
.lcx-grad { color: var(--lc-coral); }
.lcx-hero-sub { font-size: 20px; line-height: 1.65; color: var(--lc-secondary); max-width: 620px; margin: 0 0 32px; }
.lcx-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 34px; }
.lcx-hero-trust { list-style: none; display: flex; gap: 10px 30px; justify-content: flex-start; flex-wrap: wrap; margin: 0 0 8px; padding: 0; }
.lcx-hero-trust li { display: inline-flex; align-items: center; gap: 9px; color: var(--lc-ink-soft); font-size: 16px; font-weight: 500; }
.lcx-hero-trust li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background-color: var(--lc-sage-tint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23055c33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; flex: 0 0 auto; }
.lcx-hero-photo { margin: 46px 0 0; }
.lcx-hero-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 28px; display: block; box-shadow: 0 12px 40px rgba(0, 0, 0, .10), 0 0 0 1px var(--lc-line-soft); }
@media (max-width: 640px) { .lcx-hero-photo img { aspect-ratio: 4 / 3.4; border-radius: 22px; } }
/* Legacy hooks kept for compat */
.lcx-hero-copy { position: relative; }
.lcx-hero-proof { display: flex; align-items: center; gap: 12px; justify-content: center; }
.lcx-avatars { display: flex; }
.lcx-avatars span { width: 34px; height: 34px; border-radius: 50%; background: var(--lc-cream-2); border: 2px solid #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--lc-ink-soft); margin-left: -10px; }
.lcx-avatars span:first-child { margin-left: 0; }
.lcx-hero-proof p { margin: 0; font-size: 14px; color: var(--lcx-ink-3); }
.lcx-hero-visual { position: relative; }

/* Legacy example order card */
.lcx-order-card { position: relative; background: var(--lc-card); color: var(--lc-ink); border-radius: 22px; padding: 22px; box-shadow: var(--lc-shadow-lift); max-width: 430px; margin-left: auto; }
.lcx-example-tag { position: absolute; top: -12px; left: 18px; background: var(--lc-gold); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.lcx-oc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.lcx-oc-id { display: block; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.lcx-oc-time { font-size: 12px; color: var(--lc-muted); }
.lcx-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.lcx-badge-live { background: var(--lcx-blue-soft); color: var(--lc-coral-ink); }
.lcx-oc-customer { display: flex; align-items: center; gap: 12px; background: var(--lc-cream); border: 1px solid var(--lc-line-soft); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.lcx-oc-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--lc-coral); color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.lcx-oc-customer strong { display: block; font-size: 16px; color: var(--lc-ink); }
.lcx-oc-customer span { font-size: 12px; color: var(--lc-muted); }
.lcx-oc-offer { margin-left: auto; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--lc-ink); }
.lcx-oc-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.lcx-oc-meta span { font-size: 12px; font-weight: 600; color: var(--lc-ink-soft); background: var(--lc-cream-2); border-radius: 8px; padding: 5px 10px; }
.lcx-timeline { list-style: none; display: flex; margin: 0 0 14px; padding: 0; }
.lcx-timeline li { flex: 1; text-align: center; position: relative; font-size: 12px; font-weight: 600; color: var(--lc-muted); }
.lcx-timeline li i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--lc-line); margin: 0 auto 6px; position: relative; z-index: 1; }
.lcx-timeline li::before { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--lc-line); }
.lcx-timeline li:first-child::before { display: none; }
.lcx-timeline li.done { color: var(--lc-coral-ink); }
.lcx-timeline li.done i { background: var(--lc-coral); box-shadow: inset 0 0 0 3px #fff; }
.lcx-timeline li.done::before { background: var(--lc-coral); }
.lcx-timeline li.now { color: var(--lc-ink); }
.lcx-timeline li.now i { background: var(--lc-coral); animation: lcx-pulse 2s infinite; }
.lcx-timeline li.now::before { background: var(--lc-coral); }
.lcx-oc-driver { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--lc-line-soft); padding-top: 14px; }
.lcx-oc-driver strong { display: block; font-size: 14px; color: var(--lc-ink); }
.lcx-oc-driver span { font-size: 12px; color: var(--lc-muted); }
.lcx-float { position: absolute; background: rgba(255, 255, 255, .96); border: 1px solid var(--lc-line-soft); border-radius: 16px; padding: 12px 16px; box-shadow: var(--lc-shadow-lift); color: var(--lc-ink); }
.lcx-float strong { display: block; font-size: 16px; letter-spacing: -0.01em; }
.lcx-float span { font-size: 12px; color: var(--lc-muted); }
.lcx-float-a { top: -24px; right: 6%; animation: lcx-hover 5s ease-in-out infinite; }
.lcx-float-b { bottom: -20px; left: 2%; animation: lcx-hover 6s ease-in-out infinite reverse; }
.lcx-float-a strong { color: var(--lc-sage-deep); }
@keyframes lcx-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 900px) { .lcx-float-a { top: -18px; right: 0; } .lcx-float-b { bottom: -18px; left: 0; } }

/* ============ Stats band ============ */
.lcx-stats { max-width: 1120px; margin: 0 auto; padding: 48px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.lcx-stats strong { display: block; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--lc-ink); font-family: var(--lc-display); }
.lcx-stats span { font-size: 14px; color: var(--lc-muted); }
@media (max-width: 700px) { .lcx-stats { grid-template-columns: 1fr 1fr; } }

/* ============ Sections ============ */
.lcx-section { max-width: 1120px; margin: 0 auto; padding: 44px 20px 68px; text-align: center; }
.lcx-eyebrow { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lc-coral-ink); margin: 0 0 12px; }
.lcx-eyebrow-light { color: var(--lc-gold-soft); }
.lcx-section h2, .lcx-drivers h2, .lcx-final-card h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 14px; font-weight: 600; font-family: var(--lc-display); color: var(--lc-ink); }
.lcx-lead { color: var(--lc-ink-soft); font-size: 16px; max-width: 620px; margin: 0 auto 26px; line-height: 1.6; }
.lcx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; margin: 36px 0 40px; }
@media (max-width: 760px) { .lcx-steps { grid-template-columns: 1fr; } }
.lcx-step { background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: 20px; padding: 28px 24px; box-shadow: var(--lc-shadow-warm); }
.lcx-step-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 14px; background: var(--lc-coral); color: #fff; font-weight: 600; margin-bottom: 16px; font-size: 16px; }
.lcx-step h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.01em; font-family: var(--lc-display); font-weight: 600; color: var(--lc-ink); }
.lcx-step p { margin: 0; color: var(--lc-ink-soft); font-size: 16px; line-height: 1.6; }
.lcx-center { text-align: center; }
.lcx-checks { list-style: none; margin: 0 0 28px; padding: 0; text-align: left; }
.lcx-checks li { position: relative; padding: 9px 0 9px 34px; color: #d6d6d6; font-size: 16px; }
.lcx-checks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 22px; height: 22px; border-radius: 50%; background-color: rgba(36, 138, 61, .22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237bc47f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; }

/* ============ Laundry pros dark section ============ */
.lcx-drivers { background: var(--lc-green-deep); border-radius: 28px; color: var(--lc-hero-text); margin: 12px; position: relative; overflow: hidden; }
.lcx-drivers::before { content: ""; position: absolute; inset: 0; background: none; pointer-events: none; }
.lcx-drivers-inner { position: relative; max-width: 1120px; margin: 0 auto; padding: 72px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .lcx-drivers-inner { grid-template-columns: 1fr; padding: 52px 22px; } .lcx-drivers { margin: 8px; } }
.lcx-drivers h2 { color: var(--lc-hero-text); }
.lcx-drivers-copy > p { color: #c7c7cc; line-height: 1.65; margin: 0 0 20px; }
.lcx-pay-card { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; padding: 28px; backdrop-filter: blur(8px); }
.lcx-pay-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--lc-gold-soft); font-weight: 600; margin: 0 0 16px; }
.lcx-pay-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 16px; color: #e3e3e6; }
.lcx-pay-row strong { font-size: 16px; }
.lcx-pay-net { color: #7bc47f; font-size: 28px !important; letter-spacing: -0.02em; font-weight: 600; }
.lcx-pay-muted { color: #86868b; font-size: 14px; }
.lcx-pay-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); margin: 14px 0; overflow: hidden; }
.lcx-pay-bar i { display: block; height: 100%; border-radius: 999px; background: var(--lc-sage); }
.lcx-pay-note { margin: 0; font-size: 14px; color: #aeaeb2; line-height: 1.55; }

/* Chips */
.lcx-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 720px; margin: 0 auto; }
.lcx-chips span { background: var(--lcx-surface); border: 1px solid var(--lc-line); color: var(--lc-ink-soft); font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 999px; }

/* ============ Final CTA ============ */
.lcx-final { max-width: 1120px; margin: 0 auto; padding: 12px 20px 76px; }
.lcx-final-card { position: relative; overflow: hidden; border-radius: 28px; background: var(--lc-green-deep); padding: 68px 32px; text-align: center; color: var(--lc-hero-text); }
.lcx-final-card::before { content: ""; position: absolute; inset: 0; background: none; pointer-events: none; }
.lcx-final-card h2 { color: var(--lc-hero-text); position: relative; }
.lcx-final-card p { color: #d6d6d6; position: relative; margin: 0 0 28px; font-size: 16px; }
.lcx-final-card .lcx-hero-ctas { justify-content: center; margin: 0; position: relative; }

/* ============ Portals ============ */
.lc-portal-hero { position: relative; overflow: hidden; border-radius: 22px; background: var(--lc-green); color: var(--lc-hero-text); padding: 30px 26px; margin: 4px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.lc-portal-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 90% 10%, rgba(0, 113, 227, .2), transparent 60%); pointer-events: none; }
.lc-portal-hero > div, .lc-portal-hero > a { position: relative; }
.lc-portal-hero-slim { padding: 24px 26px; }
.lc-portal-hello { margin: 0; font-size: 14px; color: #c7c7cc; font-weight: 500; }
.lc-portal-name { margin: 2px 0 6px !important; font-size: 28px !important; letter-spacing: -0.02em; color: var(--lc-hero-text); font-weight: 600; font-family: var(--lc-display); }
.lc-portal-sub { margin: 0; font-size: 14px; color: #aeaeb2; }
.lc-portal-hero .lc-btn-primary { background: var(--lc-hero-text); border-color: var(--lc-hero-text); color: var(--lc-ink); font-weight: 600; white-space: nowrap; box-shadow: none; }
.lc-portal-hero .lc-btn-primary:hover { background: var(--lcx-surface); border-color: #fff; color: var(--lc-ink); }
.lc-portal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 640px) { .lc-portal-stats { grid-template-columns: 1fr 1fr; } }
.lc-pstat { background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: var(--lcx-r-md); padding: 16px; text-align: center; }
.lc-pstat-num { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--lc-ink); }
.lc-pstat-label { font-size: 12px; color: var(--lc-muted); font-weight: 500; }
.lc-section-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 26px 0 12px; color: var(--lc-ink); font-family: var(--lc-display); }

/* Ratings & reviews */
.lc-rating { color: var(--lc-gold); font-weight: 600; white-space: nowrap; }
.lc-review-box { margin-top: 14px; padding: 14px; border: 1px solid var(--lc-honey-line); border-radius: 16px; background: var(--lcx-mist); }
.lc-review-form .lc-stars { display: flex; gap: 6px; margin: 8px 0; }
.lc-star input { position: absolute; opacity: 0; pointer-events: none; }
.lc-star span { color: var(--lcx-mist-2); cursor: pointer; display: inline-flex; transition: color var(--lcx-dur-fast) var(--lcx-ease), transform var(--lcx-dur-fast) var(--lcx-ease); }
.lc-star span .lc-icon { width: 28px; height: 28px; }
.lc-star span:hover { transform: scale(1.12); }
.lc-star:active span { transform: scale(.98); }
.lc-star input:checked + span { color: var(--lcx-amber); }
.lc-review-form textarea { width: 100%; border: 1px solid var(--lcx-line-strong); border-radius: 14px; padding: 12px; font-family: var(--lc-body); background: var(--lcx-surface); }
.lc-fineprint { font-size: 12px; margin: 4px 0 10px; color: var(--lc-muted); }

/* ============ Expandable sections ============ */
.lc-details { border: 1px solid var(--lc-line-soft); border-radius: 16px; margin: 12px 0; background: var(--lc-card); }
.lc-details > summary { cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 16px; list-style: none; display: block; color: var(--lc-ink); }
.lc-details > summary::-webkit-details-marker { display: none; }
.lc-details > summary::before { content: "+"; font-size: 20px; color: var(--lc-coral); font-weight: 600; margin-right: 8px; }
.lc-details[open] > summary::before { content: "–"; }
.lc-details-body { padding: 0 16px 16px; color: var(--lc-ink-soft); }
.lc-count { display: inline-block; min-width: 22px; text-align: center; font-size: 12px; font-weight: 600; background: var(--lc-coral); color: #fff; border-radius: 999px; padding: 2px 7px; }

/* ============ Messaging ============ */
.lc-msg-unread { background: var(--lcx-mist); border: 1px solid var(--lc-honey-line); color: var(--lc-honey-ink); border-radius: 14px; padding: 10px 14px; font-size: 14px; margin: 12px 0 0; }
.lc-thread { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; padding: 4px 2px; margin-bottom: 12px; }
.lc-msg { max-width: 85%; background: var(--lc-cream-2); border-radius: 16px 16px 16px 5px; padding: 10px 14px; font-size: 16px; align-self: flex-start; color: var(--lc-ink); }
.lc-msg-mine { background: var(--lcx-blue-soft); border-radius: 16px 16px 5px 16px; align-self: flex-end; }
.lc-msg-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--lc-muted); margin-bottom: 4px; }
.lc-msg-body { word-wrap: break-word; }
.lc-msg-form { display: flex; flex-direction: column; gap: 8px; }
.lc-msg-form textarea { width: 100%; border: 1px solid var(--lcx-line-strong); border-radius: 14px; padding: 10px 14px; font-size: 16px; font-family: var(--lc-body); min-height: 64px; box-sizing: border-box; background: var(--lcx-surface); color: var(--lc-ink); }
.lc-msg-form textarea:focus { outline: none; border-color: var(--lc-coral); box-shadow: 0 0 0 4px rgba(0, 113, 227, .25); }
.lc-msg-form button { align-self: flex-end; }

/* ============ Tipping ============ */
.lc-tip-form { margin: 12px 0; }
.lc-tip-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
@media (max-width: 480px) { .lc-tip-presets { grid-template-columns: repeat(2, 1fr); } }
.lc-tip-preset { border: 1px solid var(--lc-line); background: var(--lc-card); border-radius: var(--lcx-r-sm); padding: 10px 6px; min-height: 48px; font-size: 16px; font-weight: 600; font-family: var(--lc-body); color: var(--lc-ink); cursor: pointer; transition: border-color var(--lcx-dur-fast) var(--lcx-ease), background var(--lcx-dur-fast) var(--lcx-ease); }
.lc-tip-preset:hover, .lc-tip-preset.lc-selected { border-color: var(--lc-coral); background: var(--lc-coral-tint); color: var(--lc-coral-ink); }
.lc-tip-custom-row { display: flex; gap: 8px; margin-bottom: 8px; }
.lc-tip-custom-row input { flex: 1; border: 1px solid var(--lcx-line-strong); border-radius: 14px; padding: 12px 14px; font-size: 16px; font-family: var(--lc-body); background: var(--lcx-surface); color: var(--lc-ink); }
.lc-tip-receipt { background: var(--lc-sage-tint); border: 1px solid #b9dcc2; border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--lc-sage-deep); }

/* ============ Receipts ============ */
.lc-receipt { border: 1px dashed var(--lcx-line-strong); border-radius: 16px; padding: 16px; background: var(--lcx-surface); font-size: 14px; color: var(--lc-ink); }
.lc-receipt-row { display: flex; justify-content: space-between; padding: 4px 0; }
.lc-receipt-total { display: flex; justify-content: space-between; padding: 8px 0 0; margin-top: 8px; border-top: 2px solid var(--lc-line-soft); font-size: 1.1em; font-weight: 600; }
.lc-receipt-head { font-weight: 600; margin-bottom: 6px; font-family: var(--lc-display); font-size: 16px; }
.lc-receipt-ref { font-size: 12px; color: var(--lc-muted); margin-top: 6px; }

/* ============ Proof photos ============ */
.lc-photos { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.lc-photo { flex: 1 1 140px; max-width: 220px; }
.lc-photo img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--lc-line-soft); display: block; }
.lc-photo span { display: block; font-size: 12px; color: var(--lc-muted); margin-top: 4px; }
.lc-photo-form { border: 1px solid var(--lc-line-soft); border-radius: 16px; padding: 14px; margin: 12px 0; background: var(--lc-cream); }
.lc-photo-form label { font-weight: 600; font-size: 14px; display: block; margin-bottom: 8px; color: var(--lc-ink); }
.lc-photo-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lc-photo-row input[type="file"] { flex: 1; min-width: 0; font-size: 14px; color: var(--lc-ink); }

/* ============ Availability toggle ============ */
.lc-avail-card { padding: 18px 22px; }
.lc-avail-form { margin: 0; }
.lc-switch { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.lc-switch input[type="checkbox"] { position: absolute; opacity: 0; }
.lc-switch-track { flex: 0 0 auto; width: 52px; height: 30px; border-radius: 999px; background: var(--lcx-mist-2); position: relative; transition: background var(--lcx-dur) var(--lcx-ease); }
.lc-switch-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--lcx-shadow-sm); transition: left var(--lcx-dur) var(--lcx-ease); }
.lc-switch input:checked + .lc-switch-track { background: var(--lc-coral); }
.lc-switch input:checked + .lc-switch-track .lc-switch-thumb { left: 25px; }
.lc-switch input:focus-visible + .lc-switch-track { outline: 3px solid rgba(0, 113, 227, .5); outline-offset: 2px; }
.lc-switch-label strong { display: block; font-size: 16px; color: var(--lc-ink); }
.lc-switch-label .lc-muted { display: block; }

/* ============ Preferences & schedule ============ */
.lc-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font-size: 16px; cursor: pointer; color: var(--lc-ink); }
.lc-check input { margin-top: 3px; accent-color: var(--lc-coral); }
.lc-radio { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; cursor: pointer; color: var(--lc-ink); }
.lc-radio input { accent-color: var(--lc-coral); }
.lc-kind-tip { background: var(--lc-honey-bg); color: var(--lc-honey-ink); border: 1px solid var(--lc-honey-line); border-radius: 14px; padding: 10px 14px; }
.lc-details > .lc-thread, .lc-details > .lc-msg-form, .lc-details > .lc-tip-form, .lc-details > .lc-tip-receipt { margin: 0 16px 16px; }

/* ============ Saved cards & pickup defaults ============ */
.lc-card-choices { margin: 0 0 12px; }
.lc-card-choices .lc-check { background: var(--lc-cream); border: 1px solid var(--lc-line-soft); border-radius: 14px; padding: 10px 14px; }
.lc-pm-list { list-style: none; margin: 0 0 16px; padding: 0; }
.lc-pm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--lc-cream); border: 1px solid var(--lc-line-soft); border-radius: 14px; padding: 10px 14px; margin: 0 0 8px; font-size: 16px; color: var(--lc-ink); }
.lc-pm-actions { display: flex; gap: 8px; flex-shrink: 0; }
.lc-pm-actions .lc-btn-small { margin-top: 0; }

/* ============ v1.0.21: pro booking page & business kit ============ */
.lc-prolink-hero h1 { font-family: var(--lc-display); font-weight: 600; letter-spacing: -0.02em; }
.lc-share-row .lc-btn { white-space: nowrap; }
#lc-pro-link { border: 1px solid var(--lcx-line-strong); border-radius: 14px; padding: 12px 14px; font-size: 16px; font-family: var(--lc-body); background: var(--lcx-surface); color: var(--lc-ink); }

/* Small polish */
.lc-wrap ::selection { background: rgba(0, 113, 227, .28); }
.lc-landing ::selection { background: rgba(0, 113, 227, .35); }

/* ============ Premium auth (pro signup / sign in) ============ */
.lc-auth { max-width: 560px; margin: 0 auto; padding: 28px 18px 56px; font-family: var(--lc-body); }
.lc-auth-card { background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: 28px; padding: 34px 30px; box-shadow: var(--lc-shadow-lift); }
.lc-auth-wide { max-width: 640px; margin: 0 auto; }
.lc-auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.lc-auth-brand img { border-radius: 12px; box-shadow: var(--lc-shadow-warm); }
.lc-auth-brand strong { font-family: var(--lc-display); font-size: 20px; color: var(--lc-ink); }
.lc-auth-brand strong span { color: var(--lc-coral-ink); font-weight: 600; }
.lc-auth h1 { font-family: var(--lc-display); font-size: 28px; margin: 0 0 8px; color: var(--lc-ink); letter-spacing: -0.01em; }
.lc-auth-steps { display: flex; gap: 10px; margin-bottom: 20px; }
.lc-auth-steps span { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--lc-muted); background: var(--lc-cream-2); border-radius: 999px; padding: 8px 14px; }
.lc-auth-steps span b { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--lcx-mist-2); color: var(--lc-ink-soft); align-items: center; justify-content: center; font-size: 12px; flex: none; }
.lc-auth-steps span.is-on { color: var(--lc-ink); background: var(--lc-coral-tint); border: 1px solid var(--lc-coral); }
.lc-auth-steps span.is-on b { background: var(--lc-coral); color: #fff; }
.lc-auth-steps span.is-done b { background: var(--lc-sage); color: #fff; }

/* Compact mobile stepper (v1.0.61): the 4 pills overflow on phones, so on
   small screens a slim "Step X of 4 · Label" header replaces the pills,
   the progress bar, and the step text. Desktop keeps the pills. */
.lc-steps-compact { display: none; margin: 0 0 18px; }
.lc-steps-compact-label { display: block; font-size: 14px; font-weight: 600; color: var(--lc-ink); letter-spacing: .01em; margin-bottom: 8px; }
.lc-steps-compact-bar { height: 6px; border-radius: 999px; background: var(--lcx-mist-2); overflow: hidden; }
.lc-steps-compact-bar > div { height: 100%; border-radius: 999px; background: var(--lc-coral); }
@media (max-width: 720px) {
  .lc-auth-steps { gap: 6px; }
  .lc-auth-steps span { padding: 7px 10px; font-size: 12px; }
}
@media (max-width: 560px) {
  .lc-signup-progress .lc-auth-steps,
  .lc-signup-progress .lc-money-progress,
  .lc-signup-progress .lc-progress-text { display: none; }
  .lc-signup-progress .lc-steps-compact { display: block; }
}

/* ============ Pro activation block ============ */
.lc-activate { text-align: left; }
.lc-activate-head { text-align: center; margin-bottom: 18px; }
.lc-activate-badge { display: inline-block; background: var(--lc-green); color: var(--lc-hero-text); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 7px 16px; margin-bottom: 12px; }
.lc-activate-head h2 { font-family: var(--lc-display); font-size: 28px; margin: 0 0 8px; color: var(--lc-ink); }
.lc-activate-list { list-style: none; margin: 0 0 20px; padding: 0; }
.lc-activate-list li { position: relative; padding: 8px 0 8px 32px; font-size: 16px; color: var(--lc-ink-soft); border-bottom: 1px solid var(--lc-line-soft); }
.lc-activate-list li:last-child { border-bottom: none; }
.lc-activate-list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background-color: var(--lc-sage-tint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23055c33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; }
.lc-activate-form .lc-field { display: block; margin-bottom: 14px; }
.lc-activate-form .lc-field > span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--lc-ink-soft); }
/* v1.0.48: promo code row on the Pro activation form. */
.lc-promo-row { display: flex; gap: 8px; }
.lc-promo-row input[type="text"] { flex: 1; min-width: 0; text-transform: uppercase; border: 1px solid var(--lc-line); border-radius: var(--lcx-r-sm); padding: 12px 16px; min-height: 48px; font-size: 16px; font-family: var(--lc-body); background: var(--lc-card); color: var(--lc-ink); box-sizing: border-box; transition: border-color var(--lcx-dur-fast) var(--lcx-ease), box-shadow var(--lcx-dur-fast) var(--lcx-ease); }
.lc-promo-row input[type="text"]:focus { outline: none; border-color: var(--lc-coral); box-shadow: 0 0 0 4px rgba(0, 113, 227, .25); }
.lc-promo-row .lc-btn { flex-shrink: 0; }
.lc-promo-msg { font-size: 14px; font-weight: 600; margin: 6px 0 0; }

/* ============ Brand kit ============ */
.lc-color-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lc-color-swatch { cursor: pointer; }
.lc-color-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.lc-color-swatch span { display: block; width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 4px 10px rgba(0,0,0,.12); transition: transform var(--lcx-dur-fast) var(--lcx-ease); }
.lc-color-swatch:hover span { transform: scale(1.08); }
.lc-color-swatch.is-selected span, .lc-color-swatch input:checked + span { border-color: var(--lc-ink); }
.lc-color-swatch input:focus-visible + span { outline: 3px solid rgba(0,113,227,.45); outline-offset: 2px; }
/* Custom color picker swatch: the native color input stays visible and round. */
.lc-color-swatch.lc-color-picker input { position: static; opacity: 1; pointer-events: auto; width: 44px; height: 44px; padding: 0; border: 3px solid transparent; border-radius: 50%; background: none; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 4px 10px rgba(0,0,0,.12); }
.lc-color-swatch.lc-color-picker input::-webkit-color-swatch-wrapper { padding: 0; }
.lc-color-swatch.lc-color-picker input::-webkit-color-swatch { border: none; border-radius: 50%; }
.lc-color-swatch.lc-color-picker input::-moz-color-swatch { border: none; border-radius: 50%; }

/* ============ Subscription banner ============ */

@media (max-width: 560px) {
  .lc-auth { padding: 16px 12px 40px; }
  .lc-auth-card { padding: 24px 18px; border-radius: 22px; }
  .lc-auth h1 { font-size: 28px; }
}

/* Today's pickup route (OSRM) */
.lc-route-list { list-style:none; margin:0.75rem 0 0; padding:0; }
.lc-route-list li { display:flex; align-items:center; gap:0.75rem; padding:0.6rem 0; border-top:1px solid var(--lcx-line); }
.lc-route-list li:first-child { border-top:none; }
.lc-route-num { flex:none; width:28px; height:28px; border-radius:50%; background: var(--lcx-ink); color: #fff; font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; }
.lc-route-stop { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.lc-route-leg { flex:none; font-size:12px; font-weight:600; color:#248a3d; background:#e6f4ea; border-radius:999px; padding:4px 10px; white-space:nowrap; }

/* ============ App canvas (v1.0.27): one design language on every screen ============
   templates/page-app-canvas.php renders every [lc_*] app page (register,
   login, pro billing, dashboards, orders) with the same nav + footer as the
   landing page. This block styles the app hero band, the content rhythm, and
   fixes the mobile nav so OUR hamburger (not the theme's) appears. */

/* Slim ink hero band carrying the page title — echoes the landing hero. */
.lcx-app-hero { position: relative; overflow: hidden; background: var(--lc-green); color: var(--lc-hero-text); }
.lcx-app-hero::before { content: ""; position: absolute; inset: 0; background: none; pointer-events: none; }
.lcx-app-hero-inner { position: relative; max-width: 1120px; margin: 0 auto; padding: 54px 22px 48px; }
.lcx-app-hero h1 { font-family: var(--lc-display); font-weight: 600; font-size: clamp(28px, 4.8vw, 40px); line-height: 1.08; letter-spacing: -0.02em; margin: 0; color: var(--lc-hero-text); }
@media (max-width: 640px) { .lcx-app-hero-inner { padding: 40px 18px 36px; } }

/* App content rhythm: cream canvas, comfortable vertical spacing. */
body.lc-app { background: var(--lc-cream); }
.lcx-app { background: var(--lc-cream); padding: 36px 0 72px; min-height: 40vh; }
@media (max-width: 640px) { .lcx-app { padding: 24px 0 56px; } }
/* Shortcode cards already carry their own surfaces; let them breathe on cream. */
.lcx-app .lc-wrap { background: transparent; }

/* Mobile nav: OUR hamburger on every page (landing + app). Section links and
   the text sign-in link collapse into the slide-down panel; the coral CTA
   and the logged-in account pill stay visible. */
@media (max-width: 860px) {
  .lcx-nav .lcx-nav-links { display: none; }
  .lcx-nav .lcx-nav-toggle { display: block; }
  .lcx-nav .lcx-nav-ctas .lcx-link { display: none; }
  .lcx-nav .lcx-nav-inner { gap: 10px; padding: 10px 14px; }
}

/* ============ Launch polish (v1.0.31) ============ */

/* Empty states */
.lc-empty { text-align: center; padding: 36px 26px; }
.lc-empty-icon { width: 64px; height: 64px; margin: 0 auto 14px; color: var(--lc-coral); background: var(--lc-coral-tint); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lc-empty-icon svg { width: 34px; height: 34px; }
.lc-empty-title { margin: 0 0 8px; font-family: var(--lc-display); font-size: 20px; font-weight: 600; color: var(--lc-ink); }
.lc-empty p.lc-muted { max-width: 420px; margin: 0 auto 16px; }

/* Order progress stepper (v1.0.43: renamed from lc-steps/lc-step — that name
   belongs to the vertical content steps and the later rule was hijacking it,
   squeezing content steps into a horizontal row on mobile) */
.lc-order-steps { list-style: none; display: flex; margin: 14px 0 4px; padding: 0; counter-reset: none; }
.lc-order-step { flex: 1; text-align: center; position: relative; padding-top: 26px; display: block; margin-bottom: 0; gap: 0; }
.lc-order-step::before { content: ''; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--lc-line); }
.lc-order-step:first-child::before { display: none; }
.lc-order-step-dot { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--lc-cream-2); border: 2px solid var(--lc-line); color: var(--lc-muted); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; line-height: 1; }
.lc-order-step-label { font-size: 12px; color: var(--lc-muted); font-weight: 600; display: block; padding: 0 2px; }
.lc-order-step-done .lc-order-step-dot { background: var(--lc-sage); border-color: var(--lc-sage); color: #fff; }
.lc-order-step-done::before { background: var(--lc-sage); }
.lc-order-step-done .lc-order-step-label { color: var(--lc-sage-deep); }
.lc-order-step-now .lc-order-step-dot { background: var(--lc-coral); border-color: var(--lc-coral); color: #fff; box-shadow: 0 0 0 5px var(--lc-coral-tint); }
.lc-order-step-now .lc-order-step-label { color: var(--lc-ink); }
.lc-order-step-now::before { background: var(--lc-sage); }
.lc-steps-cancelled { color: var(--lc-danger); font-weight: 600; font-size: .92em; margin: 10px 0 4px; }
@media (max-width: 560px) {
  .lc-order-step-label { font-size: 12px; }
  .lc-order-step { padding-top: 24px; }
}

/* Onboarding checklist */
.lc-checklist { border: 1px solid var(--lc-honey-line); background: var(--lc-card); }
.lc-checklist-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lc-checklist-dismiss { background: none; border: none; color: var(--lc-muted); font-size: 16px; cursor: pointer; padding: 6px; border-radius: 8px; line-height: 1; }
.lc-checklist-dismiss:hover { background: var(--lc-cream-2); color: var(--lc-ink); }
.lc-checklist-bar { height: 8px; border-radius: 99px; background: var(--lc-cream-2); margin: 12px 0 16px; overflow: hidden; }
.lc-checklist-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--lc-sage), var(--lc-sage-deep)); transition: width var(--lcx-dur-slow) var(--lcx-ease); }
.lc-checklist-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lc-checklist-item { display: flex; align-items: center; gap: 12px; }
.lc-checklist-box { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--lc-line); flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 600; }
.lc-checklist-item.lc-done .lc-checklist-box { background: var(--lc-sage); border-color: var(--lc-sage); }
.lc-checklist-item.lc-done .lc-checklist-label { color: var(--lc-muted); text-decoration: line-through; }
.lc-checklist-label { flex: 1; font-size: 16px; font-weight: 600; color: var(--lc-ink); }
.lc-checklist-cta { margin-top: 0; flex: none; }

/* Activation celebration overlay */
.lc-celebrate { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: lcFadeIn var(--lcx-dur) var(--lcx-ease); }
.lc-celebrate canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lc-celebrate-card { position: relative; background: var(--lc-card); border-radius: var(--lcx-r-lg); padding: 32px; text-align: center; max-width: 420px; box-shadow: var(--lc-shadow-lift); animation: lcPop var(--lcx-dur-slow) var(--lcx-ease); }
.lc-celebrate-check { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; background: var(--lc-sage-tint); display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--lc-sage-deep); }
.lc-celebrate-card h2 { font-family: var(--lc-display); margin: 0 0 8px; font-size: 28px; color: var(--lc-ink); }
.lc-celebrate-card p { color: var(--lc-ink-soft); margin: 0; }
@keyframes lcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lcPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Branded 404 */
.lc-404 { text-align: center; padding: 48px 30px; }
.lc-404-code { font-family: var(--lc-display); font-size: 40px; font-weight: 600; color: var(--lc-line); line-height: 1; margin-bottom: 6px; }
.lc-404-search { display: flex; gap: 8px; margin: 20px 0; }
.lc-404-search input[type="search"] { flex: 1; min-width: 0; border: 1px solid var(--lc-line); border-radius: var(--lcx-r-sm); padding: 12px 16px; min-height: 48px; font-size: 16px; font-family: var(--lc-body); background: var(--lc-card); color: var(--lc-ink); }
.lc-404-search input[type="search"]:focus { outline: none; border-color: var(--lcx-blue); box-shadow: 0 0 0 2px rgba(11, 99, 216, .30); }
.lc-tracking { background: var(--lcx-blue-soft); border: 1px solid var(--lcx-line); border-radius: var(--lcx-r-sm); padding: 16px; margin: 12px 0; }
.lc-404-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============ Demo band + founding pros (pro-SaaS rework) ============ */
.lcx-demo-band { max-width: 1120px; margin: 0 auto; padding: 12px 20px 8px; }
.lcx-demo-band-inner { position: relative; overflow: hidden; border-radius: 28px; background: var(--lc-green-deep); padding: 56px 32px; text-align: center; color: var(--lc-hero-text); }
.lcx-demo-band-inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 300px at 50% 0%, rgba(0, 113, 227, .18), transparent 60%); pointer-events: none; }
.lcx-demo-band-inner h2 { color: var(--lc-hero-text); position: relative; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 600; font-family: var(--lc-display); }
.lcx-demo-band-inner p { color: #d6d6d6; position: relative; margin: 0 auto 24px; font-size: 16px; max-width: 560px; }
.lcx-demo-band-inner .lcx-eyebrow { color: var(--lc-gold-soft); position: relative; }
.lcx-section-sub { font-size: 16px; color: var(--lc-ink-soft); margin: 0 0 8px; }
.lcx-founding p { font-size: 16px; color: var(--lc-ink-soft); max-width: 640px; margin: 0 auto 14px; }
.lcx-founding .lcx-center { margin-top: 26px; }
.lcx-section .lcx-center { margin-top: 26px; }

/* ============ Demo page (/demo/) ============ */
.lc-demo-hero { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.lc-demo-frame { border: 1px solid var(--lc-line); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .25); background: var(--lcx-surface); }
.lc-demo-frame-bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--lcx-mist); border-bottom: 1px solid var(--lc-line); }
.lc-demo-frame-bar i { width: 12px; height: 12px; border-radius: 50%; background: var(--lcx-mist-2); display: block; }
.lc-demo-frame-bar span { margin-left: 8px; font-size: 14px; color: var(--lc-ink-soft); font-weight: 600; }
.lc-demo-frame-body { padding: 0; }
.lc-demo-note { text-align: center; margin-top: 22px; }
@media (max-width: 640px) {
  .lcx-demo-band-inner { padding: 40px 22px; }
}

/* ============ Demo page mock booking page ============ */
.lc-demo-title { font-family: var(--lc-display); font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.02em; margin: 0 0 12px; }
.lc-demo-page { max-width: 680px; margin: 0 auto; padding: 34px 28px 40px; }
.lc2-price-line { min-width: 0; }
.lc2-price-line > span { min-width: 0; overflow-wrap: break-word; }
.lc2-price-line > strong { flex: none; }
.lc-demo-brand { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--lcx-line); margin-bottom: 22px; }
.lc-demo-logo { width: 54px; height: 54px; border-radius: 16px; background: #1d1d1f; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 20px; flex: none; }
.lc-demo-brand strong { font-size: 20px; display: block; }
.lc-demo-meta { font-size: 14px; color: var(--lc-ink-soft); display: block; margin-top: 2px; }
.lc-demo-badge { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: .12em; background: var(--lcx-blue-soft); color: var(--lcx-ink-2); border: 1px solid var(--lcx-line-strong); padding: 5px 10px; border-radius: 999px; }
.lc-demo-menu, .lc-demo-book, .lc-demo-reviews { background: var(--lcx-surface); border: 1px solid var(--lcx-line); border-radius: 18px; padding: 22px; margin-bottom: 18px; }
.lc-demo-menu h3, .lc-demo-book h3, .lc-demo-reviews h3 { margin: 0 0 12px; font-size: 16px; }
.lc-demo-menu-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--lcx-line); font-size: 16px; }
.lc-demo-menu-row:last-child { border-bottom: 0; }
.lc-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lc-demo-book .lc-field { margin-bottom: 12px; }
.lc-demo-book label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.lc-demo-book input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--lcx-line-strong); border-radius: 12px; padding: 11px 13px; font-size: 16px; font-family: var(--lc-body); background: var(--lcx-surface); }
.lc-demo-note h3 { font-family: var(--lc-display); font-size: 28px; margin: 34px 0 10px; }
@media (max-width: 560px) { .lc-demo-grid { grid-template-columns: 1fr; } .lc-demo-page { padding: 24px 18px 30px; } }

/* ============ v1.0.37: content pages (About / Pricing / Help / Contact) ============ */
.lc-content-page { max-width: 920px; }
.lc-content-hero { padding: 56px 0 8px; }
.lc-content-kicker { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lc-coral-ink); margin-bottom: 10px; }
.lc-content-h1 { font-size: clamp(28px, 4.4vw, 40px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 14px; font-weight: 600; font-family: var(--lc-display); color: var(--lc-ink); }
.lc-content-lede { font-size: 20px; line-height: 1.6; color: var(--lc-ink-soft); max-width: 40em; }
.lc-content-page .lc-card + .lc-card { margin-top: 22px; }
.lc-content-page h2.lc-card-title { margin-bottom: 12px; }
.lc-content-page .lc-card p, .lc-content-page .lc-card li { line-height: 1.65; }
.lc-content-page .lc-card ul { padding-left: 1.2em; }
.lc-content-page .lc-card li + li { margin-top: 8px; }
.lc-about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.lc-about-card { background: var(--lc-cream); border: 1px solid var(--lc-line-soft); border-radius: 16px; padding: 18px; }
.lc-about-card h3 { margin: 0 0 8px; font-size: 16px; font-family: var(--lc-display); }
.lc-about-card p { margin: 0; font-size: 16px; color: var(--lc-ink-soft); }
.lc-pricing-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 16px; }
.lc-pricing-table th, .lc-pricing-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--lc-line-soft); }
.lc-pricing-table th { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--lc-muted); }
.lc-pricing-table tr:last-child th, .lc-pricing-table tr:last-child td { border-bottom: none; }
.lc-pricing-note { font-size: 14px; }
.lc-pricing-cta { margin: 26px 0 6px; text-align: center; }
.lc-help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; }
.lc-help-card { background: var(--lc-cream); border: 1px solid var(--lc-line-soft); border-radius: 14px; padding: 14px 16px; }
.lc-help-card h3 { margin: 0 0 6px; font-size: 16px; }
.lc-help-card p { margin: 0; font-size: 16px; color: var(--lc-ink-soft); }
.lc-contact-list { list-style: none; padding: 0; margin: 0 0 14px; }
.lc-contact-list li { padding: 10px 0; border-bottom: 1px solid var(--lc-line-soft); }
.lc-contact-list li:last-child { border-bottom: none; }
.lcx-contact-ok { background: var(--lc-sage-tint); border: 1px solid #b9dcc2; color: var(--lc-sage-deep); border-radius: 14px; padding: 14px 16px; font-weight: 600; }
.lcx-contact-err { background: var(--lc-danger-bg); border: 1px solid var(--lc-line); color: #A03A2B; border-radius: var(--lcx-r-md); padding: 16px; font-weight: 600; }

/* v1.0.37: CSS starter checklist box (replaces the ⬜ emoji glyph).
   v1.0.39: renamed from .lc-check -> .lc-check-tick — the old name collided
   with the agreement-checkbox label class (display:flex) and broke it on mobile. */
.lc-check-tick { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--lc-gold); border-radius: 6px; background: var(--lcx-surface); vertical-align: -3px; margin-right: 8px; }
.lc-check-tick.is-done { background: var(--lc-sage-deep); border-color: var(--lc-sage-deep); position: relative; }
.lc-check-tick.is-done::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* v1.0.37: mobile hardening for landing CTAs */
@media (max-width: 640px) {
    .lcx-final-card { padding: 44px 20px; border-radius: 22px; }
    .lc-about-grid, .lc-help-grid { grid-template-columns: 1fr; }
    .lc-pricing-table th, .lc-pricing-table td { padding: 10px 6px; font-size: 14px; }
    .lcx-nav-mobile { max-height: calc(100vh - 70px); overflow-y: auto; }
}

/* ============ v1.0.38: hamburger header (all viewports) ============ */
.lcx-nav-burger .lcx-nav-toggle { display: block; }
.lcx-nav-burger .lcx-nav-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.lcx-nav-burger .lcx-nav-inner { gap: 12px; }
.lcx-nav-burger .lcx-nav-mobile { position: absolute; top: 100%; left: 0; right: 0; max-width: 1120px; margin: 0 auto; border: 1px solid var(--lc-line-soft); border-top: none; border-radius: 0 0 20px 20px; box-shadow: 0 30px 50px -30px rgba(0,0,0,.35); padding: 8px 20px 20px; max-height: calc(100vh - 80px); overflow-y: auto; }
.lcx-nav-burger { position: sticky; }
.lcx-nav-menu-btns { display: flex; gap: 12px; padding: 16px 8px 4px; }
.lcx-nav-menu-btns .lcx-menu-btn { flex: 1; text-align: center; border-bottom: none !important; padding: 13px 10px !important; font-size: 16px !important; }

/* ============ v1.0.38: how-it-works steps ============ */
.lc-steps-list { list-style: none; counter-reset: lc-step; padding: 0; margin: 18px 0 4px; }
.lc-steps-list li { counter-increment: lc-step; position: relative; padding: 0 0 20px 52px; line-height: 1.65; }
.lc-steps-list li:last-child { padding-bottom: 2px; }
.lc-steps-list li::before { content: counter(lc-step); position: absolute; left: 0; top: 2px; width: 34px; height: 34px; border-radius: 50%; background: var(--lc-green); color: #fff; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.lc-steps-list li strong { color: var(--lc-ink); }

/* ============ v1.0.38: blog listing ============ */
.lc-blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 22px; }
.lc-blog-card { display: flex; flex-direction: column; background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: var(--lcx-r-md); overflow: hidden; text-decoration: none; transition: transform var(--lcx-dur) var(--lcx-ease), box-shadow var(--lcx-dur) var(--lcx-ease); }
.lc-blog-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(0,0,0,.35); }
.lc-blog-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lc-cream-2); }
.lc-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-blog-body { display: flex; flex-direction: column; gap: 6px; padding: 18px; }
.lc-blog-date { font-size: 14px; color: var(--lc-muted); text-transform: uppercase; letter-spacing: .08em; }
.lc-blog-title { font-family: var(--lc-display); font-size: 20px; font-weight: 600; color: var(--lc-ink); line-height: 1.3; }
.lc-blog-excerpt { font-size: 16px; color: var(--lc-ink-soft); line-height: 1.6; }
.lc-blog-more { font-size: 14px; font-weight: 600; color: var(--lc-coral-ink); margin-top: 4px; }

@media (max-width: 640px) {
    .lc-blog-grid { grid-template-columns: 1fr; }
    .lcx-nav-burger .lcx-nav-mobile { border-radius: 0 0 16px 16px; padding: 6px 14px 16px; }
    .lcx-nav-menu-btns { flex-direction: column; }
}

/* v1.0.39: agreement-checkbox rows must stay full-width flex rows on mobile
   (never squeezed), and the ZIP grid drops to 2 roomy columns. */
.lc-check { width: 100%; box-sizing: border-box; }
.lc-check input[type="checkbox"] { flex: none; }
@media (max-width: 640px) {
    .lc-zip-grid { grid-template-columns: repeat(2, 1fr); }
}

/* v1.0.40: mobile menu auth buttons — generous spacing between stacked pills */
@media (max-width: 640px) {
    .lcx-nav-menu-btns { gap: 16px; padding: 22px 12px 18px; }
    .lcx-nav-menu-btns .lcx-menu-btn { padding: 15px 10px !important; }
}

/* ============ v1.0.43: full-screen mobile menu + roomier auth buttons ============ */
@media (max-width: 640px) {
    /* The hamburger panel becomes a full-viewport takeover — no more
       homepage bleeding through below a floating card. min-height is
       viewport minus a conservative header estimate so the panel always
       reaches the bottom edge (a few px of overshoot is invisible). */
    .lcx-nav-burger .lcx-nav-mobile {
        left: 0; right: 0; max-width: none; margin: 0;
        border: none; border-top: 1px solid var(--lc-line-soft);
        border-radius: 0; box-shadow: none;
        padding: 10px 20px 48px;
        min-height: calc(100vh - 48px);
        min-height: calc(100dvh - 48px);
        max-height: none;
        overflow-y: auto;
        background: var(--lcx-surface);
    }
    .lc-landing .lcx-nav-burger .lcx-nav-mobile { background: var(--lcx-surface); border-top: 1px solid var(--lc-line-soft); }
    /* Generous breathing room between the stacked Log in / Sign up pills. */
    .lcx-nav-menu-btns { gap: 28px; padding: 30px 12px 28px; }
    /* Lock the page behind the open menu. */
    body.lcx-menu-open { overflow: hidden; }
}

/* v1.0.43: CTA card buttons never touch or overlap (their shadows bled into
   each other when the buttons wrapped). */
.lc-cta-card p { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 640px) {
    .lc-cta-card p { flex-direction: column; align-items: stretch; gap: 16px; }
    .lc-cta-card .lc-btn { width: 100%; box-sizing: border-box; }
}

/* v1.0.46: activation wizard, live analytics, push settings, trust. */
.lc-aw { border-left: 4px solid var(--lcx-blue); }
.lc-aw-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.lc-aw-body { color: #424245; font-size: 14px; }
.lc-aw-steps { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 6px; }
.lc-aw-step { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--lc-line-soft); border-radius: var(--lcx-r-sm); background: var(--lc-card); text-decoration: none; color: inherit; transition: border-color var(--lcx-dur-fast) var(--lcx-ease), transform var(--lcx-dur-fast) var(--lcx-ease); }
.lc-aw-step:hover { border-color: var(--lcx-blue); transform: translateY(-1px); }
.lc-aw-step.lc-done { opacity: .75; background: #e6f4ea; border-color: #b9dcc2; }
.lc-aw-step.lc-done:hover { transform: none; }
.lc-aw-step .lc-btn { flex-shrink: 0; margin-left: auto; margin-top: 0; }
.lc-card .button, .lc-wrap .button { white-space: nowrap; }
.lc-aw-num { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--lcx-blue); color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.lc-aw-step.lc-done .lc-aw-num { background: #248a3d; }
.lc-aw-step strong { display: block; font-size: 16px; }
.lc-aw-step .lc-muted { font-size: 14px; }
.lc-aw-step .lc-aw-go { margin-left: auto; color: var(--lcx-blue); font-weight: 600; white-space: nowrap; font-size: 14px; }
.lc-aw-celebrate { text-align: center; padding: 18px 10px 6px; }
.lc-aw-celebrate .lc-aw-party { font-size: 40px; }
.lc-aw-celebrate h3 { margin: 8px 0 4px; }
.lc-checklist-bar { height: 8px; border-radius: 99px; background: var(--lcx-mist-2); overflow: hidden; margin: 10px 0 2px; }
.lc-checklist-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--lc-coral), var(--lc-coral-dark)); border-radius: 99px; transition: width var(--lcx-dur-slow) var(--lcx-ease); }
.lc-checklist-dismiss { background: none; border: none; color: var(--lcx-ink-3); cursor: pointer; font-size: 14px; text-decoration: underline; padding: 0; }

/* Live analytics. */
.lc-an-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lc-an-tabs { display: flex; gap: 6px; background: var(--lcx-mist-2); border-radius: 99px; padding: 3px; }
.lc-an-tab { padding: 6px 14px; border-radius: 99px; font-size: 14px; font-weight: 600; color: #424245; text-decoration: none; }
.lc-an-tab.is-on { background: var(--lcx-surface); color: var(--lcx-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lc-an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 14px 0; }
.lc-an-stat { background: var(--lcx-surface); border: 1px solid var(--lcx-line); border-radius: 12px; padding: 12px 10px; text-align: center; }
.lc-an-num { display: block; font-size: 20px; font-weight: 600; color: var(--lcx-ink); }
.lc-an-label { font-size: 12px; color: var(--lcx-ink-3); }
.lc-an-chart { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding: 8px 4px 0; border-top: 1px solid var(--lcx-line); }
.lc-an-bar { flex: 1; min-width: 3px; background: var(--lcx-blue); border-radius: 3px 3px 0 0; }
.lc-an-foot { font-size: 12px; color: var(--lcx-ink-3); margin: 8px 0 0; }

/* Push settings. */
.lc-push-settings p { margin: 6px 0; }
.lc-push-status { font-size: 14px; color: #424245; min-height: 18px; }


/* Blackout dates in Booking Controls. */
.lc-blackout-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lc-blackout-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--lcx-blue-soft); border: 1px solid var(--lcx-line-strong); border-radius: 99px; padding: 4px 6px 4px 12px; font-size: 14px; }
.lc-blackout-tag button { border: none; background: var(--lcx-blue); color: #fff; border-radius: 50%; width: 20px; height: 20px; line-height: 1; cursor: pointer; font-size: 12px; }

@media (max-width: 480px) {
    .lc-aw-head { flex-direction: column; align-items: flex-start; }
    .lc-an-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- v1.0.47: collect at pickup + instant payout ---------------- */
.lc-collect { background: var(--lcx-mist); border: 1px solid var(--lcx-line); border-radius: 12px; padding: 1rem; margin: 0.9rem 0; }
.lc-collect-title { margin: 0 0 0.6rem; font-size: 16px; }
.lc-collect-waiting { font-weight: 600; color: var(--lcx-ink); margin: 0 0 0.5rem; }
.lc-collect-qrwrap { text-align: center; margin: 0.5rem 0 0.9rem; }
.lc-collect-qr { display: inline-block; width: 192px; height: 192px; border-radius: 8px; background: #fff; padding: 6px; border: 1px solid var(--lcx-line); }
.lc-collect-qr img, .lc-collect-qr canvas, .lc-collect-qr table { width: 180px !important; height: 180px !important; }
.lc-collect-totalrow { display: flex; align-items: center; gap: 0.15rem; }
.lc-collect-dollar { font-weight: 600; font-size: 16px; }
.lc-collect-totalrow input { flex: 1; font-size: 20px; font-weight: 600; padding: 0.55rem 0.6rem; border: 1px solid var(--lcx-line-strong); border-radius: 8px; }
.lc-collect-hint { margin: 0.4rem 0; font-size: 14px; }
.lc-collect-calc { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.lc-collect-calc input { width: 5.2rem; padding: 0.45rem 0.5rem; border: 1px solid var(--lcx-line-strong); border-radius: 8px; }
.lc-collect-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.lc-instant { border-left: 4px solid var(--lcx-blue); }
@media (max-width: 480px) {
    .lc-collect-actions .lc-btn { flex: 1 1 100%; }
}

/* v1.0.55: booking preferences + frequency */
.lc-prefs { background: var(--lcx-surface); border: 1px solid var(--lcx-line); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.lc-prefs-title { margin: 0 0 4px; font-size: 16px; }
.lc-freq { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lc-freq-opt { flex: 1 1 0; min-width: 104px; position: relative; }
.lc-freq-opt input { position: absolute; opacity: 0; pointer-events: none; }
.lc-freq-opt span { display: block; text-align: center; padding: 10px 8px; border-radius: var(--lcx-r-sm); border: 1px solid var(--lc-line); background: var(--lc-card); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color var(--lcx-dur-fast) var(--lcx-ease), background var(--lcx-dur-fast) var(--lcx-ease), color var(--lcx-dur-fast) var(--lcx-ease); }
.lc-freq-opt input:checked + span { background: var(--lc-pine, #1d1d1f); border-color: var(--lc-pine, #1d1d1f); color: #fff; }
.lc-freq-opt input:focus-visible + span { outline: 2px solid var(--lc-pine, #1d1d1f); outline-offset: 2px; }
.lc-freq-weekday { margin-top: 10px; }
.lc-badge.lc-frequency { background: #e6f4ea; color: #1d6f34; }
/* Order-card preference summary (pro dashboard) */
.lc-prefs-box { background: var(--lcx-mist); border: 1px solid var(--lcx-line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.lc-prefs-box-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: #6e6e73; }
.lc-prefs-list { margin: 6px 0 0; }
.lc-prefs-row { display: flex; gap: 8px; font-size: 14px; padding: 2px 0; }
.lc-prefs-row dt { font-weight: 600; color: #6e6e73; min-width: 88px; }
.lc-prefs-row dd { margin: 0; font-weight: 600; }

/* ============ v1.0.57: mobile menu auth buttons — black/white pair ============ */
/* Scoped to the hamburger panel only; brand CTAs elsewhere keep their coral. */
.lcx-nav-menu-btns .lc-btn-outline.lcx-menu-btn {
    background: var(--lcx-surface) !important;
    border-color: #ffffff !important;
    color: #0b0b0c !important;
    box-shadow: none !important;
}
.lcx-nav-menu-btns .lc-btn-outline.lcx-menu-btn:hover {
    background: var(--lcx-mist-2) !important;
    border-color: var(--lcx-line) !important;
    color: #0b0b0c !important;
    box-shadow: none !important;
}
.lcx-nav-menu-btns .lc-btn-primary.lcx-menu-btn {
    background: #0b0b0c !important;
    border-color: #0b0b0c !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.lcx-nav-menu-btns .lc-btn-primary.lcx-menu-btn:hover {
    background: #2b2b2d !important;
    border-color: #2b2b2d !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* ============ v1.0.58 money features (lc-money-*) ============ */
.lc-money-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 600; color: #0066cc; margin: 0 0 .35rem; }
.lc-money-hero { background: var(--lcx-ink); color: #ffffff; border: none; }
.lc-money-hero .lc-money-kicker { color: rgba(255, 255, 255, .65); }
.lc-money-hero-title { color: #ffffff; margin: .25rem 0 .75rem; font-size: 20px; line-height: 1.4; }
.lc-money-hero-top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.lc-money-hero-num { text-align: right; }
.lc-money-hero-mtd { display: block; font-size: 28px; font-weight: 600; color: #fff; }
.lc-money-hero .lc-muted { color: #aeaeb2; }
.lc-money-hero .lc-money-fine { color: #aeaeb2; }
.lc-money-progress { height: 10px; background: rgba(0,0,0,.12); border-radius: 999px; overflow: hidden; margin: .5rem 0; }
.lc-money-hero .lc-money-progress { background: rgba(255,255,255,.18); }
.lc-money-progress-fill { height: 100%; background: linear-gradient(90deg, var(--lc-sage), var(--lc-sage-deep)); border-radius: 999px; transition: width var(--lcx-dur-slow) var(--lcx-ease); }
.lc-money-fine { font-size: 14px; margin: .25rem 0 0; }
.lc-money-goal-form { display: flex; gap: .5rem; align-items: center; margin-top: .9rem; flex-wrap: wrap; }
.lc-money-card { margin-top: 1rem; }
.lc-money-steps { list-style: none; margin: .75rem 0; padding: 0; }
.lc-money-steps li { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--lcx-line); }
.lc-money-steps li:last-child { border-bottom: none; }
.lc-money-step-tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--lcx-line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #248a3d; flex: none; }
.lc-money-steps li.is-done .lc-money-step-tick { background: #248a3d; border-color: #248a3d; color: #fff; }
.lc-money-steps li.is-done .lc-money-step-title { text-decoration: line-through; color: var(--lcx-ink-3); }
.lc-money-step-title { flex: 1; }
.lc-money-photo-form { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--lcx-line); }
.lc-money-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.lc-money-matrix-day { border: 1px solid var(--lcx-line); border-radius: 12px; padding: .5rem; }
.lc-money-matrix-day strong { display: block; margin-bottom: .25rem; font-size: 14px; }
.lc-money-coach { background: var(--lcx-mist); border: 1px solid var(--lcx-line); border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: 1rem; }
.lc-money-coach-line { margin: 0 0 .6rem; }
.lc-money-table { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: 14px; }
.lc-money-table th, .lc-money-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--lcx-line); }
.lc-money-alert { background: #fdecea; border-left: 4px solid #d70015; padding: .6rem .8rem; border-radius: 0 10px 10px 0; margin: .6rem 0 0; }
.lc-money-radar-list { list-style: none; margin: .5rem 0; padding: 0; }
.lc-money-radar-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--lcx-line); }
.lc-money-radar-list li:last-child { border-bottom: none; }
.lc-money-facts { margin: .5rem 0; padding-left: 1.1rem; }
.lc-money-facts li { margin: .25rem 0; }
.lc-money-linkrow { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.lc-money-linkinput { flex: 1; min-width: 12rem; font-size: 14px; }
@media (max-width: 640px) {
    .lc-money-hero-mtd { font-size: 28px; }
    .lc-money-hero-title { font-size: 16px; }
    .lc-money-radar-list li { flex-direction: column; align-items: flex-start; }
}

/* ============ v1.0.62: landing gallery ============ */
.lcx-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; margin: 36px auto 0; padding: 0 32px; }
.lcx-gallery-item { margin: 0; }
.lcx-gallery-item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; display: block; box-shadow: var(--lc-shadow-warm); }
.lcx-gallery-item figcaption { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--lc-ink-soft); text-align: center; }
@media (max-width: 720px) { .lcx-gallery-grid { grid-template-columns: 1fr; padding: 0 22px; } }

/* ============ v1.0.62: pricing photo ============ */
.lcx-price-photo { margin: 0 0 22px; }
.lcx-price-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; display: block; box-shadow: 0 24px 60px -24px rgba(0,0,0,.55); }

/* ============ v1.0.62: earnings calculator ============ */
.lcx-calc-card { max-width: 640px; margin: 36px auto 0; background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: 24px; padding: 32px; box-shadow: var(--lc-shadow-lift); }
.lcx-calc-row { margin-bottom: 24px; }
.lcx-calc-row label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 16px; color: var(--lc-ink); margin-bottom: 10px; }
.lcx-calc-row label strong { font-size: 20px; color: var(--lc-coral-ink); }
.lcx-calc-row input[type="range"] { width: 100%; accent-color: var(--lc-coral); height: 32px; }
.lcx-calc-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 16px; }
.lcx-calc-result { background: var(--lc-cream-2); border-radius: 16px; padding: 16px 12px; text-align: center; }
.lcx-calc-result span { display: block; font-size: 12px; color: var(--lc-muted); margin-bottom: 6px; }
.lcx-calc-result strong { font-size: 28px; letter-spacing: -0.02em; color: var(--lc-ink); }
.lcx-calc-cost { color: var(--lc-muted) !important; font-size: 20px !important; }
.lcx-calc-net { background: var(--lc-sage-tint); }
.lcx-calc-net strong { color: var(--lc-sage-deep); font-size: 28px !important; }
.lcx-calc-note { font-size: 14px; color: var(--lc-muted); text-align: center; margin: 0 0 20px; }
@media (max-width: 560px) { .lcx-calc-results { grid-template-columns: 1fr; } .lcx-calc-card { padding: 24px 20px; } }

/* ============ v1.0.62: comparison table ============ */
.lcx-compare-table-wrap { max-width: 880px; margin: 36px auto 0; padding: 0 22px; overflow-x: auto; }
.lcx-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: 20px; overflow: hidden; box-shadow: var(--lc-shadow-warm); font-size: 16px; }
.lcx-compare-table th, .lcx-compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--lc-line-soft); }
.lcx-compare-table thead th { background: var(--lc-green); color: var(--lc-hero-text); font-size: 14px; }
.lcx-compare-table thead th.lcx-compare-hl { background: var(--lc-coral); color: #fff; }
.lcx-compare-table tbody th { font-weight: 600; color: var(--lc-ink-soft); background: var(--lc-cream-2); }
.lcx-compare-table tbody tr:last-child th, .lcx-compare-table tbody tr:last-child td { border-bottom: none; }
.lcx-compare-table .lcx-compare-hl { background: var(--lc-coral-tint); font-weight: 600; color: var(--lc-ink); }

/* ============ v1.0.62: demo buttons ============ */
.lcx-demo-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }
.lcx-demo-note { font-size: 14px !important; color: var(--lcx-ink-3) !important; margin: 14px auto 0 !important; }

/* ============ v1.0.62: sticky mobile CTA ============ */
.lcx-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--lc-line); transform: translateY(110%); transition: transform var(--lcx-dur-slow) var(--lcx-ease); display: none; }
.lcx-sticky-cta-show { transform: translateY(0); }
.lcx-sticky-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 560px; margin: 0 auto; }
.lcx-sticky-cta-text strong { display: block; font-size: 14px; color: var(--lc-ink); }
.lcx-sticky-cta-text span { font-size: 12px; color: var(--lc-muted); }
@media (max-width: 720px) { .lcx-sticky-cta { display: block; } }

/* ============ v1.0.62: social proof toasts (real data only) ============ */
.lc-toasts { position: fixed; left: 16px; bottom: 16px; z-index: 70; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.lc-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: var(--lcx-r-md); padding: 12px 16px; box-shadow: var(--lc-shadow-lift); max-width: 320px; opacity: 0; transform: translateY(16px); transition: opacity var(--lcx-dur-slow) var(--lcx-ease), transform var(--lcx-dur-slow) var(--lcx-ease); }
.lc-toast-show { opacity: 1; transform: translateY(0); }
.lc-toast-coin { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--lc-sage-tint); color: var(--lc-sage-deep); font-weight: 600; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.lc-toast-body { flex: 1; min-width: 0; }
.lc-toast-body strong { display: block; font-size: 14px; color: var(--lc-ink); }
.lc-toast-body span { font-size: 12px; color: var(--lc-muted); }
.lc-toast-close { background: none; border: none; font-size: 20px; color: var(--lc-muted); cursor: pointer; padding: 2px 6px; line-height: 1; }
@media (max-width: 720px) { .lc-toasts { bottom: 76px; } }

/* ============ v1.0.62: premium activation block ============ */
.lc-activate-premium-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.lc-activate-premium-media { position: relative; }
.lc-activate-premium-media img { width: 100%; height: auto; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: 20px; display: block; box-shadow: var(--lc-shadow-warm); }
.lc-activate-price-hero { position: absolute; left: 16px; right: 16px; bottom: 16px; background: rgba(0, 0, 0, .92); backdrop-filter: blur(8px); border-radius: 16px; padding: 18px; color: var(--lc-hero-text); text-align: center; }
.lc-activate-price-label { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lc-gold-soft); margin-bottom: 6px; }
.lc-activate-price-big { font-family: var(--lc-display); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.lc-activate-price-big sup { font-size: 28px; }
.lc-activate-currency { font-size: 28px; vertical-align: top; }
.lc-activate-per { font-size: 20px; color: #c7c7cc; font-family: var(--lc-body); font-weight: 600; }
.lc-activate-price-sub { margin: 8px 0 0; font-size: 14px; color: #d6d6d6; }
.lc-activate-trust { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--lc-ink-soft); }
@media (max-width: 760px) { .lc-activate-premium-grid { grid-template-columns: 1fr; } .lc-activate-premium-media img { aspect-ratio: 16 / 9; } }

/* ============ v1.0.62: dashboard demo ============ */
.lc-dashdemo { max-width: 960px; margin: 0 auto; padding: 32px 22px 60px; }
.lc-dashdemo-banner { text-align: center; margin-bottom: 28px; }
.lc-dashdemo-pill { display: inline-block; background: var(--lc-honey-bg); border: 1px solid var(--lc-honey-line); color: var(--lc-honey-ink); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 7px 16px; margin-bottom: 14px; }
.lc-dashdemo-banner h2 { font-family: var(--lc-display); font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; margin: 0 0 10px; color: var(--lc-ink); }
.lc-dashdemo-banner p { max-width: 620px; margin: 0 auto; }
.lc-dashdemo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.lc-dashdemo-card { position: relative; background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: 20px; padding: 22px; box-shadow: var(--lc-shadow-warm); }
.lc-dashdemo-wide { margin-bottom: 28px; }
.lc-dashdemo-label { position: absolute; top: 14px; right: 14px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lc-honey-ink); background: var(--lc-honey-bg); border: 1px solid var(--lc-honey-line); border-radius: 999px; padding: 3px 10px; }
.lc-dashdemo-kicker { font-size: 14px; color: var(--lc-muted); margin: 0 0 8px; }
.lc-dashdemo-big { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; color: var(--lc-ink); margin: 0 0 6px; }
.lc-dashdemo-sub { font-size: 14px; color: var(--lc-ink-soft); margin: 0; }
.lc-dashdemo-bar { height: 10px; background: var(--lc-line-soft); border-radius: 999px; overflow: hidden; margin: 12px 0; }
.lc-dashdemo-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--lc-sage), var(--lc-sage-deep)); border-radius: 999px; }
.lc-dashdemo-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.lc-dashdemo-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--lc-muted); padding: 8px 10px; border-bottom: 1px solid var(--lc-line-soft); }
.lc-dashdemo-table td { padding: 10px; border-bottom: 1px solid var(--lc-line-soft); }
.lc-dashdemo-table tr:last-child td { border-bottom: none; }
.lc-dashdemo-status { display: inline-block; font-size: 12px; font-weight: 600; color: var(--lc-sage-deep); background: var(--lc-sage-tint); border-radius: 999px; padding: 3px 10px; }
.lc-dashdemo-status-active { color: var(--lc-coral-ink); background: var(--lc-coral-tint); }
.lc-dashdemo-cta { text-align: center; background: var(--lc-green); border-radius: 24px; padding: 40px 28px; color: var(--lc-hero-text); }
.lc-dashdemo-cta h3 { font-family: var(--lc-display); font-size: 28px; margin: 0 0 8px; color: var(--lc-hero-text); }
.lc-dashdemo-cta .lc-muted { color: #c7c7cc; }
@media (max-width: 720px) { .lc-dashdemo-grid { grid-template-columns: 1fr; } }

/* ============ v1.0.63: comparison table → stacked cards on mobile ============ */
@media (max-width: 720px) {
  .lcx-compare-table-wrap { overflow: visible; }
  .lcx-compare-table thead { display: none; }
  .lcx-compare-table, .lcx-compare-table tbody { display: block; background: none; border: none; box-shadow: none; }
  .lcx-compare-table tbody tr { display: block; background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: 18px; margin-bottom: 14px; overflow: hidden; box-shadow: var(--lc-shadow-warm); }
  .lcx-compare-table tbody th { display: block; background: var(--lc-green); color: var(--lc-hero-text); font-size: 16px; padding: 12px 16px; border-bottom: none; }
  .lcx-compare-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--lc-line-soft); font-size: 14px; text-align: right; }
  .lcx-compare-table tbody td:last-child { border-bottom: none; }
  .lcx-compare-table tbody td::before { content: attr(data-label); font-weight: 600; font-size: 14px; color: var(--lc-muted); text-align: left; flex-shrink: 0; }
  .lcx-compare-table tbody td.lcx-compare-hl { background: var(--lc-coral-tint); }
  .lcx-compare-table tbody td.lcx-compare-hl::before { color: var(--lc-coral-ink); }
}

/* ============ v1.0.63: premium pricing page ============ */
.lc-price-hero-new { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: center; background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: 24px; padding: 28px; box-shadow: var(--lc-shadow-warm); margin-bottom: 22px; overflow: hidden; }
.lc-price-hero-media { position: relative; border-radius: 18px; overflow: hidden; }
.lc-price-hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.lc-price-hero-badge { position: absolute; top: 14px; left: 14px; background: var(--lc-green); color: var(--lc-hero-text); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.lc-price-hero-kicker { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lc-coral); margin: 0 0 10px; }
.lc-price-hero-amount { display: flex; align-items: baseline; gap: 6px; margin: 0 0 12px; }
.lc-price-hero-amount strong { font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--lc-ink); }
.lc-price-hero-amount span { font-size: 20px; color: var(--lc-muted); font-weight: 600; }
.lc-price-hero-sub { font-size: 16px; color: var(--lc-muted); margin: 0 0 18px; max-width: 40ch; }
.lc-price-hero-cta { margin: 0 0 16px; }
.lc-included-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lc-included-item { display: flex; gap: 12px; align-items: flex-start; background: var(--lc-coral-tint); border: 1px solid var(--lc-line-soft); border-radius: var(--lcx-r-md); padding: 16px; font-size: 14px; line-height: 1.45; }
.lc-included-icon { flex-shrink: 0; color: var(--lc-sage-deep); }
.lc-included-icon .lc-icon { width: 22px; height: 22px; display: block; }
@media (max-width: 900px) { .lc-included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .lc-price-hero-new { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
  .lc-price-hero-amount strong { font-size: 40px; }
  .lc-included-grid { grid-template-columns: 1fr; }
}

/* ============ v1.0.65: photo strip inside final CTA ============ */
.lcx-final-photos { display: flex; gap: 14px; justify-content: center; margin-bottom: 22px; }
.lcx-final-photos img { width: 104px; height: 104px; object-fit: cover; border-radius: 26px; border: 3px solid rgba(255,255,255,0.28); box-shadow: 0 8px 22px rgba(0,0,0,0.25); }
@media (max-width: 480px) {
  .lcx-final-photos { gap: 10px; }
  .lcx-final-photos img { width: 88px; height: 88px; border-radius: 22px; }
}

/* ============ v1.0.66: tighter hero top + side-by-side hero buttons on mobile ============ */
@media (max-width: 640px) {
  .lcx-hero-inner { padding-top: 56px; }
  .lcx-hero .lcx-hero-ctas { flex-wrap: nowrap; gap: 10px; }
  .lcx-hero .lcx-hero-ctas .lc-btn { flex: 1 1 0; min-width: 0; padding: 14px 6px; font-size: 16px; text-align: center; }
}

/* ============ v1.0.67: premium equal-height hero buttons on mobile ============ */
@media (max-width: 640px) {
  .lcx-hero .lcx-hero-ctas { align-items: stretch; }
  .lcx-hero .lcx-hero-ctas .lc-btn {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 16px 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
    line-height: 1.3; text-align: center;
    box-shadow: 0 10px 26px rgba(0,0,0,0.22);
  }
}

/* ============ v1.0.78: premium wash-preference controls (iOS-grouped-card aesthetic) ============ */
.lc-pref-group { background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: var(--lcx-r-md); overflow: hidden; }
.lc-pref-item { display: block; padding: 13px 16px; margin: 0; }
.lc-pref-item + .lc-pref-item { border-top: 1px solid var(--lc-line-soft); }
.lc-pref-lab { display: block; font-size: 14px; font-weight: 600; color: #6E6E73; letter-spacing: .01em; margin-bottom: 7px; }
.lc-pref-select {
  appearance: none; -webkit-appearance: none; width: 100%; box-sizing: border-box;
  border: 1px solid var(--lc-line-soft); border-radius: var(--lcx-r-sm); font-family: inherit;
  background: var(--lcx-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236E6E73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
  padding: 12px 38px 12px 16px; min-height: 48px; font-size: 16px; color: var(--lc-ink); cursor: pointer;
  transition: border-color var(--lcx-dur-fast) var(--lcx-ease), box-shadow var(--lcx-dur-fast) var(--lcx-ease);
}
.lc-pref-select:focus { outline: none; border-color: var(--lcx-blue); box-shadow: 0 0 0 2px rgba(11, 99, 216, .30); }
.lc-pref-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.lc-pref-toggle-lab { font-size: 16px; font-weight: 500; color: var(--lcx-ink); }
.lc-ptoggle { position: relative; flex: none; width: 51px; height: 31px; display: inline-block; }
.lc-ptoggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lc-ptoggle-track { position: absolute; inset: 0; border-radius: 999px; background: var(--lc-line-soft); transition: background-color var(--lcx-dur) var(--lcx-ease); }
.lc-ptoggle-thumb { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: var(--lcx-shadow-sm); transition: transform var(--lcx-dur) var(--lcx-ease); }
.lc-ptoggle input:checked + .lc-ptoggle-track { background: var(--lc-coral); }
.lc-ptoggle input:checked + .lc-ptoggle-track .lc-ptoggle-thumb { transform: translateX(20px); }
.lc-ptoggle input:focus-visible + .lc-ptoggle-track { outline: 2px solid var(--lc-coral); outline-offset: 2px; }
.lc-pref-textarea {
  width: 100%; box-sizing: border-box; font-family: inherit;
  border: 1px solid var(--lc-line-soft); border-radius: var(--lcx-r-sm); background: var(--lc-card);
  padding: 12px 16px; font-size: 16px; color: var(--lc-ink); resize: vertical; min-height: 74px;
  transition: border-color var(--lcx-dur-fast) var(--lcx-ease), box-shadow var(--lcx-dur-fast) var(--lcx-ease);
}
.lc-pref-textarea::placeholder { color: #86868b; }
.lc-pref-textarea:focus { outline: none; border-color: var(--lcx-blue); box-shadow: 0 0 0 2px rgba(11, 99, 216, .30); }

/* ============ v1.0.77: demo service-speed picker — Apple-grade selectable cards ============ */
.lc-speed { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.lc-speed-opt {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: var(--lc-card); border: 1px solid var(--lc-line-soft); border-radius: var(--lcx-r-md);
  padding: 14px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--lcx-dur-fast) var(--lcx-ease), background-color var(--lcx-dur-fast) var(--lcx-ease), box-shadow var(--lcx-dur-fast) var(--lcx-ease), transform var(--lcx-dur-fast) var(--lcx-ease);
}
.lc-speed-opt:active { transform: scale(.98); }
.lc-speed-opt input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.lc-speed-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--lcx-line-strong); background: var(--lcx-surface);
  display: grid; place-items: center;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.lc-speed-check::after {
  content: ""; width: 11px; height: 11px; opacity: 0; transform: scale(.4);
  transition: opacity .18s ease, transform .18s ease;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.5 4.2 8.5 11 1.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lc-speed-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lc-speed-text strong { font-size: 16px; font-weight: 600; color: var(--lcx-ink); letter-spacing: -0.01em; }
.lc-speed-text small { font-size: 14px; font-weight: 400; color: #6E6E73; }
.lc-speed-opt:has(input:checked) {
  border-color: var(--lc-coral); background: var(--lc-coral-tint);
  box-shadow: 0 0 0 1px var(--lc-coral);
}
.lc-speed-opt:has(input:checked) .lc-speed-check { background: var(--lc-coral); border-color: var(--lc-coral); transform: scale(1.05); }
.lc-speed-opt:has(input:checked) .lc-speed-check::after { opacity: 1; transform: scale(1); }
.lc-speed-opt:has(input:focus-visible) { outline: 2px solid var(--lc-coral); outline-offset: 2px; }
@media (max-width: 480px) {
  .lc-speed { grid-template-columns: 1fr; }
}

/* ============ v1.0.68: demo frame full-bleed on mobile (no tan gutters) ============ */
@media (max-width: 640px) {
  .lc-demo-frame { margin-left: -18px; margin-right: -18px; border-radius: 0; border-left: none; border-right: none; }
}

/* ============ v1.0.81: hero CTA hierarchy — big Start button, small How-it-works ============ */
.lcx-hero .lcx-hero-ctas .lc-btn-hero-main { padding: 18px 46px; font-size: 20px; }
.lcx-hero .lcx-hero-ctas .lc-btn-hero-sub { padding: 10px 22px; font-size: 14px; align-self: center; }
@media (max-width: 640px) {
  .lcx-hero .lcx-hero-ctas .lc-btn-hero-main {
    flex: 1.7 1 0; min-width: 0;
    font-size: 16px; padding: 16px 18px;
  }
  .lcx-hero .lcx-hero-ctas .lc-btn-hero-sub {
    flex: 0.7 1 0; min-width: 0;
    font-size: 14px; padding: 12px 8px;
  }
}

/* ============ v1.0.82: hero photo sits directly under the headline ============ */
.lcx-hero-photo { margin: 32px 0 36px; }

/* ============ v1.0.83: smaller hero title so CTAs fit comfortably ============ */
.lcx-hero h1 { font-size: clamp(28px, 6vw, 40px); }

/* ============ v1.0.84: compact mobile hero — all 5 hero blocks fit one screen, no scroll ============ */
@media (max-width: 640px) {
  .lcx-hero-inner { padding-top: 56px; padding-bottom: 30px; }
  .lcx-pills { margin-bottom: 14px; }
  .lcx-pill { font-size: 12px; padding: 7px 14px; }
  .lcx-hero h1 { font-size: 28px; line-height: 1.08; margin-bottom: 0; }
  .lcx-hero-photo { margin: 16px 0; }
  .lcx-hero-photo img { aspect-ratio: 4 / 5; max-height: none; border-radius: 18px; }
  .lcx-hero-sub { font-size: 16px; line-height: 1.5; margin-bottom: 18px; }
  .lcx-hero .lcx-hero-ctas { margin-bottom: 18px; }
  .lcx-hero-trust { gap: 8px 18px; margin-bottom: 0; }
  .lcx-hero-trust li { font-size: 14px; gap: 7px; }
  .lcx-hero-trust li::before { width: 19px; height: 19px; font-size: 12px; }
}

/* ============ v1.0.89: smaller mobile hero photo so CTAs show without scrolling ============ */
@media (max-width: 640px) {
  .lcx-hero-photo { margin: 14px 0; }
  .lcx-hero-photo img { aspect-ratio: 16 / 10; max-height: 170px; border-radius: 18px; }
}

/* ============ v1.0.90: balanced mobile hero photo — clean crop, CTAs still above the fold ============ */
@media (max-width: 640px) {
  .lcx-hero-photo { margin: 12px 0; }
  .lcx-hero-photo img { aspect-ratio: 4 / 3; max-height: 250px; border-radius: 18px; }
  .lcx-hero-sub { margin-bottom: 14px; }
  .lcx-hero .lcx-hero-ctas { margin-bottom: 14px; }
  .lcx-hero-inner { padding-bottom: 24px; }
}

/* ============ v1.0.91: slightly bigger mobile headline + hero fills the first screen ============ */
@media (max-width: 640px) {
  .lcx-hero h1 { font-size: 28px; }
  .lcx-hero-inner { padding-bottom: 56px; }
}

/* ============ v1.0.92: compact mobile hero photo — fixed 180px height so CTAs fit without scrolling ============ */
@media (max-width: 640px) {
  .lcx-hero-photo { margin: 12px 0; }
  .lcx-hero-photo img {
    width: 100%; height: 180px; max-height: 180px;
    aspect-ratio: auto; object-fit: cover; object-position: center 30%;
    border-radius: 18px;
  }
  .lcx-hero-sub { margin-bottom: 14px; }
  .lcx-hero .lcx-hero-ctas { margin-bottom: 14px; }
  .lcx-hero-inner { padding-bottom: 24px; }
}

/* ============ v1.0.93: Free-Meals-pattern hero — copy left, photo right; photo interleaved on mobile ============ */
.lcx-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.lcx-hero-copy { min-width: 0; }
.lcx-hero-grid .lcx-hero-photo { margin: 0; }
.lcx-hero-grid .lcx-hero-photo img { aspect-ratio: 4 / 3; }
.lcx-hero-photo figcaption { margin-top: 12px; font-size: 14px; color: #A89C88; text-align: center; }
@media (max-width: 900px) {
  .lcx-hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .lcx-hero-copy { display: contents; }
  .lcx-hero-grid .lcx-pills { order: 1; }
  .lcx-hero-grid h1 { order: 2; }
  .lcx-hero-grid .lcx-hero-photo { order: 3; margin: 18px 0; }
  .lcx-hero-grid .lcx-hero-photo img { aspect-ratio: 16 / 10; height: 180px; max-height: 180px; object-fit: cover; object-position: center 30%; border-radius: 18px; }
  .lcx-hero-grid .lcx-hero-photo figcaption { display: none; }
  .lcx-hero-grid .lcx-hero-sub { order: 4; }
  .lcx-hero-grid .lcx-hero-ctas { order: 5; }
  .lcx-hero-grid .lcx-hero-trust { order: 6; }
}

/* ============ v1.0.94: moderate hero photo, price-free top stats, lower 100% band ============ */
.lcx-hero-grid { grid-template-columns: 1.18fr .82fr; }
.lcx-hero-grid .lcx-hero-photo { margin: 0; max-width: 380px; width: 100%; justify-self: end; }
.lcx-hero-grid .lcx-hero-photo img { aspect-ratio: 4 / 3; }
.lcx-stats-top { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
.lcx-stats-lower { display: flex; justify-content: center; padding-top: 40px; padding-bottom: 40px; }
.lcx-stats-lower > div { max-width: 480px; }
.lcx-stats-lower em { display: block; font-style: normal; font-size: 14px; color: var(--lc-muted); margin-top: 10px; line-height: 1.55; }
@media (max-width: 900px) {
  .lcx-hero-grid .lcx-hero-photo { max-width: 360px; width: 100%; margin: 18px auto; }
  .lcx-hero-grid .lcx-hero-photo img { height: auto; max-height: none; aspect-ratio: 16 / 10; }
}


/* ==========================================================================
   v2.0.0 REDESIGN — ONE DESIGN SYSTEM (.lc2-*)
   --------------------------------------------------------------------------
   Tokens + components for the redesign. Everything above this block is
   the v1.x stylesheet and is left untouched: the portal, booking pages,
   dashboards and auth pages still render exactly as before (Phase 2/3
   migrate their bodies onto this system). The chrome classes (.lc2-nav,
   .lc2-sheet, .lc2-footer) and the logo tile are global on purpose — the
   chrome templates (templates/chrome/) are the single source and render
   on every plugin page, so their CSS is self-contained under the .lc2-
   prefix and can be mirrored byte-for-byte into the WordPress theme.
   Color jobs, never broken: green = money/go (pro actions, earnings),
   blue = trust/booking (customer actions, links), black = prices,
   headlines, structure. Warm off-white (#FAFAF9) = canvas.
   ========================================================================== */

:root {
    /* v2.4.0 Phase T: every value below aliases the master --lcx-* tokens
       (top of file); the dark remap lives there too — this layer's old
       private dark block is gone. Radius steps land on the standard
       scale (r-md 14px -> 16px, r-sm 10px -> 12px). --lc2-paper is the
       canvas token; it doubles as a surface in places — splitting
       canvas vs surface is Phase S work. */
    --lc2-ink: var(--lcx-ink);
    --lc2-ink-2: var(--lcx-ink-2);
    --lc2-ink-3: var(--lcx-ink-3);
    --lc2-paper: var(--lcx-canvas);
    --lc2-mist: var(--lcx-mist);
    --lc2-mist-2: var(--lcx-mist-2);
    --lc2-line: var(--lcx-line-strong);
    --lc2-green: var(--lcx-green);
    --lc2-green-deep: var(--lcx-green-deep);
    --lc2-green-ink: var(--lcx-green-ink);
    --lc2-green-soft: var(--lcx-green-soft);
    --lc2-blue: var(--lcx-blue);
    --lc2-blue-deep: var(--lcx-blue-deep);
    --lc2-blue-soft: var(--lcx-blue-soft);
    --lc2-black: var(--lcx-ink);
    --lc2-amber: var(--lcx-amber);
    --lc2-amber-soft: var(--lcx-amber-soft);
    --lc2-red: var(--lcx-red);
    --lc2-hero-accent: #37d98a;
    --lc2-shadow: var(--lcx-shadow);
    --lc2-shadow-sm: var(--lcx-shadow-sm);
    --lc2-r-lg: var(--lcx-r-lg);
    --lc2-r-md: var(--lcx-r-md);
    --lc2-r-sm: var(--lcx-r-sm);
    --lc2-font: var(--lcx-font);
}

/* v2.4.0 Phase T: this layer's private dark remap was removed. Dark
   values now live in the ONE master remap at the top of this file and
   reach every --lc2-* token through its --lcx-* alias. */

/* ---------- Base ---------- */
.lc2-landing {
    font-family: var(--lc2-font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--lc2-ink);
    background: var(--lc2-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.lc2-landing *,
.lc2-nav *,
.lc2-sheet *,
.lc2-footer * { box-sizing: border-box; }
.lc2-landing [hidden],
.lc2-nav [hidden],
.lc2-sheet [hidden],
.lc2-footer [hidden] { display: none !important; }
.lc2-landing h1, .lc2-landing h2, .lc2-landing h3, .lc2-landing h4, .lc2-landing h5 {
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--lc2-ink);
}
.lc2-landing p { margin: 0; }
.lc2-landing a { color: var(--lc2-blue); }
.lc2-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .lc2-wrap { padding: 0 48px; } }
.lc2-sec { padding: 64px 0; background: var(--lc2-paper); }
.lc2-sec-mist { background: var(--lc2-mist); }
.lc2-sec-head { max-width: 760px; margin-bottom: 40px; }
.lc2-sec-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.lc2-sec-head-center .lc2-tag { margin-left: auto; margin-right: auto; }
.lc2-sec-head h2 { font-size: clamp(28px, 4.4vw, 40px); font-weight: 600; margin: 16px 0 12px; }
.lc2-sec-head p { font-size: 20px; color: var(--lc2-ink-2); }
.lc2-num, .lc2-landing strong, .lc2-landing .lc2-est-line strong { font-variant-numeric: tabular-nums; }
.lc2-center { text-align: center; }
.lc2-fineprint { font-size: 14px; color: var(--lc2-ink-3); }

.lc2-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    color: var(--lc2-green-ink); background: var(--lc2-green-soft);
    border-radius: 999px; padding: 8px 12px;
}
.lc2-tag .lc2-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lc2-green); flex: none; }
.lc2-tag-blue { color: var(--lc2-blue-deep); background: var(--lc2-blue-soft); }
.lc2-tag-blue .lc2-tag-dot { background: var(--lc2-blue); }
.lc2-tag-on-dark { color: #b9f4d4; background: rgba(55, 217, 138, .14); }
.lc2-tag-on-dark .lc2-tag-dot { background: var(--lc2-hero-accent); }

/* ---------- Buttons ---------- */
.lc2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--lc2-font); font-size: 16px; font-weight: 600; line-height: 1.2;
    padding: 12px 20px; border-radius: var(--lcx-r-sm); border: 1px solid transparent;
    text-decoration: none; cursor: pointer; min-height: 48px;
    transition: transform var(--lcx-dur-fast) var(--lcx-ease), background var(--lcx-dur-fast) var(--lcx-ease), border-color var(--lcx-dur-fast) var(--lcx-ease), color var(--lcx-dur-fast) var(--lcx-ease);
}
.lc2-btn:active { transform: scale(.98); }
.lc2-btn-green { background: var(--lc2-green); color: #fff; }
.lc2-btn-green:hover { background: var(--lc2-green-deep); color: #fff; }
.lc2-btn-blue { background: var(--lc2-blue); color: #fff; }
.lc2-btn-blue:hover { background: var(--lc2-blue-deep); color: #fff; }
.lc2-btn-ghost { background: var(--lc2-paper); color: var(--lc2-ink); border-color: var(--lc2-line); }
.lc2-btn-ghost:hover { border-color: var(--lc2-ink-3); color: var(--lc2-ink); }
.lc2-btn-ghost-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.lc2-btn-ghost-dark:hover { border-color: #fff; color: #fff; }
.lc2-btn-outline { background: var(--lc2-paper); color: var(--lc2-ink); border-color: var(--lc2-ink); }
.lc2-btn-outline:hover { background: var(--lc2-mist); color: var(--lc2-ink); }
.lc2-btn-lg { font-size: 16px; padding: 16px 26px; border-radius: var(--lcx-r-sm); min-height: 56px; }
.lc2-btn-sm { font-size: 14px; padding: 8px 16px; border-radius: var(--lcx-r-sm); min-height: 44px; }
.lc2-btn-block { display: flex; width: 100%; }
.lc2-btn[disabled], .lc2-btn.is-done { opacity: .75; cursor: default; }
/* ---------- Button text law (2026-10-18) ----------
   Mohamed's rule, no exceptions: a button with a colored fill (green,
   blue, black) gets WHITE text; a white or outlined button gets INK
   text. Root cause of the 2026-10-18 screenshot bug: the scoped link
   rule .lc2-landing a (specificity 0,1,1) beat the variant classes
   (0,1,0) and leaked blue text onto the green header/hero buttons and
   the dark-hero ghost button. These element+class rules (0,2,1) pin
   every variant's text color for both the <a> and <button> forms,
   :hover included, above any scoped link-color rule. */
a.lc2-btn.lc2-btn-green, button.lc2-btn.lc2-btn-green,
a.lc2-btn.lc2-btn-blue, button.lc2-btn.lc2-btn-blue { color: #fff; }
a.lc2-btn.lc2-btn-green:hover, button.lc2-btn.lc2-btn-green:hover,
a.lc2-btn.lc2-btn-blue:hover, button.lc2-btn.lc2-btn-blue:hover { color: #fff; }
a.lc2-btn.lc2-btn-ghost-dark, button.lc2-btn.lc2-btn-ghost-dark { color: #fff; }
a.lc2-btn.lc2-btn-ghost-dark:hover, button.lc2-btn.lc2-btn-ghost-dark:hover { color: #fff; }
a.lc2-btn.lc2-btn-ghost, button.lc2-btn.lc2-btn-ghost,
a.lc2-btn.lc2-btn-outline, button.lc2-btn.lc2-btn-outline { color: var(--lc2-ink); }
a.lc2-btn.lc2-btn-ghost:hover, button.lc2-btn.lc2-btn-ghost:hover,
a.lc2-btn.lc2-btn-outline:hover, button.lc2-btn.lc2-btn-outline:hover { color: var(--lc2-ink); }

/* ---------- Header + menu text law (2026-10-18) ----------
   Mohamed's rule: ALL text in the header (.lc2-nav) and the mobile
   menu/sheet (.lc2-sheet) is BLACK — var(--lc2-ink). The wordmark,
   nav links, sheet link titles AND their subtitles, the account menu,
   the sheet note: no blue text anywhere in the chrome. Blue belongs
   to small inline links in page body copy and to the booking accents
   inside a pro's own page — never to chrome text. Root cause of the
   2026-10-18 screenshot bug: scoped link rules like .lc2-landing a
   (specificity 0,1,1) beat the chrome's own color rules (0,1,0) and
   painted the sheet's titles link-blue. These pins (0,2,0 / 0,2,1)
   sit above any scoped link rule. Scope is header + sheet ONLY: the
   footer (dark band, light text) and page-body links are untouched.
   The only exceptions inside the scope are filled buttons, whose
   text follows the button law above — the pins therefore exclude
   .lc2-btn, and the sheet's two action buttons pin themselves in the
   sheet-button rules further down. */
.lc2-nav .lc2-brand, .lc2-nav .lc2-brand-name,
.lc2-sheet .lc2-brand, .lc2-sheet .lc2-brand-name { color: var(--lc2-ink); }
.lc2-nav a:not(.lc2-btn), .lc2-nav a:not(.lc2-btn):hover,
.lc2-sheet a:not(.lc2-btn):not(.lc2-sheet-btn),
.lc2-sheet a:not(.lc2-btn):not(.lc2-sheet-btn):hover { color: var(--lc2-ink); }
.lc2-nav .lc2-nav-links a, .lc2-nav .lc2-nav-links a:hover,
.lc2-sheet .lc2-sheet-link, .lc2-sheet .lc2-sheet-link:hover,
.lc2-sheet .lc2-sheet-link-label, .lc2-sheet .lc2-sheet-link-sub,
.lc2-sheet .lc2-sheet-note { color: var(--lc2-ink); }
.lc2-nav .lcx-acct-btn, .lc2-nav .lcx-acct-name, .lc2-nav .lcx-acct-caret,
.lc2-nav .lcx-acct-menu a, .lc2-nav .lcx-acct-label,
.lc2-nav .lcx-acct-desc { color: var(--lc2-ink); }

.lc2-textlink {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--lc2-blue); text-align: left;
}
.lc2-landing :focus-visible,
.lc2-nav :focus-visible,
.lc2-sheet :focus-visible,
.lc2-footer :focus-visible { outline: 3px solid var(--lc2-blue); outline-offset: 2px; }

/* ---------- Cards / ticks ---------- */
.lc2-card {
    background: var(--lc2-paper); border: 1px solid var(--lc2-line);
    border-radius: var(--lc2-r-lg); padding: 24px;
}
.lc2-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.lc2-card p { color: var(--lc2-ink-2); font-size: 16px; }
.lc2-ticks { list-style: none; margin: 0; padding: 0; }
.lc2-ticks li {
    position: relative; padding-left: 30px; margin-bottom: 12px;
    color: var(--lc2-ink-2); font-size: 16px;
}
.lc2-ticks li::before {
    content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b9e57' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lc2-ticks-ink li { color: var(--lc2-ink); }


/* ---------- Chrome: header / nav / mobile sheet ---------- */
.lc2-nav {
    position: sticky; top: 0; z-index: 90;
    background: color-mix(in srgb, var(--lc2-paper) 82%, transparent);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--lc2-line);
    font-family: var(--lc2-font); color: var(--lc2-ink);
}
.lc2-nav-inner {
    max-width: 1120px; margin: 0 auto; padding: 0 24px;
    height: 64px; display: flex; align-items: center; gap: 24px;
}
.lc2-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lc2-ink); flex: none; }
.lc2-brand-name { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.lc2-logo-tile {
    width: 36px; height: 36px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.lc2-logo-tile .lcx-brand-mark { display: inline-flex; }
.lc2-logo-tile .lcx-brand-mark svg { width: 36px; height: 36px; display: block; }
/* Logo rule: lc_brand_mark() emits exactly ONE tile per call — black
   on light surfaces, white on dark ones (the footer) — so there is no
   variant pair to swap and nothing to hide here. (Pre-2.1.3 a second
   .lc-mark-b tile was emitted and hidden by CSS; when the hide rule
   missed, the header/menu showed two logos side by side.) */
.lc2-nav-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.lc2-nav-links a {
    color: var(--lc2-ink-2); text-decoration: none; font-size: 16px; font-weight: 600;
    padding: 10px 2px;
}
.lc2-nav-links a:hover { color: var(--lc2-ink); }
.lc2-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lc2-nav-links + .lc2-nav-right { margin-left: 0; }
.lc2-cta-short { display: none; }
.lc2-nav-toggle {
    display: none; width: 48px; height: 48px; margin-left: 2px;
    background: none; border: 0; border-radius: var(--lcx-r-sm); cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.lc2-nav-toggle span { display: block; width: 22px; height: 2.4px; border-radius: 2px; background: var(--lc2-ink); }

.lc2-sheet {
    position: fixed; inset: 0; z-index: 120; overflow-y: auto;
    background: var(--lc2-paper); color: var(--lc2-ink); font-family: var(--lc2-font);
    padding: calc(12px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--lcx-dur) var(--lcx-ease), visibility var(--lcx-dur);
}
.lc2-sheet.open { opacity: 1; visibility: visible; pointer-events: auto; }
.lc2-sheet-head { display: flex; align-items: center; justify-content: space-between; height: 50px; }
.lc2-sheet-close {
    width: 48px; height: 48px; border-radius: 12px; cursor: pointer;
    background: var(--lc2-mist); border: 1px solid var(--lc2-line); color: var(--lc2-ink);
    display: inline-flex; align-items: center; justify-content: center;
}
.lc2-sheet-links { display: flex; flex-direction: column; margin-top: 10px; }
.lc2-sheet-link {
    display: block; padding: 16px 4px; text-decoration: none;
    border-bottom: 1px solid var(--lc2-line); color: var(--lc2-ink);
}
.lc2-sheet-link-label { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.lc2-sheet-link-sub { display: block; font-size: 14px; color: var(--lc2-ink-3); margin-top: 2px; }
.lc2-sheet-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.lc2-sheet-card {
    display: block; text-decoration: none; padding: 18px; border-radius: var(--lc2-r-md);
    background: var(--lc2-mist); border: 1px solid var(--lc2-line); color: var(--lc2-ink);
}
.lc2-sheet-card strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.lc2-sheet-card span { font-size: 14px; color: var(--lc2-ink-2); }
/* The sheet's two action buttons (2.1.3): real filled buttons, not
   link-styled cards. "I'm a pro" is the primary — black fill, white
   text (button law). The sample-page button is white with a visible
   ink border and black text, framed for pros: it opens the sample
   pro page a customer would book on, never a booking flow here.
   (.lc2-sheet-card above is legacy — kept only until the mirrored
   theme header on the server syncs to this markup.) */
.lc2-sheet-btn {
    display: block; text-decoration: none; padding: 18px; border-radius: var(--lc2-r-md);
    transition: transform var(--lcx-dur-fast) var(--lcx-ease), background var(--lcx-dur-fast) var(--lcx-ease);
}
.lc2-sheet-btn:active { transform: scale(.98); }
.lc2-sheet-btn strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.lc2-sheet-btn span { font-size: 14px; }
a.lc2-sheet-btn.lc2-sheet-btn-dark {
    background: var(--lc2-black); border: 1.5px solid var(--lc2-black); color: #fff;
}
a.lc2-sheet-btn.lc2-sheet-btn-dark strong,
a.lc2-sheet-btn.lc2-sheet-btn-dark span { color: #fff; }
a.lc2-sheet-btn.lc2-sheet-btn-light {
    background: var(--lc2-paper); border: 1.5px solid var(--lc2-ink); color: var(--lc2-ink);
}
a.lc2-sheet-btn.lc2-sheet-btn-light strong,
a.lc2-sheet-btn.lc2-sheet-btn-light span { color: var(--lc2-ink); }
.lc2-sheet-note { margin-top: 22px; font-size: 14px; color: var(--lc2-ink-3); text-align: center; }

/* ---------- Chrome: footer ---------- */
.lc2-footer {
    background: var(--lc2-black); color: #c9d4ca;
    font-family: var(--lc2-font); font-size: 16px; line-height: 1.55;
    padding: 64px 0 0; margin-top: 0;
}
.lc2-footer a { color: #c9d4ca; text-decoration: none; }
.lc2-footer a:hover { color: #fff; }
.lc2-footer-grid {
    display: grid; grid-template-columns: 1.5fr .8fr .8fr 1.2fr; gap: 32px;
    padding-bottom: 48px;
}
.lc2-footer-brand p { margin: 14px 0 12px; max-width: 34ch; }
.lc2-brand-on-dark { color: #fff; }
.lc2-footer-locale {
    display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .04em;
    color: var(--lc2-hero-accent); background: rgba(55, 217, 138, .12);
    border-radius: 999px; padding: 5px 11px;
}
.lc2-footer-col { display: flex; flex-direction: column; gap: 12px; }
.lc2-footer-col strong, .lc2-footer-contact > strong {
    color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 3px; display: block;
}
.lc2-footer-contact form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.lc2-footer-contact input[type="text"],
.lc2-footer-contact input[type="email"],
.lc2-footer-contact textarea {
    width: 100%; font: inherit; font-size: 16px; color: var(--lc2-ink);
    background: var(--lc2-paper); border: 1px solid transparent; border-radius: var(--lcx-r-sm);
    padding: 12px 16px; min-height: 48px;
}
.lc2-footer-contact input::placeholder, .lc2-footer-contact textarea::placeholder { color: var(--lc2-ink-3); }
.lc2-footer-contact .lc2-btn { align-self: flex-start; }
.lc2-footer .lcx-contact-ok { color: var(--lc2-hero-accent); font-weight: 600; }
.lc2-footer .lcx-contact-err { color: #ff9c9c; font-weight: 600; }
.lc2-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-top: 24px; padding-bottom: 24px;
    display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between;
    font-size: 14px;
}
.lc2-footer-legal { display: inline-flex; flex-wrap: wrap; gap: 8px 24px; }


/* ---------- Landing: hero ---------- */
.lc2-hero { background: var(--lc2-black); color: #fff; padding: 64px 0 84px; }
.lc2-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.lc2-hero-copy h1 {
    color: #fff; font-size: clamp(28px, 5.6vw, 40px); font-weight: 600;
    margin: 20px 0 18px;
}
.lc2-hero-accent { color: var(--lc2-hero-accent); }
.lc2-hero-lede { font-size: 20px; line-height: 1.55; color: #d7e0d8; max-width: 54ch; }
.lc2-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lc2-hero-fine { margin-top: 16px; font-size: 14px; color: #9fb3a3; max-width: 52ch; }
.lc2-hero-checks {
    list-style: none; margin: 24px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.lc2-hero-checks li { position: relative; padding-left: 26px; font-size: 16px; font-weight: 600; color: #e8f0e9; }
.lc2-hero-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337d98a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.lc2-hero-photo { margin: 0; }
.lc2-hero-photo img {
    width: 100%; height: auto; display: block; border-radius: 22px;
    box-shadow: var(--lc2-shadow);
}
.lc2-hero-photo figcaption { margin-top: 14px; font-size: 14px; color: #9fb3a3; line-height: 1.5; }

/* ---------- Landing: estimator ---------- */
.lc2-est {
    background: var(--lc2-paper); color: var(--lc2-ink);
    border: 1px solid var(--lc2-line); border-radius: var(--lc2-r-lg);
    box-shadow: var(--lc2-shadow); padding: 28px; margin-top: 48px;
}
.lc2-est h3 { font-size: 28px; font-weight: 600; }
.lc2-est-sub { color: var(--lc2-ink-2); margin-top: 6px; font-size: 16px; }
.lc2-est-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; margin-top: 22px; }
.lc2-est-row { margin-bottom: 20px; }
.lc2-est-row label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.lc2-est-row label strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lc2-est-row input[type="range"] {
    width: 100%; height: 48px; margin: 0; accent-color: var(--lc2-green);
    background: transparent; cursor: pointer;
}
.lc2-est-note { font-size: 14px; color: var(--lc2-ink-3); line-height: 1.5; }
.lc2-est-month h4 { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.lc2-est-line {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 8px 0; border-bottom: 1px dashed var(--lc2-line); font-size: 16px;
}
.lc2-est-line span { color: var(--lc2-ink-2); }
.lc2-est-line strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.lc2-est-line .lc2-est-fee { color: var(--lc2-red); }
.lc2-est-month .lc2-est-note { margin-top: 12px; }
.lc2-est-out { display: flex; flex-direction: column; gap: 14px; }
.lc2-est-keep { font-size: 20px; font-weight: 600; color: var(--lc2-ink); }
.lc2-est-keep span { font-size: 40px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lc2-est-strip {
    background: var(--lc2-green-soft); color: var(--lc2-green-ink);
    border-radius: var(--lc2-r-md); padding: 16px; font-size: 16px; line-height: 1.5;
}

/* ---------- Landing: what changed (VS table) ---------- */
.lc2-vs { border: 1px solid var(--lc2-line); border-radius: var(--lc2-r-lg); overflow: hidden; background: var(--lc2-paper); }
.lc2-vs-row {
    display: grid; grid-template-columns: 150px 1fr 1.25fr; gap: 20px;
    padding: 18px 22px; border-bottom: 1px solid var(--lc2-line); font-size: 16px;
}
.lc2-vs-row:last-child { border-bottom: 0; }
.lc2-vs-head { background: var(--lc2-black); color: #fff; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.lc2-vs-step { font-weight: 600; }
.lc2-vs-old { color: var(--lc2-ink-3); }
.lc2-vs-old s { text-decoration-color: var(--lc2-red); text-decoration-thickness: 2px; }
.lc2-vs-new { color: var(--lc2-green-ink); font-weight: 600; }

/* ---------- Landing: how it works ---------- */
.lc2-steps { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.lc2-step {
    display: flex; gap: 18px; align-items: flex-start;
    background: var(--lc2-paper); border: 1px solid var(--lc2-line);
    border-radius: var(--lc2-r-lg); padding: 22px 24px;
}
.lc2-step-n {
    width: 44px; height: 44px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 600;
}
.lc2-step-green { background: var(--lc2-green-soft); color: var(--lc2-green-ink); }
.lc2-step-blue { background: var(--lc2-blue-soft); color: var(--lc2-blue-deep); }
.lc2-step-ink { background: var(--lc2-mist-2); color: var(--lc2-ink); }
.lc2-step h3 { font-size: 20px; font-weight: 600; margin-bottom: 5px; }
.lc2-step p { color: var(--lc2-ink-2); font-size: 16px; }
.lc2-step-then { border-style: dashed; }


/* ---------- Landing: live demo ---------- */
.lc2-demo-shell { display: grid; grid-template-columns: minmax(0, 430px) 1fr; gap: 48px; align-items: start; }
.lc2-demo-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.lc2-demo-tab {
    flex: 1; min-height: 48px; padding: 10px 12px; cursor: pointer;
    font: inherit; font-size: 16px; font-weight: 600;
    background: var(--lc2-mist); color: var(--lc2-ink-2);
    border: 1px solid var(--lc2-line); border-radius: 12px;
}
.lc2-demo-tab { transition: background var(--lcx-dur-fast) var(--lcx-ease), color var(--lcx-dur-fast) var(--lcx-ease), border-color var(--lcx-dur-fast) var(--lcx-ease); }
.lc2-demo-tab.is-on { background: var(--lc2-ink); color: #fff; border-color: var(--lc2-ink); }
.lc2-phone {
    position: relative; background: var(--lc2-paper);
    border: 2px solid var(--lc2-ink); border-radius: 36px;
    box-shadow: var(--lc2-shadow); padding: 34px 18px 18px;
    overflow: hidden;
}
.lc2-phone-notch {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 110px; height: 20px; border-radius: 999px; background: var(--lc2-ink);
}
.lc2-demo-note { margin-top: 14px; font-size: 14px; color: var(--lc2-ink-3); text-align: center; }
.lc2-demo-right h3 { font-size: 28px; font-weight: 600; margin-bottom: 18px; }
.lc2-design-rows { display: flex; flex-direction: column; gap: 18px; }
.lc2-design-row { display: flex; gap: 14px; align-items: flex-start; }
.lc2-design-badge {
    width: 40px; height: 40px; flex: none; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 16px;
}
.lc2-design-blue { background: var(--lc2-blue-soft); color: var(--lc2-blue-deep); }
.lc2-design-green { background: var(--lc2-green-soft); color: var(--lc2-green-ink); }
.lc2-design-ink { background: var(--lc2-mist-2); color: var(--lc2-ink); }
.lc2-design-row strong { display: block; font-size: 16px; margin-bottom: 3px; }
.lc2-design-row p { color: var(--lc2-ink-2); font-size: 16px; }
.lc2-demo-links { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; font-weight: 600; }
.lc2-demo-links a { color: var(--lc2-blue); text-decoration: none; }
.lc2-demo-links a:hover { text-decoration: underline; }
.lc2-toast {
    position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 16px);
    background: var(--lc2-ink); color: #fff; font-size: 14px; font-weight: 600;
    border-radius: 12px; padding: 12px 16px; max-width: 88%; text-align: center;
    opacity: 0; pointer-events: none; transition: opacity var(--lcx-dur) var(--lcx-ease), transform var(--lcx-dur) var(--lcx-ease);
    z-index: 5; box-shadow: var(--lc2-shadow-sm);
}
.lc2-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Demo booking screen */
.lc2-book-head { display: flex; gap: 14px; align-items: center; }
.lc2-book-head img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.lc2-book-head h4 { font-size: 20px; font-weight: 600; }
.lc2-book-head p { font-size: 14px; color: var(--lc2-ink-2); }
.lc2-book-head .lc2-book-sample { color: var(--lc2-blue); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.lc2-book-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.lc2-book-badges span {
    background: var(--lc2-blue-soft); color: var(--lc2-blue-deep);
    font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 12px;
}
.lc2-book-body h5 { font-size: 16px; font-weight: 600; margin: 18px 0 8px; }
.lc2-price-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--lc2-line); font-size: 14px; }
.lc2-price-line span { color: var(--lc2-ink-2); }
.lc2-price-line strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.lc2-stepper { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lc2-stepper-note { flex: 1 1 100%; }
.lc2-stepper-btn {
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
    font-size: 20px; font-weight: 600; line-height: 1;
    background: var(--lc2-paper); color: var(--lc2-blue); border: 2px solid var(--lc2-blue);
}
.lc2-stepper-btn:active { transform: scale(.98); }
.lc2-stepper-val { font-size: 28px; font-weight: 600; min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.lc2-stepper-note { font-size: 14px; color: var(--lc2-ink-3); }
.lc2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lc2-chip {
    min-height: 48px; padding: 10px 14px; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 600;
    background: var(--lc2-paper); color: var(--lc2-ink-2);
    border: 1px solid var(--lc2-line); border-radius: 999px;
}
.lc2-chip { transition: background var(--lcx-dur-fast) var(--lcx-ease), color var(--lcx-dur-fast) var(--lcx-ease), border-color var(--lcx-dur-fast) var(--lcx-ease), transform var(--lcx-dur-fast) var(--lcx-ease); }
.lc2-chip:active { transform: scale(.98); }
.lc2-chip.is-on { background: var(--lc2-blue); border-color: var(--lc2-blue); color: #fff; }
.lc2-chips-pref .lc2-chip.is-on { background: var(--lc2-green); border-color: var(--lc2-green); }
.lc2-total-box { background: var(--lc2-mist); border-radius: var(--lc2-r-md); padding: 16px; margin-top: 20px; }
.lc2-total-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; font-weight: 600; }
.lc2-total-line strong { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lc2-total-box p { font-size: 14px; color: var(--lc2-ink-2); margin-top: 6px; }
.lc2-book-btn { margin-top: 14px; }
.lc2-trust-list { list-style: none; margin: 18px 0 0; padding: 0; }
.lc2-trust-list li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: 14px; color: var(--lc2-ink-2); }
.lc2-trust-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b63d8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.lc2-giveget { margin-top: 14px; background: var(--lc2-green-soft); color: var(--lc2-green-ink); border-radius: var(--lc2-r-md); padding: 12px 14px; font-size: 14px; font-weight: 600; }
.lc2-book-success { text-align: center; padding: 16px 4px 4px; }
.lc2-success-ring {
    width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
    background: var(--lc2-green-soft); color: var(--lc2-green);
    display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600;
}
.lc2-book-success h4 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.lc2-book-success p { color: var(--lc2-ink-2); font-size: 16px; }
.lc2-summary-box { background: var(--lc2-mist); border-radius: var(--lc2-r-md); padding: 14px 16px; margin: 16px 0; font-size: 16px; font-weight: 600; text-align: left; }
.lc2-book-success .lc2-btn { margin-top: 10px; }
.lc2-demo-disclaimer { margin-top: 14px; font-size: 14px; color: var(--lc2-ink-3); }

/* Demo portal screen */
.lc2-portal-head { display: flex; align-items: center; gap: 12px; }
.lc2-portal-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.lc2-portal-head strong { display: block; font-size: 16px; }
.lc2-portal-head span { font-size: 14px; color: var(--lc2-ink-3); }
.lc2-live-pill {
    margin-left: auto; flex: none; background: var(--lc2-green-soft); color: var(--lc2-green-ink) !important;
    font-size: 12px; font-weight: 600; border-radius: 999px; padding: 6px 11px;
}
.lc2-portal-body { margin-top: 16px; }
.lc2-pcard {
    background: var(--lc2-paper); border: 1px solid var(--lc2-line);
    border-radius: var(--lc2-r-md); padding: 16px; margin-bottom: 12px;
}
.lc2-pcard h5 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.lc2-pcard p { font-size: 14px; color: var(--lc2-ink-2); }
.lc2-pnote { font-size: 14px !important; color: var(--lc2-ink-3) !important; margin-top: 10px; line-height: 1.5; }
.lc2-pickup { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--lc2-line); }
.lc2-pickup:last-of-type { border-bottom: 0; }
.lc2-pickup-time { flex: none; font-size: 14px; font-weight: 600; color: var(--lc2-blue-deep); background: var(--lc2-blue-soft); border-radius: 8px; padding: 5px 8px; min-width: 62px; text-align: center; }
.lc2-pickup-main { flex: 1; min-width: 0; }
.lc2-pickup-main strong { display: block; font-size: 14px; }
.lc2-pickup-main span { font-size: 12px; color: var(--lc2-ink-3); }
.lc2-earn-big { font-size: 40px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lc2-earn-big span { font-size: 14px; font-weight: 600; color: var(--lc2-green-ink); background: var(--lc2-green-soft); border-radius: 999px; padding: 4px 10px; vertical-align: middle; }
.lc2-pcard .lc2-textlink { margin-top: 10px; font-size: 14px; }
.lc2-check-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.lc2-ring-wrap { position: relative; width: 52px; height: 52px; flex: none; }
.lc2-ring { width: 52px; height: 52px; transform: rotate(-90deg); }
.lc2-ring circle { fill: none; stroke-width: 6; }
.lc2-ring-bg { stroke: var(--lc2-mist-2); }
.lc2-ring-fg { stroke: var(--lc2-green); stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 79.2; transition: stroke-dashoffset var(--lcx-dur-slow) var(--lcx-ease); }
.lc2-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.lc2-check-head h5 { margin-bottom: 2px; text-transform: none; letter-spacing: 0; font-size: 16px; }
.lc2-check-head p { font-size: 14px; }
.lc2-check-items { display: flex; flex-direction: column; }
.lc2-check-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px dashed var(--lc2-line); cursor: pointer; min-height: 48px; }
.lc2-check-item:last-child { border-bottom: 0; }
.lc2-check-item input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--lc2-green); cursor: pointer; }
.lc2-check-item strong { display: block; font-size: 14px; }
.lc2-check-item small { font-size: 12px; color: var(--lc2-ink-3); line-height: 1.45; display: block; }
.lc2-check-item.is-done strong { color: var(--lc2-ink-3); text-decoration: line-through; }
.lc2-sample-card { position: relative; background: var(--lc2-mist); }
.lc2-sample-chip {
    position: absolute; top: 14px; right: 14px;
    background: var(--lc2-amber-soft); color: var(--lc2-amber);
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    border-radius: 999px; padding: 4px 9px;
}
.lc2-sample-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--lc2-line); font-size: 14px; }
.lc2-sample-row:last-of-type { border-bottom: 0; }
.lc2-sample-row span { color: var(--lc2-ink-2); }
.lc2-sample-row strong { font-weight: 600; text-align: right; }
.lc2-order-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--lc2-line); }
.lc2-order-row:last-child { border-bottom: 0; }
.lc2-order-row > div { flex: 1; min-width: 0; }
.lc2-order-row strong { display: block; font-size: 14px; }
.lc2-order-row span { font-size: 12px; color: var(--lc2-ink-3); }
.lc2-bars { display: flex; align-items: flex-end; gap: 8px; height: 92px; margin-top: 6px; }
.lc2-bar { flex: 1; background: var(--lc2-green); border-radius: 6px 6px 2px 2px; min-height: 4px; }
.lc2-bar.is-today { background: var(--lc2-blue); }
.lc2-bars-labels { display: flex; gap: 8px; margin-top: 6px; }
.lc2-bars-labels span { flex: 1; text-align: center; font-size: 12px; color: var(--lc2-ink-3); font-weight: 600; }
.lc2-payout { list-style: none; margin: 0; padding: 0; }
.lc2-payout li { position: relative; padding: 0 0 14px 30px; }
.lc2-payout li::before {
    content: ""; position: absolute; left: 4px; top: 5px;
    width: 13px; height: 13px; border-radius: 50%;
    border: 2.5px solid var(--lc2-line); background: var(--lc2-paper);
}
.lc2-payout li::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--lc2-line); }
.lc2-payout li:last-child { padding-bottom: 0; }
.lc2-payout li:last-child::after { display: none; }
.lc2-payout li.is-done::before { background: var(--lc2-green); border-color: var(--lc2-green); }
.lc2-payout li.is-now::before { background: var(--lc2-blue); border-color: var(--lc2-blue); }
.lc2-payout strong { display: block; font-size: 14px; }
.lc2-payout span { font-size: 14px; color: var(--lc2-ink-3); line-height: 1.45; display: block; }
.lc2-receipt > div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--lc2-line); font-size: 14px; }
.lc2-receipt > div span { color: var(--lc2-ink-2); }
.lc2-receipt > div strong { font-variant-numeric: tabular-nums; }
.lc2-receipt .lc2-receipt-total { border-bottom: 0; font-size: 16px; }
.lc2-receipt .lc2-receipt-total strong { color: var(--lc2-green-ink); font-weight: 600; }
.lc2-page-link { font-weight: 600; color: var(--lc2-blue) !important; font-size: 16px !important; word-break: break-all; }
.lc2-pcard #lc2-copy-link { margin-top: 12px; }
.lc2-kit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lc2-kit-tile {
    text-align: left; cursor: pointer; font: inherit;
    background: var(--lc2-mist); border: 1px solid var(--lc2-line); border-radius: var(--lc2-r-md);
    padding: 13px 14px; min-height: 48px;
}
.lc2-kit-tile { transition: background var(--lcx-dur-fast) var(--lcx-ease), border-color var(--lcx-dur-fast) var(--lcx-ease), transform var(--lcx-dur-fast) var(--lcx-ease); }
.lc2-kit-tile:active { transform: scale(.98); }
.lc2-kit-tile strong { display: block; font-size: 14px; margin-bottom: 2px; }
.lc2-kit-tile span { font-size: 12px; color: var(--lc2-ink-3); }
.lc2-qr-card { display: flex; gap: 14px; align-items: center; }
.lc2-qr-box {
    width: 92px; height: 92px; flex: none; border-radius: var(--lcx-r-sm);
    border: 1px solid var(--lc2-line); background: var(--lcx-surface);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; text-align: center; padding: 6px; overflow: hidden;
}
.lc2-qr-box a { color: var(--lc2-blue); text-decoration: none; word-break: break-all; }
.lc2-qr-box canvas, .lc2-qr-box img, .lc2-qr-box table { max-width: 100% !important; }
.lc2-qr-card strong { display: block; font-size: 16px; margin-bottom: 3px; }
.lc2-qr-card span { font-size: 14px; color: var(--lc2-ink-2); line-height: 1.45; display: block; }
.lc2-portal-tabs {
    display: flex; border-top: 1px solid var(--lc2-line); margin: 6px -18px -18px;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: var(--lc2-paper);
}
.lc2-ptab {
    flex: 1; min-height: 52px; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--lc2-ink-3);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-radius: 10px;
}
.lc2-ptab svg { width: 22px; height: 22px; }
.lc2-ptab.is-on { color: var(--lc2-green-ink); background: var(--lc2-green-soft); }


/* ---------- Landing: reference sheet ---------- */
.lc2-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lc2-pill-loop { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 12px; }
.lc2-pill-loop span {
    background: var(--lc2-blue-soft); color: var(--lc2-blue-deep);
    font-size: 14px; font-weight: 600; border-radius: 999px; padding: 6px 11px;
}
.lc2-pill-loop i { font-style: normal; color: var(--lc2-ink-3); font-size: 14px; }

/* ---------- Landing: cities ---------- */
.lc2-city-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 720px; margin: 0 auto 26px; }
.lc2-city-chips span {
    background: var(--lc2-mist); border: 1px solid var(--lc2-line); border-radius: 999px;
    padding: 10px 18px; font-size: 16px; font-weight: 600; min-height: 48px;
    display: inline-flex; align-items: center;
}

/* ---------- Landing: pricing ---------- */
.lc2-price-hero {
    display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
    border: 1px solid var(--lc2-line); border-radius: var(--lc2-r-lg);
    padding: 32px; background: var(--lc2-paper); margin-bottom: 44px;
}
.lc2-price-amt { font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.lc2-price-amt small { font-size: 20px; font-weight: 600; color: var(--lc2-ink-3); }
.lc2-price-hero p { color: var(--lc2-ink-2); margin: 14px 0 20px; font-size: 16px; }
.lc2-price-hero .lc2-fineprint { margin: 14px 0 0; }
.lc2-price-h3 { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.lc2-money-table-wrap { overflow-x: auto; border: 1px solid var(--lc2-line); border-radius: var(--lc2-r-lg); }
.lc2-money-table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 560px; }
.lc2-money-table th, .lc2-money-table td { text-align: left; padding: 16px; border-bottom: 1px solid var(--lc2-line); vertical-align: top; }
.lc2-money-table thead th { color: var(--lc2-ink-3); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.lc2-money-table tbody th { font-weight: 600; white-space: nowrap; }
.lc2-money-table td { color: var(--lc2-ink-2); }
.lc2-money-table .lc2-num { font-weight: 600; color: var(--lc2-ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.lc2-money-table tbody tr:last-child th, .lc2-money-table tbody tr:last-child td { border-bottom: 0; }
.lc2-money-table tr.lc2-money-hl { background: var(--lc2-green-soft); }
.lc2-money-table tr.lc2-money-hl td { color: var(--lc2-green-ink); }

/* Money table on phones: stack each row (name, how it charges, then
   the month figure with its label) so nothing sits off-screen. */
@media (max-width: 640px) {
    .lc2-money-table { min-width: 0; display: block; }
    .lc2-money-table tbody { display: block; }
    .lc2-money-table thead { display: none; }
    .lc2-money-table tbody tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--lc2-line); }
    .lc2-money-table tbody tr:last-child { border-bottom: 0; }
    .lc2-money-table tbody th, .lc2-money-table tbody td { display: block; border-bottom: 0; padding: 0; }
    .lc2-money-table tbody th { font-size: 17px; margin-bottom: 4px; white-space: normal; }
    .lc2-money-table tbody td { font-size: 15px; }
    .lc2-money-table td.lc2-num { text-align: left; margin-top: 8px; font-size: 17px; white-space: normal; }
    .lc2-money-table td.lc2-num::before { content: attr(data-label) ": "; font-family: var(--lcx-font); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lc2-ink-3); }
}

.lc2-source-note { font-size: 12px; color: var(--lc2-ink-3); margin-top: 14px; line-height: 1.55; max-width: 90ch; }

/* ---------- Landing: research ---------- */
.lc2-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lc2-research-badge {
    display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
    border-radius: 999px; padding: 5px 11px; margin-bottom: 12px;
}
.lc2-badge-green { background: var(--lc2-green-soft); color: var(--lc2-green-ink); }
.lc2-badge-blue { background: var(--lc2-blue-soft); color: var(--lc2-blue-deep); }
.lc2-traps-card { margin-top: 18px; }

/* ---------- Landing: FAQ ---------- */
.lc2-faq-wrap { max-width: 860px; }
.lc2-faq-sec .lc2-sec-head { margin-bottom: 28px; }
.lc2-faq-item { border: 1px solid var(--lc2-line); border-radius: var(--lc2-r-md); margin-bottom: 12px; background: var(--lc2-paper); overflow: hidden; }
.lc2-faq-item summary {
    cursor: pointer; padding: 18px 56px 18px 22px; min-height: 48px;
    font-size: 16px; font-weight: 600; list-style: none;
    display: block; position: relative;
}
.lc2-faq-item summary::-webkit-details-marker { display: none; }
.lc2-faq-item summary::after { content: ""; width: 22px; height: 22px; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b9e57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; }
.lc2-faq-item[open ] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b9e57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.lc2-faq-item p { padding: 0 22px 20px; color: var(--lc2-ink-2); font-size: 16px; max-width: 68ch; }

/* ---------- Landing: sticky mobile CTA ---------- */
/* Keeps the v1.x id so the existing show/hide JS (class .lcx-sticky-cta-show) drives it unchanged. */
#lcx-sticky-cta.lc2-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none;
    background: var(--lc2-paper); border-top: 1px solid var(--lc2-line);
    box-shadow: 0 -6px 24px rgba(9, 20, 13, .10);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(110%); transition: transform var(--lcx-dur-slow) var(--lcx-ease);
    font-family: var(--lc2-font);
}
#lcx-sticky-cta.lc2-sticky.lcx-sticky-cta-show { transform: translateY(0); }
.lc2-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 560px; margin: 0 auto; }
.lc2-sticky-text strong { display: block; font-size: 16px; color: var(--lc2-ink); }
.lc2-sticky-text span { font-size: 12px; color: var(--lc2-ink-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
    .lc2-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .lc2-hero-photo { max-width: 560px; }
    .lc2-est-grid { grid-template-columns: 1fr; gap: 10px; }
    .lc2-demo-shell { grid-template-columns: 1fr; gap: 36px; }
    .lc2-demo-left { max-width: 430px; margin: 0 auto; width: 100%; }
    .lc2-grid-3 { grid-template-columns: 1fr 1fr; }
    .lc2-price-hero { grid-template-columns: 1fr; gap: 22px; }
    .lc2-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .lc2-sec { padding: 54px 0; }
    .lc2-hero { padding: 44px 0 64px; }
    .lc2-nav-links { display: none; }
    .lc2-nav-toggle { display: inline-flex; }
    .lc2-signin { display: none; }
    .lc2-cta-full { display: none; }
    .lc2-cta-short { display: inline; }
    .lc2-sheet-cards { grid-template-columns: 1fr; }
    .lc2-vs-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
    .lc2-vs-head { display: none; }
    .lc2-vs-old::before { content: "Old: "; font-weight: 600; color: var(--lc2-ink-3); }
    .lc2-vs-new::before { content: "New: "; font-weight: 600; }
    .lc2-sheet-grid { grid-template-columns: 1fr; }
    .lc2-grid-3 { grid-template-columns: 1fr; }
    .lc2-footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .lc2-price-hero { padding: 24px; }
    .lc2-price-amt { font-size: 40px; }
    .lc2-est { padding: 22px; }
    #lcx-sticky-cta.lc2-sticky { display: block; }
    .lc2-step { padding: 18px; }
    .lc2-phone { padding: 30px 14px 14px; border-radius: 30px; }
    .lc2-portal-tabs { margin: 6px -14px -14px; }
}

@media (prefers-reduced-motion: reduce) {
    /* v2.5.0 Phase C: the reduced-motion block now covers EVERY layer —
       legacy, lc2, portal, demo — plus every keyframe animation. */
    .lc-btn, .lc2-btn, .lc2-sheet, .lc2-sheet-btn, .lc2-toast, .lc-toast, .lc2-ring-fg,
    #lcx-sticky-cta.lc2-sticky, .lcx-sticky-cta, .lcx-acct-btn, .lcx-nav-btn,
    .lcx-nav-toggle span, .lcx-nav-links a, .lcx-nav-links a::after,
    .lc-form-row input, .lc-form-row select, .lc-form-row textarea,
    .lc-promo-row input[type="text"], .lc-pref-select, .lc-pref-textarea,
    .lc-radio-card, .lc-tip-preset, .lc-freq-opt span, .lc-speed-opt, .lc-speed-check, .lc-speed-check::after,
    .lc-switch-track, .lc-switch-thumb, .lc-ptoggle-track, .lc-ptoggle-thumb,
    .lc-color-swatch span, .lc-checklist-bar span, .lc-money-progress-fill,
    .lc-blog-card, .lc-aw-step, .lc-star span, .lc2-chip, .lc2-kit-tile,
    .lc2-demo-tab, .lc2-viewnav-btn, .lc-demo-book .lc-field input { transition: none; }
    .lc-btn:active, .lc2-btn:active, .lc2-stepper-btn:active, .lc2-chip:active,
    .lc2-kit-tile:active, .lc2-sheet-btn:active, .lc-speed-opt:active, .lc-star:active span { transform: none; }
    .lcx-pill-dot, .lcx-timeline li.now i, .lcx-float-a, .lcx-float-b,
    .lc-celebrate, .lc-celebrate-card, .lc-skeleton::after,
    .lc-btn.is-busy::after, .lc2-btn.is-busy::after { animation: none; }
}

/* ==========================================================================
   v2.2.0 — BOOKING DEMO IN THE NEW SYSTEM (.lc-demo-*)
   The /demo/ page is a mock of a pro's booking page, so it now wears the
   same system as the real /r/ pages: white canvas, ink text, mist insets,
   20/16/12 radii, the token shadow pair, Inter (the page font via --lc2),
   and >=48px targets. Append-only overrides of the legacy rules above.
   ========================================================================== */
.lc-demo-frame { border-color: var(--lc2-line); border-radius: var(--lc2-r-lg); box-shadow: var(--lc2-shadow); }
.lc-demo-frame-bar { background: var(--lc2-mist); border-bottom-color: var(--lc2-line); }
.lc-demo-page { background: var(--lc2-paper); }
.lc-demo-brand { border-bottom-color: var(--lc2-line); }
.lc-demo-logo { background: var(--lc2-green); border-radius: var(--lc2-r-md); font-family: var(--lc2-font); }
.lc-demo-brand strong { font-family: var(--lc2-font); letter-spacing: -0.02em; color: var(--lc2-ink); }
.lc-demo-meta { color: var(--lc2-ink-3); }
.lc-demo-badge { background: var(--lc2-blue-soft); color: var(--lc2-blue-deep); border-color: var(--lc2-line); }
.lc-demo-menu, .lc-demo-book, .lc-demo-reviews { border-color: var(--lc2-line); border-radius: var(--lc2-r-lg); box-shadow: var(--lc2-shadow-sm); }
.lc-demo-menu h3, .lc-demo-book h3, .lc-demo-reviews h3 { font-family: var(--lc2-font); letter-spacing: -0.01em; color: var(--lc2-ink); }
.lc-demo-menu-row { border-bottom-color: var(--lc2-line); padding: 12px 0; color: var(--lc2-ink-2); }
.lc-demo-menu-row strong { color: var(--lc2-ink); font-weight: 600; white-space: nowrap; }
.lc-demo-book .lc-field input, .lc-demo-book .lc-field select, .lc-demo-book .lc-field textarea { min-height: 52px; border-color: var(--lc2-line); border-radius: var(--lc2-r-sm); color: var(--lc2-ink); }
.lc-demo-book .lc-field textarea { min-height: 74px; }
.lc-demo-book .lc-btn { min-height: 52px; }
.lc-demo-trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.lc-demo-trust-item { display: inline-flex; align-items: center; gap: 6px; background: var(--lc2-mist); border: 1px solid var(--lc2-line); border-radius: 999px; padding: 7px 13px; font-size: 14px; font-weight: 600; color: var(--lc2-ink-2); }
.lc-demo-trust-tick { color: var(--lc2-green); font-weight: 600; }

/* =====================================================================
   v2.3.0 — Phase 3: pro portal on the Phase 1 system.
   Everything is scoped to .lc2-portal (the dashboard / earnings /
   profile / billing wrappers) so no other surface changes. Legacy
   portal markup keeps its classes; this block re-skins them onto the
   --lc2 tokens and adds the view nav, Today blocks, checklist ring,
   earnings summary, Grow kit and the printable flyer.
   ===================================================================== */

.lc2-portal { font-family: var(--lc2-font); color: var(--lc2-ink); }
.lc2-portal h1, .lc2-portal h2, .lc2-portal h3, .lc2-portal h4, .lc2-portal h5 { font-family: var(--lc2-font); letter-spacing: -0.01em; color: var(--lc2-ink); }
.lc2-portal .lc-muted { color: var(--lc2-ink-3); }
.lc2-portal a { color: var(--lc2-blue); }

/* --- Hero: flat ink, no gradient --- */
.lc2-portal .lc-portal-hero { background: var(--lc2-black); color: #fff; border-radius: var(--lc2-r-lg); box-shadow: var(--lc2-shadow-sm); }
.lc2-portal .lc-portal-hero::before { display: none; }
.lc2-portal .lc-portal-hero .lc-portal-hello { color: var(--lc2-hero-accent); }
.lc2-portal .lc-portal-hero .lc-portal-name { color: #fff; font-weight: 600; letter-spacing: -0.02em; }
.lc2-portal .lc-portal-hero .lc-portal-sub { color: rgba(255,255,255,.75); }

/* --- Cards, titles, tables --- */
.lc2-portal .lc-card { background: var(--lc2-paper); border: 1px solid var(--lc2-line); border-radius: var(--lc2-r-lg); box-shadow: var(--lc2-shadow-sm); padding: 24px; }
.lc2-portal .lc-card-title { font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.lc2-portal .lc-section-title { font-family: var(--lc2-font); font-weight: 600; font-size: 20px; color: var(--lc2-ink); }
.lc2-portal .lc-table th { color: var(--lc2-ink-3); border-bottom: 1px solid var(--lc2-line); }
.lc2-portal .lc-table td { border-bottom: 1px solid var(--lc2-line); }
.lc2-portal .lc-badge { background: var(--lc2-mist); color: var(--lc2-ink-2); }
.lc2-portal .lc-notice { border-radius: var(--lc2-r-md); }

/* --- Buttons: system sizes; text colors are pinned by the button law --- */
.lc2-portal .lc-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--lc2-font); border-radius: var(--lcx-r-sm); }
.lc2-portal .lc-btn-small { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.lc2-portal .lc-btn-lg { min-height: 56px; font-size: 16px; padding-left: 28px; padding-right: 28px; }
.lc2-portal .lc-btn-primary { background: var(--lc2-green); border-color: var(--lc2-green); }
.lc2-portal .lc-btn-primary:hover { background: var(--lc2-green-deep); border-color: var(--lc2-green-deep); }
.lc2-portal .lc-btn-outline { border-color: var(--lc2-line); color: var(--lc2-ink); background: var(--lc2-paper); }
.lc2-portal .lc-btn-outline:hover { border-color: var(--lc2-ink-3); color: var(--lc2-ink); }
.lc2-portal .lc-portal-hero .lc-btn-primary { background: var(--lcx-surface); border-color: #fff; color: var(--lc2-ink); }
.lc2-portal .lc-portal-hero .lc-btn-outline { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }

/* --- Forms --- */
.lc2-portal input[type="text"], .lc2-portal input[type="email"], .lc2-portal input[type="tel"],
.lc2-portal input[type="number"], .lc2-portal input[type="date"], .lc2-portal input[type="time"],
.lc2-portal input[type="password"], .lc2-portal select, .lc2-portal textarea {
    border: 1px solid var(--lc2-line); border-radius: var(--lc2-r-sm); background: var(--lc2-paper);
    color: var(--lc2-ink); font-family: var(--lc2-font); min-height: 48px;
}
.lc2-portal textarea { min-height: 84px; }
.lc2-portal input[type="checkbox"], .lc2-portal input[type="radio"] { accent-color: var(--lc2-green); }
.lc2-portal input:focus, .lc2-portal select:focus, .lc2-portal textarea:focus { outline: none; border-color: var(--lc2-blue); box-shadow: 0 0 0 2px rgba(11, 99, 216, .30); }

/* --- Stat tiles --- */
.lc2-portal .lc-pstat { background: var(--lc2-mist); border: 1px solid var(--lc2-line); border-radius: var(--lc2-r-md); box-shadow: none; }
.lc2-portal .lc-pstat-num { font-family: var(--lc2-font); font-weight: 600; color: var(--lc2-ink); letter-spacing: -0.01em; }
.lc2-portal .lc-pstat-label { color: var(--lc2-ink-3); }

/* --- Checklist progress bar (wizard + polish checklist) --- */
.lc2-portal .lc-checklist-bar { background: var(--lc2-mist-2); }
.lc2-portal .lc-checklist-bar span { background: var(--lc2-green); }

/* --- View nav --- */
.lc2-viewnav { display: flex; gap: 6px; overflow-x: auto; padding: 6px; margin: 0 0 18px; background: var(--lc2-mist); border: 1px solid var(--lc2-line); border-radius: 999px; position: sticky; top: 8px; z-index: 40; scrollbar-width: none; }
.lc2-viewnav::-webkit-scrollbar { display: none; }
.lc2-viewnav-btn { flex: 1 0 auto; min-height: 48px; padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--lc2-ink-2); font-family: var(--lc2-font); font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--lcx-dur-fast) var(--lcx-ease), color var(--lcx-dur-fast) var(--lcx-ease); }
.lc2-viewnav-btn:hover { color: var(--lc2-ink); }
.lc2-viewnav-btn.is-active { background: var(--lc2-black); color: #fff; box-shadow: var(--lc2-shadow-sm); }
.lc2-portal .lc2-view[hidden] { display: none !important; }
.lc2-view > .lc-card:first-child, .lc2-view > .lc2-next:first-child { margin-top: 0; }

/* --- Today: next action --- */
.lc2-kicker { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lc2-green-ink); }
.lc2-next-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lc2-sample-pill { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--lc2-amber-soft); color: var(--lc2-amber); border-radius: 999px; padding: 5px 12px; }
.lc2-next-title { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin: 8px 0 6px; }
.lc2-next-meta { margin: 0 0 4px; color: var(--lc2-ink-2); font-size: 16px; }
.lc2-next-money { margin: 2px 0 14px; font-size: 20px; }
.lc2-next-money strong { font-weight: 600; }
.lc2-next-btn { min-height: 58px; font-size: 16px; width: 100%; }
.lc2-next-sub { margin: 18px 0 8px; font-size: 16px; font-weight: 600; }
.lc2-next-list { list-style: none; margin: 0; padding: 0; }
.lc2-next-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--lc2-line); }
.lc2-next-time { flex: 0 0 86px; font-weight: 600; color: var(--lc2-ink-2); font-size: 14px; }
.lc2-next-what { flex: 1; min-width: 0; }
.lc2-next-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* --- Today: launch checklist ring --- */
.lc2-check-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.lc2-ring { position: relative; flex: 0 0 64px; width: 64px; height: 64px; }
.lc2-ring svg { display: block; }
.lc2-ring-track { fill: none; stroke: var(--lc2-mist-2); stroke-width: 7; }
.lc2-ring-fill { fill: none; stroke: var(--lc2-green); stroke-width: 7; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 32px 32px; }
.lc2-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; color: var(--lc2-ink); }
.lc2-check-steps { list-style: none; margin: 0; padding: 0; }
.lc2-check-step { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--lc2-line); }
.lc2-check-box { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--lc2-line); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.lc2-check-step.is-done .lc2-check-box { background: var(--lc2-green); border-color: var(--lc2-green); }
.lc2-check-step.is-done .lc2-check-body strong { color: var(--lc2-ink-3); }
.lc2-check-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lc2-check-body .lc-muted { font-size: 14px; }

/* --- Earnings summary --- */
.lc2-earn-sub { margin: 16px 0 6px; font-size: 16px; font-weight: 600; }
.lc2-earn-rows { list-style: none; margin: 0; padding: 0; }
.lc2-earn-rows li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--lc2-line); }
.lc2-earn-rows li > span:first-child { flex: 1; min-width: 0; }
.lc2-earn-rows strong { font-weight: 600; white-space: nowrap; }

/* --- My Page links card --- */
.lc2-links-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Grow kit --- */
.lc2-kit-h { margin: 24px 0 10px; font-size: 20px; font-weight: 600; }
.lc2-kit-block { background: var(--lc2-mist); border: 1px solid var(--lc2-line); border-radius: var(--lc2-r-md); padding: 14px 16px; margin: 0 0 10px; }
.lc2-kit-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.lc2-kit-block-head h5 { margin: 0; font-size: 16px; font-weight: 600; }
.lc2-kit-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--lc2-ink-2); font-size: 16px; line-height: 1.55; }

/* --- QR flyer --- */
.lc2-flyer { background: #fff; color: #0b0f0c; border: 1px solid var(--lc2-line); border-radius: var(--lc2-r-lg); box-shadow: var(--lc2-shadow-sm); padding: 28px 24px; max-width: 560px; margin: 0 auto; text-align: center; }
.lc2-flyer-biz { font-family: var(--lc2-font); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; color: #0b0f0c; }
.lc2-flyer-tag { margin: 0 0 16px; color: #39423c; font-size: 16px; }
.lc2-flyer-services { list-style: none; margin: 0 auto 18px; padding: 0; max-width: 420px; text-align: left; }
.lc2-flyer-services li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid #dde5de; font-size: 16px; color: #0b0f0c; }
.lc2-flyer-services strong { font-weight: 600; white-space: nowrap; }
.lc2-flyer-qr { width: 180px; height: 180px; }
.lc2-flyer-scan { margin: 10px 0 2px; font-weight: 600; font-size: 16px; color: #0b0f0c; }
.lc2-flyer-link { margin: 0; color: #0b63d8; font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .lc2-portal .lc-card { padding: 18px; }
    .lc2-next-title { font-size: 28px; }
    .lc2-check-step { flex-wrap: wrap; }
    .lc2-check-step .lc-btn { margin-left: 38px; }
    .lc2-next-time { flex-basis: 72px; }
}

@media print {
    body * { visibility: hidden; }
    .lc2-flyer, .lc2-flyer * { visibility: visible; }
    .lc2-flyer { position: absolute; left: 0; top: 0; width: 100%; max-width: none; border: none; box-shadow: none; }
}

/* ---- v2.3.3: full pro analytics (Analytics view + Today strip) ---- */
.lc3-an-head { margin: 4px 0 14px; }
.lc3-an-card { margin-bottom: 16px; }
.lc3-an-error { font-size: 16px; font-weight: 600; color: var(--lc2-ink, #0b0f0c); margin: 6px 0 4px; }
.lc3-an-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lc3-an-list li { display: flex; flex-direction: column; gap: 2px; }
.lc3-an-meter { display: block; height: 6px; border-radius: 99px; background: var(--lc2-mist, #f2f5f2); overflow: hidden; margin-top: 4px; }
.lc3-an-meter > span { display: block; height: 100%; border-radius: 99px; background: var(--lc2-green, #0b9e57); }
.lc3-today-views-line { margin: 0; font-size: 16px; }
.lc3-today-views .lc2-next-actions { margin-top: 10px; }

/* ==========================================================================
   v2.5.0 — DESIGN PASS PHASE C: component kit additions
   --------------------------------------------------------------------------
   The shared pieces Phase C adds once, for every layer: the icon system
   (.lc-icon, sized by context; markup comes from lc_icon() in
   includes/helpers.php), star-rating display, the numeric utility, the
   elevated-card variant, the designed inline field error, the skeleton
   loading pattern (shimmer — never a spinner), the empty-state
   component, and the button busy state (disabled + shimmer). Motion and
   geometry for the pre-existing components live in their own rules
   above, unified in this same pass.
   ========================================================================== */
.lc-icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.25em; flex: none; }
.lc-icon-sm { width: 1em; height: 1em; vertical-align: -0.12em; }
.lc-icon-lg { width: 1.5em; height: 1.5em; vertical-align: -0.35em; }
.lc-star-off { fill: none; opacity: .45; }
.lc-stars-display { display: inline-flex; gap: 2px; align-items: center; color: var(--lcx-amber); }
.lc-stars-display .lc-icon { width: 1em; height: 1em; vertical-align: 0; }
.lc-num { font-variant-numeric: tabular-nums; text-align: right; }
.lc-card-elevated { box-shadow: var(--lcx-shadow); }
.lc2-footer-contact input:focus, .lc2-footer-contact textarea:focus { outline: none; border-color: var(--lcx-blue); box-shadow: 0 0 0 2px rgba(11, 99, 216, .30); }

/* Inline field error: the designed pattern under a field (portal/legacy forms). */
.lc-field-error { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--lc-danger); }
.lc-form-row.is-error input, .lc-form-row.is-error select, .lc-form-row.is-error textarea { border-color: var(--lc-danger); }
.lc-form-row.is-error input:focus, .lc-form-row.is-error select:focus, .lc-form-row.is-error textarea:focus { border-color: var(--lc-danger); box-shadow: 0 0 0 2px rgba(201, 42, 42, .30); }

/* Skeleton loading pattern: token-mist blocks + one shimmer sweep. */
.lc-skeleton { position: relative; overflow: hidden; background: var(--lcx-mist); border-radius: var(--lcx-r-sm); }
.lc-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%); transform: translateX(-100%); animation: lc-shimmer 1.6s var(--lcx-ease) infinite; }
.lc-skeleton-line { height: 14px; margin-bottom: 8px; }
.lc-skeleton-line:last-child { margin-bottom: 0; }
.lc-skeleton-block { height: 96px; }
@keyframes lc-shimmer { to { transform: translateX(100%); } }

/* Empty state: one component for lists/views with nothing in them yet. */
.lc-empty { border: 1px solid var(--lc-line-soft); border-radius: var(--lcx-r-lg); padding: 32px 24px; text-align: center; background: var(--lc-card); }
.lc-empty .lc-icon { width: 32px; height: 32px; color: var(--lc-muted); margin-bottom: 12px; }
.lc-empty-title { font-weight: 600; font-size: var(--lcx-fs-4); margin: 0 0 8px; color: var(--lc-ink); }
.lc-empty p { color: var(--lc-muted); margin: 0 auto 16px; max-width: 44ch; }
.lc-empty p:last-child { margin-bottom: 0; }

/* Button busy state: disabled + skeleton shimmer (set via .is-busy by the JS hooks). */
.lc-btn.is-busy, .lc2-btn.is-busy { position: relative; overflow: hidden; pointer-events: none; }
.lc-btn.is-busy::after, .lc2-btn.is-busy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%); transform: translateX(-100%); animation: lc-shimmer 1.2s var(--lcx-ease) infinite; }

@media (prefers-color-scheme: dark) {
    /* Dark companions for the Phase C pieces: the light-stroke check
       data-URIs and a softer shimmer on dark surfaces. */
    .lcx-hero-trust li::before, .lc-activate-list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ce3ab' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
    .lc-skeleton::after { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .08) 50%, transparent 80%); }
}

/* ================================================================
   v2.6.4 — LANDING HERO STACK (Mohamed's order 2026-10-19)
   The hero is one stacked flow: badge → headline → short line →
   PHOTO → the two buttons → billing line → checkmarks. The photo
   sits ABOVE the buttons, full width of the wrap, rounded.
   ================================================================ */
.lc2-hero-stack { display: block; }
.lc2-hero-stack .lc2-hero-copy { max-width: 760px; }
.lc2-hero-stack .lc2-hero-photo { margin: 32px 0 0; max-width: none; }
.lc2-hero-stack .lc2-hero-photo img { width: 100%; height: auto; display: block; }
.lc2-hero-stack .lc2-hero-after .lc2-hero-ctas { margin-top: 28px; }
.lc2-hero-stack .lc2-hero-checks { margin-top: 20px; }
@media (max-width: 720px) {
    .lc2-hero-stack .lc2-hero-photo { margin-top: 24px; }
}

/* ================================================================
   v2.6.5 — DARK-MODE COHERENCE (Mohamed's catch, 2026-10-19)
   The structural "always dark" colors (--lc-green, --lc-green-deep,
   --lc2-black) alias the ink token, which flips to near-white in
   dark mode — so every dark-designed surface (hero band, footers,
   dark cards, portal hero, badges, black buttons, table heads,
   step-number circles) turned near-white while its words stayed
   fixed white: white on white, unreadable. Those tokens are used
   ONLY as backgrounds, never as text. In dark mode only, pin them
   to their designed dark value — #1c1917, their light-mode color —
   so dark surfaces stay dark and their white words read in both
   modes. Light mode is untouched. Companion pins below cover the
   two direct-ink backgrounds, one muted-token badge, and the
   light-by-design pills/cards whose words ride a flipping token.
   ================================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --lc-green: #1c1917;
        --lc-green-deep: #1c1917;
        --lc2-black: #1c1917;
    }
    .lc-route-num, .lc-money-hero { background: #1c1917; }
    .lcx-example-tag { background: #78716c; }
    .lcx-acct-btn { color: #1c1917; }
    .lc2-nav .lcx-acct-btn, .lc2-nav .lcx-acct-btn .lcx-acct-name,
    .lc2-nav .lcx-acct-btn .lcx-acct-caret { color: #1c1917; }
    .lc-portal-hero .lc-btn-primary { color: #1c1917; }
    .lcx-float { color: #1c1917; }
    .lcx-float span { color: #78716c; }
    .lcx-nav, .lc-landing .lcx-nav { background: rgba(11, 11, 12, .85); }
    .lcx-nav-mobile, .lc-landing .lcx-nav-mobile { background: #0b0b0c; }
}

/* ================================================================
   v2.6.7 — LANDING DEMO: ONE FIXED STAGE + POLISH
   The phone frame holds ONE height at every screen width — the
   height of the tallest demo screen at that width — so switching
   tabs, stepping through the booking, or flipping portal panes
   never grows, shrinks, or jumps the frame, and the page below
   never moves. Shorter screens sit inside the stage: the booking
   form reads top-down as before, the confirmation centers itself
   with even spacing, and the portal pins its tab bar to the
   bottom of the phone like a real app. Heights were measured
   state by state (7 states × 11 widths — see the build report);
   the slim safety scroll inside a screen only engages on screens
   narrower than the measured ones, so nothing is ever cut off.
   Spacing inside the demo is aligned to the 4px grid.
   ================================================================ */
.lc2-phone {
    --lc2-demo-h: 1508px;
    height: var(--lc2-demo-h);
    display: flex; flex-direction: column;
}
@media (max-width: 480px) { .lc2-phone { --lc2-demo-h: 1620px; } }
@media (max-width: 440px) { .lc2-phone { --lc2-demo-h: 1692px; } }
@media (max-width: 400px) { .lc2-phone { --lc2-demo-h: 1804px; } }
@media (max-width: 385px) { .lc2-phone { --lc2-demo-h: 1828px; } }
@media (max-width: 375px) { .lc2-phone { --lc2-demo-h: 1932px; } }
.lc2-screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lc2-screen[hidden] { display: none !important; }

/* Booking screen: the form fills the stage; the confirmation
   centers itself in the same stage with even 16px spacing. */
#lc2-book-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
#lc2-book-success {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
#lc2-book-success[hidden] { display: none !important; }
#lc2-book-success .lc2-success-ring { margin: 0 auto; }
#lc2-book-success h4 { margin: 0; }
#lc2-book-success p { margin: 0; }
#lc2-book-success .lc2-summary-box { margin: 8px 0; padding: 16px; }
#lc2-book-success .lc2-btn { margin-top: 0; }
#lc2-book-success .lc2-demo-disclaimer { margin-top: 8px; }

/* Portal screen: header, scrolling pane area, tab bar pinned
   to the bottom of the stage at all times. */
.lc2-portal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.lc2-portal-tabs { flex: none; }
#lc2-book-main::-webkit-scrollbar, .lc2-portal-body::-webkit-scrollbar { width: 4px; }
#lc2-book-main::-webkit-scrollbar-thumb, .lc2-portal-body::-webkit-scrollbar-thumb { background: var(--lc2-line); border-radius: 999px; }

/* Narrow phones: portal rows stop squeezing their words into a
   thin column — the words get the full row beside the time chip,
   and the action button drops to its own line, right-aligned. */
@media (max-width: 480px) {
    .lc2-pickup { flex-wrap: wrap; row-gap: 8px; }
    .lc2-pickup-main { flex: 1 1 140px; }
    .lc2-pickup .lc2-btn { margin-left: auto; }
    .lc2-order-row { flex-wrap: wrap; row-gap: 8px; }
    .lc2-order-row .lc2-btn { margin-left: auto; }
}

/* Dark mode: three demo pieces ride the ink token, which flips
   near-white in the dark — the active demo tab and the toast went
   white-on-white, and the phone's notch (a hardware cutout, black
   in real life) turned white. They become light chips with dark
   words in dark mode, mirroring their light-mode selves. */
@media (prefers-color-scheme: dark) {
    .lc2-demo-tab.is-on { background: #f5f5f4; color: #1c1917; border-color: #f5f5f4; }
    .lc2-toast { background: #f5f5f4; color: #1c1917; }
    .lc2-phone-notch { background: #0b0b0c; }
}

/* Demo spacing polish — one grid, even rhythm on every screen. */
.lc2-book-badges { margin: 16px 0 0; }
.lc2-book-body h5 { margin: 16px 0 8px; }
.lc2-total-box { margin-top: 16px; }
.lc2-book-btn { margin-top: 16px; }
.lc2-trust-list { margin-top: 16px; }
.lc2-trust-list li { margin-bottom: 8px; }
.lc2-trust-list li:last-child { margin-bottom: 0; }
.lc2-giveget { margin-top: 16px; }
.lc2-pickup { padding: 12px 0; }
.lc2-order-row { padding: 12px 0; }
.lc2-check-item { padding: 12px 0; }

/* ================================================================
   v2.6.8 — BUTTON GEOMETRY LAW (Mohamed's premium-buttons order)
   .lc-btn carried min-height but rode the theme's default
   content-box sizing, so the minimum applied to the words alone
   and the padding stacked on top: a 56px large button rendered
   90px tall with its words sat at the top over a stretch of
   empty fill (measured live on /demo/: 90px block, words 17px
   above center). Every link-styled button sitewide shared it.
   Now: the stated height IS the whole button (border-box), and
   the words are flex-centered — vertically centered always, at
   the system's own heights (48px standard, 56px large).
   ================================================================ */
.lc-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.lc-btn-link { display: inline-flex; }

/* ================================================================
   v2.6.9 — LANDING PHOTOS (Mohamed's order: break up the wall of
   words). One photo under each word-heavy section head — the
   actual work: a pro at her machine, folded stacks, the phone
   over the basket, the doorstep handoff. Fixed 3:2 frame via
   aspect-ratio + width/height attributes, so nothing jumps
   while the page loads; lazy-loaded under the hero.
   ================================================================ */
.lc2-photo { margin: 8px auto 40px; max-width: 880px; border-radius: 20px; overflow: hidden; box-shadow: var(--lcx-shadow-sm); }
.lc2-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 640px) { .lc2-photo { margin-bottom: 32px; border-radius: 16px; } }

/* ================================================================
   v2.6.9 — DEMO FULL-SCREEN (Mohamed's order): inline the demo
   sits at its one fixed size; the first interaction opens it
   full-screen like a real app screen, screens swapping inside
   with no size change; a 48px close button rides the top-right
   the whole time it is open, and closing restores the exact
   scroll spot. The explainer column steps aside while open.
   ================================================================ */
.lc2-demo-left { position: relative; }
.lc2-demo-close { position: absolute; top: -4px; right: 0; z-index: 6; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--lcx-line); background: var(--lcx-surface); color: var(--lcx-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--lcx-shadow-sm); }
.lc2-demo-close[hidden] { display: none !important; }
.lc2-demo-close svg { width: 22px; height: 22px; }
.lc2-demo-close:active { transform: scale(.98); }
body.lc2-demo-lock { overflow: hidden; }
.lc2-demo-shell.is-open { position: fixed; inset: 0; z-index: 200; display: block; background: var(--lcx-canvas); overflow-y: auto; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); animation: lc2-demo-in var(--lcx-dur) var(--lcx-ease); }
@keyframes lc2-demo-in { from { opacity: 0; } to { opacity: 1; } }
.lc2-demo-shell.is-open .lc2-demo-right { display: none; }
.lc2-demo-shell.is-open .lc2-demo-left { max-width: 430px; margin: 0 auto; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.lc2-demo-shell.is-open .lc2-demo-tabs { margin-right: 60px; }
.lc2-demo-shell.is-open .lc2-phone { flex: 1 1 auto; height: auto; min-height: 0; margin-top: 14px; }
.lc2-demo-shell.is-open #lc2-book-main { overflow-y: auto; }
.lc2-demo-shell.is-open .lc2-portal-body { overflow-y: auto; }
@media (max-width: 640px) {
    .lc2-demo-shell.is-open { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
}

/* v2.6.12 — dark-mode header logo. The header/menu mark is emitted once
   with the light-surface values (black tile, white basket, black holes);
   on a dark header the black tile vanishes into the background and only
   the basket shows (seen in the 2026-10-20 QA phone shots). Swap the two
   emitted fill values in dark mode so the header and menu sheet carry
   the approved dark-surface mark: white tile, black basket, white holes.
   Attribute selectors match the emitted values, so the rules never
   chain. The footer emits the dark variant itself and is not scoped. */
@media (prefers-color-scheme: dark) {
    .lc2-nav .lc-mark [fill="#0B0B0C"], .lc2-sheet .lc-mark [fill="#0B0B0C"] { fill: #FFFFFF; }
    .lc2-nav .lc-mark [fill="#FFFFFF"], .lc2-sheet .lc-mark [fill="#FFFFFF"] { fill: #0B0B0C; }
}

/* ------------------------------------------------------------------
   v2.6.15 — PROMO SECTION + DEMO PAYOFF + EARNINGS REACTION
   The promo teases the portal in the demo's own card style and has
   exactly one door: "View demo", which opens the live demo. Cards are
   visuals (labelled Sample), never dead buttons. All colors ride the
   token vars, so light and dark follow the design system.
   ------------------------------------------------------------------ */
.lc2-promo-sec { padding-bottom: 8px; }
.lc2-promo-sec + .lc2-sec { padding-top: 40px; }
.lc2-promo-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.lc2-promo-card {
    position: relative; background: var(--lc2-paper);
    border: 1px solid var(--lc2-line); border-radius: 20px;
    padding: 24px; box-shadow: 0 12px 32px rgba(16, 24, 16, .05);
}
.lc2-promo-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0 36px 16px 0; }
.lc2-promo-card p { font-size: 14px; line-height: 1.55; color: var(--lc2-ink-2); margin: 16px 0 0; }
.lc2-promo-chip {
    position: absolute; top: 20px; right: 20px;
    background: var(--lc2-amber-soft); color: var(--lc2-amber);
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    border-radius: 999px; padding: 4px 10px;
}
.lc2-promo-order { display: flex; gap: 12px; align-items: flex-start; }
.lc2-promo-time {
    flex: none; font-size: 12px; font-weight: 600; color: var(--lc2-ink-2);
    background: var(--lc2-mist); border-radius: 8px; padding: 4px 8px; margin-top: 2px;
}
.lc2-promo-order-main strong { display: block; font-size: 16px; }
.lc2-promo-order-main span { display: block; font-size: 14px; color: var(--lc2-ink-2); margin-top: 2px; }
.lc2-promo-picked {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
    background: var(--lc2-green); color: #fff;
    font-size: 16px; font-weight: 600; border-radius: 999px; padding: 10px 20px;
}
.lc2-promo-picked .lc-icon, .lc2-promo-picked svg { width: 18px; height: 18px; }
.lc2-promo-earn { font-size: 40px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.lc2-promo-earn span { font-size: 14px; font-weight: 500; color: var(--lc2-ink-2); letter-spacing: 0; }
.lc2-promo-check { display: flex; gap: 14px; align-items: center; }
.lc2-promo-check p { margin: 0; }
.lc2-promo-ring-wrap { position: relative; width: 52px; height: 52px; flex: none; }
.lc2-promo-ring { width: 52px; height: 52px; transform: rotate(-90deg); display: block; }
.lc2-promo-ring circle { fill: none; stroke-width: 6; }
.lc2-promo-ring-bg { stroke: var(--lc2-mist-2); }
.lc2-promo-ring-fg { stroke: var(--lc2-green); stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 79.2; }
.lc2-promo-ring-num {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; color: var(--lc2-ink);
}
.lc2-promo-cta { margin: 32px 0 0; }

.lc2-demo-payoff { text-align: center; max-width: 640px; margin: 56px auto 0; }
.lc2-demo-payoff h3 { font-size: 28px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 12px; }
.lc2-demo-payoff p { font-size: 16px; line-height: 1.55; color: var(--lc2-ink-2); margin: 0 0 24px; }

/* The reactive amount inside the demo earnings headline keeps the
   headline's own type (the generic span rule styles the delta pill). */
.lc2-earn-big #lc2-earn-amt {
    font-size: inherit; font-weight: inherit; color: inherit;
    background: none; border-radius: 0; padding: 0; vertical-align: baseline;
}
@keyframes lc2EarnPulse {
    0% { box-shadow: 0 0 0 0 rgba(11, 158, 87, .40); }
    100% { box-shadow: 0 0 0 16px rgba(11, 158, 87, 0); }
}
.lc2-pcard.lc2-earn-pulse { animation: lc2EarnPulse .9s ease-out; }

@media (max-width: 900px) {
    .lc2-promo-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   v2.6.16 — HEADER RIGHT CLUSTER SITS CLOSER TO THE EDGE
   Mohamed's order: move the hamburger + Start free cluster a bit
   further right. The header bar's right padding goes 24px → 12px;
   the logo side keeps its 24px. The gap between the two buttons
   (10px + the toggle's 2px) is unchanged, and the blog template-part
   header loads this same stylesheet, so it moves too.
   ------------------------------------------------------------------ */
.lc2-nav-inner { padding-right: 12px; }

/* ------------------------------------------------------------------
   v2.6.18 — DEMO BOOKING VIEW WEARS THE SHOWCASE BAND
   When the third booking template shipped, the demo's booking view
   took its look: the pro's photo, name and sample line sit ON the
   brand band (demo blue), the way Showcase pages open. Sample label
   stays on the band, impossible to miss.
   ------------------------------------------------------------------ */
.lc2-screen-book .lc2-book-head {
    background: var(--lc2-blue); color: #fff;
    margin: -34px -18px 18px; padding: 42px 18px 20px;
    border-radius: 0 0 24px 24px;
}
.lc2-screen-book .lc2-book-head h4 { color: #fff; }
.lc2-screen-book .lc2-book-head p { color: rgba(255, 255, 255, .85); }
.lc2-screen-book .lc2-book-head .lc2-book-sample { color: #dbeafe; }
.lc2-screen-book .lc2-book-head img { width: 72px; height: 72px; border: 2px solid rgba(255, 255, 255, .55); }
@media (max-width: 680px) {
    .lc2-screen-book .lc2-book-head { margin: -30px -14px 18px; padding: 38px 14px 20px; }
}

/* v2.6.26 — Signup Pass 1 fixes: green primary actions on auth/wizard
   surfaces (the legacy coral token renders blue; green is the pro action
   color), header fit at phone width, styled file inputs, 44px option rows. */
.lc-auth .lc-btn-primary { background: var(--lc2-green); border-color: var(--lc2-green); color: #fff; }
.lc-auth .lc-btn-primary:hover { background: var(--lc2-green-deep); border-color: var(--lc2-green-deep); color: #fff; }
.lc2-nav-cta, .lc2-signin { white-space: nowrap; }
@media (max-width: 640px) {
  .lc2-brand-name { display: none; }
  .lc2-nav-cta { padding-left: 12px; padding-right: 12px; }
}
.lc-auth input[type="file"] { font-size: 14px; color: var(--lc-muted, #6b7280); }
.lc-auth input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; color: var(--lc-ink);
  background: var(--lcx-surface, #fff); border: 1px solid var(--lc-line, #d9d9de);
  border-radius: 999px; padding: 9px 16px; margin-right: 12px; cursor: pointer;
  min-height: 44px;
}
.lc-auth .lc-zip { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; line-height: 1.3; }

/* v2.6.31 (Pass 3): wizard option grids (detergent etc.) need word-width
   columns — the shared ZIP-chip grid clipped labels like "Unscented". */
.lc-auth .lc-zip-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* ------------------------------------------------------------------
   v2.6.39 — HEADER CLUSTER BELONGS AT THE RIGHT EDGE (Mohamed's order
   2026-10-21: "move the menu button and the get started button all
   the way to the right of the header").
   Root cause of the floating cluster: at phone widths the desktop nav
   links hide (display:none), but the desktop glue rule
   ".lc2-nav-links + .lc2-nav-right { margin-left: 0 }" kept applying
   and killed the cluster's auto margin — so Get started + the menu
   button sat right after the logo, mid-header. v2.6.16 trimmed the
   right padding instead, which only moved the float slightly.
   The fix: at phone widths the cluster's auto margin is restored with
   matching specificity, and the bar's side padding is even again
   (24px both sides — the logo side's standard), superseding the
   v2.6.16 trim. Desktop rendering is unchanged. This stylesheet is
   loaded by every header on the site, including the blog template
   part, so the fix lands everywhere at once.
   ------------------------------------------------------------------ */
@media (max-width: 680px) {
    .lc2-nav .lc2-nav-right { margin-left: auto; }
}
.lc2-nav-inner { padding-right: 24px; }

/* ------------------------------------------------------------------
   v2.6.40 — DEMO LIVES ON ITS OWN PAGE (Mohamed's order 2026-10-21)
   Homepage promo = ONE product picture + one View demo button. All
   interactivity moved to /demo/, which carries a fixed X (top right,
   always visible) that returns the visitor to where they came from.
   ------------------------------------------------------------------ */
.lc2-shot {
    position: relative; max-width: 880px; margin: 0 auto;
    background: var(--lc2-paper); border: 1px solid var(--lc2-line);
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(11, 11, 12, .10);
}
.lc2-shot-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-bottom: 1px solid var(--lc2-line);
    background: var(--lc2-mist);
}
.lc2-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--lc2-line); flex: none; }
.lc2-shot-bar span {
    margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--lc2-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc2-shot-body { padding: 20px 22px 22px; pointer-events: none; }
.lc2-shot-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 14px;
}
.lc2-shot-head strong { display: block; font-size: 19px; letter-spacing: -.01em; }
.lc2-shot-head span { font-size: 13.5px; color: var(--lc2-ink-3); }
.lc2-shot-head .lc2-promo-earn { text-align: right; flex: none; }
.lc2-shot-check {
    display: flex; align-items: center; gap: 12px; margin-top: 14px;
    font-size: 13.5px; font-weight: 600; color: var(--lc2-ink-2);
}
.lc2-shot-bar-track {
    flex: 1; height: 8px; border-radius: 999px;
    background: var(--lc2-mist); border: 1px solid var(--lc2-line); overflow: hidden;
}
.lc2-shot-bar-fill { display: block; height: 100%; background: var(--lc2-green); border-radius: 999px; }
.lc2-shot-chip { position: absolute; top: 52px; right: 14px; }
.lc-demo-x {
    position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px;
    z-index: 300; width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lc2-paper); color: var(--lc2-ink);
    border: 1px solid var(--lc2-line);
    box-shadow: 0 8px 24px rgba(11, 11, 12, .18);
    text-decoration: none;
}
.lc-demo-x:hover { color: var(--lc2-ink); }
.lc-demo-live { max-width: 1120px; margin: 0 auto; padding: 28px 24px 8px; }
.lc-demo-live .lc2-demo-shell { margin-top: 8px; }
.lc-demo-live .lc2-demo-close { display: none !important; }
@media (max-width: 680px) {
    .lc2-shot-body { padding: 16px 14px 18px; }
    .lc2-shot-head strong { font-size: 17px; }
    .lc-demo-live { padding: 20px 14px 4px; }
}
/* v2.6.40 proof-pass: the shot's internals stay picture-polished —
   compact picked pills, and the Sample chip rides the frame bar
   instead of stamping over the earnings figure. */
.lc2-shot .lc2-promo-picked { flex: none; align-self: center; white-space: nowrap; }
.lc2-shot-bar .lc2-shot-chip { position: static; margin-left: auto; flex: none; }
.lc2-promo-sec .lc2-promo-cta { text-align: center; }

/* v2.6.42 — Header wordmark at every width + a bigger logo tile
   (Mohamed's order 2026-10-21, with his phone screenshot). The
   wordmark was in the markup all along but the v2.6.26 phone fit
   pass hid it at <=640px, so phones showed the tile alone. Now:
   the name sits right of the tile on phone and desktop alike, and
   the tile grows 36px -> 42px. Scoped to the nav + menu sheet —
   the footer tile and pro white-label pages are untouched. The
   right cluster (Get started + menu) is not touched either. */
.lc2-nav .lc2-logo-tile, .lc2-sheet .lc2-logo-tile { width: 42px; height: 42px; }
.lc2-nav .lc2-logo-tile .lcx-brand-mark svg, .lc2-sheet .lc2-logo-tile .lcx-brand-mark svg { width: 42px; height: 42px; }
@media (max-width: 640px) {
  .lc2-brand-name { display: inline-block; font-size: 17px; }
  .lc2-brand { gap: 8px; }
}

/* v2.6.44 — Promo redesigned as a product presentation (Mohamed's
   order 2026-10-21: "premium like Apple presenting the tool") + the
   demo back in a popup on the landing page. The visual is ONE calm
   card: identity row, a large quiet earnings figure, two order rows
   whose lines can never wrap mid-phrase, and a slim setup meter.
   The old browser-chrome shot (.lc2-shot) is retired. */
.lc2-show {
    position: relative; max-width: 600px; margin: 36px auto 0; text-align: left;
    background: var(--lc2-paper); border: 1px solid var(--lc2-line);
    border-radius: 26px; padding: 28px 28px 24px;
    box-shadow: 0 30px 70px rgba(11, 11, 12, .12), 0 3px 10px rgba(11, 11, 12, .05);
}
.lc2-show-top { display: flex; align-items: center; gap: 12px; }
.lc2-show-ava {
    width: 44px; height: 44px; border-radius: 999px; flex: none;
    background: var(--lc2-green); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 600;
}
.lc2-show-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lc2-show-id strong { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc2-show-id span { font-size: 13px; color: var(--lc2-ink-2); white-space: nowrap; }
.lc2-show-chip {
    margin-left: auto; flex: none; font-size: 11px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; color: var(--lc2-ink-2);
    border: 1px solid var(--lc2-line); border-radius: 999px; padding: 5px 9px;
}
.lc2-show-earn { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.lc2-show-earn-label { width: 100%; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lc2-ink-2); }
.lc2-show-earn-fig { font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.lc2-show-earn-delta { font-size: 14px; font-weight: 600; color: var(--lc2-green-deep); }
.lc2-show-rows { margin-top: 24px; border-top: 1px solid var(--lc2-line); }
.lc2-show-row { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--lc2-line); }
.lc2-show-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc2-show-main strong { font-size: 16px; font-weight: 600; white-space: nowrap; }
.lc2-show-main span { font-size: 13px; color: var(--lc2-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc2-show-side { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; }
.lc2-show-price { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lc2-show-pill {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 12px; font-weight: 600; color: var(--lc2-green-deep);
    background: var(--lc2-green-soft); border-radius: 999px; padding: 5px 9px;
}
.lc2-show-pill svg { width: 12px; height: 12px; flex: none; }
.lc2-show-setup { margin-top: 18px; }
.lc2-show-setup-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--lc2-ink-2); margin-bottom: 8px; }
.lc2-show-track { display: block; height: 5px; border-radius: 999px; background: var(--lc2-green-soft); overflow: hidden; }
.lc2-show-track > span { display: block; height: 100%; border-radius: 999px; background: var(--lc2-green); }
.lc2-promo-note { text-align: center; margin-top: 12px; font-size: 13.5px; color: var(--lc2-ink-2); }
@media (max-width: 640px) {
    .lc2-show { padding: 22px 20px 20px; border-radius: 22px; }
    .lc2-show-earn-fig { font-size: 44px; }
}
/* The popup: page scroll locks, and the demo's X is pinned to the
   viewport's top right for as long as the demo is open — visible
   at all times, as ordered. (The open-state shell is inset:0, so
   fixed == shell-relative here; its entry animation is opacity
   only, which cannot disturb fixed positioning.) */
.lc2-pop-lock { overflow: hidden !important; }
.lc2-demo-shell.is-open .lc2-demo-close {
    position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 300;
}

/* v2.6.47 — Mohamed's demo fixes: clear air above the View demo button,
   and the /demo/ view fits one phone screen (toggle + demo together, no
   scrolling up and down to use it). The demo column is sized straight
   from the viewport (the same trick the landing popup uses) — the
   constant is the measured height of everything above it on the page:
   theme band, page padding, and the demo's own condensed head. Scoped
   to .lc-demo-live so the landing popup and the desktop demo stay
   exactly as they were. */
.lc2-promo-sec .lc2-promo-cta { padding-top: 44px; margin-top: 0; }
@media (max-width: 760px) {
    .lc-demo-live { padding: 14px 14px 10px; scroll-margin-top: 84px; }
    .lc-demo-live .lc2-sec-head { margin-bottom: 10px; }
    .lc-demo-live .lc2-sec-head h2 { font-size: 26px; line-height: 1.15; margin: 6px 0 4px; }
    .lc-demo-live .lc2-sec-head p { font-size: 14.5px; line-height: 1.4; margin: 0; }
    .lc-demo-live .lc2-demo-shell { display: block; margin-top: 0; }
    .lc-demo-live .lc2-demo-right { display: none; }
    .lc-demo-live .lc2-demo-left { display: flex; flex-direction: column; height: calc(100dvh - 384px); min-height: 320px; }
    .lc-demo-live .lc2-demo-tabs { flex: none; margin-bottom: 12px; }
    .lc-demo-live .lc2-phone { flex: 1 1 auto; height: auto; min-height: 0; }
    .lc-demo-live #lc2-book-main { overflow-y: auto; }
    .lc-demo-live .lc2-portal-body { overflow-y: auto; }
}

/* v2.6.47 — DEMO BEAUTY PASS (Mohamed: "a tool users love — work
   properly and beautiful UI"). Cosmetics only, scoped to the demo
   shell so the popup and /demo/ share it: segmented tabs, a refined
   phone frame, even spacing rhythm, rounded cards, tabular figures,
   soft shadows, pressed states, and calm 160ms motion. No layout
   structure or sizing changes (the one-screen fit math is upstream
   in this same build). */
.lc2-demo-shell .lc2-demo-tabs { background: var(--lc2-mist); border: 1px solid var(--lc2-line); border-radius: 16px; padding: 4px; gap: 4px; }
.lc2-demo-shell .lc2-demo-tab { border: 0; border-radius: 12px; background: transparent; min-height: 44px; font-size: 15.5px; }
.lc2-demo-shell .lc2-demo-tab.is-on { background: var(--lc2-ink); color: #fff; box-shadow: 0 4px 14px rgba(12, 12, 14, .22); }
.lc2-demo-shell .lc2-phone { border-radius: 38px; border: 1px solid var(--lc2-line); box-shadow: 0 30px 70px rgba(12, 12, 14, .20), 0 4px 16px rgba(12, 12, 14, .08); overflow: hidden; }
.lc2-demo-shell .lc2-phone-notch { width: 84px; height: 20px; border-radius: 999px; opacity: .9; }
.lc2-demo-shell .lc2-screen { animation: lc2-screen-in 180ms ease-out; }
@keyframes lc2-screen-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lc2-demo-shell .lc2-book-head { padding: 22px 20px 18px; }
.lc2-demo-shell .lc2-book-body { padding: 18px 18px 20px; }
.lc2-demo-shell .lc2-price-line { padding: 11px 0; font-size: 15px; border-bottom: 1px solid var(--lc2-line); }
.lc2-demo-shell .lc2-price-line strong { font-variant-numeric: tabular-nums; }
.lc2-demo-shell .lc2-chip { min-height: 40px; padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 550; }
.lc2-demo-shell .lc2-chip.is-on { box-shadow: 0 3px 10px rgba(12, 12, 14, .18); }
.lc2-demo-shell .lc2-stepper-btn { width: 44px; height: 44px; border-radius: 999px; font-size: 20px; }
.lc2-demo-shell .lc2-book-btn, .lc2-demo-shell #lc2-book-btn { min-height: 54px; border-radius: 14px; font-size: 16.5px; font-weight: 600; box-shadow: 0 10px 24px rgba(10, 122, 55, .25); }
.lc2-demo-shell .lc2-btn:active, .lc2-demo-shell .lc2-chip:active, .lc2-demo-shell .lc2-demo-tab:active, .lc2-demo-shell .lc2-ptab:active, .lc2-demo-shell .lc2-kit-tile:active { transform: scale(.98); }
.lc2-demo-shell .lc2-portal-head { padding: 16px 14px 12px; }
.lc2-demo-shell .lc2-portal-head strong { font-size: 15.5px; white-space: nowrap; }
.lc2-demo-shell .lc2-live-pill { flex: none; font-size: 12px; padding: 6px 10px; }
.lc2-demo-shell .lc2-pcard, .lc2-demo-shell .lc2-order-row { border-radius: 16px; border: 1px solid var(--lc2-line); }
.lc2-demo-shell .lc2-earn-big, .lc2-demo-shell #lc2-earn-amt { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lc2-demo-shell .lc2-portal-tabs { border-top: 1px solid var(--lc2-line); padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
.lc2-demo-shell .lc2-ptab { border-radius: 12px; font-size: 10.5px; font-weight: 600; }
.lc2-demo-shell .lc2-ptab.is-on { background: var(--lc2-green-soft); }
.lc2-demo-shell .lc2-check-item { border-radius: 12px; padding: 11px 12px; }
.lc2-demo-shell .lc2-kit-tile { border-radius: 16px; border: 1px solid var(--lc2-line); }
.lc2-demo-shell .lc2-toast { border-radius: 999px; padding: 12px 18px; font-size: 14px; font-weight: 550; box-shadow: 0 14px 34px rgba(12, 12, 14, .28); }
.lc2-demo-shell button:focus-visible, .lc2-demo-shell a:focus-visible { outline: 2px solid var(--lc2-green-ink); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
    .lc2-demo-shell .lc2-phone { box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 4px 16px rgba(0, 0, 0, .4); }
    .lc2-demo-shell .lc2-demo-tab.is-on { background: #f5f5f4; color: #141416; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
}

/* v2.6.48 — Domain + Email flow (append-only): TEST MODE badge, result
   rows and the countdown read clearly at phone size; everything else
   reuses the card/field/button system. */
.lc-domain-testbadge { background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; border-radius: 12px; padding: 0.6rem 0.75rem; margin: 0 0 0.75rem; font-size: 0.92em; }
.lc-domain-countdown { font-variant-numeric: tabular-nums; }
.lc-domain-results .lc-btn { white-space: nowrap; }
@media (prefers-color-scheme: dark) {
    .lc-domain-testbadge { background: #451a03; border-color: #b45309; color: #fde68a; }
}

/* v2.6.53 — SEO batch (append-only): income calculator, state hubs, and
   the city-guide "next" block appended to single posts. Everything runs
   on the --lcx-* master tokens, so dark mode arrives through the aliases
   like the rest of the system. */
.lc-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .lc-calc-grid { grid-template-columns: 1fr; } }
.lc-calc-field label { display: block; font-weight: 600; font-size: var(--lcx-fs-2); color: var(--lcx-ink-2); margin: 0 0 6px; }
.lc-calc-field input { width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 14px; font-size: var(--lcx-fs-3); font-family: inherit; color: var(--lcx-ink); background: var(--lcx-surface); border: 1px solid var(--lcx-line-strong); border-radius: var(--lcx-r-sm); }
.lc-calc-field input:focus { outline: 2px solid var(--lcx-blue); outline-offset: 1px; border-color: var(--lcx-blue); }
.lc-calc-help { margin: 6px 0 0; font-size: var(--lcx-fs-2); line-height: 1.5; color: var(--lcx-ink-3); }
.lc-calc-results { margin-top: 20px; border: 1px solid var(--lcx-line); border-radius: var(--lcx-r-lg); overflow: hidden; }
.lc-calc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--lcx-surface); font-size: var(--lcx-fs-3); }
.lc-calc-row + .lc-calc-row { border-top: 1px solid var(--lcx-line); }
.lc-calc-row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-calc-total { background: var(--lcx-green-soft); color: var(--lcx-green-ink); font-weight: 600; }
.lc-calc-total strong { font-size: var(--lcx-fs-5); letter-spacing: -0.01em; }
.lc-calc-note { margin: 14px 0 0; font-size: var(--lcx-fs-2); line-height: 1.55; color: var(--lcx-ink-3); }
.lc-hub-facts { list-style: none; margin: 0; padding: 0; }
.lc-hub-facts li { padding: 10px 0; font-size: var(--lcx-fs-3); line-height: 1.55; border-top: 1px solid var(--lcx-line); }
.lc-hub-facts li:first-child { border-top: none; padding-top: 0; }
.lc-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .lc-hub-grid { grid-template-columns: 1fr; } }
.lc-hub-card { display: block; padding: 18px; border: 1px solid var(--lcx-line-strong); border-radius: var(--lcx-r-lg); background: var(--lcx-surface); text-decoration: none; transition: transform var(--lcx-dur-fast) var(--lcx-ease), box-shadow var(--lcx-dur-fast) var(--lcx-ease); }
.lc-hub-card:hover { box-shadow: var(--lcx-shadow); transform: translateY(-1px); }
.lc-hub-card-title { display: block; font-size: var(--lcx-fs-4); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--lcx-ink); }
.lc-hub-card-sub { display: block; margin-top: 6px; font-size: var(--lcx-fs-2); color: var(--lcx-ink-3); }
.lc-hub-card-more { display: inline-block; margin-top: 10px; font-size: var(--lcx-fs-2); font-weight: 600; color: var(--lcx-green-ink); }
.lc-city-next { margin-top: 36px; padding: 24px; background: var(--lcx-mist); border: 1px solid var(--lcx-line); border-radius: var(--lcx-r-lg); }
.lc-city-next h2 { margin-top: 0; }
.lc-city-next p { line-height: 1.55; }
.lc-city-next-sibs a, .lc-city-next-calc a { display: inline-block; padding: 10px 2px; font-weight: 600; }

/* ------------------------------------------------------------------
   v2.6.55 — BOOKING STEPPERS + DEMO PROFILE-BAND CLIP FIX
   (Mohamed's orders: "a 3 step process… users should not scroll at
   all… make it feel premium" + "make sure the profile is not cut
   off at the top").

   THE CLIP: the demo booking band (v2.6.18) bled to the phone's
   edges with margin:-34px -18px — but the band lives inside
   #lc2-book-main, an overflow-y:auto scroll container, so the
   band's top 34px (its top edge, its rounded corners and the
   photo's breathing room) sat ABOVE the scrollport and was clipped
   permanently; only 8px of the intended 42px top padding survived.
   The band now renders as a rounded card fully inside the box:
   margin 0, its own padding, photo whole, clean air above it. The
   (0,3,0) selectors below outrank both the v2.6.18 bleed rules and
   their ≤680px variant.

   THE STEPPERS: the demo booking (lc2-) and the Suds & Fold sample
   form (lcs-) become three one-screen steps with the same progress
   shape as the real booking form. Panels carry no hidden attribute
   in the markup — lc-demo.js hides steps 2–3 on init, so without
   JS everything renders stacked. Rows are compact by construction
   so each step fits the phone without an inner scroll.
   ------------------------------------------------------------------ */
.lc2-demo-shell .lc2-screen-book .lc2-book-head {
    margin: 0 0 14px; padding: 18px; border-radius: 20px;
}
.lc2-demo-shell .lc2-screen-book .lc2-book-head img { width: 56px; height: 56px; }
.lc2-demo-shell .lc2-book-badges { margin: 0 0 2px; }

/* Progress — one shape for both demo steppers. */
.lc2-stepprog, .lcs-stepprog { margin: 2px 0 14px; }
.lc2-stepprog-dots, .lcs-stepprog-dots { display: flex; list-style: none; margin: 0; padding: 0; }
.lc2-stepprog-dots li, .lcs-stepprog-dots li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lc2-stepprog-num, .lcs-stepprog-num {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
    background: var(--lc2-paper); border: 2px solid var(--lc2-line); color: var(--lc2-ink-2);
}
.lc2-stepprog-dots li.is-on .lc2-stepprog-num, .lcs-stepprog-dots li.is-on .lcs-stepprog-num { background: var(--lc2-green); border-color: var(--lc2-green); color: #fff; }
.lc2-stepprog-dots li.is-done .lc2-stepprog-num, .lcs-stepprog-dots li.is-done .lcs-stepprog-num { background: var(--lc2-green-soft); border-color: var(--lc2-green); color: var(--lc2-green-deep); }
.lc2-stepprog-dots small, .lcs-stepprog-dots small { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--lc2-ink-3); }
.lc2-stepprog-dots li.is-on small, .lcs-stepprog-dots li.is-on small { color: var(--lc2-ink); }
.lc2-stepprog-track, .lcs-stepprog-track { height: 3px; border-radius: 999px; background: var(--lc2-line); margin: 8px 8% 0; overflow: hidden; }
.lc2-stepprog-fill, .lcs-stepprog-fill { display: block; height: 100%; width: 33.333%; background: var(--lc2-green); border-radius: 999px; transition: width 220ms ease-out; }

/* Panels + nav. */
.lc2-bstep[hidden], .lcs-step[hidden] { display: none !important; }
.lc2-bstep, .lcs-step { animation: lc2-screen-in 180ms ease-out; }
.lc2-stepnav, .lcs-stepnav { display: flex; gap: 10px; margin-top: 16px; }
.lc2-stepnav .lc2-btn { min-height: 52px; border-radius: 14px; }
.lc2-stepnav-next { flex: 1; }
#lc2-step-back { flex: none; padding-left: 20px; padding-right: 20px; }
.lcs-stepnav .lc-btn { min-height: 52px; }
.lcs-next { flex: 1; }
.lcs-back { flex: none; padding-left: 20px; padding-right: 20px; background: transparent; border: 1px solid var(--lc2-line); color: var(--lc2-ink); }
#lcs-step-back[hidden], #lc2-step-back[hidden] { display: none !important; }

/* Demo booking step 1: condensed price list + slim running total. */
.lc2-demo-shell .lc2-bstep .lc2-price-line { padding: 7px 0; font-size: 14.5px; }
.lc2-demo-shell .lc2-bstep h5:first-child { margin-top: 2px; }
.lc2-step-total { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lc2-line); }

/* Sample form pieces. */
.lcs-bags-input { width: 72px; flex: none; text-align: center; font-weight: 600; }
.lcs-field-lab { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }
.lcs-date-native { display: none; }
.lcs-recap {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    background: var(--lc2-mist); border-radius: 12px; padding: 12px 14px; margin: 14px 0;
    font-size: 14.5px;
}
.lcs-recap span { color: var(--lc2-ink-2); }
.lcs-recap strong { font-variant-numeric: tabular-nums; text-align: right; }

@media (prefers-reduced-motion: reduce) {
    .lc2-bstep, .lcs-step { animation: none; }
    .lc2-stepprog-fill, .lcs-stepprog-fill { transition: none; }
}

/* ------------------------------------------------------------------
   v2.6.56 — STEPPER COMPACTION (append-only; Mohamed's "users
   should not scroll at all" measured against v2.6.55 at 390px).
   Every step now fits its screen/box by construction:
   - Demo booking sheet: the tall profile band card becomes a slim
     brand bar INSIDE the booking screen only (44px photo whole,
     name, location + sample pill on one line — the band is never
     clipped and never bleeds); the badges row and the referral
     line step aside in this screen, the progress keeps its dots
     (track steps aside), and step 3's recap is one compact row.
     The portal screens keep the v2.6.55 band untouched.
   - Suds & Fold sample form: name/address and the two note boxes
     pair up in two-column rows; wash preferences become a compact
     two-column grid; each step's total height lands under 720px.
   ------------------------------------------------------------------ */

/* Progress — tighter for both demo steppers. */
.lc2-stepprog, .lcs-stepprog { margin: 0 0 10px; }
.lc2-stepprog-dots li, .lcs-stepprog-dots li { gap: 3px; }
.lc2-stepprog-num, .lcs-stepprog-num { width: 24px; height: 24px; font-size: 12.5px; }
.lc2-stepprog-dots small, .lcs-stepprog-dots small { font-size: 11px; }
.lc2-stepprog-track, .lcs-stepprog-track { margin-top: 6px; }

/* Booking screen: slim brand bar (replaces the band card here only). */
.lc2-demo-shell .lc2-screen-book .lc2-book-head {
    margin: 0 0 4px; padding: 7px 12px; border-radius: 16px; gap: 10px;
}
.lc2-demo-shell .lc2-screen-book .lc2-book-head img { width: 44px; height: 44px; }
.lc2-demo-shell .lc2-screen-book .lc2-book-head h4 { font-size: 16px; line-height: 1.2; margin: 0; }
.lc2-demo-shell .lc2-screen-book .lc2-book-head p { font-size: 12px; line-height: 1.3; margin: 0; display: inline; }
.lc2-demo-shell .lc2-screen-book .lc2-book-head .lc2-book-sample {
    display: inline-block; margin-left: 6px; padding: 2px 8px;
    background: rgba(255, 255, 255, .18); border-radius: 999px;
    font-size: 10.5px; letter-spacing: .04em; vertical-align: 1px; color: #fff;
}
/* Booking screen: badges + dots-only progress keep the stack slim. */
.lc2-demo-shell .lc2-screen-book .lc2-book-badges { display: none; }
.lc2-demo-shell .lc2-screen-book .lc2-stepprog { margin: 0 0 4px; }
.lc2-demo-shell .lc2-screen-book .lc2-stepprog-track { display: none; }

/* Booking panels: tighter rows everywhere. */
.lc2-demo-shell .lc2-bstep h5 { font-size: 15px; margin: 10px 0 5px; }
.lc2-demo-shell .lc2-bstep h5:first-child { margin-top: 0; }
.lc2-demo-shell .lc2-bstep .lc2-price-line { padding: 5px 0; font-size: 14px; }
.lc2-demo-shell .lc2-stepper { gap: 12px; }
.lc2-demo-shell .lc2-stepper-btn { width: 44px; height: 44px; }
.lc2-demo-shell .lc2-stepper-val { font-size: 24px; }
.lc2-demo-shell .lc2-stepper-note { font-size: 12.5px; }
.lc2-step-total { margin-top: 10px; padding-top: 8px; }
.lc2-demo-shell .lc2-bstep .lc2-total-line strong { font-size: 22px; }
.lc2-demo-shell .lc2-bstep .lc2-chip { min-height: 44px; padding: 8px 13px; font-size: 13.5px; }
.lc2-demo-shell .lc2-bstep .lc2-chip-pref { min-height: 32px; padding: 5px 10px; font-size: 12.5px; }

/* Booking step 3: one-line recap, slim Book, tighter trust list.
   The recap box's long note steps aside here — its promise is
   repeated word-for-word on the success screen. The referral
   line steps aside in this screen too (it lives on the pro page). */
.lc2-demo-shell .lc2-screen-book .lc2-total-box { padding: 8px 12px; margin-top: 8px; }
.lc2-demo-shell .lc2-screen-book .lc2-total-box p { display: none; }
.lc2-demo-shell .lc2-screen-book .lc2-total-line { font-size: 15px; }
.lc2-demo-shell .lc2-screen-book .lc2-total-line strong { font-size: 22px; }
.lc2-demo-shell .lc2-book-btn { margin-top: 8px; min-height: 46px; }
.lc2-demo-shell .lc2-screen-book .lc2-trust-list { margin-top: 10px; }
.lc2-demo-shell .lc2-screen-book .lc2-trust-list li { font-size: 11.5px; line-height: 1.3; padding-left: 20px; margin-bottom: 4px; }
.lc2-demo-shell .lc2-screen-book .lc2-trust-list li:last-child { margin-bottom: 0; }
.lc2-demo-shell .lc2-screen-book .lc2-trust-list li::before { width: 13px; height: 13px; top: 1px; }
.lc2-demo-shell .lc2-screen-book .lc2-giveget { display: none; }
.lc2-demo-shell .lc2-screen-book .lc2-stepnav { margin-top: 6px; }
.lc2-demo-shell .lc2-screen-book .lc2-stepnav .lc2-btn { min-height: 48px; }

/* Suds & Fold sample form: paired rows + compact preference grid. */
.lcs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lcs-grid2 .lc-field { margin-bottom: 0; }
#lcs-book-form .lc-field { margin-bottom: 10px; }
#lcs-book-form .lc-field > label, #lcs-book-form .lcs-field-lab { font-size: 13px; margin-bottom: 5px; }
#lcs-book-form .lc-field input:not([type="checkbox"]):not([type="radio"]), #lcs-book-form .lc-field select { min-height: 46px; }
#lcs-book-form .lc2-stepper-btn { width: 44px; height: 44px; }
#lcs-book-form .lc-speed-opt { padding: 10px 12px; gap: 10px; }
#lcs-book-form .lc-speed-text strong { font-size: 15px; }
#lcs-book-form .lc-speed-text small { font-size: 12.5px; }
#lcs-book-form .lc2-chip { min-height: 44px; padding: 8px 12px; }
#lcs-book-form .lc-pref-group { display: grid; grid-template-columns: 1fr 1fr; }
#lcs-book-form .lc-pref-item { padding: 9px 10px; }
#lcs-book-form .lc-pref-item + .lc-pref-item { border-top: none; }
#lcs-book-form .lc-pref-item:nth-child(odd) { border-right: 1px solid var(--lc-line-soft); }
#lcs-book-form .lc-pref-item:nth-child(n+3) { border-top: 1px solid var(--lc-line-soft); }
#lcs-book-form .lc-pref-toggle { grid-column: 1 / -1; border-right: none; }
#lcs-book-form .lc-pref-lab { font-size: 12.5px; margin-bottom: 4px; }
#lcs-book-form .lc-pref-select { padding: 9px 34px 9px 12px; min-height: 44px; font-size: 15px; }
#lcs-book-form .lc-pref-textarea { min-height: 56px; padding: 9px 12px; font-size: 15px; }
#lcs-book-form .lcs-recap { padding: 9px 12px; margin: 10px 0; font-size: 14px; }
#lcs-book-form .lcs-stepnav { margin-top: 10px; }
#lcs-book-form .lcs-stepnav .lc-btn { min-height: 48px; }

/* ------------------------------------------------------------------
   v2.6.57 — STEPPER COMPACTION ROUND 2 (append-only; v2.6.56 was
   measured live at 390px and three spots still scrolled: the demo
   sheet at the 740px phone height, and Suds step 3).
   - Demo booking sheet: the brand bar's text wraps as name + pill
     on one line and location on the next (the 44px photo still
     rules the bar's height, whole and unclipped); the booking
     body's padding slims; the third trust line moved to the
     success screen (markup move in templates/demo-shell.php).
   - Suds & Fold step 3: preference rows, textareas and recap slim
     further; the paired-row fields' margins are re-asserted at
     this specificity (the form-wide field rule outranked the
     v2.6.56 grid rule, so paired fields kept their 10px margins).
   The portal screens keep their band untouched, as before.
   ------------------------------------------------------------------ */

/* Booking screen brand bar: two slim text rows beside the photo. */
.lc2-demo-shell .lc2-screen-book .lc2-book-head { padding: 6px 10px; gap: 8px; margin: 0 0 2px; }
.lc2-demo-shell .lc2-screen-book .lc2-book-head > div { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-width: 0; }
.lc2-demo-shell .lc2-screen-book .lc2-book-head h4 { font-size: 14.5px; line-height: 1.15; order: 1; }
.lc2-demo-shell .lc2-screen-book .lc2-book-head .lc2-book-sample { order: 2; margin-left: 0; padding: 1px 7px; font-size: 9.5px; }
.lc2-demo-shell .lc2-screen-book .lc2-book-head p:not(.lc2-book-sample) { order: 3; flex: 0 0 100%; font-size: 11.5px; line-height: 1.25; margin-top: 1px; }

/* Booking body: slimmer padding + tighter rows on every step. */
.lc2-demo-shell .lc2-screen-book .lc2-book-body { padding: 10px 18px 12px; }
.lc2-demo-shell .lc2-screen-book .lc2-stepprog { margin: 0 0 2px; }
.lc2-demo-shell .lc2-bstep h5 { margin: 8px 0 4px; }
.lc2-demo-shell .lc2-bstep .lc2-price-line { padding: 4px 0; }
.lc2-demo-shell .lc2-bstep .lc2-chips { gap: 6px; }
.lc2-step-total { margin-top: 8px; padding-top: 6px; }
.lc2-demo-shell .lc2-screen-book .lc2-total-box { padding: 6px 12px; margin-top: 6px; }
.lc2-demo-shell .lc2-screen-book .lc2-trust-list { margin-top: 8px; }
.lc2-demo-shell .lc2-screen-book .lc2-trust-list li { font-size: 11px; line-height: 1.25; margin-bottom: 3px; }
.lc2-demo-shell .lc2-screen-book .lc2-stepnav { margin-top: 4px; }

/* The guest trust line on the success screen reads as a list,
   left-aligned like on the booking step it came from. */
#lc2-book-success .lc2-trust-list { text-align: left; max-width: 320px; margin: 10px auto 2px; }
#lc2-book-success .lc2-trust-list li { margin-bottom: 0; }

/* Suds & Fold step 3: the last tall panel slims down. */
#lcs-book-form [data-lcs-step="3"] .lc-field { margin-bottom: 8px; }
#lcs-book-form .lcs-grid2 .lc-field { margin-bottom: 0; }
#lcs-book-form [data-lcs-step="3"] .lc-field > label { margin-bottom: 4px; }
#lcs-book-form [data-lcs-step="3"] .lc-field input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; }
#lcs-book-form [data-lcs-step="3"] .lc-pref-item { padding: 4px 10px; }
#lcs-book-form [data-lcs-step="3"] .lc-pref-lab { font-size: 12px; margin-bottom: 3px; }
#lcs-book-form [data-lcs-step="3"] .lc-pref-select { min-height: 38px; padding: 6px 34px 6px 12px; }
#lcs-book-form [data-lcs-step="3"] .lc-pref-textarea { min-height: 36px; padding: 7px 12px; }
#lcs-book-form [data-lcs-step="3"] .lcs-recap { padding: 6px 12px; margin: 6px 0; }
#lcs-book-form [data-lcs-step="3"] .lc-fineprint { margin: 2px 0 4px; }
#lcs-book-form .lcs-stepnav { margin-top: 6px; }

/* ================================================================
   v2.6.60 — VISUAL SWEEP FIXES (2026-10-22)
   The signed-in header overflowed a phone screen: logo + wordmark +
   "Pro Dashboard" + the account cluster (avatar + name + caret)
   needed ~555px, so the account button sat half off the right edge
   on every signed-in page. On phone widths the signed-in header now
   carries the logo tile, the dashboard button, and the avatar alone
   (name + caret hidden); the logged-out header already fits and is
   untouched.
   ================================================================ */
.lc2-nav-inner, .lc2-nav-right { min-width: 0; }
@media (max-width: 720px) {
    .lc2-nav:has(.lcx-acct) .lc2-brand-name { display: none; }
    .lcx-acct-name, .lcx-acct-caret { display: none; }
    .lcx-acct-btn { padding-left: 4px; padding-right: 4px; }
}

/* v2.7.0 — payout lane picker ("Where should your money go?") */
.lc-lane-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 14px}
.lc-lane{display:flex;flex-direction:column;gap:2px;padding:14px;border:1px solid var(--lc-line,#E7E5E0);border-radius:12px;cursor:pointer;background:#fff}
.lc-lane input{position:absolute;opacity:0;pointer-events:none}
.lc-lane-on{border-color:#0B0B0C;box-shadow:0 0 0 1px #0B0B0C}
.lc-lane-name{font-weight:600;font-size:16px}
.lc-lane-meta{font-size:14px;opacity:.72}
@media (prefers-color-scheme:dark){.lc-lane{background:#141416;border-color:#2A2A2E}.lc-lane-on{border-color:#FAFAF9;box-shadow:0 0 0 1px #FAFAF9}}

/* v2.8.0: 7-Day First Order Path (spec §3 + §9 UI standard) */
.lc-path-steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.lc-path-step{border:1px solid #E7E5E4;border-radius:16px;padding:12px;background:#fff}
.lc-path-step.is-current{border-color:#0B0B0C;box-shadow:0 0 0 1px #0B0B0C}
.lc-path-step-row{display:block}
.lc-path-row-flex{display:flex;align-items:flex-start;gap:12px;min-height:48px}
.lc-path-step-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.lc-path-step-body strong{font-size:16px}
.lc-path-day{flex:none;font-size:12px;font-weight:600;letter-spacing:.02em;padding:4px 10px;border-radius:999px;background:#F5F5F4;color:#44403C}
.lc-path-step.is-done .lc-path-day{background:#ECFDF5;color:#065F46}
.lc-path-panel{margin-top:12px;border-top:1px solid #E7E5E4;padding-top:16px}
.lc-path-panel>*:first-child{margin-top:0}
.lc-path-h{font-size:16px;margin:20px 0 8px}
.lc-path-subs{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px}
.lc-path-sub{display:flex;align-items:center;gap:12px;min-height:48px}
.lc-path-sub-body{flex:1;display:flex;flex-direction:column;min-width:0}
.lc-path-qr{display:flex;gap:16px;align-items:flex-start;margin-top:16px}
.lc-path-qr img{border-radius:12px;border:1px solid #E7E5E4;flex:none}
.lc-path-times{display:flex;flex-direction:column;gap:8px;margin:16px 0 8px}
.lc-path-time{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:8px 12px;border:1px solid #E7E5E4;border-radius:12px}
.lc-path-supplies{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px}
.lc-path-supply{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border:1px solid #E7E5E4;border-radius:12px;cursor:pointer}
.lc-path-supply input{width:22px;height:22px;flex:none;accent-color:#0B0B0C}
.lc-path-supply-label{flex:1;font-size:14px}
.lc-path-supply-est{font-weight:600;font-size:14px}
.lc-path-supply-find{font-size:14px;font-weight:600;min-height:48px;display:flex;align-items:center;padding:0 4px}
.lc-path-ready{display:flex;align-items:center;gap:8px;font-weight:600;margin:16px 0 0}
.lc-path-fields{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.lc-path-field{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid #E7E5E4;border-radius:12px}
.lc-path-field span{font-size:12px;letter-spacing:.02em;opacity:.72;text-transform:uppercase}
.lc-path-field strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.lc-path-howto{margin:16px 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.lc-path-track{margin-top:20px;border-top:1px solid #E7E5E4;padding-top:16px}
.lc-path-track-now{margin:0 0 10px;font-weight:600}
.lc-path-track-btns{display:flex;flex-wrap:wrap;gap:8px}
.lc-path-track-btns .lc-btn{min-height:48px;display:inline-flex;align-items:center}
.lc-path-offers{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px}
.lc-path-offer{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid #E7E5E4;border-radius:12px;cursor:pointer;min-height:48px}
.lc-path-offer input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:#0B0B0C}
.lc-path-offer-body{display:flex;flex-direction:column;gap:2px}
@media (prefers-color-scheme:dark){
.lc-path-step{background:#141416;border-color:#2A2A2E}
.lc-path-step.is-current{border-color:#FAFAF9;box-shadow:0 0 0 1px #FAFAF9}
.lc-path-panel{border-top-color:#2A2A2E}
.lc-path-day{background:#1F1F22;color:#D6D3D1}
.lc-path-step.is-done .lc-path-day{background:#052E22;color:#6EE7B7}
.lc-path-qr img{border-color:#2A2A2E}
.lc-path-time,.lc-path-supply,.lc-path-field,.lc-path-offer{border-color:#2A2A2E}
.lc-path-track{border-top-color:#2A2A2E}
.lc-path-supply input,.lc-path-offer input{accent-color:#FAFAF9}
}

/* v2.9.0: Customer Journey order-card blocks (spec §4) */
.lc-journey-box{margin-top:12px;border:1px solid #E7E5E4;border-radius:12px;padding:12px}
.lc-journey-flag{margin-top:8px;font-size:14px;font-weight:600}
.lc-journey-checks{display:flex;flex-direction:column;gap:4px;margin:0 0 10px}
.lc-journey-checks label{display:flex;align-items:center;gap:10px;min-height:48px;font-size:14px;cursor:pointer}
.lc-journey-checks input{width:22px;height:22px;accent-color:#0B0B0C;flex:none}
@media (prefers-color-scheme:dark){
.lc-journey-box{border-color:#2A2A2E}
.lc-journey-checks input{accent-color:#FAFAF9}
}

/* v2.10.0: public pro directory + Starter Kit (spec §3.4) */
.lc-dir-city{margin:0 0 28px}
.lc-dir-city h2{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lc-dir-citylink{font-size:14px;font-weight:600}
.lc-dir-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0 20px}
@media(min-width:640px){.lc-dir-grid{grid-template-columns:1fr 1fr}}
.lc-dir-card{border:1px solid #E7E5E4;border-radius:16px;padding:16px;background:#fff}
.lc-dir-card h3{margin:0 0 4px;font-size:18px}
.lc-dir-where{margin:0 0 6px;opacity:.72;font-size:14px}
.lc-dir-price{margin:0 0 12px;font-weight:600}
.lc-dir-card .lc-btn{min-height:48px;display:inline-flex;align-items:center}
.lc-dir-recruit{border:1px dashed #A8A29E;border-radius:16px;padding:20px;margin:16px 0}
.lc-dir-recruit .lc-btn{min-height:48px;display:inline-flex;align-items:center}
.lc-kit{border:1px solid #E7E5E4;border-radius:16px;padding:20px;margin:24px 0;background:#fff}
.lc-kit-list{margin:8px 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.lc-kit-form{display:flex;flex-direction:column;gap:8px}
.lc-kit-form input{min-height:48px;padding:10px 12px;border:1px solid #E7E5E4;border-radius:12px;font-size:16px}
.lc-kit-form .lc-btn{min-height:48px}
@media(min-width:640px){.lc-kit-form{flex-direction:row}.lc-kit-form input{flex:1}}
@media (prefers-color-scheme:dark){
.lc-dir-card,.lc-kit{background:#141416;border-color:#2A2A2E}
.lc-dir-recruit{border-color:#44403C}
.lc-kit-form input{border-color:#2A2A2E;background:#0B0B0C;color:#FAFAF9}
}

/* v2.12.0 — Account page */
.lc-portal-acct { color: inherit; text-decoration: none; }
.lc-portal-acct:hover { text-decoration: underline; }
.lc-account .lc-acct-h { margin: 18px 0 8px; font-size: 1em; }
.lc-account .lc-acct-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lc-account .lc-acct-row input, .lc-account .lc-acct-row select { flex: 1 1 150px; }
.lc-account .lc-acct-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.lc-account .lc-acct-grid label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.lc-account .lc-acct-grid input, .lc-account .lc-acct-grid select { font-weight: 400; }
.lc-account .lc-acct-links { display: grid; gap: 10px; }
.lc-account .lc-acct-link { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; text-decoration: none; color: inherit; }
.lc-account .lc-acct-link:hover { border-color: rgba(0,0,0,.3); }
.lc-account .lc-acct-check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.lc-account .lc-acct-check span { display: flex; flex-direction: column; }
.lc-account .lc-acct-actions { display: grid; gap: 12px; margin-top: 16px; }
.lc-account .lc-acct-invoice { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.lc-account .lc-acct-details { margin: 12px 0; }
.lc-account .lc-acct-list { margin: 8px 0 16px 18px; display: grid; gap: 6px; }
.lc-account .lc-btn-danger { background: #b3261e; border-color: #b3261e; color: #fff; }
@media (prefers-color-scheme: dark) {
    .lc-account .lc-acct-link { border-color: rgba(255,255,255,.18); }
    .lc-account .lc-acct-invoice { border-bottom-color: rgba(255,255,255,.12); }
}

/* v2.13.0 — Numbers */
.lc-numbers .lc-num-totals { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 6px; }
.lc-numbers .lc-num-stat { display: flex; flex-direction: column; gap: 2px; }
.lc-numbers .lc-num-stat strong { font-size: 1.25em; }
.lc-numbers .lc-num-profit strong { font-size: 1.45em; }
.lc-numbers .lc-num-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.lc-numbers .lc-num-periods { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.lc-numbers .lc-num-costs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 12px; }
.lc-numbers .lc-num-costs label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.lc-numbers .lc-num-cost-in { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.lc-numbers .lc-num-cost-in input { width: 90px; }
@media (prefers-color-scheme: dark) {
    .lc-numbers .lc-num-row { border-bottom-color: rgba(255,255,255,.12); }
}

/* v2.15.0 — Promo Studio */
.lc-promo .lc-promo-streak { font-weight: 700; }
.lc-promo .lc-promo-nudge { padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.05); }
.lc-promo .lc-promo-slots { display: grid; gap: 14px; }
.lc-promo .lc-promo-slot { border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 12px; }
.lc-promo .lc-promo-slot.is-posted { opacity: .75; }
.lc-promo .lc-promo-slot-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.lc-promo .lc-promo-asset img { max-width: 100%; border-radius: 10px; display: block; }
.lc-promo .lc-promo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.lc-promo .lc-promo-caption { white-space: pre-wrap; margin-top: 10px; }
@media (prefers-color-scheme: dark) {
    .lc-promo .lc-promo-slot { border-color: rgba(255,255,255,.16); }
    .lc-promo .lc-promo-nudge { background: rgba(255,255,255,.07); }
}

/* v2.16.0 — Supplies */
.lc-supplies-alert { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lc-supplies .lc-sup-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.lc-supplies .lc-sup-restock-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
@media (prefers-color-scheme: dark) {
    .lc-supplies .lc-sup-row, .lc-supplies .lc-sup-restock-row { border-bottom-color: rgba(255,255,255,.12); }
}

/* v2.17.0 — My Assistant (Co-Founder) */
.lc-asst-head { display: flex; gap: 12px; align-items: center; }
.lc-asst-face { font-size: 40px; line-height: 1; }
.lc-asst-sug { border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 12px; margin: 10px 0; }
.lc-asst-sug-actions form { display: flex; gap: 8px; flex-wrap: wrap; }
.lc-asst-thread { display: grid; gap: 10px; margin-bottom: 12px; }
.lc-asst-msg { max-width: 85%; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.05); }
.lc-asst-msg-pro { justify-self: end; background: rgba(0,0,0,.09); }
.lc-asst-msg-who { font-size: .8em; font-weight: 700; display: block; margin-bottom: 2px; }
.lc-asst-msg p { margin: 0; }
.lc-asst-log-row { display: flex; gap: 14px; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.lc-asst-job { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; flex-wrap: wrap; }
.lc-asst-dogs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lc-asst-dog { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border: 1px solid rgba(0,0,0,.12); border-radius: 999px; cursor: pointer; }
@media (prefers-color-scheme: dark) {
    .lc-asst-sug, .lc-asst-dog { border-color: rgba(255,255,255,.18); }
    .lc-asst-msg { background: rgba(255,255,255,.07); }
    .lc-asst-msg-pro { background: rgba(255,255,255,.13); }
    .lc-asst-log-row { border-bottom-color: rgba(255,255,255,.12); }
}

/* Path step expansion (v2.8.1 fix, carried forward): every step opens. */
.lc-path-details > summary { cursor: pointer; list-style: none; }
.lc-path-details > summary::-webkit-details-marker { display: none; }
.lc-path-details > summary .lc-path-row-flex::after { content: "\25B8"; margin-left: auto; opacity: .55; align-self: center; }
.lc-path-details[open] > summary .lc-path-row-flex::after { content: "\25BE"; }

/* v2.19.0 plan picker (approved mockups 2026-10-31): canvas #fafaf9,
   ink #1c1917, blue #0b63d8, amber #e8b23e. One screen, one tap. */
.lc-picker { max-width: 560px; margin: 0 auto; padding: 30px 0 6px; color: #1c1917; }
.lc-picker-head { text-align: center; }
.lc-picker-logo { width: 72px; height: 72px; border-radius: 16px; display: inline-block; }
.lc-picker .lc-picker-title { font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; font-size: 34px; font-weight: 800; line-height: 1.15; margin: 14px 0 4px; color: #1c1917; letter-spacing: -0.01em; }
.lc-picker-sub { color: #6e767c; font-size: 16px; margin: 0 0 6px; }
.lc-picker-price { font-size: 26px; font-weight: 800; margin: 2px 0 0; color: #1c1917; }
.lc-picker-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #f2f3f4; border-radius: 999px; padding: 5px; margin: 18px 0 22px; }
.lc-picker-thumb { display: none; }
.lc-picker-tab { appearance: none; border: 0; background: transparent; padding: 12px 8px; border-radius: 999px; font-size: 17px; font-weight: 600; color: #6e767c; cursor: pointer; }
.lc-picker-tab.is-active { background: #fff; color: #1c1917; box-shadow: 0 1px 4px rgba(28,25,23,.14); }
.lc-picker-card { position: relative; background: #fff; border: 1.5px solid #e2e5e7; border-radius: 18px; padding: 20px 22px 14px; }
.lc-picker.is-unlimited .lc-picker-card { background: #1c1917; border-color: #1c1917; color: #f5f5f4; }
.lc-picker-tag { display: none; }
.lc-picker.is-unlimited .lc-picker-tag { display: block; position: absolute; top: -13px; right: 18px; background: #e8b23e; color: #1c1917; font-size: 11px; font-weight: 800; letter-spacing: .05em; padding: 5px 12px; border-radius: 999px; }
.lc-picker-row { display: grid; grid-template-columns: 1fr 62px 88px; align-items: center; padding: 9px 0; }
.lc-picker-row-head { font-size: 14px; font-weight: 600; color: #6e767c; padding-top: 0; }
.lc-picker.is-unlimited .lc-picker-row-head { color: #a8a29e; }
.lc-picker-feat { font-size: 16px; font-weight: 500; }
.lc-picker-col { text-align: center; font-size: 16px; }
.lc-picker-row-head .lc-picker-col-plus { color: #1c1917; }
.lc-picker-row-head .lc-picker-col-unl { color: #6e767c; }
.lc-picker.is-unlimited .lc-picker-row-head .lc-picker-col-plus { color: #a8a29e; }
.lc-picker.is-unlimited .lc-picker-row-head .lc-picker-col-unl { color: #e8b23e; }
.lc-picker-check { display: inline-flex; }
.lc-picker-check svg { width: 20px; height: 20px; }
.lc-picker-check.is-plus { color: #5a6267; }
.lc-picker-check.is-unl { color: #0b63d8; }
.lc-picker.is-unlimited .lc-picker-check.is-plus { color: #78716c; }
.lc-picker-dash { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: #c4cbcb; vertical-align: middle; }
.lc-picker-zero { color: #0b63d8; }
.lc-picker-cta { display: block; width: 100%; box-sizing: border-box; margin-top: 20px; padding: 17px 20px; border: 0; border-radius: 999px; background: #1c1917; color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.lc-picker.is-unlimited .lc-picker-cta { background: #0b63d8; }
.lc-picker-note { text-align: center; color: #6e767c; font-size: 14px; margin: 10px 0 0; }
.lc-picker-renew { text-align: center; color: #6e767c; font-size: 14px; margin: 14px 0 0; }
.lc-plan-switch { margin-top: 14px; }
.lc-plan-switch > summary { cursor: pointer; font-weight: 600; }
.lc-dir-featured { border-color: #e8b23e !important; }
.lc-dir-badge { display: inline-block; background: #e8b23e; color: #1c1917; font-size: 11px; font-weight: 800; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }
@media (max-width: 480px) {
    .lc-picker-row { grid-template-columns: 1fr 50px 76px; }
    .lc-picker-feat { font-size: 15px; }
    .lc-picker-title { font-size: 30px; }
}


/* Goals-form visible validation (v2.19.2) */
.lc-form-error { background: #fdf0ef; border: 1.5px solid #e5a19c; color: #8c2b23; border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 600; line-height: 1.45; margin: 0 0 14px; }


/* Domain step phone layout (v2.19.4, Mohamed's order): result rows stack —
   name on its own line, Reserve button full-width under it; the search row
   gets the same treatment so nothing crowds or overflows the card. */
.lc-domain-results .lc-domain-row { display: block; padding: 0.65rem 0; border-bottom: 1px solid #f0efed; }
.lc-domain-results .lc-domain-name { display: block; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; margin: 0 0 0.5rem; }
.lc-domain-results .lc-domain-reserve { display: block; width: 100%; text-align: center; white-space: normal; }
.lc-domain-results .lc-domain-row .lc-muted { display: block; }
.lc-domain-search-form { display: block; }
.lc-domain-search-form .lc-field { display: block; margin: 0 0 0.6rem; }
.lc-domain-search-form .lc-domain-q { width: 100%; box-sizing: border-box; }
.lc-domain-search-form .lc-btn { display: block; width: 100%; text-align: center; }


/* Phone steadiness pass (v2.19.5, Mohamed's order): on the app canvas
   nothing may render wider than the screen (no sideways drift or scroll
   zoom), and form fields sit at 16px so iOS never focus-zooms. */
body.lc-app { overflow-x: clip; }
body.lc-app .lcx-app { overflow-x: clip; }
body.lc-app img, body.lc-app iframe { max-width: 100%; }
.lc-picker, .lc-picker-compare { max-width: 100%; }
.lc-auth-card, .lc-card { min-width: 0; }
[id*="card-element"], .lc-stripe-box { min-width: 0; max-width: 100%; }
body.lc-app input, body.lc-app select, body.lc-app textarea { font-size: 16px; }


/* Payout lane details (v2.19.6): the picked lane's field shows inside its card */
.lc-lane-detail { display: none; margin-top: 10px; }
.lc-lane-on .lc-lane-detail { display: block; }
.lc-lane-field-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.lc-lane-detail input { position: static; opacity: 1; pointer-events: auto; width: 100%; box-sizing: border-box; font-size: 16px; padding: 10px 12px; border: 1.5px solid #c4cbcb; border-radius: 10px; background: #fff; }
.lc-lane-note { font-size: 14px; color: #6e767c; }


/* Dashboard repair pass (v2.19.9, Mohamed's order) */
/* 1 — the progress ring: the -90deg rotation belongs to the arc only
   (the fill circle already rotates itself); rotating the whole widget
   turned the "1/7" on its side. */
.lc2-ring { position: relative; width: 64px; height: 64px; flex: none; transform: none; }
.lc2-ring svg { display: block; }
/* 2 — the billing banner is a GREEN banner: a later layer repainted the
   card white but left the white heading behind (invisible). Restated whole. */
/* 3 — phone: card buttons go full-width so widths stop varying card to card */
@media (max-width: 640px) {
    .lc2-portal .lc-card .lc-btn:not(.lc-btn-small), .lc-portal-hero .lc-btn { width: 100%; justify-content: center; }
}
/* 4 — path setup rows: let the action drop under the text instead of
   squeezing it; the QR/link row stacks and the URL wraps */
.lc-path-sub { flex-wrap: wrap; }
.lc-path-sub-body { flex: 1 1 150px; }
.lc-path-sub .lc-btn { margin-left: auto; }
.lc-path-qr p.lc-muted { overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .lc-path-qr { flex-direction: column; }
}


/* ============================================================
   v2.20.0 — PRO DASHBOARD REBUILD (premium layer)
   One guided page: path first, then money, business, tools.
   Calm hierarchy, even rhythm, picker-grade cards.
   ============================================================ */
.lc2-portal { --lc-dash-line: #e7e5e4; }
.lc-dash-h { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #6e767c; margin: 30px 2px 12px; }
.lc2-view > .lc-dash-h:first-child { margin-top: 8px; }
.lc2-portal .lc-card:not(.lc-sub-banner) { background: #fff; border: 1px solid var(--lc-dash-line); border-radius: 20px; padding: 22px; box-shadow: 0 1px 2px rgba(28,25,23,.05); margin-bottom: 18px; }
.lc2-portal .lc-card h3, .lc2-portal .lc-card-title { letter-spacing: -.01em; }
.lc2-portal .lc-btn { border-radius: 12px; font-weight: 650; }
/* hero: slim and calm */
.lc-portal-hero { border-radius: 20px; padding: 22px; margin-bottom: 18px; }
.lc-portal-name { font-size: 27px; letter-spacing: -.02em; }
/* viewnav: one soft segmented track */
.lc2-viewnav { background: #f2f3f4; border: 1px solid var(--lc-dash-line); border-radius: 999px; padding: 4px; gap: 2px; margin-bottom: 20px; }
.lc2-viewnav-btn { border-radius: 999px; padding: 8px 15px; font-size: 14.5px; font-weight: 600; color: #44403c; }
.lc2-viewnav-btn.is-active { background: #1c1917; color: #fff; box-shadow: 0 1px 3px rgba(28,25,23,.25); }
/* the path leads: bigger ring, current step unmistakable */
.lc-path .lc2-ring { width: 74px; height: 74px; }
.lc-path .lc2-ring svg { width: 74px; height: 74px; }
.lc-path .lc2-ring-num { font-size: 17px; font-weight: 700; }
.lc-path-step { border: 1px solid var(--lc-dash-line); border-radius: 14px; margin-bottom: 10px; background: #fff; }
.lc-path-step.is-current { border: 1.5px solid #0b63d8; background: rgba(11,99,216,.03); }
.lc-path-step.is-current .lc-path-day { background: #0b63d8; color: #fff; }
.lc-path-step.is-done .lc2-check-box { background: #0b9e57; border-color: #0b9e57; color: #fff; }
.lc-path-panel { margin-top: 6px; }
/* money stats: one card, quiet dividers */
.lc-portal-stats.lc-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 6px 22px; }
.lc-portal-stats .lc-pstat { padding: 14px 4px; text-align: left; }
.lc-portal-stats .lc-pstat-num { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lc-portal-stats .lc-pstat-label { font-size: 12.5px; color: #6e767c; }
@media (min-width: 641px) { .lc-portal-stats.lc-card { grid-template-columns: repeat(4, 1fr); } }
/* tools: one list, rows that read like settings */
.lc-card.lc-tools { padding: 6px 0; }
.lc-tool-row { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; width: 100%; background: none; border: none; border-bottom: 1px solid #f0efed; padding: 14px 20px; cursor: pointer; text-align: left; font: inherit; }
.lc-tool-row:last-child { border-bottom: none; }
.lc-tool-name { font-size: 15.5px; font-weight: 650; color: #1c1917; }
.lc-tool-desc { grid-column: 1; font-size: 13.5px; color: #6e767c; margin-top: 1px; }
.lc-tool-arrow { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; color: #c4cbcb; line-height: 1; }


/* v2.20.1 — Copilot briefing: leads the dashboard, premium card language */
.lc-copilot-card { border: 1px solid var(--lc-dash-line, #e7e5e4); }
.lc-copilot-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 0; }
.lc-copilot-mode { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6e767c; background: #f2f3f4; border-radius: 999px; padding: 4px 10px; }
.lc-copilot-ai { font-size: 15.5px; line-height: 1.6; background: #fafaf9; border: 1px solid #f0efed; border-radius: 12px; padding: 14px 16px; }
.lc-insight { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0efed; }
.lc-insight:last-child { border-bottom: none; padding-bottom: 2px; }
.lc-insight-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #f2f3f4; display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; }
.lc-insight-body { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.5; }

/* v2.21.3: guest picker second CTA + directory card photo */
.lc-picker-cta-alt{background:#fff!important;color:#0b63d8!important;border:2px solid #0b63d8;margin-top:10px}
.lc-dir-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.lc-dir-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;background:#f2f3f4}
.lc-dir-initials{width:56px;height:56px;border-radius:50%;background:var(--lct-accent, #1E7A4C);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;flex:none}
.lc-dir-head h3{margin:0}

/* ==========================================================================
   v2.22.0 — PHASE 1: Mohamed's design tokens, single source of truth for
   the pro portal + signup surfaces. Every value below comes from the
   --lct-* tokens; nothing in this layer hardcodes a color or size outside
   them. Picker royal blue (#0b63d8) is retired inside this scope; black
   hero blocks are retired; ALL-CAPS labels are retired.
   ========================================================================== */
:root {
    --lct-bg: #FAFAF8;
    --lct-surface: #FFFFFF;
    --lct-surface-2: #F3F3F0;
    --lct-ink: #111111;
    --lct-ink-2: #5C5C58;
    --lct-ink-3: #70706B;
    --lct-hairline: rgba(0, 0, 0, .08);
    --lct-accent: #1E7A4C;
    --lct-accent-press: #17653E;
    --lct-accent-tint: #E7F2EB;
    --lct-danger: #C93B2B;
    --lct-warning: #B7791F;
    --lct-bar-bg: rgba(255, 255, 255, .88);
    --lct-on-accent: #FFFFFF;
    --lct-r-sm: 12px;
    --lct-r-md: 20px;
    --lct-r-lg: 28px;
    --lct-r-full: 999px;
}
@media (prefers-color-scheme: dark) {
    :root {
        --lct-bg: #0B0B0C;
        --lct-surface: #161618;
        --lct-surface-2: #1F1F22;
        --lct-ink: #F5F5F3;
        --lct-ink-2: #A1A19C;
        --lct-ink-3: #7C7C78;
        --lct-hairline: rgba(255, 255, 255, .10);
        --lct-accent: #3FB57A;
        --lct-accent-press: #34A068;
        --lct-accent-tint: #14301F;
        --lct-bar-bg: rgba(22, 22, 24, .88);
        --lct-on-accent: #0B0B0C;
    }
}

/* ---- Portal shell ---- */
.lc2-portal {
    background: var(--lct-bg);
    color: var(--lct-ink);
    padding-bottom: calc(49px + env(safe-area-inset-bottom) + 32px);
}
.lc2-portal .lc2-viewnav { display: none; }

/* The black band is gone: the greeting hero is a surface card now. */
.lc2-portal .lc-portal-hero {
    background: var(--lct-surface);
    color: var(--lct-ink);
    border: 1px solid var(--lct-hairline);
    border-radius: var(--lct-r-md);
    box-shadow: none;
}
.lc2-portal .lc-portal-hello,
.lc2-portal .lc-portal-name,
.lc2-portal .lc-portal-name a { color: var(--lct-ink); }
.lc2-portal .lc-portal-sub { color: var(--lct-ink-2); }

/* Cards: hairline OR shadow, never both — hairline wins.
   v2.23.0: :not(.lc-sub-banner) — this generic rule was silently
   unpainting the billing banner (equal specificity, later in file):
   the banner's white-text rules outranked it, leaving white text on
   a white card — an invisible banner on every billing-due dashboard. */
.lc2-portal .lc-card:not(.lc-sub-banner) {
    background: var(--lct-surface);
    border: 1px solid var(--lct-hairline);
    border-radius: var(--lct-r-md);
    box-shadow: none;
    color: var(--lct-ink);
}
.lc2-portal .lc-muted { color: var(--lct-ink-2); }
.lc2-portal a { color: var(--lct-accent); }
.lc2-portal .lc-pstat-num { font-variant-numeric: tabular-nums; color: var(--lct-ink); }
.lc2-portal .lc-pstat-label { color: var(--lct-ink-2); }

/* Headings speak at Title size, sentence case — no ALL-CAPS kickers. */
.lc2-portal .lc-dash-h {
    font-size: 22px; line-height: 28px; font-weight: 600;
    letter-spacing: 0; text-transform: none; color: var(--lct-ink);
}
.lc2-portal .lc-eyebrow,
.lc2-portal .lc-money-kicker,
.lc2-portal .lc2-kicker,
.lc2-portal .lc-copilot-mode,
.lc2-portal .lc2-pcard h5,
.lc2-portal .lc2-est-month h4,
.lc2-portal .lc2-show-earn-label,
.lc2-portal .lc-path-field span,
.lc2-portal .lc-table th,
.lc2-portal .lc2-money-table thead th {
    text-transform: none; letter-spacing: 0;
}
.lc2-portal .lc-copilot-mode {
    background: var(--lct-accent-tint); color: var(--lct-accent);
    border-radius: var(--lct-r-full);
}

/* Buttons: accent is the one primary color; targets >= 44px. */
.lc2-portal .lc-btn,
.lc-auth .lc-btn { border-radius: var(--lct-r-sm); min-height: 44px; }
.lc2-portal .lc-btn-lg, .lc-auth .lc-btn-lg { min-height: 52px; }
.lc2-portal .lc-btn-primary,
.lc-auth .lc-btn-primary {
    background: var(--lct-accent); border-color: var(--lct-accent); color: var(--lct-on-accent);
}
.lc2-portal .lc-btn-primary:hover,
.lc2-portal .lc-btn-primary:active,
.lc-auth .lc-btn-primary:hover,
.lc-auth .lc-btn-primary:active {
    background: var(--lct-accent-press); border-color: var(--lct-accent-press);
}
.lc2-portal .lc-btn-outline {
    background: var(--lct-surface); border: 1px solid var(--lct-hairline); color: var(--lct-ink);
}

/* Fields: accent focus, never the retired blue ring. */
.lc2-portal input:focus, .lc2-portal select:focus, .lc2-portal textarea:focus,
.lc-auth input:focus, .lc-auth select:focus, .lc-auth textarea:focus {
    border-color: var(--lct-accent);
    box-shadow: 0 0 0 3px var(--lct-accent-tint);
    outline: none;
}
.lc2-portal :focus-visible, .lc-auth :focus-visible, .lc-tabbar-btn:focus-visible {
    outline: 2px solid var(--lct-accent); outline-offset: 2px;
}

/* ---- Bottom TabBar (Today · Orders · Money · More) ---- */
.lc-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: flex; align-items: stretch;
    background: var(--lct-bar-bg);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--lct-hairline);
    padding-bottom: env(safe-area-inset-bottom);
}
.lc-tabbar-btn {
    flex: 1 1 0; min-height: 49px; padding: 6px 0 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: none; border: 0; cursor: pointer;
    color: var(--lct-ink-3); font-size: 11px; font-weight: 600; line-height: 1.2;
}
.lc-tabbar-btn.is-active { color: var(--lct-accent); }
.lc-tabbar-btn:active { transform: scale(.98); }
@media (min-width: 768px) {
    .lc-tabbar {
        left: 50%; right: auto; transform: translateX(-50%);
        width: 520px; max-width: calc(100vw - 32px);
        border: 1px solid var(--lct-hairline); border-bottom: 0;
        border-radius: var(--lct-r-md) var(--lct-r-md) 0 0;
    }
}

/* ---- Signup surfaces (same tokens) ---- */
.lc-auth .lc-auth-card {
    background: var(--lct-surface); color: var(--lct-ink);
    border: 1px solid var(--lct-hairline); border-radius: var(--lct-r-md);
    box-shadow: none;
}
.lc-auth .lc-money-progress { background: var(--lct-surface-2); }
.lc-auth .lc-money-progress-fill { background: var(--lct-accent); }
.lc-auth .lc-auth-steps .is-on b { background: var(--lct-accent); border-color: var(--lct-accent); }
.lc-auth .lc-muted { color: var(--lct-ink-2); }

/* v2.22.0 Phase 1 fix: the hero's inner rules out-specify the shell layer
   (they were written for the dark band) — restate them at winning
   specificity in token values, and keep the portal clear of the theme's
   sticky header when the view switcher scrolls it into view. */
.lc2-portal { scroll-margin-top: 96px; }
.lc2-portal .lc-portal-hero .lc-portal-hello { color: var(--lct-ink-2); }
.lc2-portal .lc-portal-hero .lc-portal-name,
.lc2-portal .lc-portal-hero .lc-portal-name a { color: var(--lct-ink); }
.lc2-portal .lc-portal-hero .lc-portal-sub { color: var(--lct-ink-2); }
.lc2-portal .lc-portal-hero .lc-btn-primary {
    background: var(--lct-accent); border-color: var(--lct-accent);
    color: var(--lct-on-accent); box-shadow: none;
}
.lc2-portal .lc-portal-hero .lc-btn-primary:hover {
    background: var(--lct-accent-press); border-color: var(--lct-accent-press);
    color: var(--lct-on-accent);
}
.lc2-portal .lc-portal-hero .lc-btn-outline {
    background: var(--lct-surface); border: 1px solid var(--lct-hairline);
    color: var(--lct-ink);
}

/* v2.22.0 Phase 1: the app canvas title band leaves black behind on every
   app page (surface + ink + hairline), and on the dashboard itself the
   band is removed — the portal's own greeting + TabBar are the header. */
.lcx-app-hero {
    background: var(--lct-surface); color: var(--lct-ink);
    border-bottom: 1px solid var(--lct-hairline);
}
.lcx-app-hero h1 { color: var(--lct-ink); }
.lc-landing:has(.lc2-portal) .lcx-app-hero { display: none; }

/* v2.22.1 Phase 1 dark coherence: the portal's older --lc2-* aliases and
   the (0,3,0) card rule at line ~3679 paint literal light values; in dark
   mode the aliases resolve to the brief's dark tokens and the card rule
   is restated at winning specificity. Light mode is untouched (its
   values already agree with the tokens). */
@media (prefers-color-scheme: dark) {
    .lc2-portal {
        --lc2-paper: var(--lct-surface);
        --lc2-ink: var(--lct-ink);
        --lc2-ink-2: var(--lct-ink-2);
        --lc2-ink-3: var(--lct-ink-3);
        --lc2-line: var(--lct-hairline);
        --lc-dash-line: var(--lct-hairline);
    }
    .lc2-portal .lc-card:not(.lc-sub-banner) {
        background: var(--lct-surface); box-shadow: none;
        border-color: var(--lct-hairline);
    }
    .lc2-portal .lc-copilot-ai {
        background: var(--lct-surface-2); border-color: var(--lct-hairline);
        color: var(--lct-ink);
    }
    .lc2-portal .lc-insight-ic { background: var(--lct-surface-2); }
    .lc2-portal .lc-tool-name { color: var(--lct-ink); }
    .lc2-portal .lc-tool-desc { color: var(--lct-ink-2); }
    .lc2-portal .lc-tool-row { border-bottom-color: var(--lct-hairline); }
    .lc2-portal .lc-portal-stats .lc-pstat-label { color: var(--lct-ink-2); }
}

/* ============================================================
   v2.22.5 — Tool-panel layout repair (Mohamed's phone shots,
   2026-11-01). Layout only: same fields, same handlers.
   The legacy tool panels (Commercial, Expenses, Discounts,
   Packages, Gift cards, Team, Zip fees, Loyalty, Customer book…)
   share three defects: (1) form controls sized content-box, so
   width:100% fields overflow their labels and touch/overlap at
   the seam; (2) inline flex rows whose min-widths exceed a phone
   card, squeezing pairs side-by-side with no real gap and
   trapping the submit button inside the row, on top of a field;
   (3) the .lc-pstat stat rendered as an inline span, so its card
   fragments across lines and the value falls outside it; plus
   WP-core .button styling (royal blue pills) leaking into the
   portal. Fixed here, once, for every panel with the pattern.
   ============================================================ */

/* (1) Form controls never overflow their label again. */
.lc2-portal .lc-card input,
.lc2-portal .lc-card select,
.lc2-portal .lc-card textarea {
    box-sizing: border-box;
    max-width: 100%;
}

/* (3) The stat is a card: whole, full width, value inside it. */
.lc2-portal .lc-pstat {
    display: block;
    text-align: left;
}
.lc2-portal .lc-pstat-num { font-variant-numeric: tabular-nums; }

/* Legacy core buttons inside portal cards wear the portal's
   clothes: no royal blue, real touch targets, token colors. */
.lc2-portal .lc-card .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--lct-r-full);
    background: var(--lct-surface);
    border: 1px solid var(--lct-hairline);
    color: var(--lct-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
}
.lc2-portal .lc-card .button-primary {
    background: var(--lct-accent);
    border-color: transparent;
    color: var(--lct-on-accent);
    min-height: 52px;
    padding: 12px 22px;
}
.lc2-portal .lc-card .button-primary:active { background: var(--lct-accent-press); }
.lc2-portal .lc-card .button-small {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13.5px;
}

/* Inline flex rows get a real gap at every width. */
.lc2-portal .lc-card form > div[style*="display:flex"],
.lc2-portal .lc-card form[style*="display:flex"] {
    gap: 12px !important;
}

/* (2) On phone the rows stack: label above, field full width,
   the action button on its own full-width row below the form —
   never beside or on top of a field. */
@media (max-width: 767px) {
    .lc2-portal .lc-card form > div[style*="display:flex"],
    .lc2-portal .lc-card form[style*="display:flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .lc2-portal .lc-card form > div[style*="display:flex"] > label,
    .lc2-portal .lc-card form[style*="display:flex"] > label {
        flex: none !important;
        width: 100%;
        min-width: 0 !important;
    }
    .lc2-portal .lc-card form > div[style*="display:flex"] > button,
    .lc2-portal .lc-card form[style*="display:flex"] > button {
        width: 100%;
        margin-top: 4px;
    }
    /* Data tables in these panels scroll sideways inside the
       card instead of squeezing their columns together. */
    .lc2-portal .lc-card .lc-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   v2.22.6 — Menu (sheet) redesign (Mohamed's order, 2026-11-01).
   One account card (avatar + name + plan line, taps through to
   My profile), grouped rows — "My business" and "Explore" —
   quiet group labels, one row height, a short subtitle and a
   right chevron on every row, hairline dividers, Phase 1 tokens
   throughout (dark mode follows the token layer). The duplicate
   Pro Dashboard header card/row is gone; the header's Pro
   Dashboard pill went with it (template change).
   ============================================================ */
.lc2-sheet { background: var(--lct-bg); color: var(--lct-ink); }
.lc2-sheet .lc2-brand, .lc2-sheet .lc2-brand-name { color: var(--lct-ink); }
.lc2-sheet-close {
    background: var(--lct-surface);
    border: 1px solid var(--lct-hairline);
    color: var(--lct-ink);
    border-radius: var(--lct-r-sm);
}
.lc2-sheet-links { margin-top: 4px; }
.lc2-sheet-glabel {
    font-size: 13px; font-weight: 600; color: var(--lct-ink-3);
    margin: 24px 4px 2px;
}
.lc2-sheet-group { display: flex; flex-direction: column; }
.lc2-sheet-group-after { margin-top: 24px; }
.lc2-sheet a.lc2-sheet-link {
    display: flex; align-items: center; gap: 10px;
    min-height: 60px; padding: 10px 4px;
    border-bottom: 1px solid var(--lct-hairline);
    color: var(--lct-ink); text-decoration: none;
}
.lc2-sheet-group .lc2-sheet-link:last-child { border-bottom: 0; }
.lc2-sheet-link-text { display: block; min-width: 0; }
.lc2-sheet .lc2-sheet-link-label {
    display: block; font-size: 16.5px; font-weight: 600;
    letter-spacing: 0; color: var(--lct-ink);
}
.lc2-sheet .lc2-sheet-link-sub {
    display: block; font-size: 13.5px; color: var(--lct-ink-2); margin-top: 1px;
}
.lc2-sheet-chev { margin-left: auto; flex: none; display: inline-flex; color: var(--lct-ink-3); }
.lc2-sheet a.lc2-sheet-acct {
    display: flex; align-items: center; gap: 12px;
    margin-top: 12px; padding: 14px;
    background: var(--lct-surface);
    border: 1px solid var(--lct-hairline);
    border-radius: var(--lct-r-md);
    color: var(--lct-ink); text-decoration: none;
}
.lc2-sheet-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    background: var(--lct-accent); color: var(--lct-on-accent);
    font-size: 19px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.lc2-sheet-acct-text { display: block; min-width: 0; }
.lc2-sheet-acct-name { display: block; font-size: 16.5px; font-weight: 700; color: var(--lct-ink); }
.lc2-sheet-acct-sub { display: block; font-size: 13.5px; color: var(--lct-ink-2); margin-top: 1px; }
.lc2-sheet a.lc2-sheet-btn-dark {
    background: var(--lct-accent); border-color: transparent;
}
.lc2-sheet a.lc2-sheet-btn-light {
    background: var(--lct-surface); border: 1px solid var(--lct-hairline); color: var(--lct-ink);
}
.lc2-sheet a.lc2-sheet-btn-light strong,
.lc2-sheet a.lc2-sheet-btn-light span { color: var(--lct-ink); }
.lc2-sheet a.lc2-sheet-btn-light span { color: var(--lct-ink-2); }
.lc2-sheet-card {
    background: var(--lct-surface); border: 1px solid var(--lct-hairline);
    border-radius: var(--lct-r-md); color: var(--lct-ink);
}
.lc2-sheet-card strong { color: var(--lct-ink); }
.lc2-sheet-card span { color: var(--lct-ink-2); }
.lc2-sheet-note { color: var(--lct-ink-3); }
@media (prefers-color-scheme: dark) {
    .lc2-sheet .lc-mark > rect:first-child { fill: #F5F5F3; }
    .lc2-sheet .lc-mark path,
    .lc2-sheet .lc-mark rect[width="76"] { fill: #0B0B0C; }
    .lc2-sheet .lc-mark rect[width="10"] { fill: #F5F5F3; }
}

/* ============================================================
   v2.23.0 — Phase 2, Mohamed's 10-item "Build all" (staging
   first). One coach (Copilot + Assistant merged), one pinned
   next step, no empty boxes, goal-math copy killed, missions
   with visible checks, Money on one screen, Saved proof,
   one token look, short helpers, Spanish parity.
   ============================================================ */

/* Item 2 — the pinned next step under the coach. */
/* Item 1 — Meet your coach: face picker, name, tone. */
.lc2-portal .lc-coach-meet-label {
    font-weight: 600; color: var(--lct-ink); margin: 16px 0 8px; display: block;
}
.lc2-portal .lc-coach-faces {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.lc2-portal .lc-coach-face { position: relative; cursor: pointer; }
.lc2-portal .lc-coach-face input {
    position: absolute; opacity: 0; pointer-events: none;
}
.lc2-portal .lc-coach-face-emoji {
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; height: 56px; border: 1px solid var(--lct-hairline);
    border-radius: var(--lct-r-sm); background: var(--lct-surface-2);
}
.lc2-portal .lc-coach-face-name {
    display: block; text-align: center; font-size: 12px;
    color: var(--lct-ink-2); margin-top: 4px;
}
.lc2-portal .lc-coach-face input:checked ~ .lc-coach-face-emoji {
    border-color: var(--lct-accent);
    box-shadow: 0 0 0 2px var(--lct-accent);
}
.lc2-portal .lc-coach-face input:checked ~ .lc-coach-face-name {
    color: var(--lct-ink); font-weight: 600;
}
.lc2-portal .lc-coach-meet input[type="text"] {
    width: 100%; box-sizing: border-box; min-height: 48px;
    border: 1px solid var(--lct-hairline); border-radius: var(--lct-r-sm);
    background: var(--lct-surface); color: var(--lct-ink);
    padding: 10px 12px; font-size: 16px;
}
.lc2-portal .lc-coach-tones { display: flex; gap: 8px; flex-wrap: wrap; }
.lc2-portal .lc-coach-tone { position: relative; cursor: pointer; }
.lc2-portal .lc-coach-tone input {
    position: absolute; opacity: 0; pointer-events: none;
}
.lc2-portal .lc-coach-tone span {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 8px 16px; border: 1px solid var(--lct-hairline);
    border-radius: 999px; color: var(--lct-ink-2);
    background: var(--lct-surface);
}
.lc2-portal .lc-coach-tone input:checked ~ span {
    border-color: var(--lct-accent); color: var(--lct-accent);
    background: var(--lct-accent-tint); font-weight: 600;
}
.lc2-portal .lc-coach-meet .lc-btn { margin-top: 14px; }
.lc2-portal .lc-coach-meet .lc-coach-skip { margin-top: 8px; }
/* Item 5 — the XP line under the missions progress. */
.lc2-portal .lc-path-xp {
    margin: 8px 0 0; color: var(--lct-ink-2); font-size: 14px;
}
.lc2-portal .lc-path-level {
    color: var(--lct-accent); font-weight: 700;
}
/* The billing banner's paint, pinned at banner specificity so no
   future generic card layer can silently unpaint it again (the
   Phase 1 token layer's generic card rule tied its specificity
   and won on file order — white text on a white card). */
.lc2-portal .lc-next-pin {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 0 4px; padding: 13px 16px;
    background: var(--lct-accent-tint);
    border: 1px solid var(--lct-hairline);
    border-radius: var(--lct-r-md);
    color: var(--lct-ink); text-decoration: none;
}
.lc2-portal .lc-next-pin-label {
    font-size: 12.5px; font-weight: 700; color: var(--lct-accent);
    text-transform: none; letter-spacing: .01em; white-space: nowrap;
}
.lc2-portal .lc-next-pin-step { font-size: 15.5px; font-weight: 600; min-width: 0; }
.lc2-portal .lc-next-pin-arrow { margin-left: auto; color: var(--lct-accent); font-weight: 700; flex: none; }

/* Item 3 — honest one-line zero states instead of empty boxes. */
.lc2-portal .lc-zero-line { margin: 0; font-size: 15px; color: var(--lct-ink-2); }
.lc2-portal .lc-portal-stats .lc-zero-line { padding: 6px 2px; }

/* Item 1 — the merged coach: the assistant block sits inside the
   coach card, separated by a hairline, its title one size down. */
.lc2-portal .lc-copilot-card .lc-asst-wrap {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--lct-hairline);
}
.lc2-portal .lc-copilot-card .lc-asst-head .lc-card-title {
    font-size: 16.5px; margin: 0;
}
.lc2-portal .lc-coach-upsell { margin: 12px 0 0; font-size: 14.5px; }
.lc2-portal .lc-coach-upsell a { color: var(--lct-accent); font-weight: 600; }

/* Item 5 — missions: done steps read as done (filled token-green
   check, soft tint), the current step carries the accent ring. */
.lc2-portal .lc-path-step.is-done .lc2-check-box {
    background: var(--lct-accent); border-color: var(--lct-accent); color: var(--lct-on-accent);
}
.lc2-portal .lc-path-step.is-done .lc-path-step-row {
    background: var(--lct-accent-tint);
    border-radius: var(--lct-r-sm);
}
.lc2-portal .lc-path-step.is-current .lc2-check-box {
    border-color: var(--lct-accent); color: var(--lct-accent);
    box-shadow: 0 0 0 3px var(--lct-accent-tint);
}

/* Item 8 — one token look: portal headings, card titles, insight
   actions and fine print all speak the token language. */
.lc2-portal .lc-dash-h {
    font-size: 19px; font-weight: 700; color: var(--lct-ink);
    letter-spacing: -.01em; margin: 26px 0 10px;
}
.lc2-portal .lc-card-title { color: var(--lct-ink); }
.lc2-portal .lc-insight-body a { color: var(--lct-accent); font-weight: 600; }
.lc2-portal .lc-muted { color: var(--lct-ink-2); }
.lc2-portal .lc-money-kicker {
    color: var(--lct-accent); font-weight: 700; letter-spacing: .01em;
    text-transform: none;
}

/* ===== v2.23.1 — illustrated coach faces (images, not emoji) ===== */
.lc2-portal .lc-coach-face-emoji { padding: 0; overflow: hidden; }
.lc2-portal .lc-coach-face-emoji img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.lc-asst-face img { width: 44px; height: 44px; border-radius: 12px; display: block; }
.lc-asst-dog-img { width: 26px; height: 26px; border-radius: 8px; display: block; }
.lc-asst-msg-face { width: 18px; height: 18px; border-radius: 6px; vertical-align: -4px; }

/* ============================================================
   v2.24.0 — Phase 3 portal overhaul (Mohamed's order, 2026-11-01).
   One surface level: the path is rows on the page background with
   hairline dividers — no container card, no card inside the open
   step. Every paint is a Phase 1 token, so light and dark are
   true by construction (the retired layers' hardcoded #fff step
   background — the dark-mode break in his screenshots — is
   overridden here, last in file). The legacy royal blue in the
   portal (current-step border + Day pill, picker accents) dies
   in this layer. On phones an open step is a full-screen sheet;
   on desktop the panel stays in place, in the wide layout.
   ============================================================ */
.lc2-portal .lc-card.lc-path {
    background: transparent; border: 0; border-radius: 0;
    box-shadow: none; padding: 0;
}
.lc2-portal .lc-path-steps { gap: 0; margin-top: 4px; }
.lc2-portal .lc-path-step {
    background: transparent; border: 0;
    border-bottom: 1px solid var(--lct-hairline);
    border-radius: 0; box-shadow: none; margin: 0; padding: 0;
}
.lc2-portal .lc-path-step:last-child { border-bottom: 0; }
.lc2-portal .lc-path-step-row {
    display: block; cursor: pointer; list-style: none;
}
.lc2-portal .lc-path-row-flex {
    display: flex; align-items: center; gap: 12px;
    min-height: 56px; padding: 10px 2px;
}
.lc2-portal .lc-path-step-row::-webkit-details-marker { display: none; }
.lc2-portal .lc-path-step-body strong { font-size: 15.5px; color: var(--lct-ink); }
.lc2-portal .lc-path-step.is-done .lc-path-step-row { background: transparent; border-radius: 0; }
.lc2-portal .lc-path-step.is-done .lc-path-step-body strong { color: var(--lct-ink-2); }
.lc2-portal .lc-path-day {
    background: var(--lct-surface-2); color: var(--lct-ink-2);
    font-size: 11.5px; padding: 3px 9px;
}
.lc2-portal .lc-path-step.is-current { background: transparent; border-color: var(--lct-hairline); box-shadow: none; }
.lc2-portal .lc-path-step.is-current .lc-path-day { background: var(--lct-accent); color: var(--lct-on-accent); }
.lc2-portal .lc-path-step.is-done .lc-path-day { background: var(--lct-accent-tint); color: var(--lct-accent); }
.lc2-portal .lc-path-panel { margin: 0; border-top: 0; padding: 4px 2px 20px; }
.lc2-portal .lc-path-time,
.lc2-portal .lc-path-supply,
.lc2-portal .lc-path-field,
.lc2-portal .lc-path-offer,
.lc2-portal .lc-path .lc-journey-box {
    border: 0; border-bottom: 1px solid var(--lct-hairline);
    border-radius: 0; background: transparent; padding: 10px 2px;
}
.lc2-portal .lc-path-subs { gap: 0; }
.lc2-portal .lc-path-sub { border-bottom: 1px solid var(--lct-hairline); padding: 6px 2px; }
.lc2-portal .lc-path-track { border-top: 0; }
.lc2-portal .lc-picker-check.is-unl { color: var(--lct-accent); }
.lc2-portal .lc-picker-zero { color: var(--lct-accent); }
.lc2-portal .lc-picker.is-unlimited .lc-picker-cta { background: var(--lct-accent); }
.lc2-portal .lc2-flyer-link { color: var(--lct-accent); }
.lc-step-sheet-head { display: none; }
@media (max-width: 760px) {
    .lc2-portal .lc-path-row-flex { min-height: 52px; }
    .lc2-portal details.lc-path-details[open] > .lc-path-panel {
        position: fixed; inset: 0; z-index: 120;
        background: var(--lct-bg); color: var(--lct-ink);
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 0 16px calc(28px + env(safe-area-inset-bottom));
    }
    .lc-step-sheet-head {
        display: block; position: sticky; top: 0; z-index: 2;
        background: var(--lct-bg);
        padding: 12px 0 10px; border-bottom: 1px solid var(--lct-hairline);
        margin-bottom: 14px;
    }
    .lc-step-sheet-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .lc-step-back {
        appearance: none; border: 0; background: transparent; cursor: pointer;
        font: inherit; font-size: 15px; font-weight: 600;
        color: var(--lct-accent); padding: 6px 8px 6px 0; min-height: 40px;
    }
    .lc-step-sheet-meta { font-size: 12.5px; color: var(--lct-ink-3); font-weight: 600; }
    .lc-step-sheet-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--lct-ink); }
    .lc-step-coach { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 14px; color: var(--lct-ink-2); line-height: 1.45; }
    .lc-step-coach img { width: 22px; height: 22px; border-radius: 7px; flex: none; margin-top: 1px; }
    .lc-step-coach strong { color: var(--lct-ink); }
    body.lc-step-sheet-open { overflow: hidden; }
}

/* v2.24.0 (Phase 3, pass 2) — the remaining legacy-blue roots the
   computed probe found (analytics bars, account-wizard numbers,
   switch, empty-state icon — all painted from the retired --lcx-blue
   / coral alias), and the phone full-bleed inset. */
.lc2-portal .lc-an-bar { background: var(--lct-accent); }
.lc2-portal .lc-aw-num { background: var(--lct-accent); }
.lc2-portal .lc-switch input:checked + .lc-switch-track { background: var(--lct-accent); }
.lc2-portal .lc-switch input:focus-visible + .lc-switch-track { outline: 3px solid var(--lct-accent-tint); }
.lc2-portal .lc-empty-icon { color: var(--lct-accent); background: var(--lct-accent-tint); }
@media (max-width: 760px) {
    .lc2-portal { padding-left: 12px; padding-right: 12px; }
}

/* v2.24.0 amendment — desktop dual-panel step views: guide left,
   the do-it-here action right. Below 1024px (and in the phone
   sheet) the two wrappers stack in the original order. */
@media (min-width: 1024px) {
    .lc2-portal .lc-path-panel-body:not(.lc-path-solo) {
        display: grid; grid-template-columns: 5fr 7fr;
        gap: 36px; align-items: start;
    }
    .lc2-portal .lc-path-guide > *:first-child,
    .lc2-portal .lc-path-action > *:first-child { margin-top: 0; }
}

/* ============ v2.26.0: Supplies & Expenses dashboard ============
   Phase 3 language: flat on the portal background, hairline rows,
   tokens only, no card-in-card. Strip across the top; on desktop
   the spending column and the supplies column sit side by side. */
.lc2-portal .lc-sx { margin-top: 10px; }
.lc2-portal .lc-sx-alert {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--lct-accent-tint); border-radius: var(--lct-r-md);
    padding: 12px 14px; margin: 10px 0 16px;
}
.lc2-portal .lc-sx-alert p { margin: 0; flex: 1 1 220px; color: var(--lct-ink); font-size: 15px; }
.lc2-portal .lc-sx-alert-today { margin: 0 0 14px; }
.lc2-portal .lc-sx-toggle { display: inline-flex; background: var(--lct-surface-2); border-radius: 999px; padding: 3px; gap: 2px; margin: 4px 0 12px; }
.lc2-portal .lc-sx-range {
    border: 0; background: transparent; color: var(--lct-ink-2);
    font: inherit; font-size: 14px; font-weight: 600;
    padding: 7px 16px; border-radius: 999px; cursor: pointer; min-height: 44px;
}
.lc2-portal .lc-sx-range.is-on { background: var(--lct-surface); color: var(--lct-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lc2-portal .lc-sx-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.lc2-portal .lc-sx-stat { flex: 1 1 100px; display: flex; flex-direction: column; gap: 1px; padding: 4px 0 12px; border-bottom: 1px solid var(--lct-hairline); }
.lc2-portal .lc-sx-num { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--lct-ink); }
.lc2-portal .lc-sx-lab { font-size: 13.5px; font-weight: 600; color: var(--lct-ink-2); }
.lc2-portal .lc-sx-sub { font-size: 12.5px; color: var(--lct-ink-3); }
.lc2-portal .lc-sx-h { font-size: 17px; font-weight: 700; color: var(--lct-ink); margin: 24px 0 10px; }
.lc2-portal .lc-sx-lead { margin: 0 0 6px; }
.lc2-portal .lc-sx-cats { display: grid; gap: 12px; }
.lc2-portal .lc-sx-cat-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.lc2-portal .lc-sx-cat-name { font-size: 15px; font-weight: 600; color: var(--lct-ink); }
.lc2-portal .lc-sx-cat-amt { font-size: 15px; font-weight: 700; color: var(--lct-ink); }
.lc2-portal .lc-sx-bar-track { height: 6px; border-radius: 3px; background: var(--lct-surface-2); overflow: hidden; }
.lc2-portal .lc-sx-bar { height: 100%; border-radius: 3px; background: var(--lct-ink-3); transition: width .3s ease; }
.lc2-portal .lc-sx-bar-supplies { background: var(--lct-accent); }
.lc2-portal .lc-sx-bar-mileage { background: var(--lct-ink-2); }
.lc2-portal .lc-sx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lc2-portal .lc-sx-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--lct-ink-2); }
.lc2-portal .lc-sx-form-grid .lc-sx-note { grid-column: 1 / -1; }
.lc2-portal .lc-sx-log { min-height: 52px; margin-top: 12px; }
.lc2-portal .lc-sx-recent { display: grid; }
.lc2-portal .lc-sx-exp-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--lct-hairline); }
.lc2-portal .lc-sx-exp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lc2-portal .lc-sx-exp-cat { font-size: 15px; font-weight: 600; color: var(--lct-ink); }
.lc2-portal .lc-sx-exp-note { font-size: 13.5px; color: var(--lct-ink-2); overflow-wrap: anywhere; }
.lc2-portal .lc-sx-exp-date { font-size: 12.5px; color: var(--lct-ink-3); }
.lc2-portal .lc-sx-exp-amt { font-size: 15px; font-weight: 700; color: var(--lct-ink); }
.lc2-portal .lc-sx-del button {
    border: 0; background: transparent; color: var(--lct-ink-3);
    font-size: 20px; line-height: 1; padding: 8px; cursor: pointer; min-width: 40px; min-height: 40px;
}
.lc2-portal .lc-sx-export { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 18px; }
.lc2-portal .lc-sx-export label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--lct-ink-2); }
.lc2-portal .lc-sx-fine { font-size: 12.5px; margin-top: 6px; }
.lc2-portal .lc-sx-items { display: grid; }
.lc2-portal .lc-sx-item { padding: 14px 0; border-bottom: 1px solid var(--lct-hairline); }
.lc2-portal .lc-sx-item-top { display: flex; align-items: center; gap: 10px; }
.lc2-portal .lc-sx-item-name { font-size: 16px; font-weight: 700; color: var(--lct-ink); flex: 1; }
.lc2-portal .lc-sx-chip { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--lct-surface-2); color: var(--lct-ink-2); }
.lc2-portal .lc-sx-chip-ok { background: var(--lct-accent-tint); color: var(--lct-accent-press); }
.lc2-portal .lc-sx-chip-low { background: rgba(183, 121, 31, .14); color: var(--lct-warning); }
.lc2-portal .lc-sx-chip-out { background: rgba(201, 59, 43, .12); color: var(--lct-danger); }
.lc2-portal .lc-sx-item-line { margin: 5px 0 10px; font-size: 14px; color: var(--lct-ink-2); }
.lc2-portal .lc-sx-levels { display: flex; gap: 6px; }
.lc2-portal .lc-sx-seg {
    flex: 1; border: 1px solid var(--lct-hairline); background: var(--lct-surface);
    color: var(--lct-ink-2); font: inherit; font-size: 14px; font-weight: 600;
    padding: 9px 4px; border-radius: 10px; cursor: pointer; min-height: 44px;
}
.lc2-portal .lc-sx-seg.is-on { background: var(--lct-accent); border-color: var(--lct-accent); color: var(--lct-on-accent); }
.lc2-portal .lc-sx-item-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.lc2-portal .lc-sx-count { display: flex; gap: 8px; align-items: flex-end; }
.lc2-portal .lc-sx-count label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--lct-ink-2); }
.lc2-portal .lc-sx-count input { width: 84px; }
@media (prefers-color-scheme: dark) {
    .lc2-portal .lc-sx-chip-low { background: rgba(183, 121, 31, .25); }
    .lc2-portal .lc-sx-chip-out { background: rgba(201, 59, 43, .22); }
}
@media (min-width: 1024px) {
    .lc2-portal .lc-sx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
    .lc2-portal .lc-sx-num { font-size: 30px; }
}

.lc2-portal .lc-sx-restock { display: flex; gap: 8px; align-items: flex-end; }
.lc2-portal .lc-sx-restock label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--lct-ink-2); }
.lc2-portal .lc-sx-restock input[type="number"] { width: 64px; }

/* ---- v2.27.0: More index + tool heads ---- */
.lc2-portal .lc-more-head { display: flex; gap: 12px; align-items: center; padding: 4px 0 10px; }
.lc2-portal .lc-more-avatar {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lct-accent); color: #fff; font-size: 19px; font-weight: 700;
}
.lc2-portal .lc-more-greet { margin: 0; font-size: 17px; font-weight: 700; color: var(--lct-ink); line-height: 1.25; }
.lc2-portal .lc-more-plan { margin: 2px 0 0; font-size: 13px; color: var(--lct-ink-2); }
.lc2-portal .lc-more-group { margin: 0 0 10px; }
.lc2-portal .lc-more-group-t {
    margin: 0 0 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--lct-ink-3);
}
.lc2-portal .lc-more-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 7px 2px; min-height: 50px; box-sizing: border-box;
    background: none; border: 0; border-bottom: 1px solid var(--lct-hairline);
    cursor: pointer; text-align: left; font: inherit; color: var(--lct-ink);
    text-decoration: none;
}
.lc2-portal .lc-more-row:last-child { border-bottom: 0; }
.lc2-portal .lc-more-ic {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lct-surface-2); color: var(--lct-accent);
}
.lc2-portal .lc-more-ic svg { width: 20px; height: 20px; }
.lc2-portal .lc-more-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lc2-portal .lc-more-name { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.lc2-portal .lc-more-sub {
    font-size: 13px; color: var(--lct-ink-2); line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc2-portal .lc-more-chev { color: var(--lct-ink-3); font-size: 20px; line-height: 1; }
.lc2-portal .lc-toolhead { display: none; }
@media (max-width: 767px) {
    .lc2-portal .lc-toolhead {
        display: flex; align-items: center; gap: 14px;
        position: sticky; top: 0; z-index: 30; padding: 10px 0;
        background: var(--lct-bg);
    }
    .lc2-portal .lc-toolhead-back {
        background: none; border: 0; padding: 6px 4px; min-height: 40px;
        font: inherit; font-size: 15.5px; font-weight: 600;
        color: var(--lct-accent); cursor: pointer;
    }
    .lc2-portal .lc-toolhead-title { font-size: 16.5px; font-weight: 700; color: var(--lct-ink); }
}

/* ---- v2.27.0: Liquid Glass TabBar (phone chrome; desktop keeps the
   existing dock from the base rules above) ---- */
.lc-tabbar-pill { display: none; }
@media (max-width: 767px) {
    .lc-tabbar {
        left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
        border: 1px solid rgba(255, 255, 255, .6); border-radius: 30px;
        background: rgba(252, 252, 250, .66);
        -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
        box-shadow: 0 12px 32px rgba(20, 30, 20, .16), inset 0 1px 0 rgba(255, 255, 255, .55);
        padding: 6px;
    }
    .lc-tabbar-btn { position: relative; z-index: 1; border-radius: 24px; min-height: 50px; }
    .lc-tabbar-pill {
        display: block; position: absolute; top: 6px; bottom: 6px; left: 6px;
        width: calc((100% - 12px) / 4); border-radius: 24px;
        background: rgba(255, 255, 255, .78);
        border: 1px solid rgba(0, 0, 0, .05);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .7);
        transition: transform .38s cubic-bezier(.32, .72, .28, 1);
        will-change: transform;
    }
    .lc2-portal { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .lc-tabbar-pill { transition: none; }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
    .lc-tabbar {
        background: rgba(22, 24, 22, .55); border-color: rgba(255, 255, 255, .14);
        box-shadow: 0 12px 32px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .12);
    }
    .lc-tabbar-pill {
        background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .18);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .15);
    }
}

/* ---- v2.29.0: the merged hero (Today) ---- */
.lc2-portal .lc-hero {
    margin: 0 0 18px; padding: 20px;
    border-radius: 20px;
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--lct-accent) 16%, var(--lct-surface)) 0%,
        color-mix(in srgb, var(--lct-accent) 5%, var(--lct-surface)) 62%,
        var(--lct-surface) 100%);
    border: 1px solid color-mix(in srgb, var(--lct-accent) 22%, var(--lct-hairline));
    color: var(--lct-ink);
}
.lc2-portal .lc-hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 2px; flex-wrap: wrap; }
.lc2-portal .lc-hero-greet { font-size: 19px; font-weight: 700; line-height: 1.25; }
.lc2-portal .lc-hero-date { font-size: 13px; color: var(--lct-ink-2); }
.lc2-portal .lc-hero-stats { margin: 0 0 14px; font-size: 13.5px; font-weight: 600; color: var(--lct-ink-2); }
.lc2-portal .lc-hero-action { padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--lct-accent) 20%, var(--lct-hairline)); }
.lc2-portal .lc-hero-head { margin: 0 0 4px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.lc2-portal .lc-hero-line { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--lct-ink-2); max-width: 52ch; }
.lc2-portal .lc-hero-quick { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
@media (min-width: 1024px) {
    .lc2-portal .lc-hero { padding: 24px 26px; }
    .lc2-portal .lc-hero-greet { font-size: 22px; }
}

/* ---- v2.29.1: change-password row + full-screen sheet ---- */
.lc-pw-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lc-pw-sheet { position: fixed; inset: 0; z-index: 130; background: var(--lcx-canvas); overflow-y: auto; }
.lc-pw-sheet[hidden] { display: none; }
.lc-pw-panel { max-width: 560px; margin: 0 auto; padding: 14px 18px 40px; }
.lc-pw-head { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.lc-pw-head strong { font-size: 17px; color: var(--lcx-ink); }
.lc-pw-head-spacer { flex: 0 0 74px; }
.lc-pw-back {
    flex: 0 0 74px; text-align: left; background: none; border: none; padding: 10px 0;
    font-size: 15px; font-weight: 600; color: var(--lcx-green-deep); cursor: pointer; min-height: 44px;
}
@media (min-width: 768px) {
    .lc-pw-sheet { background: rgba(12, 14, 12, .45); display: flex; align-items: flex-start; justify-content: center; padding: 7vh 16px 16px; }
    .lc-pw-sheet[hidden] { display: none; }
    .lc-pw-panel { background: var(--lcx-surface); border-radius: 20px; padding: 20px 24px 28px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
}

/* ---- v2.30.0: profile sections, avatar, public tags ---- */
.lc2-portal .lc-section-head {
    margin: 18px 2px 8px; font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--lct-ink-2, #6B6B6B);
}
.lc2-portal .lc-section-head:first-of-type { margin-top: 6px; }
.lc-avatar-initial {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--lct-accent, #1E7A4C); color: #fff;
    font-weight: 700; flex: none; line-height: 1;
}
.lc2-portal .lc-public-tag {
    display: inline-block; vertical-align: 1px; margin-left: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: .01em;
    color: var(--lct-accent, #1E7A4C); background: color-mix(in srgb, var(--lct-accent, #1E7A4C) 12%, transparent);
    border-radius: 999px; padding: 2px 8px; text-transform: none;
}
.lc2-portal .lc-avatar-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.lc2-portal .lc-avatar-controls { flex: 1; min-width: 0; }
.lc2-portal .lc-avatar-controls form { margin: 0 0 8px; }
.lc2-portal .lc-avatar-controls .lc-muted { margin-top: 8px; }
.lc2-portal .lc-profile-avatar { margin-right: 2px; }

/* ---- v2.31.0: NO ZOOM (Mohamed's order) — app surfaces never zoom.
   touch-action: manipulation kills double-tap zoom + the 300ms delay
   class of gestures; the 16px input floor kills iOS focus auto-zoom.
   (Pinch itself is locked by the viewport meta + gesture prevention.) */
body.lc-app *, .ld *, .lc-paypage * { touch-action: manipulation; }
/* !important is deliberate: the 16px floor is a platform invariant
   (Mohamed's order — every input, no exceptions), and older rules
   with higher specificity (ID-scoped booking-form fields at 15px,
   contact inputs at 14px) would otherwise beat the blanket rule and
   re-open the iOS focus zoom it exists to kill. */
body.lc-app input, body.lc-app select, body.lc-app textarea,
.ld input, .ld select, .ld textarea,
.lc-paypage input, .lc-paypage select, .lc-paypage textarea { font-size: 16px !important; }

/* ---- v2.33.0 (queue #3): the pro's Reviews card (My Page view).
   Token-painted only, so light and dark both come from the token layer. */
.lc2-portal .lc-rev-summary { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 16px; color: var(--lct-ink); }
.lc2-portal .lc-rev-dist { margin: 0 0 6px; }
.lc2-portal .lc-rev-dist-row { display: flex; align-items: center; gap: 10px; margin: 5px 0; font-size: 13px; color: var(--lct-ink-2); }
.lc2-portal .lc-rev-dist-num { flex: 0 0 26px; }
.lc2-portal .lc-rev-dist-track { flex: 1; height: 8px; border-radius: var(--lct-r-full); background: var(--lct-surface-2); overflow: hidden; }
.lc2-portal .lc-rev-dist-fill { display: block; height: 100%; border-radius: var(--lct-r-full); background: var(--lct-accent); }
.lc2-portal .lc-rev-dist-count { flex: 0 0 22px; text-align: right; }
.lc2-portal .lc-rev-list { list-style: none; margin: 10px 0 0; padding: 0; }
.lc2-portal .lc-rev-item { padding: 12px 0; border-top: 1px solid var(--lct-hairline); }
.lc2-portal .lc-rev-item-head { margin: 0 0 4px; }
.lc2-portal .lc-rev-item-text { margin: 0 0 4px; color: var(--lct-ink); font-size: 15px; }
.lc2-portal .lc-rev-item-meta { margin: 0; font-size: 13px; }
.lc-dir-rating { margin: 2px 0 6px; font-size: 14px; }

/* ============================================================
   v2.38.1 — THE PATH STEPS ARE CARDS (Mohamed's order, 2026-11-02)
   + the summary-flex sweep is complete.
   No <summary> anywhere in this stylesheet carries display:flex
   or display:grid — WebKit drops a flex summary's children and
   renders its "▶ Details" fallback instead (.lc-details and
   .lc2-faq-item were the last two; fixed above). The path step
   face is a card: the summary is a plain block with NEW class
   names (no legacy row class survives on it), the layout lives
   on the inner wrapper, and the card carries the step's name,
   what it is, its Day, and its done/next state at a glance.
   The <details> engine, the open panel, and the phone sheet
   are unchanged. These rules sit last in the file on purpose:
   they retire the v2.24 flat-row treatment of the path in the
   portal layer (hairline rows, no cards) for the path only.
   ============================================================ */
.lc-path-details > summary.lc-path-card-head { display: block; cursor: pointer; list-style: none; }
.lc-path-details > summary.lc-path-card-head::-webkit-details-marker { display: none; }
.lc-path-card-flex { display: flex; align-items: flex-start; gap: 12px; }
.lc-path-card-flex::after { content: "\25B8"; opacity: .55; align-self: center; }
.lc-path-details[open] > summary .lc-path-card-flex::after { content: "\25BE"; }
.lc-path-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; flex: none; }
.lc-path-state { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.lc2-portal .lc-path-steps { gap: 0; }
.lc2-portal .lc-path-step {
    background: var(--lct-surface); border: 1px solid var(--lct-hairline);
    border-radius: var(--lct-r-md); box-shadow: none;
    margin: 0 0 10px; padding: 0; overflow: hidden;
}
.lc2-portal .lc-path-step:last-child { border-bottom: 1px solid var(--lct-hairline); margin-bottom: 0; }
.lc2-portal .lc-path-card-head { display: block; padding: 14px 16px; }
.lc2-portal .lc-path-card-flex { display: flex; align-items: flex-start; gap: 12px; min-height: 0; padding: 0; }
.lc2-portal .lc-path-step.is-current { border-color: var(--lct-accent); box-shadow: 0 0 0 3px var(--lct-accent-tint); }
.lc2-portal .lc-path-step.is-done { background: var(--lct-surface-2); }
.lc2-portal .lc-path-state.is-done { background: var(--lct-accent-tint); color: var(--lct-accent); }
.lc2-portal .lc-path-state.is-next { background: var(--lct-accent); color: var(--lct-on-accent); }
.lc2-portal .lc-path-details[open] .lc-path-panel { padding: 4px 16px 20px; border-top: 1px solid var(--lct-hairline); }
@media (max-width: 760px) {
    .lc2-portal .lc-path-card-flex { min-height: 0; }
}

/* ============================================================
   v2.38.2 — THE FACE IS A DIV, NOT A SUMMARY (Mohamed's order,
   2026-11-02 — "Fix all the problems"). The DOM diagnostic on
   staging proved the served <summary> contentless on this stack
   (default "▶ Details" label, collapsed and expanded) while the
   authored face content rendered inside the details body. So the
   card face is now a plain div in normal flow — token, name,
   what-it-is, Day and state chip live there, where nothing can
   demote them — and the <details> keeps only the open/close
   engine, its summary shrunk to a short text strip under the
   face. The v2.38.1 .lc-path-card-head rules above are inert
   (that class left the markup); the card shell, chips, arrow
   and panel rules from 2.38.1 still apply — the flex wrapper
   and its children did not change, only their parent did.
   ============================================================ */
.lc-path-face { display: block; cursor: pointer; padding: 14px 16px 8px; }
.lc-path-face .lc-path-card-flex::after { content: none; }
.lc-path-details > summary.lc-path-open-link {
    display: block; cursor: pointer; list-style: none;
    padding: 8px 16px 14px; font-size: 13.5px; font-weight: 600;
    color: var(--lc-ink-soft, inherit);
}
.lc-path-details > summary.lc-path-open-link::-webkit-details-marker { display: none; }
.lc-path-details > summary.lc-path-open-link::after { content: "\25B8"; float: right; opacity: .55; }
.lc-path-details[open] > summary.lc-path-open-link::after { content: "\25BE"; }
.lc2-portal .lc-path-open-link { border-top: 1px solid var(--lct-hairline); color: var(--lct-ink-2); }
.lc2-portal .lc-path-details[open] .lc-path-panel { border-top: none; }

/* ============================================================
   v2.39.0 — SUPPLIES AS CARDS + SUMMARY + FULL-PAGE SHEET
   (Mohamed's orders, 2026-11-02). The list face is a card: name,
   level chip, the honest status line, packs. All editing lives
   in the supply's own sheet (the v2.29.1 full-screen sheet
   pattern) — the sheet IS the save, and a completed save
   reopens it with a visible "Saved ✓". Attention supplies sort
   first and the summary card names them. Tokens only, so both
   themes carry it.
   ============================================================ */
.lc-sx-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 14px 16px; margin: 0 0 10px; background: var(--lct-surface); border: 1px solid var(--lct-hairline); border-radius: var(--lct-radius); }
.lc-sx-summary-count { font-weight: 700; font-size: 16px; }
.lc-sx-summary-attn { font-size: 14px; font-weight: 600; color: var(--lct-warn-ink, inherit); }
.lc-sx-summary-ok { font-size: 14px; opacity: .75; }
.lc2-portal .lc-sx-items { display: grid; gap: 10px; }
.lc-sx-card { display: block; width: 100%; text-align: left; cursor: pointer; padding: 14px 16px; background: var(--lct-surface); border: 1px solid var(--lct-hairline); border-radius: var(--lct-radius); color: inherit; font: inherit; }
.lc-sx-card.is-attn { border-color: var(--lct-warn-line, var(--lct-hairline)); }
.lc-sx-card .lc-sx-item-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lc-sx-card .lc-sx-item-line { display: block; margin-top: 6px; font-size: 13.5px; opacity: .8; }
.lc-sx-card-meta { display: block; margin-top: 4px; font-size: 13px; opacity: .65; }
.lc-sx-sheet { position: fixed; inset: 0; z-index: 130; background: var(--lcx-canvas); overflow-y: auto; }
.lc-sx-sheet[hidden] { display: none; }
.lc-sx-sheet-panel { max-width: 560px; margin: 0 auto; padding: 14px 18px 40px; }
.lc-sx-sheet-head { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.lc-sx-sheet-head strong { font-size: 17px; }
.lc-sx-sheet-back { background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; padding: 6px 8px 6px 0; color: inherit; }
.lc-sx-sheet-h { margin: 22px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.lc-sx-saved { display: inline-block; padding: 8px 14px; border-radius: 999px; font-weight: 700; background: var(--lct-good-bg, rgba(30,120,60,.14)); }

/* v2.39.0 Part 4 — the pre-go-live supplies check (wizard + dashboard
   gate). Segments mirror the Supplies screen's, scoped to the check
   form because the wizard does not carry the portal theme class. */
.lc-sx-check-row { padding: 12px 0; border-bottom: 1px solid var(--lct-hairline, #e7e5e4); }
.lc-sx-check-row:first-of-type { padding-top: 2px; }
.lc-sx-check-name { display: block; font-weight: 600; margin: 0 0 8px; }
.lc-sx-check .lc-sx-segs { display: flex; gap: 8px; flex-wrap: wrap; }
.lc-sx-check .lc-sx-seg { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border: 1px solid var(--lct-hairline, #e7e5e4); border-radius: 999px; cursor: pointer; font-weight: 600; background: var(--lct-surface, #fff); color: inherit; }
.lc-sx-check .lc-sx-seg input { position: absolute; opacity: 0; pointer-events: none; }
.lc-sx-check .lc-sx-seg.is-on { background: var(--lct-accent, #1E4D3B); border-color: var(--lct-accent, #1E4D3B); color: var(--lct-on-accent, #fff); }
.lc-sx-check-count { margin: 14px 0 10px; text-align: center; }
.lc-sx-check .lc-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ============================================================
   v2.40.0 — PORTAL POLISH (Mohamed's order, 2026-11-03):
   (1) the path cards' vertical rhythm — even padding through
   the face and the Details strip, and the strip's arrow is
   positioned, never floated (a float inside a <summary> is the
   WebKit fragility that squeezed the strip to the card's
   bottom edge on phones); (2) the XP balance block (path
   header + profile), reading the single lc_path_xp() source.
   ============================================================ */
.lc2-portal .lc-path-face { padding: 16px 16px 10px; }
.lc2-portal .lc-path-details > summary.lc-path-open-link { position: relative; padding: 10px 44px 16px 16px; }
.lc2-portal .lc-path-details > summary.lc-path-open-link::after { float: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.lc2-portal .lc-path-step { margin: 0 0 12px; }
.lc2-portal .lc2-check-head { align-items: flex-start; }
.lc-xp-balance { margin: 10px 0 2px; }
.lc-xp-balance-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lc-xp-balance-num { font-size: 20px; font-weight: 800; }
.lc-xp-balance-tier { font-weight: 700; }
.lc-xp-balance-streak { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--lct-accent-tint, rgba(30, 77, 59, .12)); color: var(--lct-accent, inherit); }
.lc-xp-bar { height: 8px; border-radius: 999px; background: var(--lct-surface-2, #e7e5e4); overflow: hidden; margin: 8px 0 6px; }
.lc-xp-bar-fill { height: 100%; border-radius: 999px; background: var(--lct-accent, #1E4D3B); }
.lc-xp-balance-next { margin: 0; font-size: 13px; color: var(--lct-ink-2, inherit); }
.lc-xp-card { padding: 16px; margin: 0 0 14px; }
.lc-xp-card .lc-xp-balance { margin-top: 2px; }

/* ============================================================
   v2.41.0 Part 1 — SHEET SWEEP: destination views are
   full-screen sheets (Mohamed's full-screen sheet standard).
   A sheetview, when open, covers the portal as its own page —
   fixed, its own scroll, its tool head (back + title) sticky at
   the top at every width. Below the supplies sheets' layer
   (z 130) so sheets inside views still open above it; above
   the TabBar (z 80), which a sheet covers like any page would.
   ============================================================ */
.lc2-portal .lc2-view.lc2-sheetview:not([hidden]) {
    position: fixed; inset: 0; z-index: 120; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--lct-bg); color: var(--lct-ink);
    padding: 0 16px 56px;
    animation: lc-sheet-in .18s ease-out;
}
.lc2-portal .lc2-sheetview .lc-toolhead {
    display: flex; align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 30; padding: 10px 0;
    background: var(--lct-bg); border-bottom: 1px solid var(--lct-hairline);
}
.lc2-portal .lc2-sheetview .lc-toolhead-back {
    background: none; border: 0; padding: 6px 4px; min-height: 40px;
    font: inherit; font-size: 15.5px; font-weight: 600;
    color: var(--lct-accent); cursor: pointer;
}
.lc2-portal .lc2-sheetview .lc-toolhead-title { font-size: 16.5px; font-weight: 700; color: var(--lct-ink); }
body.lc-sheet-open { overflow: hidden; }
@keyframes lc-sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .lc2-portal .lc2-view.lc2-sheetview:not([hidden]) { animation: none; }
}

/* v2.41.0 Part 1.1: the browser's scroll anchoring must not
   "correct" the window scroll while views swap — the sheet
   engine restores the origin scroll itself. */
.lc2-portal { overflow-anchor: none; }

/* v2.41.0 Part 3 — page-as-sheet head (app canvas): the sheet
   chrome for portal page destinations arrived at from More. */
.lc-sheet-head {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 14px;
    padding: 8px 16px;
    background: var(--lct-bg, #fff);
    border-bottom: 1px solid var(--lct-hairline, #e7e5e4);
}
.lc-sheet-back {
    display: inline-flex; align-items: center; min-height: 40px;
    font-size: 15.5px; font-weight: 600; text-decoration: none;
    color: var(--lct-accent, #1E4D3B);
}
.lc-sheet-title { font-size: 16.5px; font-weight: 700; color: var(--lct-ink, inherit); }