/* NanoPorter — direction L, "Clean". 11 September 2026.
   One calm document inside a hairline frame. Small, light type; one product visual per section.
   Every number in the token block comes from BRIEF.md and nowhere else.

   THE RULE THIS FILE IS WRITTEN AGAINST: with JavaScript off, nothing is hidden. Every selector
   that hides or dims something is scoped under `html.js`, which a one-line inline script sets.
   Search this file for `html.js` and you can read the entire set in one pass. */

/* ---------------------------------------------------------------- fonts (self-hosted, no service) */
@font-face { font-family: "InterVar"; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* the faces the nine widget skins ask for. Heritage asks for Lora; no self-hosted Lora exists in
   this folder, so it takes the designer's own documented fallback, Georgia. Flagged in handover. */
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------------------------------------------------------------- tokens: BRAND-SPEC light set */
:root {
  --page:   #F1F7F5;
  --tint:   #E7F1EC;
  --card:   #FFFFFF;
  --ink:    #0E1618;
  --body:   #28332F;
  --muted:  #5C6E6A;
  --rule:   #BCD4CB;
  --accent: #0D7C56;

  --container: 1120px;
  --gutter: 24px;
  --nav-h: 64px;
  --pad-y: 76px;

  --hair: 1px solid var(--rule);
  --r-panel: 24px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- reset and base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: "InterVar", Inter, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  font-variant-numeric: tabular-nums;      /* BRAND-SPEC: Inter's digits are proportional by default */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                       /* the frame's gradients must never create a scrollbar */
}

img, svg { max-width: 100%; }
[hidden] { display: none !important; }

a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- type scale (BRIEF.md, law)
   Nothing here exceeds 44px and nothing exceeds weight 500. The two PRODUCT ARTEFACTS on the page
   — the widget (.wf) and the real enquiry email (.email-sheet) — carry their own type, because
   they are things being shown, not the page's own writing. tools/audit.mjs excludes them by name. */
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); letter-spacing: -0.012em; }
h1 { font-size: clamp(32px, 3.1vw, 40px); line-height: 1.12; }
h2 { font-size: clamp(26px, 2.5vw, 32px); line-height: 1.18; }
h3 { font-size: 18px; line-height: 1.35; font-weight: 500; }

p { margin: 0; }
.lede { font-size: 17px; line-height: 1.55; color: var(--body); }
.note { font-size: 14px; line-height: 1.5; color: var(--muted); }
.eyebrow {
  font-size: 13px; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin: 0 0 14px;
}

/* ---------------------------------------------------------------- the frame
   Two 1px rules at the container edges, running the whole page. Explicitly positioned,
   non-repeating gradients: no repeat means no stray extra lines, and the positions are whole
   pixels from the centre so they stay crisp. */
.frame-rules {
  background-image:
    linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule));
  background-repeat: no-repeat, no-repeat;
  background-size: 1px 100%, 1px 100%;
  background-position: calc(50% - (var(--container) / 2)) 0, calc(50% + (var(--container) / 2) - 1px) 0;
}
@media (max-width: 1200px) { .frame-rules { background-image: none; } }

.container {
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

/* a section is one screen or less, with a hairline under it, full bleed */
.section { padding: var(--pad-y) 0; border-bottom: var(--hair); position: relative; }
.section.band-tint { background: var(--tint); }

/* ---------------------------------------------------------------- nav */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav-h);
  background: var(--card); border-bottom: var(--hair);
}
.nav-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; flex: none; min-height: 28px; }
.brand img { height: 22px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
/* every inline control clears the WCAG 2.2 AA 24px target minimum */
.nav-links a {
  font-size: 14px; color: var(--body); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 28px;
  transition: color .2s var(--ease);
}
.nav-links a:hover { color: var(--ink); text-decoration: underline; }
/* On a phone the four links do not fit beside the button and push it off the screen, so the bar
   is the lockup and the button. Every one of those destinations is still reachable: they are all
   in the footer of every page, and the page itself scrolls to each of them. */
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; gap: 12px; }
  .nav .btn { margin-left: auto; }
}
.nav .btn { flex: none; }

/* the page starts under the fixed bar; anchors land below it too */
main { padding-top: var(--nav-h); }
:target, [id] { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* ---------------------------------------------------------------- buttons: one filled, one outlined */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; background: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-fill { background: var(--accent); color: #fff; }
.btn-fill:hover { background: #0a6446; }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: rgba(14, 22, 24, .05); }
.btn-big { height: 48px; padding: 0 28px; font-size: 15px; }

/* a chip: hairline, small, for the six questions and the business switcher */
.chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border: var(--hair); border-radius: 999px; background: var(--card);
  font: inherit; font-size: 13px; color: var(--body); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------------------------------------------------------------- arrival
   Content is VISIBLE by default. `html.js` hides it; a passive, rAF-coalesced scroll pass reveals
   it; a 2s safety timer reveals everything regardless. Readability never waits on the animation.
   IntersectionObserver is deliberately not used: the previous build recorded it never firing here. */
html.js .arrive { opacity: 0; transform: translateY(12px); }
html.js .arrive.is-in { opacity: 1; transform: none; transition: opacity .38s var(--ease), transform .38s var(--ease); }
html.js .arrive.is-in[data-step="1"] { transition-delay: .07s; }
html.js .arrive.is-in[data-step="2"] { transition-delay: .14s; }
html.js .arrive.is-in[data-step="3"] { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  html.js .arrive { opacity: 1; transform: none; }
  html.js .arrive.is-in { transition: none; }
}

/* ================================================================ 01 HERO */
.hero { padding-top: 64px; padding-bottom: 72px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 16px; align-items: center; }
.hero-copy h1 { max-width: 15ch; margin-bottom: 18px; }
.hero-copy .lede { max-width: 46ch; color: var(--body); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 14px; }

/* The gradient panel: the one visual of this section, and the mark's ONLY appearance as a
   background object. Three layers over a base colour — a soft top-left bloom, the fine grain, and
   the brand ramp — so a page with no photography still has an image on it. Nothing readable sits
   on the gradient: the widget is a white card and the caption is on the page ground. */
.hero-panel {
  position: relative; overflow: hidden; border-radius: var(--r-panel);
  min-height: 520px; display: grid; place-items: center; padding: 36px 24px;
  background-color: #146B51;
  background-image:
    radial-gradient(78% 58% at 22% 8%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E"),
    linear-gradient(152deg, #0B5F44 0%, #0D7C56 26%, #3C8A70 58%, #9FC7B6 84%, #D6E7DF 100%);
  background-size: cover, 160px 160px, cover;
  background-blend-mode: soft-light, overlay, normal;
}
html.js .hero-panel { height: 520px; min-height: 0; }
.hero-mark {
  position: absolute; left: 50%; top: 50%; width: 520px; height: auto;
  margin: -260px 0 0 -260px; opacity: .12; pointer-events: none;
  will-change: transform;
}
.hero-figure { position: relative; margin: 0; z-index: 1; display: grid; justify-items: center; width: 100%; }
/* the caption belongs to the visual, so it sits in the visual's column, under the panel */
.hero-caption { grid-column: 2; margin: 16px 0 0; }
@media (max-width: 900px) { .hero-caption { grid-column: 1; order: -1; margin: -8px 0 0; } }

/* the hero widget: the product, made of real captured text. Not the live widget, and not typeable:
   its input row is decorative and aria-hidden. Nothing here fakes a sent message. */
.hero-wf { width: min(340px, 100%); }
html.js .hero-wf { height: 430px; }

/* Three exchanges, all three in the HTML at first byte. Without JavaScript they stack in the log,
   each labelled with its business, and the header names all three. With JavaScript one shows at a
   time: the block crossfades, and inside it every word fades in on its own build-time delay. */
/* the log fills from the BOTTOM, the way a chat window does */
.hero-wf .log { position: relative; justify-content: flex-end; }
.hx { display: flex; flex-direction: column; gap: 9px; }
html.js .hx {
  position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none;
  transition: opacity .25s linear;
}
html.js .hx.is-on { opacity: 1; pointer-events: auto; }

.hx-biz { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 3px; }
html.js .hx-biz { display: none; }
/* with JavaScript off the header names all three businesses, so it has to wrap rather than
   run off the edge of the window */
.hero-wf .wname { flex-wrap: wrap; row-gap: 2px; }
.hx-name { white-space: nowrap; }
html.js .hx-name { display: none; }
html.js .hx-name.is-on { display: inline; }
html.js .hx-sep { display: none; }

/* the reveal: every word span is in the HTML, written at build time. Only opacity moves.
   Leaving: the words snap back to 0 only AFTER the block has faded, so nothing un-types on screen. */
html.js .hx .w { opacity: 0; transition: opacity 0s linear .3s; }
html.js .hx.is-on .w { opacity: 1; transition: opacity .26s linear; }
@media (prefers-reduced-motion: reduce) {
  html.js .hx .w, html.js .hx.is-on .w { opacity: 1; transition: none; }
  html.js .hx { transition: none; }
}

@media (max-width: 900px) {
  /* the phone gets the hero panel ABOVE the copy (BRIEF.md) */
  .hero-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 28px; }
  .hero-panel { order: -1; padding: 24px 14px; min-height: 0; }
  html.js .hero-panel { height: 470px; }
  html.js .hero-wf { height: 410px; }
}

/* ================================================================ 02 SCRIPTED OR AI */
.headline-centre { text-align: center; max-width: 760px; margin-inline: auto; }
.headline-centre .lede { color: var(--muted); max-width: 62ch; margin: 16px auto 0; }

.ab { display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; }
.ab-col { padding: 0 40px; }
.ab-col + .ab-col { border-left: var(--hair); }
.ab-col h3 { margin-bottom: 26px; }
.ab-col ul { list-style: none; margin: 0; padding: 0; }
.ab-col li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 18px 0; font-size: 16px; line-height: 1.5;
}
.ab-col li + li { border-top: 1px dotted var(--rule); }
.ab-col .g { font-size: 15px; line-height: 1.6; }
.ab-no li, .ab-no h3 { color: var(--muted); }
.ab-no .g { color: var(--muted); }
.ab-yes li { color: var(--ink); }
.ab-yes .g { color: var(--accent); }
.ab-close { text-align: center; margin-top: 36px; }

@media (max-width: 860px) {
  .ab { grid-template-columns: 1fr; margin-top: 36px; }
  .ab-col { padding: 0; }
  .ab-col + .ab-col { border-left: 0; border-top: var(--hair); margin-top: 28px; padding-top: 28px; }
}

/* ================================================================ 03 THREE VOICES */
.voices-head { max-width: 900px; }
.voices-head .lede { color: var(--muted); margin-top: 16px; }
.qchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 12px; }
.handoff-label { max-width: 74ch; margin: 0 0 18px; }
html.js .handoff-label { display: none; }
html.js .voices[data-q="q6"] .handoff-label { display: block; }

.voice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.voices .voice-row { margin-bottom: -6px; }
.voice { display: grid; justify-items: stretch; }
.voice .wf { width: 100%; }
html.js .voice .wf { height: 386px; }
.voice .wf { min-height: 386px; }
.voice-name { margin: 16px 0 2px; }
.voice-note { font-size: 14px; color: var(--muted); }
.biz-switch { display: none; }

/* the 18 answers: all in the HTML, one generic rule, scoped under html.js */
html.js .voices .vx { display: none; }
html.js .voices[data-q="q1"] .vx[data-q="q1"],
html.js .voices[data-q="q2"] .vx[data-q="q2"],
html.js .voices[data-q="q3"] .vx[data-q="q3"],
html.js .voices[data-q="q4"] .vx[data-q="q4"],
html.js .voices[data-q="q5"] .vx[data-q="q5"],
html.js .voices[data-q="q6"] .vx[data-q="q6"] { display: block; }

/* the [Passing you to …] line is a visible STATE row, not body text */
.state {
  display: flex; align-items: center; gap: 8px; align-self: center;
  margin: 4px 0; padding: 5px 12px; border-radius: 999px;
  border: 1px dashed var(--line, #e5e7eb); color: var(--muted, #6b7280);
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
}

@media (max-width: 980px) {
  .voice-row { grid-template-columns: 1fr; gap: 0; }
  .biz-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
  html.js .voice { display: none; }
  html.js .voices[data-biz="two-elms"]     .voice[data-biz="two-elms"],
  html.js .voices[data-biz="tipsy-ferret"] .voice[data-biz="tipsy-ferret"],
  html.js .voices[data-biz="nethercote-dental"] .voice[data-biz="nethercote-dental"] { display: grid; }
  .voice + .voice { margin-top: 40px; }
}

/* ================================================================ 04 WHAT ARRIVES */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.split .lede + .lede { margin-top: 18px; }
.lede-gap { margin-top: 20px; }
.note-gap { margin-top: 24px; }
.email-panel {
  background: var(--tint); border-radius: var(--r-panel); padding: 28px;
  border: var(--hair);
}
.email-pane {
  max-height: 430px; overflow-y: auto; background: #fff; border-radius: 14px;
  padding: 22px 20px; border: 1px solid #e5e7eb;
}
/* the email is the REAL generated artefact, inline styles and all. Reset what it inherits from
   the page and otherwise do not touch it: hand-editing it would void the only thing that makes
   it evidence. Its own type is its own; the page's 44px/500 rule is about the page. */
.email-sheet { font-size: 14px; line-height: 1.45; color: #1d1d1f; text-align: left; }
.email-sheet * { max-width: 100%; }

@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }

/* ================================================================ 05 HOW IT WORKS */
.head-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.head-split .lede { color: var(--muted); }
.head-split .lede + .lede { margin-top: 16px; }

.siteframe-panel {
  margin-top: 48px; background: var(--tint); border: var(--hair);
  border-radius: var(--r-panel); padding: 34px 34px 0;
}
.siteframe {
  position: relative; background: #fff; border: 1px solid #dfe8e4;
  border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: 0 10px 30px rgba(14, 22, 24, .07);
}
.sf-chrome {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid #edf2f0; background: #fafcfb;
}
.sf-dots { display: flex; gap: 5px; }
.sf-dots i { width: 8px; height: 8px; border-radius: 50%; background: #dfe8e4; display: block; }
.sf-url {
  font-size: 11px; color: var(--muted); background: #f1f5f3; border-radius: 999px;
  padding: 4px 12px;
}
.sf-body { position: relative; height: 210px; padding: 22px 26px; }
.sf-nav { display: flex; gap: 20px; font-size: 11px; color: var(--muted); margin-bottom: 26px; }
.sf-h { height: 13px; width: 46%; border-radius: 7px; background: #e6efeb; margin-bottom: 12px; }
.sf-l { height: 8px; border-radius: 4px; background: #eef4f1; margin-bottom: 9px; }
.sf-l.w1 { width: 62%; } .sf-l.w2 { width: 54%; } .sf-l.w3 { width: 40%; }
.sf-launcher {
  position: absolute; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(13, 124, 86, .28);
}
.sf-launcher svg { width: 22px; height: 22px; fill: #fff; }
.sf-caption { text-align: center; padding: 16px 0 20px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 44px; }
.step-n { font-size: 13px; letter-spacing: .09em; color: var(--accent); margin: 0 0 10px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 14px; line-height: 1.55; color: var(--muted); }

@media (max-width: 900px) {
  .head-split { grid-template-columns: 1fr; gap: 24px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 26px; }
  .siteframe-panel { padding: 20px 20px 0; }
  .sf-body { height: 170px; padding: 18px; }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ================================================================ 06 PICK A LOOK */
.looks { position: relative; }
.looks-head { display: flex; align-items: flex-end; gap: 32px; justify-content: space-between; }
.looks-head .lede { color: var(--muted); max-width: 52ch; margin-top: 16px; }
.arrows { display: flex; gap: 10px; flex: none; padding-bottom: 4px; }
.arrow {
  width: 40px; height: 40px; border-radius: 50%; border: var(--hair); background: var(--card);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.arrow:hover { border-color: var(--ink); }
.arrow svg { width: 16px; height: 16px; display: block; stroke: var(--ink); fill: none; stroke-width: 1.8; }

.looks-viewport { position: relative; margin-top: 26px; }
/* the section fades at its top and bottom edges so it never reads as a block dropped in */
.looks-viewport::before, .looks-viewport::after {
  content: ""; position: absolute; left: 0; right: 0; height: 56px; z-index: 3; pointer-events: none;
}
.looks-viewport::before { top: -2px; background: linear-gradient(var(--page), rgba(241, 247, 245, 0)); }
.looks-viewport::after { bottom: -2px; background: linear-gradient(rgba(241, 247, 245, 0), var(--page)); }

.looks-track {
  display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 22px calc(50% - 186px) 26px; margin: 0; list-style: none;
  scrollbar-width: none; -ms-overflow-style: none;
}
.looks-track::-webkit-scrollbar { display: none; }
.look { flex: none; width: 372px; scroll-snap-align: center; }
html.js .look { opacity: .46; transform: scale(.9); transform-origin: 50% 50%;
  transition: opacity .4s var(--ease), transform .4s var(--ease); }
html.js .look.is-live { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .look { opacity: 1; transform: none; transition: none; }
}
.look-panel {
  border-radius: var(--r-panel); padding: 24px; display: grid; justify-items: center;
  background:
    radial-gradient(120% 78% at 50% 0%, color-mix(in srgb, var(--skin) 20%, #fff) 0%, #fff 72%);
  border: 1px solid color-mix(in srgb, var(--skin) 26%, var(--rule));
}
.look .wf { width: 324px; }
html.js .look .wf { height: 500px; }
.look .wf { min-height: 500px; }
.look-label { text-align: center; margin-top: 14px; }
.look-label h3 { color: var(--ink); }
.look-label p { font-size: 14px; color: var(--muted); }
.looks-hint { text-align: center; margin-top: 4px; }

@media (max-width: 760px) {
  .looks-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .looks-track { padding-inline: calc(50% - 156px); gap: 20px; }
  .look { width: 312px; }
  .look .wf { width: 276px; }
}

/* ================================================================ 07 PRICES */
.vat-toggle { margin: 34px 0 0; display: flex; justify-content: center; }
.seg {
  display: inline-flex; align-items: center; gap: 3px; margin: 0; padding: 3px;
  border: var(--hair); border-radius: 999px; background: var(--card);
}
.seg legend { float: left; padding: 0 12px 0 8px; line-height: 32px; font-size: 13px; color: var(--muted); }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg label { font-size: 13px; padding: 7px 16px; border-radius: 999px; color: var(--muted); cursor: pointer; user-select: none; }
.seg input:checked + label { background: var(--accent); color: #fff; }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
/* CSS only, so it works with JavaScript off. Both figures are in the HTML at first byte. */
html:has(#vat-inc:checked) [data-ex] { display: none !important; }
html:has(#vat-inc:checked) [data-inc] { display: inline !important; }

.tiers-wrap {
  margin: 40px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px;
  /* the right edge fades while there is more table to the right: an affordance, not a sentence */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
}
@media (min-width: 1100px) { .tiers-wrap { -webkit-mask-image: none; mask-image: none; } }
.tiers { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 14px; text-align: left; }
.tiers th, .tiers td { vertical-align: top; padding: 12px 18px; border-bottom: var(--hair); }
.tiers thead th { border-bottom: 1px solid var(--ink); padding-top: 0; font-weight: 400; }
.tiers th[scope="row"] { width: 19%; min-width: 160px; padding-left: 0; font-weight: 400; color: var(--body); }
.tiers .tier { background: var(--card); width: 20%; }
.tiers .tier.is-featured { background: #fff; box-shadow: inset 2px 0 0 var(--accent); }
.tier-tag {
  display: inline-block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.tier-name { display: block; font-size: 18px; font-weight: 500; color: var(--ink); }
.tier-for { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.row-price td { padding-top: 18px; padding-bottom: 18px; }
.was { color: var(--muted); margin-right: 8px; }
.now { font-size: 26px; font-weight: 500; color: var(--ink); display: inline-block; }
.now small { font-size: 14px; font-weight: 400; color: var(--muted); }
.per { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.tick { color: var(--accent); }
.no { color: var(--muted); }
.fn-mark { color: var(--accent); text-decoration: none; display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; margin: -4px 0 -4px -2px; }
.row-cta td { border-bottom: 0; padding-top: 22px; }
.footnotes { margin: 28px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 96ch; }
.footnotes li + li { margin-top: 6px; }

/* ================================================================ 08 GET IN TOUCH */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-sub { font-size: 18px; color: var(--muted); margin-top: 10px; }
.contact-grid .lede { margin-top: 20px; max-width: 52ch; }
.contact-cta { margin-top: 26px; }
.contact-lines { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 14px; }
.contact-lines a { display: inline-flex; align-items: center; min-height: 28px; }
.contact-form { display: grid; gap: 16px; background: var(--card); border: var(--hair); border-radius: var(--r-panel); padding: 28px; }
.field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.field input, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--page);
  border: var(--hair); border-radius: 10px; padding: 11px 13px; width: 100%;
}
.field textarea { resize: vertical; }
.turnstile-slot {
  border: 1px dashed var(--rule); border-radius: 10px; padding: 12px 14px;
  font-size: 12px; color: var(--muted);
}
.form-note { font-size: 13px; color: var(--muted); }
.contact-form .btn { justify-self: start; }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ================================================================ 09 QUESTIONS */
.qa-list { margin-top: 36px; border-top: var(--hair); }
.qa { border-bottom: var(--hair); }
.qa > summary {
  display: flex; align-items: center; gap: 20px; justify-content: space-between;
  padding: 16px 4px; cursor: pointer; list-style: none;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary h3 { font-weight: 400; font-size: 18px; color: var(--ink); }
.qa-chev { flex: none; width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.6;
  transition: transform .25s var(--ease); }
.qa[open] .qa-chev { transform: rotate(180deg); }
.qa .answer { padding: 0 40px 20px 4px; max-width: 84ch; }
.qa .answer p + p { margin-top: 14px; }
.more-link { font-size: 15px; display: inline-flex; align-items: center; min-height: 28px; }
.qa-more { margin-top: 26px; }

/* ================================================================ FOOTER */
.foot { padding: 56px 0 40px; background: var(--card); }
.foot-top { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.foot img { height: 26px; width: auto; display: block; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a { font-size: 14px; color: var(--body); text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; }
.foot-links a:hover { text-decoration: underline; }
.foot-legal { margin-top: 32px; padding-top: 26px; border-top: var(--hair); font-size: 13px; line-height: 1.7; color: var(--muted); max-width: 92ch; }
.foot-legal p + p { margin-top: 10px; }

/* ---------------------------------------------------------------- the fixed Get in contact button
   Bottom LEFT. The live widget's launcher is bottom RIGHT, so the two never collide, at any width.
   Correctly placed with no JavaScript at all; JS only lifts it above the footer's rule. */
.fixed-cta {
  position: fixed; left: 24px; bottom: 24px; z-index: 55;
  box-shadow: 0 6px 22px rgba(14, 22, 24, .16);
  will-change: transform;
}
@media (max-width: 560px) { .fixed-cta { left: 16px; bottom: 16px; height: 42px; padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { .fixed-cta { transition: none; } }
html.js .fixed-cta { transition: transform .25s var(--ease); }

/* ================================================================ inner pages */
.page-head { padding: 72px 0 44px; border-bottom: var(--hair); }
.page-head h1 { max-width: 22ch; }
.page-head .lede { margin-top: 18px; color: var(--muted); max-width: 62ch; }
.prose { max-width: 68ch; padding: 56px 0; }
.prose h2 { margin: 40px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 10px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose blockquote { margin: 0 0 16px; padding: 0; }
.headshot { width: 200px; height: 200px; border-radius: 50%; display: block; margin: 0 0 28px; }
.faq-group { padding: 44px 0; border-bottom: var(--hair); }
.faq-group > h2 { margin-bottom: 8px; }
.placeholder {
  border: 1px dashed var(--rule); border-radius: var(--r-panel); padding: 28px;
  color: var(--muted); font-size: 15px;
}

/* ================================================================ THE WIDGET
   Lifted from Website/assets/widget-designer.html's <style> block, which IS the engine's widget
   CSS parameterised. Every variable and data-attribute is set per skin from the settled JSON by
   tools/build.mjs, using the engine's own derivation and contrast gate. Do not restyle it: this
   is the product, not decoration. `.wf` replaces the designer's `.frame` so nothing here can
   collide with the page's own class names. */
.wf {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-frame, 16px);
  background: var(--surface, #fff); color: var(--ink, #1d1d1f);
  font-family: var(--font, Inter, system-ui, sans-serif); font-size: var(--fs, 14px);
  line-height: 1.45; text-align: left;
  box-shadow: 0 0 0 1px rgba(255,255,255,.62), 0 0 0 2px rgba(0,0,0,.62),
              0 14px 44px rgba(0,0,0,.28), var(--glow, 0 0 0 0 transparent);
}
.wf[data-frame=flat]     { box-shadow: 0 0 0 1px var(--line), var(--glow, 0 0 0 0 transparent); }
.wf[data-frame=outlined] { box-shadow: 0 0 0 2px var(--accent), 0 14px 44px rgba(0,0,0,.18), var(--glow, 0 0 0 0 transparent); }
.wf[data-frame=hard]     { border: 0; border-radius: 0; box-shadow: 0 0 0 2px #1d1d1f, 8px 8px 0 0 var(--accent), var(--glow, 0 0 0 0 transparent); }
.wf[data-texture=dots]  { background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px); background-size: 14px 14px; }
.wf[data-texture=grid]  { background-image: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.wf[data-texture=lines] { background-image: repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb, var(--ink) 5%, transparent) 7px 8px); }

.wf .head { padding: 14px 16px; border-bottom: 1px solid var(--line, #e5e7eb); background: var(--head-bg, var(--surface)); color: var(--head-ink, var(--ink)); display: flex; align-items: center; gap: 10px; flex: none; }
.wf .av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: none; align-items: center; justify-content: center; flex: none; }
.wf .av svg { width: 18px; height: 18px; fill: #fff; }
.wf[data-avatar=head] .av, .wf[data-avatar=both] .head .av { display: flex; }
.wf .head .t { min-width: 0; }
.wf .head .t .wname { margin: 0; font-size: calc(var(--fs) + 1px); display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--head-ink, var(--ink)); }
.wf[data-title=upper] .head .t .wname { text-transform: uppercase; letter-spacing: .12em; font-size: calc(var(--fs) - 1px); }
.wf .head .t .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: none; flex: none; }
.wf[data-header=surface] .head .t .dot, .wf[data-header=underline] .head .t .dot { display: inline-block; }
.wf[data-header=underline] .head { border-bottom: 2px solid var(--accent); }
.wf[data-header=gradient] .head { background: linear-gradient(100deg, var(--head-bg), var(--accent)); }
.wf .head .t .wsub { margin: 2px 0 0; font-size: 11px; color: var(--head-muted, var(--muted)); }
.wf .head .t .wsub span { text-decoration: underline; }
.wf .endbtn { text-decoration: none; border: 1px solid var(--head-line, var(--line)); border-radius: 999px; padding: 3px 9px; font-weight: 600; color: var(--head-ink, var(--ink)); }
.wf[data-corners=none] .endbtn { border-radius: 3px; }

.wf .log { flex: 1; overflow: hidden; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; }
html.js .wf .log { overflow-y: auto; }
.wf .line { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.wf .line.me { align-self: flex-end; flex-direction: row-reverse; }
.wf .mav { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: none; flex: none; align-items: center; justify-content: center; margin-bottom: 2px; }
.wf .mav svg { width: 14px; height: 14px; fill: #fff; }
.wf[data-avatar=messages] .line.bot .mav, .wf[data-avatar=both] .line.bot .mav { display: flex; }
.wf[data-layout=stacked] .line, .wf[data-layout=stacked] .line.me { align-self: flex-start; flex-direction: row; max-width: 100%; }
.wf[data-layout=stacked] .msg { border-radius: var(--r-bubble); }
.wf[data-layout=stacked] .who { display: block; }
.wf .who { display: none; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.wf .msg { padding: 9px 12px; border-radius: var(--r-bubble, 14px); line-height: 1.45; }
.wf .msg p { margin: 0; }
.wf .msg p + p { margin-top: 8px; }
.wf .line.bot .msg { background: var(--bot, #f3f4f6); color: var(--bot-ink, var(--ink)); border-bottom-left-radius: var(--r-tail, 4px); }
.wf .line.me  .msg { background: var(--me); color: var(--me-ink, #fff); border-bottom-right-radius: var(--r-tail, 4px); }
.wf[data-bubbles=square] .msg { border-radius: 0 !important; }
.wf[data-bubbles=outlined] .line.bot .msg { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
.wf[data-bubbles=outlined] .line.me  .msg { background: transparent; border: 1.5px solid var(--me); color: var(--ink); }
.wf[data-bubbles=notail] .msg { border-radius: var(--r-bubble) !important; }
.wf .msg strong { font-weight: 600; }
/* The nine widgets are PICTURES of the product: a link inside one goes nowhere, so it is a span
   styled like a link, not an anchor. Nothing inside them is a tab stop or a tap target. */
.wf .msg a, .wf .msg .linkish { color: var(--accent); font-weight: 600; text-decoration: underline; }
.wf .dots { display: inline-flex; gap: 5px; align-items: center; padding: 3px 1px; }
.wf .dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; opacity: .6; }

.wf .bar { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line, #e5e7eb); margin: 0; align-items: center; background: var(--surface); flex: none; }
.wf .msgin { flex: 1; padding: 10px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: var(--r-input, 10px); font-size: var(--fs); background: var(--input-bg, var(--surface)); color: var(--muted); min-width: 0; }
.wf[data-input=underline] .msgin { border: 0; border-bottom: 2px solid var(--line); border-radius: 0; background: transparent; }
.wf[data-input=pill] .msgin { border-radius: 999px; }
.wf[data-input=filled] .msgin { border: 0; background: var(--bot); color: var(--bot-ink, var(--ink)); }
.wf .send { padding: 10px 14px; border: 0; background: var(--send-bg, var(--me)); color: var(--send-ink, var(--me-ink, #fff)); border-radius: var(--r-input, 10px); font-size: var(--fs); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; }
.wf .send svg { width: 18px; height: 18px; display: none; }
.wf[data-send=round] .send { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.wf[data-send=round] .send span, .wf[data-send=icon] .send span { display: none; }
.wf[data-send=round] .send svg, .wf[data-send=icon] .send svg { display: block; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wf[data-send=icon]  .send { background: transparent; color: var(--accent); padding: 0 6px; }
.wf[data-send=ghost] .send { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.wf .powered { font-size: 10px; color: var(--muted); text-align: center; padding: 0 0 6px; background: var(--surface); flex: none; }