<!-- VINACLES DESIGN SYSTEM 2026 — "Vinacles Statement" bold module restyle
     Head-HTML paste for /nl/test-module. Self-contained. GEN-1 lineage only.
     Palette (strict 4): #FF5200 orange · #056FBB blue · #1e5e9a closing-band blue · #000 · #fff.
     Zero light-blue. No off-palette hex. No external assets, no imported/declared faces, no HubL. -->
<style>
/* ==========================================================================
   0 · TOKENS  (this paste's OWN :root — does not depend on child.css)
   Shadow ramp = the primary depth lever; every box-shadow below also carries
   its full comma-fallback inline so it renders even if a token is stripped.
   ========================================================================== */
:root{
  --vin-space-1:4px;  --vin-space-2:8px;  --vin-space-3:16px; --vin-space-4:24px;
  --vin-space-5:32px; --vin-space-6:48px; --vin-space-7:64px; --vin-space-8:96px; --vin-space-9:128px;
  --vin-content-max:1240px; --vin-prose-max:72ch; --vin-narrow-max:620px; --vin-hero-text-max:520px;
  --vin-gutter-desktop:32px; --vin-gutter-tablet:24px; --vin-gutter-mobile:20px;
  --vin-radius-card:12px; --vin-radius-button:8px; --vin-radius-pill:999px;
  --vin-orange:#FF5200; --vin-blue:#056FBB; --vin-blue-deep:#1e5e9a; --vin-black:#000; --vin-white:#fff;
  --vin-shadow-1:0 1px 2px rgba(0,0,0,.06),0 6px 16px rgba(0,0,0,.10);
  --vin-shadow-2:0 4px 10px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.14);
  --vin-shadow-3:0 10px 22px rgba(0,0,0,.10),0 28px 64px rgba(0,0,0,.18);
  --vin-shadow-contact:0 3px 8px rgba(0,0,0,.20);
  --vin-lift:180ms cubic-bezier(.2,.7,.2,1);
}

/* Full-bleed h-scroll guard. Scoped to the Atlas content wrapper .body-wrapper —
   NOT html/body. Clipping html/body breaks the HubSpot DnD editor (kills module
   select/scroll hit-testing). .body-wrapper is full-width and already contains the
   bands' ~7px breakout overshoot, so it hides the horizontal scroll identically
   while leaving the editor's body scroll/overlay context untouched.
   (overflow-x:clip does NOT coerce overflow-y to auto, so no vertical scroll trap.) */
.body-wrapper{overflow-x:hidden;overflow-x:clip;}

/* ==========================================================================
   1 · TYPE SCALE  (size/line-height/weight/tracking/colour ONLY — faces stay editor-native)
   Oversized display end with dramatic jumps + tight negative tracking. Scoped to
   .body-container so navbar/footer chrome (which render outside it) are untouched.
   Module rules below (card h4, pricing price, offer heading) override where needed.
   ========================================================================== */
.body-container h1{
  font-size:clamp(44px,5.4vw,60px); line-height:1.05; font-weight:800;
  letter-spacing:-0.02em; color:var(--vin-black,#000); margin:0 0 var(--vin-space-4,24px);
}
.body-container h2{
  font-size:clamp(30px,3.4vw,44px); line-height:1.12; font-weight:800;
  letter-spacing:-0.015em; color:var(--vin-black,#000); margin:0 0 var(--vin-space-4,24px);
}
.body-container h3{
  font-size:22px; line-height:1.25; font-weight:700; letter-spacing:0;
  color:var(--vin-blue,#056FBB); margin:0 0 var(--vin-space-3,16px);
}
.body-container p,
.body-container li{
  font-size:18px; line-height:1.6; font-weight:400; color:var(--vin-black,#000);
}
.body-container a:not([class*="button"]){
  color:var(--vin-blue,#056FBB); text-decoration:none;
}
.body-container a:not([class*="button"]):hover,
.body-container a:not([class*="button"]):focus-visible{
  text-decoration:underline;
}
/* Accent keyword span (Carlo/Igor own the <span>; this only colours it). */
.vin-accent{color:var(--vin-orange,#FF5200);}

/* ==========================================================================
   2 · KICKER / EYEBROW SYSTEM  (the anti-templated connective tissue)
   Uppercase #056FBB label, 14/700/0.1em, preceded by a pure-CSS ORANGE TICK
   (no data-URI -> zero brace/HubL risk). On dark bands the label goes white and
   the tick stays orange (a decorative bar, not text).
   ========================================================================== */
.body-container .kl-rich-text__preheader,
.body-container .kl-offer-01__preheader,
.body-container .kl-features-01__preheader,
.body-container .kl-features-02__preheader,
.body-container .kl-hero-02__preheader,
.body-container .kl-card__preheader,
.body-container .kl-featured-card__preheader{
  display:block; text-transform:uppercase; font-size:14px; line-height:1.3;
  font-weight:700; letter-spacing:0.1em; color:var(--vin-blue,#056FBB);
  margin:0 0 var(--vin-space-3,16px);
}
.body-container .kl-rich-text__preheader::before,
.body-container .kl-offer-01__preheader::before,
.body-container .kl-features-01__preheader::before,
.body-container .kl-features-02__preheader::before,
.body-container .kl-hero-02__preheader::before,
.body-container .kl-card__preheader::before,
.body-container .kl-featured-card__preheader::before{
  content:""; display:inline-block; width:24px; height:3px; margin-right:10px;
  vertical-align:middle; background:var(--vin-orange,#FF5200); border-radius:2px;
}
/* Inline hero eyebrow: the <p> immediately before the hero H1 (single-h1 page
   invariant). Higher specificity than the .body-container p rule so it wins. */
.body-container .kl-rich-text p:has(+ h1),
.body-container .widget-type-rich_text p:has(+ h1){
  text-transform:uppercase; font-size:14px; line-height:1.3; font-weight:700;
  letter-spacing:0.1em; margin:0 0 var(--vin-space-3,16px);
}
/* ...and its leading ORANGE TICK, so the hero/page-title eyebrow matches every
   .kl-*__preheader (Maria's "orange tick SITE-WIDE" must-have; the class-less
   rich-text hero eyebrow was the one element missing it). */
.body-container .kl-rich-text p:has(+ h1)::before,
.body-container .widget-type-rich_text p:has(+ h1)::before{
  content:""; display:inline-block; width:24px; height:3px; margin-right:10px;
  vertical-align:middle; background:var(--vin-orange,#FF5200); border-radius:2px;
}

/* ==========================================================================
   3 · BUTTONS  (single source of truth — held FLAT on purpose; pop = fill +
   generous padding + confident colour-swap, never shadow). Scoped to
   .body-container so the navbar SHOP/INLOGGEN buttons are untouched.
   !important used only to beat Atlas's baked orange !important.
   ========================================================================== */
/* 3a. PRIMARY — orange fill, white 700 label, 8px radius, >=44px tall, no shadow. */
.body-container .button:not(.button--outlined):not(.button--arrow),
.body-container .kl-offer-01__button .button:not(.button--arrow){
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:14px 28px;
  background:var(--vin-orange,#FF5200) !important;
  color:var(--vin-white,#fff) !important;
  border:none !important; border-radius:var(--vin-radius-button,8px) !important;
  box-shadow:none !important;
  font-size:16px; font-weight:700; letter-spacing:0.02em; text-decoration:none;
  transition:background-color var(--vin-lift,180ms ease),color var(--vin-lift,180ms ease);
}
.body-container .button:not(.button--outlined):not(.button--arrow) span{
  color:var(--vin-white,#fff) !important;
}
/* Hover on LIGHT surfaces -> swap fill to dark-blue. */
.body-container .button:not(.button--outlined):not(.button--arrow):hover,
.body-container .kl-offer-01__button .button:not(.button--arrow):hover{
  background:var(--vin-blue,#056FBB) !important; color:var(--vin-white,#fff) !important;
}
/* 3b. SECONDARY / OUTLINED — transparent, 2px dark-blue border + label; hover fills. */
.body-container .button.button--outlined{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:12px 26px;
  background:transparent !important; color:var(--vin-blue,#056FBB) !important;
  border:2px solid var(--vin-blue,#056FBB) !important;
  border-radius:var(--vin-radius-button,8px) !important; box-shadow:none !important;
  font-size:16px; font-weight:700; letter-spacing:0.02em;
  transition:background-color var(--vin-lift,180ms ease),color var(--vin-lift,180ms ease);
}
.body-container .button.button--outlined span{color:var(--vin-blue,#056FBB) !important;}
.body-container .button.button--outlined:hover{
  background:var(--vin-blue,#056FBB) !important; border-color:var(--vin-blue,#056FBB) !important;
}
.body-container .button.button--outlined:hover span{color:var(--vin-white,#fff) !important;}
/* 3c. ARROW — left Atlas-NATIVE by design (R2 item 7); only the focus ring reaches it. */
.body-container .button:focus-visible,
.body-container .button--arrow:focus-visible,
.body-container .kl-offer-01__button .button:focus-visible{
  outline:2px solid var(--vin-blue,#056FBB); outline-offset:2px;
}
/* CTA-group rhythm. */
.body-container .kl-rich-text__buttons{
  margin-top:var(--vin-space-5,32px); display:flex; flex-wrap:wrap; gap:var(--vin-space-3,16px);
}

/* ==========================================================================
   4 · RICH TEXT  (DELIBERATELY FLAT — running copy is not a physical object;
   depth on text reads cheap). Excludes the hero (:not(:has(h1))) so the hero
   file owns H1/lead. Prose 72ch; H2/H3 from the type scale; accent keyword.
   ========================================================================== */
.body-container .kl-rich-text:not(:has(h1)) .kl-rich-text__text > p,
.body-container .widget-type-rich_text:not(:has(h1)) .hs_cos_wrapper_type_rich_text > p{
  max-width:var(--vin-prose-max,72ch);
}
.kl-rich-text--center{text-align:center;}
.kl-rich-text--center .kl-rich-text__buttons{justify-content:center;}
/* Checkmark lists — dark-blue drawn check on a real <ul> marker. */
.body-container .kl-rich-text ul,
.body-container .widget-type-rich_text ul{
  list-style:none; padding-left:0; margin:var(--vin-space-3,16px) 0;
}
.body-container .kl-rich-text ul li,
.body-container .widget-type-rich_text ul li{
  position:relative; padding-left:28px; margin-bottom:12px; line-height:1.6;
}
.body-container .kl-rich-text ul li::before,
.body-container .widget-type-rich_text ul li::before{
  content:""; position:absolute; left:0; top:0.45em; width:14px; height:8px;
  border-left:2px solid var(--vin-blue,#056FBB); border-bottom:2px solid var(--vin-blue,#056FBB);
  transform:rotate(-45deg);
}

/* ==========================================================================
   5 · FEATURE CARDS  (.kl-features-01) — the shared card primitive
   White, NO decorative border, 12px radius, REST on --vin-shadow-2 (the fix for
   the invisible shadow-1). Hover -> --vin-shadow-3 + translateY(-6px); :active =
   a real press. ONE orange element per card = a bold 52px orange ICON CHIP that
   sits PROUD of the card face on its own --vin-shadow-contact. Centered flex +
   matched-specificity !important basis (beats GEN-1; never CSS grid).
   ========================================================================== */
.kl-features-01{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:var(--vin-space-5,32px); color:var(--vin-black,#000);
}
.kl-features-01 .kl-features-01__card{
  flex:0 1 calc((100% - 2 * var(--vin-space-5,32px)) / 3) !important;
  max-width:calc((100% - 2 * var(--vin-space-5,32px)) / 3);
  min-width:0; margin:0 !important;
}
.kl-features-01 > .kl-features-01__preheader{flex:1 0 100%;}
.kl-features-01__card{
  display:flex; flex-direction:column; background:var(--vin-white,#fff);
  border:none; border-radius:var(--vin-radius-card,12px);
  box-shadow:var(--vin-shadow-2,0 4px 10px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.14));
  padding:var(--vin-space-6,48px);
  transition:box-shadow var(--vin-lift,180ms ease),transform var(--vin-lift,180ms ease);
}
.kl-features-01__card:hover{
  box-shadow:var(--vin-shadow-3,0 10px 22px rgba(0,0,0,.10),0 28px 64px rgba(0,0,0,.18));
  transform:translateY(-6px);
}
.kl-features-01__card:active{
  transform:translateY(-2px);
  box-shadow:var(--vin-shadow-2,0 4px 10px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.14));
}
.kl-features-01__card h4{
  margin:0 0 12px; font-size:22px; line-height:1.25; font-weight:700; color:var(--vin-blue,#056FBB);
}
.kl-features-01__card p{
  margin:0 0 var(--vin-space-3,16px); font-size:18px; line-height:1.6; color:var(--vin-black,#000);
}
.kl-features-01__card p:last-child{margin-bottom:0;}
/* The proud orange chip (a floating tile on a floating card). */
.kl-features-01__image{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:10px; background:var(--vin-orange,#FF5200);
  margin-bottom:var(--vin-space-3,16px);
  box-shadow:var(--vin-shadow-contact,0 3px 8px rgba(0,0,0,.20)); overflow:hidden;
}
.kl-features-01__image img{max-width:26px; max-height:26px; box-shadow:none; filter:brightness(0) invert(1);}
.kl-features-01__image svg{width:26px; height:26px; fill:var(--vin-white,#fff);}

/* ==========================================================================
   6 · ICON FEATURE CARDS  (.kl-features-02) — same primitive + proud chip
   ========================================================================== */
.kl-features-02{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:var(--vin-space-4,24px);
}
.kl-features-02__card{
  flex:1 1 280px; max-width:380px; display:flex; flex-direction:column;
  background:var(--vin-white,#fff); border:none; border-radius:var(--vin-radius-card,12px);
  box-shadow:var(--vin-shadow-2,0 4px 10px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.14));
  padding:var(--vin-space-5,32px);
  transition:box-shadow var(--vin-lift,180ms ease),transform var(--vin-lift,180ms ease);
}
.kl-features-02__card:hover{
  box-shadow:var(--vin-shadow-3,0 10px 22px rgba(0,0,0,.10),0 28px 64px rgba(0,0,0,.18));
  transform:translateY(-6px);
}
.kl-features-02__card:active{
  transform:translateY(-2px);
  box-shadow:var(--vin-shadow-2,0 4px 10px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.14));
}
.kl-features-02__card-header{display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:12px;}
.kl-features-02__image{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:10px; background:var(--vin-orange,#FF5200);
  box-shadow:var(--vin-shadow-contact,0 3px 8px rgba(0,0,0,.20)); overflow:hidden;
}
.kl-features-02__image svg{width:26px; height:26px; fill:var(--vin-white,#fff);}
.kl-features-02__image img{max-width:26px; max-height:26px; filter:brightness(0) invert(1);}
.kl-features-02__card-header h4{font-size:20px; line-height:1.25; font-weight:700; color:var(--vin-blue,#056FBB); margin:0;}
.kl-features-02__card p{font-size:18px; line-height:1.6; color:var(--vin-black,#000); margin:0;}

/* ==========================================================================
   7 · CARD GRID  (.kl-card-grid, incl. --4-columns) — primitive + lift.
   ONE orange mark here = a 4px orange TOP KEYLINE (image cards carry no chip).
   Cover image bleeds flush to the top corners.
   ========================================================================== */
.kl-card-grid > div{display:flex; flex-wrap:wrap;}
.kl-card-grid__card-wrapper{display:flex; box-sizing:border-box; flex:1 1 260px;}
.kl-card-grid--4-columns .kl-card-grid__card-wrapper{flex-basis:23%;}
.kl-card-grid__card,
.kl-card{
  display:flex; flex-direction:column; width:100%; background:var(--vin-white,#fff);
  border:none; border-top:4px solid var(--vin-orange,#FF5200);
  border-radius:var(--vin-radius-card,12px); overflow:hidden;
  box-shadow:var(--vin-shadow-2,0 4px 10px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.14));
  transition:box-shadow var(--vin-lift,180ms ease),transform var(--vin-lift,180ms ease);
}
.kl-card-grid__card:hover,
.kl-card:hover{
  box-shadow:var(--vin-shadow-3,0 10px 22px rgba(0,0,0,.10),0 28px 64px rgba(0,0,0,.18));
  transform:translateY(-6px);
}
.kl-card-grid__card:active,
.kl-card:active{
  transform:translateY(-2px);
  box-shadow:var(--vin-shadow-2,0 4px 10px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.14));
}
.kl-card-grid__image{display:block; min-height:180px; background-size:cover; background-position:center;}
.kl-card-grid__content,
.kl-card__content{padding:28px;}
.kl-card-grid__content h3,
.kl-card__content h3{font-size:20px; line-height:1.3; font-weight:700; color:var(--vin-blue,#056FBB); margin:0 0 10px;}
.kl-card-grid__content p,
.kl-card__content p{font-size:16px; line-height:1.6; color:var(--vin-black,#000);}
.kl-card-grid__content a:not(.button),
.kl-card__content a:not(.button){color:var(--vin-blue,#056FBB); font-weight:600;}

/* ==========================================================================
   8 · PRICING  (.kl-pricing) — deterministic equal-height row; CTA sinks to
   the bottom. Non-featured = white, --vin-shadow-2, STATIC. FEATURED = the ONE
   winner: 2px orange border (the site's sole card border) + --vin-shadow-3 +
   a PERMANENT translateY(-8px) so it physically floats before any interaction.
   ONE orange accent per card = the 2px border; the badge is BLACK (the orange
   CTA is the button system, not a card accent). Price = card hero clamp(40,4.5vw,52)/800.
   NOTE (render-confirm, Chiara): verify the module actually emits .kl-pricing__badge
   and .kl-pricing__card--featured before ship — these rules are defensive/inert if absent.
   ========================================================================== */
.kl-pricing{display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:var(--vin-space-4,24px);}
.kl-pricing__card{
  flex:1 1 280px; max-width:380px; display:flex; flex-direction:column; position:relative;
  background:var(--vin-white,#fff); border:none; border-radius:var(--vin-radius-card,12px);
  box-shadow:var(--vin-shadow-2,0 4px 10px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.14));
  padding:var(--vin-space-5,32px);
}
.kl-pricing__card--featured{
  border:2px solid var(--vin-orange,#FF5200);
  box-shadow:var(--vin-shadow-3,0 10px 22px rgba(0,0,0,.10),0 28px 64px rgba(0,0,0,.18));
  transform:translateY(-8px);
}
/* Badge demoted OFF orange — BLACK fill + white label (21:1). Keeps the featured
   card to a single orange accent (the 2px border). */
.kl-pricing__badge{
  display:inline-block; align-self:flex-start; background:var(--vin-black,#000);
  color:var(--vin-white,#fff); font-size:12px; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; padding:4px 12px; border-radius:var(--vin-radius-pill,999px); margin-bottom:16px;
}
.kl-pricing__card > h4{font-size:20px; font-weight:700; color:var(--vin-blue,#056FBB); margin:0 0 8px;}
.kl-pricing__price h2{
  font-size:clamp(40px,4.5vw,52px); line-height:1.05; font-weight:800; letter-spacing:-0.02em;
  color:var(--vin-black,#000); margin:0;
}
.kl-pricing__price h2 span{color:var(--vin-blue,#056FBB); font-weight:600; font-size:18px; letter-spacing:0;}
.kl-pricing__description{margin-top:8px;}
.kl-pricing__description p{font-size:15px; line-height:1.5; color:var(--vin-black,#000); margin:0 0 4px;}
/* Neutral divider = spacing (no light-blue, no alpha border). */
.kl-pricing__card hr{border:0; height:0; margin:20px 0;}
.kl-pricing__features{list-style:none; padding-left:0; margin:0 0 24px; flex:1 1 auto;}
.kl-pricing__features li{display:flex; align-items:flex-start; gap:12px; font-size:16px; line-height:1.5; color:var(--vin-black,#000); margin-bottom:12px;}
.kl-pricing__bullet{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; margin-top:2px;}
.kl-pricing__bullet img{width:18px; height:18px; max-width:none;}
.kl-pricing__button{margin-top:auto;}
.kl-pricing__button .button{display:block; width:100%; text-align:center;}
/* Standard (non-featured) CTA -> dark-blue outlined; Featured CTA -> orange (base rule). */
.kl-pricing__card:not(.kl-pricing__card--featured) .kl-pricing__button .button{
  background:var(--vin-white,#fff) !important; color:var(--vin-blue,#056FBB) !important;
  border:2px solid var(--vin-blue,#056FBB) !important; border-radius:var(--vin-radius-button,8px) !important;
}
.kl-pricing__card:not(.kl-pricing__card--featured) .kl-pricing__button .button span{color:var(--vin-blue,#056FBB) !important;}
.kl-pricing__card:not(.kl-pricing__card--featured) .kl-pricing__button .button:hover{
  background:var(--vin-blue,#056FBB) !important; border-color:var(--vin-blue,#056FBB) !important;
}
.kl-pricing__card:not(.kl-pricing__card--featured) .kl-pricing__button .button:hover span{color:var(--vin-white,#fff) !important;}

/* ==========================================================================
   9 · FAQ ACCORDION  (.kl-faq) — entries read as elevated per-entry CARDS.
   NEVER set display/height/visibility on __description/__inner (theme JS owns
   open/close). +/- drawn from the two-bar pseudo device; orange when open.
   ========================================================================== */
.kl-faq{max-width:860px; margin-left:auto; margin-right:auto;}
.kl-faq__entry{
  background:var(--vin-white,#fff); border:none; border-left:3px solid transparent;
  border-radius:var(--vin-radius-card,12px);
  /* box-shadow:var(--vin-shadow-1,0 1px 2px rgba(0,0,0,.06),0 6px 16px rgba(0,0,0,.10)); */
  padding:6px 24px; margin-bottom:16px;
  transition:box-shadow var(--vin-lift,180ms ease),border-left-color var(--vin-lift,180ms ease);
}
.kl-faq__entry.active,
.kl-faq__entry.is-open,
.kl-faq__entry.open{
  /* box-shadow:var(--vin-shadow-2,0 4px 10px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.14)); */
  border-left-color:var(--vin-orange,#FF5200);
}
.kl-faq__header{display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; padding:20px 0;}
.kl-faq__header h3{font-size:20px; line-height:1.3; font-weight:700; color:var(--vin-blue,#056FBB); margin:0;}
.kl-faq__icon{flex:0 0 auto; position:relative; width:16px; height:16px;}
.kl-faq__icon::before,
.kl-faq__icon::after{content:""; position:absolute; background:var(--vin-blue,#056FBB); transition:opacity .2s ease;}
.kl-faq__icon::before{top:50%; left:0; width:100%; height:2px; transform:translateY(-50%);}
.kl-faq__icon::after{left:50%; top:0; width:2px; height:100%; transform:translateX(-50%);}
.kl-faq__entry.active .kl-faq__icon::before,
.kl-faq__entry.is-open .kl-faq__icon::before,
.kl-faq__entry.open .kl-faq__icon::before{background:var(--vin-orange,#FF5200);}
.kl-faq__entry.active .kl-faq__icon::after,
.kl-faq__entry.is-open .kl-faq__icon::after,
.kl-faq__entry.open .kl-faq__icon::after{opacity:0;}
.kl-faq__inner{padding-bottom:20px;}
.kl-faq__inner p,
.kl-faq__description p{font-size:17px; line-height:1.6; color:var(--vin-black,#000); margin:0 0 12px;}
.kl-faq__inner p:last-child,
.kl-faq__description p:last-child{margin-bottom:0;}

/* ==========================================================================
   10 · TESTIMONIAL  (.kl-testimonials / .kl-testimonial) — one elevated white
   CARD on --vin-shadow-2 (a notch above resting cards so social proof carries),
   STATIC. Base alpha-orange hairline removed. Big black quote + orange glyph.
   ========================================================================== */
.kl-testimonial{
  background:var(--vin-white,#fff); border:none; border-radius:var(--vin-radius-card,12px);
  box-shadow:var(--vin-shadow-2,0 4px 10px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.14));
  padding:var(--vin-space-6,48px);
}
.kl-testimonial__quote{margin:0 0 var(--vin-space-3,16px); line-height:0;}
.kl-testimonial__quote svg{width:64px; height:auto; display:block;}
.kl-testimonial__quote svg,
.kl-testimonial__quote svg path{fill:var(--vin-orange,#FF5200);}
.kl-testimonial__content{color:var(--vin-black,#000); font-size:clamp(24px,2.4vw,30px); line-height:1.4; font-weight:400; margin:0 0 var(--vin-space-4,24px);}
.kl-testimonial__footer{margin:0;}
.kl-testimonial__author{color:var(--vin-black,#000); font-size:14px; line-height:1.4; font-weight:400;}
.kl-testimonial__author span{display:block; color:var(--vin-blue,#056FBB); font-size:16px; line-height:1.4; font-weight:600; margin-bottom:2px;}

/* ==========================================================================
   11 · TABS  (native Tabbed card) — a masthead rule: active tab = black 700 +
   3px orange underline; inactive = dark-blue. Panel = white card on shadow-2.
   NEVER touch panel display/[hidden] — native JS owns which panel shows.
   ========================================================================== */
.hs-tabbed-card__tabs,
.hs-tabbed-card [role="tablist"]{
  display:flex; flex-wrap:wrap; gap:var(--vin-space-4,24px); list-style:none;
  margin:0 0 var(--vin-space-5,32px); padding:0; border-bottom:2px solid transparent; background:transparent;
}
.hs-tabbed-card__tab,
.hs-tabbed-card [role="tab"]{
  cursor:pointer; list-style:none; padding:12px 0; background:transparent; border:none;
  border-bottom:3px solid transparent; font-size:16px; line-height:1.25; font-weight:600;
  color:var(--vin-blue,#056FBB); white-space:nowrap;
  transition:color var(--vin-lift,180ms ease),border-color var(--vin-lift,180ms ease);
}
.hs-tabbed-card__tab.active,
.hs-tabbed-card__tab[aria-selected="true"],
.hs-tabbed-card [role="tab"].active,
.hs-tabbed-card [role="tab"][aria-selected="true"]{
  color:var(--vin-black,#000); font-weight:700; border-bottom-color:var(--vin-orange,#FF5200);
}
.hs-tabbed-card__tab:focus-visible,
.hs-tabbed-card [role="tab"]:focus-visible{outline:2px solid var(--vin-blue,#056FBB); outline-offset:2px;}
.hs-tabbed-card__panel,
.hs-tabbed-card [role="tabpanel"]{
  background:var(--vin-white,#fff); border-radius:var(--vin-radius-card,12px);
  box-shadow:var(--vin-shadow-2,0 4px 10px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.14));
  padding:var(--vin-space-6,48px); color:var(--vin-black,#000);
}
.hs-tabbed-card__panel p,
.hs-tabbed-card [role="tabpanel"] p{max-width:var(--vin-prose-max,72ch); font-size:18px; line-height:1.6; margin:0 0 var(--vin-space-3,16px);}
.hs-tabbed-card__panel h3,
.hs-tabbed-card [role="tabpanel"] h3{font-size:22px; line-height:1.25; font-weight:700; color:var(--vin-blue,#056FBB); margin:0 0 var(--vin-space-3,16px);}

/* ==========================================================================
   12 · LOGO STRIP  (.kl-logos) — DELIBERATELY FLAT anchor (no shadow, no lift).
   Uniform 40px height; logos keep their own brand colours (content).
   ========================================================================== */
.kl-logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--vin-space-5,32px) 40px;}
.kl-logos__item{display:inline-flex; align-items:center; justify-content:center; height:40px;}
.kl-logos__item a{display:inline-flex; align-items:center; justify-content:center; line-height:0;}
.kl-logos__item img{height:40px; width:auto; max-width:160px; object-fit:contain; display:block;}

/* ==========================================================================
   13 · DIVIDERS / TABLE / TIMELINE  (palette-pure — FULL-OPACITY dark-blue
   hairlines only, never a tint/alpha, never a solid offset block).
   The generic <hr> uses a simple, Level-3-safe :not() (no complex descendant
   :not() -> no older-engine parse-drop). Pricing-card <hr> is re-asserted as a
   pure spacer immediately below (matched specificity + later source order) so
   the generic hairline is never reintroduced inside a pricing card.
   ========================================================================== */
.body-container hr:not(.blog-post__divider){
  border:0; border-top:1px solid var(--vin-blue,#056FBB); margin:var(--vin-space-5,32px) 0;
}
.body-container .kl-pricing__card hr{border:0; height:0; margin:20px 0;}
.body-container table{
  width:100%; border-collapse:separate; border-spacing:0; background:var(--vin-white,#fff);
  border:1px solid var(--vin-blue,#056FBB); border-radius:var(--vin-radius-card,12px); overflow:hidden;
  box-shadow:var(--vin-shadow-1,0 1px 2px rgba(0,0,0,.06),0 6px 16px rgba(0,0,0,.10)); margin:0 0 12px;
}
.body-container table thead th{
  background:var(--vin-blue,#056FBB); color:var(--vin-white,#fff); text-transform:uppercase;
  letter-spacing:0.06em; font-size:14px; font-weight:700; text-align:left; padding:16px 20px; border:none;
}
.body-container table tbody td{
  padding:14px 20px; font-size:16px; line-height:1.5; color:var(--vin-black,#000);
  border:none; border-top:1px solid var(--vin-blue,#056FBB); vertical-align:top;
}
.body-container table tbody tr:first-child td{border-top:none;}
.body-container table tbody td:last-child{color:var(--vin-blue,#056FBB); font-weight:600;}
/* Timeline (defensive; inert if the module is absent). */
.kl-timeline__spine,
.kl-timeline__line,
.kl-timeline__track{background:var(--vin-blue,#056FBB);}
.kl-timeline__marker,
.kl-timeline__node,
.kl-timeline__dot{background:var(--vin-orange,#FF5200); border-color:var(--vin-orange,#FF5200);}

/* ==========================================================================
   14 · BANDS + HERO + CLOSING  (authored LAST so they win the cascade)
   THE SPINE: blue #056FBB HERO -> white islands -> scarce ORANGE statement ->
   #1e5e9a CLOSING. Full-bleed via calc(50% - 50vw) breakout ALONE (no width:100vw
   — h-scroll guard shipped in section 0). Breakout is self-neutralising on
   already-full-width wrappers.
   ========================================================================== */

/* 14·GUARD. FULL-BLEED ONLY FROM A FULL-WIDTH COLUMN.
   The calc(50% - 50vw) breakout resolves 50% against the band's CONTAINING BLOCK.
   That is correct only when the band sits in a full-width, viewport-centred row
   (span12) — as every real page places these modules, and as the hero proves. If a
   band is dropped into a NARROW / off-centre column (e.g. this QA page's span8),
   50% = half the column, so the breakout overshoots and overflows ~200px to the
   right (clipped, but shifted). Neutralise the negative margins in that case; the
   band then stays cleanly in-column. On full-width rows this rule never matches,
   so real-page full-bleed is untouched. */
.widget-span:not(.span12) .kl-hero-02,
.widget-span:not(.span12) .kl-offer-01,
.widget-span:not(.span12) .vin-band-blue,
.widget-span:not(.span12) .vin-band-orange,
.widget-span:not(.span12) .vin-band-deep{
  margin-left:0 !important; margin-right:0 !important;
}

/* 14a. HERO BAND — Hero Banner 02 (presence). Native full-width; DO NOT narrow
   .kl-hero-02__content (the over-style trap). White display H1 + orange accent +
   white lead + orange CTA. Hero image floats on --vin-shadow-3. */
.kl-hero-02{
  background:var(--vin-blue,#056FBB);
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-top:clamp(64px,10vw,128px); padding-bottom:clamp(48px,7vw,96px);
}
.kl-hero-02 .kl-rich-text h1,
.kl-hero-02 h1{
  color:var(--vin-white,#fff); font-size:clamp(44px,5.4vw,60px); line-height:1.05;
  font-weight:800; letter-spacing:-0.02em; margin:0 0 var(--vin-space-4,24px);
}
.kl-hero-02 .vin-accent{color:var(--vin-white,#fff) !important;}
.kl-hero-02 p,
.kl-hero-02 li,
.kl-hero-02 .kl-rich-text__lead{color:var(--vin-white,#fff);}
.kl-hero-02 p{max-width:60ch; font-size:20px; line-height:1.55;}
.kl-hero-02 .kl-hero-02__preheader,.kl-hero-02 .kl-rich-text__preheader{color:var(--vin-white,#fff);}
.kl-hero-02 a:not([class*="button"]){color:var(--vin-white,#fff);}
/* Shadow + radius live on the IMG, not the container: the .kl-hero-02__image cell
   is flex-centred and taller than a 16:9 image, so shadowing the container floats
   the box ~54px above/below the image. On the img it hugs the actual picture. */
.kl-hero-02__image{box-shadow:none; border-radius:0;}
.kl-hero-02__image img{
  display:block;
  box-shadow:var(--vin-shadow-3,0 10px 22px rgba(0,0,0,.10),0 28px 64px rgba(0,0,0,.18));
  border-radius:var(--vin-radius-card,12px);
}
/* Hero primary CTA: on the blue band, hover swaps orange -> WHITE fill + blue label
   (never the invisible blue-on-blue). */
.kl-hero-02 .button:not(.button--outlined):not(.button--arrow):hover{
  background:var(--vin-white,#fff) !important; color:var(--vin-blue,#056FBB) !important;
}
.kl-hero-02 .button:not(.button--outlined):not(.button--arrow):hover span{color:var(--vin-blue,#056FBB) !important;}
.kl-hero-02 .button:focus-visible{outline-color:var(--vin-white,#fff);}

/* 14b. GENERIC BLUE BAND CLASS (.vin-band-blue) — opt-in via editor "Add classes";
   also the fallback for a RICH-TEXT hero (Igor adds it to that section). #056FBB. */
.vin-band-blue{
  background:var(--vin-blue,#056FBB);
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:clamp(64px,10vw,128px) var(--vin-gutter-desktop,32px) clamp(48px,7vw,96px);
}
.vin-band-blue > .row-fluid{max-width:var(--vin-content-max,1240px); margin-left:auto; margin-right:auto;}
.vin-band-blue h1{font-size:clamp(44px,5.4vw,60px); line-height:1.05; font-weight:800; letter-spacing:-0.02em;}
.vin-band-blue h1,
.vin-band-blue h2,
.vin-band-blue h3,
.vin-band-blue h4,
.vin-band-blue p,
.vin-band-blue li,
.vin-band-blue .kl-rich-text__preheader,
.vin-band-blue .kl-offer-01__preheader,
.vin-band-blue .kl-hero-02__preheader,
.vin-band-blue .kl-features-01__preheader,
.vin-band-blue .kl-features-02__preheader{color:var(--vin-white,#fff) !important;}
.vin-band-blue a:not([class*="button"]){color:var(--vin-white,#fff) !important;}
.vin-band-blue .button--outlined span,
.vin-band-blue .button--arrow span{color:var(--vin-white,#fff) !important;}
.vin-band-blue .vin-accent{color:var(--vin-orange,#FF5200) !important;}
.vin-band-blue .button:not(.button--outlined):not(.button--arrow):hover{
  background:var(--vin-white,#fff) !important; color:var(--vin-blue,#056FBB) !important;
}
.vin-band-blue .button:focus-visible{outline-color:var(--vin-white,#fff);}

/* 14c. ORANGE STATEMENT BAND (.vin-band-orange) — the scarcest, hardest punch,
   ONE per page. BLACK 800 oversized text on orange (>=6:1). SHORT statement only.
   COPY is Carlo's — the class only sets look. Add it in the editor on one short
   section for the demo (one line, Igor). */
.vin-band-orange{
  background:var(--vin-orange,#FF5200);
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:clamp(56px,8vw,96px) var(--vin-gutter-desktop,32px);
  min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.vin-band-orange h1,
.vin-band-orange h2,
.vin-band-orange h3,
.vin-band-orange h4,
.vin-band-orange p,
.vin-band-orange li{color:var(--vin-black,#000) !important;}
.vin-band-orange h1,
.vin-band-orange h2,
.vin-band-orange h3,
.vin-band-orange h4{font-size:clamp(32px,4vw,44px); font-weight:800; line-height:1.12; letter-spacing:-0.015em; max-width:22ch; margin:0;}
.vin-band-orange .kl-rich-text__preheader,
.vin-band-orange .kl-offer-01__preheader{color:var(--vin-black,#000) !important;}
.vin-band-orange .kl-rich-text__preheader::before,
.vin-band-orange .kl-offer-01__preheader::before{background:var(--vin-black,#000);}

/* 14d. CLOSING BAND — Offer 01 painted #1e5e9a by presence (demo convenience;
   reverts to opt-in .vin-band-deep for live). White eyebrow+orange tick -> white
   oversized H2 -> white body -> orange CTA. 3-selector dark-band whitening. */
.kl-offer-01,
.vin-band-deep{
  background:var(--vin-blue-deep,#1e5e9a);
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:clamp(56px,8vw,96px) var(--vin-gutter-desktop,32px);
  text-align:center; box-shadow:none;
}
.kl-offer-01__content{display:flex; flex-direction:column; align-items:center; max-width:var(--vin-content-max,1240px); margin-left:auto; margin-right:auto;}
.kl-offer-01__text{max-width:var(--vin-narrow-max,620px); flex-basis: 20px !important; margin-left:auto; margin-right:auto;}
.kl-offer-01__preheader{color:var(--vin-white,#fff) !important;}
.kl-offer-01__text h2,
.kl-offer-01__text h3,
.kl-offer-01__text h4,
.vin-band-deep h2,
.vin-band-deep h3,
.vin-band-deep h4{
  color:var(--vin-white,#fff) !important; font-size:clamp(30px,3.4vw,44px); line-height:1.12;
  font-weight:800; letter-spacing:-0.015em; margin:0 0 var(--vin-space-3,16px);
}
.kl-offer-01__text p,
.kl-offer-01__text li,
.vin-band-deep p,
.vin-band-deep li{color:var(--vin-white,#fff) !important; font-size:18px; line-height:1.6; margin:0;}
.kl-offer-01 a:not([class*="button"]),
.vin-band-deep a:not([class*="button"]){color:var(--vin-white,#fff) !important;}
.kl-offer-01 .button--outlined span,
.kl-offer-01 .button--arrow span,
.vin-band-deep .button--outlined span,
.vin-band-deep .button--arrow span{color:var(--vin-white,#fff) !important;}
.kl-offer-01 .vin-accent,
.vin-band-deep .vin-accent{color:var(--vin-white,#fff) !important;}
.kl-offer-01__button{margin-top:var(--vin-space-5,32px); text-align:center;}
/* Closing primary CTA hover: orange -> WHITE fill + blue label (never blue-on-blue). */
.kl-offer-01 .button:not(.button--outlined):not(.button--arrow):hover,
.vin-band-deep .button:not(.button--outlined):not(.button--arrow):hover{
  background:var(--vin-white,#fff) !important; color:var(--vin-blue,#056FBB) !important;
}
.kl-offer-01 .button:not(.button--outlined):not(.button--arrow):hover span,
.vin-band-deep .button:not(.button--outlined):not(.button--arrow):hover span{color:var(--vin-blue,#056FBB) !important;}
.kl-offer-01 .button:focus-visible,
.vin-band-deep .button:focus-visible{outline-color:var(--vin-white,#fff);}

/* ==========================================================================
   15 · RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .kl-features-01{gap:var(--vin-space-4,24px);}
  .kl-features-01 .kl-features-01__card{
    flex:0 1 calc((100% - var(--vin-space-4,24px)) / 2) !important;
    max-width:calc((100% - var(--vin-space-4,24px)) / 2);
  }
  .kl-card-grid--4-columns .kl-card-grid__card-wrapper{flex-basis:47%;}
  .kl-testimonial__content{font-size:22px;}
}
@media (max-width:640px){
  .body-container p,
  .body-container li{font-size:16px;}            /* 16px = mobile floor only */
  .kl-hero-02 p{font-size:18px;}                 /* hero lead keeps the 18px mobile step */
  .kl-features-01{gap:20px;}
  .kl-features-01 .kl-features-01__card{flex:1 1 100% !important; max-width:100%; padding:var(--vin-space-4,24px);}
  .kl-features-01__card h4{font-size:20px;}
  .kl-features-01__card p{font-size:16px;}
  .kl-features-02__card,
  .kl-pricing__card{flex-basis:100%; max-width:none;}
  .kl-card-grid__card-wrapper,
  .kl-card-grid--4-columns .kl-card-grid__card-wrapper{flex-basis:100%;}
  .kl-testimonial{padding:var(--vin-space-4,24px);}
  .kl-testimonial__content{font-size:20px;}
  .kl-testimonial__quote svg{width:48px;}
  .kl-logos{gap:var(--vin-space-3,16px) 24px;}
  .kl-logos__item,
  .kl-logos__item img{height:32px;}
  .kl-logos__item img{max-width:120px;}
  .hs-tabbed-card__tabs,
  .hs-tabbed-card [role="tablist"]{gap:var(--vin-space-4,24px);}
  .hs-tabbed-card__panel,
  .hs-tabbed-card [role="tabpanel"]{padding:var(--vin-space-4,24px);}
}

/* ==========================================================================
   16 · MOTION DISCIPLINE — every transform/transition guarded for reduced motion.
   (The featured-pricing translateY is a STATIC layout offset, not an animation,
   so it stays — nothing moves for the user.)
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .kl-features-01__card,
  .kl-features-02__card,
  .kl-card-grid__card,
  .kl-card,
  .kl-faq__entry,
  .body-container .button,
  .hs-tabbed-card__tab,
  .hs-tabbed-card [role="tab"]{transition:none;}
  .kl-features-01__card:hover,
  .kl-features-02__card:hover,
  .kl-card-grid__card:hover,
  .kl-card:hover,
  .kl-features-01__card:active,
  .kl-features-02__card:active,
  .kl-card-grid__card:active,
  .kl-card:active{transform:none;}
}

/* ==========================================================================
   BLOG — brand title treatment: black titles + orange accent
   Scope: news listing (.blog-header / .blog-index) and single posts (.blog-post).
   Palette: only #000 (black) and #FF5200 (orange).
   ========================================================================== */

/* 1 · Page titles — listing header H1 + single-post H1: black, display weight. */
.blog-header__title,
.blog-post__title{
  color:#000; font-weight:800; letter-spacing:-0.02em;
}

/* 2 · Orange accent tick — the site's eyebrow motif, above the post title and
   each listing card title, so the "orange" reads at rest (not only on hover). */
.blog-post__title::before,
.blog-index__post-content h3::before{
  content:""; display:block; width:40px; height:3px;
  margin-bottom:16px; background:#FF5200; border-radius:2px;
}

/* 3 · Listing card titles — black at rest; the whole card is the click target,
   so the title turns orange on hover/focus pair). */
.blog-index__post-content h3{
  color:#000; font-weight:700; letter-spacing:-0.01em;
}
.blog-index__post-content h3 a{ color:inherit; text-decoration:none; }
.blog-index__post:hover .blog-index__post-co
.blog-index__post:hover .blog-index__post-content h3 a,
.blog-index__post-content h3 a:hover,
.blog-index__post-content h3 a:focus-visible{ color:#FF5200; }
.kl-navbar__end .button.button--outlined{border-color:var(--vin-white,#fff) !important;}
.kl-navbar__end .button.button--outlined span{color:var(--vin-white,#fff) !important;}

/* Footer credit hide (re-added 2026-07-09) */
.kl-footer__byline-wrapper{display:none!important}
.kl-features-02-wrapper{overflow:visible;}

/* ==========================================================================
   OP #2487 · header geometry hoisted to HEAD-level CSS  (added 2026-08-10)
   --------------------------------------------------------------------------
   The custom top-bar module ships these exact rules in an inline STYLE
   element at the END of the BODY. Until that node parses, header.kl-header
   resolves to top:auto (measured: it paints ~2100px down the page) and
   .kl-header-placeholder is 82px — so on a HARD REFRESH the header paints in
   the wrong place and then snaps to top:42px. That snap is the reported
   "tilt / shift". child.css loads in the HEAD, so declaring the same geometry
   here makes the FIRST PAINT already correct, and the later body copy a no-op.
   Values are byte-identical to the module's, 920px breakpoint included.
   !! If the top-bar height (42px) ever changes, change it in BOTH places. !!
   ========================================================================== */
#vin-topbar-root .vin-topbar{
  position:fixed; top:0; left:0; right:0; height:42px; box-sizing:border-box;
  z-index:2147483000; background:#FFFFFF; border-bottom:1px solid #B4D7FB;
}
html body header.kl-header{top:42px !important;}
html body .kl-dnd-header-area{top:42px !important;}
html body .kl-header-placeholder{height:124px !important;}
html body .kl-navbar__panel{top:124px !important;}
html body .kl-navbar__content{height:calc(100% - 124px) !important;}
html body .kl-custom-anchor{scroll-margin-top:124px !important;}

@media screen and (max-width:920px){
  #vin-topbar-root{display:none !important;}
  html body header.kl-header{top:0 !important;}
  html body .kl-dnd-header-area{top:0 !important;}
  html body .kl-header-placeholder{height:82px !important;}
  html body .kl-navbar__panel{top:82px !important;}
  html body .kl-navbar__content{height:calc(100% - 82px) !important;}
  html body .kl-custom-anchor{scroll-margin-top:82px !important;}
}

/* ==========================================================================
   OP #2490 · focus-ring normalisation  (added 2026-08-10)
   --------------------------------------------------------------------------
   Measured on live: 63 focusable elements had NO author focus style, so they
   fell back to the UA ring (outline:auto in currentColor — rendering orange,
   blue or white depending on the element). Chromium only paints that ring for
   :focus-visible, but engines that resolve :focus-visible differently paint it
   on MOUSE click and keep it until the next click — the reported "persistent
   border after clicking items".
   Pointer/touch focus -> no ring. Keyboard focus -> one consistent brand ring,
   contrast-matched per surface. No !important: the existing component rules
   (e.g. .kl-hero-02 .button:focus-visible white ring) still win on specificity.
   ========================================================================== */
/* GLOBAL, deliberately not scoped to a list of containers. The first cut of this
   fix enumerated .body-container / .kl-header / #vin-topbar-root and therefore
   missed footer.kl-footer entirely (28 links, still showing the orange UA ring
   on the blue footer). Any container list will eventually miss one — go global
   and override only the COLOUR per surface. */
:focus:not(:focus-visible){outline:none;}
:focus-visible{outline:2px solid #056FBB; outline-offset:2px;}

/* Dark chrome surfaces (navbar bar, mega-panel, footer) — a blue ring vanishes
   into #2675C1, so switch the ring to white there. Colour only: the 2px/offset
   above still applies, and higher-specificity component rules still win. */
.kl-header :focus-visible,
.kl-navbar :focus-visible,
.kl-footer :focus-visible{outline-color:#FFFFFF;}


/* ==========================================================================
   OP #2488 - join the search input and its button into one control
   --------------------------------------------------------------------------
   The Kalungi hs-search-field renders input and button already touching
   (measured gap 0px), but both keep a radius at the join, so two rounded
   corners meet and it reads as two separate controls.
   Flatten only the touching corners, and match the button's outer radius to
   the input's 5px so the pair reads as one shape (the button shipped 3px,
   which looked wrong once the seam closed).
   !important is required: the input's radius comes from the module's own
   per-instance inline rule, which carries ID specificity
   (#hs_cos_wrapper_widget_... .hs-search-field__bar > form > .hs-search-field__input)
   and would otherwise outrank anything declared here.
   ========================================================================== */
.hs-search-field__input{
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
.hs-search-field__button{
  border-top-left-radius:0 !important;
  border-bottom-left-radius:0 !important;
  border-top-right-radius:5px !important;
  border-bottom-right-radius:5px !important;
}


/* ==========================================================================
   OP #2488b - no hover effect on the search button
   --------------------------------------------------------------------------
   Atlas ships a global rule (template_main.min.css):
     button:hover, button:focus, button:active, .button:hover, ...
     { background-color:#3B66C9; border-color:#3B66C9; transform:scale(1.05); }
   Two problems on this control: #3B66C9 is off-palette, and scale(1.05) grows
   the button 5% so it breaks out of the flush join with the input. Pin all
   three states back to the rest appearance and kill the transform.
   Scoped to the search button ONLY - the same Atlas rule still applies to
   every other button on the site and is not touched here.
   !important is needed to beat the theme rule's own weight.
   ========================================================================== */
.hs-search-field__button:hover,
.hs-search-field__button:focus,
.hs-search-field__button:active{
  background-color:#2675C1 !important;
  border-color:#2675C1 !important;
  color:#FFFFFF !important;
  transform:none !important;
  text-decoration:none !important;
}


/* ==========================================================================
   OP #2490c - no double border on form controls  (regression fix)
   --------------------------------------------------------------------------
   The global focus ring above uses outline-offset:2px, which is right for
   links and buttons but wrong for a control that already draws its own
   border: the ring then sits 2px OUTSIDE that border and reads as a double
   line. Text inputs always match :focus-visible, so it fired on every click
   into the search field.
   Pull the ring in by 1px so it overlaps and visually REPLACES the control's
   own 1px border instead of stacking outside it - one clean 2px line, no
   layout shift, focus still clearly indicated.
   Specificity (0,1,1) beats the global :focus-visible (0,1,0), so no
   !important is needed and component-level overrides still win.
   ========================================================================== */
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline-offset:-1px;
}

</style>