/* GENERATED by tooling/scripts/gen-static-site.mjs, do not edit.
 * Sources: apps/web/static-site/fonts.css, apps/web/static-site/base.css, apps/web/src/app/kit-tokens.generated.css, apps/web/src/components/marketing/motto.css, apps/web/src/components/marketing/landing.css
 */

/* ── apps/web/static-site/fonts.css ── */
/* Lexend (headings) and Noto Sans (body), latin and latin-ext, self-hosted:
   the files and metrics next/font served the landing (2026-10-01 build). The
   Arial fallbacks carry its size-adjust so the swap moves nothing. */
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/site/assets/fonts/noto-sans-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/site/assets/fonts/noto-sans-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-family:"Noto Sans Fallback";src:local("Arial");ascent-override:100.54%;descent-override:27.56%;line-gap-override:0.00%;size-adjust:106.33%}
@font-face{font-family:Lexend;font-style:normal;font-weight:100 900;font-display:swap;src:url(/site/assets/fonts/lexend-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:Lexend;font-style:normal;font-weight:100 900;font-display:swap;src:url(/site/assets/fonts/lexend-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-family:"Lexend Fallback";src:local("Arial");ascent-override:90.98%;descent-override:22.74%;line-gap-override:0.00%;size-adjust:109.91%}
:root{--font-sans:"Noto Sans","Noto Sans Fallback";--font-heading:Lexend,"Lexend Fallback"}
body{font-family:var(--font-sans);font-style:normal}

/* ── apps/web/static-site/base.css ── */
/* The base the Next site gave every page: Tailwind v4.3.1 preflight (MIT, https://tailwindcss.com)
   and apps/web/src/app/globals.css base layer, as compiled by the last Next
   build of the landing (2026-10-01), with the theme variables it read written
   in. Frozen here: the static site no longer builds Tailwind. */
@layer base {
*,::backdrop,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}
::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}
:host,html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--font-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}
hr{height:0;color:inherit;border-top-width:1px}
abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}
small{font-size:80%}
sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}
sub{bottom:-.25em}
sup{top:-.5em}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
:-moz-focusring{outline:auto}
progress{vertical-align:baseline}
summary{display:list-item}
menu,ol,ul{list-style:none}
audio,canvas,embed,iframe,img,object,svg,video{vertical-align:middle;display:block}
img,video{max-width:100%;height:auto}
button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}
::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}
:where(select:is([multiple],[size])) optgroup{font-weight:bolder}
:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}
::file-selector-button{margin-inline-end:4px}
::placeholder{opacity:1}
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}
@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}
}
}
textarea{resize:vertical}
::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}
::-webkit-datetime-edit{display:inline-flex}
::-webkit-datetime-edit-fields-wrapper{padding:0}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field{padding-block:0}
::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field{padding-block:0}
::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{padding-block:0}
::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field{padding-block:0}
::-webkit-datetime-edit-meridiem-field{padding-block:0}
::-webkit-calendar-picker-indicator{line-height:1}
:-moz-ui-invalid{box-shadow:none}
button,input:where([type=button],[type=reset],[type=submit]){appearance:button}
::file-selector-button{appearance:button}
::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}
[hidden]:where(:not([hidden=until-found])){display:none!important}
h1,h2,h3{font-family:var(--font-heading),ui-sans-serif,system-ui,sans-serif}
*{border-color:#e5e7eb}
}

/* globals.css (@layer utilities): the page colours. */
@layer utilities {
body{color:#111827;background:#fff}
}

/* ── apps/web/src/app/kit-tokens.generated.css ── */
/* GENERATED, do not edit.
 * Source: packages/ui-tokens/src/{colors,spacing,radii,typography}.js and
 * packages/ui/src/buttonModel.ts (BUTTON_SIZES.sm; md is pinned in gen-web-tokens.mjs, W-2334).
 * Regenerate with: node tooling/scripts/gen-web-tokens.mjs
 */
:root {
  --kit-color-primary: #19ACE6;
  --kit-color-primary-ink: #0E6E90;
  --kit-color-primary-light: #E3F2FD;
  --kit-color-brand-cyan: #19ACE6;
  --kit-color-bg: #F3F4F6;
  --kit-color-background: #FFFFFF;
  --kit-color-text: #111827;
  --kit-color-text-muted: #6B7280;
  --kit-color-border: #E5E7EB;
  --kit-color-border-faint: rgba(17, 24, 39, 0.055);
  --kit-color-field-border: #8A94A2;
  --kit-color-on-brand: #FFFFFF;
  --kit-color-on-brand-faint: rgba(255, 255, 255, 0.5);
  --kit-color-on-brand-chip: rgba(255, 255, 255, 0.2);
  --kit-color-on-brand-rule: rgba(255, 255, 255, 0.18);
  --kit-color-on-brand-panel: rgba(255, 255, 255, 0.1);
  --kit-space-xxs: 2px;
  --kit-space-xs: 4px;
  --kit-space-xs-plus: 6px;
  --kit-space-sm: 8px;
  --kit-space-sm-plus: 10px;
  --kit-space-md: 12px;
  --kit-space-lg: 16px;
  --kit-space-lg-plus: 20px;
  --kit-space-xl: 24px;
  --kit-space-2xl: 32px;
  --kit-space-3xl: 48px;
  --kit-radius-xs: 3px;
  --kit-radius-sm: 6px;
  --kit-radius-base: 8px;
  --kit-radius-sm-plus: 10px;
  --kit-radius-md: 12px;
  --kit-radius-md-plus: 14px;
  --kit-radius-lg: 16px;
  --kit-radius-lg-plus: 18px;
  --kit-radius-xl: 20px;
  --kit-radius-2xl: 24px;
  --kit-radius-full: 9999px;
  --kit-text-xxs: 10px;
  --kit-leading-xxs: 15px;
  --kit-text-xs: 11px;
  --kit-leading-xs: 16.5px;
  --kit-text-sm: 12px;
  --kit-leading-sm: 16px;
  --kit-text-sm-plus: 13px;
  --kit-leading-sm-plus: 19.5px;
  --kit-text-base: 14px;
  --kit-leading-base: 20px;
  --kit-text-base-plus: 15px;
  --kit-leading-base-plus: 22.5px;
  --kit-text-md: 16px;
  --kit-leading-md: 24px;
  --kit-text-lg: 18px;
  --kit-leading-lg: 28px;
  --kit-text-xl: 20px;
  --kit-leading-xl: 28px;
  --kit-text-2xl: 24px;
  --kit-leading-2xl: 32px;
  --kit-text-3xl: 28px;
  --kit-leading-3xl: 36px;
  --kit-text-xxl: 32px;
  --kit-leading-xxl: 40px;
  --kit-leading-prose: 22.75px;
  --kit-button-md-height: 48px;
  --kit-button-md-radius: 12px;
  --kit-button-md-pad-x: 20px;
  --kit-button-md-font: 16px;
  --kit-button-md-line: 24px;
  --kit-button-md-gap: 8px;
  --kit-button-md-glyph: 18px;
  --kit-button-sm-height: 36px;
  --kit-button-sm-radius: 10px;
  --kit-button-sm-pad-x: 14px;
  --kit-button-sm-font: 14px;
  --kit-button-sm-line: 20px;
  --kit-button-sm-gap: 6px;
  --kit-button-sm-glyph: 16px;
}

/* ── apps/web/src/components/marketing/motto.css ── */
/* The motto (owner, 2026-09-25), shared by the landing hero and the login's
   brand panel (Motto.tsx). Always two lines, line 2 fixed, only the audience
   words in line 1 swap. Each page sizes the h1 from its own column so the
   longer line ("Your child's day,") fits on one line: it is about 10 em wide
   in Lexend bold, so the column over 10.6 leaves room. */
.k2u-motto { position: relative;}
.k2u-motto .k2u-motto-l1,
.k2u-motto .k2u-motto-l2 { display: block; white-space: nowrap;}
/* The phrase box: a fixed line box (a swap shifts nothing below it) whose
   width glides between the two phrases. Tall enough for descenders. */
.k2u-motto .k2u-motto-swap { display: inline-block; position: relative; vertical-align: bottom; height: 1.2em; overflow: hidden; white-space: nowrap; transition: width .45s cubic-bezier(.2, .8, .2, 1);}
.k2u-motto .k2u-motto-sizer { visibility: hidden;}
.k2u-motto .k2u-motto-phrase { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;}
.k2u-motto .k2u-motto-phrase.is-in { transform: translateY(-70%); opacity: 0; transition: none;}
.k2u-motto .k2u-motto-phrase.is-out { transform: translateY(70%); opacity: 0;}
/* Out of sight: the two phrases at the headline's size, for the width glide. */
.k2u-motto .k2u-motto-measure { position: absolute; visibility: hidden; white-space: nowrap; pointer-events: none; left: 0; top: 0;}
.k2u-motto .k2u-motto-measure > span { position: absolute; left: 0; top: 0;}
/* One stable sentence for screen readers. */
.k2u-motto .k2u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;}
@media (prefers-reduced-motion: reduce) {
  .k2u-motto .k2u-motto-swap, .k2u-motto .k2u-motto-phrase { transition: none;}
}

/* ── apps/web/src/components/marketing/landing.css ── */
/* Edu2U marketing landing: scoped styles (k2u- prefix, no leak).
   Ported from docs/marketing/landing-v1.html; committed light theme.
   Fonts inherit the app's Lexend (--font-heading) + Noto Sans (--font-sans).

   THE LOOK IS THE OWNER'S AND STAYS (2026-09-25): its own palette, the orange,
   the glows and the circles. What the 2026-09-25 pass changed is FORMATTING
   only, and it runs on one system so a later edit cannot drift it again:
   - every space is a kit step (`--kit-space-*`, generated from
     packages/ui-tokens/src/spacing.js into app/kit-tokens.generated.css), and
     a section's air is ONE variable, `--sec-pad`, 48 / 64 / 96 by width;
   - one column (`--maxw`) with equal gutters, which grows on wide screens;
   - two families only, Lexend and Noto Sans (no monospace);
   - every button is 48 tall, and every tap target is at least 44;
   - short screens (a phone held sideways, 200% zoom on a laptop) unstick the
     bar and scale the hero by height; 200% zoom on a phone reflows. */

.k2u-landing {
    --ground:      #E7EFF4;
    --surface:     #FFFFFF;
    --surface-2:   #DBE8F0;
    --ink:         #111827;  
    --ink-soft:    #374151;  
    --muted:       #6B7280;  
    --line:        #DAE2EA;  
    --line-strong: #C6D1DB;

    --brand:        #19ACE6;  
    --brand-ink:    #0E6E90;  
    --brand-strong: #1590C0;  
    --brand-soft:   #E0F4FC;  

    --accent:      #FC8400;  
    --accent-ink:  #C4590A;  
    --accent-soft: #FDE7CE;  

    --owner:       #6B46C1;  
    --owner-soft:  #EDE9FE;
    --teacher:     #059669;  
    --teacher-soft:#D1FAE5;
    --parent:      #0891B2;  
    --parent-soft: #D5EEF5;
    --teacher-ink: #047857;  
    --parent-ink:  #0E7490;  

    /* White on the old #1590C0 measured 3.6:1 and failed AA for button text
       (audit WA-5). #137FAA is the owner's own recorded fallback for text on
       the brand fill (packages/ui-tokens/src/colors.js, the \`primary\` note):
       4.52:1, and the closest passing shade to the old one. Owner-flippable at
       review: the audit's darker #0E6E90 (5.75:1) is the other passing pick. */
    --btn-bg:      #137FAA;
    --btn-text:    #FFFFFF;

    --pos:         #16A34A;
    --warn:        #B7791F;

    --shadow-sm: 0 1px 2px rgba(17,24,39,.06), 0 1px 3px rgba(17,24,39,.05);
    --shadow-md: 0 10px 30px -12px rgba(17,24,39,.16), 0 3px 8px -4px rgba(17,24,39,.10);
    --shadow-lg: 0 30px 60px -24px rgba(17,24,39,.22);

    --maxw: 1140px;
    --gutter: var(--kit-space-xl);
    /* A section's air, above and below, one value per width. */
    --sec-pad: var(--kit-space-3xl);
    /* The top bar's height; anchors land below it. */
    --nav-h: 72px;
    --radius: 16px;
    --radius-sm: 10px;

    --font-display: var(--font-heading), ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
    --font-body: var(--font-sans), system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
}

@media (min-width: 768px) {
  .k2u-landing { --sec-pad: calc(2 * var(--kit-space-2xl)); }
}
@media (min-width: 1024px) {
  .k2u-landing { --sec-pad: calc(2 * var(--kit-space-3xl)); }
}
/* Wide screens: the column grows so a 2560 screen is not a strip down the
   middle (audit WA-6). */
@media (min-width: 1600px) {
  .k2u-landing { --maxw: 1360px; }
}
@media (min-width: 2200px) {
  .k2u-landing { --maxw: 1600px; }
}

.k2u-landing * { box-sizing: border-box;}

.k2u-landing {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    /* clip (not hidden) so any stray wide child can't pan the page sideways
       on phones while the sticky nav keeps working */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;}

.k2u-landing .k2u-wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);}

.k2u-landing h1, .k2u-landing h2, .k2u-landing h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; text-wrap: balance;}

.k2u-landing h1, .k2u-landing h2, .k2u-landing h3, .k2u-landing p, .k2u-landing li, .k2u-landing summary, .k2u-landing span { overflow-wrap: anywhere;}

/* Anchor jumps land below the sticky bar, not under it. */
.k2u-landing section[id] { scroll-margin-top: var(--nav-h);}

.k2u-landing a { color: inherit;}

.k2u-landing img { max-width: 100%;}

.k2u-landing .k2u-eyebrow {
    font-family: var(--font-display);
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-ink);
    font-weight: 600;}

.k2u-landing .k2u-hero .k2u-eyebrow { color: color-mix(in srgb, var(--on-band) 88%, transparent);}

.k2u-landing .k2u-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-body); font-weight: 600; font-size: 16px;
    /* Every button is the kit's md button, 48 tall at radius 12
       (packages/ui/src/buttonModel.ts). */
    height: var(--kit-button-md-height); padding: 0 22px; border-radius: var(--kit-button-md-radius); border: 1.5px solid transparent;
    justify-content: center;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;}

.k2u-landing .k2u-btn-primary { background: var(--btn-bg); color: var(--btn-text); box-shadow: var(--shadow-sm);}

.k2u-landing .k2u-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md);}

.k2u-landing .k2u-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong);}

.k2u-landing .k2u-btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px);}

.k2u-landing .k2u-btn-wa { background: transparent; color: var(--ink); border-color: var(--line-strong);}

.k2u-landing .k2u-btn-wa:hover { border-color: #25D366; color: #128C4B; transform: translateY(-2px);}

/* On the band the WhatsApp button is outlined in white. */
.k2u-landing .k2u-hero .k2u-btn-wa { color: var(--on-band); border-color: color-mix(in srgb, var(--on-band) 45%, transparent);}
.k2u-landing .k2u-hero .k2u-btn-wa:hover { color: var(--on-band); border-color: var(--on-band);}

.k2u-landing .k2u-btn-lg { padding: 0 28px; font-size: 17px;}

.k2u-landing .k2u-btn:focus-visible, .k2u-landing a:focus-visible, .k2u-landing button:focus-visible, .k2u-landing summary:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 2px;}

/* On the dark closing band the ink ring would vanish, so it turns white. */
.k2u-landing .k2u-cta-band :focus-visible { outline-color: var(--btn-text);}

.k2u-landing .k2u-skip-link { position: absolute; left: 12px; top: 12px; transform: translateY(calc(-100% - 24px)); z-index: 100; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 16px; font-family: var(--font-body); font-weight: 600; text-decoration: none; transition: transform .15s ease;}

.k2u-landing .k2u-skip-link:focus { transform: none;}

/* ---------- THE TOP BAR AND THE FIRST SCREEN ----------
   Owner, 2026-09-25 (picked from four built directions): the app sign-in's
   deep teal carried up behind the bar AND the hero, so opening edu2u.my feels
   like opening the app.
   - The master app icon (the E2U book on ink #0E6E90) beside "Edu2U" as live
     Lexend, never a flattened wordmark picture.
   - ONE button style in the bar, the kit's md button; Log in is a text link;
     the language is a small globe.
   - On a phone: the icon alone, the globe and Log in, on ONE row at every
     width down to 195 (a 390 phone at 200% zoom). It never wraps.
   - The white strip under the hero rises over the teal with the app card's
     32 corners.
   The band colours are the kit's: `--band-*` are the stops of
   packages/features/auth/components/brandGradient.ts (brandDeep, brandDeeper,
   brandDeepest in packages/ui-tokens) and BrandBackdrop's glow. */
.k2u-landing {
    --band-deep:    #1A6B8A;  /* tokens.colors.brandDeep */
    --band-deeper:  #0E4D6B;  /* tokens.colors.brandDeeper */
    --band-deepest: #0A3348;  /* tokens.colors.brandDeepest */
    --band-glow:    #38B2AC;  /* tokens.colors.brandGlow */
    --on-band:      #FFFFFF;  /* tokens.colors.onBrand */
    --on-band-rule: rgba(255, 255, 255, 0.18); /* tokens.colors.onBrandRule */
    --nav-h: 72px;
    --tile: 40px;
}

/* The bar has no ground of its own at the top: it sits over the hero, which
   wears the band. Once the page moves it takes the band's deeper teal, so the
   menu stays readable over the white sections. */
.k2u-landing .k2u-nav {
    position: sticky; top: 0; z-index: 50;
    margin-bottom: calc(-1 * var(--nav-h) - 1px);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, background .2s ease;}
.k2u-landing .k2u-nav.k2u-scrolled { background: color-mix(in srgb, var(--band-deeper) 94%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px); border-bottom-color: var(--on-band-rule);}

.k2u-landing .k2u-nav-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--kit-space-lg); min-height: var(--nav-h);}

/* The menu sits in the true centre: the two sides share the leftover width
   equally, whatever each one holds. */
.k2u-landing .k2u-nav .k2u-brand,
.k2u-landing .k2u-nav-cta { flex: 1 1 0; min-width: max-content;}
.k2u-landing .k2u-nav-cta { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: var(--kit-space-sm);}

/* The lockup (bar and footer): the icon tile and the name. The tile draws at
   40 (36, 32 on phones) but the link answers 44: the padding reaches past the
   tile and the margin takes it back, so the tile still sits on the gutter. */
.k2u-landing .k2u-brand { display: inline-flex; align-items: center; gap: var(--kit-space-sm-plus); min-height: 44px; text-decoration: none;
    padding-inline: calc((44px - var(--tile)) / 2); margin-inline: calc((var(--tile) - 44px) / 2);}

/* The tile: the app icon's own rounding (28 on 96, so 27%) and a soft lift,
   the BrandLogoTile recipe at bar size. */
.k2u-landing .k2u-brand-tile {
    width: var(--tile); height: var(--tile); flex: none; display: block;
    border-radius: calc(var(--tile) * 0.27);
    box-shadow: 0 0 0 1px rgba(17, 24, 39, .06), 0 4px 10px -3px rgba(10, 51, 72, .40);}
.k2u-landing .k2u-nav .k2u-brand-tile { box-shadow: 0 0 0 1px var(--on-band-rule), 0 6px 14px -4px rgba(0, 0, 0, .45);}

.k2u-landing .k2u-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: -.01em; color: var(--band-deeper); white-space: nowrap;}
.k2u-landing .k2u-nav .k2u-brand-name { color: var(--on-band);}
/* The 2 is the icon's orange. A logotype, so it is outside the contrast rule. */
.k2u-landing .k2u-brand-name .k2u-brand-2 { color: var(--accent);}

/* Solid white: the top-right glow lifts the band to 4.4:1 against 88% white. */
.k2u-landing .k2u-nav-links { display: flex; flex: none; align-items: center; gap: var(--kit-space-2xl);}
.k2u-landing .k2u-nav-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--on-band); font-weight: 500; font-size: 15.5px; white-space: nowrap;}
.k2u-landing .k2u-nav-links a:hover { text-decoration: underline; text-underline-offset: 6px;}
@media (max-width: 1279px) {
  .k2u-landing .k2u-nav-links { gap: var(--kit-space-lg-plus);}
}

/* Log in: a plain text link that still answers a 44 tap. */
.k2u-landing .k2u-nav-login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--kit-space-sm); font-weight: 600; font-size: 15.5px; color: var(--on-band); text-decoration: none; white-space: nowrap;}
.k2u-landing .k2u-nav-login:hover { text-decoration: underline; text-underline-offset: 4px;}

/* The ONE button: the kit's md button, white on the band. */
.k2u-landing .k2u-nav .k2u-btn { padding: 0 var(--kit-button-md-pad-x); font-size: var(--kit-button-md-font);}
.k2u-landing .k2u-nav .k2u-btn-primary,
.k2u-landing .k2u-hero .k2u-btn-primary { background: var(--on-band); color: var(--band-deeper);}

/* On the band every focus ring is white. */
.k2u-landing .k2u-nav :focus-visible,
.k2u-landing .k2u-hero :focus-visible { outline-color: var(--on-band);}

/* Language switcher: globe menu (bar + footer). The trigger shows globe + the
   current TWO-letter code, so it is the same width in every locale; the menu
   overlays absolutely. Switching languages moves nothing. */
.k2u-landing .k2u-globe { position: relative; display: inline-flex;}

.k2u-landing .k2u-globe-btn { position: relative; display: inline-flex; align-items: center; gap: var(--kit-space-xs-plus); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; height: 44px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--kit-radius-md); background: var(--surface); color: var(--ink-soft); cursor: pointer;}

.k2u-landing .k2u-globe-btn:hover,
.k2u-landing .k2u-globe-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--ink);}

.k2u-landing .k2u-globe-btn svg { width: 14px; height: 14px;}

.k2u-landing .k2u-globe-btn .k2u-globe-caret { width: 10px; height: 10px;}

.k2u-landing .k2u-globe-code { display: inline-block; min-width: 21px; text-align: center;}

.k2u-landing .k2u-globe-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 176px; padding: 5px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 10px 30px rgba(17, 24, 39, 0.16);}

.k2u-landing .k2u-globe-up .k2u-globe-menu { top: auto; bottom: calc(100% + 6px);}

.k2u-landing .k2u-globe-item { display: flex; align-items: center; justify-content: space-between; gap: var(--kit-space-md); min-height: 44px; padding: 0 var(--kit-space-md); border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none;}

.k2u-landing .k2u-globe-item:hover { background: var(--surface-2);}

.k2u-landing .k2u-globe-item svg { width: 14px; height: 14px; color: var(--brand-ink);}

/* In the bar the globe is small and quiet: no outline, a 44 square to press. */
.k2u-landing .k2u-nav .k2u-globe-btn { min-width: 44px; justify-content: center; padding: 0 var(--kit-space-sm-plus); border-color: transparent; background: transparent; color: var(--on-band);}
.k2u-landing .k2u-nav .k2u-globe-btn svg { width: 18px; height: 18px;}
.k2u-landing .k2u-nav .k2u-globe-btn:hover,
.k2u-landing .k2u-nav .k2u-globe-btn[aria-expanded="true"] { border-color: transparent; background: color-mix(in srgb, var(--on-band) 12%, transparent); color: var(--on-band);}
.k2u-landing .k2u-nav .k2u-globe-caret { display: none;}

/* Below 960 the centred menu does not fit beside both sides; the sections are
   one scroll away. */
@media (max-width: 959px) {
  .k2u-landing .k2u-nav-menu { display: none;}
}

/* Phone: the icon alone, the globe, and Log in as the one button (the hero's
   inquiry is the first thing under the bar). */
@media (max-width: 600px) {
  .k2u-landing { --gutter: var(--kit-space-lg); --nav-h: 64px; --tile: 36px;}
  .k2u-landing .k2u-nav-inner { gap: var(--kit-space-sm);}
  .k2u-landing .k2u-nav .k2u-brand { flex: none;}
  .k2u-landing .k2u-nav .k2u-brand-name { display: none;}
  .k2u-landing .k2u-nav-cta { gap: var(--kit-space-xs);}
  .k2u-landing .k2u-nav-inquire { display: none;}
  /* The code stays in the button's name for a screen reader; only the globe
     is drawn. */
  .k2u-landing .k2u-nav .k2u-globe-code { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
  .k2u-landing .k2u-nav .k2u-globe-btn { padding: 0;}
  .k2u-landing .k2u-nav-login { height: var(--kit-button-md-height); padding: 0 var(--kit-space-lg); border-radius: var(--kit-button-md-radius); background: var(--on-band); color: var(--band-deeper); box-shadow: var(--shadow-sm);}
  .k2u-landing .k2u-nav-login:hover { text-decoration: none;}
}

/* The narrowest phones and 200% zoom on one (195 across): the same row,
   tightened. The tile and the globe draw smaller but still answer 44. */
@media (max-width: 299px) {
  .k2u-landing { --tile: 32px;}
  .k2u-landing .k2u-nav-inner { gap: var(--kit-space-xs);}
  .k2u-landing .k2u-nav-cta { gap: var(--kit-space-xxs);}
  .k2u-landing .k2u-nav-login { padding: 0 var(--kit-space-sm); font-size: 13px;}
  .k2u-landing .k2u-nav .k2u-globe-btn { min-width: 40px; width: 40px;}
  .k2u-landing .k2u-nav .k2u-globe-btn::after { content: ""; position: absolute; inset: 0 -2px;}
}

/* The hero wears the app sign-in's band. The app shows its band from the top
   down to where the white card rises, which is the teal and deep teal of
   BAND_GRADIENT at its own angle (start 0.7,0 to end 0.3,1), with the same two
   soft glows as BrandBackdrop: teal at the top right, deep teal at the left.
   The bar is drawn over it, so the hero starts under the bar. */
.k2u-landing .k2u-hero {
    position: relative;
    color: var(--on-band);
    padding: calc(var(--sec-pad) + var(--nav-h)) 0 calc(var(--sec-pad) + 32px);
    background:
      radial-gradient(420px circle at calc(100% - 36px) 64px, color-mix(in srgb, var(--band-glow) 20%, transparent), transparent 70%),
      radial-gradient(340px circle at 28px 60%, color-mix(in srgb, var(--band-deep) 28%, transparent), transparent 70%),
      linear-gradient(202deg, var(--band-deep) 0%, var(--band-deeper) 62%, var(--band-deepest) 100%);}

/* The white strip rises over the band like the app's card. */
.k2u-landing .k2u-strip { margin-top: -32px; border-top: 0; border-radius: 32px 32px 0 0; z-index: 1;}

/* The fake app cards that stood on the right are gone (owner, 2026-09-25): the
   copy takes the column, its measure capped so the headline breaks in two. */
.k2u-landing .k2u-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr);}
.k2u-landing .k2u-hero-copy { max-width: 760px;}

.k2u-landing .k2u-hero h1 { font-size: clamp(16px, calc((100vw - 2 * var(--gutter)) / 10.6), 62px); line-height: 1.1; margin: var(--kit-space-lg) 0 0; color: var(--on-band); text-shadow: 0 2px 12px rgba(0, 0, 0, .3);}

/* The motto's own rules (two lines, the swap) live with it in motto.css; the
   size above is the hero's. */

.k2u-landing .k2u-hero p.k2u-lede { font-size: clamp(17px, 2vw, 20px); color: color-mix(in srgb, var(--on-band) 88%, transparent); margin: var(--kit-space-xl) 0 0; max-width: 46ch;}

.k2u-landing .k2u-hero-actions { display: flex; flex-wrap: wrap; gap: var(--kit-space-md); margin-top: var(--kit-space-2xl);}

.k2u-landing .k2u-hero-trust { margin-top: var(--kit-space-xl); display: flex; flex-wrap: wrap; gap: var(--kit-space-sm) var(--kit-space-lg-plus);}

.k2u-landing .k2u-hero-trust span { font-family: var(--font-body); font-size: 14px; color: color-mix(in srgb, var(--on-band) 88%, transparent); display: inline-flex; align-items: center; gap: var(--kit-space-sm);}

.k2u-landing .k2u-hero-trust span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--band-glow); flex: none;}

@media (max-width: 560px) {
  .k2u-landing .k2u-hero-actions {flex-direction: column; align-items: stretch;}
  /* A full-width button wraps its label on a very narrow page rather than
     running past the edge; one line still draws exactly 48. */
  .k2u-landing .k2u-hero-actions .k2u-btn {white-space: normal; text-align: center; height: auto; min-height: var(--kit-button-md-height); padding-block: var(--kit-space-md);}
}

.k2u-landing section { position: relative;}

.k2u-landing .k2u-band { padding: var(--sec-pad) 0;}

.k2u-landing .k2u-band-tint { background: var(--surface-2);}

.k2u-landing .k2u-sec-head { max-width: 640px; margin-bottom: var(--kit-space-3xl);}

.k2u-landing .k2u-sec-head.k2u-center { margin-inline: auto; text-align: center;}

.k2u-landing .k2u-sec-head h2 { font-size: clamp(26px, 4vw, 42px); line-height: 1.08; margin: var(--kit-space-md) 0 0;}

.k2u-landing .k2u-sec-head p { color: var(--ink-soft); font-size: 18px; margin: var(--kit-space-lg) 0 0;}

.k2u-landing .k2u-strip { border-block: 1px solid var(--line); background: var(--surface);}

.k2u-landing .k2u-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--kit-space-md) var(--kit-space-2xl); padding-block: var(--kit-space-xl);}
@media (max-width: 767px) {
  .k2u-landing .k2u-strip-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch;}
}
@media (max-width: 399px) {
  .k2u-landing .k2u-strip-inner { grid-template-columns: minmax(0, 1fr);}
}

.k2u-landing .k2u-strip-item { font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: var(--kit-space-sm);}

.k2u-landing .k2u-strip-item svg { width: 17px; height: 17px; color: var(--brand); flex: none;}

/* Each role: who it is for on the left, what they get on the right, the same
   way round every time now the stat panels are gone. Stacked below 880. */
.k2u-landing .k2u-role { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kit-space-xl) var(--kit-space-3xl); align-items: start;}

.k2u-landing .k2u-role + .k2u-role { margin-top: var(--sec-pad);}

@media (max-width: 880px) {
  .k2u-landing .k2u-role {grid-template-columns: 1fr;}
}

.k2u-landing .k2u-role-tag { display: inline-flex; align-items: center; gap: var(--kit-space-sm); font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px;}

.k2u-landing .k2u-role-copy h3 { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.1; margin: var(--kit-space-lg) 0 0;}

.k2u-landing .k2u-role-copy > p { color: var(--ink-soft); margin: var(--kit-space-lg) 0 0; font-size: 17.5px;}

.k2u-landing .k2u-flist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--kit-space-md);}
/* Beside the copy, the list's first line sits level with the role tag. */
@media (min-width: 881px) {
  .k2u-landing .k2u-role .k2u-flist { padding-top: var(--kit-space-xs);}
}

.k2u-landing .k2u-flist li { display: flex; gap: var(--kit-space-md); align-items: flex-start; font-size: 16px; color: var(--ink-soft);}

.k2u-landing .k2u-flist .k2u-tick { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; margin-top: 1px;}

.k2u-landing .k2u-flist .k2u-tick svg { width: 13px; height: 13px;}

.k2u-landing .k2u-role-owner .k2u-role-tag { background: var(--owner-soft); color: var(--owner);}

.k2u-landing .k2u-role-owner .k2u-tick { background: var(--owner-soft); color: var(--owner);}

.k2u-landing .k2u-role-teacher .k2u-role-tag { background: var(--teacher-soft); color: var(--teacher-ink);}

.k2u-landing .k2u-role-teacher .k2u-tick { background: var(--teacher-soft); color: var(--teacher);}

/* The parent ink measured 4.43:1 on its own tint; the brand ink clears 4.5. */
.k2u-landing .k2u-role-parent .k2u-role-tag { background: var(--parent-soft); color: var(--brand-ink);}

.k2u-landing .k2u-role-parent .k2u-tick { background: var(--parent-soft); color: var(--parent);}

.k2u-landing .k2u-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kit-space-xl);}

@media (max-width: 900px) {
  .k2u-landing .k2u-why-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 560px) {
  .k2u-landing .k2u-why-grid {grid-template-columns: 1fr;}
}

.k2u-landing .k2u-why-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--kit-space-xl); box-shadow: var(--shadow-sm);}

.k2u-landing .k2u-why-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; margin-bottom: var(--kit-space-lg);}

.k2u-landing .k2u-why-ic svg { width: 21px; height: 21px;}

.k2u-landing .k2u-why-card h3 { font-size: 18px; margin: 0 0 var(--kit-space-sm);}

.k2u-landing .k2u-why-card p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55;}

.k2u-landing .k2u-price-wrap { max-width: 440px; margin-inline: auto;}

.k2u-landing .k2u-price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--kit-space-2xl); display: flex; flex-direction: column; box-shadow: var(--shadow-sm);}

.k2u-landing .k2u-price-card.k2u-featured { border: 2px solid var(--brand-strong); box-shadow: var(--shadow-md); position: relative;}

.k2u-landing .k2u-price-badge { position: absolute; top: -13px; left: var(--kit-space-2xl); background: var(--accent); color: #17262B; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;}

.k2u-landing .k2u-price-tier { font-family: var(--font-display); font-weight: 700; font-size: 20px;}

.k2u-landing .k2u-price-range { font-family: var(--font-body); font-size: 12.5px; color: var(--muted); margin-top: 3px; letter-spacing: .02em;}

.k2u-landing .k2u-price-val { margin: var(--kit-space-lg-plus) 0 var(--kit-space-xs); display: flex; align-items: baseline; gap: var(--kit-space-xs-plus);}

.k2u-landing .k2u-price-val .k2u-rm { font-family: var(--font-display); font-size: 15px; color: var(--muted);}

.k2u-landing .k2u-price-val .k2u-amt { font-family: var(--font-display); font-weight: 700; font-size: 38px; letter-spacing: -.02em; font-variant-numeric: tabular-nums;}

.k2u-landing .k2u-price-per { font-size: 13.5px; color: var(--muted);}

.k2u-landing .k2u-price-card ul { list-style: none; padding: 0; margin: var(--kit-space-xl) 0; display: grid; gap: var(--kit-space-md);}

.k2u-landing .k2u-price-card li { display: flex; gap: var(--kit-space-sm-plus); font-size: 15px; color: var(--ink-soft);}

.k2u-landing .k2u-price-card li svg { width: 16px; height: 16px; color: var(--teacher); flex: none; margin-top: 3px;}

.k2u-landing .k2u-price-card .k2u-btn { width: 100%; justify-content: center; margin-top: auto;}

.k2u-landing .k2u-price-note { text-align: center; margin-top: var(--kit-space-xl); font-size: 14px; color: var(--ink-soft); font-family: var(--font-body);}

.k2u-landing .k2u-faq { max-width: 780px; margin-inline: auto;}

.k2u-landing .k2u-faq details { border-bottom: 1px solid var(--line);}

.k2u-landing .k2u-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: var(--kit-space-xl) 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; list-style: none;}

.k2u-landing .k2u-faq summary::-webkit-details-marker { display: none;}

.k2u-landing .k2u-faq summary .k2u-chev { flex: none; width: 22px; height: 22px; transition: transform .2s ease; color: var(--muted);}

.k2u-landing .k2u-faq details[open] summary .k2u-chev { transform: rotate(45deg); color: var(--brand);}

.k2u-landing .k2u-faq .k2u-ans { padding: 0 0 var(--kit-space-xl); color: var(--ink-soft); font-size: 16px; max-width: 68ch;}

.k2u-landing .k2u-cta-band { background: linear-gradient(155deg, #0E6E90 0%, #0A5470 100%); color: var(--btn-text); border-radius: 28px; padding: var(--kit-space-3xl) var(--kit-space-xl); text-align: center; box-shadow: var(--shadow-lg); overflow: hidden; position: relative;}

@media (min-width: 1024px) {
  .k2u-landing .k2u-cta-band { padding: calc(2 * var(--kit-space-2xl)) var(--kit-space-3xl);}
}
@media (max-height: 500px) {
  .k2u-landing .k2u-cta-band { padding-block: var(--kit-space-xl);}
}

.k2u-landing .k2u-cta-band h2 { font-size: clamp(26px, 4vw, 44px); margin: var(--kit-space-md) 0 0; color: var(--btn-text);}

.k2u-landing .k2u-cta-band p { color: color-mix(in srgb, var(--btn-text) 92%, transparent); font-size: 18px; margin: var(--kit-space-lg) auto 0; max-width: 46ch;}
.k2u-landing .k2u-cta-band p.k2u-cta-mail { margin-top: var(--kit-space-xl); font-size: 14px; color: color-mix(in srgb, #fff 82%, transparent);}

.k2u-landing .k2u-cta-band .k2u-hero-actions { justify-content: center; margin-top: var(--kit-space-2xl);}

.k2u-landing .k2u-cta-band .k2u-btn-primary { background: var(--accent); color: #17262B; border-color: transparent;}

.k2u-landing .k2u-cta-band .k2u-btn-primary:hover { background: #FF9422;}

.k2u-landing .k2u-cta-band .k2u-btn-ghost { color: var(--btn-text); border-color: color-mix(in srgb, var(--btn-text) 40%, transparent);}

.k2u-landing .k2u-cta-band .k2u-btn-ghost:hover { border-color: var(--btn-text);}

.k2u-landing .k2u-cta-orb { position: absolute; border-radius: 50%; filter: blur(44px); opacity: .45; pointer-events: none;}

.k2u-landing .k2u-foot { border-top: 1px solid var(--line); padding: var(--kit-space-3xl) 0;}

.k2u-landing .k2u-foot-inner { display: flex; flex-wrap: wrap; gap: var(--kit-space-xl); align-items: center; justify-content: space-between;}

.k2u-landing .k2u-foot-links { display: flex; flex-wrap: wrap; column-gap: var(--kit-space-xl);}

.k2u-landing .k2u-foot-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink-soft); font-size: 14.5px;}

.k2u-landing .k2u-foot-links a:hover { color: var(--ink);}

.k2u-landing .k2u-foot-meta { color: var(--ink-soft); font-size: 14px; font-family: var(--font-body); margin-top: var(--kit-space-xl);}

/* Fail-safe reveal: content is VISIBLE by default. JS adds `k2u-armed` to opt
   into the hidden→animate-in behaviour; if JS never runs (slow/blocked/no
   hydration) the content simply stays visible instead of vanishing. */
.k2u-landing .k2u-reveal { transition: opacity .6s ease, transform .6s ease;}
.k2u-landing .k2u-reveal.k2u-armed { opacity: 0; transform: translateY(18px);}
.k2u-landing .k2u-reveal.k2u-armed.k2u-in { opacity: 1; transform: none;}

/* The layout switches (`LAYOUT` in Landing.tsx). */
.k2u-landing[data-hero="centre"] .k2u-hero-copy { margin-inline: auto; text-align: center;}
.k2u-landing[data-hero="centre"] .k2u-hero p.k2u-lede { margin-inline: auto;}
.k2u-landing[data-hero="centre"] .k2u-hero-actions,
.k2u-landing[data-hero="centre"] .k2u-hero-trust { justify-content: center;}
.k2u-landing[data-roles="stacked"] .k2u-role { grid-template-columns: minmax(0, 1fr); max-width: 760px;}
.k2u-landing[data-roles="stacked"] .k2u-role .k2u-flist { padding-top: 0;}

/* Short screens: a phone held sideways, a laptop at 200% zoom (audit WA-4).
   The bar stops following the page, the air comes down a step, and the
   headline scales by height, so both hero buttons are on the first screen. */
@media (max-height: 500px) {
  .k2u-landing { --sec-pad: var(--kit-space-xl); --nav-h: 56px;}
  .k2u-landing .k2u-nav { position: relative;}
  .k2u-landing section[id] { scroll-margin-top: 0;}
  /* By height, but never wider than the column allows (195 x 422 is 200% zoom on a phone). */
  .k2u-landing .k2u-hero h1 { font-size: max(16px, min(clamp(26px, 8vh, 40px), calc((100vw - 2 * var(--gutter)) / 10.6))); margin-top: var(--kit-space-sm);}
  .k2u-landing .k2u-hero p.k2u-lede { font-size: 16px; margin-top: var(--kit-space-md);}
  .k2u-landing .k2u-hero-actions { margin-top: var(--kit-space-lg);}
  .k2u-landing .k2u-hero-trust { margin-top: var(--kit-space-lg);}
}