/* ==========================================================================
   Kids apps page — Figma 6483:13836 / 5683:14454 (desktop 1512) and
   6483:16478 (mobile 393).

   The page is two white "app cards" that expand one at a time. A collapsed card
   is 240px tall (72 + 96 header row + 72); an expanded one drops its bottom
   padding and stacks five 120px-padded sections underneath.

   Card width is 1492px in the 1512 frame — 10px page gutters — and every inner
   section is inset a further 134px, which lands content on the same 1224px
   column (x=144) the rest of the site uses.
   ========================================================================== */

body.page-template-page-kids-apps {
    background-color: #F8F6F7;
}

.kc-page {
    position: relative;
    z-index: 0;
    padding-top: 96px; /* clears the fixed header pill (24 + 72) */
    background: #F8F6F7;
    /* No overflow:hidden here on purpose — see .kc-leaf-layer for why (both
       "clip here" and "clip each section instead" turned out to trade one
       real bug for another). The leaf art's own clipping lives entirely in
       that shared layer now, not on this page wrapper or on any section. */
}

.kc-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1264px;
    margin: 0 auto;
    padding: 0 20px;
}

/* :where() keeps the reset at zero specificity so the component rules below can
   set their own margins with a single class. */
.kc-page :where(h1, h2, h3, h4, p, ul, ol) {
    margin: 0;
}

.kc-page :where(h1, h2, h3, h4) {
    color: var(--black);
}

.kc-page :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.kc-accent {
    color: var(--primary-blue);
}

/* Decorative leaves — pale green line art parked behind the content at 25%.
   Positioned off the centre line so they track the 1512 design column.

   They all live in one shared .kc-leaf-layer instead of inside the section
   they visually belong to, so the art can bleed across section boundaries
   the way Figma draws it (one continuous background, not per-section clip
   art) without either bug that per-section clipping traded off against:
   - overflow:hidden directly on .kc-hero/.kc-why/.kc-faq stopped the bleed
     at each section's own (content-height-driven) box, hard-cropping most
     leaves mid-shape.
   - overflow:hidden on their shared ancestor .kc-page (or leaving it fully
     unclipped) either turns .kc-page into an accidental internal scroll
     container that hijacks the app accordion's scrollIntoView() — the
     "can't scroll to top" bug — or lets the leaves' large fixed-pixel
     offsets overflow the page horizontally, which is what crushed the
     mobile header once before (a page wider than its viewport gets
     zoomed out to fit).
   .kc-leaf-layer sidesteps both: it's a *sibling* of .kc-hero/.kc-apps/
   .kc-why/.kc-faq (not their ancestor), so it can never be the target
   scrollIntoView() walks into, and its own overflow:hidden — needed to
   stop the leaves' horizontal reach from widening the page — doesn't
   respond to mouse-wheel/touch input at all (only auto/scroll containers
   do), so it can't hijack ordinary scrolling either. See js/kids-apps.js'
   layoutLeafLayer() for how it's sized and kept in sync with content
   height (translation length, the accordion opening, FAQ items expanding).

   Several of the leaf frames are mirrored in Figma. get_metadata reports the
   *untransformed* box for those, so a mirrored leaf's reported x (or y) is the
   edge the flip pivots on, not its visual left (or top) edge — copying the raw
   numbers drops the leaf a full leaf-width to the wrong side. `.kc-leaf--flip-x`
   / `--flip-y` below reproduce the mirror with the origin at that same pivot, so
   the top/left values can stay exactly as Figma reports them. */
.kc-leaf-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.kc-leaf {
    position: absolute;
    /* top is set inline by layoutLeafLayer() — it adds the leaf's own
       --leaf-top (below, responsive via the same media queries as every
       other leaf value) to its origin section's current offsetTop, since
       that section no longer contains the leaf in the DOM. */
    z-index: 0;
    opacity: 0.25;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

/* Origin 0 0 puts the flipped box at [x - width, x] / [y - height, y] — which is
   how Figma's reported x/y relate to a mirrored frame's visual bounds. */
.kc-leaf--flip-x {
    transform: scaleX(-1);
    transform-origin: 0 0;
}

.kc-leaf--flip-y {
    transform: scaleY(-1);
    transform-origin: 0 0;
}

.kc-leaf--flip-xy {
    transform: scale(-1, -1);
    transform-origin: 0 0;
}

.kc-leaf-layer .kc-leaf--03 {
    --leaf-top: 202px;
    left: calc(30%); /* mirrored: the blade sits left of this, x -235..401 */
    transform: rotate(80deg);
    width: 636px;
    height: 606px;
}

.kc-leaf-layer .kc-leaf--01 {
    --leaf-top: 615px;
    left: calc(50% + 347px);
    width: 891px;
    height: 651px;
}

.kc-leaf-layer .kc-leaf--04 {
    /* Figma has this at absolute y=4622.93 in a section that starts at
       y=4929 — i.e. -306px from the section top, not -130px; the old value
       sat the leaf 176px too low, dragging it down into the card grid.
       It is mirrored on both axes, which lifts it clear of this section
       entirely — the design shows leaf_07 on the right here and nothing else. */
    --leaf-top: -306px;
    left: calc(50% - 314.28px);
    width: 1119px;
    height: 1134px;
}

.kc-leaf-layer .kc-leaf--07 {
    /* Same fix: Figma absolute y=5031.86 in that same section (top=4929)
       is 103px from the section top, not 279px. */
    --leaf-top: 103px;
    left: calc(50% + 152px);
    width: 1536px;
    height: 1490px;
}

/* This one isn't mirrored — it's rotated, which get_metadata can't report at
   all (it only ever gives the axis-aligned bounding box of a node, rotated or
   not), so the box numbers above were reverse-engineering a flip that was
   never there. Tuned directly against the Figma render instead: rotate the
   artwork about its stem end (left-center of the unrotated file) so the blade
   fans up into the "Everything you need..." heading and the stem trails off
   toward the footer. */
.kc-leaf-layer .kc-leaf--05 {
    --leaf-top: 663px;
    left: 0;
    width: 700px;
    height: 529px;
    transform: rotate(-80deg);
    transform-origin: 40% 70%;
}

.kc-leaf-layer .kc-leaf--01b {
    display: none; /* mobile only */
}

/* ==========================================================================
   Hero — 1512x480, 120px padding, 16px gap
   ========================================================================== */

.kc-hero {
    position: relative;
    padding: 120px 0;
}

.kc-breadcrumb {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    color: #4D565D;
}

.kc-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.kc-breadcrumb a:hover {
    color: var(--primary-blue);
}

.kc-hero-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 16px;
}

.kc-hero-row h1 {
    flex: 0 0 600px;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 54px;
    line-height: 1.1;
}

.kc-hero-lead {
    flex: 0 0 600px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-sans);
    color: #3B3B3B;
}

.kc-hero-kicker {
    font-size: 20px;
    line-height: 1.45;
}

.kc-hero-claim {
    font-family: var(--font-serif);
    font-size: 30px;
    line-height: 1.2;
    color: var(--black);
    margin-bottom: 23px; /* Figma's empty 16px/1.45 paragraph between the blocks */
}

.kc-hero-body > p:last-child {
    font-size: 16px;
    line-height: 1.45;
}

/* ==========================================================================
   App cards
   ========================================================================== */

.kc-apps {
    padding: 0 10px 136px;
    display: flex;
    flex-direction: column;
    gap: 88px;
}

.kc-app {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1492px;
    margin: 0 auto;
    /* This card's own height changes as .kc-app-body opens/closes right where
       the page lands after a #hash link. Without this, Chrome's scroll
       anchoring "helpfully" re-corrects scrollTop to compensate for that
       resize while it's mid-transition, fighting any scroll the visitor
       tries to make during those ~450ms and making the page feel stuck. */
    overflow-anchor: none;
    padding: 72px 0;
    background: #FEFEFE;
    border-radius: 40px;
    box-shadow: 0 0 12.55px rgba(0, 0, 0, 0.1);
    scroll-margin-top: 120px;
}

.kc-app.is-open {
    padding-bottom: 0;
}

.kc-app-head {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 max(20px, calc((100% - 1224px) / 2));
    cursor: pointer;
}

.kc-app-icon {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 9.85px;
    overflow: hidden;
    background: #FFFFFF;
}

.kc-app-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kc-app-name {
    flex: 1 1 auto;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kc-app-name h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 54px;
    line-height: 1.1;
}

.kc-app-name p {
    font-family: var(--font-sans);
    font-size: 20px;
    line-height: 1.4;
    color: #4D565D;
}

.kc-name-short {
    display: none;
}

.kc-app-toggle {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1.5px solid var(--primary-blue);
    border-radius: 100px;
    background: #FEFEFE url('../assets/icons/kids-apps/toggle-arrow-down-right.svg') no-repeat center / auto 18px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.kc-app.is-open .kc-app-toggle {
    background-image: url('../assets/icons/kids-apps/toggle-arrow-up.svg');
}

.kc-app-toggle:hover {
    background-color: #EBECF9;
}

/* Collapsing with grid rows keeps the animation honest whatever the card holds. */
.kc-app-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s ease;
}

.kc-app.is-open .kc-app-body {
    grid-template-rows: 1fr;
}

.kc-app-body-inner {
    min-height: 0;
    overflow: hidden;
}

/* ---- Intro: artwork + description + store links (649 / 564 tall) ---- */

.kc-intro {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 120px max(20px, calc((100% - 1224px) / 2));
}

.kc-intro-art {
    position: relative;
    flex: 0 0 600px;
}

.kc-intro-art img {
    position: absolute;
    display: block;
}

.kc-app--kids-drawing .kc-intro-art {
    height: 409px;
}

.kc-app--kids-drawing .kc-intro-art img {
    width: 525px;
    height: 368px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* The puzzle cut-out deliberately overruns its frame; the 120px section padding
   above and below absorbs it. */
.kc-app--kids-puzzle .kc-intro-art {
    height: 324px;
}

.kc-app--kids-puzzle .kc-intro-art img {
    width: 565px;
    height: 454px;
    left: 17px;
    top: -48.5px;
}

.kc-intro-copy {
    flex: 0 0 600px;
}

.kc-intro-copy > p {
    font-family: var(--font-sans);
    font-size: 20px;
    line-height: 1.4;
    color: #4C4D59;
}

.kc-intro-copy > p + p {
    margin-top: 28px; /* Figma's blank 20px/1.4 line */
}

.kc-download {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    width: 296px;
    margin-top: 121px;
    margin-left: auto;
    padding: 24px;
    background: #E3F2E1;
    border-radius: 20px;
}

.kc-qr {
    flex: 0 0 104px;
    display: block;
    width: 104px;
    height: 104px;
}

/* ---- The app includes (844 tall) ---- */

.kc-includes {
    padding: 120px max(20px, calc((100% - 1224px) / 2));
}

.kc-includes h3,
.kc-benefits h3,
.kc-premium-copy h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 40px;
    line-height: 1.1;
}

.kc-includes h3 {
    text-align: center;
}

.kc-includes-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 520px;
    margin-top: 40px;
}

.kc-features {
    flex: 0 0 496px;
}

.kc-feature {
    border-bottom: 1px solid #D7D7E3;
}

.kc-feature-btn {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: #A4A5B1;
    transition: color 0.2s ease;
}

/* Same padding whether active or not, so a row's height comes only from its
   own content (the number vs. how many lines the text wraps to) and never
   changes just because a different row was opened or closed. */
.kc-feature.is-active .kc-feature-btn {
    color: var(--primary-blue);
}

.kc-feature-btn:hover {
    color: #6C7080;
}

.kc-feature.is-active .kc-feature-btn:hover {
    color: var(--primary-blue);
}

.kc-feature-num {
    flex: 0 0 auto;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 36px;
    line-height: 1.1;
    white-space: nowrap;
}

.kc-feature-text {
    flex: 1 0 0;
    min-width: 1px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.1;
}

.kc-screen {
    flex: 0 0 599px;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kc-screen img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ---- Video (1062 tall) ---- */

.kc-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 120px max(20px, calc((100% - 1224px) / 2));
}

.kc-video > p {
    width: 808px;
    max-width: 100%;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 20px;
    line-height: 1.4;
    color: #4C4D59;
}

.kc-video-frame {
    position: relative;
    width: 100%;
    max-width: 1080px;
    height: 614px;
    margin: 0 auto;
    background: var(--black);
    border-radius: 40px;
    overflow: hidden;
}

.kc-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: #FFFFFF;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.kc-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.kc-play img {
    display: block;
    width: 24px;
    height: 24px;
}

/* ---- What the app develops (468 / 562 tall) ---- */

.kc-benefits {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 120px max(20px, calc((100% - 1224px) / 2));
}

.kc-benefit-row {
    display: flex;
    gap: 24px;
    align-items: center;
}

.kc-benefit {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kc-benefit-icon {
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 100px;
    background: #E2F2E0;
    box-shadow: -3px 4px 5.8px rgba(14, 19, 63, 0.08);
}

.kc-benefit-icon img {
    display: block;
    width: 32px;
    height: 32px;
}

.kc-benefit-label {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: var(--black);
}

.kc-benefits-note {
    width: 499px;
    max-width: 100%;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: #4D565D;
}

/* ---- Premium content (603 tall) ---- */

.kc-premium {
    display: flex;
    gap: 128px;
    align-items: flex-start;
    padding: 120px max(20px, calc((100% - 1224px) / 2));
}

.kc-premium-copy {
    flex: 0 0 491px;
}

.kc-premium-body {
    margin-top: 32px;
}

.kc-premium-copy p {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: #4C4D59;
}

.kc-premium-body p + p {
    margin-top: 23px; /* Figma's blank 16px/1.45 line */
}

.kc-premium-cards {
    flex: 0 0 600px;
    display: flex;
    gap: 24px;
}

.kc-premium-card {
    box-sizing: border-box;
    flex: 0 0 288px;
    height: 363px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px;
    border: 1px solid #DDDEF2;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(152.017deg, #E2F2E0 6.4346%, #FEFEFE 89.252%);
}

.kc-premium-top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kc-premium-card h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1;
}

.kc-premium-card p {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: #4C4D59;
}

.kc-premium-price {
    display: block;
    width: 100%;
    text-align: right;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 54px;
    line-height: 1.1;
    color: #1B6C00;
}

/* ==========================================================================
   Why Parents Choose Our Apps — 1512x906, 92px padding
   ========================================================================== */

.kc-why {
    position: relative;
    padding: 92px 0;
}

.kc-why-head {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.kc-why-head h2 {
    flex: 0 0 600px;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 40px;
    line-height: 1.1;
}

.kc-why-intro {
    flex: 0 0 496px;
}

.kc-why-intro p {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: #4D565D;
}

.kc-why-intro p:first-child {
    margin-bottom: 23px; /* Figma's blank 16px/1.45 line between the sentences */
}

.kc-why-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 72px;
}

.kc-why-card {
    box-sizing: border-box;
    flex: 0 0 392px;
    /* min-height, not height: English fills exactly 255, translations grow */
    min-height: 255px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    border: 1px solid #DDDEF2;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, #E2F2E0 -33.137%, #FEFEFE 45.294%);
}

.kc-why-num {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 54px;
    line-height: 1.1;
    color: var(--primary-blue);
}

.kc-why-copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Figma sets these on one line, which the English titles all fit. Ukrainian and
   Russian run longer, so they wrap rather than being clipped by the card. */
.kc-why-copy h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1;
}

.kc-why-copy p {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: #4D565D;
    opacity: 0.9;
}

.kc-why-copy strong {
    font-weight: 600;
}

.kc-why-art {
    flex: 0 0 392px;
    height: 255px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kc-why-art img {
    display: block;
    width: 100%;
    height: 194px;
    object-fit: contain;
}

/* ==========================================================================
   FAQ — the shared accordion from index.css, 1512x968
   ========================================================================== */

.kc-faq {
    position: relative;
    margin-top: 16px;
}

.kc-faq .col-faq {
    counter-reset: kc-faq;
}

.kc-faq .faq-item {
    counter-increment: kc-faq;
}

.kc-faq .faq-question > span:first-child::before {
    content: counter(kc-faq) ". ";
}

.kc-faq .container-grid {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1264px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 24px;
}

/* ==========================================================================
   Tablet — Figma has no frame between 769 and 1511, but the fixed two-column
   rows (each half pinned to ~600px, sized for the 1224 desktop grid) only
   actually need relaxing below 1264px — .kc-container's own max-width, and
   the point where the "(100% - 1224px) / 2" padding formula bottoms out at
   its 20px floor. Above that the 1224 grid already fits without help, so
   this used to shrink things (like the intro illustrations) that had plenty
   of room, e.g. on a common 1280/1366/1440px laptop viewport.
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1263px) {
    .kc-hero-row h1,
    .kc-hero-lead,
    .kc-intro-copy,
    .kc-features,
    .kc-why-head h2,
    .kc-why-intro,
    .kc-premium-copy {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .kc-intro-art {
        flex: 0 1 380px;
        min-width: 0;
        overflow: hidden;
    }

    /* The fixed 525/565px-wide illustrations are sized for the 600px desktop
       column; once the column shrinks to fit this breakpoint they no longer
       fit inside it, and the container's overflow:hidden was cropping them.
       Scale each image to fit its shrunken container instead. */
    .kc-app--kids-drawing .kc-intro-art img,
    .kc-app--kids-puzzle .kc-intro-art img {
        position: static;
        width: 100%;
        height: 100%;
        left: auto;
        top: auto;
        transform: none;
        object-fit: contain;
    }

    .kc-screen {
        flex: 0 1 460px;
        min-width: 0;
    }

    .kc-premium-cards {
        flex: 1 1 0;
        min-width: 0;
        flex-wrap: wrap;
    }

    .kc-premium-card {
        flex: 1 1 200px;
        min-width: 0;
    }
}

/* ==========================================================================
   Mobile — Figma 6483:16478 (393 wide, 353 content column)
   ========================================================================== */

@media (max-width: 768px) {

    .kc-page {
        padding-top: 88px; /* mobile header pill is 16 + 72 */
    }

    .kc-breadcrumb {
        display: none; /* the mobile frame drops it */
    }

    .kc-hero {
        padding: 59px 0 125px;
    }

    .kc-hero-row {
        flex-direction: column;
        gap: 24px;
        margin-top: 0;
    }

    .kc-hero-row h1 {
        flex: none;
        width: 100%;
        font-size: 38px;
    }

    .kc-hero-lead {
        flex: none;
        width: 100%;
    }

    .kc-hero-kicker {
        font-size: 16px;
    }

    .kc-hero-claim {
        font-size: 24px;
    }

    .kc-hero-body > p:last-child {
        font-size: 14px;
    }

    .kc-leaf-layer .kc-leaf--03 {
        --leaf-top: -15px;
        left: calc(50% - 56.04px);
        width: 394px;
        height: 376px;
    }

    .kc-leaf-layer .kc-leaf--01 {
        --leaf-top: 483px;
        left: calc(50% - 108.5px);
        width: 609px;
        height: 445px;
    }

    /* ---- App cards ---- */

    .kc-apps {
        padding: 0 8px 178px;
        gap: 32px;
    }

    .kc-app {
        max-width: none;
        padding: 24px 12px;
        border-radius: 32px;
    }

    .kc-app.is-open {
        padding-bottom: 24px;
    }

    .kc-app-head {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 32px;
        column-gap: 8px;
        padding: 0;
    }

    .kc-app-icon {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
    }

    /* icon (56) + gap (8) fills the row exactly, forcing the toggle to wrap */
    .kc-app-name {
        flex: 1 0 calc(100% - 64px);
    }

    .kc-app-name h2 {
        font-size: 34px;
    }

    .kc-app-name p {
        font-size: 16px;
    }

    .kc-name-full {
        display: none;
    }

    .kc-name-short {
        display: inline;
    }

    .kc-app-toggle {
        margin-left: auto;
    }

    .kc-app-body-inner {
        display: flex;
        flex-direction: column;
        gap: 120px;
    }

    .kc-intro,
    .kc-includes,
    .kc-benefits,
    .kc-premium {
        padding: 0;
    }

    /* ---- Intro ---- */

    .kc-intro {
        flex-direction: column;
        gap: 24px;
        /* the head-to-body gap has to live inside the clipped grid row, or a
           collapsed card would still be 56px taller than the design's 195 */
        margin-top: 56px;
    }

    .kc-app--kids-drawing .kc-intro-art,
    .kc-app--kids-puzzle .kc-intro-art {
        flex: none;
        width: 100%;
        height: 276px;
    }

    .kc-app--kids-drawing .kc-intro-art img,
    .kc-app--kids-puzzle .kc-intro-art img {
        position: static;
        width: 100%;
        height: 100%;
        left: auto;
        top: auto;
        transform: none;
        object-fit: contain;
    }

    .kc-intro-copy {
        flex: none;
        width: 100%;
    }

    .kc-intro-copy > p {
        font-size: 16px;
    }

    .kc-intro-copy > p + p {
        margin-top: 22px;
    }

    .kc-download {
        justify-content: flex-start;
        width: auto;
        margin-top: 32px;
        margin-left: 0;
        padding: 0;
        background: none;
        border-radius: 0;
    }

    .kc-download .app-card-badges {
        flex-direction: row;
        gap: 16px;
    }

    .kc-qr {
        display: none; /* the mobile frame shows the store badges side by side only */
    }

    /* ---- The app includes: the phone drops in after row 01 ---- */

    .kc-includes h3,
    .kc-benefits h3,
    .kc-premium-copy h3 {
        font-size: 34px;
    }

    .kc-includes-row {
        flex-direction: column;
        align-items: stretch;
        height: auto;
    }

    .kc-features {
        display: contents;
    }

    .kc-feature {
        width: 100%;
    }

    .kc-feature:nth-child(1) { order: 10; }
    .kc-feature:nth-child(2) { order: 20; }
    .kc-feature:nth-child(3) { order: 30; }
    .kc-feature:nth-child(4) { order: 40; }
    .kc-feature:nth-child(5) { order: 50; }

    .kc-screen {
        flex: none;
        width: 100%;
        height: 237px;
        order: 15; /* JS retargets this to sit under whichever row is active */
    }

    /* ---- Video ---- */

    .kc-video {
        /* Unlike .kc-intro/.kc-includes/.kc-benefits/.kc-premium above, this
           section isn't nested in .kc-app — nothing else provides its side
           margin, so it needs its own horizontal padding here (matching the
           20px every other product page's mobile video section uses, e.g.
           sound-evo/vision-evo's .se-container/.ve-page > section) instead
           of the 0 it briefly shared with those app-card-only sections. */
        align-items: stretch;
        gap: 24px;
        padding: 64px 20px;
    }

    .kc-video > p {
        width: 100%;
        font-size: 16px;
    }

    .kc-video-frame {
        height: 228px;
    }

    /* ---- Benefits ---- */

    .kc-benefit-row {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .kc-benefit {
        flex: none;
        width: 100%;
    }

    .kc-benefits-note {
        width: 100%;
    }

    /* ---- Premium ---- */

    .kc-premium {
        flex-direction: column;
        gap: 32px;
    }

    .kc-premium-body {
        margin-top: 32px;
    }

    .kc-premium-copy,
    .kc-premium-cards {
        flex: none;
        width: 100%;
    }

    .kc-premium-cards {
        flex-direction: column;
        gap: 24px;
    }

    .kc-premium-card {
        flex: none;
        width: 100%;
        height: 319px;
    }

    /* ---- Why parents: heading stacks, cards become a swipe rail ---- */

    .kc-why {
        padding: 0 0 150px;
    }

    .kc-why-head {
        flex-direction: column;
        gap: 16px;
    }

    .kc-why-head h2 {
        flex: none;
        width: 100%;
        font-size: 34px;
        line-height: 1.15;
    }

    .kc-why-intro {
        flex: none;
        width: 100%;
    }

    .kc-why-intro p:first-child {
        margin-bottom: 24px;
    }

    .kc-why-grid {
        flex-wrap: nowrap;
        gap: 8px;
        margin: 40px -20px 0 0;
        padding-right: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .kc-why-card {
        flex: 0 0 342px;
        height: 240px;
        scroll-snap-align: start;
    }

    .kc-why-art {
        display: none; /* the mobile frame carries five cards and no artwork */
    }

    .kc-leaf-layer .kc-leaf--04 {
        --leaf-top: -572px;
        left: calc(50% + 72.37px);
        width: 571px;
        height: 520px;
    }

    .kc-leaf-layer .kc-leaf--07 {
        --leaf-top: 398px;
        left: calc(50% - 144.5px);
        width: 846px;
        height: 821px;
    }

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

    .kc-faq {
        margin-top: 0;
        padding: 0 0 75px;
    }

    .kc-faq .container-grid {
        flex-direction: column;
        gap: 40px;
    }

    .kc-faq .col-title {
        gap: 16px;
    }

    .kc-faq .col-title .faq-eyebrow {
        font-size: 16px;
    }

    .kc-faq .col-title h2.faq-heading {
        font-size: 36px;
    }

    /* The mobile frame swaps leaf_05 for a vertically mirrored leaf_01 here. */
    .kc-leaf-layer .kc-leaf--05 {
        display: none;
    }

    .kc-leaf-layer .kc-leaf--01b {
        display: block;
        --leaf-top: 369px;
        left: calc(50% + 131.51px);
        width: 609px;
        height: 445px;
    }
}