/* Carenetic design system
   Foundations, chrome and shared components. One file, one place to change a value.
   Composition that exists on a single page stays in that page. */

/* @font-face: generated from assets/fonts/fonts.css by scripts/perf/fetch-fonts.mjs --sync-css. Do not edit. */
/* Self-hosted copies of the Google Fonts Archivo + Newsreader variable fonts.
   Generated by scripts/perf/fetch-fonts.mjs from:
   https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&display=swap
   Axis ranges trimmed by scripts/perf/instance-fonts.py (descriptors left as published).
   Do not edit by hand; re-run both scripts. */
/* Archivo italic vietnamese (from archivo/v25/k3kSo8UDI-1M0wlSfdzYI2HEEaM.woff2) */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Archivo italic latin-ext (from archivo/v25/k3kSo8UDI-1M0wlSfdzYImHEEaM.woff2) */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo italic latin (from archivo/v25/k3kSo8UDI-1M0wlSfdzYLGHE.woff2) */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo normal vietnamese (from archivo/v25/k3kQo8UDI-1M0wlSfdboLnnA.woff2) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Archivo normal latin-ext (from archivo/v25/k3kQo8UDI-1M0wlSfdfoLnnA.woff2) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo normal latin (from archivo/v25/k3kQo8UDI-1M0wlSfdnoLg.woff2) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader italic vietnamese (from newsreader/v26/cY9CfjOCX1hbuyalUrK439vCgYhCFpY.woff2) */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/newsreader-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Newsreader italic latin-ext (from newsreader/v26/cY9CfjOCX1hbuyalUrK439vCgIhCFpY.woff2) */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/newsreader-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader italic latin (from newsreader/v26/cY9CfjOCX1hbuyalUrK439vCjohC.woff2) */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader normal vietnamese (from newsreader/v26/cY9AfjOCX1hbuyalUrK439HyjJBG.woff2) */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/newsreader-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Newsreader normal latin-ext (from newsreader/v26/cY9AfjOCX1hbuyalUrK439DyjJBG.woff2) */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/newsreader-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader normal latin (from newsreader/v26/cY9AfjOCX1hbuyalUrK4397yjA.woff2) */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/newsreader-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* @font-face: end */

:root {
  --ground: #FCFCFB;
  --ground-alt: #F3F3F1;
  --raised: #FFFFFF;
  --sunk: #EEEEEB;
  --surface-dark: #1A1A35;
  --surface-dark-2: #232345;
  --border-dark: #31315A;
  --text: #000000;
  --text-dim: #4E4F66;
  --text-faint: #696A82;
  --text-invert-dim: #8E92B4;
  --text-invert: #C6C9E0;
  --peri-300: #7C9BE0;
  --peri-500: #4A76D2;
  --peri-600: #3A5FB5;
  --peri-700: #2F4C93;
  --peri-wash: #EEF1FB;
  --card-hover: #E8EDFB;
  --card-hover-val: #FBE6E1;
  --val-500: #E54C39;
  --val-600: #C43A28;
  --val-700: #A93122;
  --val-tint: #FCEDE9;
  --line: rgba(0,0,0,0.10);
  --sev-crit: #E9503C;
  --sev-high: #E9A13B;
  --sev-med: #7C9BE0;
  --sev-low: #8E92B4;
  --line-2: rgba(0,0,0,0.16);
  /* Form-control borders only. --line-2 is 1.45:1 against the page, and a control's
     boundary needs 3:1 (WCAG 2.2 1.4.11). Dividers keep --line-2: they are decoration,
     and 1.4.11 does not apply to them. */
  --field-line: #86879C;
  --radius: 4px;
  --ease-settle: cubic-bezier(.4, 0, 0, 1);
  --shadow-card: 0 1px 0 rgba(0,0,0,0.05), 0 14px 34px rgba(0,0,0,0.06);
  --measure: 620px;
  --disp: "Archivo", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --measure-display: 860px;
  --sev-crit-ink: #ED6C5B;
  --sev-low-ink: #9EA2C2;
  /* The arc glyph: the ripple's geometry at marker scale, carried as a mask so the
     colour comes from whatever sets it. Three nested left-facing arcs, the same shape
     the ripple grounds draw at section scale and the mark draws inside its diamond. */
  --arc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M22 15A9 9 0 0 0 22 33'/%3E%3Cpath d='M22 8A16 16 0 0 0 22 40'/%3E%3Cpath d='M22 1.5A22.5 22.5 0 0 0 22 46.5'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--disp);
    background: var(--ground);
    color: var(--text);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 44px; }
.display {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 55px;
    line-height: 1.07;
    letter-spacing: -0.011em;
    color: var(--text);
  }
.h2 {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 37px;
    line-height: 1.14;
    letter-spacing: -0.008em;
    color: var(--text);
    max-width: var(--measure);
  }
.h3 {
    font-stretch: 108%;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.003em;
    color: var(--text);
  }
.tone { color: var(--peri-600); font-style: italic; }
.on-dark .display, .on-dark .h2, .on-dark .h3 { color: #fff; }
.on-dark .tone { color: var(--peri-300); }
.sub { font-size: 19px; line-height: 1.6; color: var(--text-dim); }
.on-dark .sub { color: var(--text-invert); }
.on-dark .body-copy, .on-dark .lede { color: var(--text-invert); }
.on-dark .body-copy strong { color: #fff; }
.body-copy { font-size: 17px; line-height: 1.66; color: var(--text-dim); }
.body-copy strong { color: var(--text); font-weight: 700; }
.lede { font-size: 18px; line-height: 1.6; color: var(--text-dim); max-width: var(--measure); }
.on-dark .eyebrow { color: var(--peri-300); }
.on-dark .eyebrow::before { background: var(--peri-300); }
a.textlink {
    color: var(--val-700);
    text-decoration: underline;
    text-decoration-color: rgba(169,49,34,0.35);
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    font-weight: 600;
  }
a.textlink:hover { text-decoration-color: var(--val-700); }
.on-dark a.textlink { color: var(--peri-300); text-decoration-color: rgba(124,155,224,0.4); }
.on-dark a.textlink:hover { text-decoration-color: var(--peri-300); }
.btn {
    display: inline-block;
    font-family: var(--disp);
    font-stretch: 100%;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.005em;
    padding: 14px 30px;
    border-radius: var(--radius);
    text-decoration: none;
    color: #fff;
    background: var(--val-600);
    transition: background .15s ease;
  }
.btn:hover { background: var(--val-700); }
.btn-peri { background: var(--peri-600); }
.btn-peri:hover { background: var(--peri-700); }
.cta-zone { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.after-btn { margin-top: 0; font-size: 16px; color: var(--text-dim); }
.on-dark .after-btn { color: var(--text-invert); }
.note { margin-top: 26px; font-size: 15px; line-height: 1.55; color: var(--text-faint); }
.on-dark .note { color: var(--text-invert-dim); }
.slab {
    padding: 4px 0 0;
    position: relative;
    text-align: center;
  }
.slab-num {
    font-stretch: 112%; font-weight: 600;
    font-size: 60px; line-height: 1; letter-spacing: -0.02em;
    color: var(--text); font-variant-numeric: tabular-nums;
  }
.slab-num .unit { font-size: 26px; color: var(--peri-600); font-weight: 600; letter-spacing: 0; vertical-align: middle; }
.slab-lead .slab-num { font-size: 60px; }
.slab-label { margin-top: 12px; font-size: 15px; line-height: 1.4; color: var(--text-dim); }
.skip-link {
    position: absolute; top: -100%; left: 16px; z-index: 200;
    background: var(--surface-dark); color: #fff; padding: 10px 18px;
    border-radius: var(--radius); text-decoration: none; font-weight: 600;
  }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--peri-500); outline-offset: 3px; border-radius: 3px;
  }
.on-dark a:focus-visible { outline-color: var(--peri-300); }
.rv, .rv-child { opacity: 1; }
html.motion .rv, html.motion .rv-child { opacity: 0; transform: translateY(6px); will-change: opacity, transform; }
html.motion .rv.in, html.motion .rv-child.in {
    opacity: 1; transform: none;
    transition: opacity .26s var(--ease-settle) var(--rvd,0ms),
                transform .26s var(--ease-settle) var(--rvd,0ms);
  }
html.motion .rule-el::before { transform: scaleX(0); }
html.motion .rule-el.in::before { transform: scaleX(1); transition: transform .3s ease .08s; }
.site-nav { background: var(--surface-dark); position: relative; z-index: 50; }
.site-nav .wrap {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 44px; position: relative;
  }
.nav-logo { height: 35px; width: auto; display: block; }
.nav-logo .mark { fill: var(--peri-300); }
.nav-logo .word { fill: #fff; }
.nav-links { display: flex; align-items: center; gap: 30px; align-self: stretch; margin-left: auto; }
.nav-links a {
    color: var(--text-invert); text-decoration: none;
    font-size: 16px; font-weight: 500; letter-spacing: 0.002em;
    transition: color .15s ease;
  }
.nav-links a:hover { color: #fff; }
.nav-links a.btn { color: #fff; }
.nav-links a.btn:hover { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 14px; margin-left: 30px; }
.nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; cursor: pointer;
  }
.nav-toggle .bars { position: relative; display: block; width: 22px; height: 2px; background: #fff; transition: background .18s ease; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #fff;
    transition: transform .22s var(--ease-settle);
  }
.nav-toggle .bars::before { top: -7px; }
.nav-toggle .bars::after { top: 7px; }
.site-nav.open .nav-toggle .bars { background: transparent; }
.site-nav.open .nav-toggle .bars::before { transform: translateY(7px) rotate(45deg); }
.site-nav.open .nav-toggle .bars::after { transform: translateY(-7px) rotate(-45deg); }
.hero { background: var(--surface-dark); padding: 76px 0 66px; position: relative; overflow: hidden; }

/* The conversion hero. The three pages that ask for something (Contact and the two
   free offers) sit the headline lower and give the form more room beneath it. */
.hero-conv { padding: 66px 0 74px; }

.hero-grid {
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px;
    align-items: center; position: relative; z-index: 2;
  }
.hero .sub { margin-top: 24px; }
.hero .cta-zone { margin-top: 32px; }
.hero-photo-stage { position: relative; }
.hero-diamond {
    position: absolute; z-index: 0;
    width: 300px; height: 300px; background: var(--peri-500);
    transform: rotate(45deg);
    top: -46px; right: -60px;
    -webkit-mask-image: linear-gradient(to top left, #000 34%, transparent 80%);
    mask-image: linear-gradient(to top left, #000 34%, transparent 80%);
  }
.hero-photo-slab {
    position: relative; z-index: 1; background: var(--surface-dark-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.34);
  }
.hero-photo-slab img { width: 100%; height: 452px; object-fit: cover; display: block; }
/* BugHerd #5: the band sat on --sunk between two other light greys and got scrolled past.
   Moved onto the dark surface, the same one .close-cta uses, so the testimonial reads as a
   deliberate stop rather than another grey step. */
.quote-band { background: var(--surface-dark); padding: 84px 0; position: relative; overflow: hidden; }
.quote-band figure { max-width: 44rem; position: relative; z-index: 2; }
.quote-band .quote-mark { width: 44px; height: 44px; margin-bottom: 22px; display: block; }
.quote-band .quote-mark path { fill: var(--peri-500); }
.quote-band .said {
    font-family: var(--serif); font-optical-sizing: auto;
    font-size: 29px; line-height: 1.4; font-style: normal; font-weight: 400;
    letter-spacing: -0.004em; color: #fff;
  }
.quote-band .quote-mark path { fill: var(--peri-300); }
.quote-band .who { margin-top: 26px; font-size: 15px; font-weight: 700; color: #fff; }
.quote-band .who span { display: block; font-weight: 500; color: var(--text-invert); margin-top: 3px; }
.close-cta { background: var(--surface-dark); padding: 92px 0 86px; position: relative; overflow: hidden; }
.close-cta > .wrap { position: relative; z-index: 1; }
.lattice-bg {
    position: absolute; left: 0; right: 0; top: -240px; bottom: -240px; pointer-events: none; z-index: 0; will-change: transform;
    background-image:
      repeating-linear-gradient(45deg, rgba(124,155,224,0.14) 0 1px, transparent 1px 46px),
      repeating-linear-gradient(-45deg, rgba(124,155,224,0.14) 0 1px, transparent 1px 46px);
    -webkit-mask-image: radial-gradient(150% 130% at 78% 30%, #000 0%, rgba(0,0,0,0.6) 58%, transparent 98%);
    mask-image: radial-gradient(150% 130% at 78% 30%, #000 0%, rgba(0,0,0,0.6) 58%, transparent 98%);
  }

/* ─── Ripple. The family's kinetic ground ─────────────────────────────────────
   BugHerd 482648 #206 (31111944) asked for something kinetic to break the flat
   grey, and #199 (31111777) named this field as the element to use more of, so
   the motif is the one already in the kit rather than a new invention: it is what
   replaced the ghost mark as the device on every dark ground.

   A static arc field, and four rings travelling out of the same off-canvas origin
   at 84%/12%. Transform and opacity only, so the rings stay on the compositor:
   no paint, no layout, no per-frame JavaScript. carenetic.js parks them with
   .rest when the section is off screen or the tab is hidden.

   The host section must be position: relative and overflow: hidden. The rings are
   wider than the viewport by design and the section is what crops them. */
.ripple-bg {
    position: absolute; left: 0; right: 0; top: -240px; bottom: -240px;
    pointer-events: none; z-index: 0; will-change: transform;
    background-image: repeating-radial-gradient(circle at 84% 12%, rgba(124,155,224,0.14) 0 1.5px, transparent 1.5px 64px);
    -webkit-mask-image: radial-gradient(150% 130% at 80% 20%, #000 0%, rgba(0,0,0,0.55) 55%, transparent 96%);
    mask-image: radial-gradient(150% 130% at 80% 20%, #000 0%, rgba(0,0,0,0.55) 55%, transparent 96%);
  }
/* Thick and faint, the way the legacy site's rings were, rather than thin and bright.
   A 2px line has to reach about 0.4 alpha before it reads as motion, and 0.14 is where
   the dimmest text on this ground (--text-invert-dim at 13px) drops under 4.5:1. A 20px
   band reads at 0.10, under the static field's own 0.14, so the travel costs no contrast
   anywhere. The border scales with the ring, so it also starts thin and thickens as it
   goes, which is what makes it look like a wave rather than a growing circle. */
.ripple-bg span {
    position: absolute; left: 84%; top: 12%;
    width: 1240px; height: 1240px; margin: -620px 0 0 -620px;
    border: 20px solid var(--peri-300);
    border-radius: 50%;
    opacity: 0; transform: scale(0.14);
    animation: ripple-out 21s linear infinite;
  }
.ripple-bg span:nth-child(2) { animation-delay: -5.25s; }
.ripple-bg span:nth-child(3) { animation-delay: -10.5s; }
.ripple-bg span:nth-child(4) { animation-delay: -15.75s; }
/* The band is brightest around the middle of its run, which is where it is big enough to
   actually cross the section. Peaking early put the brightness on a ring still small
   enough to sit off frame behind the origin. */
@keyframes ripple-out {
  0%   { transform: scale(0.14); opacity: 0; }
  20%  { opacity: 0.055; }
  52%  { opacity: 0.10; }
  84%  { opacity: 0.045; }
  100% { transform: scale(1); opacity: 0; }
}
/* Off screen and in a hidden tab the rings cost nothing. Four pages carry their own
   copy of this rule for their own scenes; this one covers every page. */
.rest, .rest *, .rest *::before, .rest *::after { animation-play-state: paused !important; }
/* The still is four parked rings rather than an empty ground, so reduced motion
   gets the same picture without the travel. */
@media (prefers-reduced-motion: reduce) {
  .ripple-bg span { animation: none; opacity: 0.085; }
  .ripple-bg span:nth-child(1) { transform: scale(0.30); }
  .ripple-bg span:nth-child(2) { transform: scale(0.52); }
  .ripple-bg span:nth-child(3) { transform: scale(0.74); opacity: 0.07; }
  .ripple-bg span:nth-child(4) { transform: scale(0.95); opacity: 0.055; }
}

/* ─── Arc marker ──────────────────────────────────────────────────────────────
   BugHerd #205 (31111934) and the second half of #203 (31111883): the 3px side
   rule is out, on this site and the next one. This is what marks those blocks
   instead, so a flagged list reads in the same motif as the ground behind it. */
.arc-marker { position: relative; padding-left: 34px; }
.arc-marker::before {
    content: ""; position: absolute; left: 0; top: 0.2em;
    width: 15px; height: 30px; background: var(--peri-500);
    -webkit-mask: var(--arc-glyph) no-repeat center / contain;
    mask: var(--arc-glyph) no-repeat center / contain;
  }
.on-dark .arc-marker::before { background: var(--peri-300); }
/* The close is the page's one symmetric moment. A centred column gives the
     heading, the line under it and the buttons a single measure, and the equal
     margins are the design rather than a leftover. */
  .close-cta .cta-col { max-width: var(--measure); margin: 0 auto; text-align: center; }
.close-cta .sub { margin-top: 20px; }
.close-cta .cta-zone { margin-top: 32px; justify-content: center; }
.footer { background: var(--surface-dark); padding: 58px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.footer .nav-logo { height: 30px; margin-bottom: 16px; }
.foot-line { color: var(--text-invert-dim); font-size: 15px; line-height: 1.5; }
.foot-head { color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 15px; }
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 9px; }
.foot-col a { color: var(--text-invert); text-decoration: none; font-size: 15px; transition: color .15s ease; }
.foot-col a:hover { color: #fff; }
.footer-note {
    margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--border-dark);
    color: var(--text-invert-dim); font-size: 14px;
    display: flex; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap;
  }
/* BugHerd 482648 #99: bolder and white so it outranks the copyright line opposite it. */
.foot-made {
    display: inline-flex; align-items: center; gap: 10px;
    color: #fff; font-weight: 600; font-size: 15px;
  }
.foot-made .cactus { width: 17px; height: 17px; flex: none; color: var(--peri-300); }
/* ===== Website Support ===== */

  .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;
  }
/* Interior hero, inherited from Services. */
  .display-int { font-size: 47px; }
.crumb {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--text-invert-dim); margin-bottom: 22px;
  }
.crumb a { color: var(--text-invert); text-decoration: none; }
.crumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.crumb .sep { width: 5px; height: 5px; background: var(--border-dark); transform: rotate(45deg); flex: none; }
/* --- Responsive tail. Last in the sheet so it wins on order, not on weight. --- */
/* Stacked footer links, and the secondary link under a closing band's button, are
   targets rather than prose. The 24px floor is a target-size rule, not a phone rule,
   so it applies at every width. These were scoped to the phone breakpoint on 8-19 and
   left an 18px and a 19px target standing on desktop. Padding on an inline link grows
   the hit box and moves nothing. */
.foot-col a, .after-btn .textlink { padding: 4px 0; }
/* A breadcrumb link is a navigation target, not a word in a sentence, so it takes
   the 24px floor. Padding grows the hit box and the negative margin keeps the row
   the same height it was. */
.crumb a { padding: 4px 0; margin: -4px 0; }
.faq-item + .faq-item { border-top: 1px solid var(--line); }

/* Comparison marker. The site has no icon library, so a table cell that means yes,
   no or partly says so in the one icon idiom the site does have: stroked, round
   capped, 1.7 weight, sized to the text beside it. The state is carried in text
   for a screen reader, because a mark alone announces as nothing. */
.mk { width: 16px; height: 16px; vertical-align: -3px; fill: none;
      stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mk-yes  { color: var(--peri-600); }
.mk-no   { color: var(--text-faint); }
.mk-part { color: var(--sev-high); }

/* ===== Form states =====
   Submission feedback for the four real forms. Shared because they appear on 21 pages
   (contact, the two offers, and the newsletter on 18 insights routes), and the kit's rule is
   that anything on more than one page lives here rather than being copied into each.

   The rule these styles exist to satisfy: a failure has to be perceivable without colour.
   Every error state below pairs its colour with a text message, and the summary takes focus,
   so a screen reader announces it and a keyboard user lands on it. */

/* The honeypot. Off-screen rather than display:none, because a bot that skips hidden fields
   would otherwise skip this one too, which is the opposite of what it is for. Out of the
   tab order and out of the accessibility tree, so a person never reaches it either way. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.form-status {
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid var(--field-line);
  border-left-width: 3px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.55;
  background: var(--raised);
}
.form-status:focus-visible { outline: 3px solid var(--peri-500); outline-offset: 2px; }
.form-status[hidden] { display: none; }
.form-status .fs-title { font-weight: 600; }
.form-status ul { margin: 8px 0 0; padding-left: 20px; }
.form-status li + li { margin-top: 4px; }
.form-status a { color: inherit; }
.form-status.is-error { border-color: var(--val-700); background: var(--val-tint); color: var(--val-700); }
.form-status.is-ok { border-color: var(--peri-600); background: var(--peri-wash); color: var(--peri-700); }
/* In progress, and deliberately the quietest of the three: nothing has gone right or wrong yet.
   It carries text, not just a colour, because that is the only part a screen reader gets. */
.form-status.is-busy { border-color: var(--field-line); background: var(--ground-alt); color: var(--text-dim); }

/* Inline, beneath the control it belongs to, and tied to it with aria-describedby. */
.field-error {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--val-700);
}
.field-error::before { content: "\26A0\FE0E"; margin-right: 6px; }
.field.has-error input,
.field.has-error textarea,
.field.has-error .fbox { border-color: var(--val-700); }

/* Turnstile renders in here on first interaction with the form. No height is reserved: the widget
   brings its own, and reserving it would leave a blank gap on staging, where the test key renders
   an invisible widget. The shift this allows follows a focus or a tap, so it is outside the window
   Lighthouse counts towards CLS. */
.form-check:not(:empty) { margin-top: 24px; }

.btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }