/* FucaSpark / AODM -- styling matched to the existing Inspiro-themed site:
   Montserrat, #0bb4aa teal accent, #444 body text, full-bleed hero. */

:root {
  --accent: #0bb4aa;
  --accent-dark: #089a91;
  --text: #444;
  --heading: #111;
  --muted: #6d6d6d;
  --line: #e6e6e6;
  --bg-alt: #f7f8f8;
  --dark: #1a1d1e;
  --wrap: 1140px;
  --header-h: 76px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: inherit;
  color: var(--heading);
  line-height: 1.25;
  margin: 0 0 .6em;
}
h1 { font-size: 2.25rem; font-weight: 700; }
h2 { font-size: 1.875rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

p { margin: 0 0 1.15rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; }

/* ---------- Header ---------- */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.solid,
.site-header.scrolled {
  background: #fff;
  box-shadow: 0 1px 12px rgba(0,0,0,.09);
}
/* gap guarantees breathing room between the wordmark and the first nav
   link at every width; space-between alone lets them meet once the nav
   grows wide enough to fill the bar. */
.header-inner { display: flex; align-items: center; justify-content: space-between;
                gap: clamp(18px, 3vw, 56px); }

.brand {
  font-size: 1.5rem; font-weight: 700; letter-spacing: .06em;
  color: #fff; text-decoration: none;
}
.site-header.solid .brand,
.site-header.scrolled .brand { color: var(--heading); }
.brand:hover { text-decoration: none; }

/* Gaps and type shrink with the viewport so all seven links stay on one
   row down to the mobile breakpoint. Without this the last item
   (Download) fell off the right edge on narrower desktops. */
.site-nav { display: flex; gap: clamp(.85rem, 1.6vw, 1.6rem); align-items: center;
            flex-wrap: nowrap; }
.site-nav a {
  color: rgba(255,255,255,.92);
  font-size: clamp(.72rem, .95vw, .82rem); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent;
}
.site-header.solid .site-nav a,
.site-header.scrolled .site-nav a { color: #555; }
.site-nav a:hover,
.site-nav a.current { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 34px; height: 26px; padding: 0;
}
.nav-toggle span {
  display: block; height: 2px; margin: 6px 0; background: #fff; transition: background .25s;
}
.site-header.solid .nav-toggle span,
.site-header.scrolled .nav-toggle span { background: #333; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  /* Drop your hero photo at assets/img/hero.jpg. The gradient below shows
     through if the image is missing, so the page never looks broken. */
  background: linear-gradient(160deg, #123b45 0%, #0d5a63 55%, #0bb4aa 140%) center/cover no-repeat;
}
/*
  The image URL is supplied inline by layout.php as --hero-image, carrying a
  cache-busting stamp from the file's modification time. A hardcoded url()
   here cannot be versioned, so a browser would keep a stale photo after a
  for the full cache lifetime after a swap. The fallback keeps the hero
  working if the property is ever missing.
*/
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hero-image, url("../img/hero.jpg")) center/cover no-repeat;
}
/*
  Two-layer scrim. The flat base protects the headline; the top gradient
  darkens the strip under the transparent header so the white wordmark and
  nav stay legible. Measured against the hero photo, this keeps every zone
  (logo, nav, headline) above the 4.5:1 WCAG AA body-text ratio while using
  a *lighter* base than a single flat overlay would need — so more of the
  photograph survives. Re-check these numbers if you change the image.
*/
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 24%),
    rgba(0,0,0,.34);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; max-width: 900px; }
.hero-title {
  color: #fff; font-size: clamp(2.4rem, 6vw, 3.9rem); font-weight: 400;
  letter-spacing: .05em; margin-bottom: .35em;
}
.hero-sub {
  /* Full white, not 94% -- and weight 400 rather than 300. Hairline type
     reads as lower contrast than its measured ratio suggests, which was
     part of why the old hero felt hard to read. */
  color: #fff;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem); font-weight: 400; line-height: 1.6;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.hero-scroll {
  position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.85); z-index: 2;
  animation: bob 2.4s ease-in-out infinite;
}
.hero-scroll:hover { color: #fff; }
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(9px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { animation: none; }
  html { scroll-behavior: auto; }
}
/* On short viewports (landscape phones, small windows) the 100vh hero has
   no room for both the copy and the chevron, and they overlap. Drop the
   chevron rather than let it sit on top of the subheading. */
@media (max-height: 560px) {
  .hero-scroll { display: none; }
  .hero { min-height: 420px; }
}

/* ---------- Interior page head ---------- */

.page-head {
  padding: calc(var(--header-h) + 64px) 0 40px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.page-head h1 {
  font-size: 1.6rem; font-weight: 400; letter-spacing: .13em; text-transform: uppercase;
  margin: 0;
}
.page-head-sub { margin: .8rem 0 0; color: var(--muted); max-width: 760px; }

/* ---------- Sections ---------- */

section.band { padding: 76px 0; }
section.band.alt { background: var(--bg-alt); }
section.band.tight { padding: 52px 0; }

.lead { font-size: 1.15rem; line-height: 1.8; color: #3b3b3b; }

.section-title { margin-bottom: 1.6rem; }
.section-title.center { text-align: center; }

/* ---------- Cards ---------- */

.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 28px 26px;
}
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .82rem; font-weight: 700;
  margin-bottom: .9rem;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block; padding: 13px 30px; border-radius: 3px;
  background: var(--accent); color: #fff !important;
  font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; border: 2px solid var(--accent); cursor: pointer;
  transition: background .2s, border-color .2s;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--accent) !important; }
.btn.ghost:hover { background: var(--accent); color: #fff !important; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6rem; }

/* ---------- Code ---------- */

pre, code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
code { font-size: .9em; background: #f2f4f4; padding: .15em .4em; border-radius: 3px; color: #0d6a64; }
pre {
  background: #1e2426; color: #e6edef; padding: 20px 22px; border-radius: 5px;
  overflow-x: auto; font-size: .855rem; line-height: 1.65; margin: 0 0 1.3rem;
}
pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; margin-bottom: 1.4rem; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; color: var(--heading); background: var(--bg-alt); white-space: nowrap; }

/* ---------- Lists ---------- */

.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { position: relative; padding-left: 30px; margin-bottom: 1rem; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}

/* ---------- Callout ---------- */

.callout {
  border-left: 4px solid var(--accent);
  background: var(--bg-alt);
  padding: 20px 24px; border-radius: 0 5px 5px 0; margin: 0 0 1.5rem;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- Validator ---------- */

.val-grid { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) { .val-grid { grid-template-columns: 1fr; } }

#aodmInput, #htmlInput {
  width: 100%; min-height: 430px; padding: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem; line-height: 1.6;
  border: 1px solid #cfd4d4; border-radius: 5px; resize: vertical;
  background: #fdfdfd; color: #24292e;
}
#aodmInput:focus, #htmlInput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,180,170,.16); }

.result-panel {
  border: 1px solid var(--line); border-radius: 5px; padding: 22px 24px;
  min-height: 430px; background: #fff;
}
.verdict { display: flex; align-items: center; gap: 12px; margin-bottom: 1.1rem; }
.verdict .badge {
  display: inline-block; padding: 5px 13px; border-radius: 3px;
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #fff;
}
.badge.ok    { background: #1f9d55; }
.badge.err   { background: #cf3838; }
.badge.warn  { background: #d18b1e; }
.badge.idle  { background: #9aa2a2; }

.issue { border-left: 3px solid var(--line); padding: 10px 0 10px 14px; margin-bottom: 12px; }
.issue.error   { border-left-color: #cf3838; }
.issue.warning { border-left-color: #d18b1e; }
.issue-rule {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  background: #eef1f1; color: #55605f; padding: 2px 7px; border-radius: 3px; margin-right: 8px;
}
.issue-msg { font-size: .92rem; color: #3a3a3a; }
.issue-where { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.hint { color: var(--muted); font-size: .88rem; }

.example-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.example-tabs button {
  font-family: inherit; font-size: .76rem; font-weight: 600; letter-spacing: .05em;
  padding: 7px 13px; border: 1px solid #cfd4d4; background: #fff; color: #555;
  border-radius: 3px; cursor: pointer;
}
.example-tabs button:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Footer ---------- */

.site-footer { background: var(--dark); color: #b9c0c0; padding: 60px 0 26px; margin-top: 0; }
.footer-grid { display: grid; gap: 34px; grid-template-columns: 2fr 1fr 1fr; }
.footer-brand { font-size: 1.3rem; font-weight: 700; letter-spacing: .06em; color: #fff; margin-bottom: .7rem; }
.footer-tag { font-size: .9rem; line-height: 1.7; margin: 0; color: #98a1a1; }
.site-footer h4 { color: #fff; margin-bottom: .8rem; font-size: .78rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: #b9c0c0; font-size: .9rem; }
.site-footer a:hover { color: var(--accent); text-decoration: none; }
.footer-base {
  border-top: 1px solid rgba(255,255,255,.11); margin-top: 42px; padding-top: 22px;
  font-size: .82rem; color: #7d8686;
}

/* ---------- Responsive ---------- */

@media (max-width: 1010px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 0; box-shadow: 0 10px 22px rgba(0,0,0,.12);
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    color: #444 !important; padding: 13px 24px; border-bottom: 1px solid var(--line);
  }
  .site-nav a.current { border-bottom-color: var(--accent); }
  .footer-grid { grid-template-columns: 1fr; }
  section.band { padding: 56px 0; }
}

/* ---------- FAQ ---------- */

/*
  Rendered by seo_render_faq() from the same array that produces the page's
  FAQPage structured data, so the visible answer and the machine-readable
  one can never disagree. Styled as headed paragraphs rather than an
  accordion: collapsed answers are text an extractor has to find behind a
  click, and the whole point of this block is to be easy to quote.
*/
.faq-item { border-top: 1px solid var(--line); padding-top: 1.4rem; margin-top: 1.4rem; }
.faq-item:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.faq-q { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
.faq-a { margin-bottom: 0; color: #3b3b3b; }

/* ---------- Conversion band ---------- */

.cta { background: var(--dark); color: #d5dbdb; padding: 64px 0; }
.cta h2 { color: #fff; }
.cta a { color: var(--accent); }
.cta .btn { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.cta .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.cta .btn.ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.45); }
.cta .btn.ghost:hover { background: #fff; color: var(--dark) !important; border-color: #fff; }

.cta-steps { counter-reset: cta; list-style: none; padding: 0; margin: 0; }
.cta-steps li {
  position: relative; padding-left: 44px; margin-bottom: 1rem; line-height: 1.7;
}
.cta-steps li::before {
  counter-increment: cta; content: counter(cta);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: .82rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.center { text-align: center; }

/* Primary call to action, wherever it appears. */
.btn { font-size: .8rem; }

.cta .cta-meta { margin: 1rem 0 0; font-size: .84rem; color: #9aa8a8; }

/* Caption above a code block saying where the snippet belongs. */
.where { color: var(--muted); font-size: .92rem; margin-bottom: .7rem; }

/* A card with no number reclaims the space the counter left. */
.card:not(:has(.num)) { padding-top: 26px; }

/* Group divider row inside a reference table. */
tr.group td {
  background: var(--bg-alt); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  padding-top: 14px; padding-bottom: 8px;
}

/* ---------- Validator: mode and output tabs ---------- */

.mode-tabs { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.mode-tabs button {
  background: none; border: 0; border-bottom: 3px solid transparent;
  font: inherit; font-size: .84rem; font-weight: 600; letter-spacing: .04em;
  color: var(--muted); padding: 10px 18px; cursor: pointer; margin-bottom: -1px;
}
.mode-tabs button:hover { color: var(--accent); }
.mode-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }

.out-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.out-tabs button {
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  font: inherit; font-size: .78rem; font-weight: 600;
  color: var(--muted); padding: 6px 14px; cursor: pointer;
}
.out-tabs button:hover { border-color: var(--accent); color: var(--accent); }
.out-tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.url-row { display: flex; gap: 8px; }
.url-row input[type=url] {
  flex: 1; min-width: 0; font: inherit; font-size: .9rem; padding: 10px 12px;
  border: 1px solid #d8dede; border-radius: 4px; background: #fcfdfd; color: var(--text);
}
.url-row input[type=url]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.url-row .btn { white-space: nowrap; }

#convertOut {
  width: 100%; margin-top: 10px; min-height: 300px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem;
  line-height: 1.5; padding: 12px; border: 1px solid var(--line); border-radius: 4px;
  background: #fcfdfd; resize: vertical;
}

/* The convert panel's status is one line; only the validator needs the tall
   fixed panel that keeps the two columns level while results stream in. */
#convertResult { min-height: 0; padding: 16px 20px; }
#convertResult .verdict { margin-bottom: 0; }
#convertOut { min-height: 340px; }

.out-tabs.sub { margin-top: 8px; }
.out-tabs.sub button { font-size: .74rem; padding: 5px 12px; }

.gen-intro { max-width: 74ch; margin-bottom: 22px; }
.step {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--heading); margin-bottom: 12px;
}
.step-n {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
}
.hint.detected { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Accounts: sign-in and registered pages                              */
/* ------------------------------------------------------------------ */

.note {
  border-left: 4px solid var(--accent); background: var(--bg-alt);
  padding: 14px 18px; border-radius: 0 4px 4px 0; margin: 0 0 1.5rem;
}
.note.warn { border-left-color: #d18b1e; }

.form-stack { max-width: 30rem; margin: 0 0 1.2rem; }
.form-stack label {
  display: block; font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--heading); margin-bottom: 8px;
}
.form-stack input {
  width: 100%; font: inherit; font-size: .9rem; padding: 10px 12px;
  border: 1px solid #d8dede; border-radius: 4px; background: #fcfdfd;
  color: var(--text); margin-bottom: 14px;
}
.form-stack input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.reg { border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; margin-bottom: 14px; }
/* The page just registered, so the tag to paste is the thing to look at. */
.reg.fresh { border-color: var(--accent); background: var(--bg-alt); }
.reg-url { display: block; word-break: break-all; margin-bottom: .5rem; }
.reg-state {
  display: inline-block; padding: 4px 11px; border-radius: 3px; color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.reg-state.ok   { background: #1f9d55; }
.reg-state.warn { background: #d18b1e; }
.reg-state.idle { background: #9aa2a2; }
.reg-state.bad  { background: #a83232; }
.reg-meta { font-size: .85rem; color: var(--muted); margin: 0 0 .7rem; }
.reg pre { font-size: .8rem; padding: 14px 16px; margin: 0 0 .8rem; }
.reg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.reg-actions form { margin: 0; }

/* The acronym's expansion, sitting between the hero title and its sentence.
   Sized between the two so it reads as part of the name rather than as a
   second headline competing with it. */

/* The acronym, emphasised out of the words themselves on the home page. 600
   rather than 700: against a photograph at hero size, full bold reads as a
   different typeface beside the 400 rest of the line rather than as stress. */
.hero-title b { font-weight: 600; }

/* The bulk URL box. Monospace because it holds a column of addresses, and
   pasted URLs are much easier to scan for a typo when they align. */
.form-stack textarea {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; line-height: 1.7; padding: 12px;
  border: 1px solid #d8dede; border-radius: 4px; background: #fcfdfd;
  color: var(--text); margin-bottom: 14px; resize: vertical;
}
.form-stack textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Badge at the top of the footer's last column, sharing that column's left
   edge with "Contact" and the address below it. Left-aligned, not right: the
   column is a single text block, and a badge pushed to the far edge sat out of
   line with every word under it. Contact and Current release follow below. */
.footer-badge { margin-bottom: 20px; line-height: 0; }
/* -6px cancels the badge's own left inset so the teal circle sits exactly over
   the C of "Contact" below it, rather than a few pixels inside it. */
.footer-badge img { display: block; margin-left: -6px; }
.footer-badge a:hover { opacity: .85; }

/* Badge builder on the account page. */
.badge-opts { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 1.1rem; }
.badge-opts label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--heading);
}
.badge-opts select {
  font: inherit; font-size: .85rem; text-transform: none; letter-spacing: 0;
  font-weight: 400; padding: 8px 10px; border: 1px solid #d8dede;
  border-radius: 4px; background: #fcfdfd; color: var(--text);
}
/* Chequerboard, so a badge sized against a white page is still legible when
   the visitor intends to drop it onto something else. */
.badge-preview {
  border: 1px solid var(--line); border-radius: 5px; padding: 18px; margin: 0 0 1.2rem;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #f4f6f6 25%, transparent 25%, transparent 75%, #f4f6f6 75%),
    linear-gradient(45deg, #f4f6f6 25%, transparent 25%, transparent 75%, #f4f6f6 75%);
  background-size: 18px 18px; background-position: 0 0, 9px 9px;
}
.badge-preview a { display: block; }
/* Dark ground for previewing the light badge. */
.badge-preview.on-dark { background-color: var(--dark); background-image: none; }

/* Hero heading on one line, always.
   The size is driven by --fit, set once by site.js from the ratio of the text's
   natural width to the space available. clamp() keeps the result sane if the
   script never runs: the CSS alone still produces a readable heading, just one
   that may wrap on a narrow phone. white-space:nowrap is what makes the
   measurement meaningful, since a wrapped heading reports the container width
   rather than its own. */
.hero-title.fit-one-line {
  white-space: nowrap;
  font-size: clamp(1.15rem, calc(6vw * var(--fit, 1)), 3.9rem);
}

/* ------------------------------------------------------------------ */
/* Quote                                                               */
/* ------------------------------------------------------------------ */

/* Two figures side by side, because they answer two different questions and
   showing one above the other made the yearly number read as an addition to
   the one-time one rather than an alternative to thinking about it. */
.price-pair { display: flex; flex-wrap: wrap; gap: 18px; margin: 1.6rem 0 1.2rem; }
.price-block {
  flex: 1 1 240px; border: 1px solid var(--line); border-radius: 6px;
  padding: 20px 22px; background: var(--bg-alt);
}
.price-label {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.price-figure { font-size: 2.1rem; font-weight: 700; color: var(--heading); line-height: 1.1; }
.price-note { margin-top: .6rem; font-size: .84rem; color: var(--muted); }

.quote-adjust { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 0 0 1rem; }
.quote-adjust span { display: flex; flex-direction: column; }
.quote-adjust label {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--heading); margin-bottom: 6px;
}
.quote-adjust input, .quote-adjust select {
  font: inherit; font-size: .88rem; padding: 8px 10px;
  border: 1px solid #d8dede; border-radius: 4px; background: #fcfdfd; color: var(--text);
}
.quote-adjust input { width: 7rem; }

/* Wide on a desktop, scrollable rather than crushed on a phone: the third
   column is a list of content types and wrapping it to four lines per row
   makes the table unreadable at exactly the width most people arrive at. */
.quote-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; display: block; overflow-x: auto; }
.quote-table th, .quote-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.quote-table th {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); background: var(--bg-alt);
}

.progress-track {
  height: 10px; border-radius: 5px; background: var(--bg-alt);
  border: 1px solid var(--line); overflow: hidden; margin: 1rem 0 .5rem;
}
.progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }

/* The sign-in form was the only .form-stack when it was written, and it has no
   select. The quote form does. */
.form-stack select {
  width: 100%; font: inherit; font-size: .9rem; padding: 10px 12px;
  border: 1px solid #d8dede; border-radius: 4px; background: #fcfdfd;
  color: var(--text); margin-bottom: 14px;
}
.form-stack select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }