/* ==========================================================================
   KahunaCart brand layer
   --------------------------------------------------------------------------
   Loaded after Helios's compiled Tailwind bundle (build/css/site.css), so on
   equal specificity these rules win.

   Light-only by decision (2026-08-20). Palette taken from the logo SVG fills.

   Nothing here uses Tailwind utilities: Helios compiles Tailwind from its own
   source list, which does not scan this child theme, so any new utility class
   written in these templates would never make it into the bundle. Every style
   below is plain CSS on `kc-` prefixed classes.
   ========================================================================== */

:root {
    /* Brand palette */
    --kc-salt: #FCF6EA;         /* page ground */
    --kc-sand: #F6EAD7;         /* panels, surfaces */
    --kc-sand-soft: #F9F1E1;    /* half a step off Sand, for large tinted areas */
    --kc-sand-deep: #EFDFC4;
    --kc-koa: #2B1C0C;          /* text ink */
    --kc-koa-soft: #5C4A38;     /* secondary text */
    --kc-lagoon: #1A6F83;       /* brand primary, links */
    --kc-lagoon-deep: #14555F;
    --kc-lagoon-mist: #DDEAE8;
    --kc-board: #CA5415;        /* action color: buttons and big display numbers only */
    --kc-board-deep: #AC4610;
    --kc-line: #E4D5BC;
    --kc-card: #FFFCF4;

    /* Type */
    --kc-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", sans-serif;
    --kc-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
    --kc-mono: "Spline Sans Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Logo art */
    --kc-bus: url("../images/logo.svg");
    --kc-bus-noshadow: url("../images/logo-noshadow.svg");

    /* Chrome metrics */
    --kc-nav-h: 76px;
    --kc-docs-gap: 40px;        /* breathing room above/below the docs columns */

    /* Re-point Helios's own font variables at the brand faces so inherited
       documentation pages pick them up without touching the parent theme. */
    --helios-font-body: var(--kc-body);
    --helios-font-code: var(--kc-mono);
}

/* --------------------------------------------------------------------------
   Global ground
   -------------------------------------------------------------------------- */

.kc-body {
    margin: 0;
    background: var(--kc-salt);
    color: var(--kc-koa);
    font-family: var(--kc-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

/* Content links are Lagoon. `:where()` keeps this at element specificity so any
   component class below (buttons, nav items, footer links) wins without a fight. */
:where(.kc-body) a { color: var(--kc-lagoon); }
.kc-body a:focus-visible,
.kc-body button:focus-visible,
.kc-body summary:focus-visible {
    outline: 3px solid var(--kc-lagoon);
    outline-offset: 2px;
}

.kc-body h1,
.kc-body h2,
.kc-body h3,
.kc-body h4 {
    font-family: var(--kc-display);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.kc-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.kc-mono { font-family: var(--kc-mono); }

.kc-h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.06;
    margin: 0 0 14px;
}

.kc-kicker {
    font-family: var(--kc-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kc-lagoon);
    margin: 0 0 12px;
}

.kc-intro {
    color: var(--kc-koa-soft);
    font-size: 17px;
    max-width: 62ch;
    margin: 0 0 40px;
}

.kc-intro.kc-intro-tight { margin-bottom: 8px; }
.kc-intro.kc-intro-flush { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.kc-btn {
    display: inline-block;
    background: var(--kc-board);
    color: #FFF6EA;
    font-family: var(--kc-body);
    font-weight: 700;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: 11px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}
.kc-btn:hover { background: var(--kc-board-deep); color: #FFF6EA; transform: translateY(-1px); }
.kc-btn-small { padding: 9px 18px; font-size: 14px; border-radius: 9px; }
.kc-btn-large { font-size: 16px; padding: 15px 30px; }
.kc-btn-ghost {
    background: transparent;
    color: var(--kc-koa);
    border: 1.5px solid var(--kc-koa);
}
.kc-btn-ghost:hover { background: var(--kc-sand); color: var(--kc-koa); transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Early access ribbon
   -------------------------------------------------------------------------- */

.kc-ribbon {
    background: var(--kc-lagoon-deep);
    color: #F6EAD7;
    font-size: 13.5px;
    text-align: center;
    padding: 9px 16px;
}
.kc-ribbon b { color: #FFD9A8; font-weight: 700; }
.kc-ribbon a { color: #F6EAD7; font-weight: 600; }

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.kc-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(252, 246, 234, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--kc-line);
}
.kc-nav-in {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--kc-nav-h);
}
.kc-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    text-decoration: none;
    color: var(--kc-koa);
}
.kc-brand i {
    width: 60px;
    height: 60px;
    background: var(--kc-bus) center / contain no-repeat;
    display: block;
    flex: none;
}
.kc-brand b {
    font-family: var(--kc-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.015em;
}
.kc-brand b em { font-style: normal; color: var(--kc-board); }

.kc-nav-item {
    color: var(--kc-koa);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}
.kc-nav-item:hover { color: var(--kc-lagoon); }

.kc-nav-burger {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    margin-left: -8px;
    color: var(--kc-koa);
    cursor: pointer;
}
.kc-nav-burger svg { width: 24px; height: 24px; display: block; }

.kc-nav-mobile { display: none; }
.kc-nav-mobile-in {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-top: 2px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.kc-nav-mobile-in::-webkit-scrollbar { display: none; }
.kc-nav-mobile-in a {
    color: var(--kc-koa-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .kc-nav-item { display: none; }
    .kc-nav-mobile { display: block; border-top: 1px solid var(--kc-line); padding-top: 8px; }
    .kc-brand i { width: 46px; height: 46px; }
    .kc-brand b { font-size: 21px; }
    .kc-nav-in { height: 64px; gap: 14px; }
}

/* Docs pages keep Helios's mobile sidebar trigger inside the brand bar. */
.kc-nav-docs .kc-nav-burger { display: none; }
@media (max-width: 1023px) {
    .kc-nav-docs .kc-nav-burger { display: block; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.kc-hero { position: relative; overflow: hidden; padding: 72px 0 84px; }
.kc-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
}
/* Pre-launch pill above the headline. The dot pulses so it reads as a live
   status rather than a label. */
.kc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 6px 14px 6px 11px;
    border: 1.5px solid var(--kc-board);
    border-radius: 999px;
    background: rgba(202, 84, 21, 0.08);
    color: var(--kc-board-deep);
    font-family: var(--kc-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.kc-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kc-board);
    animation: kc-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes kc-badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
    .kc-badge-dot { animation: none; }
}

.kc-hero h1 {
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 800;
    line-height: 1.0;
    margin: 0 0 20px;
    max-width: 14ch;
}
.kc-hero h1 em { font-style: normal; color: var(--kc-lagoon); }
.kc-hero-sub { font-size: 18px; color: var(--kc-koa-soft); max-width: 46ch; margin: 0 0 30px; }
.kc-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.kc-ctas-center { justify-content: center; margin-top: 26px; }
.kc-trust {
    margin-top: 34px;
    font-family: var(--kc-mono);
    font-size: 12.5px;
    color: var(--kc-koa-soft);
    letter-spacing: 0.03em;
}
.kc-trust b { color: var(--kc-koa); font-weight: 700; }
.kc-hero-art { position: relative; min-height: 340px; }

/* The bus: the outer box is positioned and pulls in; the body inside it is
   the picture and does the bouncing; the shadow sits on the sand. */
.kc-hero-bus {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(440px, 92%);
    aspect-ratio: 1;
}
/* The exhaust. A point at the tailpipe — the rear-left corner of the bus
   in this view — from which soft koa puffs rise and drift back. Each is a
   feathered disc; the motion is all in the keyframes below. */
.kc-hero-exhaust {
    position: absolute;
    left: 13%;
    top: 72%;
    width: 0;
    height: 0;
}
.kc-hero-exhaust i {
    position: absolute;
    left: -11px;
    top: -11px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(43, 28, 12, 0.16), rgba(43, 28, 12, 0));
    opacity: 0;
}

/* Two layers of ride: the body lifts, the picture inside it rocks. They
   run on different clocks so the motion never visibly repeats. */
.kc-hero-bus-body { position: absolute; inset: 0; }
.kc-hero-bus-img {
    position: absolute;
    inset: 0;
    background: var(--kc-bus-noshadow) center / contain no-repeat;
    transform-origin: 50% 78%;
}
.kc-hero-bus-shadow {
    position: absolute;
    inset: 0;
    fill: var(--kc-koa);
    /* the shadow shape's own centre in the logo's 1254-unit box */
    transform-origin: 49.2% 78.5%;
}

/* The sand. A patch of ripple lines under the bus, laid into its ground
   plane: the matrix maps the field's horizontal to the up-right axis of the
   drawing and its vertical to the down-right axis the bus drives along, so
   the ripples cross the road. The mask feathers the patch into the page. */
.kc-dunes {
    position: absolute;
    left: -12%;
    right: -12%;
    top: 40%;
    bottom: -18%;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 50% 46% at 52% 54%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 46% at 52% 54%, #000 35%, transparent 100%);
}
.kc-dunes-field {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%) matrix(0.914, -0.407, 0.914, 0.407, 0, 0);
    overflow: visible;
}
.kc-dune path { fill: none; stroke: var(--kc-koa); stroke-width: 2; stroke-linecap: round; opacity: 0.22; }

@media (max-width: 880px) {
    .kc-hero-grid { grid-template-columns: 1fr; }
    .kc-hero-art { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   Page hero (standalone pages such as /pricing)
   -------------------------------------------------------------------------- */

.kc-page-hero { padding: 64px 0 28px; text-align: center; }
.kc-page-hero h1 {
    font-size: clamp(34px, 5.2vw, 54px);
    font-weight: 800;
    line-height: 1.04;
    margin: 0 0 16px;
}
.kc-page-hero h1 em { font-style: normal; color: var(--kc-lagoon); }
.kc-page-hero .kc-kicker { text-align: center; }
.kc-page-hero .kc-intro { margin: 0 auto; text-align: center; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .kc-hero h1,
    .kc-hero .kc-hero-sub,
    .kc-hero .kc-ctas,
    .kc-hero .kc-trust { animation: kc-rise 600ms ease both; }
    .kc-hero .kc-hero-sub { animation-delay: 80ms; }
    .kc-hero .kc-ctas { animation-delay: 160ms; }
    .kc-hero .kc-trust { animation-delay: 240ms; }
    .kc-hero-bus { animation: kc-pull-in 700ms cubic-bezier(0.22, 0.9, 0.36, 1) both; animation-delay: 120ms; }

    /* The drive. The bus faces down-right, so the ground rolls up-left:
       the field slides one line-spacing along its own vertical — which the
       matrix above lays along the road — and arrives at an identical frame,
       so the loop is invisible. The bounce is deliberately uneven, two lumps
       of different height per cycle, because a regular bob reads as a boat
       rather than a road; the shadow flattens and fades as the bus rises.
       Both start once the bus has pulled in. */
    .kc-dune { animation: kc-drift 3.4s linear infinite; }
    .kc-hero-bus-body { animation: kc-bounce 2.3s ease-in-out 820ms infinite; }
    .kc-hero-bus-img { animation: kc-rock 3.1s ease-in-out 820ms infinite; }
    .kc-hero-bus-shadow { animation: kc-bounce-shadow 2.3s ease-in-out 820ms infinite; }

    /* Puffs: born small at the pipe, swell as they rise and drift back
       (up and to the left, against the travel), thin out and go. Four of
       them on four different durations and offsets. */
    .kc-hero-exhaust i { animation: kc-puff ease-out infinite; }
    .kc-hero-exhaust i:nth-child(1) { animation-duration: 2.6s; animation-delay: 1.0s; }
    .kc-hero-exhaust i:nth-child(2) { animation-duration: 3.1s; animation-delay: 1.9s; }
    .kc-hero-exhaust i:nth-child(3) { animation-duration: 2.3s; animation-delay: 2.7s; --kc-puff-x: -34px; }
    .kc-hero-exhaust i:nth-child(4) { animation-duration: 3.5s; animation-delay: 3.6s; --kc-puff-x: -52px; }
    @keyframes kc-puff {
        0%   { transform: translate(0, 0) scale(0.35); opacity: 0; }
        12%  { opacity: 1; }
        100% { transform: translate(var(--kc-puff-x, -44px), -34px) scale(1.9); opacity: 0; }
    }

    @keyframes kc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes kc-pull-in { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
    @keyframes kc-drift { to { transform: translateY(-96px); } }
    /* The lift: three bumps of different heights at uneven spacing over
       2.3s. The rock runs on its own 3.1s clock with its own uneven beats,
       so the two only line up again every seventy-odd seconds — close
       enough to random that nobody will catch the loop. */
    @keyframes kc-bounce {
        0%, 100% { transform: translateY(0); }
        17%      { transform: translateY(-5px); }
        31%      { transform: translateY(-1px); }
        46%      { transform: translateY(-3px); }
        58%      { transform: translateY(-0.5px); }
        79%      { transform: translateY(-4px); }
        91%      { transform: translateY(-1.5px); }
    }
    @keyframes kc-rock {
        0%, 100% { transform: rotate(0deg); }
        21%      { transform: rotate(-0.8deg); }
        38%      { transform: rotate(0.3deg); }
        55%      { transform: rotate(0.7deg); }
        70%      { transform: rotate(-0.2deg); }
        86%      { transform: rotate(-0.5deg); }
    }
    /* The shadow answers the bounce: it shrinks a little and slides back
       along the road as the bus lifts off it, and settles as it lands. */
    @keyframes kc-bounce-shadow {
        0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
        17%      { transform: translate(-3px, -1px) scale(0.965); opacity: 0.82; }
        31%      { transform: translate(-0.5px, 0) scale(0.995); opacity: 0.97; }
        46%      { transform: translate(-2px, -0.5px) scale(0.98); opacity: 0.9; }
        58%      { transform: translate(-0.3px, 0) scale(0.997); opacity: 0.98; }
        79%      { transform: translate(-2.5px, -1px) scale(0.97); opacity: 0.85; }
        91%      { transform: translate(-1px, -0.3px) scale(0.99); opacity: 0.95; }
    }

    .kc-reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; }
    .kc-reveal.kc-in { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Stat band
   -------------------------------------------------------------------------- */

.kc-stats { background: var(--kc-lagoon-deep); color: #F6EAD7; }
.kc-stats-in {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 34px 0;
    text-align: center;
}
@media (max-width: 720px) { .kc-stats-in { grid-template-columns: repeat(2, 1fr); } }
.kc-stat .kc-num {
    font-family: var(--kc-display);
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 38px);
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kc-stat .kc-lbl {
    font-family: var(--kc-mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #A8CBCB;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */

.kc-block { padding: 88px 0; }
.kc-block.kc-tight { padding-top: 64px; }

/* Anchor targets clear the sticky brand bar. */
.kc-body [id] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------------------
   Plain content page (default template in the marketing shell)
   -------------------------------------------------------------------------- */

.kc-page .kc-wrap { max-width: 800px; }
.kc-page-head { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--kc-line); }
.kc-page-head h1 { font-size: clamp(32px, 4.6vw, 46px); font-weight: 800; line-height: 1.05; margin: 0 0 14px; }
.kc-page-head .kc-intro { margin-bottom: 0; }

.kc-prose { font-size: 16.5px; color: var(--kc-koa); }
.kc-prose h2 { font-size: 28px; font-weight: 800; margin: 40px 0 12px; }
.kc-prose h3 { font-size: 20px; font-weight: 700; margin: 30px 0 10px; }
.kc-prose p { margin: 0 0 18px; }
.kc-prose ul,
.kc-prose ol { margin: 0 0 18px; padding-left: 22px; }
.kc-prose li { margin-bottom: 8px; }
.kc-prose code { font-family: var(--kc-mono); font-size: 0.92em; background: var(--kc-sand); border-radius: 6px; padding: 2px 6px; }
.kc-prose pre { background: var(--kc-koa); color: #E8DECF; border-radius: 12px; padding: 18px 20px; overflow-x: auto; }
.kc-prose pre code { background: none; padding: 0; color: inherit; }
.kc-prose blockquote { border-left: 3px solid var(--kc-board); margin: 0 0 18px; padding-left: 18px; color: var(--kc-koa-soft); }
.kc-prose table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.kc-prose th,
.kc-prose td { border-bottom: 1px solid var(--kc-line); padding: 10px 12px; text-align: left; }
.kc-prose img { max-width: 100%; height: auto; border-radius: 12px; }

/* --------------------------------------------------------------------------
   Feature / audience cards
   -------------------------------------------------------------------------- */

.kc-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kc-feat-grid.kc-pushed { margin-top: 36px; }
@media (max-width: 960px) { .kc-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kc-feat-grid { grid-template-columns: 1fr; } }

.kc-feat {
    background: var(--kc-card);
    border: 1px solid var(--kc-line);
    border-radius: 16px;
    padding: 24px 22px;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.kc-feat:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); }
.kc-feat .kc-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--kc-lagoon-mist);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.kc-feat .kc-ic svg {
    width: 22px;
    height: 22px;
    stroke: var(--kc-lagoon-deep);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-feat h3 { font-size: 17.5px; font-weight: 700; margin: 0 0 8px; }
.kc-feat p { font-size: 14.5px; color: var(--kc-koa-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Platform split
   -------------------------------------------------------------------------- */

.kc-platform {
    background: var(--kc-sand);
    border-top: 1px solid var(--kc-line);
    border-bottom: 1px solid var(--kc-line);
}
.kc-plat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .kc-plat-grid { grid-template-columns: 1fr; } }

.kc-plat-points { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.kc-ppoint { display: flex; gap: 14px; }
.kc-ppoint .kc-dot {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--kc-lagoon);
    color: #F6EAD7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kc-ppoint .kc-dot svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-ppoint b { display: block; font-size: 15.5px; }
.kc-ppoint span { font-size: 14.5px; color: var(--kc-koa-soft); }

.kc-plat-card {
    background: var(--kc-lagoon-deep);
    color: #E8F0EE;
    border-radius: 20px;
    padding: 34px 32px;
    position: relative;
    overflow: hidden;
}
.kc-plat-card .kc-waves2 { position: absolute; right: -30px; bottom: -20px; width: 340px; opacity: 0.35; pointer-events: none; }
.kc-plat-card h3 { color: #fff; font-size: 22px; font-weight: 800; margin: 0 0 10px; position: relative; }
.kc-plat-card p { font-size: 14.5px; color: #BAD3D2; margin: 0 0 18px; position: relative; }
.kc-plat-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
.kc-pstat {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(246, 234, 215, 0.18);
    border-radius: 12px;
    padding: 14px 16px;
}
.kc-pstat .kc-n { font-family: var(--kc-display); font-weight: 800; font-size: 22px; color: #fff; }
.kc-pstat .kc-l {
    font-family: var(--kc-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #A8CBCB;
    margin-top: 3px;
}
.kc-plat-card .kc-gravlink {
    position: relative;
    display: inline-block;
    margin-top: 20px;
    color: #FFD9A8;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.kc-plat-card .kc-gravlink:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Admin mockup
   -------------------------------------------------------------------------- */

.kc-admin-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; }
@media (max-width: 880px) { .kc-admin-grid { grid-template-columns: 1fr; } }

.kc-admin-mock {
    background: var(--kc-card);
    border: 1px solid var(--kc-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.10);
    font-size: 12px;
}
.kc-am-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: var(--kc-sand);
    border-bottom: 1px solid var(--kc-line);
}
.kc-am-top i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.kc-am-top i:nth-child(1) { background: #CA5415; }
.kc-am-top i:nth-child(2) { background: #F6EAD7; border: 1px solid #E4D5BC; }
.kc-am-top i:nth-child(3) { background: #1A6F83; }
.kc-am-top .kc-url {
    font-family: var(--kc-mono);
    font-size: 10.5px;
    color: var(--kc-koa-soft);
    background: var(--kc-salt);
    border-radius: 999px;
    padding: 2px 10px;
    margin-left: 6px;
}
.kc-am-body { display: grid; grid-template-columns: 132px 1fr; min-height: 300px; }
.kc-am-side { background: var(--kc-lagoon-deep); color: #BAD3D2; padding: 14px 0; }
.kc-am-side .kc-it { padding: 7px 16px; font-size: 11.5px; font-weight: 600; }
.kc-am-side .kc-it.kc-on {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-left: 3px solid var(--kc-board);
    padding-left: 13px;
}
.kc-am-main { padding: 16px 18px; }
.kc-am-h { font-family: var(--kc-display); font-weight: 700; font-size: 14px; margin: 0 0 12px; }
.kc-am-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kc-am-tile { background: var(--kc-sand); border: 1px solid var(--kc-line); border-radius: 10px; padding: 10px 12px; }
.kc-am-tile .kc-v { font-family: var(--kc-mono); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.kc-am-tile .kc-k { font-size: 10px; color: var(--kc-koa-soft); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }
.kc-am-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--kc-line);
    font-size: 11.5px;
}
.kc-am-row:last-child { border-bottom: 0; }
.kc-am-row .kc-id { font-family: var(--kc-mono); color: var(--kc-koa-soft); }
.kc-am-row .kc-who { font-weight: 600; }
.kc-am-row .kc-amt { font-family: var(--kc-mono); margin-left: auto; font-variant-numeric: tabular-nums; }

.kc-pill { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: 0.03em; }
.kc-pill-paid { background: var(--kc-lagoon-mist); color: var(--kc-lagoon-deep); }
.kc-pill-ship { background: #F3DEC9; color: #8A4A12; }
.kc-pill-refund { background: var(--kc-sand-deep); color: var(--kc-koa-soft); }

.kc-checks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.kc-checks li { display: flex; gap: 11px; font-size: 15px; align-items: baseline; }
.kc-checks li::before { content: "\2713"; color: var(--kc-lagoon); font-weight: 800; flex: none; }

/* --------------------------------------------------------------------------
   Payment providers
   -------------------------------------------------------------------------- */

.kc-prov-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 800px) { .kc-prov-lanes { grid-template-columns: 1fr; } }

.kc-lane { background: var(--kc-card); border: 1px solid var(--kc-line); border-radius: 16px; padding: 22px; }
.kc-lane h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.kc-lane .kc-lane-sub { font-size: 13.5px; color: var(--kc-koa-soft); margin: 0 0 16px; }

.kc-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.kc-chip {
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--kc-lagoon-mist);
    color: var(--kc-lagoon-deep);
    border: 1px solid transparent;
}
.kc-chip.kc-addon { background: var(--kc-sand); color: var(--kc-koa); border-color: var(--kc-line); }
.kc-chip small { font-weight: 600; opacity: 0.75; margin-left: 5px; font-size: 11px; }

.kc-prov-note { font-size: 14px; color: var(--kc-koa-soft); max-width: 72ch; }
.kc-prov-note b { color: var(--kc-koa); }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.kc-pricing {
    background: var(--kc-sand);
    border-top: 1px solid var(--kc-line);
    border-bottom: 1px solid var(--kc-line);
}
.kc-price-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; align-items: stretch; }
@media (max-width: 840px) { .kc-price-grid { grid-template-columns: 1fr; } }

.kc-price-card {
    background: var(--kc-card);
    border: 2px solid var(--kc-koa);
    border-radius: 20px;
    padding: 32px;
    position: relative;
}
.kc-ea-flag {
    position: absolute;
    top: -14px;
    left: 28px;
    background: var(--kc-board);
    color: #FFF6EA;
    font-family: var(--kc-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 5px 14px;
    border-radius: 999px;
}
.kc-price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 8px 0 4px; }
.kc-price-now {
    font-family: var(--kc-display);
    font-weight: 800;
    font-size: 58px;
    letter-spacing: -0.03em;
    color: var(--kc-board);
    line-height: 1;
}
.kc-price-was { font-family: var(--kc-mono); font-size: 20px; color: var(--kc-koa-soft); text-decoration: line-through; }
.kc-price-per { font-size: 14px; color: var(--kc-koa-soft); }
.kc-price-card ul { list-style: none; margin: 20px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.kc-price-card ul li { display: flex; gap: 11px; font-size: 15px; align-items: baseline; }
.kc-price-card ul li::before { content: "\2713"; color: var(--kc-lagoon); font-weight: 800; flex: none; }

.kc-renew-card {
    background: var(--kc-lagoon-deep);
    color: #E8F0EE;
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.kc-renew-card h3 { color: #fff; font-size: 19px; font-weight: 800; margin: 0 0 12px; }
.kc-renew-card p { font-size: 14.5px; color: #BAD3D2; margin: 0 0 14px; }
.kc-renew-card p b { color: #fff; }
.kc-renew-card p.kc-first { margin-top: 10px; }
.kc-renew-num { font-family: var(--kc-display); font-weight: 800; font-size: 40px; color: #fff; letter-spacing: -0.02em; }
.kc-renew-num small { font-size: 15px; font-weight: 600; color: #A8CBCC; letter-spacing: 0; }
.kc-always {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(246, 234, 215, 0.22);
    font-size: 13.5px;
    color: #FFD9A8;
    font-weight: 600;
}
.kc-addon-note { margin-top: 18px; font-size: 14.5px; color: var(--kc-koa-soft); max-width: 78ch; }
.kc-addon-note b { color: var(--kc-koa); }

/* --------------------------------------------------------------------------
   Try it right now
   --------------------------------------------------------------------------
   One centered callout built like a browser window, with the live demo
   address in the title bar so the URL is the first thing read.
   -------------------------------------------------------------------------- */

.kc-demo-card {
    background: var(--kc-card);
    border: 1px solid var(--kc-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.10);
}

.kc-demo-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    background: var(--kc-sand);
    border-bottom: 1px solid var(--kc-line);
}
.kc-demo-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; flex: none; }
.kc-demo-bar i:nth-child(1) { background: #CA5415; }
.kc-demo-bar i:nth-child(2) { background: #F6EAD7; border: 1px solid #E4D5BC; }
.kc-demo-bar i:nth-child(3) { background: #1A6F83; }

.kc-demo-url {
    flex: 1;
    margin-left: 8px;
    font-family: var(--kc-mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kc-lagoon);
    background: var(--kc-salt);
    border: 1px solid var(--kc-line);
    border-radius: 999px;
    padding: 5px 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 140ms ease, color 140ms ease;
}
.kc-demo-url:hover { color: var(--kc-lagoon-deep); background: var(--kc-lagoon-mist); }

.kc-demo-in { padding: 40px 40px 36px; }
@media (max-width: 640px) { .kc-demo-in { padding: 30px 22px 28px; } }
.kc-demo-in .kc-kicker { margin-bottom: 10px; }
.kc-demo-intro { max-width: 68ch; }

.kc-demo-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 30px 0 34px;
}
@media (max-width: 820px) { .kc-demo-facts { grid-template-columns: 1fr; gap: 20px; } }

.kc-demo-fact .kc-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--kc-lagoon);
    color: #F6EAD7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.kc-demo-fact .kc-dot svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-demo-fact b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.kc-demo-fact span { font-size: 14.5px; color: var(--kc-koa-soft); }

.kc-demo-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.kc-demo-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--kc-koa-soft);
}
.kc-demo-note svg {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: var(--kc-board);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.kc-faq { max-width: 780px; }
.kc-faq.kc-pushed { margin-top: 34px; }
.kc-faq details {
    background: var(--kc-card);
    border: 1px solid var(--kc-line);
    border-radius: 13px;
    padding: 0 22px;
    margin-bottom: 10px;
}
.kc-faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 15.5px;
    padding: 17px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
.kc-faq summary::-webkit-details-marker { display: none; }
.kc-faq summary::after { content: "+"; font-family: var(--kc-mono); color: var(--kc-lagoon); font-size: 19px; }
.kc-faq details[open] summary::after { content: "\2013"; }
.kc-faq details p { margin: 0 0 18px; font-size: 14.5px; color: var(--kc-koa-soft); }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.kc-cta-final { text-align: center; padding: 96px 0 100px; position: relative; overflow: hidden; }
.kc-cta-final h2 { font-size: clamp(30px, 4.6vw, 48px); margin-bottom: 14px; }
.kc-cta-final .kc-cta-sub { color: var(--kc-koa-soft); font-size: 17px; max-width: 52ch; margin: 0 auto 30px; }
.kc-cta-final .kc-waves3 { position: absolute; left: -80px; bottom: -30px; width: 480px; opacity: 0.4; pointer-events: none; }

/* --------------------------------------------------------------------------
   Newsletter band
   --------------------------------------------------------------------------
   Two columns on a sand ground: copy on the left, the inline email row on the
   right. The whole band is bracketed by hairlines so it reads as its own strip
   between the closing CTA and the footer.
   -------------------------------------------------------------------------- */

.kc-news {
    background: var(--kc-sand);
    border-top: 1px solid var(--kc-line);
    border-bottom: 1px solid var(--kc-line);
    padding: 64px 0;
}
.kc-news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.kc-news-grid .kc-h2 { font-size: clamp(26px, 3.4vw, 36px); }
.kc-news-grid .kc-intro { font-size: 16px; max-width: 44ch; }

.kc-news-side { display: flex; flex-direction: column; justify-content: center; }

.kc-news-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}
.kc-news-input {
    flex: 1 1 240px;
    min-width: 0;
    font-family: var(--kc-body);
    font-size: 15px;
    color: var(--kc-koa);
    background: var(--kc-card);
    border: 1.5px solid var(--kc-line);
    border-radius: 11px;
    padding: 13px 16px;
}
.kc-news-input::placeholder { color: #A08A6E; }
.kc-news-input:focus {
    outline: none;
    border-color: var(--kc-lagoon);
    box-shadow: 0 0 0 3px rgba(26, 111, 131, 0.16);
}
.kc-news-btn { flex: none; white-space: nowrap; }
.kc-news-btn[disabled] { opacity: 0.7; cursor: default; transform: none; }

.kc-news-promise {
    margin: 14px 0 0;
    font-family: var(--kc-mono);
    font-size: 12.5px;
    letter-spacing: 0.03em;
    color: var(--kc-koa-soft);
}

.kc-news-msg {
    margin: 14px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--kc-lagoon-deep);
}
.kc-news-msg span { font-family: var(--kc-mono); }
.kc-news-msg-error { color: #A32E12; }

/* Visually hidden, still read out. */
.kc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 860px) {
    .kc-news { padding: 52px 0; }
    .kc-news-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.kc-footer {
    background: var(--kc-koa);
    color: #C9B9A4;
    border-top: 5px solid var(--kc-board);
}
.kc-foot-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 40px; }
@media (max-width: 840px) { .kc-foot-in { grid-template-columns: 1fr 1fr; } }

.kc-foot-brand i {
    width: 88px;
    height: 88px;
    background: var(--kc-bus-noshadow) center / contain no-repeat;
    display: block;
    margin-bottom: 12px;
}
.kc-foot-brand b { font-family: var(--kc-display); font-weight: 800; font-size: 19px; color: #F6EAD7; display: block; }
.kc-foot-brand p { font-size: 13.5px; margin: 8px 0 0; max-width: 30ch; }

.kc-footer h4 {
    font-family: var(--kc-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8A7660;
    margin: 6px 0 14px;
}
.kc-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.kc-footer ul a { color: #E8DECF; text-decoration: none; font-size: 14px; }
.kc-footer ul a:hover { color: #fff; text-decoration: underline; }

.kc-foot-base {
    border-top: 1px solid rgba(246, 234, 215, 0.14);
    padding-top: 20px;
    padding-bottom: 28px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
}
.kc-foot-base b { color: #E8DECF; font-weight: 600; }

/* --------------------------------------------------------------------------
   Documentation pages (Helios layout, KahunaCart skin)
   -------------------------------------------------------------------------- */

/* The branded bar above already carries the logo lockup, so the docs sidebar's
   own logo row is redundant. Helios's sidebar partial renders it as the first
   child of the sidebar root. */
.kc-docs-aside > div > div:first-child,
.kc-docs-mobile-panel > div > div:first-child { display: none; }

/* Helios pins the sidebar with `lg:fixed lg:inset-y-0`, which would run it under
   the brand bar and straight over the site footer. Make it a sticky flex child
   instead: it starts below the header and stops at the footer. */
.kc-docs-aside {
    background: var(--kc-salt);
    border-right-color: var(--kc-line);
}
@media (min-width: 1024px) {
    .kc-docs-aside {
        position: sticky;
        top: var(--kc-nav-h);
        height: calc(100vh - var(--kc-nav-h));
        align-self: flex-start;
        z-index: 20;
    }
    /* The content column no longer needs to clear a fixed sidebar. */
    .kc-docs-content { padding-left: 0; }
}

.kc-docs-shell {
    background: var(--kc-card);
    min-height: calc(100vh - var(--kc-nav-h));
}

/* The mobile sidebar drawer has to sit above the sticky brand bar (both are
   z-50 in Helios, and the bar renders later in the DOM). */
.mobile-nav-overlay { z-index: 55; }
.kc-docs-mobile-panel {
    z-index: 60;
    background: var(--kc-salt);
    padding-top: 12px;
}

/* Search trigger in the docs header */
.kc-nav-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--kc-card);
    border: 1px solid var(--kc-line);
    border-radius: 999px;
    padding: 7px 14px;
    font-family: var(--kc-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kc-koa-soft);
    cursor: pointer;
    white-space: nowrap;
}
.kc-nav-search:hover { border-color: var(--kc-lagoon); color: var(--kc-koa); }
.kc-nav-search svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (max-width: 900px) { .kc-nav-search span { display: none; } }

/* Helios sets the article column's vertical rhythm and pins the TOC rail with
   Tailwind utilities (`py-10`, `top-24`, `max-h-[calc(100vh-7rem)]`) that never
   reach the browser: Tailwind compiles from Helios's own source list, which does
   not scan this child theme. So the column rendered flush against the header and
   the footer, and the TOC's `position: sticky` sat at `top: auto` and never
   stuck. Both are set here in plain CSS instead. */
.kc-docs-main {
    color: var(--kc-koa);
    padding-top: var(--kc-docs-gap);
    padding-bottom: var(--kc-docs-gap);
}

.kc-docs-toc-rail {
    position: sticky;
    top: calc(var(--kc-nav-h) + var(--kc-docs-gap));
    max-height: calc(100vh - var(--kc-nav-h) - (var(--kc-docs-gap) * 2));
    overflow-y: auto;
}

/* The TOC panel carries its own 32px of top padding, which would push "ON THIS
   PAGE" below the breadcrumbs. Drop it and let both columns start on the gap. */
.kc-docs-toc-rail > div { padding-top: 0; }

.kc-docs-main h1,
.kc-docs-main h2,
.kc-docs-main h3,
.kc-docs-main h4,
.kc-docs-main h5,
.kc-docs-main h6 {
    font-family: var(--kc-display);
    letter-spacing: -0.02em;
    color: var(--kc-koa);
}
.kc-docs-main .prose a { color: var(--kc-lagoon); }
.kc-docs-main .prose a:hover { color: var(--kc-lagoon-deep); }
.kc-docs-main .prose code { color: var(--kc-lagoon-deep); }
.kc-docs-main .prose blockquote { border-left-color: var(--kc-board); }
.kc-docs-main .prose thead { border-bottom-color: var(--kc-line); }
.kc-docs-main .prose tbody tr { border-bottom-color: var(--kc-line); }

/* --------------------------------------------------------------------------
   Code blocks (codesh plugin)
   --------------------------------------------------------------------------
   codesh ships a cool Tailwind-gray chrome (#f3f4f6 surround, gray-300 chips)
   that reads cold against the warm grounds. Its stylesheet loads after this
   one, so every rule here is scoped under `.kc-body` to win on specificity
   rather than order. Syntax token colours are left to the phiki theme.
   -------------------------------------------------------------------------- */

.kc-body .codesh-block {
    background-color: var(--kc-sand-soft);
    border: 1px solid var(--kc-line);
    box-shadow: 0 4px 10px -2px rgba(43, 28, 12, 0.06);
}

/* phiki writes the code body's background as an inline style, so the pure white
   from its light theme needs `!important` to warm up. Token colours are left to
   the phiki theme. */
.kc-body .codesh-block pre.phiki { background-color: var(--kc-card) !important; }

.kc-body .codesh-block .codesh-header {
    background-color: transparent;
    border-bottom: 1px solid var(--kc-line);
}

.kc-body .codesh-block .codesh-lang {
    color: var(--kc-koa-soft);
    background-color: var(--kc-sand-deep);
}

.kc-body .codesh-block .codesh-title { color: var(--kc-koa); }

.kc-body .codesh-block .codesh-copy,
.kc-body .codesh-group .codesh-copy {
    color: var(--kc-koa-soft);
    background-color: var(--kc-card);
    border-color: var(--kc-line);
}

.kc-body .codesh-block .codesh-copy:hover,
.kc-body .codesh-group .codesh-copy:hover {
    color: var(--kc-lagoon);
    background-color: var(--kc-card);
    border-color: var(--kc-lagoon);
}

/* Sidebar navigation links */
.kc-docs-shell .nav-link { font-family: var(--kc-body); }
.kc-docs-shell .nav-link.active { color: var(--kc-lagoon); }

/* Line the nested group's vertical rule up with the centre of its parent's
   icon: the row's 12px of left padding plus half the 20px icon. Helios's own
   `ml-4` left it 6px short. */
.kc-docs-shell .nav-children,
.kc-docs-mobile-panel .nav-children { margin-left: 22px; }

/* Helios's search trigger and kbd chips */
.kc-body .search-trigger { border-color: var(--kc-line); background: var(--kc-card); color: var(--kc-koa-soft); }
.kc-body .search-trigger:hover { border-color: var(--kc-lagoon); }
.kc-body kbd { border-color: var(--kc-line); background: var(--kc-sand); color: var(--kc-koa-soft); }

/* --------------------------------------------------------------------------
   Light-only guarantees
   --------------------------------------------------------------------------
   Helios ships a dark variant driven by a `dark` class on <html>. This site
   never uses it: the templates hardcode light and js/kahuna.js strips the class
   if a stale localStorage value from another Helios site puts it back. These
   rules are the belt-and-braces so nothing dark can flash through.
   -------------------------------------------------------------------------- */

html.dark .kc-body { background: var(--kc-salt); color: var(--kc-koa); }
html.dark .kc-docs-shell { background: var(--kc-card); color: var(--kc-koa); }
html.dark .kc-docs-aside { background: var(--kc-salt); }