/* Home page (DESIGN.md, mode Persuade): ink hero with the product demo sitting on it like a sheet
   of paper, then statement rows on cream. Scoped to body.home. The tokens, header, footer,
   buttons and the pricing calculator are shared with every public page and live in site.css
   (body.site). The app's own pieces (dots, split bar, avatars, live dot) come from shell.css. */

body.home .icon { width: 18px; height: 18px; flex: none; }
body.home .num { text-align: right; font-variant-numeric: tabular-nums; }
body.home table { border-collapse: collapse; }
body.home th, body.home td { padding: 0; border: 0; text-align: left; font-weight: inherit; }

/* ---------- Hero ---------- */
/* The paper disc sits past the right edge; clip it on the x axis only (clip, not hidden, so the
   demo's overhang into the cream below stays visible) so the page never scrolls sideways. */
body.home .home-hero { position: relative; overflow-x: clip; overflow-y: visible; padding: 72px 0 0; background: var(--ink); color: var(--paper); }
.home-hero .hero-paper { position: absolute; right: max(-160px, calc(50% - 780px)); bottom: 0; width: 520px; height: 260px; border-radius: 260px 260px 0 0; background: var(--yellow); pointer-events: none; overflow: hidden; }
.home-hero .hero-paper::before { content: ""; position: absolute; left: -10px; top: 120px; width: 200px; height: 200px; border-radius: 50%; background: var(--yellow-deep); }
.home-hero .hero-paper span { display: none; }
body.home .hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "h1 h1" "copy demo";
  gap: 36px 56px; align-items: start;
}
body.home .hero-grid h1 {
  grid-area: h1; max-width: 21ch; margin: 0;
  font-size: clamp(2.15rem, 5.2vw, 4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance;
}
body.home .hero-copy { grid-area: copy; padding-bottom: 64px; }
body.home .hero-copy .lead { max-width: 34em; margin: 0; color: var(--cream); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; }
body.home .hero-copy .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
body.home .hero-copy .under { max-width: 34em; margin: 18px 0 0; color: var(--on-ink); font-size: 14.5px; line-height: 1.5; }
body.home .hero-copy .hint { margin: 10px 0 0; color: var(--on-ink); font-size: 14.5px; }

/* ---------- The mini-demo ---------- */
/* The card always reaches 128px past the ink into the cream, whichever column is taller. */
body.home .demo { grid-area: demo; align-self: end; position: relative; z-index: 2; margin: 0 0 -128px; min-width: 0; }
/* The standing kangaroo behind the card, its head and shoulders over the top edge (z-index -1
   inside the demo's stacking context paints it under the panels). In the card's right half,
   facing left toward the copy: 180px from the right keeps it clear of the headline, the copy and
   the buttons, and off the yellow disc, from 600 to 1440px in EN, DE and NL (measured with the
   server's Chromium, Oct 23). Hidden under 600px, where the helper's blank source also keeps it
   from downloading. */
body.home .demo-roo { position: absolute; z-index: -1; right: 180px; top: -112px; width: 150px; height: auto; pointer-events: none; }
.demo-stage { display: grid; gap: 16px; }
.demo-panel {
  min-width: 0; padding: 20px; border-radius: 16px; background: var(--paper); color: var(--text); box-shadow: var(--sheet);
  font-size: 14px; line-height: 1.4;
}
/* With JavaScript: one box, the state swaps in place (no layout shift). */
.demo.is-live .demo-stage > .demo-panel { grid-area: 1 / 1; transition: opacity 0.32s var(--ease), transform 0.42s var(--ease), visibility 0s linear 0s; }
.demo.is-live .demo-panel:not(.is-on) { visibility: hidden; opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s; }
.demo:not(.is-live) .demo-action, .demo:not(.is-live) .demo-toolbar { display: none; }

.demo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.demo-title { margin: 0; font-size: 15px; font-weight: 750; letter-spacing: -0.01em; }

.demo-grid { width: 100%; table-layout: fixed; font-variant-numeric: tabular-nums; }
.demo-grid col, .demo-grid th, .demo-grid td { vertical-align: middle; }
.demo-grid thead th { padding: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-3); text-align: right; }
.demo-grid thead th span { display: block; font-weight: 750; color: var(--text); font-size: 13px; }
.demo-grid thead th.tot { vertical-align: bottom; color: var(--text-2); }
.demo-grid thead td { width: 34%; }
.demo-grid .d { width: 7.3%; }
.demo-grid .tot { width: 13.5%; padding-left: 8px; }
.demo-grid tbody th { padding: 10px 10px 10px 0; border-top: 1px solid var(--line); }
.demo-grid tbody td { padding: 10px 0; border-top: 1px solid var(--line); font-weight: 600; font-size: 13.5px; }
.demo-grid tbody td.tot { font-weight: 750; font-size: 14px; }
.demo-grid .we { background: var(--field); }
.demo-grid thead .we { background: none; color: var(--text-3); }
.row-name { display: flex; align-items: center; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-name .dot { margin-right: 8px; }
.row-meta { display: block; margin: 2px 0 0 18px; font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-grid tfoot th, .demo-grid tfoot td { padding: 10px 0 0; border-top: 1.5px solid var(--ink); font-weight: 750; font-size: 13.5px; }
.demo-grid tfoot td.tot { font-size: 17px; }
.demo-grid tfoot .split { margin-top: 6px; }
.demo-grid tfoot .we { background: none; }

.demo-action { display: flex; justify-content: flex-end; margin: 18px 0 0; }
.demo-button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px;
  background: var(--ink); color: var(--paper); font: inherit; font-size: 15px; font-weight: 750; cursor: pointer;
  transition: background-color 0.15s ease-out, transform 0.1s ease-out;
}
.demo-button:hover { background: var(--ink-3); }
.demo-button:active { transform: translateY(1px); }
.demo-button .icon { transition: transform 0.2s var(--ease); }
.demo-button:hover .icon { transform: translateX(3px); }

.demo-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: -4px 0 14px; }
.demo-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 8px; border: 1px solid var(--line-2); border-radius: 10px;
  background: transparent; color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
}
.demo-back:hover { color: var(--text); background: var(--field); }
.lang-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 3px 3px 3px 12px; border-radius: 10px; background: var(--field); }
.lang-toggle-label { margin-right: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.lang-toggle button {
  min-width: 40px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: 0.03em; cursor: pointer;
}
.lang-toggle button:hover { color: var(--text); }
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.demo-docs { display: grid; }
.demo.is-live .demo-docs > .doc { grid-area: 1 / 1; transition: opacity 0.22s ease-out; }
.demo.is-live .demo-docs > .doc:not(.is-current) { visibility: hidden; opacity: 0; }
.demo:not(.is-live) .demo-docs > .doc:not(.is-current) { display: none; }
/* With scripting on, the first paint already has the live layout (one cell, the week card on top,
   the buttons in place), so nothing moves when the controller connects (audit Oct 23, finding 5).
   Without scripting, or in a browser without the media feature, the panels stand stacked. */
@media (scripting: enabled) {
  body.home .demo .demo-stage > .demo-panel { grid-area: 1 / 1; }
  body.home .demo:not(.is-live) .demo-panel.demo-invoice { visibility: hidden; }
  body.home .demo:not(.is-live) .demo-action, body.home .demo:not(.is-live) .demo-toolbar { display: flex; }
  body.home .demo .demo-docs > .doc { grid-area: 1 / 1; }
  body.home .demo:not(.is-live) .demo-docs > .doc:not(.is-current) { display: block; visibility: hidden; }
}

.file-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0; padding: 5px 12px 5px 8px; border-radius: 999px;
  background: var(--green-wash); color: var(--green-ink); font-size: 13px; font-weight: 750;
}
.file-chip .icon { width: 16px; height: 16px; }
.demo-caption { margin: 14px 4px 0; color: var(--text-2); font-size: 13px; line-height: 1.45; }

/* An invoice, laid out like the printed one */
.doc { min-width: 0; color: var(--ink); font-size: 12.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.doc-parties { display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.doc-buyer { margin: 0; }
.doc-sender { display: block; margin-bottom: 6px; padding-bottom: 2px; border-bottom: 1px solid var(--line-2); color: var(--text-3); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.doc-meta { margin: 0; text-align: right; color: var(--text); }
.doc-meta span { display: block; color: var(--text-3); font-size: 11.5px; }
.doc-title { margin: 16px 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
.doc-lines { width: 100%; }
.doc-lines th { padding: 0 0 5px; border-bottom: 1.5px solid var(--ink); font-size: 11.5px; font-weight: 700; }
.doc-lines td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.doc-lines th + th, .doc-lines td + td { padding-left: 12px; }
.doc-lines .num { white-space: nowrap; }
.doc-totals { margin: 8px 0 0 auto; min-width: 62%; }
.doc-totals th { padding: 3px 12px 3px 0; font-weight: 500; color: var(--text-2); }
.doc-totals td { padding: 3px 0; white-space: nowrap; }
.doc-totals .gross th, .doc-totals .gross td { padding-top: 6px; border-top: 1.5px solid var(--ink); color: var(--ink); font-weight: 800; font-size: 14px; }
/* The app's invoice sheet (shell_invoices.css) uses the same .doc-* class names, and until
   Oct 23, 2026 its rules applied here too. They stay as they were, at their old specificity, now
   that the home page no longer loads the app's sheets. */
:where(body.home) .doc-parties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px 32px; margin: 28px 0 8px; }
:where(body.home) .doc-buyer { min-width: 0; font-size: 14.5px; line-height: 1.5; }
:where(body.home) .doc-meta { margin: 0; font-size: 14px; }
:where(body.home) .doc-totals { display: flex; justify-content: flex-end; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-2); }
@media (max-width: 760px) {
  :where(body.home) .doc-parties { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; }
}
.doc-note { margin: 10px 0 0; font-size: 11.5px; }
.doc-note mark { background: none; color: inherit; font-weight: 700; }

/* ---------- Sections on cream ---------- */
body.home main.wrap { padding-top: 184px; padding-bottom: 96px; }
body.home main.wrap > * + * { margin-top: 112px; }
body.home main h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }


/* German deadlines: a timeline with today marked, across the invoice section's foot */
body.home .proof .deadlines { grid-column: 1 / -1; margin-top: 8px; padding-top: 40px; border-top: 1px solid var(--line-2); }
body.home .deadlines h3 { max-width: 26ch; margin: 0 0 32px; font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
body.home .timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
body.home .timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--ink); }
body.home .stop { position: relative; padding-top: 34px; }
body.home .stop-dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--cream); border: 2px solid var(--ink); box-sizing: border-box; }
body.home .stop.is-past .stop-dot { background: var(--ink); }
body.home .stop-date { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
body.home .stop-text { margin: 0; max-width: 32ch; color: var(--text-2); }
body.home .now { position: absolute; top: 1px; left: calc(((100% - 64px) / 3 + 32px) * 0.9); width: 14px; height: 14px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgb(239 166 8 / 0.25); }
body.home .deadlines-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line-2); }
body.home .small-print { margin: 0; color: var(--text-3); font-size: 13.5px; }
body.home .deadlines-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }

/* The invoice section (pages/home/_proof): text and a piece of the product */
body.home .row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line-2); }
body.home .row:first-of-type { border-top: 0; padding-top: 24px; }
body.home .row h2 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); letter-spacing: -0.02em; }
body.home .row-text p { margin: 14px 0 0; max-width: 56ch; color: var(--text-2); font-size: 1.02rem; line-height: 1.65; }
body.home .row-text p:has(.arrow-link) { margin-top: 18px; }
body.home .row { scroll-margin-top: 24px; }
/* The kangaroo with an invoice under the section's text. */
body.home .row-roo { display: block; width: 200px; height: auto; margin: 28px 0 0; }

.plate { margin: 0; padding: 24px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); color: var(--text); font-size: 14px; }

.mini-timer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 14px 14px 18px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgb(20 26 46 / 0.05), 0 8px 24px -12px rgb(20 26 46 / 0.18); }
.mini-what { min-width: 0; }
.mini-title { display: block; font-size: 16px; font-weight: 700; }
.mini-meta { display: flex; align-items: center; margin-top: 2px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-meta .dot { margin-right: 6px; }
.mini-clock { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mini-stop { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--ink); color: var(--paper); }
.typed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.typed li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--field); font-variant-numeric: tabular-nums; }
.typed-in { font-size: 18px; font-weight: 600; color: var(--text-2); }
.typed .icon { width: 16px; height: 16px; color: var(--text-3); }
.typed-out { font-size: 18px; font-weight: 800; }

.person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
.person-name { font-weight: 700; font-size: 15px; }
.person-hours { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.person .split { grid-column: 2 / -1; height: 6px; }

.plate-languages { padding: 24px 24px 18px; background: var(--ground); border: 0; }
.sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.sheets .doc { padding: 16px; border-radius: 6px; background: var(--paper); box-shadow: 0 1px 2px rgb(20 26 46 / 0.08), 0 14px 30px -18px rgb(20 26 46 / 0.4); font-size: 11px; }
.sheets .doc:last-child { margin-top: 36px; }
.doc-compact .doc-title { margin: 10px 0 6px; font-size: 15px; }
.doc-compact .q, .doc-compact .p { display: none; }
.doc-compact .doc-totals { min-width: 100%; }
.doc-compact .doc-parties { display: block; }
.doc-compact tr.legal th, .doc-compact tr.legal td { box-shadow: inset 0 1.5px 0 var(--ink), inset 0 -1.5px 0 var(--ink); }
.doc-compact tr.legal th { box-shadow: inset 0 1.5px 0 var(--ink), inset 0 -1.5px 0 var(--ink), inset 1.5px 0 0 var(--ink); padding-left: 6px; color: var(--ink); font-weight: 650; }
.doc-compact tr.legal td { box-shadow: inset 0 1.5px 0 var(--ink), inset 0 -1.5px 0 var(--ink), inset -1.5px 0 0 var(--ink); padding-right: 6px; }
.doc-compact .doc-note mark { display: inline-block; padding: 2px 6px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.plate-languages figcaption { margin: 18px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }

.countries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.countries li { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.countries .icon { color: var(--green-ink); }

/* Pricing band */
body.home .pricing {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 48px; align-items: start;
  padding: 44px; border-radius: 24px; background: var(--yellow); color: var(--ink); scroll-margin-top: 24px;
}
body.home .pricing-head h2 { max-width: 17ch; }
body.home .lock { margin: 16px 0 0; max-width: 30ch; font-size: 1.05rem; font-weight: 650; line-height: 1.5; }
/* The paid kangaroo stands on a paper disc (the hero's disc motif): yellow on the yellow band
   would disappear. The disc is the img's own background, so the confetti flies past its edge. */
body.home .pricing-roo { display: block; box-sizing: content-box; width: 180px; height: auto; margin: 28px 0 0; padding: 22px; border-radius: 50%; background: var(--paper); }
body.home .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
body.home .plan-card { padding: 22px; border-radius: 16px; background: var(--paper); }
body.home .plan-card p { margin: 0; }
body.home .plan-name { font-size: 14px; font-weight: 750; color: var(--text-2); }
body.home .plan-price { margin: 4px 0 10px !important; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
body.home .plan-card p:last-child { color: var(--text-2); font-size: 15px; line-height: 1.55; }
body.home .pricing-foot { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 48px; }
body.home .never-extra-title { margin: 0 0 10px; font-weight: 800; }
body.home .never-extra ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.home .never-extra li { padding: 5px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.6); font-size: 14px; font-weight: 700; }
body.home .pricing-notes p { margin: 0; max-width: 58ch; line-height: 1.6; }
body.home .pricing-notes p + p { margin-top: 12px; }
body.home .pricing .arrow-link { text-decoration-color: rgb(20 26 46 / 0.4); }
/* The yellow button would vanish on the yellow band: ink here. */
body.home .pricing-notes .actions { margin: 18px 0 22px; }
body.home .pricing .button.primary { background: var(--ink); color: var(--paper); }
body.home .pricing .button.primary:hover { background: var(--ink-3); }

/* Who builds it */
body.home .founder { display: flex; gap: 28px; align-items: center; padding: 32px 40px; border-radius: 24px; background: var(--cream-2); }
body.home .founder-photo { flex: none; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
body.home .founder p { margin: 12px 0 0; max-width: 54ch; color: var(--text-2); font-size: 1.05rem; line-height: 1.65; }
body.home .founder a { color: var(--ink); font-weight: 700; }

/* FAQ */
body.home .faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 56px; align-items: start; }
body.home .faq h2 { position: sticky; top: 24px; }
body.home .faq-list { border-bottom: 1px solid var(--line-2); }
body.home.marketing .faq details { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; scroll-margin-top: 24px; }
body.home.marketing .faq summary {
  position: relative; display: block; padding: 18px 44px 18px 0; list-style: none; cursor: pointer;
  font-size: 1.08rem; font-weight: 750; line-height: 1.4;
}
body.home .faq summary::-webkit-details-marker { display: none; }
body.home .faq summary::before, body.home .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform 0.2s var(--ease); }
body.home .faq summary::after { transform: rotate(90deg); }
body.home .faq details[open] summary::after { transform: rotate(0deg); }
body.home .faq summary:hover { color: var(--ink-3); }
body.home.marketing .faq details p { margin: 0; padding: 0 0 22px; max-width: 62ch; color: var(--text-2); line-height: 1.65; }
body.home .faq details p a { color: var(--ink); font-weight: 700; }

/* ---------- The two situations (pages/home/_audiences, Oct 27, 2026) ---------- */
/* "For your team" on ink (the paying side, framed like the hero), "Just you" on paper; each panel
   holds its own reasons and button, and the buttons line up at the bottom. */
body.home .audiences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
body.home .audience { display: flex; flex-direction: column; min-width: 0; padding: 40px; border-radius: 24px; scroll-margin-top: 24px; }
body.home .audience-team { background: var(--ink); color: var(--paper); }
body.home .audience-solo { background: var(--paper); border: 1px solid var(--line); }
body.home .audience h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
body.home .audience-lead { margin: 10px 0 0; max-width: 32ch; font-size: 1.15rem; font-weight: 650; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
body.home .audience-team .audience-lead { color: var(--cream); }
body.home .audience .plate { margin: 28px 0 0; }
body.home .audience-solo .plate { background: var(--ground); border: 0; }
body.home .audience-solo .mini-timer, body.home .audience-solo .typed li { background: var(--paper); }
body.home .audience-points { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
body.home .audience-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; line-height: 1.5; color: var(--text-2); }
body.home .audience-points .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--ink); }
body.home .audience-team .audience-points li { color: var(--on-ink); }
body.home .audience-team .audience-points .icon { color: var(--paper); }
body.home .audience-price { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line-2); font-weight: 700; line-height: 1.5; }
body.home .audience-team .audience-price { border-top-color: var(--ink-3); }
body.home .audience .actions { margin: auto 0 0; padding-top: 24px; }
body.home .audience-line { margin: 12px 0 0; font-size: 14.5px; color: var(--text-2); }
body.home .audience-team .audience-line { color: var(--on-ink); }
body.home .button.ink { background: var(--ink); color: var(--paper); }
body.home .button.ink:hover { background: var(--ink-3); }

/* The owner's week: people, the approval state (the app's tags), hours and the billable split. */
.plate-approvals { display: grid; gap: 16px; }
.plate-label { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-2); }
/* Name and state wrap onto two lines in a narrow plate rather than cut the name. */
.plate-approvals .person-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.plate-approvals .approval-tag.is-approved { background: var(--ink); color: var(--paper); }
.plate-approvals .person-hours { min-width: 3.4em; text-align: right; }
.plate-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: 12px; border-top: 1.5px solid var(--ink); font-weight: 750; }

/* English needs no automatic hyphenation (site.css turns it on for German compounds); it broke
   "stu-dios" and "in-voices" mid-word in the narrow columns. */
html[lang="en"] body.home :is(h1, h2, h3, p, li, summary, a) { hyphens: manual; }

/* Shared proof: the market's points (DE, NL), the French notice and the links */
body.home .proof-points { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
body.home .proof-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; max-width: 56ch; color: var(--text-2); line-height: 1.55; }
body.home .proof-points .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--ink); }
body.home .row-text .proof-note { padding: 14px 16px; border-radius: 12px; background: var(--cream-2); color: var(--ink); font-size: 0.98rem; line-height: 1.6; }
body.home .proof-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.plate-countries figcaption { margin: 18px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }

/* Plan cards name their audience */
body.home .plan-for { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: var(--field); color: var(--text-2); font-size: 12.5px; font-weight: 700; vertical-align: 1px; }

/* Easy to move in, easy to leave: four statements on rules, like a statement's lines */
body.home .trust h2 { max-width: 22ch; margin-bottom: 28px; }
body.home .trust-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; padding: 0; list-style: none; }
body.home .trust-list li { padding: 20px 0 24px; border-top: 1px solid var(--line-2); }
body.home .trust-list li:nth-child(-n+2) { border-top: 1.5px solid var(--ink); }
body.home .trust-list h3 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
body.home .trust-list p { margin: 8px 0 0; max-width: 52ch; color: var(--text-2); line-height: 1.6; }
body.home .trust-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
body.home .trust-list .trust-compare { margin-top: 6px; font-size: 15px; }
body.home .trust-compare a { color: var(--ink); font-weight: 700; text-decoration-color: var(--line-2); }
body.home .trust + .founder { margin-top: 40px; }

/* Free tools: a quiet list of links under the close */
body.home main.wrap > .tool-links { margin-top: 64px; }
body.home .tool-links h2 { font-size: 1.2rem; letter-spacing: -0.01em; }
body.home .tool-links ul { columns: 3 220px; column-gap: 32px; margin: 16px 0 0; padding: 0; list-style: none; }
body.home .tool-links li { break-inside: avoid; padding: 5px 0; }
body.home .tool-links a { color: var(--text-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
body.home .tool-links a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* The close: .final lives in site.css (the hubs and the guides end on it too). */
/* The wave and stand poses face right; where they sit right of the content, mirror them to face it. */
body.home .demo-roo { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  body.home *, body.home *::before, body.home *::after { transition: none !important; animation: none !important; }
  .demo.is-live .demo-panel:not(.is-on) { transform: none; }
}

/* Laptop and tablet */
@media (max-width: 1080px) {
  body.home .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "copy" "demo"; gap: 28px; }
  body.home .hero-copy { padding-bottom: 8px; }
  body.home .demo { max-width: 680px; }
  /* One column: room above the card for the kangaroo's head, clear of the copy above it. */
  body.home .demo:has(.demo-roo) { margin-top: 104px; }
  body.home .faq { grid-template-columns: minmax(0, 1fr); }
  body.home .faq h2 { position: static; }
  body.home .row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.home .pricing { grid-template-columns: minmax(0, 1fr); }
  body.home .pricing-head h2 { max-width: none; }
  body.home .pricing-foot { grid-template-columns: minmax(0, 1fr); }
}

/* The two situations stack before their panels get narrow */
@media (max-width: 900px) {
  body.home .audiences { grid-template-columns: minmax(0, 1fr); }
  body.home .audience-lead { max-width: none; }
}

/* Phone */
@media (max-width: 760px) {
  body.home .home-hero { padding-top: 40px; }
  body.home .hero-copy .actions { flex-direction: column; align-items: stretch; }
  .home-hero .hero-paper { width: 300px; height: 150px; right: -80px; }
  .home-hero .hero-paper::before { width: 120px; height: 120px; top: 70px; }
  body.home .demo { margin-bottom: -64px; }
  body.home main.wrap { padding-top: 136px; padding-bottom: 64px; }
  body.home main.wrap > * + * { margin-top: 72px; }
  body.home .timeline { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-left: 30px; }
  body.home .timeline::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  body.home .stop { padding-top: 0; }
  body.home .stop-dot { left: -30px; top: 4px; }
  body.home .stop:first-child { order: 1; }
  body.home .now { position: relative; order: 2; top: auto; left: -29px; margin: -6px 0; }
  body.home .stop:not(:first-child) { order: 3; }
  body.home .row { padding: 40px 0; }
  .plate { padding: 16px; }
  .mini-timer { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what what" "clock stop"; gap: 10px 12px; padding: 12px; }
  .mini-what { grid-area: what; }
  .mini-clock { grid-area: clock; font-size: 28px; }
  .mini-stop { grid-area: stop; }
  .typed { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .plate-languages { padding: 14px 14px 12px; }
  .sheets { grid-template-columns: minmax(0, 1fr); }
  .sheets .doc:last-child { margin: 0 0 0 24px; }
  .sheets .doc:first-child { margin-right: 24px; }
  .sheets .doc { padding: 12px; }
  .countries { grid-template-columns: minmax(0, 1fr); }
  body.home .pricing { padding: 26px 18px 22px; border-radius: 20px; gap: 22px; }
  body.home .plans { grid-template-columns: minmax(0, 1fr); }
  body.home .founder { padding: 24px 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
  body.home .founder-photo { width: 88px; height: 88px; }
  body.home .row-roo { width: 140px; margin-top: 22px; }
  body.home .pricing-roo { width: 120px; margin-top: 18px; padding: 14px; }
  body.home .pricing-notes .button { width: 100%; }
  body.home .audience { padding: 28px 20px; border-radius: 20px; }
  body.home .audience .button { width: 100%; }
  body.home .audience-solo .typed { display: none; }
  body.home .trust-list { grid-template-columns: minmax(0, 1fr); }
  body.home .trust-list li:nth-child(2) { border-top-width: 1px; border-top-color: var(--line-2); }
  body.home .trust + .founder { margin-top: 24px; }
  body.home main.wrap > .tool-links { margin-top: 48px; }
}

/* Under 600 px the hero kangaroo goes: the card is full width and the copy sits right above it. */
@media (max-width: 599.98px) {
  body.home .demo-roo { display: none; }
  body.home .demo:has(.demo-roo) { margin-top: 0; }
}

/* Small phones: the week card keeps its rows and totals, the day columns go */
@media (max-width: 560px) {
  .demo-panel { padding: 16px; }
  .demo-grid .d { display: none; }
  .demo-grid thead td { width: auto; }
  .demo-grid .tot { width: 5.5em; }
  .doc-lines .q, .doc-lines .p { display: none; }
  .doc-totals { min-width: 100%; }
  .doc-meta { text-align: left; }
  .lang-toggle-label { display: none; }
}