/**
 * @l99/component: home-services-page
 * source: original
 * license: internal
 * imported: 2026-09-16   adapted-by: Level99
 *
 * Page-only styles for /home-services/. Loaded after styles-hud.css and
 * consumes its tokens (--lime, --paper, --ink, --r, --ease, --dur ...).
 * Nothing in styles-hud.css is edited, so no sitewide cache-bust.
 * Animation: transform + opacity only. Reduced-motion paths at the end.
 */

/* ---------- Small utilities ---------- */
.hs-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Footer headings on this page are h3 (valid outline under h2 sections).
   Mirror of the .site-footer h4 style in styles-hud.css. */
.site-footer .footer-grid h3 {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim);
  margin: 0 0 var(--space-3);
}
.site-footer .footer-legal { color: var(--ink-dim); }
.section--dark .section__title .accent { color: var(--lime); }
/* The site default focus ring is lime, which is 1.5:1 on paper. Marker
   green clears 3:1 on every light surface here. */
.section--light :focus-visible { outline: 2px solid var(--accent-paper); outline-offset: 3px; }

/* ---------- Hero + leak meter ---------- */
/* The homepage hero gets its top spacing from the demo ticker. This page
   has no ticker, so the hero sets its own. */
/* The attract-mode ticker sits flush under the nav; its own margin-bottom
   (styles-hud.css .demo-ticker) provides the gap to the headline. */
.hs-hero { padding-top: 0; }
/* Overlay link covers the whole strip; the strip itself keeps the
   homepage hover pause. Focus ring in ink: lime on lime is invisible. */
.hs-ticker__link { position: absolute; inset: 0; z-index: 1; }
.hs-ticker__link:focus-visible { outline: 2px solid var(--lime-ink); outline-offset: -4px; }
.hs-hero h1 { max-width: 20ch; }
.hs-meter { margin-top: var(--space-5); position: relative; z-index: 1; }
.hs-meter__label { font-size: 15px; color: var(--ink-dim); }
.hs-meter__num { margin: 6px 0 0; line-height: 1; }
.hs-meter__digits {
  display: inline-block; min-width: 8ch; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 9vw, 96px); line-height: 1; letter-spacing: -0.03em;
  color: var(--lime); font-variant-numeric: tabular-nums;
}
.hs-meter__note {
  margin: 12px auto 0; max-width: 52ch;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-dim);
}
.hs-meter__scrawl { margin: 18px 0 0; --scrawl-rotate: -2deg; }
.hs-meter__scrawl .doodle { margin-top: 6px; transform: rotate(125deg) translateX(-2px); }
.hs-hero .hero__sub { margin-top: var(--space-5); }
/* Second hero scrawl, pointing at the demo button. In flow as the last
   item of the button row, so the hero grows with it and nothing is
   clipped. Stacked (<560px) it is centred under the ghost button, arrow
   straight up. Once both buttons share a row the row is centred, so the
   ghost button's left edge is exactly 50% + half the gap: the scrawl
   starts there and wraps inside the right half, arrow up-right. */
.hs-hero__demo-scrawl { width: 100%; justify-content: center; margin: 2px 0 0; --scrawl-rotate: -2deg; }
.hs-hero__demo-scrawl .doodle { transform: rotate(-32deg); margin-top: -6px; }
@media (min-width: 560px) {
  .hs-hero__demo-scrawl { width: calc(50% - 6px); margin: 0 0 0 calc(50% + 6px); justify-content: flex-start; text-align: left; }
  .hs-hero__demo-scrawl .doodle { transform: rotate(-14deg); margin-top: -8px; }
}
@media (max-width: 559px) {
  .hs-hero .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ---------- The unanswered quarter ---------- */
.hs-leak__grid { display: grid; gap: var(--space-6); margin-top: var(--space-6); align-items: start; }
@media (min-width: 900px) { .hs-leak__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); } }
.hs-leak__prose p { font-size: 16.5px; line-height: 1.7; max-width: 62ch; }
.hs-leak__prose p + p { margin-top: var(--space-4); }
.hs-stats { display: grid; gap: 14px; align-content: start; }
@media (min-width: 900px) { .hs-stats { padding-top: 6px; } }
.hs-stat.bnode {
  max-width: none; padding: 16px 20px 14px;
  transform: rotate(-0.6deg);
}
.hs-stat.bnode:nth-of-type(3) { transform: rotate(0.5deg); }
.hs-stat.bnode:nth-of-type(4) { transform: rotate(-0.4deg); }
.hs-stat strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4vw, 44px); line-height: 1; letter-spacing: -0.03em;
  color: var(--paper-ink); font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.hs-stat span { display: block; font-size: 14px; line-height: 1.5; color: var(--paper-ink); }
.hs-stat b { margin: 8px 0 0; color: var(--accent-paper); }
.hs-stats__scrawl { margin: 4px 0 4px 18px; --scrawl-rotate: -2deg; }
.hs-stats__scrawl .doodle { transform: translateY(-4px); }

/* ---------- Five trades ---------- */
.hs-trades__scrawl { margin: 12px 0 0 8px; --scrawl-rotate: -2deg; }
.hs-trades__scrawl .doodle { transform: scaleY(-1) translateY(2px); }
/* On phones the text wraps, so let the chevron follow the last word instead
   of floating to the far edge of a flex row. */
@media (max-width: 559px) {
  .hs-trades__scrawl { display: inline-block; max-width: 300px; }
  .hs-trades__scrawl .doodle { vertical-align: middle; transform: scaleY(-1) translateY(-2px); margin-left: 2px; }
}
.hs-trades { display: grid; gap: var(--space-4); margin-top: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .hs-trades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .hs-trades { grid-template-columns: repeat(3, 1fr); } }
/* Five trades, five across, but only once the columns have room to breathe. */
@media (min-width: 1280px) { .hs-trades { grid-template-columns: repeat(5, 1fr); gap: var(--space-3); } }
.hs-trade {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--paper-line); border-top: 3px solid var(--accent-paper);
  border-radius: var(--r); background: var(--paper-2); padding: var(--space-4) 20px;
}
.hs-trade h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.hs-trade__scene { font-size: 15px; line-height: 1.55; color: var(--paper-dim); margin: 0; }
.hs-trade__ticket {
  margin: 2px 0 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.5;
  color: var(--paper-ink); font-variant-numeric: tabular-nums;
}
.hs-trade__ticket-label {
  display: block; font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--paper-dim); margin-bottom: 2px;
}
.hs-trade__ticket small { display: block; font-size: 11.5px; color: var(--paper-dim); margin-top: 2px; }
.hs-trade__system {
  margin: 4px 0 0; padding-top: 10px; border-top: 1px dashed var(--paper-line);
  font-size: 14.5px; line-height: 1.55; color: var(--paper-ink);
}
.hs-trade .btn { align-self: flex-start; margin-top: auto; min-height: 44px; border-color: var(--paper-dim); }

/* ---------- Calculator ---------- */
.hs-calc-wrap { display: grid; gap: var(--space-5); margin-top: var(--space-6); align-items: start; }
@media (min-width: 900px) { .hs-calc-wrap { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.hs-calc__fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.hs-calc__legend {
  font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  padding: 0; margin-bottom: var(--space-3);
}
.hs-calc__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .hs-calc__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 620px) {
  .hs-calc__grid--3 { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
  /* Labels may run to two lines at this width; reserve two lines and
     bottom-align so the three inputs sit on one row. */
  .hs-calc__grid--3 .hs-field label { min-height: 2.7em; line-height: 1.35; display: flex; align-items: flex-end; }
}
/* One question first, big. The rest are our sourced starting numbers. */
.hs-field--ask { margin-bottom: var(--space-4); }
.hs-field--ask label { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.hs-field--ask input { font-family: var(--font-display); font-size: 28px; font-weight: 700; min-height: 62px; padding: 10px 16px; letter-spacing: -0.02em; }
.hs-field--trade { margin-bottom: var(--space-4); }
.hs-calc__assump { border: 0; padding: 0; margin: 0; min-width: 0; }
.hs-calc__assump > .hs-calc__legend { font-size: 14px; font-weight: 600; color: var(--paper-dim); letter-spacing: 0; }
.hs-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hs-field--full { grid-column: 1 / -1; }
.hs-field label { font-size: 14px; font-weight: 600; color: var(--paper-ink); }
.hs-field__hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--paper-dim); }
.hs-field__error { margin: 0; font-size: 12.5px; line-height: 1.5; color: #b3401f; font-weight: 600; }
.hs-field__error[hidden] { display: none; }
.hs-field input,
.hs-field select {
  font: inherit; font-size: 16px; color: var(--paper-ink); background: var(--paper-2);
  border: 1px solid var(--paper-dim); border-radius: var(--r); padding: 12px 14px;
  min-height: 48px; width: 100%;
  transition: border-color var(--dur) var(--ease);
  font-variant-numeric: tabular-nums;
}
.hs-field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e7a1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;
}
.hs-field input:hover, .hs-field select:hover { border-color: var(--paper-ink); }
.hs-field input:focus, .hs-field select:focus { outline: none; border-color: var(--accent-paper); }
.hs-field input:focus-visible, .hs-field select:focus-visible,
.hs-field__unit:focus-within { outline: 2px solid var(--accent-paper); outline-offset: 2px; }
.hs-field__unit:focus-within input:focus-visible { outline: none; }
.hs-field input[aria-invalid="true"], .hs-field__unit.is-invalid { border-color: #b3401f; }
.hs-field__unit {
  display: flex; align-items: stretch; background: var(--paper-2);
  border: 1px solid var(--paper-dim); border-radius: var(--r);
  transition: border-color var(--dur) var(--ease);
}
.hs-field__unit:hover { border-color: var(--paper-ink); }
.hs-field__unit:focus-within { border-color: var(--accent-paper); }
.hs-field__unit input { border: 0; background: transparent; min-width: 0; flex: 1; }
.hs-field__unit input:focus { border: 0; }
.hs-field__unit input[aria-invalid="true"] { border: 0; }
.hs-field__unit span {
  display: flex; align-items: center; padding: 0 12px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--paper-dim);
}
.hs-field__unit--prefix span { padding-right: 0; }
.hs-field__unit--prefix input { padding-left: 8px; }
.hs-field__unit--suffix span { padding-left: 0; }
.hs-field__unit--suffix input { padding-right: 8px; }
/* Number spinners: hide the tiny WebKit ones; arrow keys still step. */
.hs-field input[type="number"]::-webkit-outer-spin-button,
.hs-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hs-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.hs-calc__submit { margin-top: var(--space-4); width: 100%; justify-content: center; min-height: 48px; }
@media (min-width: 560px) { .hs-calc__submit { width: auto; } }
.hs-calc__note { margin-top: 10px; max-width: 46ch; }

/* Mobile live readout: pinned under the 67px header while the form is
   on screen and the paper box is not (JS toggles is-shown). */
.hs-calc__sticky { display: none; }
@media (max-width: 899px) {
  /* Fixed, not sticky: .topo sections are overflow: hidden, which kills
     sticky against the viewport. JS only shows it while the calculator
     form is on screen and the paper box is not. */
  .hs-calc__sticky { display: block; position: fixed; top: 76px; left: 16px; right: 16px; z-index: 5; height: 0; overflow: visible; }
  .hs-calc__sticky button {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px;
    padding: 8px 14px; font: inherit; font-size: 14px; color: var(--paper-ink); cursor: pointer;
    background: var(--paper-2); border: 2px solid var(--paper-ink);
    border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
    box-shadow: 0 8px 22px rgba(18, 21, 13, 0.14);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  }
  .hs-calc__sticky.is-shown button { opacity: 1; transform: none; pointer-events: auto; }
  .hs-calc__sticky b { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; color: var(--accent-paper); font-variant-numeric: tabular-nums; }
  .hs-calc__sticky button:focus-visible { outline: 2px solid var(--accent-paper); outline-offset: 2px; }
}

/* Result readout: a hand-drawn paper box (the site's .bnode), so the
   paper-default rule holds and the dark band below keeps its punch. */
.hs-result.bnode {
  max-width: none; padding: var(--space-5) var(--space-5) var(--space-4);
  color: var(--paper-ink); font-size: 16px; line-height: 1.6;
  transform: rotate(-0.4deg);
}
.hs-result:focus { outline: none; }
.hs-result__who { margin: 0 0 var(--space-3); font-size: 14px; font-weight: 600; color: var(--paper-ink); }
.hs-result__bar-label { margin-bottom: 6px; }
/* Twelve segments across the whole box: one per month, and the tally
   adds a month as each one lands. */
.hs-result__bar { display: flex; gap: 4px; margin-bottom: var(--space-4); }
.hs-result__bar .fx-seg { flex: 1 1 0; width: auto; height: 12px; background: var(--accent-paper); }
/* Segment states. styles-hud.css owns .fx-seg (hidden at rest) and the
   fx-seg keyframe; this page drives it with data-state instead of .is-in. */
.hs-result[data-state="idle"] .fx-seg,
.hs-result[data-state="done"] .fx-seg { opacity: 1; transform: none; }
.hs-result[data-state="filling"] .fx-seg { animation: fx-seg 180ms var(--ease) var(--d) forwards; }
.hs-result__label { margin: 0; font-size: 13px; font-weight: 500; color: var(--paper-dim); }
.hs-num {
  margin: 2px 0 14px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4vw, 40px); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--accent-paper); font-variant-numeric: tabular-nums; min-height: 1.05em;
  white-space: nowrap;
}
.hs-num small { font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--paper-dim); }
.hs-result__pair { display: grid; gap: 10px 18px; grid-template-columns: 1fr; margin-bottom: 4px; }
@media (min-width: 480px) { .hs-result__pair { grid-template-columns: 1fr 1fr; } }
.hs-num--today, .hs-num--full { font-size: clamp(22px, 2.4vw, 28px); margin: 2px 0 0; }
.hs-num--today { color: var(--paper-ink); }
.hs-num--full { color: var(--accent-paper); }
/* Marker strike through "booked today" once the year has added up. */
.hs-strike { position: relative; display: inline-block; }
.hs-strike .doodle--squiggle {
  left: -3px; width: calc(100% + 6px); bottom: auto; top: 52%; height: 12px;
  transform: translateY(-50%) rotate(-2deg); color: var(--accent-paper);
  opacity: 0; transition: opacity 220ms var(--ease);
}
.hs-strike.is-struck .doodle--squiggle { opacity: 1; }
.hs-result__label--gap { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--paper-line); }
.hs-num--lg { font-size: clamp(40px, 5.5vw, 56px); letter-spacing: -0.03em; margin-bottom: 4px; }
.hs-num--lg.is-long { font-size: clamp(30px, 4.2vw, 44px); }
.hs-result__sub { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--paper-ink); }
.hs-result__units { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--paper-ink); }
.hs-result__units--dim { color: var(--paper-dim); }
/* Until the owner types, the box is the average business: numbers dim,
   the scrawl says so. First keystroke flips data-owned and the colour. */
.hs-result[data-owned="0"] .hs-num, .hs-result[data-owned="0"] .hs-num--today, .hs-result[data-owned="0"] .hs-num--full { color: var(--paper-dim); }
.hs-result[data-owned="0"] .hs-result__scrawl--own, .hs-result[data-owned="1"] .hs-result__scrawl--idle { display: none; }
.hs-result__math {
  margin: 4px 0 0; padding-top: 12px; border-top: 1px dashed var(--paper-line);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.65; color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}
.hs-result__scrawl { margin: 12px 0 2px 2px; --scrawl-rotate: -2deg; }
.hs-result__scrawl .doodle { transform: translateY(-4px); }
.hs-result__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.hs-result__actions .btn--ghost { border-color: var(--paper-dim); color: var(--paper-ink); }
.hs-result__actions .btn--ghost:hover { border-color: var(--paper-ink); }
.hs-result__cta { margin: 10px 0 0; font-size: 15px; font-weight: 600; }
.hs-result__cta a { color: var(--accent-paper); text-decoration: underline; text-underline-offset: 3px; }
.hs-result__cta a:hover { color: var(--paper-ink); }
.hs-result__cta--alt { margin-top: 10px; font-size: 14px; font-weight: 500; }
.hs-result__nojs { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--paper-dim); }

/* Booking receipt: the numbers the owner brings to the audit. */
.hs-book__receipt { display: inline-block; max-width: none; margin: var(--space-4) 0 0; transform: rotate(-0.6deg); }
.hs-book__receipt b { margin-bottom: 2px; }
.hs-book__receipt span { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--paper-ink); line-height: 1.5; }

/* ---------- What answers (dark band) ---------- */
/* Top-aligned: centring the log against the taller prose column left a
   hole under the heading. */
.hs-system__grid { display: grid; gap: var(--space-6); margin-top: var(--space-6); align-items: start; }
@media (min-width: 900px) { .hs-system__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); } }
.hs-system .night-log { max-width: none; }
.hs-system .night-log__tag { opacity: 1; }
.hs-system__col p { font-size: 16.5px; line-height: 1.65; color: var(--ink-dim); max-width: 46ch; }
.hs-system__col p + p { margin-top: var(--space-3); }
.hs-system__col p + p + p { color: var(--ink); }
.hs-system__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* Magic Link demo block: hairline-separated row at the foot of the dark
   band. PRESS START + XP strip are the homepage devices (styles-hud.css);
   only the field and layout are page-specific. Lime is fine here: dark. */
.hs-system__demo { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); text-align: center; }
.hs-system__demo-lede { max-width: 58ch; margin: 0 auto; font-size: 17px; line-height: 1.6; color: var(--ink); }
.hs-demo { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: stretch; margin-top: var(--space-5); }
/* The field borrows the button's anatomy: a small label inside the box,
   the typed URL on the PRESS START baseline, same 70px height. Border is
   ink-dim mixed down to clear 3:1 on the panel (--line-bright is 1.8:1). */
.hs-demo__field { position: relative; display: flex; flex: 1 1 260px; max-width: 420px; min-width: 0; }
.hs-demo__field label {
  position: absolute; top: 11px; left: 15px; pointer-events: none;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-dim);
}
.hs-demo input {
  width: 100%; min-height: 70px; padding: 30px 14px 11px;
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--ink-dim) 58%, var(--panel)); border-radius: var(--r);
  color: var(--ink); font-family: var(--font-mono); font-size: 15px;
}
.hs-demo input::placeholder { color: var(--ink-dim); }
.hs-demo input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.hs-demo .btn--start { flex: 0 0 auto; }
.hs-system__demo-note { font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); max-width: 60ch; margin: 12px auto 0; }
.hs-system__demo-note a { color: var(--lime); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hs-system__demo .hud-strip { margin: var(--space-6) auto 0; }
/* Armed by JS until the strip scrolls into view, so it never paints lit,
   blinks off, and reboots. Reduced motion / no JS never get the class. */
.hs-system__demo .hud-strip.is-armed { opacity: 0; }
@media (max-width: 559px) {
  .hs-demo__field, .hs-demo .btn--start { width: 100%; max-width: none; }
  .hs-demo .btn--start { align-items: center; text-align: center; }
  .hs-system__demo-lede { font-size: 16px; }
  .hs-system__demo .hud-strip { margin-top: var(--space-5); }
}

/* ---------- Proof ---------- */
.hs-proof__grid { display: grid; gap: var(--space-4); margin-top: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 700px) { .hs-proof__grid { grid-template-columns: repeat(2, 1fr); } }
.hs-proof__card {
  border: 1px solid var(--paper-line); border-top: 3px solid var(--accent-paper);
  border-radius: var(--r); background: var(--paper-2); padding: var(--space-4) 22px;
}
.hs-proof__card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.hs-proof__card p { font-size: 15.5px; line-height: 1.6; color: var(--paper-ink); margin: 0; }
.hs-proof__card p.hs-proof__where { margin: 4px 0 10px; font-size: 13.5px; color: var(--paper-dim); }
.hs-proof__card p.hs-proof__source { margin: 10px 0 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--paper-dim); }
.hs-proof__line { margin-top: var(--space-4); font-size: 16.5px; line-height: 1.6; max-width: 60ch; }
.hs-proof__own { display: grid; gap: var(--space-4); margin-top: var(--space-6); align-items: start; }
@media (min-width: 900px) { .hs-proof__own { grid-template-columns: 1.1fr 0.9fr; } }
.hs-proof__own .case-teaser { margin-top: 0; }

/* ---------- Booking ---------- */
.hs-book__intro { margin-top: var(--space-4); max-width: 60ch; font-size: 16.5px; line-height: 1.65; color: var(--paper-ink); }
.hs-book__scrawl { margin: 14px 0 0 10px; --scrawl-rotate: -2deg; }
.hs-book__scrawl .doodle { transform: rotate(125deg) translateX(-2px); }
.hs-book .booking__frame { margin-top: var(--space-4); }
/* Reserve the 700px only once the calendar is in; the placeholder earns
   its own height. */
.hs-book .booking__frame:has(.booking__placeholder) { min-height: 0; }
.hs-book__fallback { margin-top: var(--space-3); font-size: 14.5px; line-height: 1.55; color: var(--paper-dim); max-width: 60ch; }
.hs-book__fallback a { color: var(--accent-paper); font-weight: 600; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hs-result .fx-seg { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hs-strike .doodle--squiggle, .hs-calc__sticky button { transition: none; }
  /* Static ticker ends mid-word at the right edge; fade it out instead. */
  .hs-ticker { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
}