/* ==========================================================================
   "Open the case" toolkit section.

   New section, its own class namespace (.tk-toolkit-*). Nothing here can
   reach an existing section.

   Tokens are the site's existing ones:
     --primary-color #0073FC / --primary-color-dark #005BC7
     dark ground #090B0C, dark surface #101315-#141719, hairline rgba(255,255,255,.07)
     light ground #F3F6F8, light surface #FFFFFF, light ink #0A0D0F / #4A535D
   ========================================================================== */

.tk-toolkit-section {
    --tk-ez: cubic-bezier(0.19, 1, 0.22, 1);
    --tk-pop: cubic-bezier(0.34, 1.5, 0.64, 1);

    position: relative;
    padding: 92px 0 96px;
    background-color: #090B0C;
    background-image: radial-gradient(110% 70% at 50% 0%, rgba(0, 115, 252, 0.05), rgba(0, 115, 252, 0) 62%);
}

.tk-toolkit-section > .container {
    max-width: 1180px;
}

/* ==========================================================================
   HEAD — title block left, lead paragraph right
   ========================================================================== */
.tk-toolkit-head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    gap: 28px 64px;
    margin-bottom: 44px;
}

/* ---- Badge --------------------------------------------------------------- */
.tk-toolkit-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 7px 18px 7px 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 3px 8px rgba(0, 0, 0, 0.45);
    color: var(--primary-color, #0073FC);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.tk-toolkit-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: linear-gradient(var(--primary-color, #0073FC), var(--primary-color-dark, #005BC7));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 5px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
}

.tk-toolkit-badge-icon svg {
    width: 13px;
    height: 13px;
}

/* ---- Heading + rule ------------------------------------------------------ */
.tk-toolkit-section .tk-toolkit-head-main h2 {
    margin: 0;
    color: #F3F5F7;
    font-size: clamp(28px, 3.3vw, 43px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

/* follows the title block, never the full page width */
.tk-toolkit-rule {
    display: block;
    width: 100%;
    max-width: 520px;
    height: 1px;
    margin-top: 22px;
    background: linear-gradient(90deg, var(--primary-color, #0073FC), rgba(0, 115, 252, 0.12));
}

/* ---- Lead ---------------------------------------------------------------- */
.tk-toolkit-section .tk-toolkit-lead {
    max-width: 520px;
    margin: 6px 0 0;
    color: #A8B0B8;
    font-size: 15.5px;
    line-height: 1.75;
}

/* ==========================================================================
   THE CASE
   ========================================================================== */
/* positioning context for the floating tooltip, which overlaps the case top */
.tk-toolkit-stage {
    position: relative;
}

.tk-toolkit-case {
    /* top padding sets the clearance under the floating card */
    padding: 38px clamp(20px, 3vw, 42px) 26px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 22px;
    /* recessed, not glowing */
    background: linear-gradient(#131619, #0D1012);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        0 18px 40px rgba(0, 0, 0, 0.45);
}

.tk-toolkit-rail {
    display: grid;
    /* the case, then a real 9-column track: edge tools never hug the border */
    grid-template-columns: auto repeat(9, minmax(0, 1fr));
    align-items: end;
    gap: 0 clamp(6px, 1vw, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   THE CASE — decorative toolbox at the head of the rail.
   Built from the supplied .box-lid / .box-grip / .box-body reference styles.
   ========================================================================== */
/* Larger than a tool button so the case reads as the container, not another
   icon. 104x78 + 12px bottom margin totals 90px against the slots' ~88px, so
   the rail itself barely changes height. */
.tk-toolkit-box {
    position: relative;
    width: 104px;
    height: 78px;
    margin-right: clamp(10px, 1.4vw, 22px);
    margin-bottom: 12px;
}

/* The body starts 22px down rather than filling the whole frame — that gap is
   what the lid sits in. Previously the body was inset:0 and the lid was
   translated 9px into it, which is why the lid looked buried. */
.tk-toolkit-box-body {
    position: absolute;
    /* 25px, not 22: the lid's 2deg closed tilt raises its far corner by ~3px,
       which was swallowing the seam and leaving the two pieces touching. */
    top: 25px;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 8px;
    background: linear-gradient(176deg, #39414A, #171B20 68%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 -1px 0 rgba(0, 0, 0, 0.9) inset,
        0 4px 9px rgba(0, 0, 0, 0.7),
        0 14px 24px -10px rgba(0, 0, 0, 0.9);
}

/* the recessed slot */
.tk-toolkit-box-body::before {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    top: 8px;
    height: 17px;
    border-radius: 4px;
    background: #05070A;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 1);
}

.tk-toolkit-box-plate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    color: rgba(217, 182, 71, 0.5);
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: 0.2em;
    line-height: 1;
    text-align: center;
}

.tk-toolkit-box-lid {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 0;
    z-index: 2;
    height: 18px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #3A424A, #1D2228);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.17) inset,
        0 5px 12px -4px rgba(0, 0, 0, 0.9);
    transform-origin: left bottom;
    /* Closed: the lid rests just above the body with a ~3px seam, so it reads
       as a separate upper piece. The old translateY(9px) pushed it down into
       the body. The open transform below is unchanged. */
    transform: rotate(2deg) translateY(-1px);
    transition: transform 0.9s cubic-bezier(0.34, 1.34, 0.5, 1);
}

.tk-toolkit-box-grip {
    position: absolute;
    left: 50%;
    top: -11px;
    z-index: 3;
    width: 44px;
    height: 13px;
    margin-left: -22px;
    border: 2.5px solid #2F363D;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    transform-origin: left bottom;
    transform: rotate(2deg) translate(0, 10px);
    transition: transform 0.9s cubic-bezier(0.34, 1.34, 0.5, 1);
}

/* armed — the case opens */
.tk-toolkit-rail.is-armed .tk-toolkit-box-lid {
    transform: rotate(-19deg) translateY(-5px);
}

.tk-toolkit-rail.is-armed .tk-toolkit-box-grip {
    transform: rotate(-19deg) translate(-7px, -3px);
}

.tk-toolkit-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* ---- The tool button ----------------------------------------------------
   Built from the supplied .tl-b reference: 62px cap, 15px radius, the
   172deg dimensional gradient, the inset highlight/shadow pair and the two
   drop shadows. Kept dimensional — never a flat square. */
.tk-toolkit-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 62px;
    aspect-ratio: 1;
    /* The 2px border is always present and transparent while inactive, so the
       active state's coloured edge costs no layout change. */
    border: 2px solid transparent;
    border-radius: 15px;
    background: linear-gradient(172deg, #2B3239, #12161A 64%) padding-box;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15) inset,
        0 -1px 0 rgba(0, 0, 0, 0.85) inset,
        0 3px 6px rgba(0, 0, 0, 0.7),
        0 12px 22px -8px rgba(0, 0, 0, 0.9);
    color: var(--tk-tool-hue, #9FB0C4);
    text-decoration: none;
    transform: translateY(0) rotate(0deg);
    transition:
        transform 0.32s var(--tk-pop),
        box-shadow 0.32s var(--tk-ez),
        color 0.32s var(--tk-ez);
}

.tk-toolkit-icon {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

/* This theme never defines .visually-hidden (it only ships FontAwesome's
   .sr-only), so the accessible label inside each button would otherwise
   render as visible text and flood the case. The label stays in the DOM for
   screen readers and is hidden properly here. */
.tk-toolkit-btn .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- Numbers ------------------------------------------------------------- */
.tk-toolkit-num {
    color: #5C646C;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    /* `color` is deliberately not transitioned here: Chromium does not
       re-resolve a transitioned property when a live theme toggle changes
       which rule matches, which left the active number on the other theme's
       blue until the next reload. The active rule below animates it in. */
}

/* ==========================================================================
   ACTIVE STATE — lifted, tilted, blue-lit. The button stays dark; the blue
   arrives through border, glow, icon and number only.
   ========================================================================== */
/* ---- Active -------------------------------------------------------------
   The accent is the TOOL'S OWN colour (--tk-tool-hue), not the site blue —
   the site blue stays on the badge, the rule and the CTA.

   The coloured perimeter is a real gradient, not a flat border: the dark
   button gradient is clipped to the padding box and the hue gradient to the
   border box, so the 2px edge is lit while the centre stays dark. The border
   is already present (transparent) on the inactive state, so activating
   changes no box size and the grid never reflows. */
.tk-toolkit-slot.is-active .tk-toolkit-btn {
    transform: translateY(-6px) rotate(-5deg) scale(1.06);
    border-color: transparent;
    background:
        linear-gradient(172deg, #2B3239, #12161A 64%) padding-box,
        linear-gradient(145deg, var(--tk-tool-hue, #0073FC), #2B3239 50%, var(--tk-tool-hue, #0073FC)) border-box;
    color: var(--tk-tool-hue, #0073FC);
    /* fallback for engines without color-mix */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 0 0 1px var(--tk-tool-hue, #0073FC),
        0 6px 20px rgba(0, 0, 0, 0.7);
    /* layered spread: tight rim, mid halo, wide soft falloff, then black
       depth — weighted downward so the glow reads strongest under the button */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 0 10px color-mix(in srgb, var(--tk-tool-hue, #0073FC) 55%, transparent),
        0 4px 22px color-mix(in srgb, var(--tk-tool-hue, #0073FC) 40%, transparent),
        0 8px 34px color-mix(in srgb, var(--tk-tool-hue, #0073FC) 22%, transparent),
        0 10px 25px rgba(0, 0, 0, 0.65);
}

/* the active number picks up the tool's colour too; on light surfaces it is
   mixed toward the ink so pale hues stay readable */
.tk-toolkit-slot.is-active .tk-toolkit-num {
    color: var(--tk-tool-hue, #0073FC);
}

/* Note: the number's colour is deliberately not transitioned anywhere.
   Putting it on the base rule left it stale after a theme toggle; putting it
   on the active rule moved the same staleness there. It snaps — the lift and
   the glow already carry the state change. */

.tk-toolkit-btn:focus-visible {
    outline: 2px solid var(--primary-color, #0073FC);
    outline-offset: 4px;
}

/* ==========================================================================
   FLOATING TOOLTIP — moves to whichever tool is active
   ========================================================================== */
.tk-toolkit-tooltip {
    position: absolute;
    /* Anchored by its BOTTOM edge, not its top. With `top: -18px` the card's
       height pushed its bottom down over the icon — a taller card sat on top
       of the button. Anchoring the bottom 12px below the case's top edge
       keeps the reference's slight overlap of the case while leaving the
       icons a fixed, predictable gap: the pointer tips out at 17px and the
       buttons start at the case's 38px top padding, so ~21px stays clear. */
    bottom: calc(100% - 8px);
    top: auto;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: max-content;
    max-width: 230px;
    padding: 13px 18px 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: linear-gradient(rgb(34, 39, 45), rgb(24, 28, 32));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 34px rgba(0, 0, 0, 0.6);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    /* transform glides the card between tools; opacity fades it in */
    transition:
        transform 0.42s var(--tk-ez),
        opacity 0.28s var(--tk-ez);
}

.tk-toolkit-tooltip.is-visible {
    opacity: 1;
}

/* the little connector pointing down at the active tool */
.tk-toolkit-tooltip::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: var(--tk-tip-arrow, 50%);
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 3px 0;
    background: rgb(25, 29, 33);
    transform: rotate(45deg);
    transition: left 0.42s var(--tk-ez);
}

/* The card sits outside the slots, so it cannot inherit --tk-tool-hue; the
   activate() step copies the active slot's value onto this element. The blue
   fallback only shows if that ever fails. */
.tk-toolkit-tooltip-title {
    color: var(--tk-tool-hue, var(--primary-color, #0073FC));
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.tk-toolkit-tooltip-text {
    color: #AEB6BE;
    font-size: 12.5px;
    line-height: 1.45;
}

/* ==========================================================================
   FOOT — supporting sentence + CTA
   ========================================================================== */
.tk-toolkit-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px 28px;
    margin-top: 44px;
}

.tk-toolkit-section .tk-toolkit-foot-copy {
    margin: 0;
    color: #A8B0B8;
    font-size: 15px;
    line-height: 1.6;
}

.tk-toolkit-section .tk-toolkit-foot-copy strong {
    color: #F3F5F7;
    font-weight: 700;
}

.tk-toolkit-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 34px;
    border-radius: 11px;
    background: linear-gradient(var(--primary-color, #0073FC), var(--primary-color-dark, #005BC7));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 18px rgba(0, 115, 252, 0.28);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.24s var(--tk-ez), box-shadow 0.24s var(--tk-ez), background 0.24s var(--tk-ez);
}

/* the label stays readable in every state */
.tk-toolkit-cta,
.tk-toolkit-cta:hover,
.tk-toolkit-cta:focus,
.tk-toolkit-cta:active,
.tk-toolkit-cta:visited {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.tk-toolkit-cta:hover {
    background: linear-gradient(var(--primary-color-light, #66ACFF), var(--primary-color, #0073FC));
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 24px rgba(0, 115, 252, 0.34);
}

/* ==========================================================================
   LIGHT THEME — designed, not inverted
   ========================================================================== */
html[data-tk-theme="light"] .tk-toolkit-section {
    background-color: #F3F6F8;
    background-image: none;
}

html[data-tk-theme="light"] .tk-toolkit-badge {
    border-color: rgba(15, 23, 42, 0.09);
    background: linear-gradient(#FFFFFF, #F4F7FA);
    box-shadow: inset 0 1px 0 #FFFFFF, 0 3px 8px rgba(15, 23, 42, 0.08);
    color: var(--primary-color-dark, #005BC7);
}

html[data-tk-theme="light"] .tk-toolkit-section .tk-toolkit-head-main h2 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-toolkit-section .tk-toolkit-lead,
html[data-tk-theme="light"] .tk-toolkit-section .tk-toolkit-foot-copy {
    color: #4A535D;
}

html[data-tk-theme="light"] .tk-toolkit-section .tk-toolkit-foot-copy strong {
    color: #0A0D0F;
}

/* Light case: an elevated panel rather than a recess */
html[data-tk-theme="light"] .tk-toolkit-case {
    border-color: rgba(15, 23, 42, 0.09);
    background: linear-gradient(#FFFFFF, #EEF2F6);
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        inset 0 -1px 0 rgba(15, 23, 42, 0.05),
        0 14px 34px rgba(15, 23, 42, 0.08);
}

/* Buttons keep their physical, dimensional read — the gradient and the
   highlight/shade pair are simply restated for a light surface. */
html[data-tk-theme="light"] .tk-toolkit-btn {
    background: linear-gradient(172deg, #FFFFFF, #DFE6ED 64%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 -1px 0 rgba(15, 23, 42, 0.16) inset,
        0 3px 6px rgba(15, 23, 42, 0.12),
        0 12px 22px -8px rgba(15, 23, 42, 0.2);
}

/* Same per-tool accent on light: a lit edge around a light — not white —
   centre, with the halo kept a little tighter because a light ground shows
   spread more readily. */
html[data-tk-theme="light"] .tk-toolkit-slot.is-active .tk-toolkit-btn {
    background:
        linear-gradient(172deg, #FFFFFF, #DFE6ED 64%) padding-box,
        linear-gradient(145deg, var(--tk-tool-hue, #0073FC), #C9D4DF 50%, var(--tk-tool-hue, #0073FC)) border-box;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 0 0 1px var(--tk-tool-hue, #0073FC),
        0 10px 22px rgba(15, 23, 42, 0.18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 0 9px color-mix(in srgb, var(--tk-tool-hue, #0073FC) 50%, transparent),
        0 4px 20px color-mix(in srgb, var(--tk-tool-hue, #0073FC) 34%, transparent),
        0 8px 30px color-mix(in srgb, var(--tk-tool-hue, #0073FC) 18%, transparent),
        0 10px 22px rgba(15, 23, 42, 0.16);
}

/* The per-tool hues are tuned for a dark button; several of them (the pale
   blues and the slate) drop to ~2:1 on a white surface. Darkening the glyph
   keeps each tool's identity while staying legible. The active icon is
   exempt so it renders as the true brand blue. */
html[data-tk-theme="light"] .tk-toolkit-icon {
    filter: brightness(0.72) saturate(1.2);
}

html[data-tk-theme="light"] .tk-toolkit-slot.is-active .tk-toolkit-icon {
    filter: none;
}

html[data-tk-theme="light"] .tk-toolkit-num {
    color: #6B7480;
}

html[data-tk-theme="light"] .tk-toolkit-tooltip {
    border-color: rgba(15, 23, 42, 0.09);
    background: linear-gradient(#FFFFFF, #F5F8FB);
    box-shadow: inset 0 1px 0 #FFFFFF, 0 16px 34px rgba(15, 23, 42, 0.14);
}

html[data-tk-theme="light"] .tk-toolkit-tooltip::after {
    border-right-color: rgba(15, 23, 42, 0.09);
    border-bottom-color: rgba(15, 23, 42, 0.09);
    background: #F5F8FB;
}

html[data-tk-theme="light"] .tk-toolkit-tooltip-text {
    color: #4A535D;
}

/* #0073FC on a white card is only 2.76:1. The darker brand blue is the same
   accent one step down and reaches 4.3:1, so the tooltip heading and the
   active number stay clearly readable on light surfaces. */
/* Same tool colour on light, mixed toward the ink so the pale hues stay
   readable on the white card — the identical treatment the number gets. */
html[data-tk-theme="light"] .tk-toolkit-tooltip-title {
    color: var(--primary-color-dark, #005BC7);
    color: color-mix(in srgb, var(--tk-tool-hue, #0073FC) 62%, #0A0D0F);
}

/* The active number keeps its tool's identity on light too, mixed toward the
   ink so the pale hues do not wash out on a white surface. */
html[data-tk-theme="light"] .tk-toolkit-slot.is-active .tk-toolkit-num {
    color: var(--primary-color-dark, #005BC7);
    color: color-mix(in srgb, var(--tk-tool-hue, #0073FC) 62%, #0A0D0F);
}

/* ---- The case, on light -------------------------------------------------
   Still a physical object: the same construction, re-lit for a light ground
   rather than turned white. */
html[data-tk-theme="light"] .tk-toolkit-box-body {
    background: linear-gradient(176deg, #F2F5F8, #C3CCD6 68%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 0 rgba(15, 23, 42, 0.22) inset,
        0 4px 9px rgba(15, 23, 42, 0.16),
        0 14px 24px -10px rgba(15, 23, 42, 0.26);
}

html[data-tk-theme="light"] .tk-toolkit-box-body::before {
    background: #5F6A76;
    box-shadow: inset 0 3px 7px rgba(15, 23, 42, 0.75);
}

html[data-tk-theme="light"] .tk-toolkit-box-lid {
    background: linear-gradient(180deg, #FFFFFF, #CBD4DE);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 5px 12px -4px rgba(15, 23, 42, 0.32);
}

html[data-tk-theme="light"] .tk-toolkit-box-grip {
    border-color: #9AA6B2;
}

html[data-tk-theme="light"] .tk-toolkit-box-plate {
    color: rgba(150, 118, 20, 0.75);
}

/* ==========================================================================
   SECTION ENTRY REVEAL

   Runs once, when the section is ~25% into the viewport (the JS adds
   .is-revealed). Everything below animates a WRAPPER — the badge, the head
   groups, the rule, the stage, the slots, the foot — never .tk-toolkit-btn,
   which owns the active/hover transform. If the reveal shared that element
   the two would overwrite each other.
   ========================================================================== */
.tk-toolkit-section [data-tk-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.5s var(--tk-ez),
        transform 0.5s var(--tk-ez);
    transition-delay: var(--tk-delay, 0ms);
}

.tk-toolkit-section.is-revealed [data-tk-reveal] {
    opacity: 1;
    transform: none;
}

/* group order: badge, then heading + lead, then the stage, then the foot */
.tk-toolkit-section .tk-toolkit-badge      { --tk-delay: 0ms; }
.tk-toolkit-section .tk-toolkit-head-main h2 { --tk-delay: 110ms; }
.tk-toolkit-section .tk-toolkit-lead       { --tk-delay: 190ms; }
.tk-toolkit-section .tk-toolkit-stage      { --tk-delay: 300ms; transform: translateY(18px); }
.tk-toolkit-section .tk-toolkit-foot-copy  { --tk-delay: 900ms; }
.tk-toolkit-section .tk-toolkit-cta        { --tk-delay: 990ms; }

/* the rule draws rather than fades */
.tk-toolkit-rule {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s var(--tk-ez);
    transition-delay: 240ms;
}

.tk-toolkit-section.is-revealed .tk-toolkit-rule {
    transform: scaleX(1);
}

/* the case and the nine tools, quick stagger after the rail lands */
.tk-toolkit-rail > .tk-toolkit-box,
.tk-toolkit-rail > .tk-toolkit-slot {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition:
        opacity 0.4s var(--tk-ez),
        transform 0.4s var(--tk-ez);
    transition-delay: var(--tk-delay, 0ms);
}

.tk-toolkit-section.is-revealed .tk-toolkit-rail > .tk-toolkit-box,
.tk-toolkit-section.is-revealed .tk-toolkit-rail > .tk-toolkit-slot {
    opacity: 1;
    transform: none;
}

.tk-toolkit-rail > *:nth-child(1)  { --tk-delay: 430ms; }
.tk-toolkit-rail > *:nth-child(2)  { --tk-delay: 480ms; }
.tk-toolkit-rail > *:nth-child(3)  { --tk-delay: 530ms; }
.tk-toolkit-rail > *:nth-child(4)  { --tk-delay: 580ms; }
.tk-toolkit-rail > *:nth-child(5)  { --tk-delay: 630ms; }
.tk-toolkit-rail > *:nth-child(6)  { --tk-delay: 680ms; }
.tk-toolkit-rail > *:nth-child(7)  { --tk-delay: 730ms; }
.tk-toolkit-rail > *:nth-child(8)  { --tk-delay: 780ms; }
.tk-toolkit-rail > *:nth-child(9)  { --tk-delay: 830ms; }
.tk-toolkit-rail > *:nth-child(10) { --tk-delay: 880ms; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
    .tk-toolkit-section {
        padding: 64px 0 68px;
    }

    .tk-toolkit-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        margin-bottom: 34px;
    }

    .tk-toolkit-section .tk-toolkit-lead {
        max-width: 100%;
    }

    .tk-toolkit-rule {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .tk-toolkit-section {
        padding: 48px 0 54px;
    }

    .tk-toolkit-case {
        padding: 22px 16px 18px;
    }

    /* The rail used to be one long row (auto + 9x58px = ~616px) inside a
       ~317px case with overflow-x:auto, so tools 04-09 sat off-screen behind
       a scroll almost nobody finds. Same ten children, same order, same
       behaviour — laid out as a grid instead so every tool is on screen at
       once. Ten items over three columns fills four rows: TBA 01 02 /
       03 04 05 / 06 07 08 / 09. Rows are generated by the items themselves,
       so the count follows the markup rather than being hardcoded. */
    .tk-toolkit-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-items: center;
        /* tops aligned so the TBA box and the buttons beside it sit on one
           line and each number stays directly under its own button */
        align-items: start;
        gap: 18px 12px;
        /* visible, not auto: the lid animates above the box and must not be
           clipped by the track that used to scroll */
        overflow: visible;
        padding-bottom: 0;
    }

    .tk-toolkit-btn {
        max-width: 58px;
    }

    /* the case scales with the smaller buttons. margin-right was rail
       spacing for the old single row; the grid gap owns that now, and
       max-width keeps the box inside its column on narrow phones. */
    .tk-toolkit-box {
        width: 86px;
        max-width: 100%;
        height: 64px;
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* the body keeps a usable height on the shorter mobile case */
    .tk-toolkit-box-body {
        top: 21px;
    }

    /* Static card above the case: no absolute positioning means it can be
       neither clipped by the scrolling rail nor pushed off the viewport. */
    .tk-toolkit-tooltip {
        position: static;
        width: auto;
        max-width: 100%;
        margin-bottom: 14px;
        transform: none !important;
    }

    .tk-toolkit-tooltip::after {
        display: none;
    }

    .tk-toolkit-foot {
        justify-content: flex-start;
        text-align: left;
    }

    .tk-toolkit-cta {
        width: 100%;
    }
}

/* ==========================================================================
   REDUCED MOTION — the lift/tilt and the glide go; the active state, the
   tooltip and the automatic sequence all keep working.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    /* the entry reveal is skipped entirely — everything is simply present */
    .tk-toolkit-section [data-tk-reveal],
    .tk-toolkit-rail > .tk-toolkit-box,
    .tk-toolkit-rail > .tk-toolkit-slot {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tk-toolkit-rule {
        transform: scaleX(1);
        transition: none;
    }

    .tk-toolkit-box-lid,
    .tk-toolkit-box-grip {
        transition: none;
    }

    .tk-toolkit-btn,
    .tk-toolkit-slot.is-active .tk-toolkit-btn {
        transform: none;
        transition: box-shadow 0.2s ease, color 0.2s ease;
    }

    .tk-toolkit-tooltip {
        transition: opacity 0.2s ease;
    }

    .tk-toolkit-tooltip::after {
        transition: none;
    }

    .tk-toolkit-cta:hover {
        transform: none;
    }
}