/*
 * Landing page (layout `landing`): a dark neon party look on top of Bootstrap 5.
 * One live demo bill is the hero; everything below stays calm.
 */
.landing {
    --l-bg: #1b1824;
    --l-bg-2: #24202e;
    --l-surface: rgba(255, 255, 255, .06);
    --l-surface-2: rgba(255, 255, 255, .1);
    --l-line: rgba(226, 218, 236, .17);
    --l-fg: #f6f3fa;
    --l-muted: #bdb6c8;
    --l-pink: #f05cb8;
    --l-cyan: #5cd6ea;
    --l-amber: #f2c063;
    --l-violet: #ac95ff;
    --l-ink: #17112a;
    --l-plus: #63e2a4;
    --l-minus: #ff7d93;

    --l-display: "Unbounded", "Arial Black", system-ui, sans-serif;
    --l-body: "Manrope", "Segoe UI", system-ui, sans-serif;
    --l-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --l-step--1: .8125rem;
    --l-step-1: 1.25rem;
    --l-step-3: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    --l-step-4: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem);

    --bs-body-bg: var(--l-bg);
    --bs-body-color: var(--l-fg);
    --bs-body-font-family: var(--l-body);
    --bs-border-color: var(--l-line);
    --bs-link-color-rgb: 246, 243, 250;
    --bs-link-hover-color-rgb: 255, 255, 255;

    background: var(--l-bg);
    color: var(--l-fg);
    font-family: var(--l-body);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Section colors: every colored element picks its hue from data-color. */
.landing [data-color="pink"] { --c: var(--l-pink); }
.landing [data-color="cyan"] { --c: var(--l-cyan); }
.landing [data-color="amber"] { --c: var(--l-amber); }
.landing [data-color="violet"] { --c: var(--l-violet); }

html:has(body.landing) { scroll-behavior: smooth; }
.landing :focus-visible { outline: 2px solid var(--l-cyan); outline-offset: 3px; border-radius: 6px; }
.landing h1, .landing h2, .landing h3 {
    font-family: var(--l-display);
    line-height: 1.08;
    margin: 0;
    text-wrap: balance;
    letter-spacing: -.01em;
}
.landing p { margin: 0; }
.landing .container {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.landing-eyebrow {
    font: 500 var(--l-step--1)/1.3 var(--l-mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--l-cyan);
}
.landing-num, .landing .receipt-num {
    font-family: var(--l-mono);
    font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */
.l-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font: 700 1rem/1 var(--l-body);
    text-decoration: none;
    cursor: pointer;
    padding: 13px 22px;
    border-radius: 10px;
    border: 1px solid var(--l-line);
    color: var(--l-fg);
    background: transparent;
    transition: background .2s, border-color .2s, color .2s;
}
.l-btn:hover { color: var(--l-fg); background: var(--l-surface); border-color: color-mix(in srgb, var(--l-fg) 35%, transparent); }
.l-btn-sm { padding: 9px 16px; font-size: var(--l-step--1); }
.l-btn-primary { color: var(--l-ink); background: var(--l-fg); border-color: var(--l-fg); }
.l-btn-primary:hover { color: var(--l-ink); background: color-mix(in srgb, var(--l-fg) 86%, var(--l-pink)); border-color: transparent; }

/* ---------- Navigation ---------- */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: blur(14px) saturate(140%);
    background: color-mix(in srgb, var(--l-bg) 72%, transparent);
    border-bottom: 1px solid var(--l-line);
}
.landing-logo {
    font: 800 1.35rem/1 var(--l-display);
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--l-fg);
}
.landing-logo:hover { color: var(--l-fg); }
.landing-logo-text span { color: var(--l-pink); }
.landing-nav-links { gap: 22px; }
.landing-nav-links a { text-decoration: none; color: var(--l-muted); font-weight: 500; transition: color .2s; }
.landing-nav-links a:hover { color: var(--l-fg); }
.landing-nav .dropdown .btn { border-radius: 10px !important; border-color: var(--l-line); color: var(--l-muted); }

/* ---------- Hero ---------- */
.landing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid var(--l-line);
    padding-block: clamp(48px, 8vw, 104px) clamp(56px, 8vw, 96px);
}
.landing-lights { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.landing-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 40%;
    z-index: -1;
    background: linear-gradient(to bottom, transparent, var(--l-bg));
}
.landing-hero-copy { display: grid; gap: 26px; }
.landing-hero h1 { font-size: var(--l-step-4); font-weight: 800; }
.landing-hero h1 b {
    font-weight: inherit;
    color: var(--l-pink);
    text-shadow: 0 0 24px color-mix(in srgb, var(--l-pink) 45%, transparent);
}
.landing-lead { font-size: var(--l-step-1); color: var(--l-muted); max-width: 34ch; }
.landing-hint {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font: 400 var(--l-step--1)/1.4 var(--l-mono);
    color: var(--l-muted);
}
.landing-hint::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--l-cyan);
}

/* ---------- Demo bill ---------- */
.landing-receipt {
    background: color-mix(in srgb, var(--l-bg-2) 92%, transparent);
    border: 1px solid var(--l-line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .6);
    transform: perspective(1200px) rotateY(var(--ry, -4deg)) rotateX(var(--rx, 2deg));
    transition: transform .4s ease-out;
}
@media (max-width: 991.98px) { .landing-receipt { transform: none; } }

.receipt-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--l-line);
}
.receipt-title { font: 600 1rem/1.2 var(--l-display); }
.receipt-meta { font: 400 var(--l-step--1)/1.2 var(--l-mono); color: var(--l-muted); }

.receipt-lines { list-style: none; margin: 0; padding: 0; }
.receipt-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed var(--l-line);
}
.receipt-line-name { min-width: 0; font-weight: 500; }
.receipt-line .receipt-num { font-size: var(--l-step--1); }
.receipt-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.receipt-chip {
    font: 600 .72rem/1 var(--l-body);
    padding: 5px 9px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
    color: var(--l-muted);
    background: transparent;
    transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.receipt-chip[aria-pressed="true"] { color: var(--l-ink); background: var(--c); border-color: var(--c); }
/* With an even split the marks only show who ordered what. */
.receipt-chip:disabled { cursor: default; }
.receipt-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: var(--l-step--1); color: var(--l-muted); }
.receipt-row b { color: var(--l-fg); font-weight: 500; }

.receipt-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 10px 0 4px; }
.receipt-modes { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--l-surface); border: 1px solid var(--l-line); }
.receipt-modes button {
    font: 600 var(--l-step--1)/1 var(--l-body);
    color: var(--l-muted);
    background: none;
    border: 0;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: color .2s, background .2s;
}
.receipt-modes button[aria-pressed="true"] { color: var(--l-ink); background: var(--l-fg); }
.receipt-tip { display: flex; align-items: center; gap: 12px; flex: 1 1 200px; }
.receipt-tip label { font-weight: 600; font-size: var(--l-step--1); }
.receipt-tip input { flex: 1; min-width: 0; accent-color: var(--l-amber); }
.receipt-tip output { font: 500 var(--l-step--1)/1 var(--l-mono); color: var(--l-amber); min-width: 3.5ch; text-align: right; }
.receipt-help { font-size: var(--l-step--1); color: var(--l-muted); padding: 6px 0 10px; }

.receipt-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 459.98px) { .receipt-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.receipt-person {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
    padding: 12px 6px;
    border-radius: 12px;
    background: var(--l-surface);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    transition: opacity .25s, border-color .25s;
}
.receipt-person.is-out { opacity: .4; border-style: dashed; }
.receipt-person-toggle {
    display: grid;
    gap: 6px;
    justify-items: center;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
}
.receipt-person-toggle:disabled { cursor: default; }
.receipt-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 800 .9rem/1 var(--l-display);
    color: var(--l-ink);
    background: var(--c);
}
.receipt-person.bump .receipt-avatar { animation: landing-bump .45s ease-out; }
@keyframes landing-bump { 40% { transform: scale(1.12); } }
.receipt-person-name { font-size: var(--l-step--1); color: var(--l-muted); }
.receipt-person-sum { font-size: .9rem; white-space: nowrap; }
.receipt-person-tip { font: 400 .72rem/1.2 var(--l-mono); color: var(--l-amber); min-height: 1.2em; }
.receipt-totals { margin-top: 10px; border-top: 1px dashed var(--l-line); }

/* ---------- Occasions marquee ---------- */
.landing-marquee {
    overflow: hidden;
    border-bottom: 1px solid var(--l-line);
    padding-block: 18px;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.landing-marquee-track { display: flex; gap: 40px; width: max-content; animation: landing-scroll 38s linear infinite; }
.landing-marquee span {
    display: inline-flex;
    gap: 40px;
    align-items: center;
    white-space: nowrap;
    font: 600 var(--l-step-1)/1 var(--l-display);
    color: var(--l-muted);
}
.landing-marquee span::after { content: "•"; color: var(--l-pink); }
@keyframes landing-scroll { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.landing-section { padding-block: clamp(64px, 9vw, 120px); }
.landing-section.pt-0 { padding-top: 0; }
.landing-section-head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }
.landing-section-head h2 { font-size: var(--l-step-3); font-weight: 600; }
.landing-section-head p:not(.landing-eyebrow) { color: var(--l-muted); font-size: var(--l-step-1); max-width: 40ch; }

.landing-steps { counter-reset: landing-step; }
.landing-step {
    position: relative;
    display: grid;
    align-content: start;
    gap: 12px;
    height: 100%;
    padding: 26px 22px 24px;
    border-top: 2px solid var(--l-line);
    counter-increment: landing-step;
}
.landing-step::before {
    content: counter(landing-step, decimal-leading-zero);
    font: 800 2.6rem/1 var(--l-display);
    color: transparent;
    -webkit-text-stroke: 1.2px var(--c);
}
.landing-step::after { content: ""; position: absolute; top: -2px; left: 0; width: 64px; height: 2px; background: var(--c); }
.landing-step h3, .landing-card h3 { font-size: var(--l-step-1); font-weight: 600; }
.landing-step p, .landing-card p { color: var(--l-muted); }

.landing-card {
    --mx: 50%;
    --my: 0%;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 26px 24px;
    border-radius: 18px;
    border: 1px solid var(--l-line);
    background: radial-gradient(380px circle at var(--mx) var(--my), color-mix(in srgb, var(--c) 9%, transparent), transparent 60%), var(--l-surface);
    transition: border-color .3s;
}
.landing-card:hover { border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.landing-card .bi { font-size: 1.75rem; line-height: 1; color: var(--c); }

/* ---------- Receipt photo: recognized numbers counted in the calculator ---------- */
.landing-photo-copy h2 { font-size: clamp(1.75rem, 1.1rem + 1.4vw, 2.4rem); hyphens: auto; overflow-wrap: break-word; }
.landing-points { display: grid; gap: 22px; margin: 0; }
.landing-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
.landing-points .bi {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.25rem;
    color: var(--l-cyan);
    background: color-mix(in srgb, var(--l-cyan) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--l-cyan) 35%, transparent);
}
.landing-points h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; }
.landing-points p { color: var(--l-muted); }

.landing-scan { position: relative; padding: 8px 0 0; }
.scan-photo {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    max-width: 420px;
    padding: 26px 26px 34px;
    color: #2d2a33;
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .55), transparent 60%),
        linear-gradient(180deg, #f3eee4, #e6dfd2);
    font: 500 .86rem/1.5 var(--l-mono);
    border-radius: 4px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .08);
    transform: rotate(-2.5deg);
    /* Torn bottom edge of the paper. */
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
/* The scanner beam passes over the photo once when it comes into view. */
.scan-photo::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 70px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--l-cyan) 35%, transparent) 85%, var(--l-cyan));
}
.landing-scan.is-scanning .scan-photo::before { animation: landing-scan-beam 1.4s ease-in-out; }
@keyframes landing-scan-beam {
    0% { opacity: 1; transform: translateY(-70px); }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateY(520px); }
}
.scan-photo-head { display: grid; justify-items: center; gap: 2px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px dashed rgba(45, 42, 51, .35); text-align: center; }
.scan-photo-head b { font: 800 1.05rem/1.2 var(--l-display); letter-spacing: .02em; }
.scan-photo-head span { font-size: .75rem; opacity: .7; }
.scan-photo-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; padding: 3px 0; }
.scan-photo-line > .scan-number { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; }
.scan-photo-qty { font-size: .78rem; opacity: .8; }
.scan-photo-sum { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(45, 42, 51, .35); }
.scan-photo-total { font-weight: 700; font-size: 1rem; }
.scan-photo-thanks { margin-top: 14px; text-align: center; font-size: .75rem; opacity: .6; }

.scan-number {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0 3px;
    margin: 0 -3px;
    cursor: pointer;
    transition: background .2s, border-color .4s, color .2s, box-shadow .2s;
}
/* Recognized regions light up one after another once the beam has passed. */
.landing-scan.is-scanned .scan-number {
    border-color: color-mix(in srgb, #0aa7c2 70%, transparent);
    background: rgba(10, 167, 194, .1);
    transition-delay: calc(var(--i, 0) * 45ms), calc(var(--i, 0) * 45ms), 0s, 0s;
}
.landing-scan.is-scanned .scan-number:hover { background: rgba(10, 167, 194, .22); }
.landing-scan .scan-number[data-sign="1"] { color: #0f3d27; background: var(--l-plus); border-color: #22a46a; transition-delay: 0s; }
.landing-scan .scan-number[data-sign="-1"] { color: #4a0f1b; background: var(--l-minus); border-color: #d23d58; transition-delay: 0s; }

.scan-calc {
    position: relative;
    z-index: 3;
    width: min(100%, 260px);
    margin: -36px 0 0 auto;
    padding: 14px;
    display: grid;
    gap: 10px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--l-bg-2) 94%, transparent);
    border: 1px solid var(--l-line);
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8);
    backdrop-filter: blur(10px);
}
/* Wide screens: the photo moves left and the calculator stands next to it without hiding the numbers. */
@media (min-width: 1200px) {
    .scan-photo { max-width: 380px; margin-left: 0; }
    .scan-calc { position: absolute; right: 0; bottom: 12%; width: 240px; margin: 0; }
}
.scan-calc-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--l-step--1); color: var(--l-muted); }
.scan-calc-head .bi { color: var(--l-amber); }
.scan-calc-reset {
    font: 600 .72rem/1 var(--l-body);
    color: var(--l-muted);
    background: var(--l-surface);
    border: 1px solid var(--l-line);
    border-radius: 6px;
    padding: 5px 9px;
    cursor: pointer;
}
.scan-calc-reset:hover { color: var(--l-fg); }
.scan-calc-tape {
    min-height: 2.6em;
    font: 400 .75rem/1.3 var(--l-mono);
    color: var(--l-muted);
    text-align: right;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.scan-calc-tape .is-plus { color: var(--l-plus); }
.scan-calc-tape .is-minus { color: var(--l-minus); }
.scan-calc-display {
    display: block;
    text-align: right;
    font-size: 1.75rem;
    line-height: 1.1;
    padding: 6px 4px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
    white-space: nowrap;
    overflow: hidden;
}
.scan-calc-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.scan-calc-signs button {
    font: 700 var(--l-step--1)/1 var(--l-body);
    padding: 10px 8px;
    border-radius: 8px;
    border: 1px solid var(--l-line);
    color: var(--l-muted);
    background: var(--l-surface);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.scan-calc-signs [data-sign="1"][aria-pressed="true"] { color: #0f3d27; background: var(--l-plus); border-color: var(--l-plus); }
.scan-calc-signs [data-sign="-1"][aria-pressed="true"] { color: #4a0f1b; background: var(--l-minus); border-color: var(--l-minus); }

/* ---------- FAQ ---------- */
.landing-faq { display: grid; gap: 10px; max-width: 52rem; }
.landing-faq details { border: 1px solid var(--l-line); border-radius: 14px; background: var(--l-surface); transition: border-color .25s; }
.landing-faq details[open] { border-color: color-mix(in srgb, var(--l-cyan) 45%, transparent); }
.landing-faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700; display: flex; justify-content: space-between; gap: 16px; }
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after { content: "+"; font: 400 1.4rem/1 var(--l-mono); color: var(--l-cyan); transition: transform .25s; }
.landing-faq details[open] summary::after { transform: rotate(45deg); }
.landing-faq details p { padding: 0 22px 20px; color: var(--l-muted); max-width: 62ch; }

/* ---------- Final call to action ---------- */
.landing-final { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--l-line); }
.landing-final::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(40% 60% at 30% 100%, color-mix(in srgb, var(--l-pink) 16%, transparent), transparent 70%),
        radial-gradient(40% 60% at 70% 100%, color-mix(in srgb, var(--l-cyan) 12%, transparent), transparent 70%);
}
.landing-final .container { display: grid; justify-items: center; gap: 24px; text-align: center; }
.landing-final h2 { font-size: var(--l-step-3); font-weight: 800; max-width: 18ch; }
.landing-final p:not(.landing-eyebrow) { color: var(--l-muted); font-size: var(--l-step-1); }

.landing-footer { border-top: 1px solid var(--l-line); color: var(--l-muted); font-size: var(--l-step--1); }
.landing-footer a { color: var(--l-muted); text-decoration: none; }
.landing-footer a:hover { color: var(--l-fg); }

/* ---------- Scroll reveal: starts visible, only refines position ---------- */
@supports (animation-timeline: view()) {
    .landing-reveal { animation: landing-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes landing-rise { from { opacity: .35; transform: translateY(32px) scale(.98); } }
}

@media (prefers-reduced-motion: reduce) {
    .landing *, .landing *::before, .landing *::after { animation: none !important; transition: none !important; }
    html:has(body.landing) { scroll-behavior: auto; }
    .landing-receipt { transform: none; }
    .scan-photo { transform: none; }
}