/* shoebox.css - the homepage's "box of receipts" look.
   Hero: a shut shoebox that opens as you scroll, and receipts fly out.
   Sections: How it works, who files what, pricing and the founder's note
   are drawn as pieces of paper.

   Sharp text matters more than the effect, so the paper sheets settle
   perfectly straight (no tilt, no filters) once they've dropped into place.
   Only the small receipts in the hero stay tilted - they're decoration. */

:root {
  --sb-paper: #fffdf7;
  --sb-rule: #d8d0bc;
  --sb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sb-hand: "Caveat", "Segoe Print", cursive;
}

/* ---- Hero ------------------------------------------------------------------ */
.sb-scroll-hint {
  margin: 22px 0 0; font: 600 12px var(--sb-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--mint, #7ff0dc); opacity: .85;
}
.sb-scroll-hint span { display: inline-block; animation: sb-bob 1.6s ease-in-out infinite; }
@keyframes sb-bob { 50% { transform: translateY(4px); } }

.sb-scene { position: relative; height: 460px; }
.sb-box { position: absolute; left: 50%; bottom: 10px; width: 330px; height: 300px; transform: translateX(-50%); }
.sb-box-back {
  position: absolute; left: 12px; right: 12px; bottom: 0; height: 178px;
  border-radius: 8px 8px 10px 10px; background: linear-gradient(180deg, #05302c, #0a4a45);
}
.sb-box-front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 5;
  border-radius: 6px 6px 12px 12px; display: grid; place-items: center;
  background: linear-gradient(180deg, #e9dcc0, #d8c7a2);
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .06), 0 24px 40px -20px rgba(0, 0, 0, .6);
}
.sb-box-label {
  background: #fffaf0; border: 2px dashed #b8a47c; border-radius: 6px;
  padding: 10px 18px; transform: rotate(-2deg); text-align: center;
}
.sb-box-label b { display: block; font: 700 28px/1 var(--sb-hand); color: #5b4a2a; }
.sb-box-label small { font: 600 11px var(--sb-mono); letter-spacing: .14em; color: #806c46; }
.sb-lid {
  position: absolute; left: -8px; right: -8px; bottom: 144px; height: 40px; z-index: 6;
  border-radius: 6px; background: linear-gradient(180deg, #f0e4c9, #dccaa5);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .08); transform-origin: 100% 100%; will-change: transform;
}
.sb-lid::after {
  content: ""; position: absolute; left: 14px; right: 14px; top: 16px; height: 3px;
  border-radius: 2px; background: rgba(91, 74, 42, .15);
}
.sb-slip { position: absolute; left: 50%; bottom: 18px; width: 182px; margin-left: -91px; z-index: 3; will-change: transform; }
.sb-slip-paper {
  position: relative; background: var(--sb-paper); color: #0f1a17;
  padding: 12px 14px 10px; border-radius: 3px 3px 0 0;
  font: 600 12.5px var(--sb-mono); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6);
}
.sb-slip-paper::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px;
  background: linear-gradient(135deg, var(--sb-paper) 50%, transparent 50%) 0 0/12px 12px,
              linear-gradient(-135deg, var(--sb-paper) 50%, transparent 50%) 0 0/12px 12px;
}
.sb-slip-top { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; }
.sb-slip-rule { border-top: 1px dashed #cfc6b0; margin: 8px 0; }
.sb-slip-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  font: 700 11.5px var(--font-body, sans-serif); color: #0b5c56; background: #e6f4f2;
}
.sb-slip-tag.warn { color: #7c3a06; background: #fdecd3; }
.sb-slip-tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---- Paper sheets ---------------------------------------------------------- */
.sb-desk { max-width: 980px; margin: 0 auto; }
.sb-sheet {
  position: relative; background: var(--sb-paper); margin: 0 auto 30px;
  padding: 34px 40px 30px; border-radius: 4px 4px 0 0;
  /* box-shadow, not filter: drop-shadow - filters soften text. */
  box-shadow: 0 1px 2px rgba(15, 26, 23, .06), 0 22px 40px -22px rgba(15, 26, 23, .28);
}
.sb-sheet::after {     /* torn-off zigzag bottom edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: linear-gradient(135deg, var(--sb-paper) 50%, transparent 50%) 0 0/16px 16px,
              linear-gradient(-135deg, var(--sb-paper) 50%, transparent 50%) 0 0/16px 16px;
}
.sb-till {
  display: flex; justify-content: space-between; gap: 10px; margin-bottom: 24px; padding-bottom: 14px;
  border-bottom: 1px dashed var(--sb-rule);
  font: 600 12px var(--sb-mono); letter-spacing: .16em; color: #6b7a76;
}
.sb-sheet h2 { font: 800 clamp(26px, 3vw, 34px)/1.15 var(--font-display, sans-serif); letter-spacing: -.02em; margin: 0 0 6px; color: #0f1a17; }
.sb-lede { color: #3f4d49; margin: 0 0 24px; font-size: 16px; }

/* Drop in, then sit dead straight so the text renders crisply. */
/* The paper sheets are static: the box in the hero and the WhatsApp chat are
   the only moving parts, and nothing waits on an animation to be readable. */

/* How it works: line items on a receipt */
.sb-lines { list-style: none; margin: 0; padding: 0; }
.sb-lines li { display: grid; grid-template-columns: 52px 1fr; gap: 4px 16px; padding: 18px 0; border-bottom: 1px dotted var(--sb-rule); }
.sb-lines li:last-child { border-bottom: 0; padding-bottom: 4px; }
.sb-qty { font: 600 15px var(--sb-mono); color: #0b5c56; padding-top: 3px; }
.sb-lines h3 { font: 700 19px var(--font-display, sans-serif); margin: 0; display: flex; align-items: baseline; gap: 10px; color: #0f1a17; }
.sb-lines h3::after { content: ""; flex: 1; border-bottom: 2px dotted #cdc3ab; transform: translateY(-4px); }
.sb-tick { order: 3; font: 600 14px var(--sb-mono); color: #0b5c56; }
.sb-lines p { grid-column: 2; margin: 0; color: #3f4d49; line-height: 1.6; font-size: 15.5px; }

/* Who files what: tear-off stubs */
.sb-stubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sb-stub { border: 1.5px dashed #c9bfa6; border-radius: 8px; padding: 16px 16px 14px; background: #fff; }
.sb-stub-who { font: 600 11.5px var(--sb-mono); letter-spacing: .14em; color: #0b5c56; margin-bottom: 6px; }
.sb-stub p { margin: 0; color: #3f4d49; font-size: 15px; line-height: 1.55; }
.sb-stub a { color: #0a4a45; font-weight: 600; }
.sb-small-print { margin: 20px 0 0; text-align: center; font: 500 12.5px/1.7 var(--sb-mono); color: #5d6b67; }

/* Pricing: a till receipt */
.sb-price { max-width: 460px; }
.sb-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font: 500 14.5px var(--sb-mono); color: #1f2a27; }
.sb-row b { font-weight: 600; color: #0b5c56; }
.sb-total { border-top: 2px solid #0f1a17; margin-top: 10px; padding-top: 14px; font: 800 24px var(--font-display, sans-serif); }
.sb-price-note { font: 500 12.5px/1.65 var(--sb-mono); color: #4d5c58; text-align: center; margin: 14px 0 18px; }
.sb-price .btn { display: block; text-align: center; }
.sb-fine { font-size: 13px; line-height: 1.6; color: #5d6b67; margin: 14px 0 0; }
.sb-barcode {
  height: 40px; width: 78%; margin: 18px auto 0;
  background: repeating-linear-gradient(90deg, #0f1a17 0 2px, transparent 2px 4px, #0f1a17 4px 5px, transparent 5px 9px, #0f1a17 9px 12px, transparent 12px 14px);
}

/* Why this exists: a note taped to the pile */
.sb-note {
  position: relative; max-width: 660px; margin: 0 auto; padding: 46px 42px 34px;
  background: #fffbea; box-shadow: 0 1px 2px rgba(15, 26, 23, .06), 0 22px 40px -22px rgba(15, 26, 23, .28);
}
.sb-tape {
  position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; margin-left: -60px;
  transform: rotate(-3deg); background: rgba(127, 240, 220, .6);
}
.sb-note h2 { font: 700 40px/1 var(--sb-hand); color: #0b5c56; margin: 0 0 14px; letter-spacing: 0; }
.sb-note p { font-size: 16.5px; line-height: 1.75; margin: 0 0 12px; color: #26312e; }
.sb-note .sb-close { font-weight: 600; color: #0f1a17; margin-bottom: 0; }

@media (max-width: 960px) {
  .hero .sb-scene { display: block; height: 400px; margin-top: -10px; }
  .sb-box { transform: translateX(-50%) scale(.86); transform-origin: 50% 100%; }
}
@media (max-width: 700px) {
  .sb-sheet { padding: 26px 20px 24px; }
  .sb-till { font-size: 10.5px; letter-spacing: .1em; }
  .sb-stubs { grid-template-columns: 1fr; }
  .sb-lines li { grid-template-columns: 34px 1fr; gap: 4px 10px; }
  .sb-lines h3 { font-size: 17.5px; }
  .sb-lines h3::after { display: none; }
  .sb-note { padding: 40px 22px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-js .sb-reveal { opacity: 1; transform: none; transition: none; }
  .sb-scroll-hint span { animation: none; }
}

/* ---- Phones: the box comes straight after the headline -------------------- */
/* Headline, then the box (opening by itself), then the button - all on the
   first screen. The longer description follows underneath. */
@media (max-width: 860px) {
  .hero { display: flex; flex-direction: column; gap: 0; padding-top: 36px; }
  .hero-inner { display: contents; }
  .hero .pill-brand { order: 1; align-self: flex-start; }
  .hero-inner h1 { order: 2; margin: 14px 0 0; }
  .hero .sb-scene { order: 3; height: 318px; margin: 10px 0 18px; }
  .hero-cta { order: 4; }
  .hero-chat { order: 5; margin: 4px 0 18px; }
  .hero-sub { order: 6; margin: 0 0 18px; }
  .hero-aside { order: 7; }
  .hero-trust { order: 8; }
  .sb-scroll-hint { display: none; }
  .sb-box { transform: translateX(-50%) scale(.72); transform-origin: 50% 100%; }
}

/* ==== Homepage v2: WhatsApp chat, FAQ (the nav lives in sitenav.css) ===== */

/* ---- Hero: WhatsApp in one glance ----------------------------------------- */
.hero-chat {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px;
  text-decoration: none; font: 600 13.5px var(--font-body, sans-serif);
}
.hero-chat-out { background: #d9fdd3; color: #0f1a17; padding: 7px 11px; border-radius: 12px 12px 3px 12px; }
.hero-chat-in { background: #fff; color: #0f1a17; padding: 7px 11px; border-radius: 12px 12px 12px 3px; }
.hero-chat-arrow { color: var(--mint, #7ff0dc); font-weight: 700; }

/* ---- WhatsApp chat demo --------------------------------------------------- */
.wa-phone {
  max-width: 340px; width: 100%; margin: 0 auto; border-radius: 26px; overflow: hidden;
  background: #efe7dd; border: 8px solid #10201d; box-shadow: 0 24px 50px -18px rgba(8, 63, 58, .45);
}
.wa-phone-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #075e54; color: #fff; }
.wa-phone-top b { display: block; font-size: 15px; }
.wa-phone-top small { font-size: 12px; opacity: .8; }
.wa-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--mint, #7ff0dc); display: grid; place-items: center; font-size: 17px; }
.wa-chat { padding: 16px 12px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 300px; }
.wa-msg { position: relative; max-width: 84%; padding: 8px 10px 18px; border-radius: 10px; font-size: 14px; line-height: 1.45; color: #111b21; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.wa-msg small { position: absolute; right: 9px; bottom: 4px; font-size: 10.5px; color: #667781; }
.wa-out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.wa-in { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.wa-in > b:first-child { display: block; margin-bottom: 2px; }
.wa-link { display: block; margin-top: 6px; color: #027eb5; font-size: 13px; }
.wa-receipt {
  width: 150px; background: #fffdf7; padding: 10px 10px 12px; border-radius: 4px; transform: rotate(-2deg);
  font: 600 11px/1.6 var(--sb-mono); color: #2a2a2a; display: flex; flex-direction: column;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12); margin-bottom: 2px;
}
.wa-receipt > b { font-size: 13px; letter-spacing: .06em; }
.wa-receipt i { border-top: 1px dashed #cfc6b0; margin: 4px 0; }
.wa-typing { align-self: flex-start; background: #fff; border-radius: 10px; padding: 10px 12px; display: none; gap: 4px; }
.wa-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa5a9; animation: wa-dot 1s infinite; }
.wa-typing i:nth-child(2) { animation-delay: .15s; }
.wa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-dot { 50% { transform: translateY(-3px); opacity: .5; } }

/* The loop: reply shown for most of it, so a screenshot at any moment shows
   the chat working. Starts part-way through, i.e. with the reply on screen. */
@media (prefers-reduced-motion: no-preference) {
  .wa-typing { display: flex; animation: wa-typing 9s infinite -4s; }
  .wa-in { animation: wa-reply 9s infinite -4s; }
  .wa-out { animation: wa-send 9s infinite -4s; transform-origin: 100% 100%; }
}
@keyframes wa-send {
  0% { opacity: .35; transform: translateY(14px) scale(.94); }
  5%, 100% { opacity: 1; transform: none; }
}
@keyframes wa-typing {
  0%, 6% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: -5px 0; }
  8%, 20% { opacity: 1; max-height: 40px; padding-top: 10px; padding-bottom: 10px; margin: 0; }
  22%, 100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: -5px 0; }
}
@keyframes wa-reply {
  0%, 21% { opacity: 0; transform: translateY(8px); }
  25%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* ---- Pricing sum, founder's note ------------------------------------------ */
.price-sum { max-width: 520px; margin: 26px auto 0; text-align: center; font-size: 15px; color: var(--ink-secondary, #4d5c58); line-height: 1.6; }
.sb-note .sb-sign { margin: 14px 0 0; font: 700 26px/1.1 var(--sb-hand); color: #0b5c56; }

/* ---- FAQ: tap a question to open it -------------------------------------- */
.faq { gap: 10px; }
details.faq-item { padding: 0; }
details.faq-item summary {
  list-style: none; cursor: pointer; padding: 16px 48px 16px 20px; position: relative;
  font: 700 15px var(--font-display, sans-serif); color: var(--ink, #0f1a17);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-tint, #e6f4f2); color: var(--brand, #0f8177); font: 700 17px/1 sans-serif;
}
details.faq-item[open] summary::after { content: "−"; }
details.faq-item p { padding: 0 20px 18px; font-size: 14.5px; }

@media (max-width: 860px) {
  .hero-chat { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hero-chat-arrow { transform: rotate(90deg); margin-left: 14px; }
}

/* A plain tick in the brand colour - in place of the green emoji box. */
.tick {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%; margin-right: 6px;
  vertical-align: -2px; background: var(--brand, #0f8177); position: relative; flex-shrink: 0;
}
.tick::after {
  content: ""; position: absolute; left: 5px; top: 2.5px; width: 3.5px; height: 7px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.hero-chat-in { display: inline-flex; align-items: center; }

/* ==== Homepage v3 ========================================================== */

/* ---- Hero: the demo clip beside the box ----------------------------------- */
.hero-visual-stack { position: relative; min-width: 0; }
.hero-demo { margin: 0; }
.hero-demo-frame {
  position: relative; overflow: hidden; background: #f5f7f6;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
}
.hero-demo-frame video { display: block; width: 100%; height: auto; }
.hero-demo-wide { border-radius: 14px; aspect-ratio: 16 / 9; }
.hero-demo-tall { display: none; margin: 0 auto; border-radius: 28px; border: 8px solid #10201d; aspect-ratio: 9 / 16; }
.hero-demo figcaption {
  margin: 10px 0 0; text-align: center; font: 600 11.5px var(--sb-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--mint, #7ff0dc); opacity: .8;
}
/* Computers: the box first, beside the headline; the clip underneath it,
   coming into view as the box closes. */
@media (min-width: 861px) {
  .hero { align-items: start; }
  .hero-visual-stack .sb-scene { height: 430px; }
  .hero-demo { margin-top: 24px; }
}

/* ---- Hero box: transform and opacity only ---------------------------------- */
.sb-lid, .sb-slip { will-change: transform, opacity; backface-visibility: hidden; }
.sb-slip { z-index: 3; }   /* fixed: behind the box front, and fanned out they sit clear above it */

/* ---- Features: 6 cards, 2 rows of 3 ----------------------------------------- */
.landing-body .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .landing-body .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .landing-body .features-grid { grid-template-columns: 1fr; } }

/* ---- Trust strip (above the price) ------------------------------------------ */
.trust-strip { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.trust-lead {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font: 700 16.5px/1.45 var(--font-display, sans-serif); color: var(--ink, #0f1a17);
}
.trust-mark {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-tint, #e6f4f2);
  position: relative;
}
.trust-mark::after {   /* a pencil-line tick, drawn in CSS */
  content: ""; position: absolute; left: 11px; top: 7px; width: 6px; height: 12px;
  border: solid var(--brand, #0f8177); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.trust-facts {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.trust-facts li {
  padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--border, #dfe7e5);
  font: 600 13px var(--font-body, sans-serif); color: var(--ink-secondary, #3f4d49);
}
.trust-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 22px; text-align: left; }
.trust-quote { margin: 0; padding: 18px 20px; background: #fff; border-radius: 14px; border: 1px solid var(--border, #dfe7e5); }
.trust-quote blockquote { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--ink, #0f1a17); }
.trust-quote figcaption { font-size: 13px; color: var(--ink-secondary, #4d5c58); }

/* ---- Phones ------------------------------------------------------------------ */
@media (max-width: 860px) {
  /* Everything in the hero lines up with the left edge of the headline. */
  .hero { align-items: stretch; }
  .hero-trust { align-self: stretch; padding-left: 0; margin-left: 0; }
  .hero-trust span { display: block; text-align: left; }
  .hero-chat { align-self: flex-start; }
  .hero-cta { align-self: stretch; }

  /* The tall clip takes the box's place. */
  .hero-visual-stack { order: 3; margin: 18px 0 22px; }
  .hero-visual-stack .sb-scene { display: none; }
  .hero-demo-wide { display: none; }
  .hero-demo-tall { display: block; width: min(250px, 66vw); }
}
@media (max-width: 480px) {
  .trust-lead { display: flex; text-align: left; font-size: 15.5px; }
  .trust-facts { justify-content: flex-start; }
}