/* ==========================================================================
   Thriving Talents Learning Platform — HRLC landing page
   Asah palette: Graphite #23262B, Spark #F0552E, Stone #5C6B78
   Mobile-first. Primary viewport 320–430px, responsive up to desktop.
   ========================================================================== */

:root {
  /* Asah palette. Graphite is steel, Spark is what flies off the whetstone,
     Stone is the whetstone. Spark is reserved for the mark and one accent;
     it is never used for body text (it only reaches 3.4:1 on white). */
  --graphite: #23262B;
  --night: #1A1C20;
  --spark: #F0552E;
  --spark-600: #D8431D;
  --stone: #5C6B78;
  --tint: #E9EEF1;

  --ink: #23262B;
  --ink-2: #46535E;
  --ink-3: #5C6B78;
  --line: #D9E1E6;
  --bg: #FFFFFF;
  --bg-2: #F4F7F9;
  --white: #FFFFFF;
  --radius: 14px;
  --radius-sm: 10px;
  --wrap: 1080px;
  --pad: 20px;
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 10px 30px rgba(35, 38, 43, .10);
}

/* Plus Jakarta Sans, subset to Latin plus the accents Malaysian names need.
   The kit ships Medium as its lightest weight, so body copy is 500. */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500;
  src: url("/assets/fonts/asah-medium.woff2") format("woff2"); font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600;
  src: url("/assets/fonts/asah-semibold.woff2") format("woff2"); font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700;
  src: url("/assets/fonts/asah-bold.woff2") format("woff2"); font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;          /* Medium is the lightest weight in the kit */               /* PRD: 16px minimum on mobile */
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999px; top: 8px; background: var(--spark); color: var(--white);
  padding: 10px 14px; border-radius: 8px; z-index: 100; font-weight: 600;
}
.skip:focus { left: 8px; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Buttons (44x44 minimum tap target) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px;
  border-radius: var(--radius-sm); border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--spark); outline-offset: 3px; }
.btn-spark { background: var(--spark); color: var(--night); }
.btn-spark:hover { background: var(--spark-600); color: var(--white); box-shadow: 0 6px 18px rgba(240, 85, 46, .35); }
.btn-spark[disabled] { opacity: .7; cursor: progress; }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover { border-color: var(--white); background: rgba(255,255,255,.06); }
.btn-lg { min-height: 56px; padding: 14px 32px; font-size: 18px; }

/* ---------- Section rhythm ---------- */
section { padding: 56px 0; }
.section-h {
  font-size: clamp(24px, 5.5vw, 34px); line-height: 1.15; font-weight: 700;
  letter-spacing: -.01em; margin-bottom: 28px;
}
.kicker {
  color: var(--stone); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px;
}
.fineprint { color: var(--ink-3); font-size: 14px; margin-top: 18px; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background: var(--graphite); color: var(--white);
  padding: 22px 0 56px;
}
.hero::before {
  /* Spark glow, echoing the mark */
  content: ""; position: absolute; inset: auto -20% -40% auto;
  width: 70vw; max-width: 620px; aspect-ratio: 1;
  background: radial-gradient(circle at center, rgba(240,85,46,.26), rgba(240,85,46,0) 62%);
  pointer-events: none;
}
.hero .wrap { position: relative; }

.brandbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 40px;
}
/* The SVG carries the guide's clearspace inside its box: the visible wordmark
   is 78.7% of --logo-w, and the guide's floor is 120px visible. Because that
   padding already exceeds the required clear zone, the tagline can sit flush
   against the image box. */
.brand {
  --logo-w: 168px;
  display: block;
}
/* Inline flow, not flex: a replaced element with vertical-align: baseline puts
   its bottom MARGIN edge on the text baseline. The SVG box extends 9.211% of
   its width below the wordmark baseline, so pulling that back up lands the
   wordmark exactly on the line's baseline and the tagline reads as the rest of
   the sentence the logo starts. Flexbox baseline alignment does not honour the
   margin edge for images, which is why this is not a flex row. */
.brand img {
  display: inline-block; vertical-align: baseline;
  width: var(--logo-w);
  margin-bottom: calc(var(--logo-w) * -0.09211);
}
.brand-tagline {
  font-size: 13px; font-weight: 500; line-height: 1.3;
  color: rgba(255,255,255,.62); letter-spacing: .01em;
  /* The file leaves 10.772% of the width clear to the right of the wordmark,
     but the guide only requires 9.453% (half the mark height). Pull back the
     1.319% difference and no further: text must not enter the clear zone. */
  margin-left: calc(var(--logo-w) * -0.013186);
}

@media (max-width: 379px) {
  .brand { --logo-w: 156px; }
  .brand-tagline { font-size: 12px; }
}

.eyebrow {
  color: rgba(255,255,255,.72); font-weight: 700; font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(36px, 10vw, 64px); line-height: 1.02; font-weight: 700;
  letter-spacing: -.025em; margin-bottom: 18px;
}
.lede { font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.82); max-width: 560px; margin-bottom: 28px; }

.scarcity {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--white); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 16px;
}
.scarcity::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--spark); flex: none;
}

/* Email capture */
.capture { max-width: 560px; }
.capture-row { display: flex; flex-direction: column; gap: 10px; }
.capture-field {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border-radius: var(--radius-sm); border: 2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: var(--white);
  font: inherit; font-size: 16px;   /* 16px stops iOS zoom-on-focus */
}
.capture > .capture-field { margin-bottom: 10px; }
.capture input::placeholder { color: rgba(255,255,255,.55); }
.capture input:focus { outline: none; border-color: var(--spark); background: rgba(255,255,255,.12); }
.capture input[aria-invalid="true"] { border-color: #FF8A8A; }
.capture .btn { width: 100%; }
.help { font-size: 14px; color: rgba(255,255,255,.65); margin-top: 12px; }
.error { font-size: 15px; font-weight: 600; color: #FFB4B4; margin-top: 10px; }

/* Thank-you state */
.thanks { max-width: 560px; padding: 22px; border-radius: var(--radius); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.thanks:focus { outline: none; }
.thanks-icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--spark); color: var(--white); font-weight: 700; font-size: 22px; margin-bottom: 14px;
}
.thanks h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.thanks p { color: rgba(255,255,255,.82); }
.thanks-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

/* ==========================================================================
   2. STATS
   ========================================================================== */
.stats { background: var(--bg-2); padding-top: 48px; }
.stats .section-h { font-size: 20px; color: var(--ink-2); font-weight: 700; margin-bottom: 18px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
  min-width: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 16px; box-shadow: 0 2px 0 rgba(35,38,43,.04);
  border-top: 4px solid var(--graphite);
}
/* Fixed height so every label starts on the same line, whatever the
   figure above it is set at. */
.stat-n {
  --fig: clamp(30px, 9vw, 44px);
  display: flex; align-items: baseline; flex-wrap: nowrap; min-width: 0;
  height: clamp(34px, 9.4vw, 48px);
  color: var(--graphite); font-variant-numeric: tabular-nums lining-nums;
}
.stat-v {
  font-size: var(--fig); font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
}
/* Every figure is set at one size. A range needs about twice the width, so
   on phones the range tiles span the full row rather than shrinking the type. */
.stat-wide { grid-column: 1 / -1; }

/* Unit and connector are sized off the figure so they can never outgrow it
   and knock the baseline out at tight widths. */
.stat-u {
  font-size: calc(var(--fig) * .52); font-weight: 700;
  color: var(--ink-3); letter-spacing: 0; margin-left: .1em;
}
.stat-c {
  font-size: calc(var(--fig) * .34); font-weight: 600;
  color: var(--ink-3); letter-spacing: .02em; margin: 0 .45em;
}
/* A word connector reads best small; a dash has to sit near the figures'
   own size or it looks like a stray hyphen. */
.stat-c-dash {
  font-size: calc(var(--fig) * .62); font-weight: 700;
  letter-spacing: 0; margin: 0 .16em;
}
.stat-l { display: block; margin-top: 10px; font-size: 15px; color: var(--ink-2); line-height: 1.3; }

/* ==========================================================================
   3. TOOLS
   ========================================================================== */
.tool-list { display: grid; gap: 18px; }
.tool {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  background: var(--white);
}
.tool h3 { font-size: 22px; font-weight: 700; margin: 16px 0 6px; }
.tool h3::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  background: var(--graphite); margin-right: 10px; transform: rotate(45deg); vertical-align: 2px;
}
.tool p { color: var(--ink-2); }

/* CSS-drawn product previews (no stock photos; swap for frntlne screenshots) */
.tool-ui {
  background: var(--graphite); border-radius: var(--radius-sm); padding: 14px;
  min-height: 132px; display: flex; flex-direction: column; gap: 10px; justify-content: center;
}
.ui-bar { display: flex; gap: 6px; }
.ui-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); }
.ui-bar i:first-child { background: var(--spark); }
.ui-progress { height: 10px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; }
.ui-progress b { display: block; height: 100%; background: var(--spark); border-radius: 6px; }
.ui-lines { display: flex; flex-direction: column; gap: 7px; }
.ui-lines i { height: 8px; border-radius: 4px; background: rgba(255,255,255,.22); }
.ui-chat { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.35; }
.ui-chat span { padding: 8px 11px; border-radius: 12px; max-width: 88%; }
.ui-chat .me { align-self: flex-end; background: var(--spark); color: var(--white); font-weight: 600; border-bottom-right-radius: 3px; }
.ui-chat .bot { align-self: flex-start; background: rgba(255,255,255,.14); color: var(--white); border-bottom-left-radius: 3px; }
.ui-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.10); color: var(--white); font-size: 13px; font-weight: 600;
}
.ui-card i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); flex: none; }
.ui-card .ui-check { background: var(--spark); border-color: var(--spark); position: relative; }
.ui-card .ui-check::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ==========================================================================
   4. AUDIENCE
   ========================================================================== */
.audience { background: var(--bg-2); }
.aud-grid { display: grid; gap: 16px; }
.aud-card {
  background: var(--white); border-radius: var(--radius); padding: 24px 20px;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.aud-tag {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--graphite); background: var(--tint); padding: 5px 10px; border-radius: 999px; margin-bottom: 12px;
}
.aud-card h3 { font-size: 22px; line-height: 1.2; font-weight: 700; margin-bottom: 10px; }
.aud-card p { color: var(--ink-2); }
.ticks { margin-top: 16px; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 28px; font-weight: 500; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--graphite);
}
.ticks li::after {
  content: ""; position: absolute; left: 6px; top: 6px; width: 5px; height: 9px;
  border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ==========================================================================
   5. CREDIBILITY
   ========================================================================== */
.cred .section-h { text-align: center; }
.logo-wall {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin: 28px auto 0; max-width: 420px;
}
.logo-wall li {
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 6px;
}
.logo-wall img {
  width: auto; max-width: 100%; object-fit: contain;
  opacity: .9; transition: opacity .18s ease;
}
.logo-wall li:hover img { opacity: 1; }
/* Optical sizing: keeps logos at similar visual weight despite very
   different aspect ratios (P&G is 1:1, Michael Kors is 10:1). */
.logo-wall .lw-sq img { height: 44px; }
.logo-wall .lw-m img  { height: 30px; }
.logo-wall .lw-w img  { height: 24px; }
.logo-wall .lw-xw img { height: 19px; }

/* ==========================================================================
   6. DEMO CTA + FOOTER
   ========================================================================== */
.closing { background: var(--graphite); color: var(--white); text-align: center; padding: 64px 0; }
.closing h2 { font-size: clamp(28px, 7vw, 40px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
.closing [data-closing-intro] p { color: rgba(255,255,255,.82); max-width: 560px; margin: 0 auto 24px; }
.capture-center, .thanks-center { margin-left: auto; margin-right: auto; text-align: left; }
.thanks-center { max-width: 560px; }

.foot { background: var(--night); color: rgba(255,255,255,.75); padding: 32px 0 96px; font-size: 14px; }
.foot-brand { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.foot-brand > img { width: 150px; }
.foot-brand .cobrand { align-items: flex-start; text-align: left; max-width: none; }
.foot a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { text-decoration: underline; }
.foot-text { margin-bottom: 12px; }
.foot-legal { font-size: 13px; color: rgba(255,255,255,.5); }

/* Sticky mobile CTA (appears after the hero form scrolls out of view) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: rgba(35,38,43,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.sticky-cta .btn { width: 100%; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 600px) {
  .capture-row { flex-direction: row; }
  .capture-row .capture-field { flex: 1; }
  .capture .btn { width: auto; }
  .thanks-cta { flex-direction: row; align-items: center; gap: 20px; }
    .foot-brand { flex-direction: row; align-items: center; gap: 20px; }
}

@media (min-width: 800px) {
  :root { --pad: 32px; }
  section { padding: 80px 0; }
  .hero { padding: 28px 0 88px; }
  .brand { --logo-w: 228px; }
  .brand-tagline { font-size: 15px; }
  .cobrand { max-width: none; }
  .cobrand-label { font-size: 12px; }
  .brandbar { margin-bottom: 64px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .stat-wide { grid-column: auto; }
  .stat-n { --fig: clamp(24px, 7.4vw - 35px, 44px); }
  .stat { padding: 26px 22px; }
  .tool-list { grid-template-columns: repeat(3, 1fr); }
  .aud-grid { grid-template-columns: 1fr 1fr; }
  .aud-card { padding: 32px 28px; }
  .logo-wall { grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 900px; }
  .logo-wall li { min-height: 84px; padding: 10px; }
  .logo-wall .lw-sq img { height: 56px; }
  .logo-wall .lw-m img  { height: 40px; }
  .logo-wall .lw-w img  { height: 32px; }
  .logo-wall .lw-xw img { height: 25px; }
  .foot { padding-bottom: 40px; }
  .sticky-cta { display: none !important; }
}