:root {
  --ink: #161613;
  --ink-soft: #2a2c26;
  --paper: #fbfaf5;
  --cream: #f2eee3;
  --cream-deep: #e6dfd0;
  --line: #cbc5b8;
  --muted: #65665f;
  --green: #b2e51a;
  --green-soft: #e9f6b8;
  --green-deep: #769c00;
  --blue: #0d73c7;
  --blue-dark: #095692;
  --coral: #f26b4c;
  --focus: #80b7e4;
  --shadow-small: 0 8px 24px rgba(22, 22, 19, 0.08);
  --shadow-medium: 0 18px 54px rgba(22, 22, 19, 0.13);
  --display: "Chivo", sans-serif;
  --body: "Familjen Grotesk", sans-serif;
  --shell: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

img { display: block; max-width: 100%; }
svg { display: block; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button { color: inherit; }

h1, h2, h3, p, figure, dl, dd { margin: 0; }
/* Headings are sized so real words fit their columns — no hyphenation, no emergency
   breaking. V2 shipped "AC replaceme/nt" because display type up to 6.8rem was jammed
   into an 11ch box; the fix is a type scale the layout can actually hold. */
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.04em; }
h1 { font-size: clamp(2.5rem, 4.6vw, 4.4rem); line-height: 1.02; }
h2 { font-size: clamp(1.85rem, 3.2vw, 3.05rem); line-height: 1.06; }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.05; }

.shell { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; }
.section-space { padding-block: clamp(88px, 10vw, 144px); }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--green);
  border: 2px solid var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.utility-bar { background: var(--ink); color: var(--paper); font-size: 0.78rem; }
.utility-inner { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.utility-inner a { color: var(--green); text-decoration: none; }
.utility-inner a:hover { text-decoration: underline; text-underline-offset: 3px; }

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  background: var(--paper);
  border-bottom: 1px solid rgba(22, 22, 19, 0.14);
}
.nav-row { min-height: 78px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { font-family: var(--display); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.04em; }
.brand-name b { color: var(--green-deep); }
.primary-nav { justify-self: center; display: flex; align-items: center; gap: clamp(18px, 2.3vw, 34px); }
.primary-nav a { position: relative; font-size: 0.89rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.primary-nav a::after { content: ""; position: absolute; right: 0; bottom: -7px; left: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: right; transition: transform 150ms ease-out; }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu-button { display: none; }

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--green);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, background-color 150ms ease-out;
}
.button svg, .arrow-link svg, .mobile-action svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.button:hover { background: #c6ef45; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.button-small { min-height: 42px; padding-inline: 17px; font-size: 0.82rem; }

.text-link, .arrow-link { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 700; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.text-link:hover, .arrow-link:hover { text-decoration-thickness: 3px; }
.arrow-link svg { width: 18px; height: 18px; transition: transform 140ms ease-out; }
.arrow-link:hover svg { transform: translateX(4px); }

.kicker, .section-label {
  margin-bottom: 18px;
  color: var(--blue-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.3;
  text-transform: uppercase;
}
.section-label-light { color: var(--green); }

/* Full-bleed photo hero. The photo is the viewport; the copy sits on a scrim.
   Sized so headline + subhead + CTA + trust line land inside one fold on a laptop
   (min with 100svh keeps short phone viewports from clipping the CTA). */
.hero-bleed { position: relative; display: flex; align-items: flex-end; min-height: min(88svh, 860px); background: var(--ink); color: var(--paper); overflow: hidden; }
.hero-bleed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 76% 58%; }
.hero-bleed::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to right, rgba(22, 22, 19, 0.66) 0%, rgba(22, 22, 19, 0.42) 46%, rgba(22, 22, 19, 0.04) 78%),
  linear-gradient(to top, rgba(22, 22, 19, 0.82) 0%, rgba(22, 22, 19, 0.45) 38%, rgba(22, 22, 19, 0.05) 70%); }
.hero-bleed .shell { position: relative; z-index: 2; padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 72px); }
.hero-bleed .kicker { color: var(--green); }
.hero-bleed h1 { max-width: 21ch; text-wrap: balance; text-shadow: 0 2px 26px rgba(22, 22, 19, 0.45); }
.hero-lede { max-width: 46ch; margin-top: 22px; color: #f8f7ef; font-size: clamp(1.05rem, 1.5vw, 1.22rem); font-weight: 550; line-height: 1.55; text-shadow: 0 1px 3px rgba(22, 22, 19, 0.85), 0 2px 22px rgba(22, 22, 19, 0.75); }
.hero-actions { margin-top: 30px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-phone { display: inline-flex; align-items: center; gap: 9px; color: var(--paper); font-weight: 750; text-decoration: none; }
.hero-phone:hover span { text-decoration: underline; text-underline-offset: 4px; }
.hero-phone svg { width: 19px; height: 19px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-trust { margin-top: 26px; display: flex; align-items: center; gap: 10px; color: #d8d6c9; font-size: 0.84rem; font-weight: 600; }
.hero-trust svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.marker-underline { position: relative; display: inline; z-index: 0; }
.marker-underline::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -2%;
  bottom: 0.01em;
  left: -1%;
  height: 0.16em;
  background: var(--green);
  clip-path: polygon(0 32%, 11% 5%, 26% 26%, 45% 0, 66% 24%, 84% 4%, 100% 31%, 98% 88%, 79% 76%, 58% 100%, 37% 75%, 15% 94%, 1% 68%);
}
.proof-rail { background: var(--ink); color: var(--paper); }
.proof-grid { display: grid; grid-template-columns: 0.8fr 0.8fr 1.4fr; }
.proof-item { min-height: 90px; display: flex; align-items: center; gap: 14px; padding: 20px 28px; border-left: 1px solid rgba(251, 250, 245, 0.18); }
.proof-item:last-child { border-right: 1px solid rgba(251, 250, 245, 0.18); }
.proof-item > svg { flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: var(--green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.proof-item span { display: block; margin-bottom: 3px; color: #b7b9ae; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.proof-item strong { display: block; font-size: 0.86rem; line-height: 1.25; }

.quick-start { padding-block: clamp(64px, 7vw, 94px); border-bottom: 1px solid var(--line); }
.quick-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(42px, 6vw, 96px); align-items: start; }
.quick-heading h2 { max-width: 8ch; font-size: clamp(2.5rem, 4vw, 4.2rem); }
.quick-heading p { max-width: 38ch; margin-top: 20px; color: var(--muted); }
.step-chip { display: inline-block; margin-bottom: 16px; padding: 5px 10px; border: 1px solid var(--blue); border-radius: 999px; color: var(--blue-dark); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.situation-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.situation-options button { min-height: 76px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-weight: 700; text-align: left; cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out; }
.situation-options button:nth-child(odd) { border-right: 1px solid var(--line); }
.situation-options button svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 130ms ease-out; }
.situation-options button:hover { background: var(--cream); }
.situation-options button:hover svg { transform: translateX(4px); }
.situation-options button.selected { background: var(--green-soft); }
.situation-options button.selected::after { content: ""; position: absolute; inset: 7px; border: 3px solid var(--blue); border-radius: 51% 49% 47% 53% / 44% 54% 46% 56%; transform: rotate(-1deg); pointer-events: none; }

.recognition { background: var(--paper); }
.recognition-grid { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: clamp(52px, 8vw, 116px); align-items: center; }
.recognition-copy h2 { max-width: 10ch; }
.recognition-copy > p:not(.section-label) { max-width: 48ch; margin-top: 28px; color: var(--muted); }
.signal-list { margin: 34px 0 30px; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.signal-list li { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 650; }
.signal-list span { color: var(--blue); font-family: var(--display); font-size: 0.8rem; }
.home-collage { position: relative; min-height: 690px; }
.collage-main { position: absolute; inset: 0 54px 82px 0; overflow: hidden; border-radius: 24px; background: var(--cream-deep); box-shadow: var(--shadow-medium); }
.collage-main img { width: 100%; height: 100%; object-fit: cover; }
.collage-main figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 18px 22px; background: var(--paper); border-top: 1px solid var(--line); font-weight: 700; }
.collage-detail { position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 1 / 1; overflow: hidden; border: 8px solid var(--paper); border-radius: 18px; box-shadow: var(--shadow-small); }
.collage-detail img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.collage-index { position: absolute; top: -48px; right: 8px; color: var(--cream-deep); font-family: var(--display); font-size: 10rem; font-weight: 800; line-height: 1; z-index: -1; }

.process { padding-block: clamp(92px, 10vw, 148px); background: var(--blue-dark); color: var(--paper); }
.process-heading { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr); gap: 64px; align-items: end; margin-bottom: 64px; }
.process-heading h2 { max-width: 12ch; }
.process-heading > p { max-width: 35ch; color: #d8eaf8; }
.process-gallery { margin: 0; padding: 0; display: grid; grid-template-columns: 0.9fr 1.2fr 0.9fr; gap: 24px; align-items: start; list-style: none; }
.process-gallery li { min-width: 0; }
.process-gallery figure { height: 250px; overflow: hidden; border-radius: 16px; background: var(--blue); }
.process-gallery img { width: 100%; height: 100%; object-fit: cover; }
.process-featured { padding-top: 42px; }
.process-featured figure { height: 340px; }
.process-copy { padding-top: 22px; }
.process-copy > span { display: inline-grid; width: 38px; height: 38px; place-items: center; margin-bottom: 16px; border: 2px solid var(--green); border-radius: 50%; color: var(--green); font-family: var(--display); font-size: 0.75rem; font-weight: 800; }
.process-copy h3 { max-width: 14ch; }
.process-copy p { max-width: 34ch; margin-top: 12px; color: #d8eaf8; font-size: 0.94rem; }

.carrier-section { padding-block: clamp(96px, 11vw, 156px); background: var(--cream); }
.carrier-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(58px, 8vw, 116px); align-items: center; }
.carrier-copy h2 { max-width: 10.5ch; }
.carrier-copy > p:not(.section-label) { max-width: 48ch; margin-top: 28px; color: var(--muted); }
.decision-factors { margin: 32px 0 28px; border-top: 2px solid var(--ink); }
.decision-factors > div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.decision-factors dt { color: var(--green-deep); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.decision-factors dd { font-weight: 650; }
.carrier-media { position: relative; }
.carrier-media > img { width: 100%; min-height: 520px; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-medium); }
.carrier-media figcaption { position: absolute; right: -20px; bottom: -30px; width: min(390px, 76%); padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-small); }
.carrier-media figcaption strong, .carrier-media figcaption span { display: block; }
.carrier-media figcaption strong { margin-bottom: 5px; font-family: var(--display); font-size: 1.2rem; }
.carrier-media figcaption span { color: var(--muted); font-size: 0.83rem; }
.product-bracket { position: absolute; top: -26px; left: -32px; width: 110px; height: 88px; fill: none; stroke: var(--coral); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

.install-standard { padding-block: clamp(92px, 10vw, 148px); background: var(--ink); color: var(--paper); }
.install-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(56px, 8vw, 112px); align-items: center; }
.install-photo { position: relative; overflow: hidden; border-radius: 24px 24px 8px 24px; }
.install-photo img { width: 100%; min-height: 610px; object-fit: cover; object-position: 52% center; }
.install-photo figcaption { position: absolute; right: 16px; bottom: 16px; left: 16px; padding: 12px 15px; background: rgba(22, 22, 19, 0.84); color: #d1d2cb; font-size: 0.78rem; }
.install-copy h2 { max-width: 11ch; }
.install-copy > p:not(.section-label) { max-width: 50ch; margin-top: 26px; color: #c9cbc1; }
.standard-list { margin: 34px 0 30px; padding: 0; list-style: none; border-top: 1px solid #52544c; }
.standard-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid #52544c; }
.standard-list span { color: var(--green); font-family: var(--display); font-size: 0.75rem; }
.standard-list strong { font-size: 0.95rem; }
.license-block { padding: 24px; border-radius: 14px; background: var(--paper); color: var(--ink); }
.license-block > div { display: grid; grid-template-columns: minmax(130px, 0.55fr) 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.license-block span { color: var(--muted); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; }
.license-block strong { font-size: 0.86rem; line-height: 1.35; }
.license-block a { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--blue-dark); font-size: 0.86rem; font-weight: 750; text-underline-offset: 4px; }
.license-block a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }

.area-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(54px, 8vw, 112px); align-items: center; }
.area-copy h2 { max-width: 10ch; }
.area-copy > p:not(.section-label) { max-width: 47ch; margin-top: 26px; color: var(--muted); }
.city-list { margin: 30px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.city-list span { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 650; }
.city-list span:nth-child(odd) { padding-right: 16px; }
.city-list span:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.area-photo { position: relative; overflow: hidden; border-radius: 24px; box-shadow: var(--shadow-medium); }
.area-photo img { width: 100%; min-height: 580px; object-fit: cover; }
.area-photo figcaption { position: absolute; right: 20px; bottom: 20px; left: 20px; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--paper); font-size: 0.83rem; font-weight: 650; }
.area-photo figcaption svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 1.8; }

.visit-section { padding-block: clamp(92px, 10vw, 148px); background: var(--green-soft); border-block: 1px solid var(--line); }
.visit-grid { display: grid; grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); gap: clamp(50px, 8vw, 118px); align-items: start; }
.visit-copy { position: sticky; top: 130px; }
.visit-copy h2 { max-width: 9ch; }
.visit-copy > p:not(.section-label) { max-width: 38ch; margin-top: 24px; color: var(--ink-soft); }
.visit-copy ul { margin: 28px 0 0; padding: 0; list-style: none; }
.visit-copy li { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-weight: 700; }
.visit-copy li svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 2.2; }
.visit-form { padding: clamp(24px, 4vw, 48px); border: 2px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); }
.form-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.form-progress span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-family: var(--display); font-size: 0.72rem; font-weight: 800; }
.form-progress span.active { border-color: var(--ink); background: var(--green); color: var(--ink); }
.form-progress i { width: 42px; height: 1px; background: var(--line); }
.form-heading { margin-bottom: 24px; }
.form-heading span { display: block; margin-bottom: 5px; color: var(--blue-dark); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.form-heading h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.visit-form fieldset { margin: 0; padding: 0; border: 0; }
.radio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.radio-grid label { position: relative; cursor: pointer; }
.radio-grid input { position: absolute; opacity: 0; pointer-events: none; }
.radio-grid label span { min-height: 58px; display: flex; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); font-size: 0.88rem; font-weight: 650; transition: background-color 140ms ease-out, border-color 140ms ease-out; }
.radio-grid label:hover span { border-color: var(--ink); background: var(--cream); }
.radio-grid input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.radio-grid input:checked + span { border: 2px solid var(--ink); background: var(--green); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 7px; margin-bottom: 16px; color: var(--ink); font-size: 0.78rem; font-weight: 750; }
.field > span { color: var(--muted); font-weight: 500; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid #a7a397; border-radius: 8px; background: #fdfcf8; color: var(--ink); }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--blue); outline: 3px solid var(--focus); outline-offset: 1px; }
.form-next { width: 100%; margin-top: 2px; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.form-back { min-height: 46px; padding: 0 8px; border: 0; background: transparent; font-weight: 750; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.form-submit { flex: 1 1 auto; }
.form-note { margin-top: 18px; color: var(--muted); font-size: 0.73rem; text-align: center; }
.form-success { margin-top: 20px; padding: 18px; border: 1px solid var(--ink); border-radius: 10px; background: var(--green-soft); }
.form-success strong { font-family: var(--display); }
.form-success p { margin-top: 4px; font-size: 0.85rem; }

.faq-grid { display: grid; grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr); gap: clamp(52px, 8vw, 112px); align-items: start; }
.faq-heading { position: sticky; top: 130px; }
.faq-heading h2 { max-width: 9ch; }
.faq-heading > p:not(.section-label) { max-width: 38ch; margin-top: 22px; color: var(--muted); }
.faq-list { border-top: 2px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; font-weight: 750; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.faq-list summary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 150ms ease-out; }
.faq-list details[open] summary svg { transform: rotate(180deg); }
.faq-list details p { max-width: 62ch; padding: 0 54px 24px 0; color: var(--muted); }

.site-footer { padding-top: 76px; background: var(--ink); color: var(--paper); }
.footer-lead { display: flex; align-items: end; justify-content: space-between; gap: 44px; padding-bottom: 64px; }
.footer-lead h2 { max-width: 18ch; font-size: clamp(2.2rem, 3.6vw, 3.5rem); }
.footer-main { min-height: 120px; display: flex; align-items: center; justify-content: space-between; gap: 36px; border-top: 1px solid #454740; }
.brand-footer { color: var(--paper); }
.brand-footer .brand-name b { color: var(--green); }
.footer-main nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 22px; }
.footer-main nav a { color: #d2d4cb; font-size: 0.82rem; text-decoration: none; }
.footer-main nav a:hover { color: var(--green); }
.footer-legal { display: flex; justify-content: space-between; gap: 34px; padding-block: 24px 36px; border-top: 1px solid #454740; color: #9fa198; font-size: 0.7rem; }
.mobile-action { display: none; }

/* --- V3 components ---------------------------------------------------------- */

/* A display rule on an element silently beats the browser's [hidden] — the chat panel
   shipped that bug once already. Every phone slot gets an explicit guard. */
[data-phone-wrap][hidden] { display: none !important; }

/* Header phone. Hidden until config.js supplies the number (app.js unhides). */
.header-phone { display: none; align-items: center; gap: 8px; margin-right: 14px; color: var(--ink); font-size: 0.88rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.header-phone svg { width: 17px; height: 17px; fill: none; stroke: var(--green-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.has-phone .header-phone { display: inline-flex; }
.header-cta-group { display: flex; align-items: center; }

/* Sticky mobile bar: book (always) + call (when the number exists). Desktop hides it. */
.mobile-bar { display: none; }
@media (max-width: 880px) {
  .mobile-bar { position: fixed; z-index: 40; right: 10px; bottom: 10px; left: 10px; display: flex; gap: 8px; }
  /* While the primary CTA (hero button or the form itself) is on screen, the bar is
     redundant chrome — app.js toggles this class. */
  body.cta-in-view .mobile-bar { display: none; }
  .cf-chat { bottom: 72px; }
  .mobile-bar a { flex: 1 1 0; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 800; font-size: 0.92rem; text-decoration: none; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
  .mobile-bar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-bar .mobile-bar-book { background: var(--green); }
  .mobile-bar .mobile-bar-call { background: var(--paper); }
}

/* Stakes — the pains that bring someone here. */
.stakes { padding-block: clamp(84px, 10vw, 136px); background: var(--cream); }
.stakes-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 104px); align-items: start; }
.stakes-copy h2 { max-width: 15ch; }
.stakes-copy > p:not(.section-label) { max-width: 46ch; margin-top: 24px; color: var(--muted); }
.stakes-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.stakes-list li { position: relative; padding: 22px 0 22px 34px; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 650; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -0.02em; }
.stakes-list li:first-child { border-top: 1px solid var(--line); }
.stakes-list li::before { content: ""; position: absolute; top: 32px; left: 2px; width: 14px; height: 14px; background: var(--coral); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.stakes-list li span { display: block; margin-top: 6px; font-family: var(--body); font-weight: 450; font-size: 0.92rem; color: var(--muted); letter-spacing: 0; }

/* Comparison — one X/check block. */
.compare { padding-block: clamp(84px, 10vw, 136px); background: var(--ink); color: var(--paper); }
.compare-heading { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.compare-heading h2 { max-width: 18ch; }
.compare-heading p { max-width: 52ch; margin-top: 20px; color: #c9cbc1; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.compare-col { padding: clamp(24px, 3vw, 38px); border-radius: 16px; }
.compare-col h3 { font-size: 1.05rem; margin-bottom: 18px; }
.compare-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.compare-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; line-height: 1.5; }
.compare-col li svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.compare-them { border: 1px solid rgba(251, 250, 245, 0.16); color: #c9cbc1; }
.compare-them li svg { stroke: var(--coral); }
.compare-us { border: 2px solid var(--green); background: rgba(178, 229, 26, 0.07); }
.compare-us li svg { stroke: var(--green); }

/* Financing cards — qualitative only until the facts file carries approved terms. */
.fin-section { padding-block: clamp(84px, 10vw, 136px); background: var(--paper); }
.fin-heading { max-width: 760px; }
.fin-heading > p:not(.section-label) { max-width: 54ch; margin-top: 22px; color: var(--muted); }
.fin-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(34px, 4vw, 52px); }
.fin-card { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.fin-card h3 { font-size: 1.15rem; }
.fin-card .fin-tag { display: inline-block; margin-bottom: 14px; padding: 5px 11px; border: 1px solid var(--ink); border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.fin-card p { margin-top: 12px; color: var(--ink-soft); font-size: 0.95rem; }
.fin-card ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fin-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft); }
.fin-card li svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; fill: none; stroke: var(--green-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fin-foot { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fin-foot p { color: var(--muted); font-size: 0.85rem; max-width: 52ch; }

/* Fine print — Tetra's pattern: claims run clean, one consolidated paragraph at the
   bottom carries the qualifications. */
.fine-print { padding: 26px 0 0; border-top: 1px solid var(--line); margin-top: clamp(44px, 6vw, 72px); color: var(--muted); font-size: 0.78rem; line-height: 1.6; }
.fine-print p { max-width: 90ch; }

/* Tetra platform proof — stays hidden until Mike confirms the partner agreement
   allows naming Tetra publicly. app.js unhides on cfg.tetraApproved. */
[data-tetra-gated][hidden] { display: none; }

/* Value chips under the plan steps */
.promise-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.promise-strip span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 0.82rem; font-weight: 650; }
.promise-strip svg { width: 15px; height: 15px; fill: none; stroke: var(--green-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 880px) {
  .stakes-grid, .compare-grid, .fin-cards { grid-template-columns: 1fr; }
  .hero-bleed { min-height: min(92svh, 780px); align-items: flex-end; }
  .page-hero-copy h1, .page-hero-form .page-hero-copy h1 { max-width: 24ch; }
}
/* --- end V3 components ------------------------------------------------------ */

.motion-ready .reveal { opacity: 0; transform: translateY(16px); }
.motion-ready .reveal.visible { opacity: 1; transform: translateY(0); transition: opacity 340ms ease-out, transform 340ms ease-out; }

/* Supporting pages */
.page-hero { padding-block: clamp(64px, 8vw, 112px); background: var(--cream); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(46px, 8vw, 112px); align-items: center; }
.page-hero-copy h1 { max-width: 18ch; font-size: clamp(2.4rem, 4.2vw, 3.9rem); }
.page-hero-copy > p:not(.kicker) { max-width: 48ch; margin-top: 28px; color: var(--ink-soft); font-size: 1.15rem; }
.page-hero-copy .hero-actions { margin-top: 32px; }
.page-hero-media { min-height: 560px; position: relative; overflow: hidden; border-radius: 26px 26px 8px 26px; box-shadow: var(--shadow-medium); }
.page-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-media figcaption { position: absolute; right: 16px; bottom: 16px; left: 16px; padding: 13px 16px; border-radius: 9px; background: rgba(22, 22, 19, 0.84); color: var(--paper); font-size: 0.78rem; }
.page-hero-media.product-shot { background: var(--paper); }
.page-hero-media.product-shot img { object-position: center; }

.intro-band { padding-block: 42px; background: var(--ink); color: var(--paper); }
.intro-band-inner { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 48px; align-items: center; }
.intro-band strong { color: var(--green); font-family: var(--display); font-size: 1.1rem; }
.intro-band p { max-width: 66ch; color: #d3d5cc; }

.content-section { padding-block: clamp(84px, 10vw, 144px); }
.content-section.alt { background: var(--cream); }
.content-heading { max-width: 760px; margin-bottom: 54px; }
.content-heading h2 { max-width: 12ch; }
.content-heading > p:not(.section-label) { max-width: 57ch; margin-top: 24px; color: var(--muted); }
.editorial-split { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(50px, 8vw, 112px); align-items: start; }
.editorial-split.reverse { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.editorial-photo { position: relative; overflow: hidden; border-radius: 22px; box-shadow: var(--shadow-small); }
.editorial-photo img { width: 100%; min-height: 520px; object-fit: cover; }
.editorial-photo figcaption { padding: 14px 18px; border-top: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: 0.8rem; }
.editorial-copy h2 { max-width: 11ch; }
.editorial-copy > p:not(.section-label) { max-width: 53ch; margin-top: 24px; color: var(--muted); }
.numbered-lines { margin: 34px 0 0; padding: 0; border-top: 2px solid var(--ink); list-style: none; }
.numbered-lines li { display: grid; grid-template-columns: 50px 1fr; gap: 14px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.numbered-lines span { color: var(--blue); font-family: var(--display); font-size: 0.78rem; font-weight: 800; }
.numbered-lines strong { display: block; margin-bottom: 4px; font-family: var(--display); font-size: 1.08rem; line-height: 1.15; }
.numbered-lines p { color: var(--muted); font-size: 0.92rem; }

.factor-table { border-top: 2px solid var(--ink); }
.factor-row { display: grid; grid-template-columns: minmax(140px, 0.35fr) minmax(0, 0.65fr); gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.factor-row h3 { font-size: 1.25rem; }
.factor-row p { max-width: 60ch; color: var(--muted); }
.notice-block { margin-top: 34px; padding: 22px 24px; border-left: 5px solid var(--green); background: var(--green-soft); }
.notice-block strong { display: block; margin-bottom: 5px; font-family: var(--display); }
.notice-block p { color: var(--ink-soft); }

.photo-ribbon { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 18px; }
.photo-ribbon figure { overflow: hidden; border-radius: 18px; }
.photo-ribbon img { width: 100%; height: 390px; object-fit: cover; }
.photo-ribbon figure:last-child img { object-position: 67% center; }

.city-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.city-entry { padding: 24px 22px 24px 0; border-bottom: 1px solid var(--line); }
.city-entry:nth-child(even) { padding-right: 0; padding-left: 22px; border-left: 1px solid var(--line); }
.city-entry h3 { font-size: 1.3rem; }
.city-entry p { margin-top: 7px; color: var(--muted); font-size: 0.9rem; }

.simple-cta { padding-block: clamp(74px, 9vw, 120px); background: var(--blue-dark); color: var(--paper); }
.simple-cta-inner { display: flex; align-items: end; justify-content: space-between; gap: 52px; }
.simple-cta h2 { max-width: 10ch; }
.simple-cta p { max-width: 45ch; margin-top: 18px; color: #d6e9f8; }

.contact-page { padding-block: clamp(76px, 9vw, 128px); background: var(--green-soft); }
.contact-page .visit-grid { align-items: start; }

@media (max-width: 880px) {
  .page-hero-grid, .intro-band-inner, .editorial-split, .editorial-split.reverse { grid-template-columns: 1fr; }
  .page-hero-media { min-height: 560px; }
  .simple-cta-inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .page-hero { padding-block: 52px 68px; }
  .page-hero-copy h1 { font-size: clamp(2.1rem, 9.5vw, 2.7rem); }
  .page-hero-media { min-height: 440px; }
  .intro-band-inner { gap: 12px; }
  .editorial-photo img { min-height: 420px; }
  .factor-row { grid-template-columns: 1fr; gap: 8px; }
  .photo-ribbon { grid-template-columns: 1fr; }
  .photo-ribbon img { height: 300px; }
  .city-directory { grid-template-columns: 1fr; }
  .city-entry:nth-child(even) { padding-left: 0; border-left: 0; }
}

@media (max-width: 1040px) {
  .nav-row { gap: 18px; }
  .primary-nav { gap: 17px; }
  .primary-nav a { font-size: 0.8rem; }
  .recognition-grid, .carrier-grid, .install-grid, .area-grid { gap: 54px; }
  .home-collage { min-height: 580px; }
  .process-gallery figure { height: 210px; }
  .process-featured figure { height: 300px; }
  .carrier-media > img, .area-photo img { min-height: 490px; }
  .install-photo img { min-height: 550px; }
}

@media (max-width: 880px) {
  .shell { width: min(100% - 36px, var(--shell)); }
  .utility-inner { justify-content: center; text-align: center; }
  .utility-inner > span { display: none; }
  .nav-row { min-height: 70px; grid-template-columns: auto 1fr auto; }
  .menu-button { justify-self: end; min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 0 4px; border: 0; background: transparent; font-size: 0.82rem; font-weight: 750; cursor: pointer; }
  .menu-button i, .menu-button i::before { width: 22px; height: 2px; display: block; background: var(--ink); transition: transform 150ms ease-out; }
  .menu-button i { position: relative; }
  .menu-button i::before { content: ""; position: absolute; top: 7px; }
  .menu-button[aria-expanded="true"] i { transform: rotate(45deg); }
  .menu-button[aria-expanded="true"] i::before { top: 0; transform: rotate(-90deg); }
  .primary-nav { position: absolute; top: 70px; right: 0; left: 0; display: none; padding: 18px; border-bottom: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-small); }
  .primary-nav.open { display: grid; }
  .primary-nav a { min-height: 48px; display: flex; align-items: center; padding-inline: 10px; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .primary-nav a::after { display: none; }
  .header-action { display: none; }
  .quick-grid, .recognition-grid, .carrier-grid, .install-grid, .area-grid, .visit-grid, .faq-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-wide { grid-column: 1 / -1; }
  .proof-item:nth-child(2) { border-right: 1px solid rgba(251, 250, 245, 0.18); }
  .quick-heading h2, .recognition-copy h2, .carrier-copy h2, .area-copy h2, .visit-copy h2, .faq-heading h2 { max-width: 13ch; }
  .home-collage { min-height: 660px; margin-top: 30px; }
  .process-heading { grid-template-columns: 1fr; gap: 22px; }
  .process-heading h2 { max-width: 13ch; }
  .process-gallery { grid-template-columns: 1fr 1fr; }
  .process-featured { padding-top: 0; grid-row: span 2; }
  .process-featured figure { height: 500px; }
  .process-gallery li:not(.process-featured) figure { height: 220px; }
  .carrier-media { max-width: 660px; }
  .install-photo { order: 2; }
  .install-photo img { min-height: 460px; }
  .area-photo img { min-height: 500px; }
  .visit-copy, .faq-heading { position: static; }
  .visit-copy h2 { max-width: 11ch; }
  .footer-main { align-items: flex-start; padding-block: 34px; }
  .footer-main nav { max-width: 420px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; padding-bottom: 66px; }
  .shell { width: min(100% - 28px, var(--shell)); }
  h1 { font-size: clamp(2.05rem, 9.5vw, 2.6rem); line-height: 1.06; }
  h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .section-space { padding-block: 78px; }
  .utility-bar { font-size: 0.68rem; }
  .utility-inner { min-height: 30px; }
  .nav-row { min-height: 66px; }
  .primary-nav { top: 66px; }
  .brand-mark { width: 38px; height: 38px; }
  .hero-lede { margin-top: 20px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .proof-grid { width: 100%; grid-template-columns: 1fr; }
  .proof-item, .proof-item:last-child, .proof-item:nth-child(2) { min-height: 76px; padding-inline: 20px; border-right: 0; border-left: 0; border-bottom: 1px solid rgba(251, 250, 245, 0.18); }
  .proof-wide { grid-column: auto; }
  .quick-start { padding-block: 64px; }
  .quick-grid { gap: 36px; }
  .situation-options { grid-template-columns: 1fr; }
  .situation-options button:nth-child(odd) { border-right: 0; }
  .home-collage { min-height: 510px; margin-top: 14px; }
  .collage-main { inset: 0 20px 64px 0; }
  .collage-detail { width: 46%; border-width: 5px; }
  .collage-index { top: -30px; font-size: 7rem; }
  .process { padding-block: 80px; }
  .process-heading { margin-bottom: 42px; }
  .process-gallery { grid-template-columns: 1fr; gap: 44px; }
  .process-featured { grid-row: auto; }
  .process-featured figure, .process-gallery li:not(.process-featured) figure { height: 280px; }
  .carrier-section, .install-standard, .visit-section { padding-block: 80px; }
  .carrier-grid, .install-grid, .area-grid, .visit-grid, .faq-grid { gap: 44px; }
  .carrier-media > img { min-height: 420px; }
  .carrier-media figcaption { right: 12px; bottom: 12px; width: calc(100% - 24px); }
  .product-bracket { top: -20px; left: -12px; width: 78px; height: 62px; }
  .install-photo img { min-height: 420px; }
  .license-block > div { grid-template-columns: 1fr; gap: 5px; }
  .area-photo img { min-height: 410px; }
  .city-list { grid-template-columns: 1fr; }
  .city-list span:nth-child(even) { padding-left: 0; border-left: 0; }
  .radio-grid, .field-row { grid-template-columns: 1fr; }
  .visit-form { padding: 22px 18px 24px; border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .form-back { align-self: flex-start; }
  .faq-list details p { padding-right: 0; }
  .footer-lead { align-items: flex-start; flex-direction: column; }
  .footer-main { flex-direction: column; }
  .footer-main nav { justify-content: flex-start; flex-direction: column; gap: 15px; }
  .footer-legal { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
}

/* Single-image variants. Used where a section has no honest photograph available:
   the installing contractor is a separate legal entity and cannot be depicted with
   stock people (see ../docs/adr/ and V2-AUDIT.md). Appended after the base rules so
   they win at equal specificity; the descendant selector also beats the 620px
   .collage-main override. */
.home-collage-single .collage-main { inset: 0; }
/* Without the photo this section is a single column. Cap the measure and relax the
   11ch headline clamp, which was sized for a 0.86fr column, not the full shell. */
.install-grid-single { grid-template-columns: minmax(0, 760px); }
.install-grid-single .install-copy h2 { max-width: 20ch; }

/* --- Paid landing hero -------------------------------------------------------
   ac-replacement.html carries the visit form in the hero's second column instead
   of a photograph, so a paid click converts without a second page load
   (docs/prd/crazy-frog-launch-build.md §1.1). .page-hero-grid already collapses to
   one column at 880px, which puts the copy above the form on mobile. */
.page-hero-form { align-items: start; }
.page-hero-form .visit-form { margin: 0; }
/* The editorial 7rem/10ch headline is built for a hero whose partner is a photograph.
   Beside a 660px form it runs five lines and pushes the copy column to ~1140px, so this
   page uses a tighter scale that keeps both columns roughly the same height. */
.page-hero-form .page-hero-copy h1 { max-width: 17ch; font-size: clamp(2.2rem, 3.4vw, 3.3rem); }
.page-hero-form .page-hero-copy > p:not(.kicker):not(.hero-fineprint) { font-size: 1.05rem; margin-top: 22px; }

.hero-points { margin: 30px 0 0; padding: 0; list-style: none; }
.hero-points li { display: flex; align-items: center; gap: 11px; margin: 11px 0; font-weight: 700; }
.hero-points svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Beats `.page-hero-copy > p:not(.kicker)`, which would otherwise set this at 1.15rem. */
.page-hero-copy > p.hero-fineprint { max-width: 46ch; margin-top: 26px; color: var(--muted); font-size: 0.78rem; line-height: 1.55; }

/* A failed submit is stated, never swallowed. */
.form-note-error { color: var(--ink); font-weight: 700; }

/* --- Chat widget -------------------------------------------------------------
   Rendered by chat.js only when CRAZYFROG_CONFIG.chatEndpoint is set. Sits above
   the mobile action bar, which occupies the same bottom-right corner. */
.cf-chat { position: fixed; right: 18px; bottom: 18px; z-index: 60; font-family: var(--body); }
.cf-chat-launch { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border: 2px solid var(--ink); border-radius: 999px; background: var(--green); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); font-family: var(--body); font-weight: 800; font-size: 0.9rem; cursor: pointer; }
.cf-chat-launch:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
/* The launcher is the closed state of the panel, not a companion to it. */
.cf-chat.is-open .cf-chat-launch { display: none; }

/* [hidden] must win. A `display` rule on the element itself overrides the UA's
   `[hidden] { display: none }`, which shipped the panel permanently open until
   this rule existed. Any future display rule on a [hidden]-toggled element needs
   the same guard. */
.cf-chat-panel[hidden] { display: none; }
.cf-chat-panel { display: flex; flex-direction: column; width: min(370px, calc(100vw - 36px)); height: min(540px, calc(100vh - 120px)); overflow: hidden; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 6px 6px 0 var(--ink); }
.cf-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 2px solid var(--ink); background: var(--cream); }
.cf-chat-head strong { display: block; font-family: var(--display); font-size: 0.98rem; }
.cf-chat-head span { font-size: 0.72rem; color: var(--muted); }
.cf-chat-close { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--ink); cursor: pointer; }

.cf-chat-log { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; }
.cf-bubble { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-bubble-bot { align-self: flex-start; border: 1px solid var(--line); background: var(--cream); }
.cf-bubble-me { align-self: flex-end; background: var(--ink); color: var(--paper); }

.cf-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.cf-chat-form input { flex: 1; min-width: 0; padding: 11px 13px; border: 1.5px solid var(--ink); border-radius: 10px; font: inherit; font-size: 0.9rem; }
.cf-chat-form button { padding: 11px 15px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--green); font-family: var(--body); font-weight: 800; font-size: 0.85rem; cursor: pointer; }
.cf-chat-form input:disabled, .cf-chat-form button:disabled { opacity: 0.55; cursor: default; }
.cf-chat-foot { padding: 0 12px 12px; color: var(--muted); font-size: 0.66rem; text-align: center; }

/* The sticky mobile CTA owns the bottom of the viewport on small screens. */
@media (max-width: 880px) {
  .cf-chat { right: 14px; bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-chat-launch:hover { transform: none; }
}