/* Hallmark · macrostructure: Workbench · hero: headline-left + full-width product figure (no re-drawn chrome)
 * theme: custom · vibe: "deep-sea blue on warm paper, teacher's desk, exact" · paper: oklch(97.7% 0.007 81) · accent: oklch(42.3% 0.116 257)
 * display: Bricolage Grotesque · body: Hanken Grotesk · axes: light / geometric-sans / cool
 * genre: modern-minimal · nav: N1b (4 centre links, fill CTA, frost-on-scroll) · footer: Ft5 Statement (dark band)
 * enrichment: real product captures from the offline simulator (fictional school, fictional pupils) in <figure>
 * studied: no · context: user-provided (audience = guru Malaysia · use = pasang dari CWS · tone = utilitarian) · 2026-09-15
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
 */

/* ---------- tokens ---------- */
:root {
  /* colour — PAJSK brand (shared/ui.css of the extension), converted to OKLCH */
  --color-paper:        oklch(97.7% 0.007 81);
  --color-paper-2:      oklch(94.6% 0.012 82);
  --color-card:         oklch(99.3% 0.003 85);
  --color-ink:          oklch(22% 0.006 80);
  --color-ink-2:        oklch(38% 0.010 76);
  --color-muted:        oklch(50% 0.016 78);
  --color-rule:         oklch(88% 0.020 82);
  --color-rule-2:       oklch(92.4% 0.016 83);
  --color-accent:       oklch(42.3% 0.116 257);
  --color-accent-deep:  oklch(35.1% 0.095 257);
  --color-accent-tint:  oklch(94.3% 0.014 255);
  --color-accent-ink:   oklch(98% 0.005 255);
  --color-focus:        oklch(52% 0.19 257);
  --color-ok:           oklch(47.3% 0.124 150);
  --color-ok-bg:        oklch(95.3% 0.016 161);
  --color-dark:         oklch(27% 0.075 257);
  --color-dark-2:       oklch(31.5% 0.083 257);
  --color-dark-ink:     oklch(95% 0.008 255);
  --color-dark-muted:   oklch(84% 0.025 255);
  --color-dark-rule:    oklch(40% 0.070 257);
  --color-highlight:    oklch(85% 0.147 89);

  /* legacy names used by beli.html / success.html inline styles (JS-bound pages we re-skin, not rewrite) */
  --teal: var(--color-accent); --teal-deep: var(--color-accent-deep); --teal-tint: var(--color-accent-tint);
  --paper: var(--color-paper); --ink: var(--color-ink); --muted: var(--color-muted); --line: var(--color-rule);
  --white: var(--color-card);
  --n-50: var(--color-paper); --n-100: var(--color-paper-2); --n-200: var(--color-rule-2); --n-300: var(--color-rule);
  --n-400: oklch(68% 0.014 80); --n-500: var(--color-muted); --n-700: var(--color-ink-2); --n-900: var(--color-ink);

  /* type */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;   /* outlier: inline code on the privacy page only */
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-display: clamp(2.5rem, 3.6vw + 1.1rem, 4.5rem);

  /* space — 4 pt */
  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;

  /* shape */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --rule-hair: 1px;
  --shadow-figure: 0 1px 2px oklch(20% 0.02 257 / 0.06), 0 24px 48px -24px oklch(20% 0.05 257 / 0.25);
  --page-max: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --z-raised: 10; --z-sticky: 200; --z-modal: 400;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip; min-height: 100dvh; display: flex; flex-direction: column;
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  color: var(--color-ink); background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
main { flex: 1 0 auto; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; margin: 0; overflow-wrap: anywhere; min-width: 0; letter-spacing: -0.02em; }
h1 { font-size: var(--text-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 1.6vw + 1.1rem, 2.5rem); font-weight: 700; line-height: 1.1; }
h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.25; }
p { margin: 0; }
.lede { font-size: var(--text-md); color: var(--color-ink-2); max-width: 60ch; }
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-modal); background: var(--color-card); color: var(--color-accent-deep); padding: var(--space-sm) var(--space-md); font-weight: 600; text-decoration: none; }
.skip-link:focus { left: var(--space-md); top: var(--space-md); }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.nowrap { white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 44px; padding: 0 1.25rem; border-radius: var(--radius-md);
  font: 600 var(--text-base) var(--font-body); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  border: var(--rule-hair) solid transparent;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--fill { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--fill:hover { background: var(--color-accent-deep); }
.btn--ghost { background: var(--color-card); color: var(--color-ink); border-color: var(--color-rule); }
.btn--ghost:hover { border-color: var(--color-ink-2); }
.btn--light { background: var(--color-card); color: var(--color-accent-deep); }
.btn--light:hover { background: var(--color-accent-tint); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- nav · N1b ---------- */
.site-nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-sticky);
  background: transparent; border-bottom: var(--rule-hair) solid transparent;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.site-nav.is-scrolled { background: color-mix(in oklch, var(--color-paper) 82%, transparent); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom-color: var(--color-rule-2); }
.site-nav__inner { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-nav.is-scrolled .site-nav__inner { height: 60px; }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--color-ink); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; white-space: nowrap; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand span { color: var(--color-accent); }
.site-nav nav { position: static; background: transparent; border: 0; backdrop-filter: none; justify-self: center; display: flex; gap: 0.25rem; }
.site-nav__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.85rem; border-radius: var(--radius-pill); color: var(--color-ink-2); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.site-nav__link:hover { background: var(--color-accent-tint); color: var(--color-accent-deep); }
.site-nav__right { justify-self: end; display: inline-flex; align-items: center; gap: var(--space-sm); }
.site-nav__pill { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); white-space: nowrap; margin-right: var(--space-xs); }
.site-nav__pill::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-ok); }
.site-nav__burger { display: none; width: 44px; height: 44px; border: var(--rule-hair) solid var(--color-rule); background: var(--color-card); border-radius: var(--radius-md); align-items: center; justify-content: center; cursor: pointer; color: var(--color-ink); }
.site-nav__sheet { display: none; }
@media (max-width: 56rem) {
  .site-nav__inner { grid-template-columns: 1fr auto; }
  .site-nav nav, .site-nav__pill { display: none; }
  .site-nav__burger { display: inline-flex; }
  .site-nav__sheet { position: fixed; inset: 68px 0 auto 0; z-index: var(--z-sticky); background: var(--color-card); border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm) var(--gutter) var(--space-lg); display: grid; gap: var(--space-2xs); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short); }
  .site-nav__sheet.is-open { transform: none; opacity: 1; visibility: visible; }
  .site-nav__sheet a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-sm); border-radius: var(--radius-md); color: var(--color-ink); text-decoration: none; font-weight: 500; white-space: nowrap; }
  .site-nav__sheet a:hover { background: var(--color-accent-tint); }
}
@media (max-width: 34rem) { .site-nav__right .btn { display: none; } }

/* ---------- hero ---------- */
.hero { padding-block: calc(68px + var(--space-3xl)) var(--space-2xl); }
.hero__grid { display: grid; gap: var(--space-xl); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); } }
.hero h1 { max-width: 12ch; }
.hero__aside { display: grid; gap: var(--space-lg); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__note { color: var(--color-muted); font-size: var(--text-sm); }
.hero__note b { color: var(--color-ok); font-weight: 600; }

/* product figure — real capture, hairline border, nothing re-drawn */
.shot { margin: 0; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-card); box-shadow: var(--shadow-figure); }
.shot img { width: 100%; height: auto; }
.shot figcaption { padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); color: var(--color-muted); font-size: var(--text-sm); }
.hero .shot { margin-top: var(--space-2xl); }
.shot--crop { aspect-ratio: 16 / 9; }
.shot--crop img { height: 100%; object-fit: cover; object-position: top left; }

@media (max-width: 40rem) {
  .hero .shot img, .step .shot img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 0 0; }
}

/* ---------- sections ---------- */
.sec { padding-block: var(--space-3xl); }
.sec--tight { padding-block: var(--space-2xl); }
.sec--tint { background: var(--color-paper-2); }
.sec__head { display: grid; gap: var(--space-md); max-width: 46ch; margin-bottom: var(--space-2xl); }
.sec__head p { color: var(--color-ink-2); font-size: var(--text-md); }

/* rows — problem → answer (spec-sheet rhythm, no cards, no icons) */
.rows { display: grid; border-top: var(--rule-hair) solid var(--color-rule); }
.row { display: grid; gap: var(--space-sm); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); } }
.row h3 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.row p { color: var(--color-ink-2); max-width: 58ch; }
.row p b { color: var(--color-ink); font-weight: 600; }

/* steps — F4, genuinely ordinal */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xl); counter-reset: step; }
.step { display: grid; gap: var(--space-lg); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .step { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
  .step:nth-child(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .step:nth-child(even) .step__text { order: 2; }
}
.step__text { display: grid; gap: var(--space-sm); position: sticky; top: 92px; }
.step__n { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--text-xl); }
.step p { color: var(--color-ink-2); max-width: 44ch; }
.step__more { color: var(--color-muted); font-size: var(--text-sm); }

/* features — split: tall sidebar capture + definition list */
.feat { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .feat { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.feat .shot { max-width: 380px; }
.feat__list { display: grid; margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.feat__item { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .feat__item { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-lg); } }
.feat__item dt { font-weight: 600; color: var(--color-ink); }
.feat__item dd { margin: 0; color: var(--color-ink-2); max-width: 52ch; }

/* pledge — three declaratives on the tinted band (subgrid keeps the bodies on one baseline) */
.pledge { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .pledge { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--space-md) var(--space-2xl); } .pledge__item { display: grid; grid-template-rows: subgrid; grid-row: span 2; } }
.pledge__item { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: 2px solid var(--color-accent); align-content: start; }
.pledge__item h3 { font-size: var(--text-lg); }
.pledge__item p { color: var(--color-ink-2); }

/* pricing — one honest panel */
.plan { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .plan { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); } }
.plan__card { background: var(--color-card); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-xl); display: grid; gap: var(--space-md); }
.plan__tag { display: inline-flex; align-self: start; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-deep); background: var(--color-accent-tint); border-radius: var(--radius-pill); padding: 0.3rem 0.75rem; }
.plan__price { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.03em; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); }
.plan__price small { font-family: var(--font-body); font-weight: 500; font-size: var(--text-base); color: var(--color-muted); letter-spacing: 0; margin-left: var(--space-xs); }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); color: var(--color-ink-2); }
.plan__list li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: var(--space-xs); align-items: start; }
.plan__list svg { width: 1.1rem; height: 1.1rem; color: var(--color-ok); margin-top: 0.2em; }
.plan__later { display: grid; gap: var(--space-sm); color: var(--color-ink-2); }
.plan__later h3 { font-size: var(--text-lg); }
.plan__later dl { margin: 0; display: grid; gap: var(--space-xs); }
.plan__later dt { font-weight: 600; color: var(--color-ink); }
.plan__later dd { margin: 0; }

/* faq — conversational, native disclosure */
.faq { display: grid; border-top: var(--rule-hair) solid var(--color-rule); max-width: 52rem; }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1.5rem; justify-content: start; align-items: center; gap: var(--space-md); padding-block: var(--space-lg); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(45deg); justify-self: center; transition: transform var(--dur-short) var(--ease-in-out); }
.faq details[open] summary::after { transform: rotate(225deg); }
.faq__a { padding-block: 0 var(--space-lg); color: var(--color-ink-2); max-width: 62ch; }

/* ---------- footer · Ft5 statement on the dark band ---------- */
.site-foot { background: var(--color-dark); color: var(--color-dark-ink); padding: var(--space-3xl) 0 var(--space-xl); border: 0; margin: 0; }
.site-foot .wrap { display: grid; gap: var(--space-2xl); }
.site-foot__line { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw + 0.6rem, 3.6rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 20ch; }
.site-foot__line b { color: var(--color-highlight); font-weight: 700; }
.site-foot__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.site-foot__meta { display: grid; gap: var(--space-md); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-dark-rule); color: var(--color-dark-muted); font-size: var(--text-sm); }
@media (min-width: 48rem) { .site-foot__meta { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-xl); } }
.site-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
@media (max-width: 40rem) { .site-foot__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); } }
.site-foot__links a, .site-foot__meta a { color: var(--color-dark-ink); text-decoration: none; white-space: nowrap; }
.site-foot__links a:hover, .site-foot__meta a:hover { text-decoration: underline; }
.site-foot__legal { grid-column: 1 / -1; max-width: 80ch; line-height: 1.55; }
.site-foot .brand { color: var(--color-dark-ink); }
.site-foot .brand span { color: var(--color-highlight); }

/* ---------- article pages (privacy · terma) ---------- */
.article { padding-block: calc(68px + var(--space-2xl)) var(--space-3xl); }
.article__body { max-width: 68ch; margin-inline: auto; display: grid; gap: var(--space-md); }
.article__body h1 { font-size: clamp(2rem, 2.4vw + 1rem, 3rem); }
.article__body .updated { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.article__body .lede { padding: var(--space-md) var(--space-lg); background: var(--color-accent-tint); border-radius: var(--radius-md); color: var(--color-accent-deep); font-size: var(--text-base); max-width: none; }
.article__body h2 { font-size: var(--text-lg); margin-top: var(--space-lg); color: var(--color-accent-deep); }
.article__body p, .article__body li { color: var(--color-ink-2); }
.article__body ul { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2xs); }
.article__body code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-paper-2); padding: 0.05em 0.4em; border-radius: var(--radius-sm); color: var(--color-ink); }

/* ---------- buy / success pages keep their inline component CSS; only the shell + tokens come from here ---------- */
.page-offset { padding-top: 68px; }
.notice { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); background: var(--color-accent-tint); color: var(--color-accent-deep); font-size: var(--text-sm); margin-bottom: var(--space-xl); }
.notice b { font-weight: 700; }

/* ---------- motion discipline ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
}