/* =========================================================================
   RAZIO design tokens and shared chrome.
   Single theme source. No page declares its own palette, and no hardcoded
   hex belongs outside this file.

   Surface strategy: dark-primary, refined. A near-black ground (#0D0D0D,
   never pure #000) carries the page; white and #F4EEFF are the lighter
   punctuation that give the scroll its pacing. Apply .band-tint to a section
   to flip the surface roles for that band; it is the only light band there is.
   ========================================================================= */

/* Plus Jakarta Sans, the typeface the product app ships. One variable file
   covers 400 to 800, so the family is a single 27 KB request, preloaded. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- fixed brand values ---- */
  --brand-black:  #0D0D0D;  /* primary dark surface */
  --brand-ink:    #111111;  /* elevated dark surface, and ink on light */
  --brand-purple: #9146FF;  /* primary actions, active states */
  --brand-tint:   #F4EEFF;  /* light purple surface */
  --brand-gray:   #5C5C66;  /* body copy on light surfaces */
  --brand-rule:   #E6E6EA;  /* hairline on light surfaces */
  --brand-white:  #FFFFFF;

  /* ---- shape: one radius sitewide ----
     Mixed corner radii are the startup tell the brief calls out. Every box
     on this site uses --radius. --radius-sm exists only for elements too
     small to take 10px (focus rings, 6px diagram bars, the brand mark).
     A perfect circle is 50%. Nothing else is allowed, and check-site
     rule 13 enforces it. */
  --radius:    10px;
  --radius-sm: 4px;

  /* ---- values derived for the dark ground ----
     The brief's palette describes a light page. Three values are derived so
     text on #0D0D0D still meets contrast. Each is anchored to a brand value
     rather than invented:
       --body-dark    #E6E6EA held back, 7.8:1 on #0D0D0D
       --accent-text  #C9A8FF, the purple tint from the Razio brand guide,
                      because #9146FF on #0D0D0D measures 4.07:1 and fails AA
                      for small text such as eyebrows
       --rule-dark    #E6E6EA at 14 percent
     And one for the tint band: #9146FF measures only 4.09:1 on #F4EEFF, so
     small purple text there uses a darker shade of the same hue at 5.6:1.
       --accent-text-tint  #7A2FE0 */
  --body-dark:   #A6A6AC;
  --accent-text: #C9A8FF;
  --accent-text-tint: #7A2FE0;
  --rule-dark:   rgba(230, 230, 234, .14);
  --rule-dark-2: rgba(230, 230, 234, .22);

  /* ---- surface roles: dark-primary ---- */
  --paper:  var(--brand-black);
  --ink:    var(--brand-white);
  --body:   var(--body-dark);
  --rule:   var(--rule-dark);
  --accent: var(--brand-purple);
  --tint:   var(--brand-tint);

  /* ---- aliases kept so existing page CSS resolves without a rewrite ----
     ponytail: --paper-2, --ink-2, --line, --signal and --mono are referenced
     across 23 page style blocks and vs.css. Repointing them here rethemes
     every page from one edit. Prefer the role names above in new CSS. */
  --paper-2:  var(--brand-ink);
  --ink-2:    var(--body);
  --line:     var(--rule);
  --line-2:   var(--rule-dark-2);
  --signal:   var(--accent);
  --on-acc:   #FFFFFF;
  --good:     var(--ink);      /* was #10B981; green is not in the palette */
  --accent-2: var(--brand-ink);
  --signal-2: var(--brand-ink);

  /* ---- type ---- */
  --sans: "Plus Jakarta Sans", -apple-system, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  /* One family only. The --mono name survives because 23 pages use it for
     eyebrows, buttons and figures; tabular alignment comes from
     font-variant-numeric, not from a second typeface. */
  --mono: var(--sans);

  /* ---- scale: 8px base ---- */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --maxw: 1160px;
  --section-y: clamp(56px, 9vw, 128px);

  /* ---- elevation: soft, large blur, low opacity, never harsh ---- */
  --shadow:   0 1px 2px rgba(0, 0, 0, .30), 0 12px 32px -14px rgba(0, 0, 0, .55);
  --shadow-l: 0 2px 4px rgba(0, 0, 0, .32), 0 34px 70px -28px rgba(0, 0, 0, .70);
}

/* ---- light punctuation bands ----
   Re-scope the surface roles rather than restyling components, so anything
   inside a band picks up the right colors without knowing where it sits.

   ONE light tone sitewide: every light band is .band-tint, the soft purple.
   There is deliberately no white-ground band class, so a white section cannot
   reappear by habit. Cards inside a band still sit on white via --paper-2. */
.band-tint {
  --paper:    var(--brand-tint);
  --paper-2:  var(--brand-white);
  --ink:      var(--brand-ink);
  --body:     var(--brand-gray);
  --ink-2:    var(--brand-gray);
  --rule:     var(--brand-rule);
  --line:     var(--brand-rule);
  --line-2:   #D8D8DE;
  --accent-text: var(--accent-text-tint);
  --shadow:   0 1px 2px rgba(17, 17, 17, .04), 0 12px 32px -14px rgba(17, 17, 17, .12);
  --shadow-l: 0 2px 4px rgba(17, 17, 17, .04), 0 34px 70px -28px rgba(17, 17, 17, .20);
  background: var(--paper);
  color: var(--ink);
}
/* #9146FF is 4.09:1 on the tint ground and fails AA for small text, so the
   darker purple carries link and accent text inside a band. */

*, *::before, *::after { box-sizing: border-box; }

/* Any component that sets its own display beats the UA rule for [hidden] and
   leaves a hidden element on screen. Fixed once here rather than per
   component: the booking facade was shipping a dead "Load the booking
   calendar" button next to its own "booking is not switched on yet"
   fallback, because .btn is display: inline-flex. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; background: var(--brand-black); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; }

:where(a, button, summary, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip link, visible only on focus */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-white); color: var(--brand-ink); padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0; text-decoration: none; font-weight: 600;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; letter-spacing: -.022em; line-height: 1.08; font-weight: 700; color: var(--ink); }
h1 { font-size: clamp(38px, 5.6vw, 68px); font-weight: 800; line-height: 1.04; letter-spacing: -.028em; }
h2 { font-size: clamp(28px, 3.4vw, 38px); }
h3 { font-size: 20px; letter-spacing: -.012em; }
p  { margin: 0; }

.eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-text); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); display: inline-block; }
.sub { color: var(--body); font-size: 18px; max-width: 62ch; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- icons: one family (Lucide), one stroke weight ---------- */
.ico {
  width: 20px; height: 20px; flex: none; display: block;
  stroke: currentColor; stroke-width: 1.75; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 24px; height: 24px; }
.ico-inline { display: inline-block; vertical-align: -4px; margin-left: 6px; }

/* Check and cross marks. Drawn from a masked SVG, never a font character, so
   they inherit color and never depend on glyph coverage. */
/* Scoped to table cells on purpose. A bare .y/.n selector also matched the
   sequence panel's "S-01" step badges, which prepended a cross mask to every
   row and pushed the badge into wrapping. Marks live in comparison tables. */
td .y::before, td .n::before {
  content: ""; display: inline-block; width: 16px; height: 16px;
  margin-right: 7px; vertical-align: -3px; background: currentColor;
  -webkit-mask: var(--mark) center / 16px 16px no-repeat;
          mask: var(--mark) center / 16px 16px no-repeat;
}
td .y::before { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
td .n::before { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }

/* List bullets and status dots, drawn not typed. */
.dot-bullet::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-right: 10px; vertical-align: 3px;
}

/* ---------- buttons: identical padding and radius, solid vs ghost ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  padding: 13px 22px; min-height: 46px; border-radius: var(--radius);
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { background: #7d33e8; border-color: #7d33e8; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-sm { padding: 9px 16px; min-height: 40px; font-size: 14px; }

/* ---------- header ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(13, 13, 13, .78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
  --ink: var(--brand-white); --body: var(--body-dark);
  --rule: var(--rule-dark); --line-2: var(--rule-dark-2);
  color: var(--ink);
}
.site-nav.is-scrolled { background: rgba(13, 13, 13, .94); border-bottom-color: var(--rule-dark); }
.nav-in { display: flex; align-items: center; gap: 8px; height: 68px; }
.brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
/* The horizontal wordmark already contains the R monogram, so the brand
   lockup is the image alone. The standalone mark stays for favicons and
   square placements only. */
.brand-mark { height: 28px; width: auto; display: block; flex: none; }

.nav-menu { display: flex; align-items: center; gap: 2px; margin-left: 22px; }
.nav-link,
.nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--body);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  padding: 9px 12px; border-radius: var(--radius);
  transition: color .18s ease, background .18s ease;
}
.nav-link:hover, .nav-trigger:hover,
.nav-trigger[aria-expanded="true"] { color: var(--ink); background: rgba(230, 230, 234, .08); }
.nav-trigger .ico { width: 15px; height: 15px; transition: transform .18s ease; }
.nav-trigger[aria-expanded="true"] .ico { transform: rotate(180deg); }

.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Dropdown panels sit on a light card, so the menu reads as a surface rather
   than a hole cut in the page. */
.nav-item { position: relative; }
.nav-panel {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 320px; padding: 8px;
  background: var(--brand-white); border: 1px solid var(--brand-rule);
  border-radius: var(--radius); box-shadow: var(--shadow-l);
  display: none;
}
.nav-panel[data-open] { display: block; }
.nav-panel a {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 12px; border-radius: var(--radius); text-decoration: none;
  transition: background .16s ease;
}
.nav-panel a:hover { background: var(--brand-tint); }
.nav-panel a .ico { margin-top: 2px; color: var(--brand-purple); }
.nav-panel b { display: block; font-size: 15px; font-weight: 600; color: var(--brand-ink); line-height: 1.35; }
.nav-panel span { display: block; font-size: 13.5px; color: var(--brand-gray); line-height: 1.4; margin-top: 1px; }
.nav-panel hr { border: 0; border-top: 1px solid var(--brand-rule); margin: 6px 10px; }

/* mobile drawer */
.nav-toggle {
  display: none; margin-left: auto; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: transparent; color: var(--ink); cursor: pointer;
}
.nav-drawer { display: none; }

@media (max-width: 940px) {
  .nav-menu, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-drawer {
    display: block; max-height: 0; overflow: hidden;
    border-top: 1px solid transparent;
    transition: max-height .28s ease, border-color .28s ease;
  }
  .site-nav.is-open .nav-drawer { max-height: 80vh; overflow-y: auto; border-top-color: var(--rule); }
  .nav-drawer .wrap { padding-top: 8px; padding-bottom: 24px; }
  .nav-drawer .col-head {
    font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--body); margin: 20px 0 4px;
  }
  .nav-drawer a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 0; text-decoration: none; font-size: 16px; font-weight: 500; color: var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .nav-drawer .drawer-cta { display: grid; gap: 10px; margin-top: 24px; }
  .nav-drawer .drawer-cta a { justify-content: center; border-bottom: 0; }
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule-dark); margin-top: var(--section-y);
  padding: clamp(48px, 6vw, 80px) 0 48px;
  background: var(--brand-black); color: var(--brand-white);
  --ink: var(--brand-white); --body: var(--body-dark); --rule: var(--rule-dark);
}
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px 32px; }
.foot-brand .brand { margin-bottom: 14px; }
.foot-tag { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
/* One sentence per line, always. The tagline is two sentences and must never
   wrap mid-phrase. */
.tag-line { display: block; }
.foot-social { display: flex; gap: 10px; margin-top: 20px; }
.foot-social a {
  width: 38px; height: 38px; border-radius: var(--radius); border: 1px solid var(--rule-dark-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--body);
  transition: color .18s ease, border-color .18s ease;
}
.foot-social a:hover { color: var(--accent-text); border-color: var(--accent); }
.foot-col .col-head {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 14px;
}
.foot-col a {
  display: block; text-decoration: none; color: var(--body); font-size: 15px;
  padding: 5px 0; transition: color .18s ease;
}
.foot-col a:hover { color: var(--accent-text); }
.foot-legal {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  font-size: 13.5px; color: var(--body);
}
.foot-legal a { text-decoration: none; }
.foot-legal a:hover { color: var(--accent-text); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }


/* ---------- savings calculator ----------
   One component, mounted on the homepage, /savings, /pricing and the per-seat
   comparison pages. Built on role tokens, so it retunes itself inside a
   .band-tint section without any extra rules. */
.calc {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(24px, 3.5vw, 40px); margin-top: 32px;
}
/* slider on its own row, the two pickers side by side under it */
.calc-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; align-items: end; }
.calc-controls > .calc-field:first-child { grid-column: 1 / -1; }
.calc-label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--body); margin-bottom: 12px;
}
.calc-slider { display: flex; align-items: center; gap: 18px; }
.calc-reps { font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; min-width: 7ch; }

.calc input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: var(--line-2); border-radius: var(--radius-sm); outline: none; margin: 0;
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent); border: 0; cursor: pointer;
  transition: transform .15s ease;
}
.calc input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
  border: 0; cursor: pointer;
}
.calc input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.calc input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

.calc-select {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 12px 14px; min-height: 46px; cursor: pointer;
}

.calc-out {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: clamp(28px, 3.5vw, 40px); padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--rule);
}
.calc-side { display: flex; flex-direction: column; gap: 6px; }
.calc-side + .calc-side { border-left: 1px solid var(--rule); padding-left: 24px; }
.calc-side-name { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--body); }
.calc-side-razio .calc-side-name { color: var(--accent-text); }
.calc-amount {
  font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.calc-side-sub { font-size: 13.5px; color: var(--body); }
/* The basis line states what a figure is; the note under it states what the
   figure leaves out. Both are small on purpose: they qualify the number
   without competing with it. */
.calc-side-note { font-size: 12.5px; line-height: 1.55; color: var(--body); margin-top: 4px; }
.calc-minnote { margin-top: 10px; font-size: 12.5px; color: var(--body); }

/* What the sticker does not show. Open by default when a competitor wins or
   ties on price, collapsed to the first few lines when RAZIO is clearly ahead:
   the counterweight scales inversely with the gap it is counterweighting. */
.fx { margin-top: clamp(48px, 6vw, 88px); }
.fx-scroll {
  overflow-x: auto; max-width: 100%; margin-top: 28px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  /* positioned so the visually-hidden cell labels anchor INSIDE the scroller.
     Absolutely positioned descendants otherwise resolve against the page and
     drag the document's scroll width out past the viewport on mobile. */
  position: relative;
}
.fx-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
.fx-table th, .fx-table td { text-align: left; padding: 11px 16px; border-top: 1px solid var(--rule); }
.fx-table thead th { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--body); border-top: 0; }
.fx-table thead th:not(:first-child), .fx-table td { text-align: center; width: 110px; }
.fx-table tbody th[scope="row"] { font-weight: 500; color: var(--body); }
.fx-table .fx-cat th { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--paper-2); }
.fx-mark { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.fx-no { color: var(--body); }
.fx-extra { margin-top: 40px; display: grid; gap: 10px; }
.fx-extra h3 { margin-top: 18px; }
.fx-list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: var(--body); }
.fx-list b { color: var(--ink); font-weight: 600; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.calc-services { margin: 26px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--rule); }
.calc-services legend { padding: 0; }
.calc-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; margin-top: 14px; }
.calc-service { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; color: var(--body); cursor: pointer; }
.calc-service input { margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.calc-service b { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) { .calc-services-grid { grid-template-columns: 1fr; } }

.calc-drawbacks { margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 18px; }
.calc-drawbacks > summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.calc-drawbacks > summary::-webkit-details-marker { display: none; }
.calc-drawbacks > summary::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--body);
  border-bottom: 1.5px solid var(--body); transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.calc-drawbacks[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.calc-drawbacks ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.calc-drawbacks li { font-size: 13.5px; line-height: 1.6; color: var(--body); padding-left: 14px; position: relative; }
.calc-drawbacks li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--rule-dark-2);
}
.band-tint .calc-drawbacks li::before { background: var(--line-2); }
.calc-drawbacks li a { color: var(--accent-text); }
.calc-drawbacks .dw-src { font-size: 12px; }
.calc-drawbacks .dw-more {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-text);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}

.calc-delta { margin-top: 28px; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.4; color: var(--ink); }
.calc-delta b { color: var(--accent-text); font-weight: 800; }
.calc-point { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--body); }
.calc-src { margin-top: 20px; font-size: 12.5px; line-height: 1.6; color: var(--body); }
.calc-src a { color: var(--accent-text); }

@media (max-width: 720px) {
  .calc-controls { grid-template-columns: 1fr; }
  .calc-out { grid-template-columns: 1fr; gap: 20px; }
  .calc-side + .calc-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 20px; }
}


/* ---------- booking facade ---------- */
.booking {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2);
  padding: clamp(28px, 4vw, 44px); margin-top: 32px; box-shadow: var(--shadow);
}
.booking h3 { font-size: clamp(20px, 2.4vw, 26px); }
.booking p { margin-top: 12px; color: var(--body); max-width: 54ch; }
.booking .btn { margin-top: 22px; }
.booking-alt { font-size: 14px; }
.booking-alt a { color: var(--accent-text); }
.booking-frame { width: 100%; min-height: 640px; border: 0; border-radius: var(--radius); display: block; }

/* ---------- motion: one treatment, fires once ---------- */
/* Hiding is armed by a one-line inline script in the header partial, so a
   crawler or a failed script never leaves the page blank. Above-the-fold
   content must not use .rv: opacity 0 removes an element from LCP candidacy
   and cost about 1.6s here when it was measured. */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease; }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}