/* ============================================================================
   Kineviz restyle — Design D
   ----------------------------------------------------------------------------
   Visual styling and consistency only. No section is added, removed, reordered
   or reworded; no URL changes. Every rule here is a token swap or a
   consistency fix, so this can ship page by page.

   Everything is scoped to  html.kv-restyle  so it can be switched off live for
   comparison. public/js/kv-restyle-toggle.js provides that switch on localhost.

   Loaded AFTER custom.css, which already re-tints Squarespace's colour system
   through five HSL variables. Re-pointing those five is what makes most of the
   page follow without touching markup.

   Baseline measured in a browser on 14 Aug 2026, /, /contact and /platform:
     text colours   8 / 13 / 7      -> target 4
     background     9 / 11 / 6      -> target 3
     corner radii   4 / 7 / 3       -> target 2   (8, 12, 15/0, 16, 20, 50%, 300, 999px in use)
     body sizes     - / 5 / 4       -> target 1   (14, 14.4, 16/24, 16/26.4, 22.3px in use)
     near-black     #1C1A17, #1C1E21, #111111, #000000 all in use -> pick one
   Headline size is NOT changed: it already measures 63.5-64.4px at -1.9px
   tracking, which matches the reference sites.
   ========================================================================== */

html.kv-restyle {
  /* ---- ink ---- */
  --kv-ink:        #1C1A17;   /* all primary text; already the dominant value  */
  --kv-ink-2:      #5A564E;   /* secondary body                                */
  --kv-ink-3:      #8C877D;   /* BORDERS AND ICONS ONLY. Not text: 3.57:1 on white at
                                 12-14px, under the 4.5:1 minimum. The style guide
                                 lists it for "labels, captions" — that is wrong and
                                 this file walked into it three separate times. Small
                                 text uses --kv-ink-2 (7.7:1).                    */

  /* ---- ground ---- */
  --kv-paper:      #FAF8F4;   /* page ground; warm, to match the warm ink      */
  --kv-surface:    #FFFFFF;   /* cards, fields                                 */
  --kv-canvas:     #15171B;   /* hero and graph areas                          */

  /* ---- lines ---- */
  --kv-rule:       #E6E1D6;
  --kv-rule-firm:  #CFC9BB;

  /* ---- the one accent ---- */
  --kv-accent:     #4B3FB8;
  --kv-accent-lit: #6455E0;
  --kv-wash:       #EEECFA;

  /* ---- shape: exactly two ----
     This was the asymmetric 15px/0 corner (rounded top-left and bottom-right,
     square on the other two). It was already in the site's CSS and the style
     guide called it a signature. On review it reads as tilted and fussy, so it
     is replaced by one plain uniform radius. 12px is not arbitrary: it is what
     the contact page's own cards already used before this restyle. */
  --kv-corner:     12px;
  --kv-pill:       999px;

  /* ---- type ---- */
  --kv-body:       1.0625rem;       /* 17px, one size everywhere              */
  --kv-lh:         1.62;
  --kv-measure:    64ch;

  /* ---- space: 4px base ---- */
  --kv-2: 8px;  --kv-4: 16px; --kv-6: 24px;
  --kv-8: 32px; --kv-16: 64px; --kv-24: 96px;
}

/* ---------------------------------------------------------------------------
   1. Re-point Squarespace's colour system.
   custom.css sets these five; overriding them here carries the warm ground and
   the violet accent through every themed block without touching markup.
   ------------------------------------------------------------------------ */
html.kv-restyle, html.kv-restyle body {
  --black-hsl:       36, 9.8%, 10%;      /* ink     #1C1A17 (unchanged)        */
  --white-hsl:       40, 37.5%, 96.9%;   /* paper   #FAF8F4 (was cool #EEF1F4) */
  --lightAccent-hsl: 0, 0%, 100%;        /* surface #FFFFFF                    */
  --darkAccent-hsl:  246, 49%, 48.4%;    /* accent  #4B3FB8 (was neutral ink)  */
  --accent-hsl:      41.2, 24.2%, 87.1%; /* rule    #E6E1D6                    */
}

/* Squarespace's dark sections paint hsla(225,7%,12%) — a BLUE-tinted near-black
   (hue 225) sitting next to the warm ink (hue 36). That is the third of the
   near-identical darks, so it goes to the one canvas value.
   IMPORTANT: --siteBackgroundColor is set PER SECTION, not globally. Light
   sections carry a light value in the same variable (measured on /contact:
   hsla(210,33.3%,98.8%)). Setting it at :root or on .page-section turns every
   light section dark and leaves the dark text on it unreadable. Scope it to the
   dark themes only.
   Only these two render dark, verified by measuring the painted background on
   every section across the site. `black-bold` renders LIGHT here despite its
   name, which is why it is deliberately absent. */
html.kv-restyle .page-section[data-section-theme="dark"],
html.kv-restyle .page-section[data-section-theme="bright-inverse"] {
  --siteBackgroundColor: #15171B;
}

html.kv-restyle body {
  background-color: var(--kv-paper) !important;
  color: var(--kv-ink) !important;
  -webkit-font-smoothing: antialiased;
}

/* Collapse the near-identical near-blacks onto one ink. Four were in use:
   #1C1A17, #1C1E21, #111111, #000000. */
html.kv-restyle body [style*="#111"],
html.kv-restyle .sqs-html-content [style*="color:#000"],
html.kv-restyle .sqs-html-content [style*="color: #000"] { color: var(--kv-ink) !important; }

/* ---------------------------------------------------------------------------
   2. Type — one body size, capped measure, a real micro tier.
   Headline sizes are deliberately untouched.
   ------------------------------------------------------------------------ */
html.kv-restyle body,
html.kv-restyle p,
html.kv-restyle li,
html.kv-restyle .sqs-block-content p,
html.kv-restyle .sqs-html-content p {
  font-size: var(--kv-body) !important;
  line-height: var(--kv-lh) !important;
}

/* Keep the measure readable. Only applies to prose blocks, never to layout. */
html.kv-restyle .sqs-html-content > p,
html.kv-restyle .sqs-html-content > ul,
html.kv-restyle .sqs-html-content > ol { max-width: var(--kv-measure); }

/* Paragraphs had a 0.35rem margin, which is tighter than the new line height
   wants. One step of the space scale reads as deliberate. */
html.kv-restyle .sqs-html-content p { margin: 0 0 var(--kv-4) !important; }
html.kv-restyle .sqs-html-content p:last-child { margin-bottom: 0 !important; }

/* Secondary and helper text step down in colour, not in size. */
html.kv-restyle .sqs-block-form .field .description,
html.kv-restyle .form-item .description,
html.kv-restyle .summary-metadata,
html.kv-restyle figcaption { color: var(--kv-ink-2) !important; }

/* Micro type: a distinct tier for labels and eyebrows. */
html.kv-restyle .sqs-block-form .title,
html.kv-restyle .form-item .title,
html.kv-restyle .field-list .title {
  font-size: .75rem !important;      /* 12px */
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--kv-ink-2) !important;
}
/* The "(required)" marker is an aside, not a shout. */
html.kv-restyle .required, html.kv-restyle .field .required {
  color: var(--kv-ink-2) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Digits that sit in columns should line up. */
html.kv-restyle table td, html.kv-restyle table th {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   3. Shape — exactly two corners.
   Was: 8px, 12px, 15px/0, 16px, 20px, 50%, 300px, 999px.
   Now: 15px 0 15px 0 for surfaces, 999px for anything clickable.
   50% is kept where it is genuinely a circle (avatars, icon buttons).
   ------------------------------------------------------------------------ */
html.kv-restyle .sqs-block-image img,
html.kv-restyle .sqs-block-image .image-block-wrapper,
html.kv-restyle .summary-thumbnail-container img,
html.kv-restyle .summary-item,
html.kv-restyle .sqs-block-form form,
html.kv-restyle .fe-block .sqs-block-html[style*="background"],
html.kv-restyle .page-section .content-wrapper .card {
  border-radius: var(--kv-corner) !important;
  overflow: hidden;
}

html.kv-restyle .sqs-block-button-element,
html.kv-restyle .header-actions .btn,
html.kv-restyle .newsletter-form-button,
html.kv-restyle .form-submit-button,
html.kv-restyle button[type="submit"],
html.kv-restyle input[type="submit"] {
  border-radius: var(--kv-pill) !important;
}

/* The stray 300px and 20px radii come from theme defaults; normalise them. */
html.kv-restyle [style*="border-radius: 300px"],
html.kv-restyle [style*="border-radius:300px"],
html.kv-restyle [style*="border-radius: 20px"],
html.kv-restyle [style*="border-radius:20px"],
html.kv-restyle [style*="border-radius: 12px"],
html.kv-restyle [style*="border-radius:12px"],
html.kv-restyle [style*="border-radius: 8px"],
html.kv-restyle [style*="border-radius:8px"] { border-radius: var(--kv-corner) !important; }

/* ---------------------------------------------------------------------------
   4. Surfaces — separate from the ground instead of floating on it.
   ------------------------------------------------------------------------ */
html.kv-restyle .summary-item,
html.kv-restyle .sqs-block-form form {
  background: var(--kv-surface);
  border: 1px solid var(--kv-rule);
  box-shadow: 0 1px 2px rgba(28, 26, 23, .05);
}

/* ---------------------------------------------------------------------------
   5. The one accent — violet, for interactive things only.
   custom.css had made links and buttons neutral ink, which left nothing on the
   page reading as clickable.
   ------------------------------------------------------------------------ */
/* PROSE links only. An earlier version of this rule used
   `.sqs-block-content a:not(.sqs-block-button-element)`, which at specificity
   (0,4,1) outranked the contact page's own `.kv-cta-btn.kv-primary-btn` (0,2,0)
   and repainted a white button label violet on slate — 1.03:1, invisible.
   Anything that calls itself a button or a CTA styles itself; stay out of it. */
html.kv-restyle .sqs-html-content p a,
html.kv-restyle .sqs-html-content li a,
html.kv-restyle .summary-excerpt a {
  color: var(--kv-accent) !important;
  text-decoration-color: color-mix(in srgb, var(--kv-accent) 35%, transparent);
  text-underline-offset: 2px;
}
html.kv-restyle .sqs-html-content p a:hover,
html.kv-restyle .sqs-html-content li a:hover,
html.kv-restyle .summary-excerpt a:hover {
  color: var(--kv-accent-lit) !important;
  text-decoration-color: currentColor;
}
/* Belt and braces: never touch a self-styled control. */
html.kv-restyle a[class*="btn"],
html.kv-restyle a[class*="button"],
html.kv-restyle a[class*="cta"] { text-decoration: none; }

/* Squarespace's "accent text" utility. custom.css had darkAccent set to ink, so
   every use of this class rendered as plain ink. Pointing darkAccent at violet
   turned those into accent-coloured text — on /contact it made one case-study
   heading violet while its three siblings stayed ink. The accent is reserved
   for interactive things, so headings keep ink. This also means the change is
   visually identical to today for all existing uses. */
html.kv-restyle h1 .sqsrte-text-color--darkAccent,
html.kv-restyle h2 .sqsrte-text-color--darkAccent,
html.kv-restyle h3 .sqsrte-text-color--darkAccent,
html.kv-restyle h4 .sqsrte-text-color--darkAccent,
html.kv-restyle h5 .sqsrte-text-color--darkAccent { color: var(--kv-ink) !important; }
html.kv-restyle .page-section[data-section-theme="dark"] h1 .sqsrte-text-color--darkAccent,
html.kv-restyle .page-section[data-section-theme="dark"] h2 .sqsrte-text-color--darkAccent,
html.kv-restyle .page-section[data-section-theme="bright-inverse"] h1 .sqsrte-text-color--darkAccent,
html.kv-restyle .page-section[data-section-theme="bright-inverse"] h2 .sqsrte-text-color--darkAccent,
html.kv-restyle footer .sqsrte-text-color--darkAccent { color: var(--kv-paper) !important; }

/* The accent only works on light grounds. Measured on the footer, #4B3FB8 on
   #15171B is about 2.2:1 — well under the 4.5:1 minimum. On any dark ground the
   link goes to paper and hover carries the state instead of hue. */
html.kv-restyle footer a,
html.kv-restyle footer .sqs-html-content p a,
html.kv-restyle footer .sqs-block-content a:not(.sqs-block-button-element),
html.kv-restyle .page-section[data-section-theme="dark"] a:not(.sqs-block-button-element),
html.kv-restyle .page-section[data-section-theme="bright-inverse"] a:not(.sqs-block-button-element) {
  color: var(--kv-paper) !important;
  text-decoration-color: color-mix(in srgb, var(--kv-paper) 40%, transparent);
}
html.kv-restyle footer a:hover,
html.kv-restyle footer .sqs-block-content a:not(.sqs-block-button-element):hover,
html.kv-restyle .page-section[data-section-theme="dark"] a:not(.sqs-block-button-element):hover,
html.kv-restyle .page-section[data-section-theme="bright-inverse"] a:not(.sqs-block-button-element):hover {
  color: #FFFFFF !important;
  text-decoration-color: currentColor;
}
/* Image links wrap logos and thumbnails; they must never take a text colour. */
html.kv-restyle a.sqs-block-image-link { color: inherit !important; }

/* Primary button = the one thing you want them to do. */
html.kv-restyle body .sqs-block-button-element,
html.kv-restyle body .header-actions .btn,
html.kv-restyle body .newsletter-form-button,
html.kv-restyle body .form-submit-button {
  background-color: var(--kv-accent) !important;
  border-color: var(--kv-accent) !important;
  color: #FFFFFF !important;
}
html.kv-restyle body .sqs-block-button-element:hover,
html.kv-restyle body .header-actions .btn:hover,
html.kv-restyle body .newsletter-form-button:hover,
html.kv-restyle body .form-submit-button:hover {
  background-color: var(--kv-accent-lit) !important;
  border-color: var(--kv-accent-lit) !important;
  color: #FFFFFF !important;
}
/* On dark grounds the accent loses contrast, so the button goes to paper. */
html.kv-restyle body footer .sqs-block-button-element,
html.kv-restyle body .page-section[data-section-theme="bright-inverse"] .sqs-block-button-element,
html.kv-restyle body .page-section[data-section-theme="dark"] .sqs-block-button-element {
  background-color: var(--kv-paper) !important;
  border-color: var(--kv-paper) !important;
  color: var(--kv-ink) !important;
}
html.kv-restyle body footer .sqs-block-button-element:hover,
html.kv-restyle body .page-section[data-section-theme="bright-inverse"] .sqs-block-button-element:hover,
html.kv-restyle body .page-section[data-section-theme="dark"] .sqs-block-button-element:hover {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: var(--kv-ink) !important;
}

/* ---------------------------------------------------------------------------
   6. Fields — recede at rest, assert on focus.
   Measured at rest today: a full-contrast ink border on every input, which
   makes a quiet form shout.
   ------------------------------------------------------------------------ */
html.kv-restyle input[type="text"],
html.kv-restyle input[type="email"],
html.kv-restyle input[type="tel"],
html.kv-restyle input[type="number"],
html.kv-restyle textarea,
html.kv-restyle select {
  border: 1px solid var(--kv-rule-firm) !important;
  border-radius: var(--kv-corner) !important;
  background: var(--kv-surface) !important;
  color: var(--kv-ink) !important;
  font-size: var(--kv-body) !important;
  padding: .7em .9em !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html.kv-restyle input[type="text"]:hover,
html.kv-restyle input[type="email"]:hover,
html.kv-restyle textarea:hover,
html.kv-restyle select:hover { border-color: var(--kv-ink-3) !important; }

html.kv-restyle input[type="text"]:focus,
html.kv-restyle input[type="email"]:focus,
html.kv-restyle input[type="tel"]:focus,
html.kv-restyle input[type="number"]:focus,
html.kv-restyle textarea:focus,
html.kv-restyle select:focus {
  border-color: var(--kv-accent) !important;
  box-shadow: 0 0 0 3px var(--kv-wash) !important;
  outline: none !important;
}

/* ---------------------------------------------------------------------------
   6b. Squarespace's NEWER React form block (.react-form-contents), used by the
   form on /spannergraph and present in the markup of all 38 pages.
   It does not style the <input> at all — the input is transparent with a 0.8px
   transparent border — and instead paints the visible field with a decorative
   overlay span, .form-input-effects-*. That span carried a 2px ink border at
   55% opacity and the asymmetric 15px/0 corner, which is why the tilted shape
   survived here after being removed everywhere else. Same treatment as the
   contact form: one uniform corner, one hairline rule, a white fill.
   ------------------------------------------------------------------------ */
html.kv-restyle [class*="form-input-effects"] {
  border: 1px solid var(--kv-rule-firm) !important;
  border-radius: var(--kv-corner) !important;
  background: var(--kv-surface) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html.kv-restyle .field:hover [class*="form-input-effects"] { border-color: var(--kv-ink-3) !important; }
html.kv-restyle .field:focus-within [class*="form-input-effects"] {
  border-color: var(--kv-accent) !important;
  box-shadow: 0 0 0 3px var(--kv-wash) !important;
}

/* The form's block wrapper was a 2px ink box at 15px radius — the hard dark
   rectangle around the whole form. It is a surface like any other.
   MUST be scoped with :has(form). `.website-component-block` is a generic
   Squarespace class on every content block on the page: styling it bare put a
   bordered card around the headline, the subhead, the bullet list and the
   product image on /spannergraph. */
html.kv-restyle .website-component-block:has(form) {
  border: 1px solid var(--kv-rule) !important;
  border-radius: var(--kv-corner) !important;
  background: var(--kv-surface) !important;
  box-shadow: none !important;
}

/* Bitter is INHERITED by this form's whole subtree: form, .field-list,
   fieldset, .field, <legend> and div.title all sit on it, because custom.css
   sets Open Sans on a list of elements (p, li, span, input, textarea, select)
   rather than letting it inherit. The result was "First Name (required)" in
   slab serif next to "EMAIL" in sans — two label styles in one form. */
html.kv-restyle form,
html.kv-restyle form *,
html.kv-restyle legend,
html.kv-restyle fieldset,
html.kv-restyle .field-list,
html.kv-restyle .field,
html.kv-restyle .form-item { font-family: 'Open Sans', sans-serif !important; }

/* One label tier, not two. <legend> was 16px sentence case while div.title next
   to it was 12px uppercase; both now read as the same micro-label. ink-2, not
   ink-3 — see the token comment. */
html.kv-restyle form legend,
html.kv-restyle form .title {
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--kv-ink-2) !important;
}
html.kv-restyle form .description,
html.kv-restyle form .caption-text { color: var(--kv-ink-2) !important; }

/* ---------------------------------------------------------------------------
   7. Focus — one visible ring on every control, keyboard only.
   ------------------------------------------------------------------------ */
html.kv-restyle a:focus-visible,
html.kv-restyle button:focus-visible,
html.kv-restyle .sqs-block-button-element:focus-visible,
html.kv-restyle input:focus-visible,
html.kv-restyle textarea:focus-visible,
html.kv-restyle select:focus-visible,
html.kv-restyle [tabindex]:focus-visible {
  outline: 2px solid var(--kv-accent) !important;
  outline-offset: 2px !important;
  border-radius: var(--kv-pill);
}
/* On dark sections the violet ring disappears, so it goes to paper. */
html.kv-restyle .page-section[data-section-theme="bright-inverse"] a:focus-visible,
html.kv-restyle .page-section[data-section-theme="dark"] a:focus-visible,
html.kv-restyle footer a:focus-visible {
  outline-color: var(--kv-paper) !important;
}

/* ---------------------------------------------------------------------------
   8. Section rhythm — real boundaries read as boundaries.
   ------------------------------------------------------------------------ */
html.kv-restyle .page-section > .content-wrapper {
  padding-top: var(--kv-24);
  padding-bottom: var(--kv-24);
}
@media (max-width: 767px) {
  html.kv-restyle .page-section > .content-wrapper {
    padding-top: var(--kv-16);
    padding-bottom: var(--kv-16);
  }
}

/* ---------------------------------------------------------------------------
   9. Motion — fast, few, and never gating content.
   ------------------------------------------------------------------------ */
html.kv-restyle a,
html.kv-restyle .sqs-block-button-element { transition-duration: .15s !important; }

@media (prefers-reduced-motion: reduce) {
  html.kv-restyle *,
  html.kv-restyle *::before,
  html.kv-restyle *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   10. Borrowed from apple.com, measured on 14 Aug 2026 rather than recalled:
        nav        rgba(255,255,255,.8) + backdrop-filter saturate(1.8) blur(20px),
                   44px tall, border-bottom 0px
        grounds    #F5F5F7 / #FFFFFF / #000000, alternating
        dividers   ZERO full-width rules anywhere on the page
        body       17px
   What is deliberately NOT copied: Apple's #F5F5F7 is a cool grey (hue 240).
   The Kineviz ink is warm (hue 36), and a cool ground under warm ink is the
   exact mismatch this restyle set out to remove. So the *pattern* is borrowed
   (near-white neutral, alternating tiles, no rules, blurred nav) and the hue
   stays warm.
   ------------------------------------------------------------------------ */

/* (a) No rules between sections. The site's full-width <hr> blocks take their
   colour from the section theme, so the same divider renders ink-black on one
   section and beige on the next. Apple uses none: a change of ground plus
   whitespace is the boundary. These are decorative blocks, so hiding them
   changes no content and no layout. */
html.kv-restyle .sqs-block-horizontalrule hr,
html.kv-restyle .sqs-block-horizontalrule .sqs-block-content hr { display: none !important; }

/* (b) The nav bar. It was painted #E2E0DA — the LINE colour used as a
   background, which is what made it read as a muddy band. Translucent paper
   with a blur, and no bottom rule.
   EXCEPT where the header sits over the hero. Squarespace marks that with
   `.nav-over-hero` (the homepage). There the bar is transparent and the nav
   text is WHITE, so painting it paper leaves white-on-cream — which is exactly
   what an earlier version of this rule did. Those headers are left untouched. */
html.kv-restyle .header:not(.nav-over-hero) {
  background-color: color-mix(in srgb, var(--kv-paper) 94%, transparent) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: none !important;
}
/* There is no drop shadow on this bar and never was — measured box-shadow:none
   on .header, .header-inner, the wrapper and .header-border. What reads as one
   is the frosted edge of the blur: at 78% opacity, page content showed through
   and smeared under the bar. Raising it to 94% keeps the depth cue without the
   halo. Shadow is pinned to none so nothing reintroduces it. */
html.kv-restyle .header,
html.kv-restyle .header-inner,
html.kv-restyle .header-announcement-bar-wrapper { box-shadow: none !important; }

/* The actual drop shadow. Squarespace ships a dedicated element for it,
   `.header-dropshadow`, carrying `box-shadow: #1C1A17 0 12px 12px` — a FULLY
   OPAQUE ink shadow, not a translucent one. It is not a border and not on
   .header, which is why scanning those two kept coming back clean. */
html.kv-restyle .header-dropshadow {
  box-shadow: none !important;
  display: none !important;
}

/* The black line between sections. Squarespace's section-divider feature draws
   it as `outline: 2.7px #1C1A17` on a ZERO-HEIGHT full-width div — an outline
   on a 0px box renders as one hard rule. Again: not a border, not an <hr>,
   which is why the earlier passes missed it. It is switched on for the landing
   page sections and off everywhere else, so the site had exactly one page with
   hard rules between sections. Whitespace does the separating instead. */
html.kv-restyle .section-divider-block,
html.kv-restyle .section-divider-display {
  outline: 0 !important;
  display: none !important;
}
/* No line under the header. Apple measures 0px; the site had a 1px ink rule,
   and pointing darkAccent at violet had turned it into a violet rule. */
html.kv-restyle .header-border { border-bottom: 0 !important; border-top: 0 !important; }

/* (c) The dropdown panels. They were still painting #E6E1D6 — the same muddy
   beige the bar was carrying, because both came from the rule token. They now
   match the bar: near-opaque paper, the site corner, and a soft edge instead of
   a hard one. */
html.kv-restyle .header-nav-folder-content,
html.kv-restyle .header-menu-nav-folder-content,
html.kv-restyle .header-nav-folder {
  background-color: color-mix(in srgb, var(--kv-paper) 96%, transparent) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid var(--kv-rule) !important;
  border-radius: var(--kv-corner) !important;
  box-shadow: 0 6px 20px rgba(28, 26, 23, .10) !important;
  overflow: hidden;
}
html.kv-restyle .header-nav-folder-item a { color: var(--kv-ink) !important; }
html.kv-restyle .header-nav-folder-item a:hover { color: var(--kv-accent) !important; }

/* (d) Section separation: whitespace only, no tone-striping.
   An earlier version of this file alternated light sections to a deeper tint.
   That was dropped for two reasons. It was inert on the landing page anyway
   (that page paints its grounds in .section-border divs, not .section-background,
   so the rule never matched), and it added a SECOND kind of boundary on top of
   the one real one. Sections are now separated by the 96px rhythm alone, which
   is what makes the pages read quiet. Light sections all sit on paper; the only
   hard edge left on the site is the dark hero meeting the page ground, and that
   one is deliberate. */
html.kv-restyle .page-section:not([data-section-theme="dark"]):not([data-section-theme="bright-inverse"]) > .section-background,
html.kv-restyle .page-section:not([data-section-theme="dark"]):not([data-section-theme="bright-inverse"]) > .section-border {
  background-color: var(--kv-paper) !important;
}

/* (d) The contact form was a hard full-contrast ink box at 0px radius. Apple
   would use a quiet card. Same treatment as every other surface here. */
html.kv-restyle .kv-contact-form {
  border: 1px solid var(--kv-rule) !important;
  border-radius: var(--kv-corner) !important;
  background: var(--kv-surface) !important;
  box-shadow: 0 1px 2px rgba(28, 26, 23, .05);
}

/* ---------------------------------------------------------------------------
   11. Leftovers found by auditing the rendered page rather than the source.
   ------------------------------------------------------------------------ */

/* The FAQ block was added later and hard-codes the old cool grey in an inline
   <style>. Higher specificity here, so load order does not matter. */
html.kv-restyle .faq-aeo { background: var(--kv-paper) !important; }
html.kv-restyle .faq-aeo details,
html.kv-restyle .faq-aeo details:first-of-type { border-color: var(--kv-rule) !important; }
html.kv-restyle .faq-aeo .faq-aeo-a { color: var(--kv-ink-2) !important; }
html.kv-restyle .faq-aeo .faq-aeo-a a { color: var(--kv-accent) !important; }
html.kv-restyle .faq-aeo summary { font-size: var(--kv-body) !important; }

/* The contact form was rebuilt as plain markup (no Squarespace classes), so it
   needs its own hooks: .kv-contact-form, .kv-field, .kv-req, .kv-submit.
   NOTE on colour: the style guide lists ink-3 (#8C877D) for labels, but at 12px
   on white that measures 3.4:1 — below the 4.5:1 minimum. Labels take ink-2
   (#5A564E, 7.7:1) instead. The guide needs the same correction. */
/* PRE-EXISTING BUG, not caused by this restyle: custom.css sets Open Sans on
   `p, li, span, input, textarea, select` but never on `label`, so every form
   label on the site renders in Bitter — the slab serif. It is the one place
   besides the dead cookie button where that font actually paints anything.
   Sentence-case labels hid it; uppercasing them made it obvious. */
html.kv-restyle label,
html.kv-restyle .kv-contact-form label,
html.kv-restyle .kv-contact-form .kv-form-legend {
  font-family: 'Open Sans', sans-serif !important;
}

/* Labels are sentence case, not micro-caps. The uppercase-and-tracked tier
   works for a two-word label like "System requirements"; applied to
   "What are you trying to accomplish?" it shouts a whole sentence at the
   reader, which is the opposite of a field label receding. */
html.kv-restyle .kv-contact-form label {
  font-size: .875rem !important;      /* 14px */
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--kv-ink-2) !important;
  display: block;
  margin-bottom: 6px;
}
/* ink-2, NOT ink-3. #8C877D measures 3.57:1 on white at this size — under the
   4.5:1 minimum. This file already documents that trap for labels and I walked
   straight into it again for the "(required)" marker. ink-2 is 7.7:1 and still
   reads as a quiet aside next to the 600-weight label. */
html.kv-restyle .kv-contact-form .kv-req {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--kv-ink-2) !important;
}
html.kv-restyle .kv-contact-form .kv-form-legend {
  font-size: .875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--kv-ink) !important;
}
html.kv-restyle .kv-contact-form button[type="submit"] {
  background: var(--kv-accent) !important;
  border-color: var(--kv-accent) !important;
  color: #FFFFFF !important;
  border-radius: var(--kv-pill) !important;
}
html.kv-restyle .kv-contact-form button[type="submit"]:hover {
  background: var(--kv-accent-lit) !important;
  border-color: var(--kv-accent-lit) !important;
}

/* The contact page's CTA cards were added later with their own palette
   (#2E75B6 blue, #4B5563 slate, #111, #555, #888) and their own three corner
   radii (12px card, 20px badge, 8px button). That is most of the "five button
   shapes on one page" the audit found. Bring them onto the two shapes and the
   one accent without touching their markup or copy. */
html.kv-restyle .kv-cta-card {
  border-radius: var(--kv-corner) !important;
  border-color: var(--kv-rule) !important;
  background: var(--kv-surface) !important;
}
html.kv-restyle .kv-cta-card.kv-primary { border: 2px solid var(--kv-accent) !important; }
html.kv-restyle .kv-cta-badge {
  border-radius: var(--kv-pill) !important;
  background: var(--kv-wash) !important;
  color: var(--kv-accent) !important;
}
html.kv-restyle .kv-cta-btn,
html.kv-restyle .kv-cta-email-display {
  border-radius: var(--kv-pill) !important;
  font-size: .9375rem !important;
}
html.kv-restyle .kv-cta-btn.kv-primary-btn {
  background: var(--kv-accent) !important;
  border-color: var(--kv-accent) !important;
  color: #FFFFFF !important;
}
html.kv-restyle .kv-cta-btn.kv-primary-btn:hover {
  background: var(--kv-accent-lit) !important;
  border-color: var(--kv-accent-lit) !important;
  color: #FFFFFF !important;
}
html.kv-restyle .kv-cta-card h3 { color: var(--kv-ink) !important; }
html.kv-restyle .kv-cta-card p  { color: var(--kv-ink-2) !important; font-size: .9375rem !important; }
html.kv-restyle .kv-cta-step    { color: var(--kv-ink-2) !important; letter-spacing: .13em !important; }

/* ---------------------------------------------------------------------------
   ONE PANEL RECIPE.
   Measured across the site, four unrelated families each invented their own
   panel: .kv-cta-card (1px #e5e5e5, 12px radius, white), .dtx-card (16px, no
   border), .summary-item (hairline, no depth), .faq-aeo details (bottom rule
   only). Different borders, different corners, different depth, same job.

   The recipe: content sits on the page ground with whitespace around it, and a
   panel only becomes a visible surface when it holds an input or is genuinely
   liftable. Everything else loses its chrome. That is the minimal reading and
   it is what makes the shapes consistent — there is only one shape left.
   ------------------------------------------------------------------------ */

/* The boxes stay — an earlier pass stripped them, but the box was never the
   problem; the tilted corner was. Same card, plain uniform radius. */
html.kv-restyle .kv-cta-card,
html.kv-restyle .dtx-card {
  background: var(--kv-surface) !important;
  border: 1px solid var(--kv-rule) !important;
  border-radius: var(--kv-corner) !important;
  box-shadow: none !important;
}
html.kv-restyle .kv-cta-card.kv-primary { border: 1px solid var(--kv-accent) !important; }
html.kv-restyle .kv-cta-badge {
  border-radius: var(--kv-pill) !important;
  background: var(--kv-wash) !important;
  color: var(--kv-accent) !important;
}
/* The 01/02/03 numbering implies a sequence these three are not — they are
   three alternatives, and numbering them is part of what reads as trying too
   hard. Dropping just the number needs the text node split, which CSS cannot
   do, so it stays for now and is only quieted here. Say the word and it becomes
   a three-word HTML edit on /contact. */
html.kv-restyle .kv-cta-step {
  color: var(--kv-ink-2) !important;
  font-size: .75rem !important;
  letter-spacing: .13em !important;
}

/* Surfaces that genuinely are surfaces keep one shape: paper-white, one
   hairline rule, the corner, no shadow.
   ONE box, not three. An earlier version listed the card and the <form> inside
   it in the same rule, so the page rendered a bordered card containing a
   bordered form containing bordered fields — three concentric rounded boxes.
   The card is the surface; the form inside it is not. */
html.kv-restyle .kv-contact-form,
html.kv-restyle .summary-item {
  background: var(--kv-surface) !important;
  border: 1px solid var(--kv-rule) !important;
  border-radius: var(--kv-corner) !important;
  box-shadow: none !important;
}
html.kv-restyle .kv-contact-form form,
html.kv-restyle .sqs-block-form form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* /desktop has its own bespoke family (dtx-*) with a third set of radii:
   16px cards, 10px buttons, 11px icon chips, 14px. Same treatment. */
html.kv-restyle .dtx-card,
html.kv-restyle .dtx-hero-media,
html.kv-restyle .dtx-ic { border-radius: var(--kv-corner) !important; }
html.kv-restyle .dtx-btn { border-radius: var(--kv-pill) !important; }
/* Shape only — the colour is deliberately left alone. The page sets
   `#sections .dtx-btn { color: #1C1A17 !important }`, an ID selector at
   specificity (1,1,0) that beats anything sensible written here (0,3,0).
   Recolouring the background to the accent without winning the text colour
   produced ink on violet at 2.23:1. Normalising shape is safe; normalising
   colour needs the page's own CSS edited, which is not a restyle-only change. */

/* PRE-EXISTING BUG: the logo renders OLIVE GREEN on a number of pages.
   custom.css line 87 carries a rule marked "legacy rules kept from the previous
   skin" that applies `filter: invert(1)` to the header logo on ~18 specific
   Squarespace collection IDs (/about, /partners, /case-studies and others).
   When the logo was a plain dark PNG, inverting it made it light on a dark
   header. The logo is now full colour and those headers are all light
   (`bright header`), so the invert does two wrong things at once: it flips the
   brand indigo #4B3FB8 to olive #B4C047, and it does so on a page where no
   inversion was needed. Live on the site today, independent of this restyle. */
html.kv-restyle .header-title-logo img,
html.kv-restyle .header-title img {
  -webkit-filter: none !important;
  filter: none !important;
}

/* Header nav and action containers carried their own near-black, #1C1E21 — the
   blue-tinted one, found on 37 pages by a full-site scan. `inherit` rather than
   a literal ink: the header is light on most pages and transparent-over-dark on
   the homepage, so the nav must follow whatever the header theme sets rather
   than be pinned to one value. */
html.kv-restyle .header-actions,
html.kv-restyle .header-actions-action,
html.kv-restyle .header-nav-folder-title-text,
html.kv-restyle .header-nav-item > a,
html.kv-restyle .header-nav-folder-title { color: inherit !important; }

/* The skip link is the last 300px radius on the site. It is only visible on
   keyboard focus, but it is still a control, so it takes the pill. */
html.kv-restyle .header-skip-link {
  border-radius: var(--kv-pill) !important;
  background: var(--kv-accent) !important;
  color: #FFFFFF !important;
}

/* ---------------------------------------------------------------------------
   12. OPTIONAL — Bitter for display.
   Bitter is downloaded on every page today and renders exactly one element:
   the dead "Cookie Preferences" button. Either use it or drop the load.
   This block is gated behind a second switch so it can be judged separately.
   ------------------------------------------------------------------------ */
html.kv-restyle.kv-display-serif h1,
html.kv-restyle.kv-display-serif h2,
html.kv-restyle.kv-display-serif .header-title-text {
  font-family: 'Bitter', Georgia, serif !important;
}