/* =========================================================================
Kids Gate v1.3 — design system
Language: "The Gate" — arch-topped shapes mark the child's world,
straight rounded cards mark the parent's world. Clay-soft shadows,
tactile press feedback, scroll-staggered reveals.
========================================================================= */
/* ---- Tokens ---- */
:root {
/* Brand */
--kg-amber: #F5A623;
--kg-amber-deep: #D98C00;
--kg-amber-soft: #FDEBC8;
--kg-red: #E63329;
--kg-red-deep: #C2221A;
--kg-red-soft: #FBDDDB;
--kg-teal: #2ABFBF;
--kg-teal-deep: #1E9E9E;
--kg-teal-soft: #D6F4F4;
--kg-green-soft: #D9F2E1;
--kg-green: #3BA55C;
--kg-green-deep: #2E8B4A;
--kg-navy: #1C2B3A;
--kg-navy-deep: #14202C;
--kg-navy-soft: #2A3D50;
--kg-ink: #1A1A1A;
--kg-white: #FFFFFF;
--kg-cream: #FFF8EE;
--kg-cream-deep: #FBEEDC;
/* Text */
--kg-text: #243242;
--kg-text-soft: #51606F;
--kg-text-on-dark: #F4F7FA;
--kg-text-on-dark-soft: #CDD9E6;
/* Type */
--kg-font-display: 'Baloo 2', 'Mitr', system-ui, sans-serif;
--kg-font-body: 'Nunito Sans', 'Anuphan', system-ui, sans-serif;
/* Shape: the arch is the signature — full curve on top, grounded base */
--kg-arch: 999px 999px 28px 28px;
--kg-r-sm: 12px;
--kg-r-md: 20px;
--kg-r-lg: 28px;
/* Clay shadows: soft drop + faint top highlight */
--kg-shadow-sm: 0 2px 6px rgba(28, 43, 58, .08), 0 6px 18px rgba(28, 43, 58, .06);
--kg-shadow-md: 0 4px 10px rgba(28, 43, 58, .08), 0 14px 34px rgba(28, 43, 58, .10);
--kg-shadow-lg: 0 8px 18px rgba(28, 43, 58, .10), 0 26px 60px rgba(28, 43, 58, .14);
--kg-clay-inset: inset 0 2px 0 rgba(255, 255, 255, .65);
--kg-clay-inset-dark: inset 0 2px 0 rgba(255, 255, 255, .08);
/* Layout */
--kg-container: 1180px;
--kg-gutter: clamp(20px, 4vw, 40px);
--kg-section-pad: clamp(64px, 9vw, 120px);
/* Motion */
--kg-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
--kg-ease-out: cubic-bezier(.22, .9, .36, 1);
--kg-dur: 240ms;
/* Z-scale */
--kg-z-header: 50;
--kg-z-menu: 40;
--kg-z-helper: 60;
}
/* Thai script: swap to Thai-native faces with looser line-height */
:lang(th) body,
body.kg-lang-th {
--kg-font-display: 'Mitr', 'Baloo 2', system-ui, sans-serif;
--kg-font-body: 'Anuphan', 'Nunito Sans', system-ui, sans-serif;
}
body.kg-lang-th { line-height: 1.75; }
body.kg-lang-zh {
--kg-font-display: 'Noto Sans SC', 'Baloo 2', system-ui, sans-serif;
--kg-font-body: 'Noto Sans SC', 'Nunito Sans', system-ui, sans-serif;
}
/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--kg-font-body);
font-size: 17px;
line-height: 1.65;
color: var(--kg-text);
background: var(--kg-white);
overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--kg-font-display); line-height: 1.15; margin: 0 0 .5em; color: var(--kg-navy); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--kg-teal-deep); }
button { font-family: inherit; }
:focus-visible {
outline: 3px solid var(--kg-teal);
outline-offset: 3px;
border-radius: 4px;
}
.kg-visually-hidden {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kg-skip-link {
position: absolute; left: 16px; top: -64px;
z-index: 100;
background: var(--kg-navy); color: #fff;
padding: 12px 22px; border-radius: 0 0 14px 14px;
font-weight: 700; text-decoration: none;
transition: top 180ms var(--kg-ease-out);
}
.kg-skip-link:focus { top: 0; }
/* ---- Type scale ---- */
.kg-h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); font-weight: 800; letter-spacing: -.01em; }
.kg-h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 700; letter-spacing: -.01em; }
.kg-h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 700; }
.kg-lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--kg-text-soft); max-width: 46em; }
.kg-hl-amber { color: var(--kg-amber-deep); }
.kg-hl-teal { color: var(--kg-teal-deep); }
.kg-hl-red { color: var(--kg-red); }
/* Straight red underline for a key word (desktop). On phones it collapses
to a red word — see the 640px breakpoint — to avoid an underline breaking
awkwardly across a wrapped line. */
.kg-underline-red {
text-decoration: underline;
text-decoration-color: var(--kg-red);
text-decoration-thickness: 3px;
text-underline-offset: 5px;
}
/* Wiggly underline accent for key phrases (SVG underline, no layout shift).
viewBox is tall enough (0 0 120 18) that the full stroke — including the
bottom of the troughs and the rounded end caps — fits without being clipped. */
.kg-squiggle {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M4 9c14-5 26-5 40 0s26 5 40 0 24-4 32 0' fill='none' stroke='%23F5A623' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom .22em / 100% .5em;
padding-bottom: .5em;
}
.kg-squiggle--teal {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M4 9c14-5 26-5 40 0s26 5 40 0 24-4 32 0' fill='none' stroke='%232ABFBF' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.kg-squiggle--green {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M4 9c14-5 26-5 40 0s26 5 40 0 24-4 32 0' fill='none' stroke='%233BA55C' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ---- Layout primitives ---- */
.kg-container { max-width: var(--kg-container); margin-inline: auto; padding-inline: var(--kg-gutter); }
.kg-container--narrow { max-width: 880px; }
.kg-section { padding-block: var(--kg-section-pad); position: relative; }
.kg-section--white { background: var(--kg-white); }
.kg-section--cream { background: var(--kg-cream); }
.kg-section--cream-deep { background: var(--kg-cream-deep); }
.kg-section--navy { background: var(--kg-navy); color: var(--kg-text-on-dark); }
.kg-section--navy h2, .kg-section--navy h3 { color: #fff; }
.kg-section--navy .kg-lede { color: var(--kg-text-on-dark-soft); }
.kg-section--teal-wash { background: linear-gradient(180deg, var(--kg-teal-soft), var(--kg-cream)); }
/* Section head */
.kg-section-head { margin-bottom: clamp(36px, 5vw, 56px); max-width: 720px; }
.kg-section-head--center { margin-inline: auto; text-align: center; }
.kg-section-head--center .kg-lede { margin-inline: auto; }
.kg-kicker {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--kg-font-display);
font-size: .85rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--kg-navy);
background: var(--kg-amber-soft);
border-radius: 999px;
padding: 7px 18px;
margin-bottom: 18px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
}
.kg-section--navy .kg-kicker { background: var(--kg-navy-soft); color: var(--kg-amber); box-shadow: var(--kg-clay-inset-dark); }
/* Arched section divider (used between tonal shifts) */
.kg-arch-divider { line-height: 0; }
.kg-arch-divider svg { width: 100%; height: clamp(28px, 5vw, 64px); display: block; }
/* ---- Buttons: chunky clay with press squish ---- */
.kg-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--kg-font-display);
font-size: 1.05rem; font-weight: 700;
text-decoration: none; cursor: pointer;
border: 0; border-radius: 999px;
padding: 16px 32px;
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur) var(--kg-ease-out), background-color 180ms;
will-change: transform;
white-space: nowrap;
}
.kg-btn:active { transform: scale(.96) translateY(2px); }
.kg-btn__arrow { transition: transform var(--kg-dur) var(--kg-ease-pop); }
.kg-btn:hover .kg-btn__arrow { transform: translateX(4px); }
.kg-btn--primary {
background: var(--kg-amber); color: var(--kg-navy);
box-shadow: var(--kg-clay-inset), 0 5px 0 var(--kg-amber-deep), 0 12px 24px rgba(245, 166, 35, .35);
}
.kg-btn--primary:hover { background: #FFB23B; transform: translateY(-2px); }
.kg-btn--primary:active { box-shadow: var(--kg-clay-inset), 0 2px 0 var(--kg-amber-deep), 0 6px 12px rgba(245, 166, 35, .3); }
.kg-btn--secondary {
background: var(--kg-white); color: var(--kg-navy);
border: 2px solid rgba(28, 43, 58, .18);
box-shadow: var(--kg-clay-inset), 0 5px 0 #DCE3EA, 0 12px 24px rgba(28, 43, 58, .12);
}
.kg-btn--secondary:hover { background: #FBFDFF; border-color: rgba(28, 43, 58, .35); transform: translateY(-2px); }
.kg-btn--teal {
background: var(--kg-teal); color: #fff;
box-shadow: var(--kg-clay-inset), 0 5px 0 var(--kg-teal-deep), 0 12px 24px rgba(42, 191, 191, .35);
}
.kg-btn--teal:hover { background: #3FCFCF; transform: translateY(-2px); }
.kg-btn--ghost-dark {
background: transparent; color: #fff;
box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .7);
}
.kg-btn--ghost-dark:hover { box-shadow: inset 0 0 0 2.5px #fff; transform: translateY(-2px); }
.kg-btn--sm { padding: 11px 22px; font-size: .95rem; }
.kg-btn--lg { padding: 19px 42px; font-size: 1.15rem; }
.kg-btn--block { width: 100%; }
/* ---- Cards ---- */
.kg-card {
background: var(--kg-white);
border-radius: var(--kg-r-lg);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md);
padding: clamp(24px, 3vw, 36px);
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur) var(--kg-ease-out);
}
a.kg-card { text-decoration: none; color: inherit; display: block; cursor: pointer; }
.kg-card--hover:hover, a.kg-card:hover { transform: translateY(-6px); box-shadow: var(--kg-clay-inset), var(--kg-shadow-lg); }
/* Arch card: the child's-world variant */
.kg-card--arch { border-radius: var(--kg-arch); padding-top: clamp(36px, 4vw, 52px); text-align: center; }
/* ---- Sponsors: "choose the impact" partnership options ----
Each arch card is a pickable partnership option — a sponsor seal, a big
option number and a selection bar that fills on hover — that links into the
sponsorship tiers. */
.kg-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.kg-impact .kg-impact__card {
--acc: var(--kg-red); --acc-deep: var(--kg-red-deep); --acc-soft: var(--kg-red-soft);
position: relative; overflow: hidden;
display: flex; flex-direction: column; align-items: center;
padding-bottom: clamp(24px, 3vw, 34px);
/* Soft accent wash under the arch, fading to white behind the copy */
background: linear-gradient(180deg, color-mix(in srgb, var(--acc-soft) 60%, #fff), #fff 48%);
}
.kg-impact--red { --acc: var(--kg-red); --acc-deep: var(--kg-red-deep); --acc-soft: var(--kg-red-soft); }
.kg-impact--amber { --acc: var(--kg-amber); --acc-deep: var(--kg-amber-deep); --acc-soft: var(--kg-amber-soft); }
.kg-impact--teal { --acc: var(--kg-teal); --acc-deep: var(--kg-teal-deep); --acc-soft: var(--kg-teal-soft); }
.kg-impact--navy { --acc: var(--kg-navy); --acc-deep: var(--kg-navy); --acc-soft: rgba(28, 43, 58, .12); }
.kg-impact .kg-impact__card:hover {
transform: translateY(-8px);
box-shadow: var(--kg-clay-inset), 0 24px 44px -16px color-mix(in srgb, var(--acc) 60%, transparent);
}
/* Sponsor seal: icon bubble ringed by a dashed circle, with a small star badge. */
.kg-impact__seal { position: relative; display: inline-grid; margin-bottom: 8px; }
.kg-impact__seal::before {
content: ""; position: absolute; inset: -9px;
border: 2px dashed var(--acc-soft); border-radius: 50%;
transition: transform .5s var(--kg-ease-out);
}
.kg-impact .kg-impact__card:hover .kg-impact__seal::before { transform: rotate(45deg); }
.kg-impact__star {
position: absolute; top: -5px; right: -7px;
color: var(--acc);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
}
.kg-impact__text { margin: 0; color: var(--kg-text-soft); }
/* Actionable arrow — the "choose this" cue. */
.kg-impact__go {
margin-top: 18px;
width: 42px; height: 42px; border-radius: 50%;
display: grid; place-items: center;
background: var(--acc-soft); color: var(--acc-deep);
transition: transform .28s var(--kg-ease-pop), background-color .2s, color .2s;
}
.kg-impact .kg-impact__card:hover .kg-impact__go {
background: var(--acc); color: #fff;
transform: translateY(2px) scale(1.08);
}
/* Selection bar filling along the (straight) bottom edge on hover. */
.kg-impact__card::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
background: var(--acc);
transform: scaleX(0); transform-origin: center;
transition: transform .35s var(--kg-ease-out);
}
.kg-impact .kg-impact__card:hover::after { transform: scaleX(1); }
@media (max-width: 760px) { .kg-impact { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.kg-impact .kg-impact__card:hover { transform: none; }
.kg-impact .kg-impact__card:hover .kg-impact__seal::before { transform: none; }
.kg-impact .kg-impact__card:hover .kg-impact__go { transform: none; }
}
.kg-card--navy { background: var(--kg-navy-soft); color: var(--kg-text-on-dark); box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-md); }
.kg-card--navy h3 { color: #fff; }
/* Icon bubble for cards */
.kg-bubble {
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px;
border-radius: 50%;
margin-bottom: 18px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
}
.kg-bubble--amber { background: var(--kg-amber-soft); color: var(--kg-amber-deep); }
.kg-bubble--teal { background: var(--kg-teal-soft); color: var(--kg-teal-deep); }
.kg-bubble--red { background: var(--kg-red-soft); color: var(--kg-red); }
.kg-bubble--navy { background: var(--kg-navy); color: var(--kg-amber); }
.kg-bubble--green { background: rgba(59, 165, 92, .15); color: var(--kg-green); }
.kg-bubble--green-dark { background: var(--kg-green-soft); color: var(--kg-green-deep); }
/* ---- Chips (trust reassurance) ---- */
.kg-chips { display: flex; flex-wrap: wrap; gap: 10px 14px; list-style: none; }
.kg-chip {
display: inline-flex; align-items: center; gap: 7px;
background: var(--kg-white);
border-radius: 999px;
padding: 8px 16px;
font-size: .9rem; font-weight: 700;
color: var(--kg-navy);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
}
.kg-chip svg { color: var(--kg-teal-deep); flex: none; }
.kg-chip--cross .kg-chip__cross { color: var(--kg-red); }
a.kg-chip { text-decoration: none; transition: transform var(--kg-dur) var(--kg-ease-pop), background-color 160ms; }
a.kg-chip:hover { transform: translateY(-2px); background: var(--kg-amber-soft); }
.kg-section--navy .kg-chip { background: var(--kg-navy-soft); color: var(--kg-text-on-dark); box-shadow: var(--kg-clay-inset-dark); }
/* ---- Header ---- */
.kg-header {
position: sticky; top: 0; z-index: var(--kg-z-header);
padding: 12px var(--kg-gutter) 0;
pointer-events: none;
}
.kg-header__inner {
pointer-events: auto;
max-width: var(--kg-container); margin-inline: auto;
display: flex; align-items: center; gap: 18px;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 999px;
padding: 8px 10px 8px 18px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md);
transition: box-shadow var(--kg-dur);
}
.kg-header.is-scrolled .kg-header__inner { box-shadow: var(--kg-clay-inset), var(--kg-shadow-lg); }
.kg-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.kg-logo img { width: 46px; height: auto; }
.kg-logo__word {
font-family: var(--kg-font-display);
font-size: 1.6rem; font-weight: 800; color: var(--kg-navy);
letter-spacing: -.01em;
}
.kg-logo__word em { font-style: normal; color: var(--kg-amber-deep); }
.kg-logo__the { font-weight: 600; }
/* Logo hover — "Home Page" swap (desktop only) */
.kg-logo__word { position: relative; }
.kg-logo__word-default { transition: opacity .3s var(--kg-ease-out); }
.kg-logo__word-home {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: flex-end;
opacity: 0;
color: var(--kg-navy);
font-style: normal;
white-space: nowrap;
pointer-events: none;
transition: opacity .55s var(--kg-ease-out);
}
.kg-header .kg-logo:hover .kg-logo__word-default { opacity: 0; }
.kg-header .kg-logo:hover .kg-logo__word-home { opacity: 1; }
/* On the home page you're already home — keep the logo as "Kids Gate" */
.home .kg-header .kg-logo:hover .kg-logo__word-default { opacity: 1; }
.home .kg-header .kg-logo:hover .kg-logo__word-home { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.kg-logo__word-default, .kg-logo__word-home { transition-duration: .01ms; }
}
/* Mobile-only Home link — hidden on desktop */
.kg-nav__mobile-home { display: none; }
.kg-nav { margin-left: auto; }
.kg-nav__list { display: flex; gap: 2px; list-style: none; }
.kg-nav__list a {
display: block; position: relative;
font-weight: 700; font-size: .98rem;
color: var(--kg-text);
text-decoration: none;
padding: 10px 14px;
border-radius: 999px;
transition: background-color 180ms, color 180ms;
white-space: nowrap;
}
.kg-nav__list a:hover { background: var(--kg-amber-soft); color: var(--kg-navy); }
.kg-nav__list a.kg-active::after {
content: '';
position: absolute; bottom: 3px; left: 50%;
transform: translateX(-50%);
width: 5px; height: 5px; border-radius: 50%;
background: var(--kg-amber);
pointer-events: none;
}
.kg-nav__mobile-extra, .kg-nav__mobile-foot { display: none; }
.kg-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.kg-nav + .kg-header__actions { margin-left: 0; }
.kg-header__cta { flex: none; white-space: nowrap; }
/* Nav CTA: no glow, no 3-D bottom shadow — clean pill that sits flush in the header */
.kg-header__cta.kg-btn--primary { box-shadow: var(--kg-clay-inset); padding-top: 11px; padding-bottom: 11px; }
.kg-header__cta.kg-btn--primary:active { box-shadow: var(--kg-clay-inset); }
/* Language switcher */
.kg-lang { position: relative; }
.kg-lang__btn {
display: inline-flex; align-items: center; gap: 7px;
background: transparent; border: 0; cursor: pointer;
font-weight: 700; font-size: .92rem; color: var(--kg-text);
padding: 9px 12px; border-radius: 999px;
transition: background-color 180ms;
}
.kg-lang__btn:hover { background: var(--kg-teal-soft); }
/* Full name everywhere by default (footer, mobile menu); the desktop header
trigger swaps in the compact code so the CTA never overflows the nav pill. */
.kg-lang__code { display: none; }
.kg-header__actions .kg-lang__label { display: none; }
.kg-header__actions .kg-lang__code { display: inline; }
.kg-flag {
width: 22px; height: auto; flex: none;
display: inline-block; vertical-align: middle;
border-radius: 4px;
box-shadow: 0 0 0 1px rgba(28, 43, 58, .12);
}
.kg-lang__menu {
position: absolute; right: 0; top: calc(100% + 8px);
min-width: 200px;
list-style: none;
background: var(--kg-white);
border-radius: var(--kg-r-md);
box-shadow: var(--kg-shadow-lg);
padding: 8px;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity 180ms, transform 180ms var(--kg-ease-out), visibility 180ms;
z-index: var(--kg-z-menu);
}
.kg-lang.is-open .kg-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.kg-lang__menu a {
display: flex; align-items: center; gap: 9px;
padding: 10px 14px; border-radius: 12px;
text-decoration: none; color: var(--kg-text); font-weight: 600;
}
.kg-lang__menu a:hover { background: var(--kg-cream-deep); }
.kg-lang__menu a.is-active { background: var(--kg-amber-soft); color: var(--kg-navy); }
/* Market switcher — mirrors lang switcher; shows flag + name + currency */
.kg-market { position: relative; }
.kg-market__btn {
display: inline-flex; align-items: center; gap: 7px;
background: transparent; border: 0; cursor: pointer;
font-weight: 700; font-size: .92rem; color: var(--kg-text);
padding: 9px 12px; border-radius: 999px;
transition: background-color 180ms;
}
.kg-market__btn:hover { background: var(--kg-amber-soft); }
.kg-market__menu {
position: absolute; right: 0; top: calc(100% + 8px);
min-width: 220px;
list-style: none;
background: var(--kg-white);
border-radius: var(--kg-r-md);
box-shadow: var(--kg-shadow-lg);
padding: 8px;
/* Cap the list so a long market list scrolls instead of running off-screen. */
max-height: 280px;
overflow-y: auto;
overscroll-behavior: contain;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity 180ms, transform 180ms var(--kg-ease-out), visibility 180ms;
z-index: var(--kg-z-menu);
}
.kg-market.is-open .kg-market__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.kg-market__menu a {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 12px;
text-decoration: none; color: var(--kg-text); font-weight: 600;
}
.kg-market__menu a small { margin-left: auto; font-size: .8rem; color: var(--kg-muted); font-weight: 500; }
.kg-market__menu a:hover { background: var(--kg-cream-deep); }
.kg-market__menu a.is-active { background: var(--kg-amber-soft); color: var(--kg-navy); }
/* Region selector banner (bare domain only) */
.kg-region-bar {
background:
radial-gradient(680px 260px at 10% -30%, rgba(42, 191, 191, .28), transparent 60%),
radial-gradient(560px 240px at 100% 130%, rgba(245, 166, 35, .16), transparent 58%),
linear-gradient(180deg, #23364E, var(--kg-navy));
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.kg-region-bar__inner {
max-width: var(--kg-container); margin-inline: auto;
padding: clamp(20px, 3vw, 30px) var(--kg-gutter);
display: flex; flex-direction: column; gap: clamp(14px, 2vw, 20px);
}
.kg-region-bar__head { display: flex; align-items: center; gap: 14px; }
.kg-region-bar__globe {
width: 46px; height: 46px; flex: none;
display: grid; place-items: center; border-radius: 14px;
background: rgba(42, 191, 191, .16); color: var(--kg-teal);
box-shadow: inset 0 0 0 1px rgba(42, 191, 191, .4);
}
.kg-region-bar__title {
display: flex; flex-direction: column; line-height: 1.2;
font-family: var(--kg-font-display); font-weight: 800; font-size: 1.15rem;
}
.kg-region-bar__title small {
font-family: var(--kg-font-body); font-weight: 500; font-size: .85rem;
color: rgba(255, 255, 255, .62); margin-top: 3px;
}
.kg-region-bar__options {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
gap: 10px;
}
.kg-region-bar__btn {
display: flex; align-items: center; gap: 10px;
height: 100%;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 14px; padding: 9px 12px;
text-decoration: none; color: #fff;
transition: background-color .2s, border-color .2s, transform .16s var(--kg-ease-pop), box-shadow .2s;
}
.kg-region-bar__btn:hover {
background: rgba(255, 255, 255, .11);
border-color: var(--kg-amber);
transform: translateY(-3px);
box-shadow: 0 12px 24px -12px rgba(245, 166, 35, .55);
}
.kg-region-bar__flag { display: inline-grid; flex: none; }
.kg-region-bar__flag .kg-flag { width: 27px; border-radius: 5px; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.kg-region-bar__name { flex: 1; min-width: 0; font-weight: 700; font-size: .9rem; }
.kg-region-bar__cur {
flex: none;
font-family: var(--kg-font-display); font-weight: 700; font-size: .68rem; letter-spacing: .05em;
color: #86e4e4; background: rgba(42, 191, 191, .18);
padding: 3px 8px; border-radius: 999px;
}
@keyframes kg-region-pulse {
0% { box-shadow: inset 0 0 0 3px rgba(245, 166, 35, 0); }
35% { box-shadow: inset 0 0 0 3px rgba(245, 166, 35, .9); }
100% { box-shadow: inset 0 0 0 3px rgba(245, 166, 35, 0); }
}
.kg-region-bar--pulse { animation: kg-region-pulse .7s ease 2; }
/* One column on phones so long names ("Philippines") never collide with the
currency pill. */
@media (max-width: 480px) {
.kg-region-bar__options { grid-template-columns: 1fr; }
}
/* Burger (mobile) */
.kg-burger {
display: none;
width: 46px; height: 46px;
border: 0; border-radius: 50%;
background: var(--kg-navy); cursor: pointer;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
flex: none;
}
.kg-burger__line {
width: 20px; height: 2.6px; border-radius: 2px;
background: #fff;
transition: transform 240ms var(--kg-ease-out), opacity 180ms;
}
.kg-burger[aria-expanded="true"] .kg-burger__line:nth-child(1) { transform: translateY(7.6px) rotate(45deg); }
.kg-burger[aria-expanded="true"] .kg-burger__line:nth-child(2) { opacity: 0; }
.kg-burger[aria-expanded="true"] .kg-burger__line:nth-child(3) { transform: translateY(-7.6px) rotate(-45deg); }
/* ---- Footer ---- */
/* No margin-top: the footer sits flush so the navy arch waves up into the
section above. A margin here would reveal the cream as a band,
which looks broken when the preceding section is also dark. */
.kg-footer { background: var(--kg-navy); color: var(--kg-text-on-dark); }
.kg-footer__arch { color: var(--kg-navy); transform: translateY(calc(-100% + 2px)); position: absolute; width: 100%; line-height: 0; }
/* display:block removes the inline-SVG baseline gap that would otherwise leak
a sliver of the section colour between the arch and the footer. */
.kg-footer__arch svg { display: block; width: 100%; height: auto; }
.kg-footer { position: relative; }
.kg-footer__inner {
max-width: var(--kg-container); margin-inline: auto;
padding: clamp(40px, 5vw, 60px) var(--kg-gutter) 32px;
display: grid;
grid-template-columns: 1.7fr 1fr 1fr 1.5fr;
gap: clamp(24px, 3vw, 44px);
align-items: start;
}
.kg-logo--footer .kg-logo__word { color: #fff; font-size: 1.6rem; }
.kg-footer__tag { color: var(--kg-text-on-dark-soft); margin: 12px 0 18px; max-width: 26em; }
.kg-footer__head {
font-family: var(--kg-font-display);
font-size: .85rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--kg-amber); margin-bottom: 16px;
}
.kg-footer__col ul { list-style: none; display: grid; gap: 10px; }
.kg-footer__col a { color: var(--kg-text-on-dark); text-decoration: none; font-weight: 600; transition: color 160ms; }
.kg-footer__col a:hover { color: var(--kg-amber); }
.kg-footer__placeholder { opacity: .55; cursor: default; }
.kg-footer__pdf::after {
content: '';
display: inline-block;
width: 11px; height: 11px;
margin-left: 5px;
vertical-align: middle;
opacity: .6;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 15V3m0 12-4-4m4 4 4-4M2 17l.621 2.485A2 2 0 0 0 4.561 21H19.44a2 2 0 0 0 1.94-1.515L22 17' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
background-size: contain;
}
.kg-footer__support-card {
display: flex; align-items: center; gap: 14px;
background: var(--kg-navy-soft);
border-radius: var(--kg-r-md);
padding: 16px 18px;
text-decoration: none; color: var(--kg-text-on-dark);
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-sm);
transition: transform var(--kg-dur) var(--kg-ease-pop), background-color 180ms;
margin-bottom: 18px;
}
.kg-footer__support-card:hover { transform: translateY(-3px); background: #32475D; }
.kg-footer__support-card > svg:first-child { color: var(--kg-amber); flex: none; }
.kg-footer__support-card span { flex: 1; display: grid; }
.kg-footer__support-card strong { font-family: var(--kg-font-display); font-size: 1.05rem; }
.kg-footer__support-card small { color: var(--kg-text-on-dark-soft); }
.kg-footer__contact { color: var(--kg-text-on-dark-soft); font-size: .95rem; margin-bottom: 18px; }
.kg-footer__contact a { color: var(--kg-teal); }
.kg-footer__email-note { display: block; font-size: .8rem; opacity: .7; font-style: italic; }
.kg-footer .kg-lang__btn { color: var(--kg-text-on-dark); }
.kg-footer .kg-lang__btn:hover { background: var(--kg-navy-soft); }
.kg-footer .kg-lang__menu { bottom: calc(100% + 8px); top: auto; right: auto; left: 0; }
.kg-footer .kg-lang__menu a { color: var(--kg-text); }
/* Market switcher in footer: open upward, match lang switcher styling */
.kg-footer .kg-market__btn { color: var(--kg-text-on-dark); }
.kg-footer .kg-market__btn:hover { background: var(--kg-navy-soft); }
.kg-footer .kg-market__menu { bottom: calc(100% + 8px); top: auto; right: auto; left: 0; }
.kg-footer .kg-market__menu a { color: var(--kg-text); }
.kg-footer__legal {
border-top: 1px solid rgba(255, 255, 255, .12);
padding: 22px var(--kg-gutter);
text-align: center;
color: var(--kg-text-on-dark-soft); font-size: .9rem;
}
.kg-footer__legal p { margin: 0; }
/* Store badges */
.kg-store-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.kg-store-badge {
display: inline-flex; align-items: center; gap: 11px;
background: var(--kg-ink); color: #fff;
border-radius: 14px;
padding: 10px 20px;
text-decoration: none;
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-sm);
transition: transform var(--kg-dur) var(--kg-ease-pop), background-color 180ms;
}
.kg-store-badge:hover { transform: translateY(-3px); background: #2A2A2A; }
.kg-store-badge span { display: grid; line-height: 1.2; }
.kg-store-badge small { font-size: .7rem; opacity: .8; }
.kg-store-badge strong { font-family: var(--kg-font-display); font-size: 1.02rem; }
/* Footer store badges sit side-by-side and stay compact so the brand column
doesn't tower over the others (no tall stack, no empty gutter beside it). */
.kg-footer__brand .kg-store-badges { flex-wrap: nowrap; gap: 10px; }
.kg-footer__brand .kg-store-badge { padding: 9px 15px; gap: 9px; }
.kg-footer__brand .kg-store-badge small { font-size: .66rem; }
.kg-footer__brand .kg-store-badge strong { font-size: .95rem; }
.kg-footer__social { display: flex; gap: 9px; margin-top: 16px; }
.kg-footer__social-btn {
display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%;
color: var(--kg-text-on-dark);
background: rgba(255,255,255,.1);
transition: background 180ms, transform 180ms var(--kg-ease-pop), opacity 180ms;
text-decoration: none;
}
.kg-footer__social-btn:hover { background: rgba(255,255,255,.22); transform: translateY(-3px); }
.kg-footer__social-btn--inert { opacity: .3; cursor: default; }
.kg-footer__social-btn--inert:hover { background: rgba(255,255,255,.1); transform: none; }
/* ---- FAQ accordion ---- */
.kg-faq { display: grid; gap: 14px; max-width: 820px; margin-inline: auto; }
.kg-faq__item {
background: var(--kg-white);
border-radius: var(--kg-r-md);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
overflow: hidden;
transition: box-shadow var(--kg-dur);
}
.kg-faq__item.is-open { box-shadow: var(--kg-clay-inset), var(--kg-shadow-md); }
.kg-faq__q { margin: 0; }
.kg-faq__q button {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
width: 100%;
background: none; border: 0; cursor: pointer;
text-align: left;
font-family: var(--kg-font-display);
font-size: 1.08rem; font-weight: 700; color: var(--kg-navy);
padding: 20px 24px;
min-height: 44px;
}
.kg-faq__icon { flex: none; color: var(--kg-amber-deep); transition: transform 260ms var(--kg-ease-pop); }
.kg-faq__item.is-open .kg-faq__icon { transform: rotate(45deg); }
/* Open/close animation: the panel is a grid row animating 0fr → 1fr (smooth
height without JS measuring), while the answer fades and slides in. The
visibility swap waits for the collapse so closing text doesn't vanish early,
and keeps closed answers out of the tab order and accessibility tree. */
.kg-faq__a {
display: grid;
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows 300ms var(--kg-ease-out), visibility 0s linear 300ms;
}
.kg-faq__a[hidden] { display: none; } /* no-JS: stays collapsed */
.kg-faq__item.is-open .kg-faq__a {
grid-template-rows: 1fr;
visibility: visible;
transition: grid-template-rows 300ms var(--kg-ease-out), visibility 0s;
}
.kg-faq__a-inner {
min-height: 0; overflow: hidden;
padding: 0 24px;
color: var(--kg-text-soft);
opacity: 0; transform: translateY(-6px);
transition: opacity 200ms var(--kg-ease-out), transform 240ms var(--kg-ease-out), padding-bottom 300ms var(--kg-ease-out);
}
.kg-faq__item.is-open .kg-faq__a-inner {
opacity: 1; transform: none;
padding-bottom: 22px;
transition: opacity 240ms var(--kg-ease-out) 80ms, transform 280ms var(--kg-ease-out) 60ms, padding-bottom 300ms var(--kg-ease-out);
}
.kg-faq__a-inner p:last-child { margin-bottom: 0; }
.kg-section--navy .kg-faq__item { background: var(--kg-navy-soft); box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-sm); }
.kg-section--navy .kg-faq__q button { color: #fff; }
.kg-section--navy .kg-faq__a-inner { color: var(--kg-text-on-dark-soft); }
/* ---- Tabs ---- */
.kg-tabs__bar {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center;
margin-bottom: clamp(28px, 4vw, 44px);
}
.kg-tabs__tab {
font-family: var(--kg-font-display);
font-size: .98rem; font-weight: 700;
color: var(--kg-text);
background: var(--kg-white);
border: 0; border-radius: 999px;
padding: 12px 24px;
cursor: pointer;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
transition: background-color 180ms, color 180ms, transform var(--kg-dur) var(--kg-ease-pop);
min-height: 44px;
}
.kg-tabs__tab:hover { transform: translateY(-2px); }
.kg-tabs__tab[aria-selected="true"] { background: var(--kg-navy); color: #fff; }
.kg-tabs__panel[hidden] { display: none; }
.kg-tabs__panel { animation: kg-fade-in 320ms var(--kg-ease-out); }
@keyframes kg-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ---- Scroll reveals ---- */
[data-kg-reveal] {
opacity: 0;
transform: translateY(26px);
transition: opacity 600ms var(--kg-ease-out), transform 600ms var(--kg-ease-out);
transition-delay: var(--kg-delay, 0ms);
}
[data-kg-reveal].is-in { opacity: 1; transform: none; }
[data-kg-reveal="pop"] { transform: translateY(18px) scale(.94); }
[data-kg-reveal="left"] { transform: translateX(-34px); }
[data-kg-reveal="right"] { transform: translateX(34px); }
/* Floating ambient elements (decorative shapes) */
.kg-float { position: absolute; pointer-events: none; user-select: none; }
@keyframes kg-bob { 0%, 100% { transform: translateY(0) rotate(var(--kg-tilt, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--kg-tilt, 0deg)); } }
.kg-float--bob { animation: kg-bob 5.5s ease-in-out infinite; }
.kg-float--slow { animation-duration: 8s; }
/* Counter pop */
.kg-counter { font-variant-numeric: tabular-nums; }
/* ---- Hero (shared page hero) ---- */
.kg-page-hero {
/* Padding-top = visible breathing room (24–40px) + 80px to compensate
for the negative margin that tucks it behind the sticky header. */
padding: clamp(24px, 4vw, 40px) 0 clamp(40px, 6vw, 72px);
padding-top: calc(clamp(24px, 4vw, 40px) + 80px);
margin-top: -80px;
text-align: center; position: relative; overflow: hidden;
background: linear-gradient(180deg, var(--kg-teal-soft), var(--kg-cream));
}
/* When a section-colour class is applied it would override the gradient to a
flat colour, leaving the area behind the transparent header looking white.
Restore the teal-to-section-colour gradient so the top always reads cleanly. */
.kg-page-hero.kg-section--cream { background: linear-gradient(160deg, var(--kg-teal-soft) 0%, var(--kg-cream) 45%); }
.kg-page-hero.kg-section--cream-deep { background: linear-gradient(160deg, var(--kg-teal-soft) 0%, var(--kg-cream-deep) 45%); }
.kg-page-hero.kg-section--white { background: linear-gradient(160deg, var(--kg-teal-soft) 0%, var(--kg-white) 45%); }
.kg-page-hero .kg-h1 { max-width: 17em; margin-inline: auto; }
.kg-page-hero .kg-lede { margin-inline: auto; }
.kg-page-hero .kg-chips { justify-content: center; }
/* ---- Prose fallback ---- */
.kg-prose { padding-block: 40px; }
/* ---- Forms ---- */
.kg-field { display: grid; gap: 7px; margin-bottom: 18px; }
.kg-field label { font-weight: 700; color: var(--kg-navy); font-size: .96rem; }
.kg-field input, .kg-field select, .kg-field textarea {
font-family: inherit; font-size: 1rem;
color: var(--kg-text);
background: var(--kg-white);
border: 2px solid #E3E9EF;
border-radius: var(--kg-r-sm);
padding: 13px 16px;
transition: border-color 180ms, box-shadow 180ms;
width: 100%;
}
.kg-field input:focus, .kg-field select:focus, .kg-field textarea:focus {
outline: none;
border-color: var(--kg-teal);
box-shadow: 0 0 0 4px var(--kg-teal-soft);
}
.kg-field textarea { min-height: 140px; resize: vertical; }
.kg-field--error input, .kg-field--error textarea { border-color: var(--kg-red); }
.kg-field__error { color: var(--kg-red-deep); font-size: .88rem; font-weight: 600; margin: 6px 0 0; }
.kg-field__error[hidden] { display: none; }
.kg-field__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kg-field__count { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--kg-text-soft); }
/* Honeypot — visually removed, still in the tab-free form payload for bots. */
.kg-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Post-submit status (e.g. the mailto: fallback explanation). */
.kg-form-status {
display: block;
background: var(--kg-amber-soft);
border-radius: var(--kg-r-sm);
padding: 12px 16px;
margin: 14px 0 0;
font-size: .92rem; font-weight: 600;
color: var(--kg-navy);
}
.kg-form-status[hidden] { display: none; }
.kg-form-response-note {
display: flex; align-items: center; gap: 8px;
margin: 14px 0 0;
font-size: .9rem; font-weight: 600;
color: var(--kg-text-soft);
}
.kg-form-response-note svg { flex: none; }
.kg-form-note {
display: flex; gap: 10px; align-items: flex-start;
background: var(--kg-amber-soft);
border-radius: var(--kg-r-sm);
padding: 14px 16px;
font-size: .92rem;
color: var(--kg-navy);
}
.kg-form-success {
background: var(--kg-teal-soft);
border-radius: var(--kg-r-md);
padding: 28px;
text-align: center;
}
.kg-form-success svg { color: var(--kg-teal-deep); margin-bottom: 10px; }
/* =========================================================================
Page-specific styles
========================================================================= */
/* ---- Home hero: the Gate (two-column, colourful) ---- */
.kg-hero {
position: relative;
/* Fill the first screen; content stays full-size and vertically centred. */
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(40px, 7vw, 84px) 0 clamp(24px, 4vw, 48px);
/* Only reserve the header height up top; flex-centring handles the rest,
so the content sits balanced rather than pushed low. */
padding-top: calc(clamp(12px, 2vw, 28px) + 84px);
margin-top: -80px;
overflow: hidden;
background:
radial-gradient(1200px 560px at 88% -8%, var(--kg-teal-soft), transparent 58%),
radial-gradient(1000px 520px at 4% 6%, var(--kg-amber-soft), transparent 56%),
linear-gradient(180deg, var(--kg-cream), #FFFCF6 70%);
}
/* Colourful decorative layer */
.kg-hero__decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.kg-hero__blob { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; }
.kg-hero__blob--amber { width: 360px; height: 360px; background: rgba(245, 166, 35, .55); top: -90px; left: -70px; }
.kg-hero__blob--teal { width: 420px; height: 420px; background: rgba(42, 191, 191, .42); top: -60px; right: -110px; }
.kg-hero__blob--red { width: 260px; height: 260px; background: rgba(230, 51, 41, .20); bottom: -80px; left: 38%; }
.kg-hero__dot { position: absolute; border-radius: 50%; }
.kg-hero__dot--1 { width: 14px; height: 14px; background: var(--kg-teal); top: 22%; left: 6%; animation: kg-bob 6s ease-in-out infinite; }
.kg-hero__dot--2 { width: 10px; height: 10px; background: var(--kg-red); top: 86%; left: 46%; animation: kg-bob 7s ease-in-out infinite .4s; }
.kg-hero__dot--3 { width: 16px; height: 16px; background: var(--kg-amber); top: 16%; right: 10%; animation: kg-bob 8s ease-in-out infinite .8s; }
.kg-hero__plus { position: absolute; color: var(--kg-amber); opacity: .65; }
.kg-hero__plus--1 { top: 58%; left: 3%; color: var(--kg-teal); animation: kg-bob 7.5s ease-in-out infinite .2s; }
.kg-hero__plus--2 { top: 30%; right: 5%; color: var(--kg-red); animation: kg-bob 6.5s ease-in-out infinite .6s; }
.kg-hero__inner {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1.02fr .98fr;
gap: clamp(28px, 5vw, 64px);
align-items: center;
}
.kg-hero__copy { text-align: left; }
/* Brand lockup chip */
.kg-hero__brand {
display: inline-flex; align-items: center; gap: 10px;
background: #fff; border-radius: 999px;
padding: 8px 20px 8px 9px; margin-bottom: clamp(24px, 3vw, 34px);
font-family: var(--kg-font-display); font-weight: 700; font-size: .95rem;
color: var(--kg-navy); text-decoration: none; cursor: pointer;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur) var(--kg-ease-out);
}
a.kg-hero__brand:hover { transform: translateY(-2px); box-shadow: var(--kg-clay-inset), var(--kg-shadow-md); }
.kg-hero__brand img { border-radius: 50%; }
/* Forced two-line headline (via
); each line stays on one line on
desktop so the draw-squiggle underlines its phrase cleanly. */
.kg-hero__title { position: relative; z-index: 3; max-width: none; margin: 0 0 .4em; font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.1; white-space: nowrap; }
.kg-hero__lede { font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: var(--kg-text-soft); max-width: 33em; margin: 0 0 clamp(28px, 3.5vw, 40px); }
.kg-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; margin-bottom: 22px; }
.kg-page-hero .kg-hero__ctas { justify-content: center; }
.kg-hero .kg-chips { justify-content: flex-start; margin-bottom: 0; }
/* Right-hand visual stage */
.kg-hero__stage { position: relative; }
/* The gate arch frame around the hero photo */
.kg-hero__gate {
position: relative;
max-width: 540px; margin-inline: auto;
border-radius: var(--kg-arch);
padding: clamp(14px, 2vw, 20px);
background: linear-gradient(160deg, var(--kg-amber), var(--kg-red) 135%);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-lg);
}
.kg-hero__gate-img { border-radius: 760px 760px 16px 16px; overflow: hidden; }
.kg-hero__gate-img img { width: 100%; object-fit: cover; aspect-ratio: 4 / 4.5; }
/* Floating reward tokens around the gate */
.kg-token {
display: inline-flex; align-items: center; justify-content: center;
width: 58px; height: 58px; border-radius: 50%;
background: var(--kg-amber);
color: var(--kg-navy);
font-family: var(--kg-font-display); font-weight: 800;
box-shadow: var(--kg-clay-inset), 0 4px 0 var(--kg-amber-deep), var(--kg-shadow-md);
font-size: 1.5rem;
}
.kg-token--teal { background: var(--kg-teal); box-shadow: var(--kg-clay-inset), 0 4px 0 var(--kg-teal-deep), var(--kg-shadow-md); color: #fff; }
.kg-token--red { background: var(--kg-red); box-shadow: var(--kg-clay-inset), 0 4px 0 var(--kg-red-deep), var(--kg-shadow-md); color: #fff; }
/* Floating product UI cards on the hero visual */
.kg-hero__card {
position: absolute; z-index: 4;
display: flex; align-items: center; gap: 11px;
background: #fff; border-radius: 16px;
padding: 10px 15px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-lg);
animation: kg-card-float 5.5s ease-in-out infinite;
}
.kg-hero__card--tokens { animation-delay: .5s; }
.kg-hero__card--correct { animation-delay: 1s; }
/* Trust-point cards: stagger the float so they don't bob in unison */
.kg-hero__card--trust:nth-of-type(1) { animation-delay: 0s; }
.kg-hero__card--trust:nth-of-type(2) { animation-delay: .7s; }
.kg-hero__card--trust:nth-of-type(3) { animation-delay: 1.1s; }
.kg-hero__card--trust:nth-of-type(4) { animation-delay: .4s; }
@keyframes kg-card-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.kg-hero__card-txt strong { display: block; font-family: var(--kg-font-display); font-weight: 800; font-size: .92rem; color: var(--kg-navy); line-height: 1.15; white-space: nowrap; }
.kg-hero__card-txt small { display: block; color: var(--kg-text-soft); font-weight: 600; font-size: .76rem; }
.kg-hero__tick { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--kg-green); color: #fff; display: grid; place-items: center; }
.kg-hero__tick--cross { background: var(--kg-red); }
/* Mastery progress ring */
.kg-ring { position: relative; width: 42px; height: 42px; flex: none; display: grid; place-items: center; }
.kg-ring svg { width: 42px; height: 42px; transform: rotate(-90deg); }
.kg-ring__bg { fill: none; stroke: #E7EDF2; stroke-width: 3.4; }
.kg-ring__fg { fill: none; stroke: var(--kg-teal); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: kg-ring-draw 1.4s var(--kg-ease-out) .3s forwards; }
@keyframes kg-ring-draw { to { stroke-dashoffset: calc(100 - var(--kg-ring)); } }
.kg-ring b { position: absolute; font-family: var(--kg-font-display); font-weight: 800; font-size: .6rem; color: var(--kg-navy); }
/* Hero stat card overlays (legacy — kept for safety) */
.kg-hero__badge { position: absolute; background: var(--kg-white); border-radius: var(--kg-r-md); box-shadow: var(--kg-clay-inset), var(--kg-shadow-lg); padding: 14px 20px; font-weight: 700; color: var(--kg-navy); display: flex; align-items: center; gap: 10px; font-size: .95rem; z-index: 3; }
.kg-hero__badge strong { font-family: var(--kg-font-display); font-size: 1.2rem; display: block; line-height: 1.1; }
.kg-hero__badge small { color: var(--kg-text-soft); font-weight: 600; display: block; }
/* Desktop: the trust points live on the floating cards, so hide the
duplicate chip row in the copy column. */
@media (min-width: 981px) {
.kg-hero__copy .kg-chips { display: none; }
}
/* Hero: stack and centre on tablet / mobile */
@media (max-width: 980px) {
.kg-hero__inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 48px); }
.kg-hero__copy { text-align: center; }
.kg-hero__title, .kg-hero__lede { margin-inline: auto; }
.kg-hero__title { white-space: normal; }
.kg-hero__brand { margin-inline: auto; }
.kg-hero__ctas, .kg-hero .kg-chips { justify-content: center; }
.kg-hero__stage { order: 2; }
.kg-hero__gate { max-width: 400px; }
/* Floating cards get crowded on a stacked image — the chip row carries
the trust points here instead. */
.kg-hero__card { display: none; }
}
@media (max-width: 640px) {
.kg-hero__gate { max-width: 320px; }
.kg-hero__blob { opacity: .4; }
}
/* ---- Stats band ---- */
.kg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.kg-stat {
--acc: var(--kg-amber); --acc-deep: var(--kg-amber-deep); --acc-soft: var(--kg-amber-soft);
position: relative; overflow: hidden;
text-align: center;
padding: clamp(26px, 3vw, 34px) 16px clamp(20px, 3vw, 26px);
transition: transform .3s var(--kg-ease-pop), box-shadow .3s var(--kg-ease-out);
}
.kg-stat--amber { --acc: var(--kg-amber); --acc-deep: var(--kg-amber-deep); --acc-soft: var(--kg-amber-soft); }
.kg-stat--teal { --acc: var(--kg-teal); --acc-deep: var(--kg-teal-deep); --acc-soft: var(--kg-teal-soft); }
.kg-stat--red { --acc: var(--kg-red); --acc-deep: var(--kg-red-deep); --acc-soft: var(--kg-red-soft); }
.kg-stat--green { --acc: var(--kg-green); --acc-deep: var(--kg-green-deep); --acc-soft: var(--kg-green-soft); }
/* Soft accent wash bleeding in from the top-right corner. */
.kg-stat::before {
content: ""; position: absolute; top: -46%; right: -34%;
width: 160px; height: 160px; border-radius: 50%;
background: radial-gradient(circle, var(--acc-soft), transparent 70%);
pointer-events: none; z-index: 0;
transition: transform .45s var(--kg-ease-out);
}
/* Accent bar along the top edge, drawn in when the card reveals. */
.kg-stat::after {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
background: var(--acc);
transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--kg-ease-out) var(--kg-delay, 0ms);
}
.kg-stat.is-in::after { transform: scaleX(1); }
.kg-stat > * { position: relative; z-index: 1; }
.kg-stat:hover { transform: translateY(-6px); box-shadow: var(--kg-clay-inset), 0 18px 34px -12px color-mix(in srgb, var(--acc) 55%, transparent); }
.kg-stat:hover::before { transform: scale(1.25); }
.kg-stat__icon {
display: inline-grid; place-items: center;
width: 56px; height: 56px; margin: 0 auto clamp(10px, 1.4vw, 14px);
border-radius: 16px;
background: var(--acc-soft); color: var(--acc-deep);
box-shadow: var(--kg-clay-inset);
transition: transform .32s var(--kg-ease-pop);
}
.kg-stat__icon svg { width: 28px; height: 28px; }
.kg-stat:hover .kg-stat__icon { transform: translateY(-3px) scale(1.1) rotate(-5deg); }
.kg-stat__num {
font-family: var(--kg-font-display);
font-size: clamp(2.1rem, 4.4vw, 3.1rem); font-weight: 800;
color: var(--kg-navy); line-height: 1.05;
display: block;
}
/* The suffix (+, min) picks up the card's accent colour to pop off the number. */
.kg-stat__num .kg-counter__suffix { color: var(--acc-deep); }
.kg-stat__label { color: var(--kg-text-soft); font-weight: 700; font-size: .95rem; margin-top: 4px; display: block; }
@media (prefers-reduced-motion: reduce) {
.kg-stat:hover { transform: none; }
.kg-stat:hover .kg-stat__icon { transform: none; }
.kg-stat::after { transition: none; }
}
/* ---- Problem / solution ---- */
.kg-problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); margin-bottom: clamp(40px, 6vw, 64px); }
.kg-problem { position: relative; border-top: 3px solid var(--kg-red); }
.kg-problem .kg-bubble { width: 54px; height: 54px; }
.kg-problem .kg-bubble--red { background: rgba(230, 51, 41, 0.14); color: var(--kg-red-deep); }
.kg-solution-turn { text-align: center; max-width: 720px; margin-inline: auto; }
.kg-solution-turn .kg-h2 { margin-bottom: .35em; }
/* nudges the lede down away from the squiggle underline; bottom padding
on .kg-vs--good is trimmed by the same amount so the panel doesn't grow */
.kg-solution-turn .kg-lede { margin-top: 14px; }
/* "Them vs us" framing on the homepage: the pains sit in a dashed red
box labelled as other tools; the flip sits in a vibrant green panel
labelled with the brand, joined by a turn arrow. */
.kg-vs { position: relative; border-radius: var(--kg-r-lg); }
.kg-vs__pill {
position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 20px; border-radius: 999px;
font-family: var(--kg-font-display); font-weight: 800; font-size: .95rem;
line-height: 1.2; white-space: nowrap; z-index: 2;
}
.kg-vs--bad {
padding: clamp(34px, 4.5vw, 50px) clamp(16px, 2.6vw, 30px) clamp(18px, 2.6vw, 28px);
border: 2px dashed rgba(230, 51, 41, .5);
/* faint hatching: reads as "warning zone" without hurting legibility */
background: repeating-linear-gradient(-45deg, rgba(28, 43, 58, .025) 0 14px, transparent 14px 28px);
}
.kg-vs__pill--bad { background: var(--kg-red-deep); color: #fff; box-shadow: var(--kg-shadow-sm); }
.kg-vs--bad .kg-problems { margin-bottom: 0; }
/* cards recede slightly so the green panel below owns the section */
.kg-vs--bad .kg-card { background: #FCFAF6; box-shadow: var(--kg-shadow-sm); }
.kg-vs__turnarrow {
display: flex; align-items: center; justify-content: center;
/* the brand pill overhangs the green panel's top edge by ~17px,
so the bottom margin needs extra room to keep clear air */
margin: clamp(12px, 1.8vw, 20px) auto clamp(30px, 3.2vw, 40px);
color: #1A1A1A; /* brand Rich Black */
}
.kg-vs--good {
padding: clamp(38px, 5vw, 58px) clamp(20px, 4vw, 48px) clamp(32px, 4.5vw, 52px);
/* offsets the lede's added margin-top so the panel's height is unchanged */
padding-bottom: calc(clamp(32px, 4.5vw, 52px) - 14px);
background:
radial-gradient(640px 300px at 12% 0%, rgba(42, 191, 191, .16), transparent 60%),
radial-gradient(640px 300px at 88% 100%, rgba(245, 166, 35, .2), transparent 60%),
linear-gradient(180deg, #fff, var(--kg-green-soft));
box-shadow: var(--kg-clay-inset), var(--kg-shadow-lg);
}
/* darker than --kg-green-deep so the white label passes AA at this size */
.kg-vs__pill--good { background: #256B3C; color: #fff; box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-md); }
/* ---- Journey (how-it-works loop) ---- */
.kg-journey { position: relative; max-width: 900px; margin-inline: auto; }
.kg-journey__path {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
}
.kg-journey__path path {
fill: none;
stroke: var(--kg-amber);
stroke-width: 4;
stroke-dasharray: 12 14;
stroke-linecap: round;
opacity: .85;
}
.kg-journey__steps { display: grid; gap: clamp(24px, 4vw, 44px); position: relative; }
.kg-journey__step {
display: flex; align-items: center; gap: clamp(18px, 3vw, 32px);
max-width: 560px;
}
.kg-journey__step:nth-child(even) { margin-left: auto; flex-direction: row-reverse; text-align: right; }
.kg-journey__gate {
flex: none;
width: clamp(84px, 11vw, 110px); height: clamp(98px, 13vw, 128px);
border-radius: var(--kg-arch);
display: flex; align-items: center; justify-content: center;
color: #fff;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md);
}
.kg-journey__gate svg { width: 44%; height: auto; }
.kg-journey__step h3 { margin-bottom: .25em; }
.kg-journey__step p { color: var(--kg-text-soft); margin: 0; }
/* ---- Experience tabs (immersive in-app preview) ----
Each subject shows a real app screenshot as a darkened backdrop, with a
colour-accented eyebrow, title and a grid of frosted "topic" chips that
stagger in every time the tab is opened. */
/* Per-accent palette, shared by the tab button and its panel */
.kg-expx__tab[data-accent="teal"], .kg-expx__panel[data-accent="teal"] { --acc: var(--kg-teal); --acc-deep: var(--kg-teal-deep); }
.kg-expx__tab[data-accent="amber"], .kg-expx__panel[data-accent="amber"] { --acc: var(--kg-amber); --acc-deep: var(--kg-amber-deep); }
.kg-expx__tab[data-accent="red"], .kg-expx__panel[data-accent="red"] { --acc: var(--kg-red); --acc-deep: var(--kg-red-deep); }
/* Bolder tab bar */
.kg-expx__bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: clamp(22px, 3vw, 34px); }
.kg-expx__tab {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--kg-font-display); font-size: 1.02rem; font-weight: 800;
color: var(--kg-navy); background: var(--kg-white);
border: 2px solid transparent; border-radius: 999px;
padding: 11px 22px 11px 13px; cursor: pointer; min-height: 50px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow 200ms, background-color 200ms, color 200ms, border-color 200ms;
}
.kg-expx__tab-ic {
display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
background: color-mix(in srgb, var(--acc) 18%, #fff); color: var(--acc-deep);
transition: background-color 200ms, color 200ms;
}
.kg-expx__tab:hover { transform: translateY(-2px); box-shadow: var(--kg-clay-inset), var(--kg-shadow-md); }
.kg-expx__tab[aria-selected="true"] {
background: var(--acc); color: #fff; border-color: var(--acc-deep); transform: translateY(-2px);
box-shadow: var(--kg-clay-inset), 0 5px 0 var(--acc-deep), 0 12px 22px color-mix(in srgb, var(--acc) 40%, transparent);
}
.kg-expx__tab[aria-selected="true"] .kg-expx__tab-ic { background: rgba(255, 255, 255, .22); color: #fff; }
.kg-expx__tab:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 3px; }
/* Immersive panel */
.kg-expx__panel {
position: relative; overflow: hidden; isolation: isolate; display: flex;
border-radius: var(--kg-r-lg); min-height: clamp(420px, 50vw, 500px);
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-lg); color: #fff;
animation: kg-fade-in 360ms var(--kg-ease-out);
}
.kg-expx__panel[hidden] { display: none; }
.kg-expx__bg {
position: absolute; inset: 0; z-index: -2;
background-size: cover; background-position: center; transform: scale(1.06);
animation: kg-rewards-pan 28s ease-in-out infinite alternate;
}
.kg-expx__scrim {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(115deg, rgba(15, 23, 32, .94) 0%, rgba(15, 23, 32, .85) 44%, rgba(15, 23, 32, .5) 100%),
radial-gradient(120% 120% at 0% 100%, color-mix(in srgb, var(--acc) 55%, transparent), transparent 55%);
}
.kg-expx__inner {
position: relative; z-index: 1; width: 100%;
display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(20px, 3vw, 46px);
align-items: center; padding: clamp(26px, 4vw, 52px);
}
.kg-expx__eyebrow {
display: inline-flex; align-items: center;
font-family: var(--kg-font-display); font-weight: 800;
font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--kg-navy); background: var(--acc);
padding: 7px 15px; border-radius: 999px;
box-shadow: 0 6px 16px color-mix(in srgb, var(--acc) 40%, transparent);
}
.kg-expx__title { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; margin: 16px 0 12px; color: #fff; }
.kg-expx__lede { color: rgba(255, 255, 255, .82); font-size: clamp(1rem, 1.4vw, 1.15rem); margin: 0; max-width: 24em; }
/* Frosted topic chips, staggered reveal on every tab open */
.kg-expx__topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kg-expx__topics li {
display: flex; align-items: flex-start; gap: 11px;
background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border-radius: 16px; padding: 13px 15px;
opacity: 0; transform: translateY(14px);
animation: kg-expx-pop .5s var(--kg-ease-out) forwards;
animation-delay: calc(var(--i) * 70ms + 120ms);
transition: transform 200ms var(--kg-ease-pop), background-color 200ms, border-color 200ms;
}
.kg-expx__topics li:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .14); border-color: color-mix(in srgb, var(--acc) 60%, transparent); }
@keyframes kg-expx-pop { to { opacity: 1; transform: none; } }
.kg-expx__topic-ic {
flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
background: var(--acc); color: #fff; margin-top: 1px;
box-shadow: 0 4px 10px color-mix(in srgb, var(--acc) 45%, transparent);
}
.kg-expx__topic-txt { display: grid; gap: 2px; line-height: 1.25; }
.kg-expx__topic-txt strong { font-family: var(--kg-font-display); font-weight: 800; font-size: .98rem; color: #fff; }
.kg-expx__topic-txt small { font-size: .82rem; color: rgba(255, 255, 255, .72); }
@media (max-width: 860px) {
.kg-expx__inner { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); }
.kg-expx__panel { min-height: 0; }
}
@media (max-width: 520px) {
.kg-expx__topics { grid-template-columns: 1fr; }
.kg-expx__tab { font-size: .95rem; padding: 10px 16px 10px 11px; }
}
/* Placeholder visual */
.kg-placeholder {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
aspect-ratio: 4/3;
background: repeating-linear-gradient(45deg, var(--kg-cream-deep), var(--kg-cream-deep) 14px, var(--kg-cream) 14px, var(--kg-cream) 28px);
color: var(--kg-text-soft);
font-weight: 700; font-size: .95rem;
text-align: center; padding: 20px;
}
.kg-placeholder svg { opacity: .55; }
/* ---- AI loop section ---- */
.kg-ai { overflow: hidden; }
.kg-ai__loop {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(14px, 2vw, 24px);
position: relative;
margin-top: clamp(32px, 5vw, 56px);
}
.kg-ai__node {
background: var(--kg-navy-soft);
border-radius: var(--kg-r-lg);
padding: clamp(20px, 2.6vw, 30px);
position: relative;
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-md);
}
.kg-ai__node h3 { font-size: 1.15rem; margin-bottom: .35em; }
.kg-ai__node p { color: var(--kg-text-on-dark-soft); font-size: .95rem; margin: 0; }
.kg-ai__num {
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 50%;
font-family: var(--kg-font-display); font-weight: 800; font-size: 1.1rem;
margin-bottom: 14px;
}
.kg-ai__arrow {
position: absolute; top: 50%; right: -22px;
transform: translateY(-50%);
color: var(--kg-amber); z-index: 2;
}
.kg-ai__demo {
margin-top: clamp(36px, 5vw, 56px);
background: var(--kg-navy-deep);
border-radius: var(--kg-r-lg);
padding: clamp(22px, 3.5vw, 40px);
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-lg);
}
.kg-ai__demo-q {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
justify-content: space-between;
}
.kg-ai__demo-q p { font-family: var(--kg-font-display); font-size: 1.2rem; margin: 0; color: #fff; }
.kg-ai__demo-buttons { display: flex; gap: 10px; }
.kg-ai__demo-buttons button {
font-family: var(--kg-font-display); font-weight: 700; font-size: 1rem;
border: 0; border-radius: 14px; cursor: pointer;
padding: 12px 26px;
background: var(--kg-navy-soft); color: #fff;
box-shadow: var(--kg-clay-inset-dark), 0 4px 0 rgba(0, 0, 0, .3);
transition: transform 180ms var(--kg-ease-pop), background-color 160ms;
min-height: 44px;
}
.kg-ai__demo-buttons button:hover { background: #34495E; transform: translateY(-2px); }
.kg-ai__demo-buttons button:active { transform: scale(.95) translateY(2px); }
.kg-ai__demo-result {
margin-top: 18px;
border-radius: var(--kg-r-md);
padding: 18px 20px;
font-weight: 600;
display: none;
animation: kg-fade-in 320ms var(--kg-ease-out);
}
.kg-ai__demo-result.is-correct { display: block; background: rgba(42, 191, 191, .16); color: #9BE8E8; }
.kg-ai__demo-result.is-wrong { display: block; background: rgba(245, 166, 35, .14); color: #FBD89B; }
/* ---- Dashboard preview ---- */
.kg-dash {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(28px, 5vw, 64px);
align-items: center;
}
.kg-dash__shot {
border-radius: var(--kg-r-lg);
overflow: hidden;
box-shadow: var(--kg-shadow-lg);
background: var(--kg-white);
position: relative;
}
.kg-dash__shot a { display: block; transition: opacity 0.2s ease; }
.kg-dash__shot a:hover { opacity: 0.88; }
.kg-dash__features { list-style: none; display: grid; gap: 16px; }
.kg-dash__features li {
display: flex; gap: 14px; align-items: flex-start;
background: var(--kg-white);
border-radius: var(--kg-r-md);
padding: 16px 18px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kg-dash__features li:hover {
transform: translateY(-3px);
box-shadow: var(--kg-clay-inset), 0 6px 20px rgba(0,0,0,0.10);
}
.kg-dash__features strong { display: block; color: var(--kg-navy); font-family: var(--kg-font-display); }
.kg-dash__features span { color: var(--kg-text-soft); font-size: .94rem; }
.kg-dash__pt-icon {
width: 44px; height: 44px;
border-radius: 12px;
flex: none; margin-bottom: 0; align-self: center;
}
.kg-dash__pt-icon svg { width: 20px; height: 20px; }
/* ---- "See everything. Miss nothing." watch treatment ----
The dashboard shot becomes an always-on window (title bar + live
indicator + watchful-eye badge); the feature rows hang off a monitoring
rail whose dots pulse in turn — everything watched, nothing missed. */
.kg-watch__frame { overflow: visible; }
.kg-watch__frame > a { overflow: hidden; border-radius: 0 0 var(--kg-r-lg) var(--kg-r-lg); }
.kg-watch__bar {
display: flex; align-items: center; gap: 7px;
padding: 13px 16px;
background: var(--kg-navy);
border-radius: var(--kg-r-lg) var(--kg-r-lg) 0 0;
}
.kg-watch__windot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.kg-watch__live {
position: relative;
margin-left: auto;
width: 9px; height: 9px; border-radius: 50%;
background: var(--kg-red);
}
.kg-watch__live::after {
content: ""; position: absolute; inset: -3px;
border-radius: 50%; border: 2px solid var(--kg-red);
animation: kg-watch-pulse 2.2s ease-out infinite;
}
.kg-watch__eye {
position: absolute; right: -14px; bottom: -14px;
width: 52px; height: 52px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--kg-amber); color: var(--kg-navy);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md);
transform: rotate(-8deg);
}
.kg-watch__list { position: relative; padding-left: 30px; }
.kg-watch__list::before {
content: "";
position: absolute; left: 8px; top: 30px; bottom: 30px;
border-left: 2px dotted rgba(42, 191, 191, .45);
}
.kg-watch__list li { position: relative; }
.kg-watch__ping {
position: absolute; left: -26px; top: 50%;
width: 10px; height: 10px; margin-top: -5px;
border-radius: 50%;
background: var(--kg-teal);
}
.kg-watch__ping::after {
content: ""; position: absolute; inset: -4px;
border-radius: 50%; border: 2px solid var(--kg-teal);
animation: kg-watch-pulse 3.2s ease-out infinite;
/* Reuse each row's reveal delay so the dots pulse in sequence down the rail. */
animation-delay: var(--kg-delay, 0ms);
}
@keyframes kg-watch-pulse {
0% { transform: scale(.6); opacity: .9; }
60% { transform: scale(1.9); opacity: 0; }
100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.kg-watch__live::after, .kg-watch__ping::after { animation: none; opacity: 0; }
}
/* ---- Parent dashboard tour (live annotated mock) ---- */
.kg-tour { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.kg-tour__stage { position: relative; }
@keyframes kg-tour-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.kg-tour__frame {
position: relative; z-index: 1;
background: var(--kg-white);
border-radius: var(--kg-r-lg);
box-shadow: var(--kg-shadow-lg);
animation: kg-tour-float 7s ease-in-out infinite;
}
.kg-tour__bar {
display: flex; align-items: center; gap: 7px;
padding: 13px 18px;
background: var(--kg-cream-deep);
border-radius: var(--kg-r-lg) var(--kg-r-lg) 0 0;
}
.kg-tour__dot { width: 11px; height: 11px; border-radius: 50%; }
.kg-tour__dot--r { background: var(--kg-red); }
.kg-tour__dot--a { background: var(--kg-amber); }
.kg-tour__dot--t { background: var(--kg-teal); }
.kg-tour__barlabel {
margin-left: 10px; font-family: var(--kg-font-display); font-weight: 700;
font-size: .82rem; color: var(--kg-text-soft);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Real dashboard screenshot + absolutely-positioned annotation zones */
.kg-tour__shot { position: relative; line-height: 0; }
.kg-tour__img {
width: 100%; height: auto; display: block;
border-radius: 0 0 var(--kg-r-lg) var(--kg-r-lg);
}
.kg-tour__zone {
position: absolute;
margin: 0; padding: 0; background: transparent; border: 0;
border-radius: 10px;
outline: 2px solid transparent; outline-offset: 0;
cursor: pointer;
transition: outline-color .25s ease, box-shadow .25s ease, background-color .25s ease, opacity .25s ease;
}
.kg-tour__zone.is-active {
outline-color: var(--kg-amber);
box-shadow: 0 0 0 2px rgba(245, 166, 35, .25);
background: rgba(245, 166, 35, .1);
}
.kg-tour__zone:focus-visible { outline-color: var(--kg-amber); }
.kg-tour__stage.has-active .kg-tour__zone:not(.is-active) { opacity: .5; }
.kg-tour__pin {
position: absolute; top: -13px; left: -13px; z-index: 4;
width: 28px; height: 28px; border-radius: 50%;
display: grid; place-items: center;
background: var(--kg-white); color: var(--kg-amber-deep);
border: 2px solid var(--kg-amber);
font-family: var(--kg-font-display); font-weight: 700; font-size: .82rem; line-height: 1;
box-shadow: var(--kg-shadow-sm); cursor: pointer;
transition: transform .15s ease, background .2s ease, color .2s ease;
}
.kg-tour__pin:hover { transform: scale(1.12); }
@keyframes kg-pin-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 166, 35, .5); } 100% { box-shadow: 0 0 0 13px rgba(245, 166, 35, 0); } }
.kg-tour__pin.is-active { background: var(--kg-amber); color: var(--kg-navy); animation: kg-pin-pulse 1.6s ease-out infinite; }
.kg-tour__blob { position: absolute; z-index: 0; border-radius: 50%; opacity: .5; }
.kg-tour__blob--1 { width: 120px; height: 120px; background: var(--kg-teal-soft); top: -34px; right: -30px; animation: kg-tour-float 9s ease-in-out infinite; }
.kg-tour__blob--2 { width: 90px; height: 90px; background: var(--kg-amber-soft); bottom: -28px; left: -26px; animation: kg-tour-float 8s ease-in-out infinite reverse; }
/* Linked explanation cards */
.kg-tour__list { display: grid; gap: 12px; }
.kg-tour__item { background: var(--kg-white); border-radius: var(--kg-r-md); box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm); overflow: hidden; transition: box-shadow .2s ease; }
.kg-tour__item.is-active { box-shadow: var(--kg-clay-inset), var(--kg-shadow-md); }
.kg-tour__head {
width: 100%; display: flex; align-items: center; gap: 13px;
padding: 15px 18px; background: none; border: 0; font: inherit;
color: var(--kg-navy); cursor: pointer; text-align: left;
}
.kg-tour__index {
flex: none; width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center;
background: var(--kg-amber-soft); color: var(--kg-amber-deep);
font-family: var(--kg-font-display); font-weight: 700; font-size: .9rem;
transition: background .2s ease, color .2s ease;
}
.kg-tour__item.is-active .kg-tour__index { background: var(--kg-amber); color: var(--kg-navy); }
.kg-tour__title { font-family: var(--kg-font-display); font-weight: 700; font-size: 1.02rem; }
.kg-tour__plus { margin-left: auto; flex: none; color: var(--kg-text-soft); transition: transform .25s ease; }
.kg-tour__item.is-active .kg-tour__plus { transform: rotate(45deg); color: var(--kg-amber-deep); }
.kg-tour__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.kg-tour__item.is-active .kg-tour__panel { grid-template-rows: 1fr; }
.kg-tour__panel > div { overflow: hidden; }
.kg-tour__panel p { margin: 0; padding: 0 18px 16px 61px; color: var(--kg-text-soft); }
/* Sixth card: flips the whole view (Activity <-> Performance) */
.kg-tour__toggle {
width: 100%; display: flex; align-items: center; gap: 13px;
padding: 15px 18px; font: inherit; text-align: left; cursor: pointer;
color: var(--kg-navy);
border: 1.5px dashed var(--kg-amber);
background: var(--kg-amber-soft);
}
.kg-tour__toggle:hover { background: rgba(245, 166, 35, .22); }
.kg-tour__index--swap { background: var(--kg-amber); color: var(--kg-navy); }
.kg-tour__toggle-copy { display: grid; gap: 2px; }
.kg-tour__toggle-sub { font-size: .88rem; font-weight: 600; color: var(--kg-text-soft); }
.kg-tour__toggle-arrow { margin-left: auto; flex: none; color: var(--kg-amber-deep); transition: transform .25s ease; }
.kg-tour__toggle:hover .kg-tour__toggle-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.kg-tour__frame, .kg-tour__blob, .kg-tour__pin.is-active { animation: none; }
}
@media (max-width: 980px) {
.kg-tour { grid-template-columns: 1fr; gap: 32px; }
.kg-tour__blob { display: none; }
}
@media (max-width: 640px) {
.kg-tour__panel p { padding-left: 18px; }
}
/* ---- Rewards ---- */
.kg-rewards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.kg-rewards__map { grid-column: 1 / -1; border-radius: var(--kg-r-lg); overflow: hidden; box-shadow: var(--kg-clay-inset), var(--kg-shadow-md); position: relative; }
.kg-rewards__map img { width: 100%; object-fit: cover; max-height: 420px; }
.kg-rewards__map figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
background: linear-gradient(transparent, rgba(20, 32, 44, .88));
color: #fff; padding: 40px 24px 18px;
font-weight: 700;
}
/* ---- Rewards as an immersive "world" band (map sits behind the cards) ---- */
.kg-rewards--world { position: relative; overflow: hidden; isolation: isolate; color: var(--kg-text-on-dark); }
.kg-rewards__bg {
position: absolute; inset: 0; z-index: -2;
background-size: cover; background-position: center;
transform: scale(1.04);
animation: kg-rewards-pan 32s ease-in-out infinite alternate;
}
@keyframes kg-rewards-pan { from { transform: scale(1.04); } to { transform: scale(1.12) translateY(-1.5%); } }
.kg-rewards__overlay {
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(1200px 500px at 50% -10%, rgba(42, 191, 191, .28), transparent 60%),
linear-gradient(180deg, rgba(20, 32, 44, .9), rgba(20, 32, 44, .82) 55%, rgba(20, 32, 44, .9));
}
.kg-rewards--world .kg-h2 { color: #fff; }
.kg-rewards--world .kg-lede { color: var(--kg-text-on-dark-soft); }
.kg-rewards--world .kg-kicker { background: var(--kg-navy-soft); color: var(--kg-amber); box-shadow: var(--kg-clay-inset-dark); }
.kg-rewards__grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.kg-rewards__grid3 .kg-card {
color: var(--kg-text);
transition: transform .28s var(--kg-ease-pop), box-shadow .28s var(--kg-ease-out), background-color .2s;
position: relative; overflow: hidden;
}
.kg-rewards__grid3 .kg-card .kg-h3 { color: var(--kg-navy); transition: color .2s; }
/* Sheen sweep on hover */
.kg-rewards__grid3 .kg-card::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
transform: translateX(-120%); pointer-events: none;
transition: transform .55s var(--kg-ease-out);
}
.kg-rewards__grid3 .kg-card:hover { transform: translateY(-12px) scale(1.03); box-shadow: var(--kg-clay-inset), 0 24px 48px rgba(0,0,0,.22), 0 0 0 2px rgba(255,255,255,.5); }
.kg-rewards__grid3 .kg-card:hover::after { transform: translateX(120%); }
.kg-rewards__grid3 .kg-card:hover .kg-h3 { color: var(--kg-navy); }
/* Icon bubble bounces up on card hover */
.kg-rewards__grid3 .kg-card .kg-bubble { transition: transform .32s var(--kg-ease-pop); display: inline-grid; }
.kg-rewards__grid3 .kg-card:hover .kg-bubble { transform: translateY(-6px) scale(1.18); }
.kg-rewards__caption { text-align: center; color: var(--kg-text-on-dark-soft); font-weight: 600; margin: clamp(22px, 3vw, 32px) 0 0; }
/* ---- Podium treatment ----
Slots stagger like a podium (2nd | 1st | 3rd); the crown belongs to the
raised centre card; the sheen-swept cards keep overflow:hidden, so the crown
lives on the slot wrapper.
The step is padding on a stretched slot, not a margin on an auto-height one.
With margins the cards kept their content heights, so unequal copy lengths
left the bottom edges ragged. Padding the stretched slot and letting the card
fill it puts all three on one floor, with only the tops stepped. */
.kg-podium { align-items: stretch; }
.kg-podium__slot { position: relative; display: flex; flex-direction: column; }
.kg-podium__slot > .kg-card { flex: 1; }
.kg-podium__slot:nth-child(1) { padding-top: 30px; }
.kg-podium__slot:nth-child(3) { padding-top: 48px; }
.kg-podium__slot--first .kg-card {
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md), 0 0 34px rgba(245, 166, 35, .3);
}
.kg-podium__crown {
position: absolute; top: 0; left: 50%; z-index: 2;
transform: translate(-50%, -52%) rotate(-8deg);
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
pointer-events: none;
}
/* Medal rosette: ribbon tails tucked behind each icon bubble. */
.kg-medal { position: relative; display: inline-grid; isolation: isolate; }
.kg-medal::before, .kg-medal::after {
content: "";
position: absolute; top: 58%; left: 50%; z-index: -1;
width: 13px; height: 26px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.kg-medal::before { transform: translateX(-115%) rotate(16deg); }
.kg-medal::after { transform: translateX(15%) rotate(-16deg); }
.kg-medal--amber::before, .kg-medal--amber::after { background: var(--kg-amber); }
.kg-medal--teal::before, .kg-medal--teal::after { background: var(--kg-teal); }
.kg-medal--red::before, .kg-medal--red::after { background: var(--kg-red); }
.kg-medal .kg-bubble { box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), var(--kg-shadow-sm); }
/* Tokens drifting over the world map, behind the podium. */
.kg-rewards__coins { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kg-coin {
position: absolute;
opacity: .85;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
animation: kg-coin-drift 7s ease-in-out infinite;
}
.kg-coin--1 { width: 40px; left: 6%; top: 20%; }
.kg-coin--2 { width: 26px; left: 91%; top: 14%; animation-delay: 1.2s; animation-duration: 8.5s; }
.kg-coin--3 { width: 32px; left: 13%; bottom: 16%; animation-delay: 2.4s; animation-duration: 6.5s; }
.kg-coin--4 { width: 46px; left: 85%; bottom: 22%; animation-delay: .7s; animation-duration: 9s; }
.kg-coin--5 { width: 22px; left: 48%; top: 9%; animation-delay: 3.1s; animation-duration: 7.5s; }
@keyframes kg-coin-drift {
0%, 100% { transform: translateY(0) rotate(-9deg); }
50% { transform: translateY(-14px) rotate(9deg); }
}
@media (max-width: 680px) {
.kg-rewards__grid3 { grid-template-columns: 1fr; }
.kg-podium__slot:nth-child(1), .kg-podium__slot:nth-child(3) { padding-top: 0; }
.kg-podium__slot--first { order: -1; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.kg-rewards__grid3 .kg-card:hover { transform: translateY(-6px); }
.kg-rewards__grid3 .kg-card:hover .kg-bubble { transform: none; }
.kg-rewards__grid3 .kg-card::after { display: none; }
.kg-coin { animation: none; }
}
/* ---- Testimonials carousel ---- */
.kg-carousel { position: relative; }
.kg-carousel__track {
display: flex; gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 6px 6px 22px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.kg-carousel__track::-webkit-scrollbar { display: none; }
.kg-carousel__slide {
flex: 0 0 min(420px, 86%);
scroll-snap-align: center;
}
.kg-testimonial { height: 100%; display: flex; flex-direction: column; }
.kg-testimonial__quote { font-size: 1.05rem; flex: 1; }
.kg-testimonial__who { display: flex; align-items: center; gap: 13px; margin-top: 18px; }
.kg-testimonial__avatar {
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--kg-font-display); font-weight: 800; color: #fff;
}
.kg-testimonial__who strong { display: block; color: var(--kg-navy); }
.kg-testimonial__who small { color: var(--kg-text-soft); }
.kg-testimonial--placeholder { position: relative; }
.kg-testimonial__flag {
position: absolute; top: 16px; right: 16px;
font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
background: var(--kg-cream-deep); color: var(--kg-text-soft);
border-radius: 999px; padding: 4px 12px;
}
.kg-carousel__nav { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.kg-carousel__btn {
width: 48px; height: 48px; border-radius: 50%;
border: 0; cursor: pointer;
background: var(--kg-white); color: var(--kg-navy);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
display: flex; align-items: center; justify-content: center;
transition: transform var(--kg-dur) var(--kg-ease-pop), background-color 160ms;
}
.kg-carousel__btn:hover { transform: translateY(-2px); background: var(--kg-amber-soft); }
.kg-carousel__btn:active { transform: scale(.92); }
/* Continuous auto-scrolling marquee (testimonials). Slides are cloned in JS
for a seamless loop; --kg-marquee-shift/-dur are set there for steady speed.
Pauses on hover, focus, or press so the reader can stop on any card. */
.kg-carousel--marquee.kg-marquee-on {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.kg-carousel--marquee.kg-marquee-on .kg-carousel__track {
width: max-content;
overflow: visible;
scroll-snap-type: none;
padding-inline: 0;
animation: kg-marquee var(--kg-marquee-dur, 40s) linear infinite;
will-change: transform;
}
.kg-carousel--marquee.kg-marquee-on .kg-carousel__slide {
flex-basis: min(380px, 80vw);
scroll-snap-align: none;
}
.kg-carousel--marquee.kg-marquee-on:hover .kg-carousel__track,
.kg-carousel--marquee.kg-marquee-on:focus-within .kg-carousel__track,
.kg-carousel--marquee.kg-marquee-on:active .kg-carousel__track {
animation-play-state: paused;
}
@keyframes kg-marquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-1 * var(--kg-marquee-shift, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
.kg-carousel--marquee.kg-marquee-on .kg-carousel__track { animation: none; }
}
/* ---- Pricing summary (home) & pricing page ---- */
.kg-price-toggle {
display: inline-flex; align-items: center; gap: 4px;
background: var(--kg-white);
border-radius: 999px; padding: 5px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
margin-bottom: clamp(28px, 4vw, 40px);
}
.kg-price-toggle button {
font-family: var(--kg-font-display); font-weight: 700; font-size: .98rem;
border: 0; border-radius: 999px; cursor: pointer;
padding: 11px 26px;
background: transparent; color: var(--kg-text);
transition: background-color 200ms, color 200ms;
min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
white-space: nowrap;
}
.kg-price-toggle button[aria-pressed="true"] { background: var(--kg-navy); color: #fff; }
.kg-price-toggle .kg-save-pill {
background: var(--kg-teal-soft); color: var(--kg-teal-deep);
font-size: .78rem; font-weight: 800;
border-radius: 999px; padding: 3px 10px; margin-left: 7px;
white-space: nowrap;
}
.kg-price-toggle button[aria-pressed="true"] .kg-save-pill { background: var(--kg-teal); color: #fff; }
/* Compact variant used inside the builder summary card */
.kg-price-toggle--compact {
margin-bottom: 16px;
background: rgba(255,255,255,0.08);
box-shadow: none;
border: 1px solid rgba(255,255,255,0.15);
width: 100%;
justify-content: center;
}
.kg-price-toggle--compact button {
font-size: .85rem; padding: 7px 14px; min-height: 32px; flex: 1;
color: rgba(255,255,255,0.7);
display: inline-flex; align-items: center; justify-content: center;
white-space: nowrap;
}
.kg-price-toggle--compact button[aria-pressed="true"] { background: rgba(255,255,255,0.18); color: #fff; }
.kg-price-toggle--compact .kg-save-pill { font-size: .68rem; padding: 2px 7px; margin-left: 5px; white-space: nowrap; }
/* Term subtitle under the toggle in prepaid markets ("One school year").
Pulled up into the toggle's own bottom margin so the block keeps the same
overall height as the recurring layout. */
.kg-toggle-sub {
margin: -26px 0 clamp(26px, 4vw, 38px);
font-size: .9rem; font-weight: 600;
color: var(--kg-text-soft);
}
.kg-toggle-sub[hidden] { display: none; }
.kg-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); max-width: 880px; margin-inline: auto; }
.kg-plan { position: relative; display: flex; flex-direction: column; }
/* Once revealed, retake the transition from the reveal system (600ms + stagger
delay) so the hover lift answers instantly. */
.kg-plan.is-in {
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur) var(--kg-ease-out);
transition-delay: 0ms;
}
.kg-plan:hover {
transform: translateY(-6px);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-lg), 0 26px 46px -18px color-mix(in srgb, var(--kg-teal) 55%, transparent);
}
/* Ghosted subject count in the corner, echoing the sponsor option cards */
.kg-plan::after {
position: absolute; top: 18px; right: 24px;
font-family: var(--kg-font-display); font-weight: 800; font-size: 3.4rem; line-height: 1;
pointer-events: none; user-select: none;
}
.kg-plan:not(.kg-plan--featured)::after { content: "1"; color: var(--kg-teal-deep); opacity: .12; }
.kg-plan--featured::after { content: "2"; color: var(--kg-amber); opacity: .18; }
/* Featured card: navy depth gradient inside an amber→red→teal border ring */
.kg-plan--featured {
color: var(--kg-text-on-dark);
border: 2px solid transparent;
background:
linear-gradient(165deg, var(--kg-navy-soft) -20%, var(--kg-navy) 38%, var(--kg-navy-deep)) padding-box,
linear-gradient(140deg, var(--kg-amber), var(--kg-red) 38%, var(--kg-teal) 85%) border-box;
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-lg);
}
/* Soft brand glows in the featured card's corners */
.kg-plan--featured::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background:
radial-gradient(58% 44% at 84% -6%, rgba(245, 166, 35, .24), transparent 70%),
radial-gradient(52% 42% at -8% 106%, rgba(42, 191, 191, .22), transparent 70%);
}
.kg-plan--featured:hover {
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-lg), 0 28px 50px -16px color-mix(in srgb, var(--kg-amber) 50%, transparent);
}
.kg-plan--featured h3, .kg-plan--featured .kg-h3 { color: #fff; }
.kg-plan__flag {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
background: linear-gradient(110deg, var(--kg-amber-deep), var(--kg-amber) 45%, #FFC145);
color: var(--kg-navy);
font-family: var(--kg-font-display); font-weight: 800; font-size: .8rem;
letter-spacing: .06em; text-transform: uppercase;
border-radius: 999px; padding: 6px 18px;
box-shadow: 0 3px 0 var(--kg-amber-deep), var(--kg-shadow-sm);
white-space: nowrap;
overflow: hidden;
}
/* Periodic shine sweeping across the flag */
.kg-plan__flag::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .55) 50%, transparent 68%);
transform: translateX(-130%);
animation: kg-flag-shine 3.4s var(--kg-ease-out) 1.2s infinite;
}
@keyframes kg-flag-shine {
0%, 55% { transform: translateX(-130%); }
85%, 100% { transform: translateX(130%); }
}
.kg-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 0; margin: 10px 0 2px; }
.kg-plan__save {
order: 3; margin-left: auto; align-self: center;
background: var(--kg-teal-soft); color: var(--kg-teal-deep);
font-family: var(--kg-font-display); font-weight: 800; font-size: .8rem;
border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.kg-plan--featured .kg-plan__save { background: var(--kg-teal); color: #fff; }
.kg-plan__save[hidden] { display: none; }
/* Visible, labelled reference price that substantiates the two-subject saving. */
.kg-plan__was {
order: -1; flex-basis: 100%;
margin: 0 0 1px; font-size: .82rem; font-weight: 600;
color: var(--kg-text-soft);
}
.kg-plan--featured .kg-plan__was { color: var(--kg-text-on-dark-soft); }
.kg-plan__was s { color: var(--kg-teal-deep); opacity: 1; }
.kg-plan--featured .kg-plan__was s { color: var(--kg-teal); }
/* Invisible spacer on the One subject card so its price lines up with the
Two subjects card, which has the reference price line above the amount. */
.kg-plan__was--ghost { visibility: hidden; }
.kg-plan__amount {
font-family: var(--kg-font-display); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; color: var(--kg-navy); line-height: 1;
display: inline-block; transform-origin: left bottom;
transition: transform var(--kg-dur) var(--kg-ease-pop);
}
.kg-plan:hover .kg-plan__amount { transform: scale(1.06) rotate(-1.5deg); }
.kg-plan--featured .kg-plan__amount {
color: var(--kg-amber);
background: linear-gradient(100deg, #FFD37A, var(--kg-amber) 45%, #F08A00);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.kg-plan__per { color: var(--kg-text-soft); font-weight: 600; }
.kg-plan--featured .kg-plan__per { color: var(--kg-text-on-dark-soft); }
[data-kg-billing-note] { font-size: 0.78rem; font-weight: 500; margin: -4px 0 0; }
/* Keep the note's line reserved in both modes so toggling causes no layout shift. */
[data-kg-billing-note][hidden] { display: block; visibility: hidden; }
.kg-plan__strike { text-decoration: line-through; opacity: .6; font-weight: 600; }
.kg-plan__list { list-style: none; display: grid; gap: 10px; margin: 18px 0 24px; flex: 1; }
.kg-plan__list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: .97rem; }
/* Features cascade in after the card itself reveals */
.kg-plan[data-kg-reveal] .kg-plan__list li {
opacity: 0; transform: translateX(-10px);
transition: opacity 420ms var(--kg-ease-out), transform 420ms var(--kg-ease-out);
}
.kg-plan[data-kg-reveal].is-in .kg-plan__list li { opacity: 1; transform: none; }
.kg-plan[data-kg-reveal].is-in .kg-plan__list li:nth-child(1) { transition-delay: 260ms; }
.kg-plan[data-kg-reveal].is-in .kg-plan__list li:nth-child(2) { transition-delay: 330ms; }
.kg-plan[data-kg-reveal].is-in .kg-plan__list li:nth-child(3) { transition-delay: 400ms; }
.kg-plan[data-kg-reveal].is-in .kg-plan__list li:nth-child(4) { transition-delay: 470ms; }
.kg-plan[data-kg-reveal].is-in .kg-plan__list li:nth-child(5) { transition-delay: 540ms; }
.kg-plan[data-kg-reveal].is-in .kg-plan__list li:nth-child(6) { transition-delay: 610ms; }
/* Check ticks sit in soft round chips */
.kg-plan__list svg {
flex: none; width: 21px; height: 21px; padding: 4px; margin-top: 2px;
border-radius: 50%;
background: var(--kg-teal-soft); color: var(--kg-teal-deep);
}
.kg-plan--featured .kg-plan__list svg { background: rgba(42, 191, 191, .22); color: #6FDCDC; }
@media (prefers-reduced-motion: reduce) {
.kg-plan:hover { transform: none; }
.kg-plan:hover .kg-plan__amount { transform: none; }
.kg-plan__flag::after { animation: none; }
.kg-plan[data-kg-reveal] .kg-plan__list li { opacity: 1; transform: none; transition: none; }
}
/* Pricing builder */
.kg-builder {
max-width: 980px; margin-inline: auto;
display: grid; grid-template-columns: 1.5fr 1fr;
gap: clamp(20px, 3vw, 36px);
align-items: start;
}
.kg-builder__children { display: grid; gap: 16px; }
.kg-builder__child {
display: grid; gap: 12px;
background: var(--kg-white);
border-radius: var(--kg-r-md);
padding: 20px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
}
.kg-builder__child-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kg-builder__child-head strong { font-family: var(--kg-font-display); color: var(--kg-navy); font-size: 1.08rem; }
.kg-builder__remove {
border: 0; background: var(--kg-red-soft); color: var(--kg-red-deep);
border-radius: 999px; cursor: pointer;
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
transition: background-color 160ms, transform 180ms var(--kg-ease-pop);
}
.kg-builder__remove:hover { background: #F6C9C6; transform: scale(1.06); }
.kg-builder__subjects { display: flex; flex-wrap: wrap; gap: 8px; }
.kg-subject-pick {
font-family: var(--kg-font-display); font-weight: 700; font-size: .92rem;
border: 2.5px solid #E3E9EF; border-radius: 999px;
background: var(--kg-white); color: var(--kg-text);
padding: 9px 18px; cursor: pointer;
transition: border-color 160ms, background-color 160ms, color 160ms, transform 180ms var(--kg-ease-pop);
min-height: 44px;
}
.kg-subject-pick:hover { transform: translateY(-2px); }
.kg-subject-pick[aria-pressed="true"] { border-color: var(--kg-teal); background: var(--kg-teal-soft); color: var(--kg-teal-deep); }
.kg-builder__rate { font-size: .88rem; color: var(--kg-text-soft); font-weight: 600; }
.kg-builder__rate strong { color: var(--kg-navy); }
.kg-builder__add {
border: 2.5px dashed #CBD5DF;
background: transparent;
border-radius: var(--kg-r-md);
padding: 16px;
font-family: var(--kg-font-display); font-weight: 700; font-size: 1rem;
color: var(--kg-text-soft); cursor: pointer;
transition: border-color 160ms, color 160ms, background-color 160ms;
min-height: 44px;
}
.kg-builder__add:hover { border-color: var(--kg-teal); color: var(--kg-teal-deep); background: var(--kg-teal-soft); }
.kg-builder__add:disabled { opacity: .45; cursor: not-allowed; }
.kg-builder__summary {
position: sticky; top: 96px;
background: var(--kg-navy);
color: var(--kg-text-on-dark);
border-radius: var(--kg-r-lg);
padding: clamp(22px, 3vw, 32px);
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-lg);
}
.kg-builder__summary h3 { color: #fff; }
.kg-builder__rows { display: grid; gap: 10px; margin: 16px 0; }
.kg-builder__row { display: flex; justify-content: space-between; gap: 12px; font-size: .96rem; }
.kg-builder__row small { color: var(--kg-text-on-dark-soft); display: block; }
.kg-builder__row .kg-row-price { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kg-builder__total {
border-top: 2px dashed rgba(255, 255, 255, .2);
padding-top: 16px; margin-top: 6px;
display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.kg-builder__total > span:last-child {
display: flex; flex-direction: column; align-items: flex-end; text-align: right;
}
.kg-builder__total strong { font-family: var(--kg-font-display); font-size: 1.9rem; color: var(--kg-amber); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kg-builder__total span { font-weight: 700; }
.kg-builder__total [data-kg-builder-period] { white-space: nowrap; color: var(--kg-text-on-dark-soft); }
.kg-builder__year { font-size: .9rem; font-weight: 700; color: var(--kg-text-on-dark); text-align: right; margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.kg-builder__note { font-size: .85rem; color: var(--kg-text-on-dark-soft); margin: 12px 0 18px; }
/* One-time activation (small, above the total) + first-payment + tax note */
.kg-builder__activation {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
font-size: .82rem; color: var(--kg-text-on-dark-soft); margin-top: 2px;
}
.kg-builder__activation strong { font-weight: 700; }
.kg-builder__activation small { display: block; opacity: .75; font-size: .92em; }
.kg-builder__activation .kg-row-price { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kg-builder__activation[hidden] { display: none; }
.kg-builder__firstpay {
display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
margin-top: 12px; font-weight: 700; font-size: .95rem; color: var(--kg-text-on-dark);
}
.kg-builder__firstpay strong { font-family: var(--kg-font-display); color: #fff; font-variant-numeric: tabular-nums; }
/* "The first 30 days are free, then:" lead-in — carries the dashed divider so
it reads directly into the Total below it. */
.kg-builder__trial-lead {
border-top: 2px dashed rgba(255, 255, 255, .2);
padding-top: 15px; margin: 8px 0 0;
font-family: var(--kg-font-display); font-weight: 800; font-size: .82rem;
color: var(--kg-amber);
}
.kg-builder__trial-lead + .kg-builder__total { border-top: 0; padding-top: 2px; margin-top: 0; }
.kg-builder__note--tax { margin: 12px 0 6px; opacity: .85; }
/* Accepted payment rails, prepaid markets only. Surfaced beside the price
because "can I even pay for this?" is a live question where card
penetration is low. */
.kg-builder__paymethods {
margin-top: 16px; padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.15);
}
.kg-builder__paymethods-label {
display: block; margin-bottom: 8px;
font-size: .74rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
color: var(--kg-text-on-dark-soft);
}
.kg-builder__paymethods ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 6px;
}
.kg-builder__paymethods li {
font-size: .76rem; font-weight: 700;
padding: 4px 9px; border-radius: 999px;
background: rgba(255,255,255,0.12); color: #fff;
white-space: nowrap;
}
/* ---- Info tooltip ("?" bubble) ---- */
.kg-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.kg-tip__btn {
width: 18px; height: 18px; padding: 0;
border: 1.5px solid currentColor; border-radius: 50%;
background: transparent; color: inherit; opacity: .65;
font-family: var(--kg-font-display); font-weight: 800; font-size: .72rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: opacity 160ms, background-color 160ms, color 160ms;
}
.kg-tip__btn:hover, .kg-tip__btn:focus-visible { opacity: 1; }
.kg-tip__bubble {
position: absolute; bottom: calc(100% + 11px); left: 50%;
transform: translateX(-50%) translateY(4px);
width: max-content; max-width: min(266px, 76vw);
background: var(--kg-white); color: var(--kg-text);
border-radius: 14px; padding: 12px 14px;
font-size: .82rem; font-weight: 500; line-height: 1.45; text-align: left;
box-shadow: var(--kg-shadow-lg);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 160ms, transform 160ms, visibility 160ms;
z-index: 30;
}
.kg-tip__bubble::after {
content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 7px solid transparent; border-top-color: var(--kg-white);
}
.kg-tip:hover .kg-tip__bubble,
.kg-tip__btn:focus-visible + .kg-tip__bubble,
.kg-tip.is-open .kg-tip__bubble {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.kg-tip__bubble { transition: none; }
}
.kg-pricing-disclaimer {
max-width: 980px;
margin: clamp(22px, 3vw, 32px) auto 0;
display: flex; gap: 12px; align-items: flex-start;
background: var(--kg-amber-soft);
border-radius: var(--kg-r-md);
padding: 18px 20px;
font-size: .95rem;
}
.kg-pricing-disclaimer svg { flex: none; color: var(--kg-amber-deep); margin-top: 2px; }
/* ---- Rewards page ----
Effort-based motivation: the token meter that fills on reveal, the
avatar studio awaiting real app art, and the milestone badges. */
/* The earning demo: three factor cards take turns "earning" — a token flies
from the live card into the jar, the jar fills, and at 60 tokens a reward
pops and the jar banks. Sequenced by main.js; the stage is the coin's
positioned ancestor. */
/* Two-column composition: the three factor cards stack on the left, the jar
is a hero on the right — so "three sources feeding one jar" reads
horizontally and coins fly card → jar across the row. */
.kg-earn {
position: relative;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(28px, 4vw, 56px);
align-items: center;
max-width: 980px; margin-inline: auto;
}
.kg-earn__cards { display: grid; gap: clamp(12px, 1.6vw, 16px); }
/* Rich horizontal factor card: bubble | copy | "+10" earn pill, with a
coloured left edge tying each card to its accent. */
.kg-earn__card {
--acc: var(--kg-amber);
display: grid; grid-template-columns: auto 1fr auto; align-items: center;
gap: clamp(14px, 1.6vw, 18px);
padding: 16px 18px;
background: var(--kg-white);
border-radius: var(--kg-r-md);
border-left: 5px solid var(--acc);
box-shadow: var(--kg-shadow-md);
text-align: left;
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur) var(--kg-ease-out), background var(--kg-dur) var(--kg-ease-out);
}
.kg-earn__card:nth-child(1) { --acc: var(--kg-amber); }
.kg-earn__card:nth-child(2) { --acc: var(--kg-teal); }
.kg-earn__card:nth-child(3) { --acc: var(--kg-red); }
.kg-earn__card .kg-bubble { margin: 0; width: 56px; height: 56px; }
.kg-earn__card-body h3 { margin: 0 0 2px; font-size: 1.08rem; }
.kg-earn__card-body p { margin: 0; font-size: .92rem; color: var(--kg-text-soft); line-height: 1.45; }
/* "+10" token pill — reinforces that each action earns tokens */
.kg-earn__card-earn {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px 5px 8px; border-radius: 999px;
background: var(--kg-amber-soft);
font-family: var(--kg-font-display); font-weight: 800; font-size: .9rem; color: var(--kg-amber-deep);
white-space: nowrap;
}
.kg-earn__card-earn svg { width: 18px; height: 18px; }
.kg-earn__card.is-live {
transform: translateX(8px);
background: color-mix(in srgb, var(--acc) 8%, white);
box-shadow: var(--kg-shadow-lg), 0 0 0 2px var(--acc);
}
.kg-earn__card.is-live .kg-bubble { animation: kg-earn-bounce .55s var(--kg-ease-pop); }
@media (max-width: 820px) {
.kg-earn { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 42px); }
.kg-earn__jarwrap { order: 2; }
}
@media (max-width: 420px) {
.kg-earn__card { grid-template-columns: auto 1fr; }
.kg-earn__card-earn { display: none; }
}
@keyframes kg-earn-bounce {
0%, 100% { transform: scale(1); }
40% { transform: scale(1.18) rotate(-8deg); }
70% { transform: scale(.96) rotate(4deg); }
}
/* The flying token: outer span moves on X, inner on Y with a "gravity"
bezier, tracing an arc between card and jar. */
.kg-earncoin {
position: absolute; z-index: 5;
width: 26px; height: 26px; margin: -13px 0 0 -13px;
pointer-events: none;
transition: transform .82s cubic-bezier(.4, 0, .6, 1);
}
.kg-earncoin i {
display: block; width: 100%; height: 100%;
transition: transform .82s cubic-bezier(.5, -0.45, .75, .55);
}
.kg-earncoin svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 8px rgba(245, 166, 35, .5)); }
/* The jar — the hero of the right column, sitting on a soft amber glow */
.kg-earn__jarwrap {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
}
.kg-earn__jarwrap::before {
content: ""; position: absolute; top: 44%; left: 50%; z-index: 0;
transform: translate(-50%, -50%);
width: min(300px, 92%); aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, rgba(245, 166, 35, .22) 0%, rgba(245, 166, 35, 0) 68%);
pointer-events: none;
}
.kg-earn__jar { position: relative; z-index: 1; display: inline-block; }
.kg-earnjar { display: block; width: clamp(150px, 15vw, 190px); height: auto; }
.kg-earnjar__fill { transition: y .45s var(--kg-ease-out), height .45s var(--kg-ease-out); }
.kg-earn__jar.is-catch .kg-earnjar { animation: kg-earn-catch .4s var(--kg-ease-pop); transform-origin: 50% 100%; }
@keyframes kg-earn-catch {
0%, 100% { transform: scale(1); }
40% { transform: scale(1.07, .92); }
}
.kg-earn__count {
position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 12px; border-radius: 999px;
background: var(--kg-white);
box-shadow: var(--kg-shadow-sm);
font-family: var(--kg-font-display); font-weight: 800; color: var(--kg-navy);
font-variant-numeric: tabular-nums;
}
/* "+10" floater rising off the jar mouth after each catch */
.kg-earnplus {
position: absolute; top: -6px; left: 50%;
font-family: var(--kg-font-display); font-weight: 800; color: var(--kg-amber-deep);
pointer-events: none;
animation: kg-earnplus-rise .9s var(--kg-ease-out) forwards;
}
@keyframes kg-earnplus-rise {
from { opacity: 0; transform: translate(-50%, 4px) scale(.8); }
25% { opacity: 1; }
to { opacity: 0; transform: translate(-50%, -30px) scale(1.15); }
}
/* Reward chip popping above the jar when it banks */
.kg-earn__unlock {
position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 6;
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 16px; border-radius: 999px;
background: var(--kg-amber); color: var(--kg-navy);
font-family: var(--kg-font-display); font-weight: 800; font-size: .92rem;
white-space: nowrap;
box-shadow: 0 4px 0 var(--kg-amber-deep), var(--kg-shadow-md);
animation: kg-earn-unlock .5s var(--kg-ease-pop);
translate: -50% 0;
}
.kg-earn__unlock em { font-style: normal; }
.kg-earn__unlock[hidden] { display: none; }
@keyframes kg-earn-unlock {
from { opacity: 0; transform: scale(.5) rotate(-6deg); }
to { opacity: 1; transform: none; }
}
.kg-earn__caption { position: relative; z-index: 1; margin: 12px 0 0; color: var(--kg-text-soft); font-weight: 700; font-size: .92rem; }
@media (prefers-reduced-motion: reduce) {
.kg-earn__card.is-live { transform: none; }
.kg-earn__card.is-live .kg-bubble { animation: none; }
}
/* "No child is punished for finding something hard" note */
.kg-earn-note {
display: flex; gap: 10px; align-items: flex-start; justify-content: center;
max-width: 640px; margin: clamp(22px, 3vw, 32px) auto 0;
padding: 14px 18px;
background: var(--kg-teal-soft); border-radius: var(--kg-r-md);
font-size: .95rem; font-weight: 600;
}
.kg-earn-note svg { flex: none; color: var(--kg-red); margin-top: 2px; }
/* ---- Tokens & the Store: the shop window ----
Navy night-market section. Left: a mock storefront card — striped awning
with a scalloped edge, live token balance, the store-map render as the
shop banner and three tappable items (main.js runs the buying demo).
Right: the copy and a coin-bulleted reassurance list. Oversized faint
coins drift behind the container; they hold still for reduced motion. */
.kg-storefront { position: relative; overflow: hidden; }
.kg-storefront .kg-container { position: relative; z-index: 1; }
.kg-storefront__coins { position: absolute; inset: 0; pointer-events: none; }
.kg-storefront__coins span { position: absolute; opacity: .09; animation: kg-coin-drift 8s ease-in-out infinite; }
.kg-storefront__coins svg { display: block; width: 100%; height: auto; }
.kg-storefront__coins span:nth-child(1) { width: 96px; top: 9%; left: 3%; }
.kg-storefront__coins span:nth-child(2) { width: 52px; top: 66%; left: 10%; animation-delay: -2.6s; }
.kg-storefront__coins span:nth-child(3) { width: 72px; top: 12%; right: 5%; animation-delay: -4.4s; }
.kg-storefront__coins span:nth-child(4) { width: 44px; top: 72%; right: 9%; animation-delay: -1.3s; }
@keyframes kg-coin-drift {
0%, 100% { transform: translateY(0) rotate(-9deg); }
50% { transform: translateY(-20px) rotate(9deg); }
}
/* The storefront card: a lit shop window against the navy night */
.kg-storecard {
background: var(--kg-white);
border-radius: var(--kg-r-lg);
box-shadow: 0 0 0 6px rgba(255, 255, 255, .07), var(--kg-shadow-lg);
overflow: hidden;
}
/* Striped awning; the ::after scallops share the 26px stripe rhythm so each
half-circle lands under its own stripe colour. */
.kg-storecard__awning {
position: relative; z-index: 2;
height: 24px;
background: repeating-linear-gradient(90deg, var(--kg-red) 0 26px, var(--kg-cream) 26px 52px);
}
.kg-storecard__awning::after {
content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 13px;
background:
radial-gradient(circle at 13px 0, var(--kg-red) 12px, rgba(0, 0, 0, 0) 13px) 0 0 / 52px 13px repeat-x,
radial-gradient(circle at 13px 0, var(--kg-cream) 12px, rgba(0, 0, 0, 0) 13px) 26px 0 / 52px 13px repeat-x;
filter: drop-shadow(0 2px 2px rgba(28, 43, 58, .12));
}
.kg-storecard__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 26px 18px 12px;
}
.kg-storecard__name { font-family: var(--kg-font-display); font-weight: 800; color: var(--kg-navy); font-size: 1.02rem; }
.kg-storecard__balance {
position: relative;
display: inline-flex; align-items: center; gap: 7px; flex: none;
padding: 5px 13px; border-radius: 999px;
background: var(--kg-amber-soft);
box-shadow: inset 0 0 0 2px rgba(217, 140, 0, .28);
font-family: var(--kg-font-display); font-weight: 800; color: var(--kg-navy);
font-variant-numeric: tabular-nums;
}
.kg-storecard__balance > svg { width: 18px; height: 18px; }
.kg-storecard__balance.is-tick { animation: kg-store-tick .45s var(--kg-ease-pop); }
@keyframes kg-store-tick {
0%, 100% { transform: scale(1); }
40% { transform: scale(1.14); }
}
/* "−25" floater rising off the balance after a purchase (mirrors kg-earnplus) */
.kg-storeminus {
position: absolute; left: 50%; bottom: calc(100% + 2px);
font-family: var(--kg-font-display); font-weight: 800; color: var(--kg-red);
pointer-events: none; white-space: nowrap;
animation: kg-earnplus-rise .9s var(--kg-ease-out) forwards;
}
.kg-storecard__banner { margin: 2px 14px 0; border-radius: var(--kg-r-md); overflow: hidden; }
.kg-storecard__banner img { display: block; width: 100%; height: auto; aspect-ratio: 1247 / 603; object-fit: contain; background: #0d2818; }
/* The shelf: three buyable items */
.kg-storecard__shelf {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px;
padding: 14px 14px 16px;
}
.kg-storecard__item {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 14px 6px 12px;
background: var(--kg-cream);
border: 2px solid rgba(28, 43, 58, .08); border-radius: var(--kg-r-md);
font: inherit; text-align: center; cursor: pointer;
transition: transform var(--kg-dur) var(--kg-ease-pop), border-color var(--kg-dur) var(--kg-ease-out), box-shadow var(--kg-dur) var(--kg-ease-out);
}
.kg-storecard__item:hover:not(.is-owned),
.kg-storecard__item:focus-visible:not(.is-owned) {
transform: translateY(-3px);
border-color: var(--kg-amber);
box-shadow: var(--kg-shadow-sm);
}
.kg-storecard__item small { font-weight: 700; color: var(--kg-navy); font-size: .8rem; line-height: 1.25; }
.kg-storecard__item-icon {
width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center;
}
.kg-storecard__item:nth-child(1) .kg-storecard__item-icon { background: var(--kg-amber-soft); color: var(--kg-amber-deep); }
.kg-storecard__item:nth-child(2) .kg-storecard__item-icon { background: var(--kg-teal-soft); color: var(--kg-teal-deep); }
.kg-storecard__item:nth-child(3) .kg-storecard__item-icon { background: var(--kg-red-soft); color: var(--kg-red); }
.kg-storecard__price {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 999px;
background: var(--kg-navy); color: #fff;
font-family: var(--kg-font-display); font-weight: 800; font-size: .8rem;
font-variant-numeric: tabular-nums;
}
.kg-storecard__price svg { width: 13px; height: 13px; }
.kg-storecard__owned {
display: none;
align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 999px;
background: var(--kg-green); color: #fff;
font-family: var(--kg-font-display); font-weight: 800; font-size: .8rem;
}
.kg-storecard__item.is-owned { cursor: default; border-color: var(--kg-green); background: #F1FAF3; }
.kg-storecard__item.is-owned .kg-storecard__price { display: none; }
.kg-storecard__item.is-owned .kg-storecard__owned { display: inline-flex; animation: kg-earn-unlock .5s var(--kg-ease-pop); }
.kg-storecard__item.is-owned .kg-storecard__item-icon { animation: kg-earn-bounce .55s var(--kg-ease-pop); }
.kg-storecard__hint {
margin: 14px 4px 0; text-align: center;
color: var(--kg-text-on-dark-soft); font-weight: 600; font-size: .92rem;
}
/* Coin-bulleted reassurance list (right column) */
.kg-storepts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 15px; }
.kg-storepts li {
display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 13px;
font-weight: 600; line-height: 1.5; color: var(--kg-text-on-dark);
}
.kg-storepts li > svg {
width: 28px; height: 28px; margin-top: -1px;
filter: drop-shadow(0 2px 6px rgba(245, 166, 35, .35));
}
@media (prefers-reduced-motion: reduce) {
.kg-storefront__coins span,
.kg-storecard__balance.is-tick,
.kg-storecard__item.is-owned .kg-storecard__owned,
.kg-storecard__item.is-owned .kg-storecard__item-icon { animation: none; }
.kg-storecard__item:hover:not(.is-owned),
.kg-storecard__item:focus-visible:not(.is-owned) { transform: none; }
}
@media (max-width: 560px) {
.kg-storefront__coins span:nth-child(1),
.kg-storefront__coins span:nth-child(3) { display: none; }
.kg-storecard__head { flex-wrap: wrap; }
}
/* WP-style visually-hidden utility (used by the store balance label) */
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%); overflow: hidden;
white-space: nowrap;
}
/* Keep a short phrase (e.g. the "7 × 8?" demo question) from breaking mid-line */
.kg-nowrap { white-space: nowrap; }
/* Avatar studio: stage + item slots, all clearly placeholder until real art */
.kg-avastudio {
display: grid; grid-template-columns: 1.05fr 0.95fr;
gap: clamp(24px, 3.4vw, 44px);
max-width: 1020px; margin-inline: auto;
align-items: stretch;
}
/* Stage: every dressed-up doll is stacked in the same spot and cross-faded,
so switching hats never reflows the layout or shows a loading flash.
The art is pre-trimmed to the character's bounding box, so sizing by
height keeps every outfit the same visual scale. */
.kg-avastudio__stage {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
background:
radial-gradient(120% 90% at 50% 108%, rgba(245, 166, 35, .22), transparent 55%),
linear-gradient(165deg, var(--kg-navy-soft) -20%, var(--kg-navy) 60%);
border-radius: var(--kg-arch);
padding: clamp(30px, 4vw, 48px) 20px clamp(22px, 3vw, 30px);
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-md);
min-height: clamp(340px, 38vw, 460px);
overflow: hidden;
}
/* Soft "spotlight" disc the avatar stands on */
.kg-avastudio__stage::before {
content: "";
position: absolute; left: 50%; bottom: clamp(58px, 7vw, 74px);
width: min(62%, 240px); height: 34px;
transform: translateX(-50%);
background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .38), transparent 70%);
border-radius: 50%;
}
.kg-avastudio__doll {
position: absolute;
left: 50%; bottom: clamp(64px, 8vw, 86px);
height: clamp(250px, 28vw, 350px); width: auto;
transform: translateX(-50%) scale(.92);
transform-origin: 50% 100%;
opacity: 0; visibility: hidden;
filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .35));
transition: opacity var(--kg-dur) ease, transform var(--kg-dur) var(--kg-ease-pop), visibility var(--kg-dur);
pointer-events: none;
}
.kg-avastudio__doll.is-on {
opacity: 1; visibility: visible;
transform: translateX(-50%) scale(1);
}
.kg-avastudio__ph {
position: relative; z-index: 1;
font-family: var(--kg-font-display); font-weight: 700; font-size: .88rem;
letter-spacing: .04em; text-transform: uppercase;
color: var(--kg-amber);
background: var(--kg-navy-soft);
border: 1.5px dashed rgba(245, 166, 35, .5);
border-radius: 999px; padding: 8px 20px;
text-align: center;
}
.kg-avastudio__slots {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: clamp(12px, 1.8vw, 20px);
align-content: center;
}
.kg-avastudio__slot {
display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
background: var(--kg-white);
border: 2px solid var(--kg-cream-deep);
border-radius: var(--kg-r-md);
padding: clamp(14px, 1.8vw, 20px) 12px;
box-shadow: var(--kg-shadow-sm);
font: inherit; cursor: pointer; text-align: center;
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur), border-color var(--kg-dur), background var(--kg-dur);
}
.kg-avastudio__slot:hover { transform: translateY(-4px); border-color: var(--kg-amber); box-shadow: var(--kg-shadow-md); }
.kg-avastudio__slot:hover .kg-avastudio__slot-box img { transform: scale(1.12) rotate(-4deg); }
.kg-avastudio__slot:focus-visible { outline: 3px solid var(--kg-amber); outline-offset: 3px; }
/* The chosen hat: solid amber edge + soft wash so the pick is obvious at a glance */
.kg-avastudio__slot.is-on {
border-color: var(--kg-amber);
background: var(--kg-amber-soft);
box-shadow: var(--kg-shadow-md);
}
.kg-avastudio__slot-box {
width: clamp(84px, 9vw, 116px); height: clamp(84px, 9vw, 116px);
display: grid; place-items: center;
color: var(--kg-amber-deep);
}
.kg-avastudio__slot-box img {
max-width: 100%; max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 8px rgba(28, 43, 77, .18));
transition: transform var(--kg-dur) var(--kg-ease-pop);
}
.kg-avastudio__slot-box svg { width: 54%; height: 54%; }
.kg-avastudio__slot small { font-family: var(--kg-font-display); font-weight: 700; font-size: .92rem; color: var(--kg-navy); }
.kg-avastudio__hint {
grid-column: 1 / -1;
margin: 6px 0 0; text-align: center;
font-size: .88rem; color: var(--kg-text-soft);
}
/* Milestone badges on the navy section */
.kg-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.kg-badge {
--acc: var(--kg-amber); --acc-deep: var(--kg-amber-deep);
text-align: center;
background: var(--kg-navy-soft);
border-radius: var(--kg-r-lg);
padding: clamp(20px, 2.4vw, 28px) 16px;
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-sm);
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur) var(--kg-ease-out);
}
.kg-badge:hover {
transform: translateY(-6px);
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-md), 0 0 0 2px color-mix(in srgb, var(--acc) 55%, transparent);
}
.kg-badge--teal { --acc: var(--kg-teal); --acc-deep: var(--kg-teal-deep); }
.kg-badge--red { --acc: var(--kg-red); --acc-deep: var(--kg-red-deep); }
.kg-badge--green { --acc: var(--kg-green); --acc-deep: var(--kg-green-deep); }
.kg-badge__medal {
position: relative;
width: 62px; height: 62px; margin-bottom: 22px;
display: inline-grid; place-items: center;
border-radius: 50%;
background: var(--acc); color: #fff;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 0 5px color-mix(in srgb, var(--acc) 30%, transparent);
transition: box-shadow var(--kg-dur) var(--kg-ease-out);
}
.kg-badge:hover .kg-badge__medal {
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 0 8px color-mix(in srgb, var(--acc) 42%, transparent);
animation: kg-badge-wobble .6s var(--kg-ease-pop);
}
@keyframes kg-badge-wobble {
0%, 100% { transform: rotate(0); }
30% { transform: rotate(-9deg) scale(1.06); }
65% { transform: rotate(6deg) scale(1.03); }
}
/* Ribbon tails under the medal */
.kg-badge__medal::before, .kg-badge__medal::after {
content: ""; position: absolute; top: 82%;
width: 13px; height: 26px;
background: var(--acc-deep);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}
.kg-badge__medal::before { left: 14px; transform: rotate(14deg); }
.kg-badge__medal::after { right: 14px; transform: rotate(-14deg); }
.kg-badge h3 { color: #fff; font-size: 1.05rem; margin: 0 0 4px; }
.kg-badge p { margin: 0; font-size: .88rem; color: var(--kg-text-on-dark-soft); }
@media (max-width: 900px) {
.kg-avastudio { grid-template-columns: 1fr; }
.kg-badges { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.kg-avastudio__slots { grid-template-columns: repeat(2, 1fr); }
.kg-badges { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
.kg-earnmeter__fill, .kg-earnmeter__coin { transition: none; }
.kg-avastudio__slot:hover { transform: none; }
.kg-badge:hover { transform: none; }
.kg-badge:hover .kg-badge__medal { animation: none; }
}
/* ---- Parent reassurance: the "safe zone" ----
The three reassurances sit inside an enclosed panel with a dashed "guarded
boundary" and a shield-check seal overlapping the top edge — the whole
thing reads as a protected space. A faint shield watermark sits behind,
and each icon lives in a shield-shaped badge in calming trust colours. */
.kg-guard__zone {
position: relative;
margin-top: clamp(34px, 4vw, 50px);
padding: clamp(44px, 5vw, 62px) clamp(20px, 3vw, 40px) clamp(28px, 3vw, 42px);
background: linear-gradient(168deg, var(--kg-teal-soft) 0%, #EAF9F1 100%);
border: 2px dashed color-mix(in srgb, var(--kg-teal) 48%, transparent);
border-radius: var(--kg-r-lg);
}
/* Clipping layer for the watermark — keeps the seal (a sibling) unclipped so
it can straddle the top border without being cut off. */
.kg-guard__bg {
position: absolute; inset: 0; z-index: 0;
border-radius: inherit; overflow: hidden; pointer-events: none;
}
/* Big faint shield watermark, bottom-right */
.kg-guard__watermark {
position: absolute; right: -34px; bottom: -46px; width: 230px;
color: var(--kg-teal); opacity: .07;
}
.kg-guard__watermark svg { display: block; width: 100%; height: auto; }
/* Shield-check seal overlapping the top border */
.kg-guard__seal {
position: absolute; top: 0; left: 50%; z-index: 2;
transform: translate(-50%, -50%);
width: 58px; height: 58px; display: grid; place-items: center;
border-radius: 50%;
background: linear-gradient(160deg, #46C06E 0%, var(--kg-green) 100%); color: #fff;
box-shadow: 0 0 0 6px var(--kg-cream), 0 8px 18px rgba(59, 165, 92, .38);
}
.kg-guard__grid {
position: relative; z-index: 1;
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2.4vw, 26px);
}
.kg-guard__card {
background: var(--kg-white);
border-radius: var(--kg-r-md);
padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2vw, 24px);
border: 1px solid rgba(42, 191, 191, .18);
box-shadow: var(--kg-shadow-sm);
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur) var(--kg-ease-out);
}
.kg-guard__card:hover {
transform: translateY(-5px);
box-shadow: var(--kg-shadow-md);
}
/* Shield-shaped icon badge */
.kg-guard__shield {
--acc: var(--kg-teal);
position: relative;
width: 58px; height: 64px; margin-bottom: 18px;
display: grid; place-items: center;
color: #fff;
background: linear-gradient(158deg, color-mix(in srgb, var(--acc) 74%, white) 0%, var(--acc) 100%);
clip-path: polygon(50% 0%, 100% 12%, 100% 50%, 82% 88%, 50% 100%, 18% 88%, 0% 50%, 0% 12%);
filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--acc) 36%, transparent));
}
.kg-guard__card:nth-child(1) .kg-guard__shield { --acc: var(--kg-teal); }
.kg-guard__card:nth-child(2) .kg-guard__shield { --acc: var(--kg-green); }
.kg-guard__card:nth-child(3) .kg-guard__shield { --acc: var(--kg-navy); }
.kg-guard__card:hover .kg-guard__shield { animation: kg-badge-wobble .6s var(--kg-ease-pop); }
.kg-guard__card h3 { margin: 0 0 6px; }
.kg-guard__card p { margin: 0; color: var(--kg-text-soft); }
@media (max-width: 760px) {
.kg-guard__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
.kg-guard__card:hover { transform: none; }
.kg-guard__card:hover .kg-guard__shield { animation: none; }
}
/* ---- Video block (how it works) ---- */
.kg-video {
position: relative;
max-width: 920px; margin-inline: auto;
border-radius: var(--kg-r-lg);
overflow: hidden;
box-shadow: var(--kg-shadow-lg);
background: var(--kg-navy-deep);
}
.kg-video video { width: 100%; display: block; }
/* YouTube facade: poster before play, iframe after (both 16:9 like the mp4). */
.kg-video__poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.kg-video__iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.kg-video__cover {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
background: linear-gradient(160deg, rgba(28, 43, 58, .55), rgba(28, 43, 58, .75));
color: #fff; border: 0; cursor: pointer;
font-family: var(--kg-font-display); font-weight: 700; font-size: 1.1rem;
width: 100%;
transition: background-color 200ms;
}
.kg-video__cover:hover { background: linear-gradient(160deg, rgba(28, 43, 58, .45), rgba(28, 43, 58, .65)); }
.kg-video__play {
width: 92px; height: 92px; border-radius: 50%;
background: var(--kg-amber); color: var(--kg-navy);
display: flex; align-items: center; justify-content: center;
box-shadow: var(--kg-clay-inset), 0 6px 0 var(--kg-amber-deep), var(--kg-shadow-lg);
transition: transform var(--kg-dur) var(--kg-ease-pop);
}
.kg-video__cover:hover .kg-video__play { transform: scale(1.08); }
/* ---- Timeline (20-minute session) ----
main.js arms it (.is-armed), then runs a one-shot sequence when scrolled
into view: a ball drops from behind the section above into the first dot,
the line fill grows (.is-run) and each dot lights up (.is-lit) as the fill
reaches it. Without JS it just renders fully lit. */
.kg-timeline { max-width: 760px; margin-inline: auto; position: relative; padding-left: 38px; }
/* Stacking, back to front: track line (0) → growing fill + falling ball (1)
→ the dots (2). So the ball tucks BEHIND the first dot and vanishes, and
the fill runs UNDER the remaining dots rather than over them. */
.kg-timeline::before {
content: "";
position: absolute; left: 13px; top: 8px; bottom: 8px; z-index: 0;
width: 4px; border-radius: 4px;
background: linear-gradient(var(--kg-teal), var(--kg-amber));
}
.kg-timeline.is-armed::before { background: rgba(28, 43, 58, .09); }
.kg-timeline::after {
content: "";
position: absolute; left: 13px; top: 8px; z-index: 1;
width: 4px; border-radius: 4px; height: 0;
background: linear-gradient(var(--kg-teal), var(--kg-amber));
transition: height 1500ms linear;
}
.kg-timeline.is-run::after { height: calc(100% - 16px); }
.kg-timeline__ball {
position: absolute; left: 15px; top: 0; z-index: 1;
width: 22px; height: 22px; border-radius: 50%;
margin: -11px 0 0 -11px;
opacity: 0;
background: radial-gradient(circle at 35% 30%, #fff 0%, var(--kg-amber) 55%, #d98b12 100%);
box-shadow: 0 0 0 6px rgba(245, 166, 35, .22), 0 0 18px 7px rgba(245, 166, 35, .5);
pointer-events: none;
}
.kg-timeline__item { position: relative; z-index: 2; padding-bottom: clamp(22px, 3.5vw, 36px); }
.kg-timeline__item:last-child { padding-bottom: 0; }
.kg-timeline__dot {
position: absolute; left: -38px; top: 4px;
width: 30px; height: 30px; border-radius: 50%;
border: 5px solid var(--kg-cream);
box-shadow: var(--kg-shadow-sm);
transition: filter 350ms var(--kg-ease-out), transform 350ms var(--kg-ease-out), box-shadow 350ms var(--kg-ease-out);
}
.kg-timeline.is-armed .kg-timeline__item:not(.is-lit) .kg-timeline__dot { filter: grayscale(.85) opacity(.45); }
.kg-timeline__item.is-lit .kg-timeline__dot {
transform: scale(1.12);
box-shadow: var(--kg-shadow-sm), 0 0 14px 3px rgba(245, 166, 35, .35);
}
.kg-timeline__time {
font-family: var(--kg-font-display); font-weight: 800; font-size: .85rem;
color: var(--kg-teal-deep);
letter-spacing: .06em; text-transform: uppercase;
}
.kg-timeline__item h3 { margin: 2px 0 4px; font-size: 1.18rem; }
.kg-timeline__item p { color: var(--kg-text-soft); margin: 0; }
/* ---- Journey timeline (How It Works) ----
A glowing orb travels down the track as you scroll; each gate node lights
up and its card unfolds when the orb reaches it. Driven by main.js. */
.kg-jt { position: relative; max-width: 760px; margin-inline: auto; padding-left: clamp(64px, 9vw, 88px); }
.kg-jt__steps { list-style: none; margin: 0; padding: 0; }
.kg-jt__track {
/* Runs past the white section's bottom padding and ~24px under the navy
video section (later .kg-section siblings are position:relative, so
they paint on top) — the orb slides in behind the video at the end. */
position: absolute; left: clamp(20px, 3vw, 28px); top: 30px;
bottom: calc(-1 * var(--kg-section-pad) - 24px);
width: 6px; border-radius: 6px;
background: rgba(28, 43, 58, .09);
}
.kg-jt__fill {
position: absolute; top: 0; left: 0; right: 0; height: 0;
border-radius: inherit;
background: linear-gradient(180deg, var(--kg-teal), var(--kg-amber));
}
.kg-jt__orb {
position: absolute; left: 50%; top: 0;
width: 24px; height: 24px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff 0%, var(--kg-amber) 55%, var(--kg-amber-deep, #d98b12) 100%);
box-shadow: 0 0 0 7px rgba(245, 166, 35, .22), 0 0 22px 8px rgba(245, 166, 35, .5);
animation: kg-orb-pulse 2s ease-in-out infinite;
}
@keyframes kg-orb-pulse {
0%, 100% { box-shadow: 0 0 0 7px rgba(245, 166, 35, .22), 0 0 22px 8px rgba(245, 166, 35, .5); }
50% { box-shadow: 0 0 0 11px rgba(245, 166, 35, .14), 0 0 30px 12px rgba(245, 166, 35, .62); }
}
.kg-jt__step { position: relative; padding-bottom: clamp(24px, 3.5vw, 36px); }
.kg-jt__step:last-child { padding-bottom: 0; }
.kg-jt__node {
position: absolute; top: 4px;
/* centre the node on the track line */
left: calc((clamp(64px, 9vw, 88px) - clamp(20px, 3vw, 28px) - 3px) * -1);
transform: translateX(-50%);
width: 46px; height: 54px;
border-radius: 999px 999px 12px 12px; /* the gate shape */
background: var(--kg-node);
display: grid; place-items: center;
font-family: var(--kg-font-display); font-weight: 800; font-size: 1.15rem; color: #fff;
border: 4px solid var(--kg-white);
box-shadow: var(--kg-shadow-sm);
filter: grayscale(.7) opacity(.55);
transition: filter 400ms var(--kg-ease-out), transform 400ms var(--kg-ease-out), box-shadow 400ms var(--kg-ease-out);
}
.kg-jt__card {
background: var(--kg-white);
border-radius: var(--kg-r-md);
padding: clamp(18px, 2.6vw, 26px);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
opacity: .45;
transform: translateY(12px);
transition: opacity 500ms var(--kg-ease-out), transform 500ms var(--kg-ease-out), box-shadow 500ms var(--kg-ease-out);
}
.kg-jt__title { margin: 0; font-size: clamp(1.15rem, 2vw, 1.35rem); }
.kg-jt__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 550ms var(--kg-ease-out);
}
.kg-jt__body-inner { overflow: hidden; min-height: 0; }
.kg-jt__body-inner p { margin: 14px 0 0; color: var(--kg-text-soft); }
.kg-jt__detail { font-size: .95rem; }
.kg-jt__step.is-active .kg-jt__node {
filter: none;
transform: translateX(-50%) scale(1.08);
box-shadow: var(--kg-shadow-md), 0 0 0 6px rgba(245, 166, 35, .18);
}
.kg-jt__step.is-active .kg-jt__card {
opacity: 1;
transform: none;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md);
}
.kg-jt__step.is-active .kg-jt__body { grid-template-rows: 1fr; }
/* ---- Home: how-it-works — the daily loop + live AI demo ---- */
.kg-hiw { position: relative; overflow: hidden; }
/* faint amber→teal wash drifting behind the section for depth */
.kg-hiw__bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(600px 360px at 12% 8%, var(--kg-amber-soft), transparent 60%),
radial-gradient(620px 380px at 92% 88%, var(--kg-teal-soft), transparent 62%);
opacity: .7;
}
.kg-hiw > .kg-container { position: relative; z-index: 1; }
/* The four-step loop — a row of stage cards that auto-spotlight in turn */
.kg-loop { position: relative; }
.kg-loop__steps {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(14px, 2vw, 22px);
}
.kg-loop__step {
position: relative; text-align: center;
background: var(--kg-white); border-radius: var(--kg-r-lg);
padding: clamp(22px, 2.8vw, 32px) clamp(14px, 1.8vw, 22px) clamp(20px, 2.4vw, 26px);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
border: 2px solid transparent;
transition: transform .45s var(--kg-ease-out), box-shadow .45s var(--kg-ease-out), border-color .45s;
cursor: pointer;
}
.kg-loop__step.is-current {
transform: translateY(-10px);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-lg);
border-color: color-mix(in srgb, var(--g) 55%, transparent);
}
.kg-loop__gate {
position: relative;
width: clamp(56px, 7vw, 66px); height: clamp(64px, 8vw, 76px);
margin: 0 auto 16px;
border-radius: var(--kg-arch);
background: var(--g);
display: grid; place-items: center; color: #fff;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md);
transition: transform .45s var(--kg-ease-pop);
}
.kg-loop__step.is-current .kg-loop__gate { transform: scale(1.1) rotate(-3deg); }
.kg-loop__gate > svg { width: 44%; height: auto; }
.kg-loop__num {
position: absolute; top: -9px; right: -9px;
width: 26px; height: 26px; border-radius: 50%;
background: #fff; color: var(--kg-navy);
font-family: var(--kg-font-display); font-weight: 800; font-size: .82rem;
display: grid; place-items: center;
box-shadow: var(--kg-shadow-sm);
}
.kg-loop__title { font-size: clamp(1.1rem, 1.7vw, 1.3rem); margin-bottom: .3em; }
.kg-loop__step p { color: var(--kg-text-soft); font-size: .92rem; margin: 0; }
/* Progress rail beneath the steps + a "repeats daily" pill */
.kg-loop__progress {
position: relative; height: 6px; border-radius: 6px;
background: rgba(28, 43, 58, .09);
margin: clamp(26px, 3.5vw, 40px) 0 0;
}
.kg-loop__progress-fill {
position: absolute; inset: 0 auto 0 0; width: 25%;
border-radius: 6px;
background: linear-gradient(90deg, var(--kg-teal), var(--kg-amber));
transition: width .55s var(--kg-ease-out);
}
.kg-loop__repeat {
position: absolute; top: 50%; right: 0; transform: translateY(-50%);
display: inline-flex; align-items: center; gap: 7px;
background: var(--kg-white); color: var(--kg-navy);
font-family: var(--kg-font-display); font-weight: 700; font-size: .82rem;
padding: 6px 14px; border-radius: 999px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
}
.kg-loop__repeat svg { color: var(--kg-teal-deep); }
/* The live AI demo — navy panel, copy + interactive question side by side */
.kg-loop-demo {
margin-top: clamp(34px, 5vw, 56px);
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(24px, 4vw, 52px); align-items: center;
background: var(--kg-navy); color: var(--kg-text-on-dark);
border-radius: var(--kg-r-lg);
padding: clamp(26px, 4vw, 48px);
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-lg);
}
.kg-loop-demo .kg-kicker { background: var(--kg-navy-soft); color: var(--kg-amber); box-shadow: var(--kg-clay-inset-dark); }
.kg-loop-demo__title { color: #fff; font-family: var(--kg-font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; margin-bottom: .4em; }
.kg-loop-demo__lede { color: var(--kg-text-on-dark-soft); margin-bottom: 18px; }
.kg-loop-demo__note { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: .9rem; color: var(--kg-text-on-dark-soft); }
.kg-loop-demo__note svg { flex: none; margin-top: 2px; color: var(--kg-teal); }
.kg-loop-demo .kg-ai__demo { margin: 0; }
@media (max-width: 860px) {
.kg-loop__steps { grid-template-columns: repeat(2, 1fr); }
.kg-loop__repeat { position: static; transform: none; display: inline-flex; margin-top: 16px; }
.kg-loop__progress { display: flex; flex-direction: column; align-items: center; background: none; height: auto; margin-top: 20px; }
.kg-loop__progress-fill { display: none; }
.kg-loop-demo { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 32px); }
}
@media (max-width: 460px) {
.kg-loop__steps { grid-template-columns: 1fr; }
}
/* ---- Hero scroll cue ---- */
.kg-hero__scroll {
display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
margin-top: clamp(30px, 4vw, 48px);
color: var(--kg-text-soft); text-decoration: none;
font-family: var(--kg-font-display); font-weight: 700;
font-size: .82rem; letter-spacing: .05em; text-transform: uppercase;
}
.kg-hero__scroll svg { color: var(--kg-amber-deep); animation: kg-bob 2.4s ease-in-out infinite; }
.kg-hero__scroll:hover { color: var(--kg-navy); }
/* ---- Squiggle that draws itself in as its heading reveals ---- */
.kg-squiggle--draw { background-position: left bottom .22em; background-size: 0% .5em; }
[data-kg-reveal].is-in .kg-squiggle--draw { animation: kg-squiggle-draw 720ms var(--kg-ease-out) 240ms both; }
@keyframes kg-squiggle-draw { from { background-size: 0% .5em; } to { background-size: 100% .5em; } }
/* ---- Feature spotlight rows ---- */
.kg-spot {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(28px, 5vw, 64px);
align-items: center;
padding-block: clamp(28px, 4vw, 48px);
}
.kg-spot--flip .kg-spot__visual { order: 2; }
.kg-spot__visual { border-radius: var(--kg-r-lg); overflow: hidden; box-shadow: var(--kg-shadow-lg); }
.kg-spot__visual--arch { border-radius: var(--kg-arch); }
.kg-spot__visual img { width: 100%; object-fit: cover; }
/* Wider visual column — gives screenshots a bit more presence */
.kg-spot--wide { grid-template-columns: 1.18fr 0.82fr; }
/* ---- Features: parent dashboard showcase ----
Centred composition: real screenshot in a floating laptop frame over a
soft glow, one-shot glass shine on reveal, capability chips beneath. */
.kg-dashspot__head { text-align: center; max-width: 680px; margin-inline: auto; }
.kg-dashspot__head .kg-lede { margin-inline: auto; }
.kg-dashspot__stage {
position: relative;
max-width: 780px;
margin: clamp(32px, 4.5vw, 52px) auto 0;
}
.kg-dashspot__glow {
position: absolute; inset: -6% -12%;
background:
radial-gradient(45% 55% at 30% 40%, rgba(42, 191, 191, .38), transparent 70%),
radial-gradient(45% 55% at 72% 62%, rgba(245, 166, 35, .34), transparent 70%);
filter: blur(46px);
border-radius: 50%;
pointer-events: none;
animation: kg-dashspot-glow 7s ease-in-out infinite;
}
@keyframes kg-dashspot-glow {
0%, 100% { opacity: .7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
.kg-dashspot__laptop { position: relative; animation: kg-dashspot-hover 7.5s ease-in-out infinite; }
@keyframes kg-dashspot-hover {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
.kg-dashspot__screen,
.kg-dashspot__screen.kg-lightbox-trigger {
display: block; width: 100%;
padding: clamp(10px, 1.4vw, 14px);
border: 0; font: inherit; color: inherit;
background: var(--kg-navy);
border-radius: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px) 0 0;
cursor: zoom-in;
position: relative; overflow: hidden;
box-shadow: var(--kg-shadow-lg);
}
.kg-dashspot__screen img { width: 100%; border-radius: 8px; }
.kg-dashspot__base {
display: block; position: relative;
height: clamp(12px, 1.6vw, 16px);
margin-inline: -4.5%;
background: linear-gradient(180deg, var(--kg-navy-soft), var(--kg-navy-deep));
border-radius: 6px 6px 999px 999px;
box-shadow: var(--kg-shadow-md);
}
.kg-dashspot__base::after {
content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 12%; height: 46%;
background: rgba(255, 255, 255, .14);
border-radius: 0 0 10px 10px;
}
/* glass shine sweeps across the screen once, after the stage pops in */
.kg-dashspot__glare {
position: absolute; top: -20%; bottom: -20%; left: 0;
width: 34%;
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
transform: skewX(-18deg) translateX(-160%);
pointer-events: none;
}
.kg-dashspot__stage.is-in .kg-dashspot__glare { animation: kg-dashspot-glare 1.2s var(--kg-ease-out) .7s both; }
@keyframes kg-dashspot-glare {
from { transform: skewX(-18deg) translateX(-160%); }
to { transform: skewX(-18deg) translateX(460%); }
}
.kg-dashspot__chips {
list-style: none; margin: clamp(32px, 4.5vw, 48px) 0 0; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center;
gap: 12px 14px;
}
.kg-dashspot__chips li {
display: inline-flex; align-items: center; gap: 9px;
background: var(--kg-white);
border-radius: 999px;
padding: 12px 20px;
font-weight: 700; font-size: .97rem; color: var(--kg-navy);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur) var(--kg-ease-out);
}
.kg-dashspot__chips li:hover { transform: translateY(-3px); box-shadow: var(--kg-clay-inset), var(--kg-shadow-md); }
.kg-dashspot__chips svg { color: var(--kg-teal-deep); flex: none; }
/* Clickable screenshot → opens the lightbox */
.kg-lightbox-trigger {
display: block; width: 100%; padding: 0; border: 0; font: inherit; color: inherit;
background: none; cursor: zoom-in; position: relative;
}
.kg-lightbox-trigger img { display: block; }
.kg-lightbox-trigger__badge {
position: absolute; right: 14px; bottom: 14px;
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 14px; border-radius: 999px;
font-family: var(--kg-font-display); font-size: .82rem; font-weight: 700;
color: var(--kg-navy); background: rgba(255, 255, 255, .92);
box-shadow: var(--kg-shadow-sm);
transition: transform .2s var(--kg-ease-out), box-shadow .2s var(--kg-ease-out);
}
.kg-lightbox-trigger:hover .kg-lightbox-trigger__badge,
.kg-lightbox-trigger:focus-visible .kg-lightbox-trigger__badge { transform: translateY(-2px); box-shadow: var(--kg-shadow-md); }
/* Lightbox overlay */
.kg-lightbox {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
padding: clamp(16px, 4vw, 48px);
background: rgba(15, 22, 33, .92);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.kg-lightbox[hidden] { display: none; }
body.kg-lightbox-open { overflow: hidden; }
.kg-lightbox__stage {
max-width: 100%; max-height: 100%; overflow: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--kg-r-md);
}
.kg-lightbox__img {
display: block; width: auto; height: auto;
max-width: 88vw; max-height: 86vh; object-fit: contain;
border-radius: var(--kg-r-md); cursor: zoom-in;
}
.kg-lightbox__img.is-zoomed { max-width: none; max-height: none; cursor: zoom-out; }
.kg-lightbox__close {
position: absolute; top: clamp(12px, 2vw, 22px); right: clamp(12px, 2vw, 22px);
width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
color: var(--kg-navy); background: #fff; box-shadow: var(--kg-shadow-md); z-index: 2;
}
.kg-lightbox__hint {
position: absolute; bottom: clamp(12px, 2.5vw, 26px); left: 50%; transform: translateX(-50%);
padding: 7px 16px; border-radius: 999px;
font-family: var(--kg-font-display); font-size: .85rem; font-weight: 700;
color: #fff; background: rgba(255, 255, 255, .16); pointer-events: none;
}
/* Teacher-dashboard feature list (navy section) */
.kg-dash-feats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 6px; }
/* Each feature is an interactive row: a soft highlight surface with a growing
accent bar; on hover it slides right and the icon pops. */
.kg-dash-feat {
position: relative;
display: flex; align-items: flex-start; gap: 14px;
padding: 12px 14px; margin: 0 -14px;
border-radius: var(--kg-r-md);
transition: transform var(--kg-dur) var(--kg-ease-out), background-color var(--kg-dur) var(--kg-ease-out);
}
.kg-dash-feat::before {
content: ""; position: absolute; left: 2px; top: 14px; bottom: 14px; width: 3px;
border-radius: 3px; background: var(--kg-amber);
transform: scaleY(0); transform-origin: center;
transition: transform var(--kg-dur) var(--kg-ease-pop);
}
.kg-dash-feat:hover { transform: translateX(6px); background-color: rgba(255, 255, 255, .06); }
.kg-dash-feat:hover::before { transform: scaleY(1); }
.kg-dash-feat__icon {
flex: none; width: 46px; height: 46px; border-radius: 14px;
margin-bottom: 0;
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur) var(--kg-ease-out);
}
.kg-dash-feat:hover .kg-dash-feat__icon {
transform: scale(1.12) rotate(-6deg);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md);
}
.kg-dash-feat__title { font-family: var(--kg-font-display); font-size: 1.05rem; color: #fff; margin: 2px 0 3px; transition: color var(--kg-dur) var(--kg-ease-out); }
.kg-dash-feat__text { margin: 0; color: var(--kg-text-on-dark-soft); font-size: .94rem; line-height: 1.5; }
/* Principal view sits on cream — use a dark highlight tint instead of white */
.kg-dash-section.is-principal .kg-dash-feat:hover { background-color: rgba(28, 43, 58, .05); }
@media (prefers-reduced-motion: reduce) {
.kg-dash-feat:hover { transform: none; }
.kg-dash-feat:hover .kg-dash-feat__icon { transform: none; }
}
/* ---- Teacher / Principal view switch ---- */
/* The section eases from dark navy (Teacher) to light cream (Principal); the
Principal view's copy flips to dark ink so it stays readable. */
.kg-dash-section { transition: background-color .6s var(--kg-ease-out); }
.kg-dash-section.is-principal { background-color: var(--kg-cream); }
.kg-dash-section.is-principal .kg-h2,
.kg-dash-section.is-principal .kg-dash-feat__title { color: var(--kg-ink); }
.kg-dash-section.is-principal .kg-lede { color: var(--kg-text); }
.kg-dash-section.is-principal .kg-dash-feat__text { color: var(--kg-text-soft); }
.kg-dash-section.is-principal .kg-kicker { background: var(--kg-amber-soft); color: var(--kg-amber-deep); box-shadow: none; }
/* Two-column stage: toggle + screenshot on the left, copy on the right. Because
the toggle lives at the top of the left column, its top lines up with the
kicker on the right (both columns are top-aligned). */
.kg-dashstage {
display: grid; grid-template-columns: 1.18fr 0.82fr;
gap: clamp(28px, 5vw, 64px); align-items: start;
}
.kg-viewtoggle-wrap { text-align: center; margin-bottom: clamp(14px, 1.6vw, 20px); }
/* Apple-style sliding segmented toggle — a self-contained dark pill so it reads
on both the dark Teacher and light Principal backgrounds. */
.kg-viewtoggle {
position: relative; display: inline-flex; align-items: stretch;
padding: 5px; border-radius: 999px;
background: var(--kg-navy-soft);
box-shadow: var(--kg-clay-inset-dark);
-webkit-user-select: none; user-select: none;
}
.kg-viewtoggle__opt {
position: relative; z-index: 1;
flex: 0 0 auto; width: clamp(118px, 30vw, 144px);
padding: 11px 8px; border: 0; background: none; cursor: pointer;
font-family: var(--kg-font-display); font-size: 1rem; font-weight: 700;
color: rgba(255, 255, 255, .55);
transition: color .3s var(--kg-ease-out);
}
.kg-viewtoggle__opt:hover { color: rgba(255, 255, 255, .8); }
.kg-viewtoggle__opt.is-active { color: var(--kg-navy); }
.kg-viewtoggle__slider {
position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px;
width: calc(50% - 5px);
border-radius: 999px; background: #fff;
box-shadow: var(--kg-shadow-sm);
transition: transform .42s var(--kg-ease-out);
}
.kg-viewtoggle.is-principal .kg-viewtoggle__slider { transform: translateX(100%); }
/* The two views share the stage; only one shows at a time and slides in from
the side the toggle moved towards. */
.kg-dashstage { position: relative; }
.kg-dashview { display: none; }
.kg-dashview.is-shown { display: block; }
@keyframes kg-view-in-right { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes kg-view-in-left { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
.kg-dashview.anim-right { animation: kg-view-in-right .5s var(--kg-ease-out); }
.kg-dashview.anim-left { animation: kg-view-in-left .5s var(--kg-ease-out); }
@media (prefers-reduced-motion: reduce) {
.kg-dash-section { transition: none; }
.kg-viewtoggle__slider { transition: none; }
.kg-dashview.anim-right, .kg-dashview.anim-left { animation: none; }
}
/* ---- Adaptive AI engine visualisation (Features spotlight) ---- */
.kg-aiviz {
position: relative;
background: linear-gradient(165deg, var(--kg-navy-soft), var(--kg-navy-deep));
border: 1px solid rgba(255, 255, 255, .08);
border-radius: var(--kg-r-lg);
box-shadow: var(--kg-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .06);
padding: clamp(18px, 2.4vw, 26px);
color: var(--kg-text-on-dark);
overflow: hidden;
}
.kg-aiviz__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.kg-aiviz__title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--kg-font-display); font-weight: 700; font-size: 1.02rem; }
.kg-aiviz__live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--kg-teal); animation: kg-aiviz-pulse 1.9s ease-out infinite; }
.kg-aiviz__badge {
font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--kg-teal); background: rgba(42, 191, 191, .14);
border: 1px solid rgba(42, 191, 191, .32); padding: 4px 10px; border-radius: 999px;
}
/* Living learning path — the child's dot travels lesson nodes; a missed
topic makes the AI grow a re-teach detour that rejoins once mastered. */
.kg-aipath { position: relative; margin-top: 2px; }
.kg-aipath__ai {
position: absolute; top: 4px; right: 6px; z-index: 1;
display: inline-flex; align-items: center; gap: 5px;
font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
color: var(--kg-text-on-dark-soft);
}
.kg-aipath__ai svg { color: var(--kg-teal); }
.kg-aipath__svg { display: block; width: 100%; height: auto; transition: opacity .45s; }
.kg-aipath.is-fade .kg-aipath__svg { opacity: 0; }
.kg-aipath__rail { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 2.5; stroke-linecap: round; }
.kg-aipath__rail--detour { stroke: rgba(245, 166, 35, .38); }
.kg-aipath__prog {
fill: none; stroke: url(#kg-apgrad); stroke-width: 3.5; stroke-linecap: round;
filter: drop-shadow(0 0 6px rgba(42, 191, 191, .55));
}
.kg-aipath__prog--detour { stroke: url(#kg-apgrad-det); filter: drop-shadow(0 0 6px rgba(245, 166, 35, .5)); }
.kg-aipath__dot {
fill: #fff; stroke: var(--kg-teal); stroke-width: 3.5;
filter: drop-shadow(0 0 7px rgba(42, 191, 191, .9));
}
/* Path nodes. The inner group scales for pops so the label stays put. */
.kg-ainode__in { transform-box: fill-box; transform-origin: center; }
.kg-ainode__c {
fill: var(--kg-navy-soft); stroke: rgba(255, 255, 255, .22); stroke-width: 2;
transition: fill .35s, stroke .35s;
}
.kg-ainode__check {
fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .45s var(--kg-ease-out) .1s;
}
.kg-ainode__label {
fill: var(--kg-text-on-dark-soft); font-family: var(--kg-font-display);
font-size: 12.5px; font-weight: 700; text-anchor: middle;
paint-order: stroke; stroke: #1B2B3A; stroke-width: 4px; stroke-linejoin: round;
transition: fill .35s;
}
.kg-ainode.is-done .kg-ainode__c { fill: var(--kg-teal-deep); stroke: var(--kg-teal); }
.kg-ainode.is-done .kg-ainode__check, .kg-ainode.is-mastered .kg-ainode__check { stroke-dashoffset: 0; }
.kg-ainode.is-done .kg-ainode__in { animation: kg-ainode-pop .4s var(--kg-ease-out); }
.kg-ainode.is-done .kg-ainode__label, .kg-ainode.is-mastered .kg-ainode__label { fill: #fff; }
.kg-ainode.is-miss .kg-ainode__c { fill: rgba(230, 51, 41, .3); stroke: var(--kg-red); animation: kg-ainode-alert .9s ease-in-out infinite; }
.kg-ainode.is-mastered .kg-ainode__c { fill: var(--kg-green); stroke: #fff; }
.kg-ainode__burst {
fill: none; stroke: var(--kg-green); stroke-width: 2.5; opacity: 0;
transform-box: fill-box; transform-origin: center;
}
.kg-ainode.is-mastered .kg-ainode__burst { animation: kg-ainode-burst .8s var(--kg-ease-out); }
/* Goal node: a star instead of a check. */
.kg-ainode--goal .kg-ainode__check { display: none; }
.kg-ainode__star { fill: rgba(255, 255, 255, .4); font-size: 15px; text-anchor: middle; transition: fill .4s; }
.kg-ainode--goal.is-done .kg-ainode__c { fill: var(--kg-amber-deep); stroke: var(--kg-amber); }
.kg-ainode--goal.is-done .kg-ainode__star { fill: #fff; }
/* Detour mini-nodes sprout from nothing with a springy pop. */
.kg-ainode--mini .kg-ainode__in { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.kg-ainode--mini.is-in .kg-ainode__in { transform: scale(1); }
.kg-ainode--mini .kg-ainode__c { fill: rgba(245, 166, 35, .16); stroke: rgba(245, 166, 35, .55); }
.kg-ainode--mini.is-done .kg-ainode__c { fill: var(--kg-amber-deep); stroke: var(--kg-amber); }
.kg-ainode--mini .kg-ainode__label { font-size: 11.5px; opacity: 0; transition: opacity .4s .15s; }
.kg-ainode--mini.is-in .kg-ainode__label { opacity: 1; }
.kg-ainode--mini .kg-ainode__check { stroke-width: 2.6; }
/* AI scan: marching dashed beam from the AI chip plus ripples at the miss. */
.kg-aipath__beam {
stroke: var(--kg-teal); stroke-width: 1.6; stroke-dasharray: 5 7; stroke-linecap: round;
opacity: 0; transition: opacity .3s;
}
.kg-aipath__beam.is-on { opacity: .85; animation: kg-aipath-march .5s linear infinite; }
@keyframes kg-aipath-march { to { stroke-dashoffset: -12; } }
.kg-aipath__ripple {
fill: none; stroke: var(--kg-teal); stroke-width: 2;
transform-box: fill-box; transform-origin: center;
animation: kg-aipath-ripple 1.25s ease-out infinite;
}
@keyframes kg-aipath-ripple {
from { opacity: .85; transform: scale(.45); }
to { opacity: 0; transform: scale(2.5); }
}
/* Verdict chip above the missed node: "✗ missed" flips to "✓ correct". */
.kg-aipath__card { opacity: 0; transition: opacity .35s; }
.kg-aipath__card.is-show { opacity: 1; }
.kg-aipath__card rect { fill: rgba(15, 26, 37, .92); stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.kg-aipath__card text { text-anchor: middle; font-family: var(--kg-font-display); font-size: 13px; font-weight: 800; fill: #fff; }
.kg-aipath__card.is-bad rect { stroke: rgba(230, 51, 41, .55); }
.kg-aipath__card.is-good rect { stroke: rgba(59, 165, 92, .6); }
.kg-aipath__card.is-bad [data-kg-card-glyph] { fill: #FF7B72; }
.kg-aipath__card.is-good [data-kg-card-glyph] { fill: #5FD68B; }
@keyframes kg-ainode-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes kg-ainode-alert { 0%, 100% { stroke-width: 2; } 50% { stroke-width: 4; } }
@keyframes kg-ainode-burst { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
.kg-aiviz__status { margin: 14px 2px 0; font-size: .9rem; font-weight: 600; color: var(--kg-text-on-dark-soft); min-height: 1.4em; }
.kg-aiviz__status strong { color: #fff; font-weight: 800; }
.kg-aiviz__subject {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 12px 0 0;
font-size: .68rem;
font-weight: 600;
letter-spacing: .02em;
color: rgba(255, 255, 255, .4);
}
.kg-aiviz__subject svg { color: var(--kg-teal); flex: none; }
.kg-aiviz__disclaimer {
margin: 8px 0 0;
font-size: .64rem;
line-height: 1.5;
color: rgba(255, 255, 255, .22);
}
@keyframes kg-aiviz-pulse {
0% { box-shadow: 0 0 0 0 rgba(42, 191, 191, .5); }
70% { box-shadow: 0 0 0 7px rgba(42, 191, 191, 0); }
100% { box-shadow: 0 0 0 0 rgba(42, 191, 191, 0); }
}
/* kg-aiviz-breathe is still used by the feature-grid hero glow. */
@keyframes kg-aiviz-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
.kg-aiviz__live-dot, .kg-aipath__ripple, .kg-aipath__beam,
.kg-ainode.is-miss .kg-ainode__c, .kg-ainode.is-done .kg-ainode__in,
.kg-ainode.is-mastered .kg-ainode__burst { animation: none !important; }
}
/* Spotlight explanation checklist (Features: adaptive AI copy column). */
.kg-exp__points {
list-style: none; margin: 26px 0 0; padding: 0;
display: grid; gap: 13px;
}
.kg-exp__points li {
display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 13px;
font-weight: 600; line-height: 1.5; color: var(--kg-text-on-dark);
}
.kg-exp__points li svg {
width: 26px; height: 26px; padding: 5px; box-sizing: border-box;
color: var(--kg-teal); background: rgba(42, 191, 191, .16);
border: 1px solid rgba(42, 191, 191, .32); border-radius: 50%;
margin-top: 1px;
}
/* ---- Features: the orbit — KG logo as the sun, features as planets ----
Desktop: an absolutely-positioned solar system (two slowly counter-rotating
dashed rings, each carrying an orbiting dot; the logo breathing at the
centre; eight compact cards bobbing around it). Below 1100px it collapses
to a plain grid with the sun on top. */
.kg-orbit {
position: relative;
height: clamp(660px, 60vw, 780px);
max-width: 1140px;
margin-inline: auto;
margin-top: clamp(40px, 5vw, 70px); /* clear the section lede above the top planet */
}
.kg-orbit__rings { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.kg-orbit__ring {
position: absolute; top: 50%; left: 50%;
translate: -50% -50%;
border: 2px dashed rgba(245, 166, 35, .4);
border-radius: 50%;
}
.kg-orbit__ring--1 { width: min(40vw, 440px); height: min(40vw, 440px); animation: kg-orbit-spin 70s linear infinite; }
.kg-orbit__ring--2 {
width: min(58vw, 660px); height: min(58vw, 660px);
border-color: rgba(42, 191, 191, .35);
animation: kg-orbit-spin 110s linear infinite reverse;
}
/* Each ring carries a little planet-dot; the ring's own rotation orbits it. */
.kg-orbit__ring::before {
content: ""; position: absolute; top: -7px; left: 50%; margin-left: -6px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--kg-amber);
box-shadow: 0 0 0 5px rgba(245, 166, 35, .22);
}
.kg-orbit__ring--2::before { background: var(--kg-teal); box-shadow: 0 0 0 5px rgba(42, 191, 191, .2); }
@keyframes kg-orbit-spin { to { transform: rotate(360deg); } }
/* The sun */
.kg-orbit__sun {
position: absolute; top: 50%; left: 50%;
translate: -50% -50%;
display: flex; flex-direction: column; align-items: center; gap: 14px;
z-index: 1;
}
.kg-orbit__core { position: relative; display: inline-grid; place-items: center; }
.kg-orbit__core img {
position: relative; z-index: 2;
width: clamp(150px, 16vw, 210px); height: auto;
filter: drop-shadow(0 12px 34px rgba(245, 166, 35, .5));
animation: kg-sun-breathe 6s ease-in-out infinite;
}
@keyframes kg-sun-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.kg-orbit__glow {
position: absolute; inset: -46%; z-index: 0; border-radius: 50%;
background: radial-gradient(circle, rgba(245, 166, 35, .4), rgba(245, 166, 35, .14) 48%, transparent 72%);
}
/* Slow-turning sun rays, masked to a halo band around the logo */
.kg-orbit__rays {
position: absolute; inset: -58%; z-index: 1; border-radius: 50%;
background: repeating-conic-gradient(rgba(245, 166, 35, .28) 0deg 7deg, transparent 7deg 24deg);
-webkit-mask-image: radial-gradient(circle, transparent 34%, #000 37%, transparent 70%);
mask-image: radial-gradient(circle, transparent 34%, #000 37%, transparent 70%);
animation: kg-orbit-spin 46s linear infinite;
}
.kg-orbit__stats { display: flex; gap: 10px; position: relative; z-index: 2; }
.kg-orbit__stats span {
display: flex; flex-direction: column; align-items: center; gap: 1px;
padding: 8px 16px; border-radius: 999px;
background: var(--kg-white);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
}
.kg-orbit__stats strong { font-family: var(--kg-font-display); font-size: 1.05rem; line-height: 1.1; color: var(--kg-amber-deep); }
.kg-orbit__stats small { font-size: .66rem; color: var(--kg-text-soft); font-weight: 700; letter-spacing: .03em; }
/* The planets */
.kg-orbit__item { position: absolute; translate: -50% -50%; width: min(250px, 23vw); z-index: 2; }
.kg-orbit__item--1 { top: 15%; left: 19%; } /* Cambridge English — top-left */
.kg-orbit__item--2 { top: 15%; left: 81%; } /* International Maths — top-right */
.kg-orbit__item--3 { top: 51%; left: 9%; } /* 1,800+ lessons — left */
.kg-orbit__item--4 { top: 51%; left: 91%; } /* Immersive world — right */
.kg-orbit__item--5 { top: 86%; left: 19%; } /* Tokens & the Store — bottom-left */
.kg-orbit__item--6 { top: 86%; left: 81%; } /* Parent dashboard — bottom-right */
.kg-orbit__item--7 { top: 8%; left: 50%; } /* Teacher dashboards — top */
.kg-orbit__item--8 { top: 94%; left: 50%; } /* Safe & ad-free — bottom */
.kg-orbit__card {
background: var(--kg-white);
border-radius: var(--kg-r-lg);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md);
padding: 18px 18px 16px;
text-align: center;
transition: box-shadow var(--kg-dur) var(--kg-ease-out);
animation: kg-orbit-bob var(--kg-bob, 6.5s) ease-in-out var(--kg-bob-delay, 0s) infinite;
}
@keyframes kg-orbit-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* Vary each planet's rhythm so the system never moves in lockstep */
.kg-orbit__item:nth-child(3n) .kg-orbit__card { --kg-bob: 7.6s; --kg-bob-delay: .9s; }
.kg-orbit__item:nth-child(3n+1) .kg-orbit__card { --kg-bob: 6.1s; --kg-bob-delay: 1.7s; }
.kg-orbit__item:nth-child(4n) .kg-orbit__card { --kg-bob: 8.2s; --kg-bob-delay: .4s; }
.kg-orbit__card:hover { box-shadow: var(--kg-clay-inset), var(--kg-shadow-lg), 0 22px 40px -18px rgba(245, 166, 35, .5); }
.kg-orbit__card .kg-bubble { width: 46px; height: 46px; margin-bottom: 10px; transition: transform .28s var(--kg-ease-pop); }
.kg-orbit__card:hover .kg-bubble { transform: scale(1.12) rotate(-6deg); }
.kg-orbit__card h3 { font-size: 1.04rem; margin: 0 0 4px; }
.kg-orbit__card p { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--kg-text-soft); }
@media (max-width: 1100px) {
/* Fallback: sun on top, planets in a plain grid */
.kg-orbit { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.kg-orbit__rings { display: none; }
.kg-orbit__sun { position: static; translate: none; grid-column: 1 / -1; order: -1; margin-bottom: 14px; }
.kg-orbit__item { position: static; translate: none; width: auto; }
.kg-orbit__card { height: 100%; animation: none; }
}
@media (max-width: 560px) {
.kg-orbit { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.kg-orbit__ring, .kg-orbit__rays, .kg-orbit__core img, .kg-orbit__card { animation: none; }
.kg-orbit__card:hover .kg-bubble { transform: none; }
}
/* ---- Support page ---- */
.kg-support-grid {
display: grid; grid-template-columns: 1.4fr 1fr;
gap: clamp(24px, 4vw, 48px);
align-items: start;
}
.kg-support-search { position: relative; max-width: 560px; margin: 0 auto clamp(28px, 4vw, 40px); }
.kg-support-search input {
width: 100%;
font-size: 1.05rem; font-family: inherit;
border: 0; border-radius: 999px;
padding: 17px 24px 17px 56px;
background: var(--kg-white);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md);
color: var(--kg-text);
}
.kg-support-search input:focus { outline: 3px solid var(--kg-teal); outline-offset: 2px; }
.kg-support-search svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--kg-text-soft); }
/* "Most asked" chips — jump-open one FAQ item */
.kg-support-popular {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 10px;
max-width: 880px; margin: 0 auto clamp(22px, 3vw, 32px);
}
.kg-support-popular__label {
font-family: var(--kg-font-display); font-weight: 700; font-size: .95rem;
color: var(--kg-text-soft);
}
.kg-support-popular__chip {
border: 0; cursor: pointer;
font-family: inherit; font-size: .9rem; font-weight: 700;
color: var(--kg-navy);
background: var(--kg-white);
border-radius: 999px;
padding: 9px 16px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur) var(--kg-ease-pop);
}
.kg-support-popular__chip:hover { transform: translateY(-2px); box-shadow: var(--kg-clay-inset), var(--kg-shadow-md); }
.kg-support-popular__chip:focus-visible { outline: 3px solid var(--kg-teal); outline-offset: 2px; }
/* Filter pill bar + sort control */
.kg-support-toolbar {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 12px 18px;
margin-bottom: 10px;
}
.kg-support-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.kg-support-pill {
display: inline-flex; align-items: center; gap: 8px;
border: 0; cursor: pointer;
font-family: var(--kg-font-display); font-weight: 700; font-size: .95rem;
color: var(--kg-navy);
background: var(--kg-white);
border-radius: 999px;
padding: 10px 18px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
transition: transform var(--kg-dur) var(--kg-ease-pop);
}
.kg-support-pill:hover { transform: translateY(-2px); }
.kg-support-pill:focus-visible { outline: 3px solid var(--kg-teal); outline-offset: 2px; }
.kg-support-pill[aria-pressed="true"] { background: var(--kg-navy); color: var(--kg-white); }
.kg-support-pill__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kg-support-pill__dot--amber { background: var(--kg-amber); }
.kg-support-pill__dot--teal { background: var(--kg-teal); }
.kg-support-pill__dot--red { background: var(--kg-red); }
.kg-support-pill__count {
font-size: .8rem; font-weight: 800;
background: var(--kg-teal-soft); color: var(--kg-teal-deep);
border-radius: 999px;
padding: 2px 8px;
}
.kg-support-pill[aria-pressed="true"] .kg-support-pill__count { background: rgba(255, 255, 255, .22); color: var(--kg-white); }
.kg-support-sort {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 700; font-size: .92rem; color: var(--kg-text-soft);
}
.kg-support-sort select {
font-family: inherit; font-size: .95rem; font-weight: 700; color: var(--kg-navy);
border: 0; border-radius: 999px;
padding: 10px 14px;
background: var(--kg-white);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
cursor: pointer;
}
.kg-support-sort select:focus { outline: 3px solid var(--kg-teal); outline-offset: 2px; }
.kg-support-count { text-align: right; font-size: .88rem; font-weight: 700; color: var(--kg-text-soft); margin: 0 0 14px; }
.kg-mark { background: var(--kg-amber-soft); color: inherit; border-radius: 4px; padding: 0 2px; }
.kg-faq__empty { text-align: center; color: var(--kg-text-soft); padding: 28px; display: none; }
.kg-faq-more { text-align: center; margin-top: clamp(22px, 3vw, 32px); }
.kg-faq-more[hidden] { display: none; }
.kg-faq-more__icon { transition: transform var(--kg-dur) var(--kg-ease-pop); }
.kg-faq-more button:hover .kg-faq-more__icon { transform: translateY(3px); }
/* Support helper widget */
.kg-helper-fab {
position: fixed; right: 20px; bottom: 20px;
/* Same stacking level as the panel; since the panel comes later in the
DOM it covers the button while open, hiding it as intended. */
z-index: var(--kg-z-helper);
display: flex; align-items: center; gap: 10px;
border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; cursor: pointer;
background: linear-gradient(180deg, var(--kg-navy-soft), var(--kg-navy));
color: #fff;
font-family: var(--kg-font-display); font-weight: 700; font-size: 1rem;
padding: 15px 24px;
box-shadow:
0 10px 26px rgba(0, 0, 0, .44),
inset 0 1px 0 rgba(255, 255, 255, .22),
inset 0 -1px 0 rgba(0, 0, 0, .24);
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow 200ms;
}
.kg-helper-fab:hover {
transform: translateY(-3px);
box-shadow:
0 14px 30px rgba(0, 0, 0, .50),
inset 0 1px 0 rgba(255, 255, 255, .26),
inset 0 -1px 0 rgba(0, 0, 0, .28);
}
.kg-helper {
position: fixed; right: 20px; bottom: 20px;
z-index: var(--kg-z-helper);
width: min(380px, calc(100vw - 40px));
max-height: min(640px, calc(100vh - 110px));
background: var(--kg-white);
border-radius: var(--kg-r-lg);
box-shadow: var(--kg-shadow-lg);
display: none;
flex-direction: column;
overflow: hidden;
}
.kg-helper.is-open { display: flex; animation: kg-fade-in 260ms var(--kg-ease-out); }
.kg-helper__head {
background: var(--kg-navy); color: #fff;
padding: 18px 20px;
display: flex; align-items: center; gap: 12px;
}
.kg-helper__head strong { font-family: var(--kg-font-display); font-size: 1.08rem; flex: 1; }
.kg-helper__close { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; border-radius: 8px; display: flex; }
.kg-helper__close:hover { background: rgba(255, 255, 255, .12); }
.kg-helper__body { flex: 1; padding: 18px; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.kg-helper__msg {
background: var(--kg-cream-deep);
border-radius: 18px 18px 18px 6px;
padding: 13px 16px;
font-size: .96rem;
max-width: 88%;
animation: kg-fade-in 280ms var(--kg-ease-out);
}
.kg-helper__msg--user {
background: var(--kg-teal-soft);
border-radius: 18px 18px 6px 18px;
justify-self: end;
font-weight: 700; color: var(--kg-teal-deep);
}
.kg-helper__options { display: grid; gap: 8px; }
.kg-helper__opt {
text-align: left;
border: 2px solid var(--kg-teal-soft);
background: var(--kg-white);
border-radius: 14px;
padding: 11px 15px;
font-family: inherit; font-weight: 700; font-size: .93rem;
color: var(--kg-navy); cursor: pointer;
transition: border-color 160ms, background-color 160ms, transform 180ms var(--kg-ease-pop);
min-height: 44px;
}
.kg-helper__opt:hover { border-color: var(--kg-teal); background: var(--kg-teal-soft); transform: translateX(3px); }
/* Anchor variant: the "none of these fit" escape under search results */
a.kg-helper__opt { display: block; text-decoration: none; }
.kg-helper__opt--escalate { border-style: dashed; border-color: var(--kg-amber-soft); color: var(--kg-amber-deep); }
.kg-helper__opt--escalate:hover { border-color: var(--kg-amber); background: var(--kg-amber-soft); }
.kg-helper__msg a { color: var(--kg-teal-deep); font-weight: 700; }
/* Back button — quieter than topic options */
.kg-helper__back {
justify-self: start;
border: 0; background: none;
padding: 6px 4px; margin-top: 2px;
font-family: inherit; font-weight: 700; font-size: .85rem;
color: var(--kg-text-soft); cursor: pointer;
border-radius: 8px;
transition: color 160ms;
}
.kg-helper__back:hover { color: var(--kg-teal-deep); }
/* "Was this helpful?" prompt + Yes/No row */
.kg-helper__helpful-q { margin: 2px 0 2px; font-weight: 700; font-size: .9rem; color: var(--kg-navy); }
.kg-helper__helpful-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kg-helper__opt--yes { text-align: center; border-color: var(--kg-green-soft); }
.kg-helper__opt--yes:hover { border-color: var(--kg-teal); background: var(--kg-green-soft); }
.kg-helper__opt--no { text-align: center; border-color: var(--kg-red-soft); }
.kg-helper__opt--no:hover { border-color: var(--kg-red); background: var(--kg-red-soft); }
/* Back (left) + support button (right) row */
.kg-helper__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kg-helper__actions .kg-helper__back { margin-top: 0; order: -1; }
/* Soft handoff CTA after a "Not really" answer */
.kg-helper__cta {
display: inline-flex; align-items: center; justify-content: center;
justify-self: start;
background: var(--kg-teal); color: #fff;
font-family: var(--kg-font-display); font-weight: 700; font-size: .92rem;
text-decoration: none;
border-radius: 12px; padding: 11px 18px;
min-height: 44px;
box-shadow: var(--kg-shadow-sm);
transition: transform 180ms var(--kg-ease-pop), box-shadow 180ms;
}
.kg-helper__cta:hover { transform: translateY(-2px); box-shadow: var(--kg-shadow-md); }
/* Typing dots shown briefly before each helper reply */
.kg-helper__typing { display: inline-flex; gap: 5px; align-items: center; min-height: 20px; }
.kg-helper__typing span {
width: 7px; height: 7px; border-radius: 50%;
background: var(--kg-navy-soft);
animation: kg-typing 900ms ease-in-out infinite;
}
.kg-helper__typing span:nth-child(2) { animation-delay: 150ms; }
.kg-helper__typing span:nth-child(3) { animation-delay: 300ms; }
@keyframes kg-typing {
0%, 60%, 100% { opacity: .35; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* Free-text question bar pinned under the transcript */
.kg-helper__foot {
display: flex; gap: 8px; align-items: center;
padding: 12px 14px;
margin: 0;
border-top: 1.5px solid var(--kg-cream-deep);
background: var(--kg-white);
}
.kg-helper__foot input {
flex: 1; min-width: 0;
border: 2px solid var(--kg-teal-soft);
border-radius: 999px;
padding: 10px 16px;
font: inherit; font-size: .93rem;
color: var(--kg-navy);
min-height: 44px;
background: var(--kg-white);
}
.kg-helper__foot input:focus { border-color: var(--kg-teal); }
.kg-helper__foot button {
flex: none;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: 50%;
background: var(--kg-teal); color: #fff;
cursor: pointer;
box-shadow: var(--kg-shadow-sm);
transition: transform 160ms var(--kg-ease-pop), background-color 160ms;
}
.kg-helper__foot button:hover { background: var(--kg-teal-deep); transform: scale(1.06); }
/* ---- 404 ---- */
.kg-404 {
min-height: 70vh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
padding: clamp(48px, 8vw, 96px) var(--kg-gutter);
position: relative; overflow: hidden;
}
.kg-404__gate {
font-family: var(--kg-font-display);
font-size: clamp(5rem, 16vw, 9rem); font-weight: 800;
line-height: 1;
color: var(--kg-navy);
display: flex; align-items: center; gap: clamp(8px, 2vw, 20px);
margin-bottom: 18px;
}
.kg-404__zero {
display: inline-flex; align-items: flex-end; justify-content: center;
width: clamp(80px, 14vw, 140px); height: clamp(96px, 17vw, 170px);
border-radius: var(--kg-arch);
background: linear-gradient(160deg, var(--kg-amber), var(--kg-red) 140%);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-lg);
position: relative; overflow: hidden;
}
.kg-404__zero::after {
content: "";
position: absolute; inset: 14% 22% 0;
border-radius: var(--kg-arch);
background: var(--kg-cream);
}
.kg-404__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 26px 0 34px; }
.kg-404__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* ---- Payment placeholder (reuses the centred .kg-404 layout) ---- */
.kg-payment__badge {
width: clamp(78px, 12vw, 96px); height: clamp(78px, 12vw, 96px);
display: flex; align-items: center; justify-content: center;
border-radius: var(--kg-arch);
background: linear-gradient(160deg, var(--kg-amber), var(--kg-red) 150%);
color: #fff;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-lg);
margin-bottom: 22px;
}
.kg-payment .kg-kicker { margin-bottom: 14px; }
.kg-payment__email { margin-top: 4px; color: var(--kg-text-soft); font-weight: 700; }
.kg-payment__email a { color: var(--kg-teal-deep); font-weight: 800; text-decoration: none; }
.kg-payment__email a:hover { text-decoration: underline; }
/* ---- Schools page ---- */
/* Curriculum cards styled as exercise-book pages: faint ruled lines,
the classic red margin line, and a subject bookmark ribbon. */
.kg-book {
position: relative;
overflow: hidden;
padding-left: clamp(40px, 4.4vw, 52px);
background:
repeating-linear-gradient(180deg,
transparent 0 26px,
rgba(42, 111, 191, .09) 26px 27px),
var(--kg-white);
}
.kg-book::before {
content: ""; position: absolute; top: 0; bottom: 0;
left: clamp(24px, 2.8vw, 32px);
width: 2px;
background: rgba(230, 51, 41, .3);
}
.kg-book__ribbon {
position: absolute; top: 0; right: clamp(20px, 2.6vw, 28px);
width: 26px; height: 54px;
background: var(--kg-teal);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
transition: height var(--kg-dur) var(--kg-ease-pop);
}
.kg-book--amber .kg-book__ribbon { background: var(--kg-amber); }
.kg-book--red .kg-book__ribbon { background: var(--kg-red); }
.kg-book:hover .kg-book__ribbon { height: 64px; }
.kg-schools-savings {
max-width: 640px;
margin: -6px auto clamp(22px, 3vw, 30px);
text-align: center;
font-weight: 700;
color: var(--kg-text-soft);
}
.kg-schools-form { max-width: 640px; margin-inline: auto; }
.kg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.kg-form-grid .kg-field--full { grid-column: 1 / -1; }
/* ---- Download page ---- */
.kg-qr {
display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
background: var(--kg-white);
border-radius: var(--kg-r-md);
padding: 22px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md);
}
.kg-qr__code {
width: 150px; height: 150px;
border-radius: var(--kg-r-sm);
background: repeating-conic-gradient(var(--kg-navy) 0% 25%, var(--kg-cream) 0% 50%) 0 0 / 20px 20px;
opacity: .85;
}
.kg-qr small { font-weight: 700; color: var(--kg-text-soft); }
.kg-steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); counter-reset: kg-step; }
.kg-step-card { text-align: center; counter-increment: kg-step; }
.kg-step-card::before {
content: counter(kg-step);
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: 50%;
font-family: var(--kg-font-display); font-weight: 800; font-size: 1.3rem;
background: var(--kg-amber); color: var(--kg-navy);
box-shadow: var(--kg-clay-inset), 0 4px 0 var(--kg-amber-deep);
margin-bottom: 16px;
}
/* ---- Card eyebrow tag ---- */
.kg-card__tag {
display: inline-block;
margin-bottom: 10px;
padding: 4px 13px;
font-family: var(--kg-font-display); font-size: .72rem; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
color: var(--kg-amber-deep); background: var(--kg-amber-soft);
border-radius: 999px;
}
/* ---- Schools: "in practice" places route ----
One platform, three places. Cards hang under map-marker pins strung along a
dashed route, so it reads as The Kids Gate travelling from classroom to home
to targeted help. */
.kg-places {
position: relative;
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 40px);
padding-top: 12px;
}
/* The route: a dashed line threading through the three pin centres. */
.kg-places::before {
content: ""; position: absolute; z-index: 0;
top: 46px; left: 16.66%; right: 16.66%;
border-top: 3px dashed rgba(28, 43, 58, .22);
}
.kg-place {
--acc: var(--kg-teal); --acc-deep: var(--kg-teal-deep); --acc-soft: var(--kg-teal-soft);
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center;
}
.kg-place--teal { --acc: var(--kg-teal); --acc-deep: var(--kg-teal-deep); --acc-soft: var(--kg-teal-soft); }
.kg-place--amber { --acc: var(--kg-amber); --acc-deep: var(--kg-amber-deep); --acc-soft: var(--kg-amber-soft); }
.kg-place--red { --acc: var(--kg-red); --acc-deep: var(--kg-red-deep); --acc-soft: var(--kg-red-soft); }
/* Map-marker pin sitting on the route: droplet-rounded, white-ringed. */
.kg-place__pin {
position: relative; z-index: 2;
display: grid; place-items: center;
/* Rotating a 76px square teardrop pushes its point ~16px below the box, so
a small positive margin lets that point rest on the card's top edge
instead of tucking behind it. z-index keeps the tip above the card. */
width: 76px; height: 76px; margin-bottom: 6px;
/* Teardrop with a sharp bottom-left corner; rotate -45° so the point aims
straight down, like a map marker planted on the route. */
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
background: var(--kg-white);
box-shadow: 0 0 0 3px var(--acc-soft), var(--kg-shadow-md);
}
.kg-place__pin .kg-bubble { transform: rotate(45deg); width: 52px; height: 52px; margin: 0; }
.kg-place__pin::after {
content: ""; position: absolute; inset: -3px;
border-radius: inherit;
box-shadow: 0 0 0 2px var(--acc);
opacity: 0; transform: scale(.8);
}
.kg-place.is-in .kg-place__pin::after { animation: kg-place-ping 2.6s var(--kg-ease-out) infinite; animation-delay: var(--kg-delay, 0ms); }
@keyframes kg-place-ping {
0% { opacity: .6; transform: scale(.85); }
60% { opacity: 0; transform: scale(1.4); }
100% { opacity: 0; transform: scale(1.4); }
}
.kg-place__card {
position: relative;
width: 100%;
/* Grid stretches every .kg-place to the tallest; the card grows to fill it
so all three read as the same height whatever the copy length. */
flex: 1 1 auto;
padding-top: 40px;
text-align: center;
}
.kg-place__card::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
background: var(--acc);
border-radius: var(--kg-r-lg) var(--kg-r-lg) 0 0;
}
.kg-place__label {
display: inline-flex; align-items: center; gap: 7px;
margin-bottom: 10px;
padding: 4px 13px 4px 10px;
font-family: var(--kg-font-display); font-size: .72rem; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
color: var(--acc-deep); background: var(--acc-soft);
border-radius: 999px;
}
.kg-place__label::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--acc); flex: none;
}
@media (max-width: 760px) {
.kg-places { grid-template-columns: 1fr; gap: 30px; }
/* The single container route is for the horizontal desktop layout only. On
mobile each pin connects to the next with its own segment, so the dashes
run strictly pin-to-pin and never overshoot the first or last marker. */
.kg-places::before { display: none; }
.kg-place { flex-direction: row; align-items: flex-start; gap: 18px; text-align: left; }
/* Pins turn sideways so the point aims right, at the card beside them. */
.kg-place__pin { flex: none; margin-bottom: 0; border-radius: 50% 50% 0 50%; }
/* Segment from this pin's centre down to the next pin's centre.
Pin centre sits 38px below the row top; rows are 30px apart, so the
segment ends 68px (30 + 38) past this row's bottom, landing on the next pin. */
.kg-place:not(:last-child)::after {
content: ""; position: absolute; z-index: 0;
left: 37px; top: 38px; bottom: -68px;
border-left: 3px dashed rgba(28, 43, 58, .22);
}
.kg-place__card { padding-top: clamp(20px, 5vw, 26px); text-align: left; }
.kg-place__card::before { width: 5px; height: auto; top: 0; bottom: 0; right: auto; border-radius: var(--kg-r-lg) 0 0 var(--kg-r-lg); }
}
@media (prefers-reduced-motion: reduce) {
.kg-place.is-in .kg-place__pin::after { animation: none; }
}
/* ---- Parents: how to join ---- */
.kg-join {
position: relative;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(18px, 2vw, 26px);
list-style: none; margin: 0; padding: 22px 0 0;
}
/* dashed progress track linking the four step badges (shows in the gaps) */
.kg-join::before {
content: ""; position: absolute; top: 14px; left: 12.5%; right: 12.5%;
height: 3px; z-index: 0;
background: repeating-linear-gradient(90deg, var(--kg-amber) 0 9px, transparent 9px 17px);
}
.kg-join__step {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: clamp(28px, 2.8vw, 36px) clamp(18px, 1.8vw, 24px) clamp(24px, 2.4vw, 30px);
background: #fff;
border: 1.5px solid var(--kg-cream-deep);
border-radius: var(--kg-r-lg);
box-shadow: var(--kg-shadow-sm);
transition: transform .25s var(--kg-ease-out), box-shadow .25s var(--kg-ease-out);
}
.kg-join__step:hover, .kg-join__step:focus-within {
transform: translateY(-6px); box-shadow: var(--kg-shadow-lg);
}
.kg-join__num {
position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
z-index: 2;
width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--kg-font-display); font-weight: 800; font-size: .95rem;
color: #fff; background: var(--kg-navy);
box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
}
.kg-join__icon { margin: 6px 0 14px; }
.kg-join__text { color: var(--kg-text-soft); margin: 0; }
.kg-join__step--cta {
background: var(--kg-amber-soft);
border-color: var(--kg-amber);
box-shadow: var(--kg-shadow-md);
}
.kg-join__step--cta .kg-join__num { background: var(--kg-amber); color: var(--kg-navy); }
.kg-join__cta { margin-top: 20px; }
/* ---- Parents: everyday extras — pinned notes ----
Tilt lives on the inner .kg-perk because the reveal transform on the
wrapper must end at `transform: none`. */
.kg-perks {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(22px, 3vw, 36px);
align-items: start;
list-style: none; margin: 0; padding: 18px 0 12px;
}
.kg-perks__slot:nth-child(2) { margin-top: clamp(20px, 3.4vw, 46px); }
.kg-perk {
position: relative;
padding: clamp(30px, 3vw, 38px) clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 28px);
border-radius: var(--kg-r-md);
transform: rotate(var(--kg-tilt, -1.7deg));
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md);
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur) var(--kg-ease-out);
}
.kg-perks__slot:nth-child(2) .kg-perk { --kg-tilt: 1.9deg; }
.kg-perks__slot:nth-child(3) .kg-perk { --kg-tilt: -1.2deg; }
.kg-perk:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--kg-clay-inset), var(--kg-shadow-lg); }
.kg-perk--teal { background: var(--kg-teal-soft); }
.kg-perk--amber { background: var(--kg-amber-soft); }
.kg-perk--red { background: var(--kg-red-soft); }
.kg-perk p { margin: 0; }
/* washi-tape strip pinning each note to the page */
.kg-perk__tape {
position: absolute; top: -13px; left: 50%;
width: 96px; height: 27px;
transform: translateX(-50%) rotate(-3.5deg);
background: rgba(255, 255, 255, .5);
border: 1.5px dashed rgba(28, 43, 58, .22);
border-radius: 4px;
}
.kg-perks__slot:nth-child(2) .kg-perk__tape { transform: translateX(-50%) rotate(3deg); }
.kg-perk__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; margin-bottom: 16px;
border-radius: 18px;
background: var(--kg-white);
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
}
.kg-perk--teal .kg-perk__icon { color: var(--kg-teal-deep); }
.kg-perk--amber .kg-perk__icon { color: var(--kg-amber-deep); }
.kg-perk--red .kg-perk__icon { color: var(--kg-red); }
@media (max-width: 720px) {
.kg-perks { grid-template-columns: 1fr; gap: 30px; }
.kg-perks__slot:nth-child(2) { margin-top: 0; }
}
/* ---- Parents: safety section (shield + security checklist) ----
Guarding shield with slow "radar" rings; protections listed as a
checklist rail, each row sealed with a verified tick. */
.kg-safe { overflow: hidden; }
.kg-safe__grid {
display: grid; grid-template-columns: minmax(260px, 380px) 1fr;
gap: clamp(32px, 5vw, 72px); align-items: center;
}
.kg-safe__shield {
position: relative;
width: min(320px, 76vw); aspect-ratio: 1;
display: grid; place-items: center; justify-self: center;
}
.kg-safe__ring { position: absolute; border-radius: 50%; }
.kg-safe__ring--1 {
inset: 0;
border: 2px dashed rgba(42, 191, 191, .38);
animation: kg-safe-spin 46s linear infinite;
}
.kg-safe__ring--2 {
inset: 11%;
border: 1px solid rgba(245, 166, 35, .3);
box-shadow: 0 0 44px rgba(245, 166, 35, .12) inset;
}
.kg-safe__ring--3 {
inset: 22%;
border: 2px dashed rgba(255, 255, 255, .14);
animation: kg-safe-spin 64s linear infinite reverse;
}
.kg-safe__shield-svg {
width: 46%;
filter: drop-shadow(0 10px 34px rgba(245, 166, 35, .35));
}
.kg-safe__shield-body { fill: var(--kg-amber); }
.kg-safe__shield-line { stroke: rgba(28, 43, 58, .3); stroke-width: 2.5; }
.kg-safe__shield-tick {
stroke: var(--kg-navy); stroke-width: 10;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 70; stroke-dashoffset: 70;
transition: stroke-dashoffset 700ms var(--kg-ease-out) 380ms;
}
.kg-safe__shield.is-in .kg-safe__shield-tick { stroke-dashoffset: 0; }
.kg-safe__list {
position: relative;
list-style: none;
display: grid; gap: 18px;
}
/* Rail connecting the badges — reads as one continuous line of defence. */
.kg-safe__list::before {
content: "";
position: absolute; left: 49px; top: 44px; bottom: 44px;
border-left: 2px dotted rgba(42, 191, 191, .35);
}
.kg-safe__item {
position: relative;
display: grid; grid-template-columns: 54px 1fr auto;
gap: 18px; align-items: center;
background: var(--kg-navy-soft);
border: 1px solid rgba(42, 191, 191, .22);
border-radius: var(--kg-r-md);
padding: 20px 22px;
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-md);
transition: transform .28s var(--kg-ease-out), border-color .28s ease;
}
.kg-safe__item:hover { transform: translateY(-4px); border-color: rgba(42, 191, 191, .55); }
.kg-safe__badge {
width: 54px; height: 54px;
display: grid; place-items: center;
border-radius: 18px;
background: var(--kg-amber-soft); color: var(--kg-amber-deep);
box-shadow: 0 0 0 2px rgba(245, 166, 35, .35), 0 0 22px rgba(245, 166, 35, .18);
}
.kg-safe__copy h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin-bottom: 4px; }
.kg-safe__copy p { margin: 0; color: var(--kg-text-on-dark-soft); }
.kg-safe__seal { color: var(--kg-teal); flex: none; }
@keyframes kg-safe-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
.kg-safe__grid { grid-template-columns: 1fr; gap: 36px; }
.kg-safe__shield { width: min(240px, 66vw); }
.kg-safe__item { grid-template-columns: 46px 1fr auto; padding: 18px; gap: 14px; }
.kg-safe__badge { width: 46px; height: 46px; border-radius: 15px; }
.kg-safe__list::before { left: 41px; }
}
@media (prefers-reduced-motion: reduce) {
.kg-safe__ring--1, .kg-safe__ring--3 { animation: none; }
.kg-safe__shield-tick { stroke-dashoffset: 0; transition: none; }
.kg-safe__item:hover { transform: none; }
}
/* ---- Parents: family profiles (one-account family hub) ----
Six child avatars orbit the parent-account home; feature rows sit beside
it. Mirrors the safety section's layout in the light family palette. */
.kg-fam__grid {
display: grid; grid-template-columns: 1fr minmax(260px, 400px);
gap: clamp(32px, 5vw, 72px); align-items: center;
}
.kg-fam__list { list-style: none; display: grid; gap: 18px; }
.kg-fam__item {
display: grid; grid-template-columns: 54px 1fr;
gap: 18px; align-items: center;
background: var(--kg-white);
border-radius: var(--kg-r-md);
padding: 20px 22px;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
transition: transform .28s var(--kg-ease-out), box-shadow .28s ease;
}
.kg-fam__item:hover { transform: translateY(-4px); box-shadow: var(--kg-clay-inset), var(--kg-shadow-md); }
.kg-fam__item .kg-bubble { width: 54px; height: 54px; }
.kg-fam__copy h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin-bottom: 4px; }
.kg-fam__copy p { margin: 0; color: var(--kg-text-soft); }
.kg-fam__viz { width: min(340px, 78vw); justify-self: center; }
.kg-fam__viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.kg-fam__spokes { stroke: rgba(28, 43, 58, .25); }
.kg-fam__hub-bg { fill: var(--kg-navy); }
.kg-fam__hub { filter: drop-shadow(0 8px 22px rgba(28, 43, 58, .28)); }
.kg-fam__hub-door { fill: var(--kg-amber); }
.kg-fam__heart-bg { fill: var(--kg-red); }
/* Sticker-style avatars: soft fill, white ring, simple smile. */
.kg-fam__kid-bg { stroke: #fff; stroke-width: 3.5; }
.kg-fam__kid--amber .kg-fam__kid-bg { fill: var(--kg-amber-soft); }
.kg-fam__kid--teal .kg-fam__kid-bg { fill: var(--kg-teal-soft); }
.kg-fam__kid--red .kg-fam__kid-bg { fill: var(--kg-red-soft); }
.kg-fam__kid--green .kg-fam__kid-bg { fill: var(--kg-green-soft); }
.kg-fam__kid--amber .kg-fam__kid-ink, .kg-fam__kid--amber .kg-fam__kid-smile { fill: var(--kg-amber-deep); stroke: var(--kg-amber-deep); }
.kg-fam__kid--teal .kg-fam__kid-ink, .kg-fam__kid--teal .kg-fam__kid-smile { fill: var(--kg-teal-deep); stroke: var(--kg-teal-deep); }
.kg-fam__kid--red .kg-fam__kid-ink, .kg-fam__kid--red .kg-fam__kid-smile { fill: var(--kg-red); stroke: var(--kg-red); }
.kg-fam__kid--green .kg-fam__kid-ink, .kg-fam__kid--green .kg-fam__kid-smile { fill: var(--kg-green-deep); stroke: var(--kg-green-deep); }
.kg-fam__kid-smile { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.kg-fam__kid-ink { stroke: none; }
/* Open slots: room for two more children on the account. */
.kg-fam__slot-bg { fill: rgba(255, 255, 255, .6); stroke: rgba(28, 43, 58, .3); stroke-width: 2; stroke-dasharray: 5 6; }
.kg-fam__slot-plus { stroke: rgba(28, 43, 58, .4); stroke-width: 2.5; stroke-linecap: round; }
/* The family assembles: avatars pop in one by one once the viz scrolls
into view, then drift gently. Float and pop live on separate wrappers so
the two transforms don't fight. */
.kg-fam__kid { transform: scale(0); transition: transform .5s var(--kg-ease-pop); transition-delay: var(--kg-kd, 0ms); }
.kg-fam__viz.is-in .kg-fam__kid { transform: scale(1); }
.kg-fam__float { animation: kg-fam-float 5.5s ease-in-out infinite; animation-delay: var(--kg-fd, 0s); }
@keyframes kg-fam-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@media (max-width: 900px) {
.kg-fam__grid { grid-template-columns: 1fr; gap: 34px; }
.kg-fam__viz { order: -1; width: min(270px, 72vw); }
.kg-fam__item { grid-template-columns: 46px 1fr; padding: 18px; gap: 14px; }
.kg-fam__item .kg-bubble { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
.kg-fam__float { animation: none; }
.kg-fam__kid { transform: scale(1); transition: none; }
.kg-fam__item:hover { transform: none; }
}
/* ---- About page ---- */
.kg-mission { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-family: var(--kg-font-display); font-weight: 600; color: var(--kg-navy); max-width: 26em; margin-inline: auto; text-align: center; line-height: 1.45; }
.kg-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 26px); }
/* ---------------------------------------------------------------------------
* About page — the storybook: chapter badges on a dashed story thread,
* the question block, the journey strip and the four-pillar Gate.
* ------------------------------------------------------------------------ */
.kg-chap {
display: flex; flex-direction: column; align-items: center; gap: 8px;
margin-bottom: clamp(20px, 3vw, 32px);
text-align: center;
}
/* The thread: a dashed line dropping into each chapter badge */
.kg-chap::before {
content: ""; width: 0; height: 42px;
border-left: 3px dashed var(--kg-amber);
opacity: .55;
}
.kg-chap__num {
width: 44px; height: 44px; border-radius: 50%;
display: grid; place-items: center;
background: var(--kg-amber); color: var(--kg-navy);
font-family: var(--kg-font-display); font-weight: 800; font-size: 1.15rem;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-sm);
}
.kg-chap__label {
font-family: var(--kg-font-display); font-weight: 800; font-size: .8rem;
letter-spacing: .08em; text-transform: uppercase;
color: var(--kg-text-soft);
}
.kg-section--navy .kg-chap__label { color: var(--kg-text-on-dark-soft); }
/* Chapter 2: the question, with a ghosted question mark behind it */
.kg-storyq { position: relative; text-align: center; }
.kg-storyq::before {
content: "?";
position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
font-family: var(--kg-font-display); font-weight: 800; font-size: clamp(9rem, 20vw, 15rem);
line-height: 1; color: var(--kg-amber); opacity: .08;
pointer-events: none; user-select: none;
}
.kg-storyq__quote {
max-width: 21em; margin: 10px auto clamp(30px, 4vw, 46px);
font-family: var(--kg-font-display); font-weight: 700;
font-size: clamp(1.35rem, 2.8vw, 1.9rem); line-height: 1.4;
color: var(--kg-teal-deep);
}
.kg-storyq__cards {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 24px);
max-width: 940px; margin-inline: auto;
text-align: left;
}
/* Chapter 3: the journey — milestones on a dotted path.
(Named "storyline" — .kg-journey already belongs to How It Works.) */
.kg-storyline {
position: relative;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 2.4vw, 28px);
max-width: 1020px; margin: clamp(24px, 3vw, 40px) auto 0;
}
/* The path runs from the first dot's centre to the last dot's centre.
Dots sit 10px into each of the four columns, so the right end is a quarter
of the row minus three quarters of one gap, minus the dot inset. */
.kg-storyline::before {
content: ""; position: absolute; top: 9px; left: 10px;
right: calc(25% - 0.75 * clamp(16px, 2.4vw, 28px) - 10px);
border-top: 3px dashed var(--kg-amber); opacity: .45;
}
.kg-storyline__step { position: relative; }
.kg-storyline__step--amber { --acc: var(--kg-amber); }
.kg-storyline__step--red { --acc: var(--kg-red); }
.kg-storyline__step--teal { --acc: var(--kg-teal); }
.kg-storyline__step--navy { --acc: var(--kg-navy); }
.kg-storyline__dot {
display: block; width: 21px; height: 21px; margin-bottom: 12px;
border-radius: 50%;
background: var(--acc, var(--kg-amber));
border: 4px solid var(--kg-cream);
box-shadow: var(--kg-shadow-sm);
}
/* Chapter 4: an arch resting on four pillars — the Gate itself */
.kg-pillars { max-width: 980px; margin-inline: auto; }
.kg-pillars__arch {
height: clamp(62px, 9vw, 92px);
margin: 0 0 10px;
border-radius: 999px 999px 0 0;
display: grid; place-items: center;
background: linear-gradient(180deg, var(--kg-amber), var(--kg-amber-deep));
color: var(--kg-navy);
font-family: var(--kg-font-display); font-weight: 800;
font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing: .02em;
box-shadow: var(--kg-clay-inset), var(--kg-shadow-md);
}
.kg-pillars__grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(10px, 1.6vw, 18px);
}
.kg-pillar {
display: flex; flex-direction: column;
padding: 18px 16px 16px;
background: #fff;
border: 1.5px solid var(--kg-cream-deep);
border-top: 5px solid var(--acc, var(--kg-amber));
border-radius: 6px 6px var(--kg-r-md) var(--kg-r-md);
box-shadow: var(--kg-shadow-sm);
}
.kg-pillar--amber { --acc: var(--kg-amber); --acc-deep: var(--kg-amber-deep); --acc-soft: var(--kg-amber-soft); }
.kg-pillar--red { --acc: var(--kg-red); --acc-deep: var(--kg-red-deep); --acc-soft: var(--kg-red-soft); }
.kg-pillar--teal { --acc: var(--kg-teal); --acc-deep: var(--kg-teal-deep); --acc-soft: var(--kg-teal-soft); }
.kg-pillar--navy { --acc: var(--kg-navy); --acc-deep: var(--kg-navy); --acc-soft: rgba(28, 43, 58, .1); }
.kg-pillar__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.kg-pillar__chips i {
font-style: normal; font-weight: 700; font-size: .72rem;
font-family: var(--kg-font-display);
padding: 3px 10px; border-radius: 999px;
background: var(--acc-soft); color: var(--acc-deep);
}
/* Chapter 5: the languages as SVG flags (emoji flags don't render on Windows) */
.kg-about-flags { display: flex; gap: 16px; justify-content: center; margin-top: 26px; }
.kg-about-flags .kg-flag {
width: 44px; border-radius: 7px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), var(--kg-shadow-sm);
}
@media (max-width: 900px) {
.kg-storyq__cards { grid-template-columns: 1fr; max-width: 480px; }
.kg-storyline { grid-template-columns: 1fr; gap: 22px; max-width: 480px; }
/* Path runs down the left on mobile; dots sit on it */
.kg-storyline::before { top: 4%; bottom: 4%; left: 9px; right: auto; border-top: 0; border-left: 3px dashed var(--kg-amber); }
.kg-storyline__step { padding-left: 40px; }
.kg-storyline__dot { position: absolute; left: 0; top: 2px; }
.kg-pillars__grid { grid-template-columns: repeat(2, 1fr); }
.kg-pillars__arch { height: 56px; font-size: .95rem; }
}
@media (max-width: 520px) {
.kg-pillars__grid { grid-template-columns: 1fr; }
}
/* ---- Final CTA band ---- */
.kg-final-cta {
background:
radial-gradient(900px 420px at 85% 0%, rgba(42, 191, 191, .25), transparent 55%),
radial-gradient(700px 380px at 10% 100%, rgba(245, 166, 35, .22), transparent 55%),
var(--kg-navy);
color: var(--kg-text-on-dark);
text-align: center;
border-radius: var(--kg-r-lg);
padding: clamp(44px, 7vw, 88px) clamp(24px, 5vw, 64px);
position: relative;
overflow: hidden;
box-shadow: var(--kg-shadow-lg);
}
.kg-final-cta h2 { color: #fff; max-width: 18em; margin-inline: auto; }
.kg-final-cta .kg-lede { color: var(--kg-text-on-dark-soft); margin-inline: auto; }
.kg-final-cta__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 28px 0 22px; }
.kg-final-cta .kg-chips { justify-content: center; margin-bottom: 26px; }
.kg-final-cta .kg-store-badges { justify-content: center; }
/* =========================================================================
Responsive
========================================================================= */
@media (max-width: 1240px) {
.kg-nav__list a { padding: 10px 10px; font-size: .92rem; }
}
/* The desktop header (nav + language + CTA) needs ~1240px of room; below that
it collapses to the burger so the Start Free Trial CTA never gets clipped. */
@media (max-width: 1240px) {
.kg-burger { display: flex; }
.kg-header__cta, .kg-header__actions .kg-lang { display: none; }
/* backdrop-filter would become the containing block for the fixed
mobile nav, trapping it inside the header pill — solid bg instead */
.kg-header__inner { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .97); }
.kg-nav {
position: fixed; inset: 0;
z-index: -1;
background: var(--kg-cream);
padding: 110px var(--kg-gutter) 40px;
opacity: 0; visibility: hidden;
transition: opacity 240ms var(--kg-ease-out), visibility 240ms;
overflow-y: auto;
margin: 0;
}
body.kg-nav-open .kg-nav { opacity: 1; visibility: visible; }
body.kg-nav-open { overflow: hidden; }
.kg-nav__list { flex-direction: column; gap: 4px; }
.kg-nav__list a { font-size: 1.35rem; font-family: var(--kg-font-display); padding: 13px 18px; }
.kg-nav__list a.kg-active::after { display: none; }
.kg-nav__mobile-extra, .kg-nav__mobile-home { display: block; }
.kg-nav__mobile-foot { display: grid; gap: 16px; margin-top: 28px; padding: 0 18px; }
.kg-stats { grid-template-columns: repeat(2, 1fr); }
.kg-problems, .kg-rewards__grid, .kg-values, .kg-steps-row { grid-template-columns: repeat(2, 1fr); }
.kg-join { grid-template-columns: repeat(2, 1fr); }
.kg-join::before { display: none; }
.kg-ai__loop { grid-template-columns: repeat(2, 1fr); }
.kg-ai__arrow { display: none; }
.kg-dash, .kg-spot, .kg-support-grid, .kg-builder, .kg-dashstage { grid-template-columns: 1fr; }
.kg-spot--flip .kg-spot__visual { order: 0; }
.kg-builder__summary { position: static; }
/* Tablet: brand becomes a horizontal band across the top, then three even
nav columns below — keeps the footer short and avoids dead space. */
.kg-footer__inner { grid-template-columns: repeat(3, 1fr); }
.kg-footer__brand {
grid-column: 1 / -1;
display: flex; flex-wrap: wrap; align-items: center;
gap: 14px 36px;
padding-bottom: 28px; margin-bottom: 4px;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.kg-footer__brand .kg-footer__tag { margin: 0; flex: 1 1 220px; max-width: none; }
.kg-footer__brand .kg-store-badges { margin-left: auto; }
.kg-footer__social { margin-top: 0; }
}
@media (max-width: 640px) {
body { font-size: 16px; }
/* Wrapped inline backgrounds fragment mid-line — use colour emphasis instead */
.kg-squiggle, .kg-squiggle--teal { background: none; padding-bottom: 0; color: var(--kg-amber-deep); }
.kg-squiggle--teal { color: var(--kg-teal-deep); }
.kg-squiggle--green { color: var(--kg-green-deep); }
.kg-underline-red { text-decoration: none; color: var(--kg-red); }
.kg-section--navy .kg-squiggle, .kg-final-cta .kg-squiggle { color: var(--kg-amber); }
.kg-problems, .kg-values, .kg-steps-row, .kg-ai__loop, .kg-plans, .kg-rewards__grid, .kg-join { grid-template-columns: 1fr; }
/* abs-positioned shrink-to-fit would cap width at half the box — force
max-content, wrap only when the label really can't fit */
.kg-vs__pill { font-size: .85rem; padding: 8px 14px; width: max-content; max-width: calc(100% - 20px); white-space: normal; text-align: center; }
/* Phone: pills above, sort control full-width below; count left-aligned. */
.kg-support-toolbar { flex-direction: column; align-items: stretch; }
.kg-support-sort { justify-content: space-between; }
.kg-support-count { text-align: left; }
/* Phone: brand and support span full width; the two nav columns (Explore,
Company) sit side-by-side to use the space and keep the footer short. */
.kg-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.kg-footer__brand {
display: block; grid-column: 1 / -1;
padding-bottom: 0; margin-bottom: 0; border-bottom: 0;
}
.kg-footer__brand .kg-footer__tag { margin: 12px 0 18px; flex: none; }
.kg-footer__brand .kg-store-badges { margin-left: 0; }
.kg-footer__social { margin-top: 16px; }
.kg-footer__col--support { grid-column: 1 / -1; }
.kg-journey__step, .kg-journey__step:nth-child(even) { flex-direction: column; text-align: center; margin: 0 auto; }
.kg-form-grid { grid-template-columns: 1fr; }
.kg-hero__badge { display: none; }
.kg-btn { padding: 15px 26px; font-size: 1rem; }
/* Pin both edges so spacing is even regardless of scrollbar width, and
let the panel extend down over the launcher button. */
.kg-helper { left: 12px; right: 12px; bottom: 14px; width: auto; }
/* Collapse the launcher to a circular icon-only button on phones. */
.kg-helper-fab {
right: 14px; bottom: 14px;
width: 56px; height: 56px;
padding: 0; gap: 0;
justify-content: center;
border-radius: 50%;
}
.kg-helper-fab__label { display: none; }
.kg-helper-fab svg { width: 24px; height: 24px; }
.kg-ainode__label { font-size: 14.5px; }
.kg-ainode--mini .kg-ainode__label { font-size: 13px; }
}
/* =========================================================================
Reduced motion: no movement, but keep gentle opacity-only fades so the
page still feels alive (fade-only fallback — reveals lose their
translate/scale and become plain cross-fades).
========================================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
[data-kg-reveal] {
transform: none !important; /* kill translate/scale variants too */
transition-property: opacity !important;
transition-duration: 600ms !important;
}
.kg-float--bob { animation: none; }
/* Journey timeline: no travelling orb or unfold movement — the line shows
fully drawn and steps fade in (main.js fills the track statically). */
.kg-jt__orb { display: none; }
/* Session timeline: no ball drop or progressive lighting. */
.kg-timeline__ball { display: none; }
.kg-timeline.is-armed::before { background: linear-gradient(var(--kg-teal), var(--kg-amber)); }
.kg-timeline.is-armed .kg-timeline__item:not(.is-lit) .kg-timeline__dot { filter: none; }
.kg-timeline__item.is-lit .kg-timeline__dot { transform: none; }
.kg-jt__node { filter: none; transform: translateX(-50%); }
.kg-jt__card {
transform: none !important;
transition-property: opacity !important;
transition-duration: 600ms !important;
}
.kg-jt__body { grid-template-rows: 1fr; }
/* Draw-in squiggles can't animate here, so show them fully drawn. */
.kg-squiggle--draw { background-size: 100% .5em !important; }
/* Mastery ring: show its final value instead of an empty track. */
.kg-ring__fg { stroke-dashoffset: calc(100 - var(--kg-ring)) !important; }
}
/* ---------------------------------------------------------------------------
* Sponsors page — partnership tiers + partner logo wall
* ------------------------------------------------------------------------ */
.kg-tiers {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(14px, 1.8vw, 22px);
align-items: stretch;
}
/* Podium: --kg-tier-step (set in markup, highest tier = 0) pushes lower tiers
down so the cards climb toward the Founding Champion. */
.kg-tier {
--acc: var(--kg-teal); --acc-deep: var(--kg-teal-deep); --acc-soft: var(--kg-teal-soft);
position: relative;
display: flex;
flex-direction: column;
margin-top: calc(var(--kg-tier-step, 0) * 30px);
padding: clamp(20px, 2.4vw, 30px);
background: #fff;
border: 1.5px solid var(--kg-cream-deep);
border-radius: var(--kg-r-lg);
box-shadow: var(--kg-shadow-sm);
}
.kg-tier--red { --acc: var(--kg-red); --acc-deep: var(--kg-red-deep); --acc-soft: var(--kg-red-soft); }
.kg-tier--amber { --acc: var(--kg-amber); --acc-deep: var(--kg-amber-deep); --acc-soft: var(--kg-amber-soft); }
/* Snappy hover once revealed (retakes the transition from the reveal system) */
.kg-tier.is-in {
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur) var(--kg-ease-out);
transition-delay: 0ms;
}
.kg-tier:hover {
transform: translateY(-6px);
box-shadow: var(--kg-shadow-lg), 0 22px 40px -18px color-mix(in srgb, var(--acc) 45%, transparent);
}
.kg-tier--featured { border-color: var(--kg-amber); box-shadow: var(--kg-shadow-lg); }
/* Founding Champion: the dark, premium card at the top of the podium */
.kg-tier--navy {
background: linear-gradient(165deg, var(--kg-navy-soft) -20%, var(--kg-navy) 45%, var(--kg-navy-deep));
border-color: transparent;
color: var(--kg-text-on-dark);
box-shadow: var(--kg-clay-inset-dark), var(--kg-shadow-md);
}
.kg-tier__flag {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
padding: 5px 16px;
font-family: var(--kg-font-display);
font-size: .82rem;
font-weight: 700;
white-space: nowrap;
color: var(--kg-navy);
background: var(--kg-amber);
border-radius: 999px;
box-shadow: 0 4px 0 var(--kg-amber-deep);
}
.kg-tier__flag--top { background: var(--kg-teal); color: #fff; box-shadow: 0 4px 0 var(--kg-teal-deep); }
.kg-tier__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
/* Level dots: filled dots = tier level, echoing in-app progress */
.kg-tier__level { display: inline-flex; gap: 5px; }
.kg-tier__level i { width: 9px; height: 9px; border-radius: 50%; background: var(--kg-cream-deep); }
.kg-tier__level i.is-on { background: var(--acc); }
.kg-tier--navy .kg-tier__level i { background: rgba(255, 255, 255, .16); }
.kg-tier--navy .kg-tier__level i.is-on { background: var(--kg-amber); }
.kg-tier__name { font-size: 1.25rem; margin: 0 0 2px; }
.kg-tier--navy .kg-tier__name { color: #fff; }
/* Who this tier suits — the sponsor persona line */
.kg-tier__who {
margin: 0 0 10px;
font-family: var(--kg-font-display);
font-size: .78rem; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
color: var(--acc-deep);
}
.kg-tier--navy .kg-tier__who { color: var(--kg-amber); }
.kg-tier__blurb { color: var(--kg-text-soft); margin: 0 0 14px; font-size: .95rem; }
.kg-tier--navy .kg-tier__blurb { color: var(--kg-text-on-dark-soft); }
/* "Everything in , plus" pill */
.kg-tier__prev {
align-self: flex-start;
margin: 0 0 12px;
padding: 4px 12px;
font-family: var(--kg-font-display);
font-size: .78rem; font-weight: 700;
color: var(--acc-deep); background: var(--acc-soft);
border-radius: 999px;
}
.kg-tier--navy .kg-tier__prev { background: var(--kg-navy-soft); color: var(--kg-text-on-dark); }
.kg-tier__points { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; flex: 1 1 auto; align-content: start; }
.kg-tier__points li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; font-size: .93rem; }
.kg-tier__points svg { flex: none; margin-top: 3px; color: var(--acc-deep); }
.kg-tier--navy .kg-tier__points svg { color: var(--kg-teal); }
/* Ad-free reassurance band under the tier podium */
.kg-tiers__adfree {
display: flex; gap: 12px; align-items: flex-start;
max-width: 720px;
margin: 30px auto 0;
padding: 14px 18px;
background: var(--kg-teal-soft);
border-radius: var(--kg-r-md);
font-size: .92rem; font-weight: 600;
}
.kg-tiers__adfree svg { flex: none; color: var(--kg-teal-deep); margin-top: 2px; }
.kg-logos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 22px);
}
.kg-logo-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 120px;
padding: 20px;
text-align: center;
color: var(--kg-text-soft);
background: #fff;
border: 1.5px dashed var(--kg-cream-deep);
border-radius: var(--kg-r-md);
font-size: .85rem;
font-weight: 600;
}
.kg-logo-tile svg { color: var(--kg-teal); opacity: .65; }
@media (max-width: 1060px) {
/* Two columns: drop the podium stagger, keep room for the flags */
.kg-tiers { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
.kg-tier { margin-top: 0; }
}
@media (max-width: 640px) {
.kg-tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 600px) {
.kg-logos { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.kg-tier:hover { transform: none; }
}
/* Avatar studio — character switcher (Girl / Boy), sits above the hat picks */
.kg-avastudio__chars {
grid-column: 1 / -1;
text-align: center;
margin-bottom: 4px;
}
.kg-avastudio__chars-label {
display: block;
font-family: var(--kg-font-display); font-weight: 700;
font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
color: var(--kg-text-soft); margin-bottom: 10px;
}
.kg-avastudio__chars-row {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: clamp(12px, 1.8vw, 20px);
}
.kg-avastudio__char {
display: flex; flex-direction: column; align-items: center; gap: 8px;
background: var(--kg-white);
border: 2px solid var(--kg-cream-deep);
border-radius: var(--kg-r-md);
padding: clamp(12px, 1.6vw, 18px) 12px;
box-shadow: var(--kg-shadow-sm);
font: inherit; cursor: pointer; text-align: center;
transition: transform var(--kg-dur) var(--kg-ease-pop), box-shadow var(--kg-dur), border-color var(--kg-dur), background var(--kg-dur);
}
.kg-avastudio__char:hover { transform: translateY(-3px); border-color: var(--kg-amber); box-shadow: var(--kg-shadow-md); }
.kg-avastudio__char:hover .kg-avastudio__char-box img { transform: scale(1.06); }
.kg-avastudio__char:focus-visible { outline: 3px solid var(--kg-amber); outline-offset: 3px; }
.kg-avastudio__char.is-on {
border-color: var(--kg-amber);
background: var(--kg-amber-soft);
box-shadow: var(--kg-shadow-md);
}
.kg-avastudio__char-box {
height: clamp(96px, 10vw, 120px);
display: flex; align-items: flex-end; justify-content: center;
}
.kg-avastudio__char-box img {
height: 100%; width: auto; max-width: 100%;
object-fit: contain;
filter: drop-shadow(0 5px 7px rgba(28, 43, 77, .2));
transition: transform var(--kg-dur) var(--kg-ease-pop);
}
.kg-avastudio__char small {
font-family: var(--kg-font-display); font-weight: 700;
font-size: .95rem; color: var(--kg-navy);
}
/* ===================== Schools: dashboard write-up ===================== */
.kg-sv{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(26px,3.4vw,52px); align-items:center; }
.kg-sv__media{ border-radius:var(--kg-r-md); overflow:hidden; box-shadow:var(--kg-shadow-md); border:1px solid var(--kg-cream-deep); background:#fff; }
.kg-sv__media img{ width:100%; display:block; }
.kg-sv__note{ font-size:.78rem; color:var(--kg-text-soft); margin:10px 0 0; text-align:center; }
.kg-sv__list{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:20px 0 0; padding:0; }
.kg-sv__list li{ display:flex; gap:12px; align-items:flex-start; font-size:1rem; color:var(--kg-text); }
.kg-sv__check{ width:26px; height:26px; border-radius:8px; background:var(--kg-teal-soft); color:var(--kg-teal-deep); display:grid; place-items:center; flex:none; font-weight:700; }
.kg-sv__cap{ margin:18px 0 0; font-family:var(--kg-font-display); font-weight:700; color:var(--kg-teal-deep); font-size:1.05rem; }
.kg-steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,26px); }
.kg-step3{ background:#fff; border:1.5px solid var(--kg-cream-deep); border-radius:var(--kg-r-md); padding:clamp(20px,2.4vw,28px); box-shadow:var(--kg-shadow-sm); }
.kg-step3__n{ width:40px; height:40px; border-radius:50%; background:var(--kg-amber); color:#fff; font-family:var(--kg-font-display); font-weight:700; font-size:19px; display:grid; place-items:center; margin-bottom:14px; }
.kg-aud{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); }
.kg-aud__card{ background:#fff; border:1.5px solid var(--kg-cream-deep); border-radius:var(--kg-r-md); padding:clamp(24px,2.8vw,34px); box-shadow:var(--kg-shadow-sm); }
.kg-aud__list{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.kg-aud__list li{ display:flex; gap:10px; align-items:flex-start; font-size:.98rem; color:var(--kg-text); }
.kg-aud__list li::before{ content:"\2713"; color:var(--kg-teal-deep); font-weight:700; flex:none; }
.kg-paths{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,20px); }
.kg-path{ background:#fff; border-radius:var(--kg-r-md); padding:clamp(20px,2.2vw,26px); text-align:center; box-shadow:var(--kg-shadow-sm); border-top:5px solid var(--kg-teal); }
.kg-path:nth-child(2){ border-top-color:var(--kg-amber); }
.kg-path:nth-child(3){ border-top-color:#E4572E; }
.kg-path:nth-child(4){ border-top-color:var(--kg-navy); }
.kg-path h3{ margin:0 0 6px; }
.kg-path p{ margin:0; font-size:.95rem; color:var(--kg-text-soft); }
.kg-mid-cta{ text-align:center; margin-top:clamp(26px,3vw,40px); }
@media (max-width:900px){
.kg-sv,.kg-aud{ grid-template-columns:1fr; }
.kg-steps3{ grid-template-columns:1fr; }
.kg-paths{ grid-template-columns:1fr 1fr; }
}
/* ===================== Schools page v2: hero, product frame, workflow ===================== */
.kg-shero-sec{ overflow:hidden; }
.kg-shero{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,60px); align-items:center; }
.kg-shero__copy{ max-width:560px; }
/* One consistent frame for every in-app product screenshot (all supplied at 16:9) */
.kg-prodimg{ display:block; width:100%; aspect-ratio:16/9; background:var(--kg-cream); border:1px solid var(--kg-cream-deep); border-radius:var(--kg-r-lg); box-shadow:var(--kg-shadow-md); overflow:hidden; padding:0; }
.kg-prodimg img{ width:100%; height:100%; object-fit:contain; display:block; }
.kg-prodimg--onnavy{ background:#fff; border-color:rgba(255,255,255,.16); }
/* Connected workflow: alternating image / copy rows */
.kg-flow{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,3.6vw,56px); align-items:center; margin-bottom:clamp(30px,4vw,56px); }
.kg-flow:last-child{ margin-bottom:0; }
.kg-flow--rev .kg-flow__media{ order:2; }
.kg-flow__copy{ max-width:520px; }
@media (max-width:900px){
.kg-shero{ grid-template-columns:1fr; }
.kg-flow{ grid-template-columns:1fr; }
.kg-flow--rev .kg-flow__media{ order:0; }
}