<!-- 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}
</style>