/* ═══════════════════════════════════════════════════════════ the homepage
   BUILT TO CONVERT (2.590.0, the user's word: "the homepage is now even uglier. this needs to be
   optimized for conversions. do best practice CRO and UI/UX design. each element needs to be
   justified"). One goal, a visitor starting a booth, and every block earns its place against it:
   - the NAV stays in view with the same button, so the way in is never a scroll away;
   - the HERO says what it is and the outcome in one line, how it works in one more, one button
     (with a quiet second for the curious), three reassurances under it that answer the first doubts
     (time, my printer, cost), and the illustration of the product beside it;
   - THREE STEPS, the old page's illustrations, because a visitor converts once they see it is easy;
   - a COMPARISON with the thing they would otherwise book, the decision they are actually making;
   - DESIGNS on real backgrounds, so they see their own kind of party and that it will look good;
   - WHAT YOU NEED, which removes the last doubt (do I have the gear?) before the questions;
   - QUESTIONS, the objections left, answered in a sentence each;
   - a FINAL CALL with the same button, and on a phone a bar with it once the hero's has gone.
   Nothing is decoration for its own sake. One accent, the yellow, used only for the button and the
   ticks, so the eye goes to the action. Calm paper and ink everywhere else, generous space, type
   that reads at a glance. Corners of 4px at most, no pill, no card in a card (the app's rules).
   Only landing.html loads this, after saas.css, scoped to `body.home`. */
body.home {
  --bg: #f6f4ef; --surface: #ffffff; --soft: #ece9e2; --ink: #16140f; --dim: #5c5a53; --line: #16140f1f;
  --sun: #ffd60a; --sun-edge: #d9b300; --sun-press: #f2c800; --ok: #17803d; --no: #b4b0a6; --night: #16140f; --night-ink: #f4f1ea;
  --display: "Plus Jakarta Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;
  margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--body);
}
:root[data-theme="dark"] body.home {
  --bg: #121110; --surface: #1c1b18; --soft: #24221e; --ink: #f1ede4; --dim: #a9a49a; --line: #f1ede41f; --ok: #4cc27a; --no: #6d695f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.home {
    --bg: #121110; --surface: #1c1b18; --soft: #24221e; --ink: #f1ede4; --dim: #a9a49a; --line: #f1ede41f; --ok: #4cc27a; --no: #6d695f;
  }
}
body.home .hp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
body.home a { color: inherit; }
body.home h1, body.home h2, body.home h3 { font-family: var(--display); color: var(--ink); }

/* the buttons: one yellow button, everything else a word */
body.home .hp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--sun-edge); border-radius: 4px; background: var(--sun); color: #16140f;
  font: 800 15px/1 var(--display); letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
}
body.home .hp-btn:hover { background: var(--sun-press); }
body.home .hp-btn:active { transform: translateY(1px); }
body.home .hp-btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
body.home .hp-text-btn {
  border: 0; background: none; padding: 6px 2px; cursor: pointer; color: var(--ink);
  font: 700 15px/1.2 var(--display); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px;
}
body.home .hp-text-btn:hover { text-decoration-thickness: 3px; }
body.home :is(.hp-btn, .hp-text-btn, .hp-links a, summary, .hp-brand):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the nav: always in reach */
body.home .hp-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
body.home .hp-nav-in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
body.home .hp-brand { font: 800 26px/1 var(--display); letter-spacing: -0.05em; text-decoration: none; }
body.home .hp-links { display: flex; gap: 24px; }
body.home .hp-links a { font: 600 15px/1 var(--display); text-decoration: none; color: var(--dim); }
body.home .hp-links a:hover { color: var(--ink); }
body.home .hp-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }

/* the hero */
body.home .hp-hero { padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 96px); }
body.home .hp-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
body.home .hp-hero h1 { margin: 0; font-size: clamp(42px, 6vw, 80px); font-weight: 800; line-height: 0.98; letter-spacing: -0.045em; }
body.home .hp-lead { margin: 22px 0 0; max-width: 34ch; font-size: clamp(18px, 1.6vw, 21px); color: var(--dim); }
body.home .hp-ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
body.home .hp-assure { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; }
body.home .hp-assure li { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink); }
body.home .hp-assure svg, body.home .hp-ok svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body.home .hp-hero-art { display: grid; place-items: center; min-height: 540px; border-radius: 4px; background: radial-gradient(60% 60% at 50% 45%, #ffe680, transparent 70%), var(--soft); }
body.home .hp-hero-art .lp-hero-visual { width: 100%; min-height: 440px; }
body.home .hp-hero-art .lp-hero-visual::before { display: none; }
body.home .hp-hero-art .lp-scan { border-radius: 4px; }
body.home .hp-hero-art .lp-phone { width: min(230px, 58%); }

/* each band: a heading and its content, plenty of air between */
body.home .hp-band { padding: clamp(56px, 8vw, 104px) 0; }
body.home .hp-band:nth-of-type(even) { background: var(--surface); }
body.home .hp-band h2, body.home .hp-final h2 { margin: 0 0 clamp(28px, 3.5vw, 44px); max-width: 28ch; font-size: clamp(32px, 4.2vw, 54px); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; }
body.home .hp-sub { margin: -18px 0 32px; max-width: 52ch; color: var(--dim); font-size: 18px; }

/* three steps: the illustrations */
body.home .hp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
body.home .hp-step { position: relative; }
body.home .hp-step-pic { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 4px; margin-bottom: 22px;
  background: radial-gradient(70% 70% at 50% 15%, #ffffff40, transparent 70%), linear-gradient(135deg, #1d8a74, #0e5b54); }
body.home .hp-step:nth-child(2) .hp-step-pic { background: radial-gradient(70% 70% at 50% 15%, #ffffff40, transparent 70%), linear-gradient(135deg, #f2b632, #e0861f); }
body.home .hp-step:nth-child(3) .hp-step-pic { background: radial-gradient(70% 70% at 50% 15%, #ffffff40, transparent 70%), linear-gradient(135deg, #7c5ce0, #4b34b0); }
body.home .hp-step-pic svg { width: 76%; max-width: 280px; height: auto; filter: drop-shadow(0 10px 16px #0003); }
body.home .hp-step-no { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; background: var(--ink); color: var(--bg); font: 800 16px/1 var(--display); }
body.home .hp-step h3 { margin: 14px 0 0; font-size: 23px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
body.home .hp-step p { margin: 8px 0 0; color: var(--dim); }

/* the comparison */
body.home .hp-table-wrap { overflow-x: auto; }
body.home .hp-table { width: 100%; border-collapse: collapse; font-size: 17px; }
body.home .hp-table th, body.home .hp-table td { padding: 18px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
body.home .hp-table thead th { font: 800 18px/1.2 var(--display); letter-spacing: -0.02em; border-bottom: 2px solid var(--ink); }
body.home .hp-table tbody th { font: 700 16px/1.3 var(--display); color: var(--dim); width: 22%; }
body.home .hp-table td { color: var(--dim); }
body.home .hp-table td:last-child, body.home .hp-table th.is-us { color: var(--ink); font-weight: 650; background: color-mix(in srgb, var(--sun) 16%, transparent); }
body.home .hp-table td > span { display: inline-flex; vertical-align: -4px; margin-right: 10px; }
body.home .hp-x svg { width: 20px; height: 20px; fill: none; stroke: var(--no); stroke-width: 2.4; stroke-linecap: round; }
body.home .hp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* designs: real backgrounds, named */
body.home .hp-occs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.home .hp-occ { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; display: grid; place-items: center; background: #fff var(--paper) center / cover no-repeat; box-shadow: 0 0 0 1px var(--line); }
body.home .hp-occ::after { content: ""; position: absolute; inset: 0; background: var(--front) center / cover no-repeat; }
body.home .hp-occ figcaption { position: relative; z-index: 1; padding: 8px 14px; border-radius: 3px; background: #fffdf8; color: #16140f; font: 800 19px/1 var(--display); letter-spacing: -0.02em; box-shadow: 0 6px 16px -8px #0007; }
body.home .hp-counts { margin: 26px 0 0; font: 600 17px/1.4 var(--display); color: var(--dim); }
body.home .hp-counts b { color: var(--ink); font-weight: 800; }
body.home .hp-counts span { margin: 0 8px; }

/* what you need */
body.home .hp-needs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
body.home .hp-needs li { display: grid; gap: 6px; align-content: start; }
body.home .hp-needs svg { width: 44px; height: 44px; margin-bottom: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.home .hp-needs b { font: 800 20px/1.2 var(--display); letter-spacing: -0.02em; }
body.home .hp-needs span { color: var(--dim); }
body.home .hp-needs + .hp-sub { margin: 32px 0 0; font-weight: 600; color: var(--ink); }

/* questions */
body.home .hp-faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
body.home .hp-q { border-bottom: 1px solid var(--line); }
body.home .hp-q:first-child { border-top: 1px solid var(--line); }
body.home .hp-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; font: 700 18px/1.35 var(--display); letter-spacing: -0.015em; }
body.home .hp-q summary::-webkit-details-marker { display: none; }
body.home .hp-q summary::after { content: "+"; flex: none; font: 400 26px/0.9 var(--display); }
body.home .hp-q[open] summary::after { content: "−"; }
body.home .hp-q p { margin: -6px 0 20px; color: var(--dim); max-width: 60ch; }

/* the last call */
body.home .hp-final { padding: clamp(64px, 9vw, 120px) 0; background: var(--night); color: var(--night-ink); text-align: center; }
body.home .hp-final h2 { color: var(--night-ink); margin: 0 auto 14px; }
body.home .hp-final p { margin: 0; color: #c9c4b8; font-size: 18px; }
body.home .hp-final .hp-ctas { justify-content: center; }
body.home .hp-final .hp-text-btn { color: var(--night-ink); }
body.home .hp-foot { padding: 28px 0 40px; }
body.home .hp-foot .hp-brand { font-size: 20px; color: var(--dim); }

/* on a phone, the way in stays in reach */
body.home .hp-sticky { display: none; }
@media (max-width: 980px) {
  body.home .hp-links { display: none; }
  body.home .hp-hero-in { grid-template-columns: minmax(0, 1fr); }
  body.home .hp-hero-art { min-height: 340px; }
  body.home .hp-hero-art .lp-hero-visual { min-height: 320px; }
  body.home .hp-steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  body.home .hp-occs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home .hp-needs { grid-template-columns: minmax(0, 1fr); }
  body.home .hp-faq-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  body.home .hp-nav-in { gap: 12px; min-height: 60px; }
  body.home .hp-nav-actions { gap: 10px; }
  body.home .hp-nav-actions .hp-btn { display: none; }
  body.home .hp-hero-art .lp-phone { width: min(190px, 56%); }
  body.home .hp-table th, body.home .hp-table td { padding: 14px 10px; font-size: 15px; }
  body.home .hp-table tbody th { width: auto; }
  body.home .hp-sticky:not([hidden]) {
    display: block; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -1px 0 var(--line), 0 -10px 24px -18px #0006;
  }
  body.home .hp-sticky .hp-btn { width: 100%; }
  body.home .hp-foot { padding-bottom: 96px; }
}

/* the sign-up box, in the same dress */
body.home .lp-auth-modal .card.auth { background: var(--surface); color: var(--ink); border: 0; border-radius: 4px; box-shadow: 0 30px 60px -24px #000a; padding: 32px; }
body.home .lp-auth-modal h2 { font: 800 28px/1.05 var(--display); letter-spacing: -0.035em; }
body.home .lp-auth-modal .sub { color: var(--dim); }
body.home .lp-auth-modal .lp-modal-close { border: 0; background: none; border-radius: 0; color: var(--ink); }
body.home .lp-auth-modal .social { border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--ink); }
body.home .lp-auth-modal .field span { font: 700 14px/1.3 var(--display); color: var(--ink); }
body.home .lp-auth-modal .field input { border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); box-shadow: none; }
body.home .lp-auth-modal .field input:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: transparent; box-shadow: none; }
body.home .lp-auth-modal .btn.primary { border: 1px solid var(--sun-edge); border-radius: 4px; background: var(--sun); color: #16140f; box-shadow: none; font: 800 16px/1 var(--display); min-height: 50px; }
body.home .lp-auth-modal .btn.primary:hover { background: var(--sun-press); }
body.home .lp-auth-modal .toggle button { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }