/* ============================================================================
   Kalobrate funnel page.
   Every rule below resolves to a token from the Kalobrate Design System, and
   every component follows its spec in components/core + components/brand.
   No shadows, no gradients (bar the sanctioned diagonal pattern), no blur.
   ========================================================================== */

/* --- Upstream token collision -------------------------------------------
   `--text-body` is declared twice in the design system: as a colour in
   tokens/colors.css (`var(--carbon)`) and as a size in tokens/typography.css
   (`16px`). typography.css is imported second, so the size wins and every
   `color:var(--text-body)` in base.css resolves to an invalid value and falls
   back to BLACK. The brand forbids black outright ("Carbon is the darkest
   value"), so text colour is pinned to the correct tokens here.
   Worth fixing at source by renaming one of the two.
   ---------------------------------------------------------------------- */
body{color:var(--carbon)}
a{color:inherit}
.k-dark{color:var(--white)}
.k-dark a{color:var(--white)}
.k-dark a:hover{color:var(--carbon)}
.k-yellow{color:var(--carbon)}

/* --- Layout ------------------------------------------------------------- */
.k-shell{max-width:1280px;margin:0 auto;padding-left:5.5%;padding-right:5.5%}
@media (max-width:720px){.k-shell{padding-left:24px;padding-right:24px}}
@media (max-width:400px){.k-shell{padding-left:20px;padding-right:20px}}

section{position:relative;overflow:hidden}
.k-band{padding-top:var(--space-24);padding-bottom:var(--space-24)}
@media (max-width:720px){.k-band{padding-top:var(--space-16);padding-bottom:var(--space-16)}}

.k-dark,.k-yellow{background:var(--surface-page)}

.k-grid{display:grid;gap:var(--grid-gutter)}
.k-grid-2{grid-template-columns:repeat(2,1fr)}
.k-grid-3{grid-template-columns:repeat(3,1fr)}
.k-grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.k-grid-3,.k-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.k-grid-2,.k-grid-3,.k-grid-4{grid-template-columns:1fr}}

.k-stack>*+*{margin-top:var(--space-4)}
.k-section-head{max-width:60ch;margin-bottom:var(--space-12)}
.k-section-head .k-eyebrow{display:block;color:var(--text-muted);margin-bottom:var(--space-4)}
.k-dark .k-section-head .k-eyebrow,.k-yellow .k-section-head .k-eyebrow{color:inherit;opacity:.7}
.k-section-head h2{margin-bottom:var(--space-5)}
.k-lede{font-size:var(--text-lead);line-height:1.35}

/* Display headings step down on smaller stages. Caps stay caps.
   Sizes are set by the longest highlight band on the page, not by taste:
   Montech caps at +0.05em run about 0.67em per character, so a band must be
   given room or it wraps and the marker motif flattens into a bar.
   The h1 is sized off that constraint directly rather than by guessed
   breakpoints: its longest band is 18 characters, so it needs about 12.1em,
   and the available width is the viewport less the 2x20px mobile gutter.
   The 100vh/16 term stops a four-line headline from eating a short laptop
   screen and pushing the CTA under the fold. Above ~660px wide and ~850px
   tall, the 53px display cap takes over. */
h1{font-size:min(calc((100vw - 40px) / 12.1),calc(100vh / 16),var(--text-display))}
h2{font-size:clamp(21px,3.6vw,var(--text-h1))}
h3{font-size:clamp(20px,2.4vw,var(--text-h2))}
@media (max-width:400px){h2{font-size:18px}}

/* Per-line marker bands. display:table makes each band hug its own words, so a
   band must never be allowed to wrap: a wrapped line fills the column and the
   marker-pen motif turns into a full-width bar. Headings that carry bands are
   therefore released from the body measure. */
.k-highlight-line+.k-highlight-line{margin-top:.14em}
h1,h2,h3{max-width:none}

/* --- Buttons (components/core/Button.jsx) -------------------------------- */
.k-btn{font-family:var(--font-body);font-weight:var(--weight-body-semibold);line-height:1;
  border:var(--border-width) solid transparent;border-radius:var(--radius-pill);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  transition:var(--transition-interactive);text-decoration:none;white-space:nowrap;
  font-size:var(--text-body);padding:12px 24px}
.k-btn:hover{text-decoration:none}
.k-btn-sm{font-size:var(--text-small);padding:8px 16px}
.k-btn-lg{font-size:var(--text-lead);padding:16px 32px}
.k-btn:active{transform:scale(var(--press-scale))}
.k-btn-primary{background:var(--golden-yellow);color:var(--carbon);border-color:var(--golden-yellow)}
.k-btn-primary:hover{background:var(--yellow-press);border-color:var(--yellow-press);color:var(--carbon)}
.k-btn-secondary{background:var(--carbon);color:var(--white);border-color:var(--carbon)}
.k-btn-secondary:hover{background:var(--carbon-90);border-color:var(--carbon-90);color:var(--white)}
.k-btn-outline{background:transparent;color:inherit;border-color:var(--border-strong)}
.k-btn-outline:hover{background:var(--golden-yellow);color:var(--carbon);border-color:var(--golden-yellow)}
.k-btn:disabled{background:var(--friar-grey);border-color:var(--friar-grey);color:var(--carbon);cursor:not-allowed;transform:none}
.k-btn-full{width:100%}
/* The primary CTA label is long, so it has to be allowed to wrap rather than
   overflow. A pill radius clamps to half the height, so it survives 2-3 lines. */
.k-btn-wrap,.k-btn-xl,.k-btn-header{white-space:normal;text-align:center}
.k-btn-xl{font-size:var(--text-h3);padding:22px 44px;line-height:1.15;max-width:100%}
.k-btn-header{font-size:var(--text-body);padding:14px 28px}
@media (max-width:960px){.k-btn-xl{font-size:var(--text-lead);padding:20px 32px}}
@media (max-width:560px){
  .k-btn-xl{width:100%;font-size:var(--text-lead);padding:18px 24px}
  .k-btn-header{font-size:var(--text-small);padding:12px 18px}
}

/* --- The CTA lock-up: one big button plus the founder's credentials -------
   Used identically at every call to action so the ask, the face and the
   authority always travel together. */
.k-cta{margin-top:var(--space-8)}
.k-cta-proof{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-5);
  max-width:56ch}
.k-cta-face{flex:none;width:64px;height:64px;object-fit:cover;object-position:50% 22%;
  border:var(--border-width) solid var(--golden-yellow);display:block}
.k-cta-proof p{margin:0;font-size:var(--text-small);line-height:1.45;max-width:none}
.k-cta-proof strong{font-weight:var(--weight-body-semibold)}
/* On Carbon the supporting sentence drops to Friar Grey; the credential stays white. */
.k-dark .k-cta-proof p{color:var(--friar-grey)}
.k-dark .k-cta-proof strong{color:var(--white)}
.k-yellow .k-cta-face{border-color:var(--carbon)}
@media (max-width:560px){
  .k-cta-proof{gap:var(--space-3);max-width:none}
  .k-cta-face{width:52px;height:52px}
}

/* --- Cards (components/core/Card.jsx) ------------------------------------ */
.k-card{background:var(--surface-card);color:inherit;padding:var(--space-6);box-shadow:none}
.k-card-bordered{border:var(--border-width) solid var(--border-strong)}
.k-card-yellow{background:var(--golden-yellow);color:var(--carbon)}
.k-card-carbon{background:var(--carbon);color:var(--white)}
.k-card-sunken{background:var(--carbon-06);color:var(--carbon)}
.k-card h4,.k-card .k-h2{margin-bottom:var(--space-3)}

/* Card heading: Montech SemiBold caps at the deck's ~19px card size. */
.k-card-title{font-family:var(--font-display);font-weight:var(--weight-display-semibold);
  text-transform:uppercase;letter-spacing:var(--tracking-display);font-size:19px;line-height:1.1;
  color:inherit;margin:0 0 var(--space-3)}

/* --- Icons (components/brand/Icon.jsx) ----------------------------------- */
/* One colour per icon, never recoloured by hand: the carbon/ and yellow/
   files are the real assets. Used at 32px and above only. */
.k-icon{display:block;width:48px;height:48px;object-fit:contain;object-position:left center}
.k-icon-sm{width:32px;height:32px}
.k-icon-lg{width:64px;height:64px}

/* --- Sector cards (components/brand/SectorCard.jsx) ---------------------- */
.k-sector{background:var(--golden-yellow);color:var(--carbon);padding:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-4);box-shadow:none}
.k-sector p{margin:0;max-width:none}

/* --- Quote block (components/brand/QuoteBlock.jsx) ----------------------- */
.k-quote{margin:0;padding:var(--space-8);background:var(--golden-yellow);color:var(--carbon)}
.k-quote blockquote{margin:0;font-family:var(--font-body);font-weight:var(--weight-body-regular);
  font-size:var(--text-quote);line-height:var(--leading-quote)}
.k-quote figcaption{margin-top:var(--space-6);font-family:var(--font-body);
  font-weight:var(--weight-body-semibold);font-size:var(--text-eyebrow)}
.k-quote .k-icon{margin-bottom:var(--space-5);width:44px;height:44px}
@media (max-width:640px){.k-quote blockquote{font-size:var(--text-lead)}}

/* --- Page furniture (components/brand/PageFurniture.jsx) ----------------- */
/* Outline mark watermark at 20-30% opacity, bleeding off one page edge. */
.k-watermark{position:absolute;opacity:.25;width:auto;height:32%;pointer-events:none;z-index:0}
@media (max-width:720px){.k-watermark{height:auto;width:58vw}}
.k-watermark-tl{top:0;left:0;transform:translate(-28%,-28%)}
.k-watermark-br{bottom:0;right:0;transform:translate(28%,28%)}
.k-mark-signature{position:absolute;right:3%;bottom:5%;height:44px;width:auto;pointer-events:none;z-index:0}
/* Diagonal pattern block, bleeding off a corner. Never a full-page texture. */
.k-pattern-block{position:absolute;width:112px;height:112px;pointer-events:none;z-index:0;
  background-color:var(--carbon);background-image:var(--pattern-diagonal)}
.k-pattern-block-tr{top:0;right:0}
.k-pattern-block-bl{bottom:0;left:0}
.k-layer{position:relative;z-index:1}

/* Shape extension: a square that pushes a block past its own bounds. */
.k-figure{position:relative;display:block}
.k-figure img{display:block;width:100%;height:100%;object-fit:cover}
.k-figure::after{content:"";position:absolute;width:var(--square-xl);height:var(--square-xl);
  background:var(--golden-yellow);left:0;bottom:0;transform:translate(-34%,34%)}
.k-figure-mark::after{background:var(--carbon)}

/* --- Header -------------------------------------------------------------- */
.k-header{position:sticky;top:0;z-index:40;background:var(--white);
  border-bottom:var(--border-width) solid var(--carbon-12)}
.k-header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  height:76px}
.k-header-logo{height:30px;width:auto;max-width:100%;display:block}
.k-header-inner>a{display:flex;align-items:center;min-height:44px}
/* The wordmark lock-up is 9.28:1, so height drives a lot of width. Step it down
   on small stages so the logo and the CTA both fit the 375px viewport, and swap
   the long CTA label for a short one there. */
.k-btn-short{display:none}
@media (max-width:820px){
  .k-header-inner{height:64px;gap:var(--space-3)}
  .k-header-logo{height:20px}
  .k-btn-long{display:none}
  .k-btn-short{display:inline}
}

/* --- Hero ---------------------------------------------------------------- */
.k-hero{padding-top:var(--space-20);padding-bottom:var(--space-20)}
.k-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-16);align-items:center}
@media (max-width:960px){.k-hero-grid{grid-template-columns:1fr;gap:var(--space-16)}}
/* The heading spans the full stage so each marker band can hug its own words.
   Boxed into a column the lines wrap and the bands flatten to one width, which
   kills the motif. */
.k-hero .k-tagline{margin-bottom:var(--space-10)}
.k-hero-title{margin-bottom:var(--space-10)}
.k-hero .k-lede{margin-bottom:var(--space-6)}
/* Short laptop screens: tighten the hero so the CTA stays above the fold. */
@media (min-width:961px) and (max-height:820px){
  .k-hero{padding-top:var(--space-12);padding-bottom:var(--space-12)}
  .k-hero .k-tagline{margin-bottom:var(--space-6)}
  .k-hero-title{margin-bottom:var(--space-6)}
}
.k-hero-figure{aspect-ratio:4/5;max-height:520px}
@media (max-width:960px){.k-hero-figure{aspect-ratio:16/10;max-height:none}}

/* --- Reassurance / meta rows -------------------------------------------- */
.k-facts{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-10);
  padding-top:var(--space-8);border-top:var(--border-width) solid var(--border-hairline)}
.k-fact{font-size:var(--text-small)}
.k-fact strong{display:block;font-family:var(--font-display);font-weight:var(--weight-display-semibold);
  text-transform:uppercase;letter-spacing:var(--tracking-display);font-size:var(--text-lead);
  margin-bottom:var(--space-1)}

/* --- Split panels -------------------------------------------------------- */
.k-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gutter)}
@media (max-width:800px){.k-split{grid-template-columns:1fr}}
.k-panel{padding:var(--space-10)}
.k-panel ul{list-style:none;margin:var(--space-6) 0 0;padding:0}
.k-panel li{display:flex;gap:var(--space-3);padding:var(--space-3) 0;
  border-top:var(--border-width) solid var(--border-hairline)}
.k-panel li::before{content:"";flex:none;width:10px;height:10px;margin-top:8px;background:currentColor}
.k-panel-yellow li::before{background:var(--carbon)}

/* --- Numbered method cards ---------------------------------------------- */
.k-step{position:relative;padding:var(--space-8);border:var(--border-width) solid var(--border-strong)}
.k-step-no{font-family:var(--font-display);font-weight:var(--weight-display-semibold);
  letter-spacing:var(--tracking-display);font-size:var(--text-h2);color:var(--golden-yellow);
  display:block;margin-bottom:var(--space-5)}
.k-step .k-icon{margin-bottom:var(--space-5)}

/* --- Comparison table ---------------------------------------------------- */
.k-compare{border:var(--border-width) solid var(--border-strong);border-bottom:0}
.k-compare-row{display:grid;grid-template-columns:1fr 1fr}
.k-compare-row>div{padding:var(--space-5) var(--space-6);
  border-bottom:var(--border-width) solid var(--border-strong)}
.k-compare-row>div+div{border-left:var(--border-width) solid var(--border-strong);
  background:var(--golden-yellow);color:var(--carbon)}
.k-compare-head>div{font-family:var(--font-display);font-weight:var(--weight-display-semibold);
  text-transform:uppercase;letter-spacing:var(--tracking-display);font-size:var(--text-small)}
@media (max-width:720px){
  .k-compare-row{grid-template-columns:1fr}
  .k-compare-row>div+div{border-left:0}
  .k-compare-head{display:none}
}

/* --- FAQ ----------------------------------------------------------------- */
.k-faq{border-top:var(--border-width) solid var(--border-strong)}
.k-faq details{border-bottom:var(--border-width) solid var(--border-strong)}
.k-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-6);
  cursor:pointer;list-style:none;padding:var(--space-5) 0;
  font-family:var(--font-body);font-weight:var(--weight-body-semibold);font-size:var(--text-lead);
  line-height:1.3;transition:var(--transition-interactive)}
.k-faq summary::-webkit-details-marker{display:none}
.k-faq summary:hover{color:var(--carbon)}
.k-faq summary:hover .k-faq-q{background:var(--golden-yellow)}
.k-faq-q{padding:0 .18em}
.k-faq-sign{flex:none;position:relative;width:20px;height:20px;margin-top:6px}
.k-faq-sign::before,.k-faq-sign::after{content:"";position:absolute;background:var(--carbon);
  transition:opacity var(--duration-fast) var(--ease-standard)}
.k-faq-sign::before{left:0;right:0;top:9px;height:var(--border-width)}
.k-faq-sign::after{top:0;bottom:0;left:9px;width:var(--border-width)}
.k-faq details[open] .k-faq-sign::after{opacity:0}
.k-faq details>p{padding-bottom:var(--space-6);max-width:64ch}

/* --- Footer -------------------------------------------------------------- */
.k-footer{padding-top:var(--space-16);padding-bottom:var(--space-10)}
/* The wordmark is 9.28:1, so a fixed height overflows a narrow column.
   Drive it from width instead and let the height follow. */
.k-footer-logo{width:min(316px,100%);height:auto;display:block}
.k-footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-10)}
@media (max-width:800px){.k-footer-cols{grid-template-columns:1fr}}
.k-footer ul{list-style:none;margin:0;padding:0}
.k-footer a{text-decoration:none;display:inline-block;padding:13px 0;line-height:1.2}
.k-footer-legal{margin-top:var(--space-12);padding-top:var(--space-6);
  border-top:var(--border-width) solid var(--carbon-80)}
.k-footer-legal p{font-size:12px;line-height:1.5;color:var(--friar-grey);max-width:none}
.k-colophon{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;
  margin-top:var(--space-6);font-size:var(--text-small);color:var(--friar-grey)}

/* ============================================================================
   MOTION
   The brand allows a plain fade, plus one native animation: the marker band
   wiping left to right across a heading. Everything below is one of those two,
   with members of a group staggered so a grid assembles instead of popping in.
   No transform, no parallax, no scroll-jacking, nothing that overshoots.
   ========================================================================== */

/* Nothing fades in. Cards, grids and panels are simply there; the only thing
   that animates on scroll is the marker band stroking across a heading.
   clip-path keeps that a true left-to-right wipe without introducing a
   gradient, which the brand does not permit. */
.k-js .k-wipe .k-highlight-line,
.k-js .k-wipe .k-highlight{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 420ms var(--ease-out)}
.k-js .k-wipe.is-in .k-highlight-line,
.k-js .k-wipe.is-in .k-highlight{clip-path:inset(0 0 0 0)}
/* Each line of a multi-line heading strokes in after the one above it. */
.k-js .k-wipe .k-highlight-line:nth-of-type(2){transition-delay:120ms}
.k-js .k-wipe .k-highlight-line:nth-of-type(3){transition-delay:240ms}
.k-js .k-wipe .k-highlight-line:nth-of-type(4){transition-delay:360ms}

/* The primary CTA breathes, so the one action on the page keeps drawing the
   eye. This is a deliberate departure from the brand's "colour and opacity
   only" motion rule, kept to 2.5% so it never reads as a bounce. */
@keyframes k-cta-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.k-js .k-btn-xl{animation:k-cta-breathe 3.4s var(--ease-standard) 1.2s infinite;
  transform-origin:center}
.k-js .k-btn-xl:hover,.k-js .k-btn-xl:focus-visible,.k-js .k-btn-xl:active{animation-play-state:paused}
.k-js .k-btn-header{animation:k-cta-breathe 3.4s var(--ease-standard) 1.2s infinite}
.k-js .k-btn-header:hover,.k-js .k-btn-header:focus-visible{animation-play-state:paused}

/* Anything that moves is switched off wholesale for reduced-motion users. */
@media (prefers-reduced-motion:reduce){
  .k-js .k-wipe .k-highlight-line,.k-js .k-wipe .k-highlight{clip-path:none;transition:none}
  .k-js .k-btn-xl,.k-js .k-btn-header{animation:none}
}

/* ============================================================================
   Lead form dialog (components/core/Dialog.jsx + Input + Radio + Button)
   ========================================================================== */
.k-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:var(--space-6);background:rgba(51,51,51,0.72)}
.k-modal.is-open{display:flex}
.k-modal-card{position:relative;width:560px;max-width:100%;max-height:94vh;max-height:94dvh;
  overflow-y:auto;background:var(--white);color:var(--carbon);padding:var(--space-8);
  border-radius:var(--radius-corner) 0 0 0;box-shadow:none}
@media (max-width:560px){
  .k-modal{padding:0;align-items:stretch}
  .k-modal-card{max-height:100dvh;border-radius:0;padding:var(--space-6)}
}
/* Close: two 2px carbon bars, drawn not imported. The icon set has no UI glyphs. */
.k-modal-x{position:absolute;top:var(--space-6);right:var(--space-6);width:28px;height:28px;
  border:0;background:transparent;color:var(--carbon);cursor:pointer;padding:0}
.k-modal-x span{position:absolute;left:3px;right:3px;top:13px;height:var(--border-width);
  background:var(--carbon)}
.k-modal-x span:first-child{transform:rotate(45deg)}
.k-modal-x span:last-child{transform:rotate(-45deg)}

.k-progress{height:4px;background:var(--carbon-12);margin-bottom:var(--space-8)}
.k-progress span{display:block;height:100%;width:33.33%;background:var(--golden-yellow);
  transition:width var(--duration-base) var(--ease-standard)}

.k-fstep{display:none}
.k-fstep.is-active{display:block}
.k-fstep .k-eyebrow{display:block;color:var(--text-muted);margin-bottom:var(--space-3)}
.k-fstep h3{margin-bottom:var(--space-3);font-size:var(--text-h3);
  font-weight:var(--weight-display-semibold)}
.k-fstep-sub{font-size:var(--text-small);color:var(--carbon);opacity:.75;margin-bottom:var(--space-6)}

/* Option = outline control. Hover fills Golden Yellow, text stays Carbon. */
.k-opt{display:block;width:100%;text-align:left;cursor:pointer;font:inherit;
  background:transparent;color:var(--carbon);border:var(--border-width) solid var(--border-strong);
  border-radius:0;padding:var(--space-4) var(--space-5);transition:var(--transition-interactive)}
.k-opt+.k-opt{margin-top:var(--space-3)}
.k-opt:hover{background:var(--golden-yellow)}
.k-opt.is-sel{background:var(--golden-yellow)}
.k-opt b{display:block;font-family:var(--font-body);font-weight:var(--weight-body-semibold);
  font-size:var(--text-body)}
.k-opt small{display:block;font-size:var(--text-small);color:var(--carbon);opacity:.7;
  margin-top:2px;line-height:1.4}
.k-opt:hover small,.k-opt.is-sel small{opacity:.85}

.k-field+.k-field{margin-top:var(--space-5)}
.k-label{display:block;font-family:var(--font-body);font-weight:var(--weight-body-semibold);
  font-size:var(--text-small);color:var(--text-heading);margin-bottom:var(--space-2)}
.k-input{font-family:var(--font-body);font-size:var(--text-body);line-height:1.4;color:var(--carbon);
  background:var(--white);border:var(--border-width) solid var(--border-strong);border-radius:0;
  padding:12px 14px;width:100%;transition:var(--transition-interactive)}
.k-input.is-invalid{border-color:var(--golden-yellow);border-width:var(--border-width-strong)}
.k-error{font-size:var(--text-small);margin-top:var(--space-3);min-height:1px}
.k-error:not(:empty){padding-left:var(--space-3);border-left:var(--border-width-strong) solid var(--golden-yellow)}
.k-back{margin-top:var(--space-5);background:transparent;border:0;cursor:pointer;font:inherit;
  font-size:var(--text-small);font-weight:var(--weight-body-semibold);color:var(--carbon);
  opacity:.65;padding:0;transition:var(--transition-interactive)}
.k-back:hover{opacity:1}
.k-fine{font-size:12px;line-height:1.5;color:var(--carbon);opacity:.65;margin-top:var(--space-4)}

.k-done-mark{width:56px;height:56px;background:var(--golden-yellow);display:flex;
  align-items:center;justify-content:center;margin-bottom:var(--space-6)}
.k-done-mark::after{content:"";width:22px;height:12px;margin-top:-6px;
  border-left:3px solid var(--carbon);border-bottom:3px solid var(--carbon);transform:rotate(-45deg)}
.k-prep{border:var(--border-width) solid var(--border-strong);padding:var(--space-5);
  margin:var(--space-6) 0}
.k-prep ul{margin:0;padding-left:var(--space-5)}
.k-prep li+li{margin-top:var(--space-2)}