/* ============================================================
   KENT.DESIGN — SURF IDENTITY (2.0.0, 2026-08-27)
   Third identity layer. Loaded after light-identity.css and
   active under body.kd-light (hardcoded server-side in 2.0.0 —
   the toggle is retired; surf is the one look).
   Halftone graphic-novel system: paper ground, ink line,
   sea teal, foam cream, one signal orange.
   ============================================================ */

body.kd-light{
  /* ---- surf token flip ---- */
  --paper:#eeecdd; --foam:#e7e8d8; --ink:#071e23; --sea-deep:#0b3e49;
  --sea:#175e6d; --sea-mist:#569094; --sky:#a8c7c8; --steel:#86918e;
  --signal:#c47e45;

  --bg0:var(--paper);
  --bg1:var(--foam);
  --panel:var(--foam);
  --panel2:#f2f0e3;
  --line:rgba(7,30,35,.28);
  --line2:rgba(7,30,35,.55);
  --text:var(--ink);
  --muted:#3f5c66;
  --cyan:var(--sea);
  --violet:var(--sea-deep);
  --pink:var(--signal);
  --grad:linear-gradient(92deg,var(--sea) 0%,var(--sea-deep) 100%);
  --cyan-rgb:23,94,109;
  --sky-rgb:11,62,73;
  --amber-rgb:196,126,69;
  --amber2-rgb:196,126,69;
  --wash-rgb:7,30,35;
  --shadow-rgb:7,30,35;
  --scrim1-rgb:238,236,221;
  --scrim2-rgb:231,232,216;
  --scrim3-rgb:238,236,221;
  --scrim4-rgb:238,236,221;
  --scrim5-rgb:238,236,221;
  --scrim6-rgb:238,236,221;
  --scrim7-rgb:231,232,216;
  --r-lg:12px; --r-md:8px; --r-sm:6px;
  background:var(--paper);
}

/* halftone drop shadow used across comic panels */
body.kd-light .ht-shadow{position:relative}
body.kd-light .ht-shadow::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:translate(9px,11px);
  background-image:radial-gradient(var(--ink) 1.3px,transparent 1.4px);
  background-size:7px 7px;opacity:.5;
}

/* skip link: visually hidden until focused (was unstyled — visible top-left on every page) */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.screen-reader-text:focus{position:fixed;top:10px;left:10px;z-index:200;width:auto;height:auto;clip-path:none;
  background:#e7e8d8;color:#071e23;border:3px solid #071e23;border-radius:6px;padding:.6em 1em;font-weight:700}

/* ---- selection + focus ---- */
body.kd-light ::selection{background:var(--sea);color:var(--foam)}
body.kd-light :focus-visible{outline:3px solid var(--sea);outline-offset:2px}

/* ---- accents: pigment, not glow ---- */
body.kd-light .accent{color:var(--sea)}
body.kd-light .grad-text,
body.kd-light .final-card h2 .grad{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--sea)}
body.kd-light .sec-tag{color:var(--sea);border:none;background:none;padding:0}

/* ============================================================
   NAV — full-width paper block, ink rule. Never over the video.
   ============================================================ */
body.kd-light .nav{
  position:sticky;top:0;left:0;right:0;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;
}
body.kd-light .nav-inner{height:74px}
body.kd-light .logo{color:var(--ink)}
body.kd-light .logo-mark{filter:none}
body.kd-light .logo-ai{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--sea)}
body.kd-light .nav-links a{color:var(--ink);font-weight:600}
body.kd-light .nav-links a:hover{color:var(--sea)}
body.kd-light .nav-links .sub{
  background:var(--foam);border:3px solid var(--ink);border-radius:8px;
  box-shadow:5px 6px 0 rgba(7,30,35,.85);
}
body.kd-light .nav-links .sub a{color:var(--ink)}
body.kd-light .nav-links .sub a:hover{background:var(--paper);color:var(--sea)}
body.kd-light .burger i{background:var(--ink)}
body.kd-light .mobile-menu{background:var(--paper);color:var(--ink)}
body.kd-light .mobile-menu a{color:var(--ink)}
body.kd-light .mm-acc{color:var(--ink)}
body.kd-light .mm-panel-in{background:var(--foam);border-radius:8px;padding:.5rem .9rem}
/* .mobile-menu a (0,1,2) beats .btn (0,1,0) and strips the CTA's horizontal padding — restore it */
body.kd-light .mobile-menu a.mm-cta{padding:.92em 1.6em}

/* ============================================================
   BUTTONS — comic: flat fill, 3px ink border, hard offset shadow
   ============================================================ */
body.kd-light .btn{
  border-radius:8px;font-weight:700;
  transition:transform .12s cubic-bezier(.2,.8,.2,1),box-shadow .12s cubic-bezier(.2,.8,.2,1),background .2s;
}
body.kd-light .btn-primary{
  background:var(--signal);color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:4px 5px 0 var(--ink);
}
body.kd-light .btn-primary:hover{
  background:#cf8b52;color:var(--ink);
  transform:translate(2px,2px);
  box-shadow:2px 3px 0 var(--ink);
}
body.kd-light .btn-ghost{
  background:var(--foam);color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:4px 5px 0 rgba(7,30,35,.35);
}
body.kd-light .btn-ghost:hover{
  background:var(--paper);border-color:var(--ink);
  transform:translate(2px,2px);
  box-shadow:2px 3px 0 rgba(7,30,35,.35);
}

/* ============================================================
   SURF HERO — video + caption box
   ============================================================ */
body.kd-light .hero-surf{
  position:relative;overflow:hidden;
  height:calc(100svh - 77px);min-height:540px;
  background:var(--sky);
}
body.kd-light .hero-surf video,
body.kd-light .hero-surf .hero-fallback{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:68% center;
}
body.kd-light .hero-surf .hero-fallback{display:none}
body.kd-light .hero-surf .hs-inner{
  position:relative;z-index:2;height:100%;
  width:min(1180px,92vw);margin:0 auto;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding-bottom:96px;
}
body.kd-light .cap-wrap{position:relative;max-width:470px;transform:rotate(-.6deg)}
body.kd-light .cap-shadow{
  position:absolute;inset:0;transform:translate(9px,11px);border-radius:8px;
  background-image:radial-gradient(var(--ink) 1.3px,transparent 1.4px);
  background-size:7px 7px;opacity:.5;
}
body.kd-light .caption{
  position:relative;background:var(--foam);
  border:3px solid var(--ink);border-radius:8px;
  padding:30px 32px 28px;
}
body.kd-light .caption h1{
  font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.03;
  letter-spacing:-.02em;margin:0 0 .55rem;color:var(--ink);
}
body.kd-light .caption .hero-sub{
  font-size:clamp(.95rem,1.25vw,1.1rem);line-height:1.5;color:var(--muted);margin:0 0 1.15rem;
}
body.kd-light .caption .hero-sub strong{color:var(--ink)}
@media (min-width:761px){
  body.kd-light .cap-wrap{max-width:580px}
  body.kd-light .caption h1{white-space:nowrap}
}
/* mobile copy swap — desktop keeps the full sentence (2.0.6) */
body.kd-light .caption .sub-short{display:none}

@media (max-width:760px){
  /* 2.0.6 — the caption was owning 45% of the hero on a phone and burying the
     board and treads. Box shrinks, drops to the floor, art gets the room back.
     NOTE: do NOT try to lift the character with a zoom/object-position crop —
     the mobile cut frames his head near the top edge in shots 2, 6 and 7, so
     anything over ~4% off the top decapitates him mid-montage. */
  /* taller hero, but always leave the ticker band peeking (nav 77 + ~53) so the
     "there's more below" cue survives on short phones */
  body.kd-light .hero-surf{height:min(86svh,calc(100svh - 130px))}
  body.kd-light .hero-surf video,
  body.kd-light .hero-surf .hero-fallback{object-position:center center}
  body.kd-light .hero-surf .hs-inner{padding-bottom:26px;z-index:3}
  body.kd-light .caption{padding:16px 20px 18px}
  body.kd-light .caption h1{font-size:1.85rem;margin-bottom:.34rem}
  body.kd-light .caption .hero-sub{font-size:.92rem;line-height:1.42;margin-bottom:.82rem}
  body.kd-light .caption .sub-full{display:none}
  body.kd-light .caption .sub-short{display:block}  /* own line — keeps the sentence break clean at every phone width */
  body.kd-light .caption .btn{padding:.72em 1.3em;font-size:.95rem;box-shadow:3px 4px 0 var(--ink)}
}
/* big phones / small tablets still on the mobile branch — keep the type in
   proportion to the canvas, the layout stays the compact one */
@media (min-width:561px) and (max-width:760px){
  body.kd-light .caption{padding:22px 26px 24px}
  body.kd-light .caption h1{font-size:2.3rem;margin-bottom:.45rem}
  body.kd-light .caption .hero-sub{font-size:1rem;margin-bottom:1rem}
  body.kd-light .caption .btn{padding:.86em 1.5em;font-size:1rem;box-shadow:4px 5px 0 var(--ink)}
}
/* 320-wide phones: headline on one line, sub reflows as one paragraph */
@media (max-width:359px){
  body.kd-light .caption h1{font-size:1.68rem}
  body.kd-light .caption .sub-short{display:inline}
}
@media (prefers-reduced-motion:reduce){
  body.kd-light .hero-surf video{display:none}
  body.kd-light .hero-surf .hero-fallback{display:block}
}

/* wave divider — fill = the section BELOW the join */
body.kd-light .sdiv{line-height:0;position:relative;z-index:2}
body.kd-light .sdiv svg{width:100%;height:64px;display:block}
body.kd-light .hero-surf .sdiv{position:absolute;left:0;right:0;bottom:-1px}
@media (max-width:760px){ body.kd-light .sdiv svg{height:42px} }

/* ============================================================
   TRADES TICKER — ink band marquee under the hero
   ============================================================ */
body.kd-light .ticker-band{
  background:var(--ink);padding:.75rem 0;overflow:hidden;
}
body.kd-light .ticker-band .ticker-track{
  display:inline-flex;align-items:center;gap:1.6rem;white-space:nowrap;
  animation:surfTicker 36s linear infinite;padding-left:1.6rem;
}
body.kd-light .ticker-band a{
  color:var(--foam);font-family:var(--font-display);font-weight:600;font-size:.95rem;
  text-decoration:none;
}
body.kd-light .ticker-band a:hover{color:var(--signal)}
body.kd-light .ticker-band i{color:var(--signal);font-style:normal}
@keyframes surfTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  body.kd-light .ticker-band .ticker-track{animation:none;flex-wrap:wrap;white-space:normal}
}

/* ============================================================
   SECTIONS — paper / foam bands
   ============================================================ */
body.kd-light .band-paper{background:var(--paper)}
body.kd-light .band-foam{background:var(--foam)}
body.kd-light .band-dark{background:var(--sea-deep)}
body.kd-light .band-dark h2,body.kd-light .band-dark .sec-head p{color:var(--foam)}
body.kd-light .band-dark .sec-tag{color:var(--sky)}
body.kd-light .band-dark p{color:#c6d6d4}

/* ---- stat band: comic tiles ---- */
body.kd-light .stat-band{background:var(--foam);padding:3.2rem 0 3.6rem}
body.kd-light .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
body.kd-light .stat{
  background:var(--paper);border:3px solid var(--ink);border-radius:10px;
  padding:1.3rem 1.2rem 1.1rem;text-align:center;
  box-shadow:5px 6px 0 rgba(7,30,35,.85);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s cubic-bezier(.2,.8,.2,1);
}
body.kd-light .stat:hover{transform:translate(-2px,-3px) rotate(-.4deg);box-shadow:8px 10px 0 rgba(7,30,35,.85)}
body.kd-light .stat-n{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--sea);line-height:1;
}
/* accent unit labels: sea, not signal — signal orange fails 3:1 at this size on paper (2.76:1 measured) */
body.kd-light .stat-n em{font-style:normal;font-size:.45em;color:var(--sea);font-weight:700}
body.kd-light .stat-l{display:block;margin-top:.5rem;color:var(--muted);font-size:.92rem;font-weight:600}
@media (max-width:900px){ body.kd-light .stat-row{grid-template-columns:repeat(2,1fr)} }

/* ---- how it works: spot art panels + number badges ---- */
body.kd-light .steps{gap:clamp(1.8rem,3.4vw,2.8rem)}
body.kd-light .step{border-top:0;padding:0}
body.kd-light .step-art{
  position:relative;background:var(--foam);
  border:3px solid var(--ink);border-radius:10px;overflow:hidden;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s cubic-bezier(.2,.8,.2,1);
}
body.kd-light .step:hover .step-art{transform:translate(-2px,-4px) rotate(-.5deg);box-shadow:9px 12px 0 rgba(7,30,35,.85)}
body.kd-light .step-art img{display:block;width:100%;height:auto}
body.kd-light .step-num{
  position:absolute;top:-15px;left:-13px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:var(--signal);border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--ink);
  transform:rotate(-6deg);
}
body.kd-light .step{overflow:visible;position:relative}
body.kd-light .step h3{margin:1.1rem 0 .45rem}
@media (max-width:900px){ body.kd-light .steps{grid-template-columns:1fr;max-width:460px;margin-inline:auto} }

/* ---- demo film strip: comic browser cards ---- */
body.kd-light .demo-strip-sec{background:var(--foam);padding-bottom:4.4rem}
body.kd-light .demo-strip{overflow:hidden;margin-top:2.4rem;padding:8px 0 14px}
body.kd-light .demo-strip-track{
  display:inline-flex;gap:1.4rem;padding-left:1.4rem;white-space:nowrap;
  animation:surfTicker 55s linear infinite;
}
body.kd-light .demo-strip:hover .demo-strip-track{animation-play-state:paused}
body.kd-light .ds-card{
  display:inline-block;width:min(340px,72vw);
  background:var(--paper);border:3px solid var(--ink);border-radius:10px;overflow:hidden;
  box-shadow:5px 6px 0 rgba(7,30,35,.85);text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
body.kd-light .ds-card:hover{transform:translateY(-5px) rotate(-.5deg)}
body.kd-light .ds-bar{
  display:flex;align-items:center;gap:.5rem;padding:.45rem .8rem;
  background:var(--foam);border-bottom:3px solid var(--ink);
}
body.kd-light .ds-bar i{width:9px;height:9px;border-radius:50%;background:var(--steel);display:inline-block}
body.kd-light .ds-bar i:first-child{background:var(--signal)}
body.kd-light .ds-bar em{font-style:normal;font-size:.75rem;color:var(--muted);margin-left:.3rem}
body.kd-light .ds-card img{display:block;width:100%;height:auto}
body.kd-light .ds-label{
  position:static;left:auto;bottom:auto;background:none;backdrop-filter:none;border-radius:0;
  display:block;padding:.7rem .9rem;color:var(--ink);letter-spacing:0;
  font-family:var(--font-display);font-weight:600;font-size:.98rem;
}
@media (prefers-reduced-motion:reduce){
  body.kd-light .demo-strip-track{animation:none}
  body.kd-light .demo-strip{overflow-x:auto}
}

/* ---- coverage map: ink + sea ---- */
body.kd-light .mp-land{fill:none;stroke:rgba(7,30,35,.35)}
body.kd-light .mp-fill{fill:rgba(23,94,109,.14)}
body.kd-light .mp-kent{fill:none;stroke:var(--sea-deep)}
body.kd-light .mp-dot{fill:var(--sea-mist)}
body.kd-light .mp-cdot{fill:var(--steel)}
body.kd-light .mp-core{fill:var(--signal);stroke:var(--ink);stroke-width:2}
body.kd-light .mp-halo{fill:rgba(196,126,69,.25)}
body.kd-light .mp-label,body.kd-light .mp-clabel{fill:var(--ink)}

/* ---- about (homepage): spot panel + company card ---- */
body.kd-light .about-art{
  background:var(--foam);border:3px solid var(--ink);border-radius:10px;overflow:hidden;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);transform:rotate(1deg);
}
body.kd-light .about-art img{display:block;width:100%;height:auto}
body.kd-light .reg-card{
  background:var(--paper);border:3px solid var(--ink);border-radius:10px;
  box-shadow:5px 6px 0 rgba(7,30,35,.85);padding:1.4rem 1.5rem;
}
body.kd-light .reg-card .reg-head{font-family:var(--font-display);font-weight:700;color:var(--ink)}
body.kd-light .reg-row dt{color:var(--muted)}
body.kd-light .reg-row dd{color:var(--ink)}
body.kd-light .reg-check{color:var(--sea);font-weight:700}

/* ---- pricing: comic panels ---- */
body.kd-light .price-card{
  background:var(--paper);border:3px solid var(--ink);border-radius:10px;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);
}
body.kd-light .price-card .pg-tick{color:var(--sea)}
body.kd-light .price-card-note{color:var(--muted)}

/* ---- FAQ: comic accordion ---- */
body.kd-light .faq-item{
  background:var(--foam);border:3px solid var(--ink);border-radius:10px;
  box-shadow:4px 5px 0 rgba(7,30,35,.55);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;
}
body.kd-light .faq-item.open{border-color:var(--ink);transform:translate(1px,1px);box-shadow:2px 3px 0 rgba(7,30,35,.55)}
body.kd-light .faq-q{color:var(--ink)}
body.kd-light .faq-q .plus{border:2px solid var(--ink);color:var(--signal);border-radius:6px}

/* ---- final CTA: caption-box card on deep sea band ---- */
body.kd-light .final{background:var(--sea-deep);padding-bottom:5rem}
body.kd-light .final-card{
  background:var(--foam);border:3px solid var(--ink);border-radius:12px;
  box-shadow:8px 10px 0 rgba(3,17,20,.75);
}
body.kd-light .final-card::before{display:none}
body.kd-light .final-card h2{color:var(--ink)}
body.kd-light .final-card>p{color:var(--muted);text-shadow:none}
body.kd-light .final-card .lead-form input,
body.kd-light .final-card .lead-form textarea,
body.kd-light .final-card .lead-form select{
  background:var(--paper);border:2px solid var(--ink);border-radius:8px;color:var(--ink);
}
body.kd-light .final-card .lead-form input::placeholder,
body.kd-light .final-card .lead-form textarea::placeholder{color:var(--muted)}

/* ============================================================
   FOOTER — deep sea band, foam crest
   ============================================================ */
body.kd-light footer{
  background:var(--ink);border-top:none;color:#9db3b3;
}
body.kd-light footer::before{display:none}
body.kd-light footer .logo,body.kd-light footer .logo-word{color:var(--foam)}
body.kd-light footer .logo-ai{color:var(--sky)}
body.kd-light footer h3{color:var(--foam)}
body.kd-light footer a{color:#c6d6d4}
body.kd-light footer a:hover{color:var(--signal)}
body.kd-light .foot-areas-line{color:#8aa0a0}
body.kd-light .foot-bottom,body.kd-light .foot-legal{color:#7e9494}

/* ============================================================
   MOTION — generous but transform-only at rest
   ============================================================ */
body.kd-light a,body.kd-light button{transition:color .2s,background .2s,transform .15s cubic-bezier(.2,.8,.2,1)}
body.kd-light .step-art img,body.kd-light .ds-card img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
body.kd-light .step:hover .step-art img{transform:scale(1.04) rotate(.4deg)}
@media (prefers-reduced-motion:reduce){
  body.kd-light *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ============================================================
   2.0.1 — FIXES + INNER-PAGE SURF SKIN (2026-08-27)
   Everything below extends the surf identity to the sub-pages
   (they previously fell back to the retired light identity) and
   fixes the mobile-pass findings.
   ============================================================ */

/* ---- mobile menu: the nav is sticky; body{overflow:hidden} makes body the
   scrollport and parks the nav at the top of the DOCUMENT, off screen on any
   scrolled page. While the menu is open, pin the bar fixed so the burger (now
   an X) stays reachable. ---- */
body.kd-light.menu-open .nav{position:fixed;top:0;left:0;right:0;z-index:100}
body.kd-light .mobile-menu{padding-top:calc(74px + 1.6rem)}

/* ---- mobile menu: "For your trade" panel. Vertical padding on the panel
   inner sizes the collapsed 0fr track (same trap as the FAQ accordion), which
   painted a stray foam bar under the closed item. Horizontal padding only;
   the first/last sub-links carry the vertical air. ---- */
body.kd-light .mm-panel-in{background:var(--foam);border-radius:8px;padding:0 .9rem}
body.kd-light .mm-acc.open + .mm-panel{border-bottom:1px solid var(--line)}

/* ---- demo film strip: fractional image heights left a 1px sliver of card
   showing between screenshot and label. An ink rule makes the joint a drawn
   panel edge instead. ---- */
body.kd-light .ds-card img{margin-bottom:-1px}
body.kd-light .ds-label{border-top:3px solid var(--ink)}

/* ---- guarantee stamp: comic card ---- */
body.kd-light .guar-card{
  background:var(--foam);border:3px solid var(--ink);border-radius:10px;
  box-shadow:5px 6px 0 rgba(7,30,35,.85);padding:1.4rem 1.5rem;
}
body.kd-light .guar-card:hover{transform:translate(-2px,-3px);box-shadow:8px 10px 0 rgba(7,30,35,.85)}
body.kd-light .guar-stamp{color:var(--sea);transform:rotate(-9deg)}
body.kd-light .gs-tick{stroke:var(--signal)}
body.kd-light .guar-copy h3{color:var(--ink)}
body.kd-light .guar-copy p{color:var(--muted)}

/* ---- final CTA card: light-identity pins dark-band tokens on .final-card,
   which left grey-blue copy and pale placeholders on the foam card. Re-pin to
   surf ink so the card is readable. ---- */
body.kd-light .final-card{
  --text:#071e23;--muted:#3f5c66;--cyan:#175e6d;--violet:#0b3e49;--pink:#c47e45;
  --line:rgba(7,30,35,.28);--line2:rgba(7,30,35,.55);
  --grad:none;--wash-rgb:7,30,35;--cyan-rgb:23,94,109;--sky-rgb:11,62,73;
  --scrim4-rgb:238,236,221;--c-707a99:#3f5c66;--c-93a0bf:#3f5c66;--c-c9d3ee:#3f5c66;
  --c-0b0f1e:#eeecdd;--c-ffffff:#071e23;
  color:var(--ink);
}
body.kd-light .final-card h2{color:var(--ink)}
body.kd-light .final-card>p,body.kd-light .final-card .fcta-copy>p{color:#3f5c66;text-shadow:none}
body.kd-light .final .tilt-stage::after{display:none}
body.kd-light .final-card .lead-form input:focus,
body.kd-light .final-card .lead-form textarea:focus,
body.kd-light .final-card .lead-form select:focus{border-color:var(--sea);box-shadow:0 0 0 4px rgba(23,94,109,.18)}

/* shared CTA band (parts/cta.php): copy left, paddle-out spot right */
body.kd-light .final-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,3.5vw,3rem);
  align-items:center;text-align:left}
body.kd-light .final-split .fcta-copy h2{margin-bottom:1rem}
body.kd-light .final-split .fcta-copy>p{max-width:34em;margin:0 0 1.8rem}
body.kd-light .fcta-art{margin:0}
body.kd-light .fcta-art img{
  display:block;width:100%;height:auto;border-radius:10px;
  border:3px solid var(--ink);box-shadow:6px 7px 0 rgba(7,30,35,.85);
  transform:rotate(1.2deg);background:var(--foam);
}
@media (max-width:760px){
  body.kd-light .final-split{grid-template-columns:1fr;text-align:center}
  body.kd-light .final-split .fcta-copy>p{margin-inline:auto}
  body.kd-light .fcta-art{max-width:300px;margin:0 auto}
}

/* ============================================================
   SUB-PAGE CHROME
   ============================================================ */

/* page heroes: the fixed-nav era top padding left a fold of blank paper under
   a sticky bar. Tighten, and colour the pieces with pigment not gradients. */
body.kd-light .page-hero{padding:clamp(2.8rem,6vh,4.5rem) 0 clamp(2rem,4.5vw,3.2rem)}
body.kd-light .page-hero-tall{min-height:0;display:block}
body.kd-light .page-hero h1 .grad,
body.kd-light .page-hero h1 .hl.grad{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--sea)}
body.kd-light .page-hero .lead{color:var(--muted)}
body.kd-light .page-hero .lead strong{color:var(--ink)}

/* hero art panel (pricing, hubs, faq, contact, vs-diy…) */
body.kd-light .ph-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4.5vw,4rem);align-items:center;text-align:left}
body.kd-light .ph-grid .lead{margin-left:0}
body.kd-light .ph-art{margin:0}
body.kd-light .ph-panel{
  background:var(--foam);border:3px solid var(--ink);border-radius:10px;overflow:hidden;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);transform:rotate(1.2deg);
}
body.kd-light .ph-panel img{display:block;width:100%;height:auto}
@media (max-width:820px){
  body.kd-light .ph-grid{grid-template-columns:1fr;text-align:left}
  body.kd-light .ph-art{max-width:340px;margin-top:1.8rem}
}

/* legacy anchor glyphs (trade fallback heroes): no neon glow on paper */
body.kd-light .anchor-wrap img{filter:none}

/* pain cards / promise cards (.stat-card) — were bare white boxes */
body.kd-light .stat-card{
  background:var(--foam);border:3px solid var(--ink);border-radius:10px;
  box-shadow:5px 6px 0 rgba(7,30,35,.55);padding:1.35rem 1.4rem 1.3rem;
}
body.kd-light .stat-card:hover{transform:translate(-2px,-3px) rotate(-.3deg);box-shadow:8px 10px 0 rgba(7,30,35,.55)}
body.kd-light .stat-card h3{color:var(--ink)}
body.kd-light .stat-card p,body.kd-light .stat-card .pain-p{color:var(--muted)}
body.kd-light .stat-num{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--sea)}

/* feature rows */
body.kd-light .feat{border-top:2px solid rgba(7,30,35,.35)}
body.kd-light .feat h3{color:var(--ink)}
body.kd-light .feat p{color:var(--muted)}
body.kd-light .feat .ico,body.kd-light .grow-list .ico{color:var(--sea)}

/* grow / upsell panels */
body.kd-light .grow{
  background:var(--foam);border:3px solid var(--ink);border-radius:12px;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);
}
body.kd-light .grow p{color:var(--muted)}
body.kd-light .grow-item{border-top:2px solid rgba(7,30,35,.25)}
body.kd-light .grow-item p{color:var(--muted)}
body.kd-light .grow-list.icons .grow-item .ico{color:var(--sea)}

/* checklists */
body.kd-light .check-list li{color:var(--ink)}
body.kd-light .check-list li::before{color:var(--sea)}
body.kd-light .check-list.x li::before{color:var(--steel)}

/* hub cards (trades + areas) */
body.kd-light .hub-card{
  background:var(--foam);border:3px solid var(--ink);border-radius:10px;
  box-shadow:5px 6px 0 rgba(7,30,35,.85);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s cubic-bezier(.2,.8,.2,1);
}
body.kd-light .hub-card:hover{transform:translate(-2px,-4px) rotate(-.4deg);border-color:var(--ink);box-shadow:8px 10px 0 rgba(7,30,35,.85)}
body.kd-light .hub-card h2,body.kd-light .hub-card h3{color:var(--ink)}
body.kd-light .hub-card span{color:var(--muted)}
body.kd-light .hub-card img{width:130px;height:auto;border-radius:6px}
body.kd-light .hub-card .hub-icon{width:76px;height:76px;margin:0 auto .8rem}

/* comparison table */
body.kd-light .kd-table-wrap{background:var(--paper);border:3px solid var(--ink);border-radius:10px;box-shadow:5px 6px 0 rgba(7,30,35,.85)}
body.kd-light .kd-table th,body.kd-light .kd-table td{border-bottom:1px solid rgba(7,30,35,.22)}
body.kd-light .kd-table thead th{color:var(--muted)}
body.kd-light .kd-table td:first-child{color:var(--muted)}
body.kd-light .kd-table .good{color:var(--sea)}
body.kd-light .kd-table .bad{color:var(--muted)}
body.kd-light .kd-table .kd-col{background:rgba(23,94,109,.08)}

/* how-it-works timeline */
body.kd-light .tl-item{border-top:2px solid rgba(7,30,35,.35)}
body.kd-light .tl-item .tl-num{color:var(--sea);font-weight:700}
body.kd-light .tl-item p{color:var(--muted)}
body.kd-light .tl-cta{color:var(--ink);border-bottom-color:rgba(7,30,35,.45)}
body.kd-light .tl-cta:hover{color:var(--sea);border-color:var(--sea)}
body.kd-light .hiw-video video{border:3px solid var(--ink);border-radius:10px;box-shadow:6px 7px 0 rgba(7,30,35,.85);background:var(--foam)}
body.kd-light .hiw-video figcaption{color:var(--muted)}

/* trade-page showstopper CHROME (mock site content inside stays untouched) */
body.kd-light .td-watch{color:var(--sea)}
body.kd-light .td-pulse{background:var(--sea);box-shadow:0 0 8px rgba(23,94,109,.6)}
body.kd-light .td-browser{
  background:var(--paper);border:3px solid var(--ink);border-radius:10px;
  box-shadow:8px 9px 0 rgba(7,30,35,.85);
}
body.kd-light .td-bbar{background:var(--foam);border-bottom:3px solid var(--ink)}
body.kd-light .td-dots i:nth-child(1){background:var(--signal)}
body.kd-light .td-dots i:nth-child(2){background:var(--steel)}
body.kd-light .td-dots i:nth-child(3){background:var(--steel)}
body.kd-light .td-url{background:var(--paper);border:2px solid rgba(7,30,35,.4);color:var(--muted)}
body.kd-light .td-chip{border:2px solid var(--ink);color:var(--ink);background:var(--paper)}
body.kd-light .td-chip.after{color:var(--foam);border-color:var(--ink);background:var(--sea)}
body.kd-light .td-beam{background:linear-gradient(180deg,transparent,rgba(196,126,69,.95) 30%,rgba(23,94,109,.9) 70%,transparent);
  box-shadow:0 0 26px rgba(196,126,69,.6),0 0 70px rgba(196,126,69,.3)}
body.kd-light .td-seg{background:var(--foam);border:3px solid var(--ink);border-radius:999px;backdrop-filter:none}
body.kd-light .td-seg button{color:var(--ink)}
body.kd-light .td-seg button.on{background:var(--sea);color:var(--foam)}
body.kd-light .td-seg button.replay{color:var(--sea)}
body.kd-light .td-cap-r{color:var(--muted)}

/* editor prose + legal prose */
body.kd-light .kd-editor p,body.kd-light .kd-editor li,
body.kd-light .prose p,body.kd-light .prose li{color:var(--muted)}
body.kd-light .kd-editor strong,body.kd-light .prose strong{color:var(--ink)}
body.kd-light .kd-editor a,body.kd-light .prose a{color:var(--sea)}
body.kd-light .kd-editor blockquote{border-left:3px solid var(--signal);color:var(--ink)}
body.kd-light .kd-editor img{border:3px solid var(--ink);border-radius:10px}
body.kd-light .kd-editor th{color:var(--ink)}
body.kd-light .kd-editor th,body.kd-light .kd-editor td{border-bottom:1px solid rgba(7,30,35,.22)}

/* lead form on paper pages (contact) */
body.kd-light .lead-form input,body.kd-light .lead-form textarea,body.kd-light .lead-form select{
  background:var(--paper);border:2px solid var(--ink);border-radius:8px;color:var(--ink);
}
body.kd-light .lead-form input::placeholder,body.kd-light .lead-form textarea::placeholder{color:#3f5c66}
body.kd-light .lead-form select{color:#3f5c66}
body.kd-light .lead-form select.filled{color:var(--ink)}
body.kd-light .lead-form select option{background:var(--paper);color:var(--ink)}
body.kd-light .lead-form input:focus,body.kd-light .lead-form textarea:focus,body.kd-light .lead-form select:focus{
  border-color:var(--sea);box-shadow:0 0 0 4px rgba(23,94,109,.18)}
body.kd-light .lf-error{color:#8a2f22;background:rgba(196,126,69,.14);border:2px solid #8a2f22}

/* thank-you card */
body.kd-light .ty-card{background:var(--foam);border:3px solid var(--ink);border-radius:12px;box-shadow:6px 7px 0 rgba(7,30,35,.85)}
body.kd-light .ty-steps div{color:var(--muted)}
body.kd-light .ty-steps b{color:var(--ink)}
body.kd-light .ty-steps .n{color:var(--foam);background:var(--sea);border:2px solid var(--ink)}

/* blog listing + posts */
body.kd-light .post-card,body.kd-light .post-feature,body.kd-light .pn-link{
  background:var(--paper);border:3px solid var(--ink);border-radius:10px;
  box-shadow:5px 6px 0 rgba(7,30,35,.55);
}
body.kd-light .post-card:hover,body.kd-light .post-feature:hover{border-color:var(--ink);transform:translateY(-4px)}
body.kd-light .pn-link:hover{border-color:var(--ink);transform:translate(-1px,-2px)}
body.kd-light .pf-tag,body.kd-light .pn-label,body.kd-light .post-kicker,body.kd-light .pf-more{color:var(--sea)}
body.kd-light .pf-title a,body.kd-light .pc-title a,body.kd-light .pn-title{color:var(--ink)}
body.kd-light .pf-title a:hover,body.kd-light .pc-title a:hover{color:var(--sea)}
body.kd-light .pf-intro,body.kd-light .pc-intro{color:var(--muted)}
body.kd-light .pf-meta,body.kd-light .pc-meta,body.kd-light .post-meta{color:#4f676f}
body.kd-light .post-meta .pm-by{color:var(--ink)}
body.kd-light .pc-media,body.kd-light .pf-media{background:var(--foam)}
body.kd-light .post-hero img{border:3px solid var(--ink);border-radius:10px;box-shadow:6px 7px 0 rgba(7,30,35,.85)}
body.kd-light .post-pager a,body.kd-light .post-pager span{border:2px solid rgba(7,30,35,.45);color:var(--muted);border-radius:8px}
body.kd-light .post-pager a:hover{border-color:var(--ink);color:var(--sea)}
body.kd-light .post-pager .current{border-color:var(--ink);color:var(--foam);background:var(--sea)}
body.kd-light .pc-placeholder{background:var(--foam)}

/* ============================================================
   FOOTER — wave joint, heading order fix, tidy areas columns
   ============================================================ */
body.kd-light footer{margin-top:0;position:relative;overflow:visible;padding-top:2.4rem}
body.kd-light .foot-wave{position:absolute;left:0;right:0;top:-56px;height:57px;line-height:0;pointer-events:none}
body.kd-light .foot-wave svg{width:100%;height:100%;display:block}
body.kd-light .foot-h{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--foam);margin-bottom:1.05rem}
body.kd-light .foot-h a{color:inherit}
body.kd-light .foot-h a:hover{color:var(--signal)}
body.kd-light .foot-mega{grid-template-columns:1.4fr .7fr 1fr}
@media (max-width:900px){body.kd-light .foot-mega{grid-template-columns:1fr 1fr}}
@media (max-width:540px){body.kd-light .foot-mega{grid-template-columns:1fr}}
body.kd-light .foot-areas-cols{column-count:2;column-gap:1.6rem}
body.kd-light .foot-areas-cols a{display:flex;align-items:center;min-height:40px;padding:.15em 0;
  font-size:.88rem;color:#c6d6d4;break-inside:avoid}
body.kd-light .foot-areas-cols a:hover{color:var(--signal)}
@media (max-width:540px){body.kd-light .foot-areas-cols{column-count:2}}

/* ---- about page (2.0.1 rebuild) ---- */
body.kd-light .about-hero2{padding-bottom:clamp(1.6rem,3vw,2.4rem)}
body.kd-light .about-hero2 h1 .hl{display:inline}
body.kd-light .about-coast{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);background:var(--sky)}
body.kd-light .about-coast img{display:block;width:100%;height:clamp(220px,32vw,420px);object-fit:cover;object-position:center 40%}
body.kd-light .founder-frame{margin:0;background:var(--foam);border:3px solid var(--ink);border-radius:10px;overflow:hidden;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);transform:rotate(1deg)}
body.kd-light .founder-frame img{display:block;width:100%;height:auto}
body.kd-light .founder-frame figcaption{padding:.8rem 1rem;border-top:3px solid var(--ink);
  font-size:.85rem;color:var(--muted);background:var(--paper)}
body.kd-light .founder-frame figcaption a{color:var(--sea);font-weight:600}
body.kd-light .as-line{color:var(--ink)}
body.kd-light .about-pull{color:var(--ink)}
body.kd-light .stat-card a{color:var(--sea);font-weight:600}
body.kd-light #seo .seo-grid{align-items:center}

/* area hub cards carry the town vignettes edge to edge (body carries the template class) */
body.kd-light.page-template-page-areas-hub .hub-card{overflow:hidden;padding:0 0 1.1rem;text-align:center}
body.kd-light.page-template-page-areas-hub .hub-card img{width:100%;height:auto;border-radius:0;border-bottom:3px solid var(--ink);margin-bottom:.85rem}
body.kd-light.page-template-page-areas-hub .hub-card h2{font-size:1.05rem;padding:0 .8rem;margin:0}

/* stat band: light-identity re-pins its tokens to the old dark band — restore surf ink */
body.kd-light .stat-band{--text:#071e23;--muted:#3f5c66;--line:rgba(7,30,35,.28);color:var(--ink)}

/* ============================================================
   2.0.2 — ROUND 2 (2026-08-27 evening): nav, dropdown, icons,
   promises on the homepage, seascape CTA band, trade-hero art
   ============================================================ */

/* ---- nav bar: sits on the spot-art cream so it reads as its own band ---- */
body.kd-light .nav,
body.kd-light.menu-open .nav{background:#e7e4cc}

/* ---- desktop dropdown: detached comic card with a caret, hover-bridged ---- */
body.kd-light .nav-links .sub{
  background:transparent;border:none;box-shadow:none;border-radius:0;
  min-width:272px;padding:calc(14px + .6rem) .6rem .75rem;
}
body.kd-light .nav-links .sub::before{
  content:"";position:absolute;inset:14px 0 0 0;z-index:-1;
  background:var(--foam);border:3px solid var(--ink);border-radius:10px;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);
}
body.kd-light .nav-links .sub::after{
  content:"";position:absolute;top:8px;left:50%;width:14px;height:14px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--foam);border-left:3px solid var(--ink);border-top:3px solid var(--ink);
}
body.kd-light .nav-links .sub a{color:var(--ink);font-weight:600;border-radius:8px;padding:.42em .7em;gap:.65rem}
body.kd-light .nav-links .sub a:hover{background:var(--paper);color:var(--sea)}
body.kd-light .sub img.sub-ico{width:26px;height:26px;flex:0 0 auto;display:block;opacity:1}
body.kd-light .nav-links .sub .sub-all{
  position:relative;margin-top:.55rem;padding-top:.95rem;
  border-top:none;color:var(--sea);font-weight:700;
}
body.kd-light .nav-links .sub .sub-all::before{
  content:"";position:absolute;top:.28rem;left:.25rem;right:.25rem;height:2px;
  background:rgba(7,30,35,.16);border-radius:2px;
}
body.kd-light .nav-links .sub .sub-all:hover::before{background:rgba(7,30,35,.16)}
body.kd-light .nav-links .sub .sub-arrow{margin-left:auto;transition:transform .18s ease}
body.kd-light .nav-links .sub .sub-all:hover .sub-arrow{transform:translateX(3px)}

/* ---- how-it-works: number badges were clipped by the panel (overflow:hidden
   squashed them to a sliver). Panel overflows visible; the image clips itself. ---- */
body.kd-light .step-art{overflow:visible}
body.kd-light .step-art img{border-radius:7px}
body.kd-light .step:hover .step-art img{transform:none}
body.kd-light .step-num{width:46px;height:46px;font-size:1.3rem;line-height:1}

/* ---- pricing: spot art inside the "What gets built" panel ---- */
body.kd-light .price-art{margin-top:1.7rem}
body.kd-light .price-art img{
  display:block;width:min(430px,92%);height:auto;margin:0 auto;
  border:3px solid var(--ink);border-radius:8px;background:var(--foam);
  box-shadow:4px 5px 0 rgba(7,30,35,.55);transform:rotate(-1deg);
}

/* ---- promises: badge icons, tilt, hover pop ---- */
body.kd-light .promise-cards{margin-top:3rem;row-gap:3.2rem}
body.kd-light .promise-card{position:relative;overflow:visible;padding-top:2.5rem}
body.kd-light .promise-card:nth-child(3n+1){transform:rotate(-.5deg)}
body.kd-light .promise-card:nth-child(3n+2){transform:rotate(.4deg)}
body.kd-light .promise-card:hover{transform:translate(-2px,-4px) rotate(0)}
body.kd-light .promise-ico{position:absolute;top:-27px;left:1rem;width:56px;height:56px;
  filter:drop-shadow(3px 4px 0 rgba(7,30,35,.35));
  transition:transform .25s cubic-bezier(.2,.8,.2,1)}
body.kd-light .promise-card:hover .promise-ico{transform:rotate(-8deg) scale(1.08)}
body.kd-light .promise-ico img{display:block;width:100%;height:100%}

/* ---- final CTA bands: night-sea backdrop behind the caption card ---- */
body.kd-light .final{
  position:relative;
  background:#e9edd6 url(../surf/sea-band-day.webp) center 62%/cover no-repeat;
}
body.kd-light .final::before{content:"";position:absolute;inset:0;background:rgba(7,30,35,.22);pointer-events:none}
body.kd-light .final .container{position:relative;z-index:1}

/* ---- feature rows / grow lists / checklists: roundel icons, brand energy ---- */
body.kd-light .feat .ico{
  display:grid;place-items:center;width:52px;height:52px;margin-bottom:.8rem;
  border:3px solid var(--ink);border-radius:50%;background:var(--foam);color:var(--sea);
  box-shadow:3px 4px 0 rgba(7,30,35,.35);
}
body.kd-light .feat .ico svg{width:24px;height:24px;stroke-width:2}
body.kd-light .grow-item .ico{
  display:grid;flex:0 0 52px;width:52px;height:52px;place-items:center;
  border:3px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--sea);
  box-shadow:3px 4px 0 rgba(7,30,35,.35);
}
body.kd-light .grow-item .ico svg{width:26px;height:26px;stroke-width:1.8}
body.kd-light .grow-item .ico:has(img){border:none;background:none;box-shadow:none}
body.kd-light .grow-item .ico img{width:52px !important;height:52px !important;display:block}
body.kd-light .check-list li{align-items:center;gap:.85rem}
body.kd-light .check-list li::before{
  content:"✓";display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;
  border:2.5px solid var(--ink);border-radius:50%;background:var(--foam);color:var(--sea);
  font-weight:800;font-size:.9rem;box-shadow:2px 3px 0 rgba(7,30,35,.3);
}
body.kd-light .check-list.x li::before{content:"✕";color:var(--steel)}

/* ---- footer: the Areas heading picked up the link size; match Explore ---- */
body.kd-light .foot-h a{font-size:inherit;display:inline-flex;min-height:0;padding:0}

/* ============================================================
   2.0.3 — ROUND 3 (2026-08-27 night): pricing sections rebuilt,
   day-sea CTA band, how-it-works comic steps, area rail CTA
   ============================================================ */

/* ---- homepage pricing: head + spot on top (art out of the card, no more
   box-in-box), two equal panels, one closing band ---- */
body.kd-light .price-top{
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(1.8rem,4vw,3.4rem);align-items:center;margin-bottom:clamp(2rem,4vw,3rem);
}
body.kd-light .price-top .price-head{max-width:none;margin-bottom:0}
body.kd-light .price-spot{margin:0}
body.kd-light .price-spot .ph-panel{transform:rotate(-1.2deg)}
body.kd-light .price-chips{
  list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem;
}
body.kd-light .price-chips li{
  font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.02em;
  color:var(--ink);background:var(--foam);border:2.5px solid var(--ink);border-radius:999px;
  padding:.42rem .95rem;box-shadow:3px 3px 0 rgba(7,30,35,.75);
}
body.kd-light .price-cards.price-cards-2{
  grid-template-columns:1.42fr 1fr;align-items:stretch;margin-bottom:clamp(1.8rem,3.5vw,2.6rem);
}
body.kd-light .price-cards-2 .price-card{display:flex;flex-direction:column}
body.kd-light .price-cards-2 .price-card .price-card-note{margin-top:auto}

/* closing band: stamp + the small print + the button, one comic card */
body.kd-light .price-close{
  margin-top:clamp(2.6rem,5vw,4rem);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;
  background:var(--foam);border:3px solid var(--ink);border-radius:12px;
  box-shadow:7px 8px 0 rgba(7,30,35,.85);padding:clamp(1.4rem,3vw,2.1rem) clamp(1.4rem,3vw,2.2rem);
}
body.kd-light .price-close .guar-card{
  background:none;border:none;box-shadow:none;padding:0;margin:0;
  flex-direction:column;text-align:center;gap:.7rem;width:250px;max-width:250px;
}
body.kd-light .price-close .guar-card:hover{transform:none;box-shadow:none}
body.kd-light .price-close .guar-stamp{width:120px;height:120px}
body.kd-light .price-close .guar-copy h3{font-size:1rem}
body.kd-light .price-close .guar-copy p{font-size:.9rem}
body.kd-light .price-close-copy p{color:var(--muted);margin-bottom:1rem;max-width:62ch}
body.kd-light .price-close-copy .btn{margin-top:.4rem}
body.kd-light .price-close-copy .price-note{margin:.9rem 0 0;font-size:.9rem}
@media (max-width:900px){
  body.kd-light .price-top{grid-template-columns:1fr}
  body.kd-light .price-spot{max-width:420px;margin-inline:auto}
  body.kd-light .price-cards.price-cards-2{grid-template-columns:1fr}
  body.kd-light .price-close{grid-template-columns:1fr;text-align:left}
  body.kd-light .price-close .guar-card{width:auto;max-width:none;flex-direction:row;text-align:left;gap:1.2rem}
  body.kd-light .price-close .guar-stamp{width:92px;height:92px}
}

/* ---- CTA bands: daylight sea. The ink scrim that carried the night version
   would only mud a light image, so it goes; the card keeps its own contrast. ---- */
body.kd-light .final::before{background:rgba(238,236,221,.18)}

/* ---- how it works page: the six steps as an alternating comic reel.
   The old .timeline was a rule and a paragraph — no art, no energy. ---- */
body.kd-light .hiw-steps{
  position:relative;display:flex;flex-direction:column;
  gap:clamp(2.6rem,5vw,4.2rem);margin-top:clamp(2.4rem,4vw,3.4rem);
}
body.kd-light .hiw-steps::before{
  content:"";position:absolute;left:50%;top:2rem;bottom:2rem;width:0;
  border-left:4px dashed rgba(7,30,35,.16);transform:translateX(-2px);
}
body.kd-light .hiw-step{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.8rem,4.4vw,4rem);align-items:center;
}
body.kd-light .hiw-step:nth-child(even) .hiw-step-art{order:2}
body.kd-light .hiw-step:nth-child(even) .hiw-step-copy{order:1}
body.kd-light .hiw-step-art{
  position:relative;background:var(--foam);
  border:3px solid var(--ink);border-radius:10px;
  box-shadow:7px 8px 0 rgba(7,30,35,.85);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1);
}
body.kd-light .hiw-step:nth-child(odd) .hiw-step-art{transform:rotate(-1.1deg)}
body.kd-light .hiw-step:nth-child(even) .hiw-step-art{transform:rotate(1.1deg)}
body.kd-light .hiw-step:hover .hiw-step-art{transform:rotate(0) translate(-2px,-4px);box-shadow:10px 13px 0 rgba(7,30,35,.85)}
body.kd-light .hiw-step-art img{display:block;width:100%;height:auto;border-radius:7px}
body.kd-light .hiw-step-art .step-num{
  position:absolute;top:-18px;left:-16px;z-index:2;
  width:52px;height:52px;font-size:1.45rem;
}
body.kd-light .hiw-step:nth-child(even) .hiw-step-art .step-num{left:auto;right:-16px;transform:rotate(6deg)}
body.kd-light .hiw-step-copy h3{font-size:clamp(1.25rem,2.3vw,1.6rem);line-height:1.15;margin-bottom:.7rem;color:var(--ink)}
body.kd-light .hiw-step-copy p{color:var(--muted);max-width:46ch;margin:0}
body.kd-light .hiw-steps-sec .tl-cta-row{text-align:center;margin-top:clamp(2.4rem,4vw,3.4rem)}
@media (max-width:820px){
  body.kd-light .hiw-steps::before{display:none}
  body.kd-light .hiw-step{grid-template-columns:1fr;gap:1.3rem}
  body.kd-light .hiw-step:nth-child(even) .hiw-step-art{order:0}
  body.kd-light .hiw-step:nth-child(even) .hiw-step-copy{order:1}
  body.kd-light .hiw-step-art{max-width:420px}
  body.kd-light .hiw-step:nth-child(even) .hiw-step-art .step-num{left:-14px;right:auto;transform:rotate(-6deg)}
  body.kd-light .hiw-step-copy p{max-width:none}
}

/* ---- feature rows as comic cards (the bare-rule version read as filler) ---- */
body.kd-light .feat-grid.feat-cards{gap:clamp(1.4rem,3vw,2.2rem);row-gap:clamp(2.4rem,4vw,3rem)}
body.kd-light .feat-cards .feat{
  position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:10px;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);padding:2.4rem 1.5rem 1.6rem;border-top:3px solid var(--ink);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
body.kd-light .feat-cards .feat:nth-child(2n){transform:rotate(.5deg)}
body.kd-light .feat-cards .feat:nth-child(2n+1){transform:rotate(-.45deg)}
body.kd-light .feat-cards .feat:hover{transform:rotate(0) translate(-2px,-4px);box-shadow:9px 12px 0 rgba(7,30,35,.85)}
body.kd-light .feat-cards .feat .ico{
  position:absolute;top:-26px;left:1.2rem;margin:0;width:54px;height:54px;
  box-shadow:3px 4px 0 rgba(7,30,35,.35);
}
body.kd-light .feat-cards .feat h3{margin-bottom:.45rem}
body.kd-light .feat-cards .feat p{color:var(--muted)}

/* ---- "where does AI fit in": was a centred wall of prose ---- */
body.kd-light .ai-grid{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(1.8rem,4vw,3.6rem);align-items:center;
}
body.kd-light .ai-copy h2{margin-bottom:1.1rem}
body.kd-light .ai-copy>p{color:var(--muted);margin-bottom:1.2rem;max-width:52ch}
body.kd-light .ai-callout{
  background:var(--sea-deep);border:3px solid var(--ink);border-radius:10px;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);padding:1.3rem 1.5rem;margin:1.6rem 0;
  transform:rotate(-.6deg);
}
body.kd-light .ai-callout p{
  margin:0;color:var(--foam);font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.02rem,1.9vw,1.2rem);line-height:1.4;
}
body.kd-light .ai-facts{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.7rem}
body.kd-light .ai-facts li{
  position:relative;color:var(--muted);padding-left:2.1rem;line-height:1.5;
}
body.kd-light .ai-facts li::before{
  content:"";position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:50%;
  background:var(--foam);border:2.5px solid var(--ink);
}
body.kd-light .ai-facts li::after{
  content:"";position:absolute;left:6.5px;top:.52em;width:9px;height:5px;
  border-left:2.5px solid var(--sea);border-bottom:2.5px solid var(--sea);transform:rotate(-45deg);
}
body.kd-light .ai-facts strong{color:var(--ink)}
body.kd-light .ai-art .ph-panel{transform:rotate(1.2deg)}
@media (max-width:820px){
  body.kd-light .ai-grid{grid-template-columns:1fr}
  body.kd-light .ai-art{max-width:400px;margin-inline:auto}
}

/* ---- pricing page: art + copy split (replaces the prose walls) ---- */
body.kd-light .pr-split{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(1.8rem,4vw,3.6rem);align-items:center;
  margin-top:clamp(2rem,4vw,3rem);
}
body.kd-light .pr-split-flip{grid-template-columns:1.1fr .9fr}
body.kd-light .pr-split-art .ph-panel{transform:rotate(-1.2deg)}
body.kd-light .pr-split-flip .pr-split-art .ph-panel{transform:rotate(1.2deg)}
body.kd-light .pr-split-copy h2{margin-bottom:1.1rem}
body.kd-light .pr-split-copy h3{
  font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.2;margin-bottom:.7rem;color:var(--ink);
}
body.kd-light .pr-split-copy p{color:var(--muted);margin-bottom:1.1rem;max-width:54ch}
@media (max-width:820px){
  body.kd-light .pr-split,body.kd-light .pr-split-flip{grid-template-columns:1fr}
  body.kd-light .pr-split-art{max-width:400px;margin-inline:auto;order:-1}
  body.kd-light .pr-split-copy p{max-width:none}
}

/* ---- "leave with everything" ledger: roundel + one line each ---- */
body.kd-light .own-list{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:.9rem}
body.kd-light .own-item{display:flex;align-items:flex-start;gap:.95rem}
body.kd-light .own-ico{
  flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;
  border:3px solid var(--ink);border-radius:50%;background:var(--foam);color:var(--sea);
  box-shadow:3px 3px 0 rgba(7,30,35,.35);
}
body.kd-light .own-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.kd-light .own-txt{color:var(--muted);line-height:1.5;padding-top:.35rem}
body.kd-light .own-txt strong{color:var(--ink);display:block;font-family:var(--font-display);font-size:1.02rem}

/* ---- who it's for: one yes card, one no card. The old version repeated
   "For you if…" four times with the same tick. ---- */
body.kd-light .fit-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem);
  margin-top:clamp(2rem,4vw,2.8rem);align-items:start;
}
body.kd-light .fit-card{
  border:3px solid var(--ink);border-radius:12px;padding:1.6rem 1.7rem 1.8rem;
  box-shadow:7px 8px 0 rgba(7,30,35,.85);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
body.kd-light .fit-card:hover{transform:translate(-2px,-4px);box-shadow:10px 12px 0 rgba(7,30,35,.85)}
body.kd-light .fit-yes{background:var(--foam);transform:rotate(-.5deg)}
body.kd-light .fit-no{background:var(--paper);transform:rotate(.5deg)}
body.kd-light .fit-card:hover{transform:rotate(0) translate(-2px,-4px)}
body.kd-light .fit-card h3{
  display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem;
  font-size:1.12rem;color:var(--ink);
}
body.kd-light .fit-badge{
  flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;
  border:3px solid var(--ink);border-radius:50%;
  box-shadow:3px 3px 0 rgba(7,30,35,.4);
}
body.kd-light .fit-badge svg{width:20px;height:20px}
body.kd-light .fit-yes .fit-badge{background:var(--signal);color:var(--ink)}
body.kd-light .fit-no .fit-badge{background:var(--foam);color:var(--steel)}
body.kd-light .fit-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
body.kd-light .fit-card li{
  position:relative;color:var(--muted);line-height:1.5;padding-left:1.5rem;
}
body.kd-light .fit-card li::before{
  content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;
  background:var(--sea);
}
body.kd-light .fit-no li::before{background:var(--steel)}
@media (max-width:760px){ body.kd-light .fit-grid{grid-template-columns:1fr} }
/* section headings inside the split blocks match the rest of the page */
body.kd-light .pr-split-copy h2{font-size:clamp(1.55rem,3vw,2.3rem);line-height:1.08;letter-spacing:-.02em}
body.kd-light .ai-copy h2{font-size:clamp(1.55rem,3vw,2.3rem);line-height:1.08;letter-spacing:-.02em}

/* ---- one-off buyout: a note, not a third essay ---- */
body.kd-light .buyout-card{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:center;
  background:var(--foam);border:3px solid var(--ink);border-radius:12px;
  box-shadow:7px 8px 0 rgba(7,30,35,.85);padding:clamp(1.5rem,3vw,2.1rem) clamp(1.5rem,3vw,2.2rem);
}
body.kd-light .buyout-tag{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.2rem);
  color:var(--ink);background:var(--signal);border:3px solid var(--ink);border-radius:10px;
  padding:.7rem 1.1rem;box-shadow:4px 5px 0 rgba(7,30,35,.6);transform:rotate(-2.5deg);white-space:nowrap;
}
body.kd-light .buyout-copy h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:.8rem}
body.kd-light .buyout-copy p{color:var(--muted);margin-bottom:.9rem;max-width:66ch}
body.kd-light .buyout-copy p:last-child{margin-bottom:0}
@media (max-width:700px){
  body.kd-light .buyout-card{grid-template-columns:1fr}
  body.kd-light .buyout-tag{justify-self:start}
}

/* ---- area pages: the article ran in a 660px column with a dead right half.
   A sticky preview card now rides down beside it. ---- */
body.kd-light .area-body{
  display:grid;grid-template-columns:minmax(0,1fr) 336px;
  gap:clamp(2rem,4vw,4rem);align-items:start;
}
body.kd-light .area-body .kd-editor{max-width:none}
body.kd-light .area-rail{position:sticky;top:6.5rem}
body.kd-light .rail-card{
  background:var(--foam);border:3px solid var(--ink);border-radius:12px;
  box-shadow:7px 8px 0 rgba(7,30,35,.85);padding:1.4rem 1.5rem 1.6rem;
  transform:rotate(-.7deg);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
body.kd-light .rail-card:hover{transform:rotate(0) translate(-2px,-4px);box-shadow:10px 12px 0 rgba(7,30,35,.85)}
body.kd-light .rail-art{
  border:3px solid var(--ink);border-radius:8px;background:var(--paper);
  margin-bottom:1.1rem;overflow:hidden;box-shadow:3px 4px 0 rgba(7,30,35,.5);
}
body.kd-light .rail-art img{display:block;width:100%;height:auto}
body.kd-light .rail-card h3{
  font-size:1.3rem;line-height:1.15;margin-bottom:.6rem;color:var(--ink);
}
body.kd-light .rail-card p{color:var(--muted);font-size:.95rem;line-height:1.55;margin-bottom:1.1rem}
body.kd-light .rail-card .btn{width:100%;justify-content:center}
body.kd-light .rail-note{
  margin:.9rem 0 0 !important;font-size:.82rem;text-align:center;
  font-family:var(--font-display);font-weight:600;letter-spacing:.01em;color:var(--sea);
}
@media (max-width:1000px){
  body.kd-light .area-body{grid-template-columns:1fr}
  body.kd-light .area-rail{position:static;max-width:420px;margin-top:2.4rem}
  body.kd-light .rail-card{transform:none}
}
/* callout copy must stay foam wherever the callout is reused (the pr-split
   paragraph rule has equal specificity and was landing later) */
body.kd-light .ai-callout p,
body.kd-light .pr-split-copy .ai-callout p,
body.kd-light .ai-copy .ai-callout p{color:var(--foam);max-width:none}

/* ============================================================
   2.0.4 — POLISH PASS (2026-08-27 night)
   ============================================================ */

/* ---- nav: bigger type only. The pill/border rollover treatment was tried
   in 2.0.4 and rejected — do not re-add hover chrome here. ---- */
body.kd-light .nav-links{font-size:1.06rem;gap:clamp(1.6rem,3vw,2.4rem)}
body.kd-light .nav-links>a,
body.kd-light .nav-links .has-sub>a{font-weight:700;color:var(--ink)}
body.kd-light .nav-links>a:hover,
body.kd-light .nav-links .has-sub>a:hover{color:var(--sea)}
@media (max-width:1080px){ body.kd-light .nav-links{font-size:.97rem;gap:1.1rem} }

/* ---- trades hub tiles: "Websites for X" repeated seven times read as spam.
   Each tile now carries its own services line and one quiet shared CTA. ---- */
body.kd-light.page-template-page-trades-hub .hub-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:1.5rem 1.25rem 1.15rem;
}
body.kd-light.page-template-page-trades-hub .hub-card h2{
  font-size:1.08rem;line-height:1.2;margin:0 0 .45rem;
}
body.kd-light .hub-note{
  color:var(--muted);font-size:.88rem;line-height:1.45;
  font-family:var(--font-body,inherit);margin-bottom:.9rem;
}
/* one small arrow per tile — seven repeated "See the page" links would have
   swapped one piece of repetition for another */
body.kd-light .hub-go{
  margin-top:auto;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  border:2.5px solid var(--ink);background:var(--paper);color:var(--sea);
  font-size:1rem;line-height:1;font-weight:700;
  transition:transform .18s ease,background .18s,color .18s;
}
body.kd-light .hub-card:hover .hub-go{background:var(--signal);color:var(--ink);transform:translateX(3px)}

/* 7 tiles never divide evenly into a 5-up grid — flex so the last row centres */
body.kd-light.page-template-page-trades-hub .hub-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem;
}
body.kd-light.page-template-page-trades-hub .hub-card{
  flex:1 1 200px;max-width:250px;
}

/* ---- trade pages: the pain blocks were bare panels with a paragraph in ---- */
body.kd-light .pain-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.3rem,2.6vw,2rem);row-gap:clamp(2.4rem,4vw,3rem);
  margin-top:clamp(2.4rem,4vw,3.2rem);
}
body.kd-light .pain-card{
  position:relative;background:var(--paper);
  border:3px solid var(--ink);border-radius:10px;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);
  padding:2.3rem 1.35rem 1.4rem;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
body.kd-light .pain-card:nth-child(2n){transform:rotate(.5deg)}
body.kd-light .pain-card:nth-child(2n+1){transform:rotate(-.45deg)}
body.kd-light .pain-card:hover{transform:rotate(0) translate(-2px,-4px);box-shadow:9px 12px 0 rgba(7,30,35,.85)}
body.kd-light .pain-card p{color:var(--muted);font-size:.98rem;line-height:1.55;margin:0}
body.kd-light .pain-ico{
  position:absolute;top:-24px;left:1.1rem;
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--signal);border:3px solid var(--ink);color:var(--ink);
  box-shadow:3px 4px 0 rgba(7,30,35,.35);transform:rotate(-6deg);
}
body.kd-light .pain-ico svg{width:27px;height:27px}
@media (max-width:940px){ body.kd-light .pain-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ body.kd-light .pain-grid{grid-template-columns:1fr} }

/* ---- what the site needs: was a 640px bullet list in dead space ---- */
body.kd-light .needs-panel{
  background:var(--foam);border:3px solid var(--ink);border-radius:12px;
  box-shadow:7px 8px 0 rgba(7,30,35,.85);
  padding:clamp(1.5rem,3vw,2.1rem) clamp(1.5rem,3vw,2.2rem);
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
}
body.kd-light .needs-panel .price-grid li{padding:.5em 0}

/* ---- long trade headlines (builders) wrapped to four ragged lines ---- */
body.kd-light .page-hero h1,
body.kd-light .td-lead h1{text-wrap:balance}
body.kd-light .td-lead .ph-grid h1{font-size:clamp(1.9rem,3.5vw,3rem);line-height:1.06}

/* ---- About: the lower rows were three hairline dividers and a wall of type ---- */
body.kd-light .about-rows{
  margin-top:2.1rem;display:grid;gap:1rem;
}
body.kd-light .about-row{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  border-top:0;padding:1.15rem 1.3rem;
  background:var(--foam);border:3px solid var(--ink);border-radius:10px;
  box-shadow:5px 6px 0 rgba(7,30,35,.85);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
body.kd-light .about-row:nth-child(2n){transform:rotate(.4deg)}
body.kd-light .about-row:nth-child(2n+1){transform:rotate(-.35deg)}
body.kd-light .about-row:hover{transform:rotate(0) translate(-2px,-3px);box-shadow:8px 10px 0 rgba(7,30,35,.85)}
body.kd-light .about-ico{
  flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--paper);border:3px solid var(--ink);color:var(--sea);
  box-shadow:3px 3px 0 rgba(7,30,35,.3);
}
body.kd-light .about-ico svg{width:23px;height:23px}
body.kd-light .about-row h3{margin-bottom:.3rem;color:var(--ink)}
body.kd-light .about-row p{color:var(--muted);font-size:.97rem;margin:0}

/* sign-off: crest instead of a hairline */
body.kd-light .about-sign{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;
  margin-top:2.2rem;padding-top:0;
}
body.kd-light .about-sign .as-rule{display:none}
body.kd-light .as-mark{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--foam);border:3px solid var(--ink);
  box-shadow:3px 4px 0 rgba(7,30,35,.35);transform:rotate(-5deg);
}
body.kd-light .as-mark svg{width:30px;height:30px;display:block}

/* ---- contact: the form floated bare on paper and the guarantee ran wider
   than it. Both now live inside one comic card, like the homepage block. ---- */
body.kd-light .ct-form-sec .container{max-width:820px}
body.kd-light .ct-card{
  background:var(--foam);border:3px solid var(--ink);border-radius:14px;
  box-shadow:9px 10px 0 rgba(7,30,35,.85);
  padding:clamp(1.6rem,3.4vw,2.6rem) clamp(1.4rem,3.4vw,2.6rem) clamp(1.6rem,3vw,2.2rem);
}
body.kd-light .ct-card-head{text-align:center;margin-bottom:1.6rem}
body.kd-light .ct-card-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.5rem;color:var(--ink)}
body.kd-light .ct-card-head p{color:var(--muted);margin:0}
body.kd-light .ct-card .lead-form{max-width:none;margin-bottom:1.1rem}
body.kd-light .ct-card .lead-form input,
body.kd-light .ct-card .lead-form textarea{
  background:var(--paper);border:2.5px solid var(--ink);border-radius:9px;color:var(--ink);
}
body.kd-light .ct-card .lead-form input::placeholder,
body.kd-light .ct-card .lead-form textarea::placeholder{color:var(--muted)}
body.kd-light .ct-card .lead-form input:focus,
body.kd-light .ct-card .lead-form textarea:focus{
  border-color:var(--sea);box-shadow:0 0 0 4px rgba(23,94,109,.18);
}
body.kd-light .ct-chips{
  list-style:none;margin:0 0 1.4rem;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
}
body.kd-light .ct-chips li{
  font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.02em;
  color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);border-radius:999px;
  padding:.36rem .85rem;box-shadow:2px 3px 0 rgba(7,30,35,.6);
}
/* the guarantee becomes a footer strip inside the card, not a wider slab under it */
body.kd-light .ct-card .guar-card{
  margin:0;background:var(--paper);box-shadow:4px 5px 0 rgba(7,30,35,.55);
}
body.kd-light .ct-card .guar-card:hover{transform:none;box-shadow:4px 5px 0 rgba(7,30,35,.55)}

/* ---- "questions first" was one centred paragraph carrying three facts ---- */
body.kd-light .ct-facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.3rem,2.6vw,2rem);row-gap:clamp(2.4rem,4vw,3rem);
  margin-top:clamp(2.4rem,4vw,3rem);
}
body.kd-light .ct-fact{
  position:relative;background:var(--paper);
  border:3px solid var(--ink);border-radius:10px;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);
  padding:2.3rem 1.4rem 1.5rem;text-align:left;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
body.kd-light .ct-fact:nth-child(2n){transform:rotate(.5deg)}
body.kd-light .ct-fact:nth-child(2n+1){transform:rotate(-.45deg)}
body.kd-light .ct-fact:hover{transform:rotate(0) translate(-2px,-4px);box-shadow:9px 12px 0 rgba(7,30,35,.85)}
body.kd-light .ct-fact-ico{
  position:absolute;top:-25px;left:1.2rem;
  display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:var(--foam);border:3px solid var(--ink);color:var(--sea);
  box-shadow:3px 4px 0 rgba(7,30,35,.35);
}
body.kd-light .ct-fact-ico svg{width:24px;height:24px}
body.kd-light .ct-fact h3{margin-bottom:.4rem;color:var(--ink);font-size:1.05rem}
body.kd-light .ct-fact p{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0}
body.kd-light .ct-fact a{color:var(--sea);font-weight:600}
@media (max-width:820px){ body.kd-light .ct-facts{grid-template-columns:1fr;max-width:420px;margin-inline:auto} }

/* ---- how-it-works video: the first frame was the logo animation on black,
   which read as a dead player. A designed splash sits over it until play. ---- */
body.kd-light .hiw-player{position:relative;line-height:0}
body.kd-light .hiw-splash{
  position:absolute;inset:0;width:100%;height:100%;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  background:#e9e4cf;border:3px solid var(--ink);border-radius:10px;
  overflow:hidden;cursor:pointer;padding:0;margin:0;text-align:left;
  font:inherit;color:var(--ink);
}
body.kd-light .hiw-splash[hidden]{display:none}
body.kd-light .hiw-splash-art{
  grid-column:1;width:100%;height:100%;object-fit:cover;object-position:left center;
  display:block;transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
/* 2.0.8 note superseded in 2.0.9 — see the splash-art fix at the end of this file. */
body.kd-light .hiw-splash:hover .hiw-splash-art{transform:scale(1.03)}
body.kd-light .hiw-splash-copy{
  grid-column:2;position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;
  padding:0 clamp(1.2rem,3.4vw,2.6rem);line-height:1.2;
}
body.kd-light .hiw-splash-kicker{
  font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sea);
}
body.kd-light .hiw-splash-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.05rem,2.5vw,1.85rem);line-height:1.12;letter-spacing:-.02em;color:var(--ink);
}
body.kd-light .hiw-splash-play{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:clamp(.82rem,1.5vw,.98rem);
  color:var(--ink);background:var(--signal);
  border:3px solid var(--ink);border-radius:999px;
  padding:.5rem 1.1rem .5rem .85rem;
  box-shadow:4px 5px 0 rgba(7,30,35,.75);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
body.kd-light .hiw-splash-play svg{width:18px;height:18px;fill:var(--ink);display:block}
body.kd-light .hiw-splash:hover .hiw-splash-play{transform:translate(-2px,-2px);box-shadow:6px 7px 0 rgba(7,30,35,.75)}
body.kd-light .hiw-splash:focus-visible{outline:4px solid var(--sea);outline-offset:3px}
/* ---- 2.1.5 — MOBILE WATCH SPLASH. It was the art dimmed to 30% with the
   copy laid centred straight over it, so the WATCH kicker and the title landed
   on the camera body and the rest of the panel was empty cream: it read as
   broken rather than designed. The art now plays at full strength and the copy
   sits in its own band across the foot of the splash, ruled off in ink like
   every other panel on the site. (The grid-column rules here were also dead:
   2.0.9 took the art out of the grid with position:absolute.) ---- */
@media (max-width:640px){
  body.kd-light .hiw-splash{display:block}
  body.kd-light .hiw-splash-art{opacity:1;object-position:34% center}
  body.kd-light .hiw-splash-copy{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    display:flex;flex-direction:row;flex-wrap:wrap;
    align-items:center;justify-content:space-between;gap:.5rem .8rem;
    text-align:left;padding:.7rem .85rem .75rem;
    background:rgba(233,228,207,.94);border-top:3px solid var(--ink);
  }
  body.kd-light .hiw-splash-kicker{display:none}
  /* NB: do NOT hide the <br> here — the markup is "The whole process,<br>in
     under a minute." and with the break removed the two text nodes butt up
     with no space ("process,in under"). It wraps in the band anyway. */
  body.kd-light .hiw-splash-title{
    font-size:clamp(.95rem,2.7vw,1.22rem);line-height:1.18;flex:1 1 55%;
  }
  body.kd-light .hiw-splash-play{margin-top:0;flex:0 0 auto;font-size:.86rem;padding:.42rem .9rem .42rem .7rem}
}
@media (max-width:380px){
  body.kd-light .hiw-splash-title{font-size:.92rem;flex-basis:100%}
  body.kd-light .hiw-splash-copy{justify-content:center;text-align:center}
}

/* ---- vs-DIY comparison table: comic panel, our column marked ---- */
body.kd-light .kd-table-wrap{
  background:var(--foam);border:3px solid var(--ink);border-radius:12px;
  box-shadow:7px 8px 0 rgba(7,30,35,.85);padding:0;overflow:hidden;overflow-x:auto;
  margin-top:clamp(2rem,4vw,3rem);
}
body.kd-light .kd-table th,body.kd-light .kd-table td{border-bottom:2px solid rgba(7,30,35,.14)}
body.kd-light .kd-table thead th{
  background:var(--ink);color:var(--foam);font-size:.78rem;letter-spacing:.12em;
  border-bottom:3px solid var(--ink);
}
body.kd-light .kd-table thead th.kd-col{background:var(--sea);color:#fff}
body.kd-light .kd-table td:first-child{color:var(--ink);font-weight:600}
body.kd-light .kd-table .kd-col{background:rgba(23,94,109,.09)}
body.kd-light .kd-table td.kd-col{color:var(--ink);font-weight:600}
body.kd-light .kd-table .good{color:var(--sea);font-weight:700}
body.kd-light .kd-table .bad{color:var(--steel)}
body.kd-light .kd-table tbody tr:last-child td{border-bottom:none}

/* the "use DIY" card is a legitimate yes, so it keeps a tick not a cross */
body.kd-light .fit-no .fit-badge{background:var(--foam);color:var(--steel)}
/* long two-clause headlines in the split hero were running to five lines */
body.kd-light .ph-grid h1{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.06}
@media (max-width:700px){
  body.kd-light.page-template-page-trades-hub .hub-card{flex:1 1 44%;max-width:none;padding:1.2rem .8rem 1rem}
  body.kd-light.page-template-page-trades-hub .hub-card .hub-icon{width:60px;height:60px}
  body.kd-light.page-template-page-trades-hub .hub-card h2{font-size:.98rem}
  body.kd-light .hub-note{font-size:.82rem}
}

/* ---- vs-DIY: two right-hand art panels in a row read as a column of images.
   .pr-split-artfirst puts the art left while keeping copy first in the DOM
   (so the reading order stays copy-then-art on mobile). ---- */
body.kd-light .pr-split-artfirst{grid-template-columns:1.1fr .9fr}
body.kd-light .pr-split-artfirst .pr-split-copy{order:2}
body.kd-light .pr-split-artfirst .pr-split-art{order:1}
body.kd-light .pr-split-artfirst .pr-split-art .ph-panel{transform:rotate(1.2deg)}
@media (max-width:820px){
  body.kd-light .pr-split-artfirst{grid-template-columns:1fr}
  body.kd-light .pr-split-artfirst .pr-split-art{order:-1}
}

/* ============================================================
   2.0.5 — BLOG REWORK + polish fixes (2026-08-27 night)
   ============================================================ */

/* ---- blog cards and the feature block: comic panels, brand art ---- */
body.kd-light .post-card,
body.kd-light .post-feature{
  background:var(--foam);border:3px solid var(--ink);border-radius:12px;
  box-shadow:7px 8px 0 rgba(7,30,35,.85);overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
body.kd-light .post-card:hover,
body.kd-light .post-feature:hover{
  transform:translate(-2px,-4px);box-shadow:10px 13px 0 rgba(7,30,35,.85);border-color:var(--ink);
}
body.kd-light .pc-media,
body.kd-light .pf-media{background:#f4ecd6;border-bottom:3px solid var(--ink)}
body.kd-light .pf-media{border-bottom:0;border-right:3px solid var(--ink)}
body.kd-light .pc-media img,
body.kd-light .pf-media img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
body.kd-light .post-card:hover .pc-media img,
body.kd-light .post-feature:hover .pf-media img{transform:scale(1.035)}
body.kd-light .pf-body{padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.4rem,2.6vw,2.2rem)}
body.kd-light .pc-body{padding:1.3rem 1.4rem 1.35rem}
body.kd-light .pf-tag{
  background:var(--signal);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;
  padding:.28rem .8rem;box-shadow:2px 3px 0 rgba(7,30,35,.6);letter-spacing:.1em;
}
body.kd-light .pc-title{font-size:1.12rem}
body.kd-light .pc-meta,body.kd-light .pf-meta{color:#4f676f}
body.kd-light .pc-more{
  position:absolute;right:1.1rem;bottom:1.15rem;
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:2.5px solid var(--ink);background:var(--paper);color:var(--sea);
  font-weight:700;line-height:1;transition:transform .18s ease,background .18s,color .18s;
}
body.kd-light .post-card{position:relative}
body.kd-light .post-card:hover .pc-more{background:var(--signal);color:var(--ink);transform:translateX(3px)}
body.kd-light .pc-body .pc-meta{padding-right:2.6rem}
@media (max-width:900px){
  body.kd-light .pf-media{border-right:0;border-bottom:3px solid var(--ink)}
}

/* ---- blog index hero gets the art panel treatment ---- */
body.kd-light .blog-hero .ph-art .ph-panel{transform:rotate(1.4deg)}

/* ---- single post: the head had a 10rem crown of dead space ---- */
body.kd-light .post-head{padding:clamp(4.5rem,9vh,6.5rem) 0 clamp(1.2rem,2.4vw,1.8rem)}
body.kd-light .post-title{text-wrap:balance}
body.kd-light .post-hero{margin-bottom:clamp(1.8rem,4vw,2.8rem)}
body.kd-light .post-hero .ph-panel{max-width:960px;margin-inline:auto}
body.kd-light .post-hero img{aspect-ratio:auto;border-radius:7px}
body.kd-light .post-hero figcaption{text-align:center;color:var(--muted);margin-top:.8rem}
body.kd-light .post-body{padding-top:0}
body.kd-light .post-body .kd-editor{max-width:none}

/* ---- post nav: a single neighbour used to sit as a lone half-width card,
   so the blog link now always fills the second slot ---- */
body.kd-light .post-nav{padding:clamp(2.6rem,5vw,3.6rem) 0 0}
body.kd-light .post-nav .container{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
body.kd-light .pn-link{
  display:flex;flex-direction:column;gap:.35rem;justify-content:center;
  background:var(--foam);border:3px solid var(--ink);border-radius:10px;
  box-shadow:5px 6px 0 rgba(7,30,35,.85);padding:1.1rem 1.3rem;min-height:92px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;
}
body.kd-light .pn-link:hover{transform:translate(-2px,-3px);box-shadow:8px 10px 0 rgba(7,30,35,.85);border-color:var(--ink)}
body.kd-light .pn-label{
  font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sea);
}
body.kd-light .pn-title{color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.3}
body.kd-light .pn-next,body.kd-light .pn-all{text-align:right;align-items:flex-end}
body.kd-light .pn-arrow{display:inline-block;transition:transform .18s ease}
body.kd-light .pn-link:hover .pn-arrow{transform:translateX(3px)}
body.kd-light .pn-prev:hover .pn-arrow{transform:translateX(-3px)}
body.kd-light .pn-all{background:var(--paper)}
@media (max-width:700px){
  body.kd-light .post-nav .container{grid-template-columns:1fr}
  body.kd-light .pn-next,body.kd-light .pn-all{text-align:left;align-items:flex-start}
}
/* blog art is 3:2 — a 16:9 crop was cutting the robots' feet off */
body.kd-light .pc-media{aspect-ratio:3/2}
body.kd-light .post-grid--single .pc-media{aspect-ratio:3/2}
body.kd-light .post-nav{padding-bottom:clamp(1.6rem,3vw,2.4rem)}

/* ============================================================
   2.0.7 — PRICING: the price is the artwork
   The robot holds the board; the offer sits beside it as five lines.
   Replaces the 14-tick value stack (was 1447px tall on desktop).
   ============================================================ */
body.kd-light .price-poster{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2rem,5.5vw,4.5rem);
  align-items:center;
}

/* ---- left: the board art, floating, with the seal stamped on it ---- */
body.kd-light .pp-figure{position:relative}
body.kd-light .pp-figure .ph-panel{transform:rotate(-1.3deg)}
body.kd-light .pp-figure .ph-panel img{display:block;width:100%;height:auto}

body.kd-light .guar-seal{
  position:absolute;left:-4px;bottom:-18px;z-index:3;
  width:clamp(124px,13vw,162px);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;text-align:center;
  background:var(--signal);border:4px solid var(--ink);
  box-shadow:5px 6px 0 var(--ink);
  transform:rotate(-9deg);
  font-family:var(--font-display);color:var(--ink);
}
body.kd-light .guar-seal i{
  display:block;font-style:normal;font-weight:700;
  font-size:clamp(.56rem,.72vw,.64rem);letter-spacing:.18em;text-transform:uppercase;
  opacity:.75;margin-bottom:.4rem;
}
body.kd-light .guar-seal b{
  display:block;font-weight:700;line-height:1.12;letter-spacing:-.015em;
  font-size:clamp(.98rem,1.35vw,1.16rem);
}
body.kd-light .guar-line{
  margin:2.6rem 0 0;padding-left:clamp(142px,calc(13vw + 20px),184px);
  font-size:.95rem;line-height:1.45;color:var(--ink);font-weight:500;max-width:38ch;
}

/* ---- right: the offer ---- */
/* NOTE: pages.css sets `#pricing h2{font-size:clamp(1.9rem,4vw,3.1rem)}` — an ID
   selector, so anything restyling these headings has to carry #pricing too. */
body.kd-light #pricing .pp-head{
  margin:0 0 1.5rem;font-size:clamp(1.65rem,2.9vw,2.35rem);
  line-height:1.08;letter-spacing:-.02em;color:var(--ink);
}
body.kd-light .pp-list{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.95rem}
body.kd-light .pp-list li{
  display:grid;grid-template-columns:26px 1fr;gap:.85rem;align-items:start;
  font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.4;color:var(--ink);
}
body.kd-light .pp-tick{width:26px;height:26px;color:var(--signal);margin-top:.05em}
body.kd-light .pp-terms{
  margin:0 0 1.5rem;padding-top:1.3rem;border-top:2px solid rgba(7,30,35,.16);
  font-size:.95rem;color:var(--muted);
}
body.kd-light .pp-terms a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
body.kd-light .pp-offer .price-note{margin:.9rem 0 0;font-size:.88rem;color:var(--muted)}

/* ---- the closing line: why the price exists ---- */
body.kd-light .pp-thesis{
  margin:clamp(3rem,6vw,4.6rem) auto 0;max-width:44ch;text-align:center;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.45;color:var(--ink);
}

@media (max-width:900px){
  body.kd-light .price-poster{grid-template-columns:1fr;gap:clamp(2.6rem,7vw,3.4rem)}
  body.kd-light .pp-figure{max-width:34rem;margin-inline:auto}
  body.kd-light .pp-offer{max-width:34rem;margin-inline:auto}
  body.kd-light .guar-line{margin-top:2.2rem}
}
@media (max-width:560px){
  body.kd-light .guar-seal{width:112px;left:-6px;bottom:-20px;border-width:3px;box-shadow:4px 5px 0 var(--ink)}
  body.kd-light .guar-seal b{font-size:.95rem}
  body.kd-light .guar-line{padding-left:130px;margin-top:1.9rem;font-size:.9rem}
}

/* ============================================================
   2.0.7 — FAQ: lead panel + comic accordion
   The "is it really AI" objection is pulled out of the accordion and
   given the room it earns; the punchline gets the dark callout.
   ============================================================ */
body.kd-light .faq-lead{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
  margin:0 0 clamp(2.6rem,5vw,4rem);
}
body.kd-light #faq .faq-lead-copy h3{
  margin:0 0 .9rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.12;letter-spacing:-.02em;color:var(--ink);
}
body.kd-light .faq-lead-copy>p{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.55;max-width:56ch}
body.kd-light .faq-lead-copy .ai-callout{margin:1.5rem 0 0;padding:1.25rem 1.5rem}
body.kd-light .faq-lead-copy .ai-callout p{
  margin:0;color:var(--foam);font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.4;
}
body.kd-light .faq-lead-art .ph-panel{transform:rotate(1.4deg)}
body.kd-light .faq-lead-art .ph-panel img{display:block;width:100%;height:auto}

/* ---- the rest, as a two-column comic accordion ---- */
body.kd-light .faq-grid{
  max-width:none;display:grid;grid-template-columns:1fr 1fr;
  gap:1rem 1.4rem;align-items:start;
}
body.kd-light .faq-grid .faq-item{margin-bottom:0}
body.kd-light .faq-grid .faq-wide{grid-column:1/-1}

/* ---- the toggle becomes a roundel, like every other badge on the site ---- */
body.kd-light .faq-q .plus{
  width:34px;height:34px;border-radius:50%;
  background:var(--ink);border:2px solid var(--ink);color:var(--signal);
  font-family:var(--font-display);font-weight:700;font-size:1.3rem;line-height:1;
  padding-bottom:.08em;
}
body.kd-light .faq-item.open .faq-q .plus{background:var(--signal);color:var(--ink)}

@media (max-width:900px){
  body.kd-light .faq-lead{grid-template-columns:1fr;gap:2rem}
  body.kd-light .faq-lead-art{max-width:26rem;margin-inline:auto;order:-1}
  body.kd-light .faq-grid{grid-template-columns:1fr}
  body.kd-light .faq-grid .faq-wide{grid-column:auto}
}

/* ============================================================
   2.0.7 — SIX PROMISES: pinned panels, stamped badges
   The badges were thin outlined roundels and the cards sat as a table.
   Solid stamps (checkerboarded ink / signal), wider tilt, and the middle
   column dropped so the rows read as panels pinned to a board.
   ============================================================ */
body.kd-light .promise-cards{row-gap:4rem}
body.kd-light .promise-card{
  --tilt:0deg;--drop:0px;
  padding-top:3.4rem;
  transform:translateY(var(--drop)) rotate(var(--tilt));
}
body.kd-light .promise-card:nth-child(3n+1){--tilt:-1.4deg}
body.kd-light .promise-card:nth-child(3n+2){--tilt:1.2deg;--drop:18px}
body.kd-light .promise-card:nth-child(3n+3){--tilt:-.6deg}
body.kd-light .promise-card:hover{transform:translate(-2px,calc(var(--drop) - 4px)) rotate(0deg)}

body.kd-light .promise-ico{
  top:-42px;left:1.15rem;width:88px;height:88px;
  filter:drop-shadow(4px 5px 0 rgba(7,30,35,.42));
}
body.kd-light .promise-card:hover .promise-ico{transform:rotate(-8deg) scale(1.06)}

@media (max-width:900px){
  body.kd-light .promise-card{--drop:0px!important}
  body.kd-light .promise-card:hover{transform:translate(-2px,-4px) rotate(0deg)}
  body.kd-light .promise-ico{width:76px;height:76px;top:-36px}
  body.kd-light .promise-card{padding-top:3rem}
}

/* ============================================================
   2.0.8 — nav type, wave dividers, contact seascape (2026-08-28)
   ============================================================ */

/* ---- NAV TYPE. Three things were stacking up and reading as "blurred":
   (1) Space Grotesk 700 at ~17px closes its own counters — the bold cut is
       drawn for headlines, not for 17px links;
   (2) body carries -webkit-font-smoothing:antialiased, which on macOS drops
       dark-on-light text out of subpixel rendering and renders it lighter and
       softer — at 700 on low-contrast cream that reads as smeared;
   (3) +.01em tracking on an already-heavy geometric adds to the mush.
   So: 600 not 700, subpixel smoothing back on for the nav only, tracking off.
   The 2.0.4 note still stands — bigger type only, no hover chrome. ---- */
body.kd-light .nav-links{
  font-size:1.08rem;letter-spacing:0;
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;
}
body.kd-light .nav-links>a,
body.kd-light .nav-links .has-sub>a{font-weight:600}
body.kd-light .mobile-menu a,
body.kd-light .nav-links .sub a{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}

/* ---- .band-sea — the daylight seascape as a reusable band, not just the
   closing CTA. Same treatment as .final: image, light scrim, content lifted
   above it. The card on top keeps its own contrast, so the scrim stays light
   (a dark one only muds a light image — 2.0.3 note). ---- */
body.kd-light .band-sea{
  position:relative;
  background:#e9edd6 url(../surf/sea-band-day.webp) center 62%/cover no-repeat;
}
body.kd-light .band-sea::before{
  content:"";position:absolute;inset:0;background:rgba(238,236,221,.18);pointer-events:none;
}
body.kd-light .band-sea>.container{position:relative;z-index:1}

/* A wave leaving a sea band can't paint a strip — there is a photograph
   behind it. So the divider is absolutely positioned over the image's bottom
   edge with a transparent strip, the same fix the footer join uses. ---- */
body.kd-light .band-sea>.sdiv{
  position:absolute;left:0;right:0;bottom:-1px;z-index:3;
}

/* contact: the form section is now that band, so it needs real height for the
   seascape to read — section-tight's 1rem top would have cropped it to a strip. */
body.kd-light .ct-form-sec.band-sea{
  padding-top:clamp(3rem,6vw,5rem);
  padding-bottom:clamp(5.5rem,9vw,8rem);
}
@media (max-width:760px){
  body.kd-light .ct-form-sec.band-sea{padding-bottom:clamp(4rem,12vw,5.5rem)}
}

/* ---- rhythm under a wave: a divider plus a full 8rem section top reads as a
   hole. The homepage answer is .sec-group (64px); the trade demo strip is a
   <section> inside a band wrapper, so it gets the same treatment by hand. ---- */
body.kd-light .td-demo-band{padding-top:clamp(2.4rem,5vw,4rem)}
body.kd-light .ct-form-sec.band-sea{padding-bottom:clamp(7rem,11vw,9.5rem)}
@media (max-width:760px){
  body.kd-light .ct-form-sec.band-sea{padding-bottom:clamp(5rem,14vw,7rem)}
}

/* ---- mobile: the form stacks to ~2000px, and `cover` on a band that tall
   blows the seascape up until only a narrow vertical slice of it is left.
   So on phones the image keeps its own proportions and sits on the bottom
   edge, with the band filled above it in the image's own sky cream — the
   waves end up behind the bottom of the form, which is where they read. ---- */
@media (max-width:760px){
  body.kd-light .band-sea{
    background-color:#f0ebd0;
    background-size:180% auto;
    background-position:center bottom;
  }
}

/* ============================================================
   2.0.9 (2026-08-28)
   ============================================================ */

/* ---- WATCH splash: the camera was being guillotined. The art was pinned to
   grid column 1 — half the 880px player — and `object-fit:cover` on a 16:9
   image in a portrait-ish cell crops it to the left 800/1600 of the source.
   The camera's right edge lives at ~840. The source is 16:9 with a
   deliberately empty right half for exactly this: let it fill the whole
   splash and lay the copy over that empty half. Same aspect as the player,
   so nothing is cropped at all. ---- */
body.kd-light .hiw-splash-art{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* ---- FEATURE CARDS get the six-promises stamp.
   The 54px foam roundel read as an ornament; the promise badges are solid
   stamps that carry the card. Same geometry (88px, 42px overhang, drop
   shadow, tilt + stagger), and the fill checkerboards ink/signal so no two
   neighbours in a 2-up grid share a colour — 4n+1/4n+4 ink, 4n+2/4n+3
   signal is what makes a 2-column grid alternate on the diagonal. ---- */
body.kd-light .feat-grid.feat-cards{row-gap:clamp(3.4rem,5.5vw,4.4rem)}
body.kd-light .feat-cards .feat{
  --tilt:0deg;--drop:0px;
  padding-top:clamp(3.2rem,5vw,3.6rem);
  transform:translateY(var(--drop)) rotate(var(--tilt));
}
body.kd-light .feat-cards .feat:nth-child(2n+1){--tilt:-1.1deg}
body.kd-light .feat-cards .feat:nth-child(2n){--tilt:.9deg;--drop:16px}
body.kd-light .feat-cards .feat:hover{
  transform:translate(-2px,calc(var(--drop) - 4px)) rotate(0deg);
  box-shadow:9px 12px 0 rgba(7,30,35,.85);
}
body.kd-light .feat-cards .feat .ico{
  position:absolute;top:-42px;left:1.15rem;margin:0;width:88px;height:88px;
  border:3px solid var(--ink);border-radius:50%;
  box-shadow:4px 5px 0 rgba(7,30,35,.42);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
body.kd-light .feat-cards .feat:hover .ico{transform:rotate(-8deg) scale(1.06)}
body.kd-light .feat-cards .feat .ico svg{width:46px;height:46px;stroke-width:1.9}
body.kd-light .feat-cards .feat:nth-child(4n+1) .ico,
body.kd-light .feat-cards .feat:nth-child(4n+4) .ico{background:var(--ink);color:var(--foam)}
body.kd-light .feat-cards .feat:nth-child(4n+2) .ico,
body.kd-light .feat-cards .feat:nth-child(4n+3) .ico{background:var(--signal);color:var(--ink)}

@media (max-width:820px){
  body.kd-light .feat-cards .feat{--drop:0px!important;padding-top:3rem}
  body.kd-light .feat-cards .feat:hover{transform:translate(-2px,-4px) rotate(0deg)}
  body.kd-light .feat-cards .feat .ico{width:76px;height:76px;top:-36px}
  body.kd-light .feat-cards .feat .ico svg{width:40px;height:40px}
}

/* ---- TRADE PAGES: the six "in the £79" needs were a tick list inside one
   panel — the bullet wall the rest of the site was rebuilt to avoid. Same
   six-up stamped grid as the homepage promises. Marks are matched to the
   copy (kd_need_glyph) because the slots differ per trade. ---- */
body.kd-light .needs-kicker{
  font-family:var(--font-display);font-weight:700;font-size:.76rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sea);
  margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;
}
body.kd-light .need-cards{margin-top:3.6rem;row-gap:4rem}
body.kd-light .need-card{
  --tilt:0deg;--drop:0px;
  position:relative;background:var(--paper);
  padding:3.4rem 1.4rem 1.5rem;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);
  transform:translateY(var(--drop)) rotate(var(--tilt));
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
body.kd-light .need-card:nth-child(3n+1){--tilt:-1.4deg}
body.kd-light .need-card:nth-child(3n+2){--tilt:1.2deg;--drop:18px}
body.kd-light .need-card:nth-child(3n+3){--tilt:-.6deg}
body.kd-light .need-card:hover{
  transform:translate(-2px,calc(var(--drop) - 4px)) rotate(0deg);
  box-shadow:9px 12px 0 rgba(7,30,35,.85);
}
body.kd-light .need-card p{margin:0;color:var(--ink);font-size:1rem;line-height:1.45}
body.kd-light .need-ico{
  position:absolute;top:-42px;left:1.15rem;
  display:grid;place-items:center;width:88px;height:88px;border-radius:50%;
  border:3px solid var(--ink);box-shadow:4px 5px 0 rgba(7,30,35,.42);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
body.kd-light .need-ico svg{width:46px;height:46px;display:block}
body.kd-light .need-card:hover .need-ico{transform:rotate(-8deg) scale(1.06)}
body.kd-light .need-card:nth-child(6n+1) .need-ico,
body.kd-light .need-card:nth-child(6n+3) .need-ico,
body.kd-light .need-card:nth-child(6n+5) .need-ico{background:var(--ink);color:var(--foam)}
body.kd-light .need-card:nth-child(6n+2) .need-ico,
body.kd-light .need-card:nth-child(6n+4) .need-ico,
body.kd-light .need-card:nth-child(6n+6) .need-ico{background:var(--signal);color:var(--ink)}
@media (max-width:820px){
  body.kd-light .need-card{--drop:0px!important;padding-top:3rem}
  body.kd-light .need-card:hover{transform:translate(-2px,-4px) rotate(0deg)}
  body.kd-light .need-ico{width:76px;height:76px;top:-36px}
  body.kd-light .need-ico svg{width:40px;height:40px}
}

/* ---- the before/after demo used to start cold, with no line telling anyone
   what they were looking at. Header sits inside the foam band above it; the
   demo's own top padding then closes up so the two read as one block. ---- */
body.kd-light .td-lead-in{margin-bottom:0}
body.kd-light .td-lead-in p{max-width:44em;margin-inline:auto}
body.kd-light .td-demo-band>.td-show{padding-top:clamp(1.4rem,2.6vw,2.1rem)}

/* ---- BLOG POST HERO: the image ran straight into the article, and because
   the sticky rail opens with its own framed panel you got two comic frames
   stacked with nothing between them. The hero now sits in its own foam band
   with a wave either side — the same device the rest of the site uses to say
   "this is a separate thing" — and the body gets real top padding back. ---- */
body.kd-light .post-hero.band-foam{
  margin:0;padding:clamp(2.6rem,5vw,4rem) 0 clamp(2.4rem,4.5vw,3.4rem);
}
body.kd-light .post-body{padding-top:clamp(2.8rem,5.5vw,4.2rem)}
body.kd-light .post-hero.band-foam figcaption{margin-top:1rem}

/* ============================================================
   2.1.0 — SEASCAPE HERO BANDS (2026-08-28)
   The measurement that started this: the pricing page's first screen was 93%
   cream against the homepage's 60%. Colour only ever appeared at scale in the
   hero and the closing CTA, so every page in between arrived flat.
   The fix is the CTA's own formula moved to the top of the page: a coast band,
   a foam card floating on it, and the wave painted over the image's bottom
   edge. `coast.webp` (cliffs + lighthouse) is used rather than the CTA's
   sea-band-day so the top and bottom of a page are never the same picture.
   ============================================================ */
body.kd-light .hero-sea{
  position:relative;overflow:hidden;
  padding-top:clamp(2.6rem,5vw,4rem);
  padding-bottom:clamp(5.4rem,8vw,7rem);
  background:#cfe3e6 url(../surf/coast.webp) center 40%/cover no-repeat;
}
body.kd-light .hero-sea::before{
  content:"";position:absolute;inset:0;background:rgba(238,236,221,.14);pointer-events:none;
}
body.kd-light .hero-sea>.container{position:relative;z-index:1}

/* the join — a divider can't paint a strip here, there is a photograph behind
   it, so it sits over the image's bottom edge (same fix as .band-sea) */
body.kd-light .hero-sea>.sdiv{
  position:absolute;left:0;right:0;bottom:-1px;z-index:2;background:transparent;
}

/* the card. On two-column heroes .ph-grid becomes it; centred heroes wrap
   their content in .hero-card instead and sit it on the left, so the type
   never lands on open water. */
body.kd-light .hero-sea .ph-grid,
body.kd-light .hero-sea .hero-card{
  background:var(--foam);border:3px solid var(--ink);border-radius:14px;
  box-shadow:10px 12px 0 rgba(3,17,20,.75);
  padding:clamp(1.8rem,3.6vw,2.9rem) clamp(1.6rem,3.2vw,2.6rem);
  align-items:center;
}
body.kd-light .hero-sea .hero-card{max-width:62ch;text-align:left}
body.kd-light .hero-sea .hero-card .lead{margin-left:0;max-width:none}
body.kd-light .hero-sea.center{text-align:left}

/* the art keeps its frame. The no-box-in-a-box rule was written about a spot
   inside a CONTENT card; here the outer object is the page's ground, so the
   frame reads as a picture pinned to a board — the CTA block's own logic. */
body.kd-light .hero-sea .ph-panel{transform:rotate(1.2deg)}

/* per-page crops — one file, a different view of the coast on each template */
body.kd-light .hero-sea-trade  {background-position:center 40%;background-size:cover}
body.kd-light .hero-sea-area   {background-position:78% 30%;background-size:150%}
body.kd-light .hero-sea-pricing{background-position:18% 46%;background-size:115%}
body.kd-light .hero-sea-hiw    {background-position:74% 20%;background-size:140%}
body.kd-light .hero-sea-about  {background-position:70% 62%;background-size:150%}

@media (max-width:900px){
  body.kd-light .hero-sea{background-size:cover!important;background-position:center 45%!important;
    padding-bottom:clamp(4.2rem,12vw,5.6rem)}
  body.kd-light .hero-sea .ph-grid,
  body.kd-light .hero-sea .hero-card{padding:1.5rem 1.3rem 1.6rem}
  body.kd-light .hero-sea .hero-card{max-width:none}
}

/* ---- centred heroes: the card wants a real measure, not 62ch of a display
   face. And About's three .hl phrases were written for a full-width centred
   hero — inside a card they wrapped mid-phrase, so each takes its own line. ---- */
body.kd-light .hero-sea .hero-card{max-width:min(100%,660px)}
body.kd-light .hero-sea-about .hero-card{max-width:min(100%,730px)}
body.kd-light .about-hero2 .hero-card h1 .hl{display:block}
body.kd-light .about-hero2.hero-sea{padding-bottom:clamp(5.4rem,8vw,7rem)}

/* ---- the area hero's two CTAs have to stay on one line inside the card;
   the ghost button is the one that can afford to lose padding first ---- */
body.kd-light .hero-sea .hero-ctas{flex-wrap:nowrap;align-items:stretch}
body.kd-light .hero-sea .hero-ctas .btn{white-space:nowrap}
body.kd-light .hero-sea .hero-ctas .btn-ghost{padding-left:1.05em;padding-right:1.05em}
@media (max-width:900px){
  body.kd-light .hero-sea .hero-ctas{flex-wrap:wrap}
}

/* ---- how it works: the video block now has a lead-in above it ---- */
body.kd-light .hiw-video-head{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
body.kd-light .hiw-video-sec{padding-top:clamp(3rem,6vw,4.6rem)}

/* ============================================================
   2.1.1 — the seascape band reaches the last cream heroes (2026-08-28)
   Pricing, FAQ and the blog listing lose their spot art and take the
   how-it-works shape: one card, left, on the coast. Their art was decoration
   in a hero that now has a picture of its own behind it.
   ============================================================ */
body.kd-light .hero-sea-faq    {background-position:34% 26%;background-size:132%}
body.kd-light .hero-sea-blog   {background-position:60% 55%;background-size:135%}
body.kd-light .hero-sea-post   {background-position:8% 34%;background-size:122%}

body.kd-light .hero-sea .hero-card .sec-tag{display:block;margin-bottom:.55rem}
body.kd-light .hero-sea .hero-card h1{margin-bottom:.9rem}
body.kd-light .hero-sea .hero-card .lead a{color:var(--sea);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:2px}

/* ---- BLOG POST LEDE — his brief: "the background seascape image, then a
   floating container over the top, which has the hero + the byline area…
   header text above the featured image, then below the featured image the
   byline, date, time to read." One card, so the old stack of headline block →
   framed hero → article (three separate objects) becomes one. ---- */
body.kd-light .hero-sea-post.post-head{padding-top:clamp(2.6rem,5vw,4rem)}
body.kd-light .post-lede{
  background:var(--foam);border:3px solid var(--ink);border-radius:14px;
  box-shadow:10px 12px 0 rgba(3,17,20,.75);
  padding:clamp(1.7rem,3.4vw,2.7rem) clamp(1.5rem,3.2vw,2.6rem) clamp(1.3rem,2.6vw,1.9rem);
  max-width:min(100%,900px);margin-inline:auto;
}
body.kd-light .post-lede .post-kicker{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sea);
  text-decoration:none;margin-bottom:.7rem;
}
body.kd-light .post-lede .post-kicker:hover{color:var(--ink)}
body.kd-light .post-lede .post-title{
  font-size:clamp(1.75rem,3.6vw,2.85rem);line-height:1.06;text-wrap:balance;
  margin:0 0 clamp(1.3rem,2.6vw,1.9rem);
}
body.kd-light .post-lede-art{margin:0}
body.kd-light .post-lede-art .ph-panel{transform:none;border-radius:10px}
body.kd-light .post-lede-art img{display:block;width:100%;height:auto;aspect-ratio:auto}
body.kd-light .post-lede-art figcaption{
  text-align:center;color:var(--muted);font-size:.85rem;margin-top:.75rem;
}
/* the byline sits under the image, divided from it rather than floating loose */
body.kd-light .post-lede .post-meta{
  margin:clamp(1.1rem,2.2vw,1.5rem) 0 0;padding-top:clamp(.9rem,1.8vw,1.15rem);
  border-top:2px solid rgba(7,30,35,.18);
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;
  font-size:.9rem;color:var(--muted);
}
body.kd-light .post-lede .post-meta .pm-by{color:var(--ink);font-weight:600}
body.kd-light .post-lede .post-meta .pm-updated{
  margin-left:auto;font-size:.82rem;color:var(--steel);
}
@media (max-width:760px){
  body.kd-light .post-lede{padding:1.4rem 1.2rem 1.2rem}
  body.kd-light .post-lede .post-meta .pm-updated{margin-left:0;flex-basis:100%}
}

/* ============================================================
   2.1.2 — BLOG POST: one panel, on a band that resolves to flat colour
   The diagnosis was measured, not eyeballed: the lede card ran 270→1170, the
   article 130→916 and the sticky rail out to 1310. Three grids, three left
   edges, three right edges — which is what read as "the content looks separate
   from the header and byline". One panel means one grid. The sidebar and the
   prev/next nav went with it.
   ============================================================ */

/* ---- the band. A post panel can be 800px or 6000px, so the photograph can't
   be the whole ground — it occupies the top and then dissolves into a flat
   colour that carries on for as long as the panel needs. The fade target is
   SAMPLED from the image at the crop's lower edge (#6ca9ae, the flat sea), not
   picked by eye — anything else leaves a visible seam across the page. ---- */
body.kd-light .hero-sea-post{
  /* ⚠️ BOTH LAYERS MUST BE THE SAME HEIGHT. The gradient was 470px while the
     image rendered 916px (150% of a 1440 viewport), so below 470px the raw
     photograph reappeared with no fade over it — a hard horizontal cut across
     the cliff. One variable drives both, so the fade always lands exactly
     where the image ends, at any viewport width. */
  /* 42.4vw is coast.webp's own aspect (933/2200) — the height at which it
     spans the viewport exactly, at any width. Both layers take it, so the
     fade always ends precisely where the photograph ends and the image never
     falls short of the edges on a wide screen. */
  --post-sky:max(300px, 42.4vw);
  background-color:#cfe3e6;
  /* coast.webp had a HARD-DRAWN HORIZON at 54% of its height (a 119-unit step
     in one row). Under a partial fade it showed through as a crisp 1px line
     straight across the page. Crushing it with a fast gradient worked but
     washed the cliffs out, so the horizon was FEATHERED IN THE ASSET instead —
     a 31px vertical blur tapered over ±26px, step 119 -> 8 — which lets the
     fade stay slow and keeps the picture.
     The gradient layer is also 3px TALLER than the image: --post-sky lands on
     a fractional pixel at most widths (610.56px at 1440) and the image's
     antialiased last row showed as a dark line; the extra solid colour paints
     over it. */
  background-image:
    linear-gradient(to bottom,
      rgba(207,227,230,0) 0, rgba(207,227,230,0) 34%, #cfe3e6 96%),
    url(../surf/coast-fade.webp);
  background-repeat:no-repeat,no-repeat;
  background-position:center top, center top;
  background-size:100% calc(var(--post-sky) + 3px), 100% var(--post-sky);
  padding-top:clamp(2.6rem,5vw,4rem);
  padding-bottom:clamp(4.6rem,7vw,6.4rem);
}

/* ---- the panel ---- */
body.kd-light .post-shell{
  background:var(--foam);border:3px solid var(--ink);border-radius:14px;
  box-shadow:10px 12px 0 rgba(3,17,20,.75);
  padding:clamp(1.7rem,3.4vw,2.7rem) clamp(1.5rem,3.2vw,2.6rem) clamp(2rem,4vw,3rem);
  max-width:min(100%,880px);margin-inline:auto;
}
body.kd-light .post-shell .post-lede{padding:0;margin:0;background:none;border:0;box-shadow:none}
body.kd-light .post-shell .post-kicker{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sea);
  text-decoration:none;margin-bottom:.7rem;
}
body.kd-light .post-shell .post-kicker:hover{color:var(--ink)}
body.kd-light .post-shell .post-title{
  font-size:clamp(1.75rem,3.6vw,2.85rem);line-height:1.06;text-wrap:balance;
  margin:0 0 clamp(1.3rem,2.6vw,1.9rem);
}

/* ---- the featured image is CAPPED. Uncapped it was 543px of an 853px card —
   64% picture, so the panel read as a framed photograph with a title stuck on
   top rather than as the opening of an article. ---- */
body.kd-light .post-lede-art{margin:0}
body.kd-light .post-lede-art .ph-panel{
  transform:none;border-radius:10px;max-height:clamp(260px,34vw,430px);
  display:grid;overflow:hidden;
}
/* ⚠️ object-position was `center 42%`, which crops DOWNWARD from the top and
   decapitated the robot in all four blog heroes. Every blog image is drawn
   nearly edge to edge — content starts 4-5% from the top — so there is no
   headroom to crop into. 18% is the most that can come off the top before a
   head goes, checked against all four; the rest comes off the bottom, where
   these compositions only lose ground and shadow. Same trap as the 2.0.6
   mobile hero: never lift the character. */
body.kd-light .post-lede-art img{
  display:block;width:100%;height:clamp(260px,34vw,430px);
  object-fit:cover;object-position:center 18%;aspect-ratio:auto;
}
body.kd-light .post-lede-art figcaption{
  text-align:center;color:var(--muted);font-size:.85rem;margin-top:.75rem;
}

/* ---- byline divides the lede from the writing ---- */
body.kd-light .post-shell .post-meta{
  margin:clamp(1.1rem,2.2vw,1.5rem) 0 0;padding-top:clamp(.9rem,1.8vw,1.15rem);
  border-top:2px solid rgba(7,30,35,.18);
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;
  font-size:.9rem;color:var(--muted);
}
body.kd-light .post-shell .post-meta .pm-by{color:var(--ink);font-weight:600}
body.kd-light .post-shell .post-meta .pm-updated{margin-left:auto;font-size:.82rem;color:var(--steel)}

/* ---- the writing. It was running at ~98 characters a line because
   .post-body .kd-editor carried max-width:none. Comfortable is 50-75. ---- */
body.kd-light .post-prose{
  max-width:none;margin-top:clamp(1.5rem,2.8vw,2.2rem);
  border-top:2px solid rgba(7,30,35,.10);padding-top:clamp(1.5rem,2.8vw,2.2rem);
}
body.kd-light .post-prose p,
body.kd-light .post-prose ul,
body.kd-light .post-prose ol{max-width:68ch;font-size:1.02rem;line-height:1.62}
body.kd-light .post-prose h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin-top:2.1rem}
body.kd-light .post-prose h3{font-size:clamp(1.1rem,1.9vw,1.32rem);margin-top:1.6rem}
body.kd-light .post-prose>*:first-child{margin-top:0}

@media (max-width:760px){
  /* `cover` here was the bug: the gradient stopped at 420px but the image
     carried on painting behind the whole panel, so a long post had surf
     running down beside the body copy. The image gets a fixed height too. */
  body.kd-light .hero-sea-post{
    --post-sky:max(230px, 52vw);
    background-position:center top, center top;
    padding-bottom:clamp(3.4rem,10vw,4.6rem);
  }
  body.kd-light .post-shell{padding:1.4rem 1.2rem 1.8rem}
  body.kd-light .post-shell .post-meta .pm-updated{margin-left:0;flex-basis:100%}
}

/* ---- vs-diy takes the how-it-works shape; the wipeout robot came out of the
   hero with it, same as the trophy and the launch robot in 2.1.1. ---- */
body.kd-light .hero-sea-vsdiy{background-position:46% 34%;background-size:142%}

/* ============================================================
   2.2.0 — AMBIENT FLOAT on standalone brand art (2026-08-28)
   His ask: the drift the homepage price board has, everywhere a piece of brand
   art stands on its own. "Just makes the whole thing feel slightly more alive
   and its subtle."

   ⚠️ Animates the independent `translate` property, NOT `transform`.
   Half the panels on this site carry `transform:rotate(±1.2deg)` — the comic
   lean — and a transform-based keyframe would overwrite it and flatten every
   one of them. `translate` composes with `transform` instead of replacing it.

   ⚠️ FLOAT ONLY, NO TILT. The pointer-tilt was tried and rejected on
   2026-08-28 ("Actually i changed my mind, dont do that"). Do not re-add
   data-tilt to these.

   ⚠️ ONE FLOATER PER BLOCK. His rule, and he is right: "on the homepage there
   is the how it works block, it would be overkill to add it to all 3 images
   there and would look weird." A row or reel of sibling art must stay still —
   float only art that stands ALONE in its block. So `.step-art` (3 on the
   homepage, 6 on how-it-works) and `.hiw-step-art` (6) are deliberately NOT
   in the selector list, and never should be. The `.ph-panel`s that do float
   each sit in their own section.

   Same guards as the original: desktop only, and off entirely for anyone who
   asks for reduced motion.
   ============================================================ */
@keyframes kdFloat{
  0%,100%{translate:0 0}
  50%    {translate:0 var(--kd-float-y,-9px)}
}

@media (prefers-reduced-motion:no-preference) and (min-width:981px){
  body.kd-light .ph-panel,
  body.kd-light .about-art{
    animation:kdFloat var(--kd-float-dur,8.5s) ease-in-out var(--kd-float-delay,2.2s) infinite;
    will-change:translate;
  }

  /* ---- already moving, or deliberately still ---- */
  /* inside a .tilt-stage that floats already (homepage price board, CTA card) */
  body.kd-light .tilt-stage.has-float .ph-panel,
  /* the blog post's featured image: you read past this one, and it sits in a
     fixed-height crop, so drifting it slides the crop under its own frame */
  body.kd-light .post-lede-art .ph-panel,
  /* the sticky preview card: motion right beside a button it wants clicked */
  body.kd-light .rail-art .ph-panel{
    animation:none;
  }

  /* ---- phase, so the page breathes instead of pulsing in unison.
     Duration comes from the component (each kind of art has its own weight);
     the DELAY is bucketed by the art's section position, so no two sections
     within three of each other can ever share a phase. An earlier attempt
     keyed on nth-of-type(even) silently did nothing — pricing happens to put
     both of its plain .pr-split blocks in ODD sections. ---- */
  body.kd-light .faq-lead-art  .ph-panel{--kd-float-dur:9.4s}
  body.kd-light .ph-art        .ph-panel{--kd-float-dur:8.8s}
  body.kd-light .ai-art        .ph-panel{--kd-float-dur:7.9s}
  body.kd-light .pr-split      .ph-panel{--kd-float-dur:9.1s}
  body.kd-light .pr-split-flip .ph-panel{--kd-float-dur:8.2s}

  body.kd-light section:nth-of-type(3n+1) .ph-panel{--kd-float-delay:0.7s}
  body.kd-light section:nth-of-type(3n+2) .ph-panel{--kd-float-delay:2.3s}
  body.kd-light section:nth-of-type(3n+3) .ph-panel{--kd-float-delay:3.6s}

  /* hero art leads the page, so it drifts a touch further than the rest */
  body.kd-light .page-hero .ph-panel,
  body.kd-light .hero-sea  .ph-panel{--kd-float-y:-11px}
}