/* Klembara Solutions v3, direction A: charcoal and blue, dark first. */

/* Self-hosted Google Sans Flex: one variable file (wght axis) sets every weight
   on the site. The pages preload it, so the URL here must match the preload
   exactly. Licensed under the SIL Open Font License 1.1 (stated in the file's
   own name table). */
@font-face {
  font-family: "Google Sans Flex";
  src: url("/assets/fonts/google-sans-flex-latin-wght.woff2") format("woff2-variations"),
       url("/assets/fonts/google-sans-flex-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --char: #1B1B19;
  --char2: #262623;
  --char3: #33332F;
  --paper: #F2F0EA;
  --paper2: #E8E5DC;
  --card: #FAF9F5;
  --ink: #15161A;
  --body-p: #3E3F43;
  --blue: #0E6FD6;
  --blue-hover: #0B62BF;
  --blue-deep: #0A5CB5;
  --blue-light: #63A8F2;
  --on-blue: #FFFFFF;
  --mut-p: #6B6A64;
  --mut-c: #B9B7AE;
  --on-c: #F2F0EA;
  --sub-c: #D3D1C9;
  --font: "Google Sans Flex", sans-serif;
  --gut: clamp(16px, 4vw, 40px);
  --shadow-card: 0 1px 2px rgba(21, 22, 26, .06), 0 12px 32px -14px rgba(21, 22, 26, .22);
  /* Depth treatment (owner 2026-10-20, "a little less flat"), the recipe from
     mockups/sections.css, used on every plate on the site:
     - light plate: faint vertical tonal fill #FFFFFF to #F7F6F2 (about 3
       percent), a 1px inset top highlight, a contact shadow and an ambient one
     - charcoal plate: fill #262623 to #222220, highlight at .08, black shadows
     - glyph tiles take the contact shadow only; sunken tiles (price lines, the
       integrations tile) take none
     - a hover lift keeps its transform and moves the ambient up one step.
     These fills are the only gradients besides .btn-fill. */
  --plate-fill: linear-gradient(180deg, #FFFFFF 0%, #F7F6F2 100%);
  --plate-fill-dark: linear-gradient(180deg, #262623 0%, #222220 100%);
  --contact: 0 1px 2px rgba(21, 22, 26, .10);
  --contact-dark: 0 1px 2px rgba(0, 0, 0, .40);
  --ambient: 0 24px 48px -24px rgba(21, 22, 26, .28);
  --ambient-lift: 0 30px 56px -26px rgba(21, 22, 26, .34);
  --plate-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--contact), var(--ambient);
  --plate-shadow-lift: inset 0 1px 0 rgba(255, 255, 255, .6), var(--contact), var(--ambient-lift);
  --plate-shadow-dark: inset 0 1px 0 rgba(255, 255, 255, .08), var(--contact-dark), 0 24px 48px -24px rgba(0, 0, 0, .65);
  --plate-shadow-dark-lift: inset 0 1px 0 rgba(255, 255, 255, .08), var(--contact-dark), 0 30px 56px -26px rgba(0, 0, 0, .75);
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--char);
  color: var(--on-c);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
p { margin: 0; }
svg:not(.sprite) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* The skip link lands over the blue header: a white fill with blue words
   (#0A5CB5 on white 6.54:1) and a white ring, so it reads on the blue. */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  background: #FFFFFF; color: var(--blue-deep); padding: 10px 14px; border-radius: 6px;
  font-weight: 500; text-decoration: none;
  box-shadow: 0 2px 8px rgba(10, 40, 80, .25);
}
.skip:focus { top: 12px; }
.skip:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: calc(1200px + 2 * var(--gut));
  margin: 0 auto;
  padding: 0 var(--gut);
}
.wrap-wide { max-width: calc(1300px + 2 * var(--gut)); }

h2 { font-size: clamp(2rem, 1.35rem + 2vw, 3rem); letter-spacing: -0.025em; }

/* Buttons: rectangles, 6px corners */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 6px;
  font: 500 16px/1 var(--font);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease;
}
.btn .b-ar { width: 18px; height: 18px; margin-right: -4px; stroke-width: 2; }
.btn:hover .b-ar, .btn:focus-visible .b-ar { transform: translateX(3px); }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 17px; }
/* Filled button: a quiet tonal fall of light (owner's exception to the
   no-gradient rule), lighter at the top, the base through the middle, darker
   at the bottom, plus a 1px inset top highlight. White on each stop: rest
   #1272D8 4.75, #0E6FD6 4.93, #0B62BF 5.98; hover #1474DB 4.61, #1272D8 4.75,
   #0E68CB 5.44. */
.btn-fill {
  background-color: var(--blue);
  background-image: linear-gradient(180deg, #1272D8 0%, #0E6FD6 50%, #0B62BF 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  color: var(--on-blue);
}
.btn-fill:hover {
  background-color: #1272D8;
  background-image: linear-gradient(180deg, #1474DB 0%, #1272D8 50%, #0E68CB 100%);
}
.btn-outline { color: var(--on-c); background: transparent; box-shadow: inset 0 0 0 1.5px #8F8D85; }
.btn-outline:hover { background: var(--char2); }

/* Header: blue on every page (owner 2026-10-20, for contrast over the paper
   hero). White wordmark and nav (white on #0E6FD6 4.93:1), "Solutions" in
   --wm-accent (#F0F7FF, 4.56:1; #BFDCFA was 3.48), a white Start a project button with blue words, white focus
   rings. The inline mark is inverted: white tile, light blue fold, blue K. */
.site-head {
  --wm-accent: #F0F7FF; color: #FFFFFF;
  /* The same quiet tonal fall as .btn-fill (owner 2026-10-20): lighter at the
     top, the base through the middle, darker at the foot, 1px top highlight.
     White on every stop is 4.75 or better. */
  background-color: var(--blue);
  background-image: linear-gradient(180deg, #1272D8 0%, #0E6FD6 50%, #0B62BF 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.site-head :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.head-row { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; min-height: 44px; }
.brand .mark { display: block; width: 26px; height: 26px; flex: none; }
.brand .mark path { stroke: none; }
.mark-fold { transform-box: view-box; transform-origin: 4.5px 4.5px; }
.wordmark { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; }
.wm-accent { color: var(--wm-accent, var(--blue-light)); }
.head-nav { display: flex; gap: 8px; }
.head-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: #FFFFFF; text-decoration: none; font-weight: 500;
}
/* Hover is a quiet white tint, no underline and nothing animated (owner
   2026-10-20, "not a fan of this hover animation"). */
.head-nav a { border-radius: 6px; }
.head-nav a:hover { background: rgba(255, 255, 255, .14); }
.head-nav a[aria-current="page"] { font-weight: 700; }
/* Start a project: the same shape, a white fill with blue words (#0A5CB5 on
   white 6.54:1), hover a light cut (#0A5CB5 on #EAF3FD 5.84:1). */
.site-head .head-cta { background: #FFFFFF; background-image: none; box-shadow: none; color: var(--blue-deep); }
.site-head .head-cta:hover { background: #EAF3FD; background-image: none; }
/* Between 641 and 760 the three links and the button do not fit beside the
   wordmark (the button ran off the right edge); the nav goes as on phones. */
@media (max-width: 760px) { .head-nav { display: none; } }

/* Quiet text link with the arrow: section heads and beside a button */
.text-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--blue-light); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.text-link .b-ar { width: 18px; height: 18px; stroke-width: 2; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link:hover .b-ar, .text-link:focus-visible .b-ar { transform: translateX(3px); }
.soft .text-link { color: var(--blue-deep); }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; }
.sites-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* Hero */
.hero { background: var(--char); padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 6vw, 72px); }
.hero h1 {
  font-size: clamp(2.35rem, 1rem + 3.9vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
}
.hero-sub {
  margin-top: 26px;
  max-width: 33em;
  font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem);
  line-height: 1.5;
  color: var(--sub-c);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Fact strip: a raised white plate inside the wrap (owner 2026-10-20: the
   charcoal strip "clashes weird" with the blue header). It hangs 40px over
   the hero's lower edge; below that edge the section is paper (a ::before
   ground, so the hero's drawing still shows behind the plate's top), and the
   paper Custom apps section follows. Ink #15161A on the plate's fill
   (#FFFFFF to #F7F6F2) 18.08 to 16.72:1. Cell dividers are the quiet inset
   rgba(21, 22, 26, .08). The hero keeps 40px more bottom padding so the
   drawing still shows under the buttons (style.css loads before hero.css,
   hence the section.hero selector). */
section.hero.hero-field { padding-bottom: calc(clamp(64px, 7vw, 104px) + 40px); }
@media (max-width: 1023px) { section.hero.hero-field { padding-bottom: 216px; } }
.facts { position: relative; z-index: 1; margin-top: -40px; }
.facts::before { content: ""; position: absolute; left: 0; right: 0; top: 40px; bottom: 0; z-index: -1; background: var(--paper); }
/* Four single lines. The grid is a size container so each line's size is
   worked out from its cell width: the longest fact is about 13.2em wide at
   weight 700, so the size never lets a fact wrap. */
.facts-grid {
  list-style: none; container-type: inline-size;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0;
  border-radius: 16px; background: #FFFFFF var(--plate-fill); box-shadow: var(--plate-shadow);
  color: var(--ink);
}
.fact {
  position: relative; padding: 26px 20px 28px;
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
  font-size: min(1.3rem, calc((25cqi - 40px) / 13.4));
}
.fact + .fact { box-shadow: inset 1px 0 0 rgba(21, 22, 26, .08); }

/* Shared numeral tile and price line */
.num {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 6px;
  background: var(--blue); color: var(--on-blue);
  font-weight: 700; font-size: 22px; line-height: 1;
}
.price-line {
  display: inline-block; margin-top: 22px; padding: 10px 14px; border-radius: 6px;
  font-weight: 500;
}

/* Quoting and order software (paper) */
.soft { background: var(--paper); color: var(--ink); padding: clamp(56px, 6vw, 88px) 0; }
.soft-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px 72px; align-items: end; margin-bottom: clamp(32px, 4vw, 48px);
}
.soft-copy > p:not(.price-line) { margin-top: 18px; max-width: 36em; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--body-p); }
.soft .price-line { background: var(--paper2); }
.soft-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.soft-list li { display: flex; align-items: flex-start; gap: 16px; }
.soft-list p { padding-top: 8px; font-weight: 500; line-height: 1.4; text-wrap: balance; }

/* Websites (charcoal) */
.sites { background: var(--char); padding: clamp(56px, 6vw, 88px) 0; }
/* Head (owner 2026-10-20): the copy and the price on the left, the lead line
   with the flow running top to bottom on the right. */
.sites-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px 72px; align-items: start;
}
.sites-head p:not(.big-price) { margin-top: 18px; max-width: 34em; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--sub-c); }
.sites-copy .big-price { margin-top: clamp(28px, 3vw, 40px); }
.sites-head .leads-side { display: block; margin-top: 0; padding-top: 6px; }
.sites-head .leads-side .leads-line { max-width: 26em; }
.sites-head .leads-side .flow { margin-top: 24px; }
/* The flow as a tree at every width: Site form over Your CRM, Slack and
   Outlook side by side under it (the same shape the 608px rule below gives
   the horizontal flow on phones). */
.flow.flow-down {
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 48px 48px 48px;
  column-gap: 6%; row-gap: 34px; max-width: 400px;
}
.flow.flow-down .wires-h { display: none; }
.flow.flow-down .wires-v { display: block; }
.flow.flow-down .n-form, .flow-down .n-crm { grid-column: 1 / -1; justify-self: center; width: 47%; }
.flow.flow-down .n-form { grid-row: 1; }
.flow.flow-down .n-crm { grid-row: 2; }
.flow.flow-down .n-slack { grid-column: 1; grid-row: 3; }
.flow.flow-down .n-mail { grid-column: 2; grid-row: 3; }
.flow.flow-down .node[data-in]::before { left: 50%; top: -3.5px; margin: 0 0 0 -3.5px; }
.flow.flow-down .node[data-out]::after { right: auto; left: 50%; top: auto; bottom: -3.5px; margin: 0 0 0 -3.5px; }
.big-price { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); font-weight: 500; color: var(--sub-c); line-height: 1.1; }
.big-price strong {
  display: block; margin-top: 6px;
  font-size: clamp(4rem, 2.6rem + 4.4vw, 7.25rem); font-weight: 700; letter-spacing: -0.04em; line-height: .95;
  color: var(--blue-light); font-variant-numeric: tabular-nums;
}
.sites-cols {
  list-style: none; margin: clamp(36px, 4vw, 56px) 0 clamp(32px, 3.5vw, 44px); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.sites-cols li {
  padding: 28px 28px 30px; border-radius: 16px; background: var(--char2) var(--plate-fill-dark);
  box-shadow: var(--plate-shadow-dark);
}
.sites-cols li:hover { transform: translateY(-2px); box-shadow: var(--plate-shadow-dark-lift); }
.sites-cols h3 { margin-top: 22px; font-size: 1.4rem; }
.sites-cols p { margin-top: 10px; color: var(--sub-c); }

/* Integrations row (Custom apps): "Can integrate with", then the marks cut
   out on the section ground (no tiles), each with its name under it in small
   muted text, evenly spaced, ending in "and more" at the names' line. */
.integr { margin-top: clamp(36px, 4vw, 52px); }
.int-lead { max-width: 44em; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--body-p); }
.int-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 40px; margin-top: 26px; }
.int-label { flex: none; font-weight: 500; line-height: 28px; color: var(--ink); white-space: nowrap; }
.int-list {
  flex: 1 1 640px; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 18px 8px;
}
.int-list li { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.int-list img { width: 28px; height: 28px; object-fit: contain; }
.int-more { padding-top: 36px; }
.int-name { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--mut-p); }

/* Leads to your CRM (Websites): a small node-and-wire flow on charcoal.
   Grid gaps are percentages so the inline SVG wires (preserveAspectRatio
   none, non-scaling strokes) meet the nodes at any width. */
.leads {
  display: grid; grid-template-columns: minmax(0, 1fr) 560px;
  gap: 28px 72px; align-items: center;
  margin-top: clamp(36px, 4vw, 56px);
}
.leads-line { max-width: 30em; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 500; color: var(--on-c); }
.flow {
  --wire: #75736B; --port: #8F8D85;
  position: relative; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 48px 48px;
  column-gap: 9.2857%; row-gap: 18px;
  width: 100%; max-width: 560px;
}
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wires-v { display: none; }
.wire { fill: none; stroke: var(--wire); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.node {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 48px; min-width: 0; padding: 0 12px 0 9px; border-radius: 10px;
  background: var(--char2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 10px 22px -14px rgba(0, 0, 0, .7);
  color: #ECEAE3; font-size: 14.5px; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.nt { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--char3); color: var(--mut-c); }
.nt svg { width: 18px; height: 18px; }
.nt img { width: 18px; height: 18px; object-fit: contain; }
.node.lit .nt { background: var(--blue); color: var(--on-blue); }
.n-form, .n-crm { grid-row: 1 / 3; align-self: center; }
.n-form { grid-column: 1; }
.n-crm { grid-column: 2; }
.n-slack { grid-column: 3; grid-row: 1; }
.n-mail { grid-column: 3; grid-row: 2; }
.node[data-in]::before, .node[data-out]::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--port);
}
.node[data-in]::before { left: -3.5px; }
.node[data-out]::after { right: -3.5px; }
.pulse {
  position: absolute; left: 0; top: 0; z-index: 2; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--blue-light); opacity: 0; pointer-events: none;
}

/* The drawn screen: built at a fixed design size, scaled to the slot */
.shot-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1100 / 680;
  overflow: hidden;
  border-radius: 14px;
  background: #ECEAE4;
  box-shadow: var(--contact), var(--ambient);
  --s: .8;
}
/* The screen covers the frame's own ground (so its tonal fill would never
   show); the top highlight is drawn on a layer above the screen. */
.shot-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.shot {
  width: 1100px;
  height: 680px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  container: shot / inline-size;
  /* Status colours, used only inside this screen. Each has a base (a fill:
     ribbon, dot, bar), a tint (the ground of a chip or glyph tile) and an ink
     (the word or glyph on its own tint). Ink on tint, measured: act 5.76,
     ok 6.31, wait 6.28, late 5.81, none 7.49. */
  --act: #0E6FD6;  --act-t: #DDE9F8;  --act-i: #0A57AB;
  --ok: #3F8A56;   --ok-t: #DCEDE0;   --ok-i: #245E38;
  --wait: #BF7F18; --wait-t: #F6E7CB; --wait-i: #77490A;
  --late: #C64A3E; --late-t: #F7DEDA; --late-i: #9B2F25;
  --none: #8C8A82; --none-t: #ECEAE4; --none-i: #4A4945;
}
.play-mark { position: absolute; left: 0; top: 40%; width: 1px; height: 1px; pointer-events: none; }

/* App design language (invented data, owner's house style) */
.app {
  --g: #ECEAE4;
  --p: #FDFCFA;
  --sk: #F2F0EB;
  --ink: #1D1E21;
  --ink2: #4A4945;
  --mut: #5F5E59;
  --line: #CFCCC3;
  --rest: 0 1px 2px rgba(29, 30, 33, .06), 0 4px 16px rgba(29, 30, 33, .05);
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  width: 100%; height: 100%;
  background: var(--g);
  color: var(--ink);
  font: 400 13px/1.35 var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  overflow: hidden;
}
.app svg { width: 16px; height: 16px; flex: none; }
.app b { font-weight: 700; }
.app small { font-size: 11.5px; }
.app .mut { color: var(--mut); }
.app .a-sp { flex: 1; }
.app .r { text-align: right; }

/* Charcoal rail: grey glyph tiles, only the current one lit */
.a-rail { background: #262623; color: #D3D1C9; padding: 16px 12px 14px; display: flex; flex-direction: column; gap: 18px; }
.a-slot { width: 36px; height: 36px; border-radius: 9px; background: #33332F; }
.a-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.a-nav li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-weight: 500; font-size: 13.5px; }
.a-nav .gt { background: #3A3A35; color: #B9B7AE; }
.a-nav li em {
  margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700;
  min-width: 22px; padding: 1px 6px; border-radius: 5px; text-align: center;
  background: #3A3A35; color: #D3D1C9;
}
.a-nav li em.late { background: var(--late); color: #FFFFFF; }
.a-nav li.on { background: #3A3A35; color: #FFFFFF; font-weight: 700; }
.a-nav li.on .gt { background: var(--act); color: #FFFFFF; }
.gt {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--sk); color: var(--ink2);
}
.a-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: #30302C; }
.a-user b { display: block; font-size: 12.5px; color: #F2F0EA; }
.a-user small { display: block; color: #B9B7AE; }
.av {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: #4A4A44; color: #F2F0EA; font-size: 11px; font-weight: 700;
}

/* App bar on the ground, no rule under it */
.a-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.a-bar { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 20px; flex: none; }
.a-title { min-width: 0; }
.a-title b { display: block; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.a-title small { display: block; color: var(--mut); font-size: 12px; white-space: nowrap; }
.a-search {
  display: flex; align-items: center; gap: 8px;
  width: 250px; height: 36px; padding: 0 12px; border-radius: 10px;
  background: var(--p); box-shadow: inset 0 0 0 1px var(--line); color: var(--mut);
  white-space: nowrap; overflow: hidden;
}
.a-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 36px; padding: 0 14px; border-radius: 10px;
  background: var(--p); font-weight: 500; white-space: nowrap;
  box-shadow: var(--rest);
}
.a-btn.a-pri { background: var(--act); color: #FFFFFF; font-weight: 700; }

/* The Today board */
.dash {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  padding: 0 20px 20px;
}
.card {
  background: var(--p);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--rest);
  min-width: 0;
}
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.card-h b { font-size: 14px; }

.kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 16px 16px 13px; border-radius: 16px;
  background: var(--p); box-shadow: var(--rest);
}
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--k); }
.k-l { font-size: 12.5px; font-weight: 500; color: var(--mut); white-space: nowrap; }
.k-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; }
.k-n { font-size: 32px; line-height: 1; letter-spacing: -0.02em; }
.k-s { font-size: 13px; font-weight: 500; color: var(--ink2); white-space: nowrap; }

.chart { grid-column: 1; grid-row: 2; }
.c-fig { font-size: 15px; font-weight: 700; }
.c-fig small { margin-right: 8px; font-size: 12px; font-weight: 500; color: var(--mut); }
.plot { display: grid; grid-template-columns: 46px minmax(0, 1fr); }
.y { position: relative; height: 104px; }
.y span { position: absolute; right: 10px; bottom: var(--y); transform: translateY(50%); font-size: 11.5px; line-height: 1; color: var(--mut); }
.bars {
  position: relative; height: 104px;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 18px; padding: 0 8px;
  box-shadow: inset 0 -1.5px 0 #8C8A82;
}
.gl { position: absolute; left: 0; right: 0; bottom: var(--y); height: 1px; background: #E8E5DE; }
.bar { position: relative; }
.bar i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: 3px 3px 0 0; background: #8F8C84; transform-origin: 50% 100%; }
.bar.on i { background: var(--act); }
.months {
  grid-column: 2; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 18px;
  padding: 7px 8px 0; font-size: 11.5px; line-height: 1.2; color: var(--mut); text-align: center;
}
.months .on { color: var(--ink); font-weight: 700; }

.quotes { grid-column: 1; grid-row: 3; min-height: 0; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th { padding: 0 10px 6px; text-align: left; font-size: 11.5px; font-weight: 500; color: var(--mut); white-space: nowrap; }
.tbl th.r { text-align: right; }
.tbl td { height: 40px; padding: 0 10px; vertical-align: middle; white-space: nowrap; }
.tbl td b { font-weight: 500; }
.tbl td.r { font-weight: 500; }
.tbl tbody tr:nth-child(odd) td { background: var(--sk); }
.tbl tbody td:first-child { border-radius: 8px 0 0 8px; }
.tbl tbody td:last-child { border-radius: 0 8px 8px 0; }

/* Status chip: 6px corners, a dot in the base colour, the word in the ink on the tint */
.chip {
  --c: var(--none); --ct: var(--none-t); --ci: var(--none-i);
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border-radius: 6px;
  background: var(--ct); color: var(--ci);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.app .act  { --c: var(--act);  --ct: var(--act-t);  --ci: var(--act-i); }
.app .ok   { --c: var(--ok);   --ct: var(--ok-t);   --ci: var(--ok-i); }
.app .wait { --c: var(--wait); --ct: var(--wait-t); --ci: var(--wait-i); }
.app .late { --c: var(--late); --ct: var(--late-t); --ci: var(--late-i); }

.feed { grid-column: 2; grid-row: 2 / 4; min-height: 0; }
.fd { list-style: none; margin: 0; padding: 0; }
.fd > li { display: grid; grid-template-rows: 1fr; }
.fd > li > div { min-height: 0; overflow: hidden; display: flex; align-items: flex-start; gap: 12px; padding: 15px 0; box-shadow: inset 0 -1px 0 #ECE9E2; }
.fd > li:last-child > div { box-shadow: none; }
.fd .gt { background: var(--ct, var(--sk)); color: var(--ci, var(--ink2)); }
.fd p { margin: 0; min-width: 0; }
.fd p b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.fd p small { display: block; margin-top: 2px; color: var(--mut); }

/* Phone layout of the same app, used when the screen is drawn at phone width */
@container shot (max-width: 600px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .a-rail, .app .hs { display: none !important; }
  .a-bar { height: 60px; padding: 0 14px; gap: 10px; }
  .a-title b { font-size: 17px; }
  .a-btn { padding: 0 12px; }
  .dash { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px 13px 11px; }
  .k-l { font-size: 12px; }
  .k-row { margin-top: 6px; }
  .k-n { font-size: 26px; }
  .card { padding: 12px 13px; }
  .card-h { margin-bottom: 8px; }
  .y, .bars { height: 84px; }
  .plot { grid-template-columns: 40px minmax(0, 1fr); }
  .bars, .months { gap: 0 10px; padding-left: 4px; padding-right: 4px; }
  .tbl td { height: 33px; padding: 0 8px; }
}

/* Paper ground */
.paper { background: var(--paper); color: var(--ink); padding: clamp(56px, 6vw, 88px) 0; }
.tile {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 9px;
  background: var(--blue); color: var(--on-blue);
  box-shadow: var(--contact);
}
.tile svg { width: 22px; height: 22px; }

/* How it works (option 2B, owner pick 2026-10-20), identical on home,
   custom-apps/ and websites/. A charcoal band one step up from the ground
   (#262623), the heading left and a vertical stepper right: a raised rail
   plate behind the discs (blue for 1, grey for 2 and 3), then the white
   promises plate, which hangs 40px past the band's lower edge into the
   section after it. That section is the #1B1B19 ground on every page, so the
   plate sits on an edge, and it takes 40px more top padding to clear it.
   Disc numeral #B9B7AE on #45453F 4.80:1; check glyph #245E38 on #DCEDE0
   6.31:1; items ink on the plate 16.7:1 or better. */
.hiw { background: var(--char2); color: var(--on-c); padding: clamp(56px, 6vw, 96px) 0 0; }
.hiw-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px; align-items: start; }
.hiw-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; }
.hiw-steps::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 64px; border-radius: 16px;
  background: var(--char3) linear-gradient(180deg, #33332F 0%, #2F2F2B 100%);
  box-shadow: var(--plate-shadow-dark);
}
.hiw-steps li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; padding: 12px 0; }
.hiw-steps li + li { padding-top: 22px; }
.hiw-steps li:last-child { padding-bottom: 14px; }
.hiw-disc {
  justify-self: center; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #45453F; color: var(--mut-c);
  font-weight: 700; font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: var(--contact-dark);
}
.hiw-steps li.on .hiw-disc { background: var(--blue); color: #FFFFFF; }
.hiw-steps h3 { padding-top: 6px; font-size: 1.4rem; letter-spacing: -0.015em; text-wrap: balance; }
.hiw-steps p { margin-top: 6px; max-width: 34em; color: var(--sub-c); text-wrap: pretty; }
.hiw-prom {
  position: relative; z-index: 1;
  margin: clamp(40px, 4.4vw, 60px) 0 -40px;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.8vw, 36px);
  border-radius: 16px; background: #FFFFFF var(--plate-fill); box-shadow: var(--plate-shadow);
  color: var(--ink);
}
.hiw-plead { font-weight: 700; }
.hiw-prom ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px; }
.hiw-prom li { display: flex; align-items: center; gap: 12px; font-weight: 500; line-height: 1.3; }
.hiw-ck {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 9px;
  background: #DCEDE0; color: #245E38; box-shadow: var(--contact);
}
.hiw-ck svg { width: 20px; height: 20px; }
/* The section after the band clears the hanging plate. */
.hiw + section { padding-top: calc(40px + clamp(56px, 6vw, 88px)); }


/* Closer */
.closer { background: var(--char); padding: clamp(56px, 5.5vw, 80px) 0 clamp(56px, 5vw, 72px); }
.closer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.closer h2 { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.7rem); line-height: 1.03; letter-spacing: -0.03em; max-width: 11ch; }
.closer-copy .btn { margin-top: 32px; }
.contact-lines { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 14px; }
.contact-lines li { display: flex; align-items: center; gap: 14px; font-size: 1.08rem; color: var(--sub-c); }
.contact-lines a { color: var(--on-c); font-weight: 500; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.contact-lines a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-lines b { color: var(--on-c); font-weight: 700; }
.contact-lines .tile { background: var(--char3); color: var(--blue-light); box-shadow: var(--contact-dark); }

.form-card {
  display: grid; gap: 18px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 16px;
  background: var(--char2) var(--plate-fill-dark);
  box-shadow: var(--plate-shadow-dark);
}
.form-card:hover { transform: translateY(-2px); box-shadow: var(--plate-shadow-dark-lift); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.f-field { display: grid; gap: 8px; }
.f-field > span, .f-choice legend { font-size: 15px; font-weight: 500; color: var(--on-c); }
.form-card input[type="text"], .form-card input[type="email"], .form-card textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid #7A786F; border-radius: 6px;
  background: var(--char); color: var(--on-c);
  font: 400 16px/1.4 var(--font);
}
.form-card textarea { min-height: 100px; resize: vertical; }
.form-card input:focus, .form-card textarea:focus { outline: 2px solid var(--blue-light); outline-offset: 1px; border-color: var(--blue-light); }
.f-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.f-choice legend { padding: 0; margin-bottom: 8px; }
.choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.choices label { position: relative; display: block; }
.choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choices span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 6px 10px; border-radius: 6px;
  background: var(--char3); color: var(--on-c); font-weight: 500; line-height: 1.2;
}
.choices input:checked + span { background: var(--blue); color: var(--on-blue); }
.choices input:focus-visible + span { outline: 3px solid var(--blue-light); outline-offset: 2px; }
.f-send { display: flex; align-items: center; gap: 20px; }
.f-send .btn { flex: none; min-width: 120px; }
.form-note { font-size: 14px; line-height: 1.45; color: var(--mut-c); }
.form-status { font-size: 14px; color: var(--sub-c); }
.form-status:empty { display: none; }
.form-status p { margin: 0; }
.form-status p + p { margin-top: 6px; }
.form-status a { color: var(--blue-light); font-weight: 500; text-underline-offset: 3px; }
.form-card .btn:disabled { opacity: .7; cursor: progress; }
.form-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Sent: the form card holds one line in place of the fields. */
.form-card .form-done {
  position: relative; padding: 16px 20px 16px 26px; border-radius: 10px;
  background: var(--char3); color: var(--on-c); font-weight: 500; line-height: 1.45;
}
.form-card .form-done p { margin: 0; }
.form-card .form-done::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 2px 2px 0; background: var(--blue-light); }
.form-card .form-done:focus { outline: 3px solid var(--blue-light); outline-offset: 3px; }

/* Footer */
.site-foot { background: var(--char2); padding: 40px 0 24px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px 40px; }
.foot-brand { display: flex; align-items: center; gap: 14px; align-self: start; }
.foot-brand img { width: 40px; height: 40px; flex: none; }
.foot-brand p { font-size: 1.05rem; }
.foot-brand b { font-weight: 700; }
.foot-col h2 { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--mut-c); margin-bottom: 6px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col.site ul { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 0 28px; justify-content: start; }
.foot-col a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; overflow-wrap: anywhere; }
.foot-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-base { margin-top: 24px; }
.foot-base p { padding-top: 20px; border-top: 1px solid #3B3B37; font-size: 14px; color: var(--mut-c); }

/* Entry motion: two showpieces only, entry only, never scroll linked */
@media (prefers-reduced-motion: no-preference) {
  .js .facts-grid .fact {
    transition: opacity .5s ease calc(var(--i) * 150ms), transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 150ms);
  }
  .js .facts-grid:not(.in) .fact { opacity: 0; transform: translateY(14px); }

  /* The dashboard plays through once on entry, then rests. The markup holds
     the finished state; only these rules (and app.js) hold parts back. */
  .js .shot-frame[data-play] .bar i { transition: transform .45s cubic-bezier(.2, .7, .2, 1) calc(100ms + var(--i) * 60ms); }
  .js .shot-frame[data-play]:not(.in) .bar i { transform: scaleY(0); }
  .js .shot-frame[data-play] .tbl tbody tr {
    transition: opacity .25s ease calc(150ms + var(--i) * 80ms), transform .25s cubic-bezier(.2, .7, .2, 1) calc(150ms + var(--i) * 80ms);
  }
  .js .shot-frame[data-play]:not(.in) .tbl tbody tr { opacity: 0; transform: translateY(6px); }
  .js .shot-frame[data-play] .fd .fresh { transition: grid-template-rows .34s cubic-bezier(.2, .7, .2, 1), opacity .25s ease .06s; }
  .js .shot-frame[data-play] .fd .fresh > div { transition: transform .34s cubic-bezier(.2, .7, .2, 1), padding .34s cubic-bezier(.2, .7, .2, 1); }
  .js .shot-frame[data-play]:not(.done) .fd .fresh { grid-template-rows: 0fr; opacity: 0; }
  .js .shot-frame[data-play]:not(.done) .fd .fresh > div { transform: translateY(-8px); padding-top: 0; padding-bottom: 0; }
  .js .chip.flip { animation: chip-flip .22s cubic-bezier(.2, .7, .2, 1); }

  /* Integration marks fade and lift in, 40ms apart. */
  .js .int-list li {
    transition: opacity .4s ease calc(var(--i) * 40ms), transform .5s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 40ms);
  }
  .js .int-list:not(.in) li { opacity: 0; transform: translateY(10px); }
  .text-link .b-ar { transition: transform .2s cubic-bezier(.2, .7, .1, 1); }

  /* Lead flow wires draw in left to right; app.js then runs one dot along
     each wire and lights the node it reaches. Over by 2.35s, never loops. */

  /* Small motion: header mark folds its corner once, buttons nudge, cards lift */
  .js .brand .mark-fold { animation: mark-fold .3s cubic-bezier(.3, .7, .2, 1) .2s both; }
  .btn .b-ar { transition: transform .2s cubic-bezier(.2, .7, .1, 1); }
  .sites-cols li, .form-card { transition: transform .18s ease, box-shadow .18s ease; }

  /* Staggered rise, entry only: the children of a .rise list (or a
     .rise-self element itself) fade and lift in once, --i apart. Animation
     with backwards fill, so nothing holds a transform once it has arrived. */
  .js .rise:not(.in) > *, .js .rise-self:not(.in) { opacity: 0; }
  .js .rise.in > *, .js .rise-self.in { animation: rise .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 90ms) backwards; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.no-anim .rise > *, .no-anim .rise-self { animation: none !important; opacity: 1 !important; }
@keyframes chip-flip { from { transform: scale(.86); } to { transform: none; } }
@keyframes mark-fold {
  from { transform: rotate(45deg) scaleX(-1) rotate(-45deg); }
  to { transform: rotate(45deg) scaleX(1) rotate(-45deg); }
}

/* Responsive */
@media (max-width: 960px) {
  .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { font-size: min(1.3rem, calc((50cqi - 40px) / 13.4)); }
  .fact:nth-child(3) { box-shadow: inset 0 1px 0 rgba(21, 22, 26, .08); }
  .fact:nth-child(4) { box-shadow: inset 1px 0 0 rgba(21, 22, 26, .08), inset 0 1px 0 rgba(21, 22, 26, .08); }

  .soft-head, .sites-head { grid-template-columns: minmax(0, 1fr); }
  .int-list { flex-basis: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 600px; }
  .sites-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hiw-grid { grid-template-columns: minmax(0, 1fr); }
  .hiw-prom ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closer-grid { grid-template-columns: minmax(0, 1fr); }
  .closer h2 { max-width: 14ch; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  .leads { grid-template-columns: minmax(0, 1fr); }
}

/* Below 609px the 560px flow no longer fits: it turns to a vertical tree,
   Site form over Your CRM, with Slack and Email side by side under it. */
@media (max-width: 608px) {
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 48px 48px 48px;
    column-gap: 6%; row-gap: 34px; max-width: 400px;
  }
  .wires-h { display: none; }
  .wires-v { display: block; }
  .n-form, .n-crm { grid-column: 1 / -1; justify-self: center; width: 47%; }
  .n-form { grid-row: 1; }
  .n-crm { grid-row: 2; }
  .n-slack { grid-column: 1; grid-row: 3; }
  .n-mail { grid-column: 2; grid-row: 3; }
  .node[data-in]::before { left: 50%; top: -3.5px; margin: 0 0 0 -3.5px; }
  .node[data-out]::after { right: auto; left: 50%; top: auto; bottom: -3.5px; margin: 0 0 0 -3.5px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .head-row { gap: 12px; min-height: 64px; }
  .head-nav { display: none; }
  .brand { gap: 10px; }
  .wordmark { font-size: 17px; }
  .head-cta { padding: 0 14px; font-size: 15px; }
  .hero-sub { margin-top: 18px; }
  .hero-actions { margin-top: 26px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero h1 { font-size: 2.25rem; }
  .hero { padding-top: 24px; padding-bottom: 40px; }
  /* Two per row: the left column takes its longest fact's width, the right
     one the rest, and the size is set so both fit on one line. */
  .facts-grid { grid-template-columns: max-content minmax(0, 1fr); }
  .facts .wrap { padding: 0 8px; }
  .fact { padding: 16px 12px; font-size: min(1.1rem, calc((100cqi - 48px) / 24.4)); }
  .soft, .sites, .paper, .closer { padding-top: 56px; padding-bottom: 56px; }
  .soft-list { gap: 12px; }
  .soft-list .tile { width: 38px; height: 38px; }
  .soft-list p { padding-top: 6px; }
  .int-row { margin-top: 22px; gap: 14px; }
  .int-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; }
  .int-name { font-size: 12.5px; }
  .shot-frame { aspect-ratio: 400 / 640; --s: .8575; }
  .shot { width: 400px; height: 640px; }
  .sites-cols li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: center; padding: 20px 18px 22px; }
  .sites-cols .num { width: 40px; height: 40px; font-size: 20px; }
  .sites-cols h3 { margin-top: 0; font-size: 1.25rem; }
  .sites-cols p { grid-column: 1 / -1; margin-top: 12px; }
  .sites .btn { width: 100%; }
  .hiw { padding-top: 56px; }
  .hiw-grid { gap: 28px; }
  .hiw-steps::before { width: 52px; }
  .hiw-steps li { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .hiw-disc { width: 36px; height: 36px; font-size: 16px; }
  .hiw-steps h3 { padding-top: 4px; font-size: 1.25rem; }
  .hiw-prom { margin-top: 36px; padding: 20px 18px; }
  .hiw-prom ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hiw + section { padding-top: 96px; }
  .site-foot { padding-top: 32px; }
  .f-row { grid-template-columns: minmax(0, 1fr); }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-send { flex-direction: column; align-items: stretch; }
  .closer-copy .btn { width: 100%; margin-top: 24px; }
  .contact-lines { margin-top: 24px; gap: 6px; }
  .form-card { gap: 16px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .foot-col.site ul { gap: 0 20px; }
  .foot-col a { min-height: 44px; }
}

.no-anim .facts-grid .fact, .no-anim .facts-grid .fact::before, .no-anim .shot-frame *, .no-anim .int-list li, .no-anim .flow .wire { transition: none !important; animation: none !important; }

/* What $650 covers, then the hosting line, under the websites price: muted
   (#B9B7AE on charcoal 8.58:1). p.host-line outranks the
   `.sites-head p:not(.big-price)` rule above, which used to win here. */
.sites-head p.host-line { margin-top: 14px; max-width: 30em; font-size: 1rem; line-height: 1.45; color: var(--mut-c); }
.sites-head p.host-line + p.host-line { margin-top: 6px; }