/* ============================================================
   SplitSmart - Print stylesheet
   Turns the marketing homepage into a single clean receipt-style
   column instead of the full animated, multi-column layout.
   Linked with media="print" (link tag added separately).
   ============================================================ */

@page {
    margin: 12mm;
}

/* ------------------------------------------------------------
   Hide anything that only makes sense on screen: chrome, nudges,
   decorative phone mockups/stickers, CTA button rows, the footer
   barcode/nav, and any hint copy.
   ------------------------------------------------------------ */
.nav,
.tape,
.hero__cta,
.hero__demo-nudge,
.how__visual,
.groups__visual,
.friends__visual,
.cta__buttons,
.footer__barcode,
.footer__nav,
.sticker,
.demo__hint {
    display: none !important;
}

/* ------------------------------------------------------------
   Neutralize scroll-reveal: nothing should be waiting on an
   IntersectionObserver that will never fire in print.
   ------------------------------------------------------------ */
html.js .reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* ------------------------------------------------------------
   Ink on paper: force plain white background and near-black
   text everywhere, including the sections that are normally
   light-on-dark (.why, .footer).
   ------------------------------------------------------------ */
body,
.hero,
.how,
.groups,
.friends,
.why,
.cta,
.footer {
    background: #fff !important;
    background-image: none !important;
    color: #111 !important;
}

.why *,
.footer * {
    color: #111 !important;
}

/* drop shadows read as muddy boxes on paper - remove them */
.demo,
.bill {
    filter: none !important;
}

.demo__paper,
.bill,
.note__paper,
.paper-receipt {
    box-shadow: none !important;
}

/* hide the footer QR chip and web-app nudge; paper can't be tapped */
.footer__qr,
.cta__web {
    display: none !important;
}

/* ------------------------------------------------------------
   Single centered column, sized like a till receipt.
   ------------------------------------------------------------ */
main,
.container {
    max-width: 88mm !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.hero,
.how,
.groups,
.friends,
.why,
.cta {
    padding: 6mm 0 !important;
    border-top: 1px dashed #999;
}

.hero {
    border-top: none;
}

.hero__container,
.how__container,
.groups__container,
.friends__container {
    display: block !important;
}

.why__receipts {
    grid-template-columns: 1fr !important;
    gap: 6mm !important;
    max-width: 100% !important;
}

/* ------------------------------------------------------------
   Keep the hero demo receipt printable: full width of the
   column, no rotation, and never split across a page break.
   ------------------------------------------------------------ */
.demo {
    width: 100% !important;
    transform: none !important;
    break-inside: avoid;
}

.demo__paper {
    break-inside: avoid;
}

/* .why receipts stack vertically with no rotation and stay
   whole across a page break */
.bill {
    transform: none !important;
    break-inside: avoid;
    width: 100% !important;
}

.bill--theirs,
.bill--ours {
    transform: none !important;
}

/* ------------------------------------------------------------
   Footer, trimmed down to a small centered mono credit line.
   ------------------------------------------------------------ */
.footer__container {
    display: block !important;
    text-align: center !important;
}

.footer__brand {
    display: inline-flex !important;
    justify-content: center;
    margin: 0 auto 2mm;
}

.footer__copyright,
.footer__brand {
    font-family: 'Space Mono', 'Courier New', monospace !important;
    font-size: 8pt !important;
    text-align: center !important;
    color: #111 !important;
}