/* ==========================================================================
   Daleel Research, landing page (index.html) and the legal page (privasi.html)
   Brand "Paraf" v1.1 (lanjutan-sesi/brand: integrasi.md, tokens.css,
   final.json). This file holds the finished, static state of every section.
   Motion (reveals, the hero entrance and signature, the story crossfade,
   counters) is added on top of it later and must stay additive: with scripts
   off or a reduced-motion preference, what is written here is what people see.
   Every colour lives in the token block below; nothing after it uses a
   colour literal. The shared base.css is not edited: what the landing needs
   is overridden here, and the old .reveal class is not used on this page.
   ========================================================================== */

:root {
  /* ---------- Brand hooks (Paraf v1.1, lanjutan-sesi/brand/tokens.css) ---------- */
  --brand: #2847C3;                 /* Tinta Biru: buttons, current step, the paraf glyph */
  --brand-rgb: 40, 71, 195;
  --brand-hover: #2F50CF;
  --brand-press: #213BA6;
  --brand-ink: #2341B4;             /* links and brand text: 8.45:1 on white, 8.08 on Kertas */
  --brand-wash-solid: #EEF0FA;      /* the brand wash as a solid colour (rgba brand .08 over white) */
  --brand-deep: #15204F;            /* Tinta Pekat: the dark Lomba panel */
  --brand-on-dark: #9DB2FF;         /* Tinta Terang: brand colour on dark, 7.58 on Tinta Pekat */

  /* ---------- Type families ---------- */
  /* Owner decision, 6 November 2026: the serif is used on the landing only, for the wordmark and the display
     headlines (20 px and up) on index.html and privasi.html. Everything else is Inter. */
  --lp-font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --lp-font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lp-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;   /* search strings only */
  --lp-font-brand: var(--lp-font-serif);   /* the wordmark */
  /* Display lines (hero, section titles, chapter titles, the name word): one family token with its own weights and
     tracking, so the display face can change in one place. */
  --lp-font-display: var(--lp-font-serif);
  --lp-fw-display: 500;             /* hero display and the name word */
  --lp-fw-title: 500;               /* section titles (brand H1 scale) */
  --lp-fw-sub: 600;                 /* chapter and tile titles (brand H2 scale) */
  --lp-track-display: -.022em;
  --lp-track-title: -.015em;
  --lp-track-sub: -.01em;

  /* ---------- Neutrals: ink on paper ---------- */
  --lp-bg: #FAFAF8;                 /* Kertas, also the theme-color */
  --lp-surface: #FFFFFF;
  --lp-surface-2: #F3F3F0;
  --lp-surface-3: #EAEAE6;
  --lp-ink: #16181F;                /* 16.96:1 on Kertas */
  --lp-ink-2: #3D404A;              /* 9.90:1 on Kertas */
  --lp-muted: #5E616B;              /* 5.91:1 on Kertas, 5.56 on --lp-surface-2 */
  --lp-faint: #666973;              /* 5.24:1 on Kertas, 4.93 on --lp-surface-2 */
  --lp-line: rgba(22, 24, 31, .08);
  --lp-line-2: rgba(22, 24, 31, .14);
  --lp-line-control: #878A93;       /* rings and borders that must be seen: 3.30:1 on Kertas */
  --lp-nav-bg: rgba(250, 250, 248, .82);

  /* ---------- Accent: one ink, used with restraint ---------- */
  --lp-accent: var(--brand);
  --lp-accent-hover: var(--brand-hover);
  --lp-accent-press: var(--brand-press);
  --lp-accent-ink: var(--brand-ink);
  --lp-accent-wash: rgba(var(--brand-rgb), .08);
  --lp-accent-wash-2: rgba(var(--brand-rgb), .14);
  --lp-accent-wash-solid: var(--brand-wash-solid);   /* for nodes that sit on a line */
  --lp-accent-stroke: var(--brand); /* meaningful graphics: rail dots and thread, meters, the paraf glyph (3:1 or more) */
  --lp-on-accent: #FFFFFF;
  --lp-focus: rgba(var(--brand-rgb), .72);
  --lp-selection: rgba(var(--brand-rgb), .16);

  /* ---------- Sorot: the highlighter, one phrase per screen ---------- */
  --lp-sorot: #FFE35A;
  --lp-sorot-ink: #16181F;

  /* ---------- Status ---------- */
  --lp-ok: #34C759;                 /* fills and dots only */
  --lp-ok-ink: #1E7A44;
  --lp-ok-wash: rgba(52, 199, 89, .13);
  --lp-ok-line: rgba(52, 199, 89, .42);
  --lp-ok-bg: #F4FBF6;
  --lp-ok-glow: rgba(52, 199, 89, .22);
  --lp-warn-ink: #9A5300;
  --lp-warn-wash: rgba(255, 149, 0, .13);

  /* ---------- Dark panel (Lomba) ---------- */
  --lp-dark-bg: var(--brand-deep);
  --lp-dark-surface: #1F2B5E;
  --lp-dark-ink: #FAFAF8;           /* 14.87:1 on Tinta Pekat */
  --lp-dark-ink-2: #C3CAE4;         /* 9.54:1 on Tinta Pekat */
  --lp-dark-muted: #A6AECB;         /* 6.9:1 on Tinta Pekat */
  --lp-dark-accent: var(--brand-on-dark);
  --lp-dark-line: rgba(236, 237, 242, .12);
  --lp-shadow-dark: 0 18px 50px rgba(4, 8, 28, .45);

  /* ---------- Student work: pure white, neutral frame, never brand colours ---------- */
  --lp-doc-bg: #FFFFFF;
  --lp-doc-frame: rgba(22, 24, 31, .12);
  --lp-paper-line: #DADDE3;
  --lp-paper-fig: #9AA0AB;
  --lp-paper-soft: #EDEFF2;
  /* The forest plot as the app draws it for a paper (js/charts.js journal style). */
  --lp-fig-ink: #1D1D1F;
  --lp-fig-mark: #1F4E79;
  --lp-fig-pool: #9DC3E6;
  --lp-fig-null: #6B6B6B;
  /* File chips on the dark panel. */
  --lp-file-pdf: #C4170F;
  --lp-file-doc: #1F5FBF;
  --lp-file-jpg: #1E7A44;

  /* ---------- Depth ---------- */
  --lp-shadow-s: 0 1px 2px rgba(22, 24, 31, .05), 0 1px 1px rgba(22, 24, 31, .02);
  --lp-shadow-lift: 0 2px 8px rgba(22, 24, 31, .05), 0 16px 40px rgba(22, 24, 31, .08);
  --lp-shadow-stage: 0 1px 2px rgba(22, 24, 31, .04), 0 10px 30px rgba(22, 24, 31, .07), 0 40px 90px rgba(22, 24, 31, .10);

  /* ---------- Shape ---------- */
  --lp-r-xs: 8px;
  --lp-r-s: 12px;
  --lp-r-m: 20px;
  --lp-r-l: 28px;
  --lp-r-panel: clamp(24px, 3vw, 36px);
  --lp-pill: 999px;

  /* ---------- Type scale (brand scale, final.json typography) ---------- */
  --lp-fs-display: clamp(2.75rem, 1.5rem + 5vw, 5rem);       /* 44 to 80, Newsreader 500: the hero */
  --lp-fs-h2: clamp(2.125rem, 1.45rem + 2.8vw, 3.5rem);      /* 34 to 56, Newsreader 500: section titles (brand H1) */
  --lp-fs-h3: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);        /* 28 to 40, Newsreader 600: chapter titles (brand H2) */
  --lp-fs-card: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); /* 19 to 22, Inter 600: card titles */
  --lp-fs-lead: clamp(1.125rem, 1rem + .55vw, 1.3125rem);    /* 18 to 21, Inter 400 */
  --lp-fs-body: 1.0625rem;                                   /* 17 */
  --lp-fs-small: .9375rem;                                   /* 15 */
  --lp-fs-label: .8125rem;                                   /* 13, Inter 600: eyebrows and labels */
  --lp-fs-caption: .8125rem;                                 /* 13 */
  --lp-lh-display: 1.02;
  --lp-lh-title: 1.06;
  --lp-lh-head: 1.12;
  --lp-lh-lead: 1.45;
  --lp-lh-body: 1.5;
  --lp-track-body: -.011em;

  /* ---------- Layout ---------- */
  --lp-wrap: 1120px;
  --lp-wrap-text: 760px;
  --lp-gutter: clamp(18px, 4vw, 32px);
  --lp-nav-h: 52px;
  --sec-y: clamp(60px, 6vw, 96px);
  --sec-y-tight: clamp(44px, 5vw, 80px);
  --head-gap: clamp(30px, 3.2vw, 44px);

  /* ---------- Motion (spec section 3; used by the motion layer, nothing here animates yet) ---------- */
  --m-instant: 120ms;
  --m-fast: 200ms;
  --m-base: 320ms;
  --m-slow: 640ms;
  --m-slower: 960ms;
  --m-ease-out: cubic-bezier(.16, 1, .3, 1);
  --m-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --m-ease-spring: cubic-bezier(.3, 1.2, .5, 1);   /* chips, checks and badges only; the brand's softened spring (about 1 percent overshoot) */
  --m-ease-flick: cubic-bezier(.3, 0, 0, 1);       /* the paraf flick and the last stroke of the signature only */
  --m-sig: 1100ms;                                 /* the Paraf signature draw, once per session */
  --m-stagger: 60ms;                               /* index capped at 6 */
  --m-rise: 20px;
  --m-rise-lg: 48px;
}

/* ==========================================================================
   Page base (overrides base.css for these pages only)
   ========================================================================== */
html { scroll-padding-top: calc(var(--lp-nav-h) + 12px); }
body.lp {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--lp-font-text);
  font-size: var(--lp-fs-body);
  line-height: var(--lp-lh-body);
  letter-spacing: var(--lp-track-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.lp main { overflow-x: clip; }
.lp a { color: var(--lp-accent-ink); text-decoration: none; }
.lp a:hover { text-decoration: none; }
.lp ::selection { background: var(--lp-selection); }
.lp :focus-visible { outline: 3px solid var(--lp-focus); outline-offset: 2px; }
.lp h1, .lp h2, .lp h3 { text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.lp p { text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums lining-nums; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 10px;
  background: var(--lp-ink); color: var(--lp-surface) !important; font-size: 14px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.lp-wrap { width: 100%; max-width: calc(var(--lp-wrap) + 2 * var(--lp-gutter)); margin-inline: auto; padding-inline: var(--lp-gutter); }
.lp-sec { position: relative; padding-block: var(--sec-y); }

/* ---------- Type ---------- */
.lp-display, .lp-title, .chapter-title, .tile-wide-title, .name-word {
  font-family: var(--lp-font-display);
  font-optical-sizing: auto;
  color: var(--lp-ink);
  margin: 0;
}
.lp-display { font-size: var(--lp-fs-display); line-height: var(--lp-lh-display); font-weight: var(--lp-fw-display); letter-spacing: var(--lp-track-display); }
.lp-title { font-size: var(--lp-fs-h2); line-height: var(--lp-lh-title); font-weight: var(--lp-fw-title); letter-spacing: var(--lp-track-title); }
.line { display: block; }
.line-muted { color: var(--lp-muted); }
/* Eyebrows stay neutral: the accent is kept for actions, the symbol and the current state. */
.lp-eyebrow { margin: 0 0 14px; font-size: var(--lp-fs-label); line-height: 1.3; font-weight: 600; letter-spacing: 0; color: var(--lp-muted); }
.lp-lead { margin: 0; font-size: var(--lp-fs-lead); line-height: var(--lp-lh-lead); letter-spacing: -.012em; color: var(--lp-muted); }
.lp-head { max-width: calc(var(--lp-wrap-text) + 80px); margin: 0 auto var(--head-gap); text-align: center; }
.lp-head .lp-lead { max-width: 720px; margin: 22px auto 0; text-wrap: balance; }

/* The highlighter band behind one display phrase (hard stops, reads as a flat marker stroke). */
.lp-sorot {
  background: linear-gradient(transparent 60%, var(--lp-sorot) 60%, var(--lp-sorot) 92%, transparent 92%);
  color: var(--lp-sorot-ink);
  padding: 0 .06em; margin: 0 -.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Buttons and links ---------- */
.lp-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border: 0; border-radius: var(--lp-pill);
  font: 500 15px/1 var(--lp-font-text); letter-spacing: -.01em;
  white-space: nowrap; cursor: pointer; user-select: none;
  text-decoration: none !important;
}
.lp a.lp-btn-primary, .lp-btn-primary { background: var(--lp-accent); color: var(--lp-on-accent); }
.lp a.lp-btn-primary:hover, .lp-btn-primary:hover { background: var(--lp-accent-hover); }
.lp a.lp-btn-primary:active, .lp-btn-primary:active { background: var(--lp-accent-press); }
.lp-btn-ghost { background: var(--lp-accent-wash); color: var(--lp-accent-ink); }
.lp-btn-ghost:hover { background: var(--lp-accent-wash-2); }
.lp-btn-lg { height: 52px; padding: 0 30px; font-size: 17px; }
.lp-btn-sm { height: 34px; padding: 0 15px; font-size: 13px; }

/* Text link with a chevron that stays on the last line, right after the last word, when the label wraps. */
.lp-link { display: inline-block; max-width: 100%; font-size: 17px; line-height: 1.35; font-weight: 500; letter-spacing: -.012em; color: var(--lp-accent-ink); text-wrap: balance; }
.lp-link::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 2px 0 7px;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  rotate: 45deg; vertical-align: .12em;
}

/* ==========================================================================
   Wordmark: live text next to the symbol file (integrasi.md section 5)
   ========================================================================== */
.lp-brand {
  display: inline-block;
  font-family: var(--lp-font-brand); font-size: 20px; line-height: 1; font-weight: 650; letter-spacing: -.01em;
  color: var(--lp-ink) !important; white-space: nowrap; text-decoration: none;
}
.lp-brand-mark { display: inline-block; width: 1.4222em; height: 1.4222em; margin-right: .04em; vertical-align: -.1778em; }
.lp-brand-sub { font-style: italic; font-weight: 450; letter-spacing: -.005em; color: var(--lp-muted); }

/* ==========================================================================
   Nav
   ========================================================================== */
.lp-nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--lp-nav-h);
  background: var(--lp-nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-nav { background: var(--lp-bg); }
}
/* Hairline: visible by default; with the script, it shows only once the hero top has scrolled away. */
.lp-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--lp-line); }
.lp-ready .lp-nav:not(.is-scrolled)::after { opacity: 0; }
.lp-nav-inner {
  height: 100%; max-width: calc(var(--lp-wrap) + 2 * var(--lp-gutter)); margin: 0 auto; padding-inline: var(--lp-gutter);
  display: flex; align-items: center; gap: 28px;
}
.lp-nav-links { display: flex; gap: 28px; margin-left: auto; }
.lp-nav-links a { position: relative; padding: 6px 0; font-size: 13px; letter-spacing: -.005em; color: var(--lp-ink-2); }
.lp-nav-links a:hover { color: var(--lp-ink); }
.lp-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 1px;
  background: var(--lp-accent); transform: scaleX(0); transform-origin: left;
}
.lp-nav-links a[aria-current="true"] { color: var(--lp-ink); }
.lp-nav-links a[aria-current="true"]::after { transform: scaleX(1); }
.lp-nav-cta { margin-left: 4px; }
.lp-brand + .lp-nav-cta { margin-left: auto; }
.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding-top: clamp(32px, 5vw, 72px); padding-bottom: var(--sec-y-tight); }
/* The headline may run wider than the text column ("dibimbing sampai tuntas." at 80 px); the lead stays narrow. */
.hero-copy { max-width: calc(980px + 2 * var(--lp-gutter)); text-align: center; }
.hero-sign { display: block; width: 48px; height: 48px; margin: 0 auto 18px; overflow: visible; }
.hero-title { margin-top: 2px; }
.hero-lead { max-width: 660px; margin: 22px auto 0; text-wrap: balance; }
/* On wide screens each sentence of the lead gets its own line. */
@media (min-width: 1024px) {
  .hero-lead { max-width: 780px; }
  .hero-lead .sent { display: block; }
}
.hero-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 30px; margin-top: 30px; }
.hero-note { margin: 18px 0 0; font-size: var(--lp-fs-caption); color: var(--lp-faint); }
.hero-stage { margin-top: clamp(40px, 5vw, 64px); margin-bottom: 0; }
.stage-cap { margin: 16px auto 0; max-width: 600px; text-align: center; font-size: var(--lp-fs-caption); line-height: 1.45; color: var(--lp-faint); }

/* The product frame shared by the hero and the story stage: the real app chrome, on pure white. */
.stage-frame {
  position: relative; overflow: hidden;
  background: var(--lp-surface);
  border-radius: var(--lp-r-m);
  box-shadow: var(--lp-shadow-stage), 0 0 0 1px var(--lp-line);
}

/* ---------- App mock (hero) ----------
   Sizes are in em so the frame scales like a screenshot: 1.25cqi of a 1120 px frame is 14 px. */
.m-frame { container-type: inline-size; }
.m-ui { display: flex; flex-direction: column; height: 100%; font-size: 13px; line-height: 1.45; letter-spacing: -.008em; color: var(--lp-ink); text-align: left; }
.m-top { flex: none; display: flex; align-items: center; gap: .75em; height: 3.3em; padding: 0 1.3em; border-bottom: 1px solid var(--lp-line); }
.m-mark { flex: none; width: 24px; height: 24px; }
.m-crumb { display: flex; align-items: center; gap: .55em; min-width: 0; font-size: .92em; color: var(--lp-muted); white-space: nowrap; }
.m-crumb b { font-weight: 600; color: var(--lp-ink); overflow: hidden; text-overflow: ellipsis; }
.m-sep { flex: none; width: .4em; height: .4em; border-top: 1.5px solid var(--lp-line-control); border-right: 1.5px solid var(--lp-line-control); rotate: 45deg; }
.m-top-r { margin-left: auto; }
.m-mode { display: inline-block; padding: .35em .85em; border-radius: var(--lp-pill); background: var(--lp-surface-2); font-size: .8em; font-weight: 600; color: var(--lp-ink-2); white-space: nowrap; }
.m-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 15em minmax(0, 1fr); }

.m-rail { padding: 1.35em 1em 1em 1.25em; border-right: 1px solid var(--lp-line); background: var(--lp-bg); overflow: hidden; }
.m-proj b { display: block; font-size: .98em; font-weight: 600; line-height: 1.3; }
.m-due { display: inline-flex; align-items: center; gap: .45em; margin-top: .55em; padding: .28em .75em; border-radius: var(--lp-pill); background: var(--lp-surface-3); font-size: .74em; font-weight: 600; color: var(--lp-ink-2); }
.m-clock { position: relative; width: .95em; height: .95em; border: 1.4px solid currentColor; border-radius: 50%; }
.m-clock::after { content: ""; position: absolute; left: 50%; top: 18%; width: .28em; height: .3em; border-left: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; translate: -1px 0; }
.m-group { margin-top: .95em; }
.m-ph { display: block; margin: 0 0 .25em .15em; font-size: .72em; font-weight: 600; color: var(--lp-faint); }
.m-steps { list-style: none; margin: 0; padding: 0; }
.m-steps li { position: relative; padding: .3em 0 .3em 1.75em; font-size: .88em; line-height: 1.45; color: var(--lp-muted); white-space: nowrap; }
/* The benang merah: a thread through the steps, ink up to the current step. Done steps are plain dots (never the paraf glyph). */
.m-steps li::before {
  content: ""; position: absolute; z-index: 1; left: .27em; top: 50%; width: .72em; height: .72em; margin-top: -.36em;
  border-radius: 50%; border: 1.5px solid var(--lp-line-control); background: var(--lp-bg); box-sizing: border-box;
}
.m-steps li::after { content: ""; position: absolute; left: calc(.63em - .75px); top: calc(50% + .33em); height: calc(100% - .66em); width: 1.5px; background: var(--lp-line-2); }
.m-steps li:last-child::after { display: none; }
.m-steps li.is-done { color: var(--lp-ink-2); }
.m-steps li.is-done::before { border-color: var(--lp-accent-stroke); background: var(--lp-accent-stroke); width: .58em; height: .58em; margin-top: -.29em; left: .34em; }
.m-steps li.is-done::after { background: var(--lp-accent-stroke); }
.m-steps li.is-now { color: var(--lp-ink); font-weight: 600; }
.m-steps li.is-now::before { width: .72em; height: .72em; margin-top: -.36em; left: .27em; border-color: var(--lp-accent-stroke); background: var(--lp-accent-stroke); box-shadow: 0 0 0 .22em var(--lp-accent-wash); }
.m-steps li.is-now em { margin-left: .45em; font-style: normal; font-size: .82em; font-weight: 600; color: var(--lp-accent-ink); }

.m-main { display: flex; flex-direction: column; min-width: 0; padding: 1.75em 2.2em 1.3em; overflow: hidden; }
.m-foot { display: flex; align-items: center; gap: .55em; margin-top: auto; padding-top: 1.1em; }
.m-btn { display: inline-flex; align-items: center; height: 2.55em; padding: 0 1.15em; border-radius: var(--lp-pill); background: var(--lp-surface-2); color: var(--lp-ink-2); font-size: .86em; font-weight: 500; white-space: nowrap; }
.m-btn-push { margin-left: auto; }
.m-btn.is-primary { background: var(--lp-accent); color: var(--lp-on-accent); }
.m-btn.is-primary::after { content: ""; width: .42em; height: .42em; margin-left: .6em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; rotate: 45deg; }
.m-step { margin: 0; font-size: .8em; font-weight: 600; color: var(--lp-accent-ink); }
.m-h { margin: .25em 0 0; font-family: var(--lp-font-text); font-size: 1.95em; line-height: 1.12; font-weight: 650; letter-spacing: -.028em; color: var(--lp-ink); }
.m-sub { margin: .45em 0 0; font-size: .92em; color: var(--lp-muted); }
.m-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; margin-top: 1em; }
.m-chips span { padding: .38em .9em; border-radius: var(--lp-pill); background: var(--lp-ink); color: var(--lp-surface); font-size: .82em; font-weight: 500; }
.m-chips .m-chip-edit { background: none; padding-inline: .5em; color: var(--lp-accent-ink); }
.m-cards { display: grid; gap: .7em; margin-top: 1.15em; }
.m-card { position: relative; display: flex; align-items: center; gap: 1em; padding: .95em 1.15em; border-radius: 1em; background: var(--lp-surface); box-shadow: 0 0 0 1px var(--lp-line-2); }
.m-card.is-picked { box-shadow: 0 0 0 1.5px var(--lp-accent), 0 0 0 .3em var(--lp-accent-wash); }
.m-rank { flex: none; align-self: flex-start; display: grid; place-items: center; width: 2.05em; height: 2.05em; border-radius: .6em; background: var(--lp-surface-2); color: var(--lp-ink-2); font-size: .95em; font-weight: 700; font-variant-numeric: tabular-nums; }
.is-picked .m-rank, .v-pick .m-rank { background: var(--lp-accent); color: var(--lp-on-accent); }
.m-card-body { flex: 1; min-width: 0; }
.m-title { margin: 0; font-size: .98em; line-height: 1.38; font-weight: 600; color: var(--lp-ink); }
.m-mets { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .55em; }
.m-met { display: inline-flex; align-items: baseline; gap: .45em; padding: .28em .7em; border-radius: .5em; background: var(--lp-surface-2); font-size: .8em; white-space: nowrap; }
.m-met i { font-style: normal; color: var(--lp-muted); }
.m-met b { font-weight: 600; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.tone-ok { color: var(--lp-ok-ink) !important; }
.tone-warn { color: var(--lp-warn-ink) !important; }
.m-picked { flex: none; display: inline-flex; align-items: center; gap: .45em; padding: .55em 1em; border-radius: var(--lp-pill); background: var(--lp-accent-wash); color: var(--lp-accent-ink); font-size: .84em; font-weight: 600; }
.m-picked::before { content: ""; width: .32em; height: .62em; margin: -.2em .1em 0 0; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; rotate: 45deg; }

@media (min-width: 1024px) {
  .m-frame { aspect-ratio: 16 / 9; }
  .m-ui { font-size: 1.25cqi; }
}

/* ==========================================================================
   Proof strip
   ========================================================================== */
.proof { padding-block: calc(var(--sec-y-tight) / 2); }
.proof-grid {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between;
  margin: 0; padding-block: 23px;
  border-top: 1px solid var(--lp-line-2); border-bottom: 1px solid var(--lp-line-2);
}
.proof-item { padding: 2px 0 2px 28px; }
.proof-item + .proof-item { border-left: 1px solid var(--lp-line); }
.proof-item:first-child { padding-left: 0; }
.proof-item:not(:last-child) { padding-right: 28px; }
.proof-item dt { font-size: var(--lp-fs-caption); font-weight: 600; color: var(--lp-faint); }
.proof-item dd { margin: 6px 0 0; font-size: var(--lp-fs-small); line-height: 1.4; color: var(--lp-ink-2); }
.proof-list span { white-space: nowrap; }
.proof-list .sep { white-space: normal; }

/* ==========================================================================
   Cara kerja: the four-chapter story
   ========================================================================== */
.story-intro .lp-title { max-width: 720px; margin-inline: auto; }
.story-chapters { list-style: none; margin: 0; padding: 0; position: relative; }
.story-progress { display: none; }
.chapter-eyebrow { margin: 0 0 12px; font-size: var(--lp-fs-label); line-height: 1.3; font-weight: 600; color: var(--lp-muted); }
.chapter-title { font-size: var(--lp-fs-h3); line-height: var(--lp-lh-head); font-weight: var(--lp-fw-sub); letter-spacing: var(--lp-track-sub); }
.chapter-text { margin: 16px 0 0; font-size: var(--lp-fs-lead); line-height: var(--lp-lh-lead); letter-spacing: -.012em; color: var(--lp-muted); max-width: 34em; }
.story-stage { display: none; }

/* Chapter figures: the same product views as the stage layers, for screens without the sticky stage. */
.chapter-fig {
  margin: 28px 0 0; padding: 16px;
  container-type: inline-size;
  background: var(--lp-surface); border-radius: var(--lp-r-m);
  box-shadow: var(--lp-shadow-stage), 0 0 0 1px var(--lp-line);
}
.fig-ui { font-size: clamp(11px, 3.3cqi, 14px); line-height: 1.45; letter-spacing: -.006em; color: var(--lp-ink); }
.fig-ui > * + * { margin-top: .9em; }

@media (min-width: 1024px) {
  .story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 5.5vw, 96px); align-items: start; }
  .chapter { min-height: min(40vh, 340px); display: grid; align-content: center; padding-block: 2vh; }
  /* The centre band reaches the last chapter about a quarter screen before the story ends, so its stage layer
     stays pinned for a while instead of switching just as the stage scrolls away. */
  .chapter:last-child { min-height: min(65vh, 560px); align-content: start; }
  .chapter-fig { display: none; }
  .story-chapters { padding-left: clamp(22px, 2.2vw, 30px); }
  .story-progress { display: block; position: absolute; left: 0; top: 2vh; bottom: 2vh; width: 1.5px; border-radius: 1px; background: var(--lp-line-2); }
  .story-progress i { display: block; height: 100%; border-radius: inherit; background: var(--lp-accent-stroke); transform-origin: 50% 0; transform: scaleY(.25); }
  .story-chapters:has(.chapter[data-chapter="2"].is-active) .story-progress i { transform: scaleY(.5); }
  .story-chapters:has(.chapter[data-chapter="3"].is-active) .story-progress i { transform: scaleY(.75); }
  .story-chapters:has(.chapter[data-chapter="4"].is-active) .story-progress i { transform: scaleY(1); }
  .lp-ready .chapter:not(.is-active) .chapter-copy { opacity: .35; }
  .lp-ready .chapter.is-active .chapter-eyebrow { color: var(--lp-accent-ink); }
  .story-stage { display: block; position: sticky; top: calc(var(--lp-nav-h) + (100vh - var(--lp-nav-h) - min(76vh, 640px)) / 2); height: min(76vh, 640px); }
}
/* Without scripts the stage cannot follow the chapters, so each chapter keeps its own figure. */
@media (min-width: 1024px) and (scripting: none) {
  .story { display: block; }
  .story-stage, .story-progress { display: none !important; }
  .chapter, .chapter:last-child { min-height: 0; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; align-content: center; gap: clamp(48px, 5.5vw, 96px); padding-block: 40px; }
  .chapter-fig { display: block; margin: 0; }
}

/* ---------- Stage frame (desktop) ---------- */
.st-frame { height: 100%; container-type: size; }
.st-ui { display: flex; flex-direction: column; height: 100%; font-size: clamp(10.5px, min(2.3cqi, 1.95cqb), 14px); line-height: 1.45; letter-spacing: -.006em; color: var(--lp-ink); }
.st-thread { flex: none; position: relative; padding: .95em 1.4em .85em; border-bottom: 1px solid var(--lp-line); background: var(--lp-bg); }
.st-steps { list-style: none; margin: 0; padding: 0; position: relative; display: flex; justify-content: space-between; }
.st-steps::before { content: ""; position: absolute; left: .9em; right: .9em; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--lp-line-2); }
/* The thread fill is a scaled line (transform only), so the motion layer can grow it between stages. */
.st-steps::after { content: ""; position: absolute; left: .9em; right: .9em; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--lp-accent-stroke); transform-origin: left center; transform: scaleX(var(--fill, .1818)); }
.st-steps li {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 1.8em; height: 1.8em; border-radius: 50%;
  border: 1.5px solid var(--lp-line-control); background: var(--lp-bg); box-sizing: border-box;
  font-size: .76em; font-weight: 600; color: var(--lp-muted); font-variant-numeric: tabular-nums;
}
.st-range { margin: .65em 0 0; font-size: .8em; font-weight: 600; color: var(--lp-accent-ink); }
.st-range span { display: none; }
.st-body { position: relative; flex: 1; min-height: 0; }
/* Layers start at the top like an app screen, so the step label stays in one place when the layers swap. */
.st-layer { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 1.5em 1.5em 1.5em; opacity: 0; pointer-events: none; }
.st-layer > * { flex: none; }
.st-layer > * + * { margin-top: .85em; }

/* Done steps are filled, the current range is outlined in ink, later steps stay hollow. */
.story-stage[data-stage="1"] .st-steps li:nth-child(-n+3),
.story-stage[data-stage="2"] .st-steps li:nth-child(n+4):nth-child(-n+8),
.story-stage[data-stage="3"] .st-steps li:nth-child(n+9) { border-color: var(--lp-accent); background: var(--lp-accent-wash-solid); color: var(--lp-accent-ink); }
.story-stage[data-stage="2"] .st-steps li:nth-child(-n+3),
.story-stage[data-stage="3"] .st-steps li:nth-child(-n+8),
.story-stage[data-stage="4"] .st-steps li { border-color: var(--lp-accent); background: var(--lp-accent); color: var(--lp-on-accent); }
.story-stage[data-stage="1"] .st-steps { --fill: .1818; }
.story-stage[data-stage="2"] .st-steps { --fill: .6364; }
.story-stage[data-stage="3"] .st-steps,
.story-stage[data-stage="4"] .st-steps { --fill: 1; }
.story-stage[data-stage="1"] .st-range [data-for="1"],
.story-stage[data-stage="2"] .st-range [data-for="2"],
.story-stage[data-stage="3"] .st-range [data-for="3"],
.story-stage[data-stage="4"] .st-range [data-for="4"] { display: inline; }
.story-stage[data-stage="1"] [data-layer="1"],
.story-stage[data-stage="2"] [data-layer="2"],
.story-stage[data-stage="3"] [data-layer="3"],
.story-stage[data-stage="4"] [data-layer="4"] { opacity: 1; pointer-events: auto; }

/* ---------- Story visuals (stage layers and chapter figures) ---------- */
.v-card { background: var(--lp-surface); border-radius: 1em; box-shadow: 0 0 0 1px var(--lp-line-2); padding: 1.05em 1.15em; }
.v-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.v-chips span { padding: .34em .85em; border-radius: var(--lp-pill); background: var(--lp-ink); color: var(--lp-surface); font-size: .8em; font-weight: 500; }
.v-pick.is-picked { box-shadow: 0 0 0 1.5px var(--lp-accent), 0 0 0 .3em var(--lp-accent-wash); }
.v-pick-k { display: flex; align-items: center; gap: .6em; margin: 0; font-size: .8em; font-weight: 600; color: var(--lp-accent-ink); }
.v-pick-k .m-rank { width: 1.95em; height: 1.95em; font-size: 1em; }
.v-pick-t { margin: .6em 0 0; font-size: 1em; line-height: 1.38; font-weight: 600; }
.v-crit { display: grid; gap: .7em; margin-top: .95em; padding-top: .95em; border-top: 1px solid var(--lp-line); }
.crit { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) 3.4em; align-items: center; gap: .8em; }
.crit-k { font-size: .84em; font-weight: 500; color: var(--lp-muted); }
.crit-v { font-size: .9em; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crit-meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3em; }
.crit-meter i { height: .5em; border-radius: var(--lp-pill); background: var(--lp-accent); }
.crit-units { display: flex; flex-wrap: wrap; gap: .26em; }
.crit-units i { width: .66em; height: .66em; border-radius: .16em; background: var(--lp-accent); }
.crit-bars { display: grid; gap: .28em; }
.tb { display: grid; grid-template-columns: minmax(0, 1fr) 1.6em; align-items: center; gap: .45em; }
.tb i { display: block; width: var(--w); height: .5em; border-radius: var(--lp-pill); background: var(--lp-line-control); }
.tb.is-now i { background: var(--lp-accent); }
.tb em { font-style: normal; font-size: .78em; color: var(--lp-muted); font-variant-numeric: tabular-nums; }
.v-note { margin: .85em 0 0; font-size: .76em; line-height: 1.45; color: var(--lp-faint); }
.v-mini { display: flex; align-items: center; gap: .7em; padding: .6em .85em; border-radius: .85em; background: var(--lp-surface); box-shadow: 0 0 0 1px var(--lp-line); }
.v-mini .m-rank { width: 1.8em; height: 1.8em; font-size: .9em; }
.v-mini-t { flex: 1; min-width: 0; font-size: .84em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-mini-m { flex: none; font-size: .76em; color: var(--lp-muted); white-space: nowrap; }
.st-layer > .v-mini { margin-top: .55em; }
.st-layer > .v-mini + .v-mini { margin-top: .45em; }

.v-pico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4em; }
.v-pico span { display: flex; align-items: baseline; gap: .55em; min-width: 0; padding: .45em .7em; border-radius: .6em; background: var(--lp-surface-2); font-size: .8em; color: var(--lp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-pico b { color: var(--lp-accent-ink); font-weight: 700; }
.v-code { border-radius: .9em; background: var(--lp-surface); box-shadow: 0 0 0 1px var(--lp-line-2); overflow: hidden; }
.v-code-h { display: flex; justify-content: space-between; margin: 0; padding: .5em .95em; border-bottom: 1px solid var(--lp-line); background: var(--lp-bg); font-size: .76em; font-weight: 600; color: var(--lp-muted); }
.v-copy { color: var(--lp-accent-ink); }
.v-code pre { margin: 0; padding: .75em .95em .85em; overflow: hidden; font: 400 .78em/1.62 var(--lp-font-mono); letter-spacing: 0; color: var(--lp-ink-2); white-space: pre; }
.v-code pre em { font-style: normal; color: var(--lp-accent-ink); }
.v-code pre b { font-weight: 500; color: var(--lp-ink); }
.v-dbs { display: flex; flex-wrap: wrap; gap: .35em; }
.v-dbs span { padding: .3em .72em; border-radius: var(--lp-pill); background: var(--lp-surface); box-shadow: 0 0 0 1px var(--lp-line-2); font-size: .76em; font-weight: 600; color: var(--lp-ink-2); }
.v-funnel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5em; padding: .95em .7em; border-radius: .9em; background: var(--lp-surface-2); }
.vf { text-align: center; min-width: 0; }
.vf b { display: block; font-size: 1.9em; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: var(--lp-ink); }
.vf span { display: block; margin-top: .3em; font-size: .74em; line-height: 1.3; color: var(--lp-muted); }
.vf.is-final b { color: var(--lp-accent-ink); }
.vf-arrow { width: .6em; height: .6em; border-top: 1.5px solid var(--lp-line-control); border-right: 1.5px solid var(--lp-line-control); rotate: 45deg; margin-right: .2em; }

/* Forest plot: the student's figure as the app draws it (journal ink), with the paraf chip after the pooled value. */
.forest { padding: .95em 1.1em .85em; }
.fp-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2em 1em; margin: 0 0 .55em; }
.fp-cap b { font-size: .86em; font-weight: 600; }
.fp-cap span { font-size: .74em; color: var(--lp-muted); }
.fp-head, .fp-row, .fp-axis { display: grid; grid-template-columns: 6.3em minmax(0, 1fr) 8.4em 2.6em; column-gap: .75em; align-items: center; }
.fp-head { padding-bottom: .3em; border-bottom: 1px solid var(--lp-fig-ink); }
.fp-head > span { font-size: .7em; font-weight: 600; color: var(--lp-muted); white-space: nowrap; }
.fp-head .fp-e, .fp-head .fp-w { text-align: right; }
.fp-row { height: 1.62em; }
.fp-l { font-size: .8em; color: var(--lp-ink-2); white-space: nowrap; }
.fp-e { font-size: .78em; text-align: right; color: var(--lp-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-w { font-size: .76em; text-align: right; color: var(--lp-muted); font-variant-numeric: tabular-nums; }
.fp-p { position: relative; height: 100%; }
.fp-row .fp-p::before { content: ""; position: absolute; left: 33.33%; top: 0; bottom: 0; border-left: 1px dashed var(--lp-fig-null); }
.fp-ci { position: absolute; top: 50%; left: var(--lo); width: calc(var(--hi) - var(--lo)); height: 1.2px; margin-top: -.6px; background: var(--lp-fig-ink); }
.fp-sq { position: absolute; top: 50%; left: var(--x); width: calc(.42em + .5em * var(--s, .5)); aspect-ratio: 1; translate: -50% -50%; background: var(--lp-fig-mark); }
.fp-pool { height: 2.05em; margin-top: .2em; border-top: 1px solid var(--lp-line-2); }
.fp-pool .fp-l { font-weight: 600; color: var(--lp-ink); }
.fp-pool .fp-e { display: inline-flex; align-items: center; justify-content: flex-end; }
.fp-pool .fp-e b { font-weight: 700; color: var(--lp-ink); }
.fp-pool .fp-w { color: var(--lp-ink-2); }
.fp-dia { position: absolute; top: 50%; left: var(--lo); width: calc(var(--hi) - var(--lo)); height: .95em; translate: 0 -50%; overflow: visible; }
.fp-dia polygon { fill: var(--lp-fig-pool); stroke: var(--lp-fig-mark); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.fp-axis { height: 1.7em; align-items: start; }
.fp-axis .fp-p { border-top: 1px solid var(--lp-fig-ink); }
.fp-axis i { position: absolute; top: 0; left: var(--t); translate: -50% 0; padding-top: .5em; font-style: normal; font-size: .68em; line-height: 1; color: var(--lp-muted); font-variant-numeric: tabular-nums; }
.fp-axis i::before { content: ""; position: absolute; left: 50%; top: 0; height: .38em; border-left: 1px solid var(--lp-fig-ink); }
.fp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3em 1em; margin: .35em 0 0; font-size: .72em; color: var(--lp-muted); }
.fp-favor { display: flex; gap: 1.4em; }
.fp-favor span:first-child::before { content: "\2190\00a0"; }
.fp-favor span:last-child::after { content: "\00a0\2192"; }

/* The paraf chip: only right after a number computed by code. */
.lp-paraf {
  display: inline-grid; place-items: center; flex: none;
  width: 20px; height: 20px; margin-left: .4em; border-radius: 6px;
  background: var(--lp-accent-wash); vertical-align: -5px;
}
.lp-paraf::before {
  content: ""; width: 14px; height: 14px; background: var(--lp-accent-stroke);
  -webkit-mask: url("../brand/paraf.svg") center / contain no-repeat;
  mask: url("../brand/paraf.svg") center / contain no-repeat;
}
/* Inside the scaled product views the chip scales with the figure (about 20 px), never below 18 px. */
.fp-e .lp-paraf { width: max(18px, 1.95em); height: max(18px, 1.95em); border-radius: max(5px, .58em); margin-left: .45em; }
.fp-e .lp-paraf::before { width: max(12.5px, 1.38em); height: max(12.5px, 1.38em); }

.st-pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .85em; align-items: stretch; }
.prisma { padding: .85em .95em .9em; }
.pz-h { margin: 0 0 .55em; font-size: .7em; font-weight: 600; color: var(--lp-faint); }
.pz-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55em; }
.pz-row + .pz-row { margin-top: .62em; }
.pz-row + .pz-row::before { content: ""; position: absolute; left: 1.35em; top: -.62em; height: .62em; border-left: 1.2px solid var(--lp-line-control); }
.pz-box { padding: .32em .62em; border-radius: .45em; background: var(--lp-surface); box-shadow: 0 0 0 1px var(--lp-line-2); font-size: .74em; color: var(--lp-ink-2); white-space: nowrap; }
.pz-box b { font-weight: 700; color: var(--lp-ink); }
.pz-box.pz-final { background: var(--lp-ink); box-shadow: none; color: var(--lp-surface); }
.pz-box.pz-final b { color: var(--lp-surface); }
.pz-side { font-size: .68em; line-height: 1.25; color: var(--lp-muted); }
.v-prisma-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35em .5em; margin: 0; font-size: .76em; color: var(--lp-muted); }
.v-prisma-line i { width: .45em; height: .45em; border-top: 1.4px solid var(--lp-line-control); border-right: 1.4px solid var(--lp-line-control); rotate: 45deg; }
.v-prisma-line b { color: var(--lp-ink); font-weight: 700; }

.pages { position: relative; min-height: 9em; }
.page {
  position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1 / 1.414;
  display: flex; flex-direction: column; gap: .3em; padding: .65em .55em;
  border-radius: .3em; background: var(--lp-doc-bg); box-shadow: 0 0 0 1px var(--lp-doc-frame), var(--lp-shadow-s);
  translate: -50% -50%;
}
.page:nth-child(1) { translate: -98% -48%; rotate: -7deg; }
.page:nth-child(3) { translate: -2% -48%; rotate: 7deg; }
.page:nth-child(2) { z-index: 1; }
.ln { display: block; flex: none; width: 100%; height: .24em; border-radius: var(--lp-pill); background: var(--lp-paper-line); }
.ln.w9 { width: 90%; } .ln.w8 { width: 80%; } .ln.w7 { width: 70%; } .ln.w6 { width: 60%; } .ln.w5 { width: 50%; }
.pg-fig { display: block; flex: none; height: 24%; margin: .1em 0; border-radius: .12em; }
.pg-prisma { background: linear-gradient(var(--lp-paper-soft) 0 24%, transparent 24% 38%, var(--lp-paper-soft) 38% 62%, transparent 62% 76%, var(--lp-paper-fig) 76%) center / 58% 100% no-repeat; }
.pg-table { background: repeating-linear-gradient(var(--lp-paper-soft) 0 18%, var(--lp-doc-bg) 18% 26%); box-shadow: 0 0 0 1px var(--lp-paper-line); }
.pg-forest {
  background:
    linear-gradient(90deg, transparent 49%, var(--lp-paper-fig) 49% 51%, transparent 51%),
    repeating-linear-gradient(transparent 0 16%, var(--lp-paper-fig) 16% 22%, transparent 22% 28%) 62% 0 / 64% 100% no-repeat;
}

.v-slide { border-radius: .6em; overflow: hidden; background: var(--lp-doc-bg); box-shadow: 0 0 0 1px var(--lp-doc-frame), var(--lp-shadow-lift); }
.v-slide img { display: block; width: 100%; height: auto; }
.v-juri { position: relative; padding: .95em 1.1em 1em; border-radius: 1em; background: var(--lp-surface); box-shadow: 0 0 0 1px var(--lp-line-2), var(--lp-shadow-lift); }
.v-juri-k { margin: 0; font-size: .72em; font-weight: 600; color: var(--lp-accent-ink); }
.v-juri-q { margin: .35em 0 0; font-size: .92em; line-height: 1.38; font-weight: 600; }
.v-juri-a { margin: .45em 0 0; font-size: .82em; line-height: 1.45; color: var(--lp-muted); }
.st-layer .v-juri { width: 78%; margin: -2.6em 1.1em 0 auto; }
.v-tags { display: flex; flex-wrap: wrap; gap: .4em; }
.v-tags span { padding: .32em .75em; border-radius: var(--lp-pill); background: var(--lp-surface-2); font-size: .74em; font-weight: 600; color: var(--lp-ink-2); }

.story-note { max-width: 720px; margin: 28px auto 0; text-align: center; font-size: var(--lp-fs-caption); line-height: 1.45; color: var(--lp-faint); }

/* ---------- All 12 steps ---------- */
.steps-all { max-width: 900px; margin: 16px auto 0; }
.steps-all summary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: max-content; margin: 0 auto; padding: 8px 18px; border-radius: var(--lp-pill);
  list-style: none; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--lp-accent-ink);
}
.steps-all summary::-webkit-details-marker { display: none; }
.steps-all summary::before { content: ""; width: 6px; height: 6px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; rotate: 45deg; }
.steps-all[open] summary::before { rotate: 135deg; }
.steps-all summary:hover { background: var(--lp-accent-wash); }
.steps-list {
  list-style: none; margin: 16px 0 0; padding: clamp(22px, 3vw, 36px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 44px;
  border-radius: var(--lp-r-l); background: var(--lp-surface); box-shadow: 0 0 0 1px var(--lp-line);
}
.steps-list li { display: flex; gap: 14px; }
.steps-list .sn { flex: none; width: 24px; padding-top: 2px; font-size: 13px; font-weight: 600; color: var(--lp-faint); font-variant-numeric: tabular-nums; }
.steps-list b { font-size: 15px; font-weight: 600; }
.steps-list p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: var(--lp-muted); }

/* ==========================================================================
   Lomba: dark inset panel (Tinta Pekat)
   ========================================================================== */
.panel-dark {
  margin-inline: max(var(--lp-gutter), calc((100% - 1376px) / 2));
  padding: clamp(56px, 6vw, 88px) clamp(24px, 6vw, 96px);
  border-radius: var(--lp-r-panel);
  background: var(--lp-dark-bg); color: var(--lp-dark-ink);
}
.lomba-grid { max-width: var(--lp-wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.panel-dark .lp-eyebrow { color: var(--lp-dark-accent); }
.panel-dark .lp-title { color: var(--lp-dark-ink); }
.panel-dark .lp-lead { margin-top: 22px; color: var(--lp-dark-ink-2); }
.rules-viz { display: grid; justify-items: center; gap: 10px; }
.files { display: flex; align-items: flex-end; gap: 14px; }
.file {
  position: relative; display: grid; place-items: end center;
  width: 70px; height: 90px; padding-bottom: 12px; border-radius: 10px 4px 10px 10px;
  background: var(--lp-doc-bg); box-shadow: var(--lp-shadow-dark);
}
.file::before { content: ""; position: absolute; top: 0; right: 0; width: 18px; height: 18px; border-bottom-left-radius: 6px; background: var(--lp-surface-3); }
.file i { position: absolute; left: 13px; right: 22px; top: 16px; height: 30px; background: repeating-linear-gradient(var(--lp-paper-line) 0 3px, transparent 3px 8px); }
.file b { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.f-pdf { translate: 0 -10px; }
.f-pdf b { color: var(--lp-file-pdf); }
.f-doc b { color: var(--lp-file-doc); }
.f-jpg b { color: var(--lp-file-jpg); }
.rules-arrow { width: 12px; height: 12px; margin: 2px 0 6px; border-right: 1.8px solid var(--lp-dark-muted); border-bottom: 1.8px solid var(--lp-dark-muted); rotate: 45deg; }
.rules-card { width: 100%; max-width: 400px; padding: 20px 24px; border-radius: var(--lp-r-m); background: var(--lp-dark-surface); box-shadow: 0 0 0 1px var(--lp-dark-line), var(--lp-shadow-dark); }
.rc-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--lp-dark-ink); }
.rc-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-ok); box-shadow: 0 0 0 4px var(--lp-ok-glow); }
.rules-card dl { display: grid; gap: 9px; margin: 0; }
.rules-card dl div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding-top: 10px; border-top: 1px solid var(--lp-dark-line); }
.rules-card dt { font-size: 13px; color: var(--lp-dark-muted); }
.rules-card dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--lp-dark-ink); }

/* ==========================================================================
   Integritas dan kendali
   ========================================================================== */
.integ-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile-slot { display: flex; }
/* Flex items default to min-width: auto, which lets wide content (the approval card) push a tile past the screen. */
.tile-slot > *, .card-slot > *, .mode-slot > * { min-width: 0; }
.tile-slot-wide { grid-column: 1 / -1; }
.tile { width: 100%; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--lp-r-l); background: var(--lp-surface-2); }
.tile > h3 { margin: 18px 0 8px; font-size: var(--lp-fs-card); line-height: 1.25; font-weight: 600; letter-spacing: -.017em; }
.tile > p, .control-list p { margin: 0; font-size: var(--lp-fs-small); line-height: 1.5; color: var(--lp-muted); }
.tile-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lp-surface); }
.tile-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--lp-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile-wide { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.tile-wide-title { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.375rem); line-height: var(--lp-lh-head); font-weight: var(--lp-fw-sub); letter-spacing: var(--lp-track-sub); }
.control-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; }
.control-list li { padding-left: 18px; border-left: 2px solid var(--lp-line-2); }
.control-list b { font-size: 16px; font-weight: 600; }
.control-list p { margin: 4px 0 0; }
.approve { display: grid; grid-template-columns: minmax(0, 1fr); }
.ap-card { width: 100%; max-width: 420px; justify-self: end; padding: 22px; border-radius: 22px; background: var(--lp-surface); box-shadow: var(--lp-shadow-stage); }
.ap-h { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--lp-line); }
.ap-h div { display: grid; gap: 2px; min-width: 0; }
.ap-h b { font-size: 14px; font-weight: 600; }
.ap-h small, .ap-ok small { font-size: 12.5px; line-height: 1.4; color: var(--lp-muted); }
.ap-file { flex: none; display: grid; place-items: end center; width: 40px; height: 50px; padding-bottom: 7px; border-radius: 9px 4px 9px 9px; background: var(--lp-ok-ink); color: var(--lp-on-accent); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.ap-l { margin: 16px 0 8px; font-size: 12px; font-weight: 600; color: var(--lp-faint); }
.ap-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px; border-radius: 12px; background: var(--lp-surface-2); }
.ap-tag { flex: none; padding: 3px 9px; border-radius: var(--lp-pill); background: var(--lp-ok-wash); color: var(--lp-ok-ink); font-size: 11.5px; font-weight: 600; }
.ap-ref { min-width: 0; font-size: 13px; color: var(--lp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ok { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 11px 14px; border-radius: 14px; background: var(--lp-ok-bg); box-shadow: 0 0 0 1px var(--lp-ok-line); }
.ap-ok div { display: grid; gap: 1px; }
.ap-ok b { font-size: 14px; font-weight: 600; }
.ap-check { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--lp-ok); }
.ap-check::after { content: ""; position: absolute; left: 9.5px; top: 6px; width: 5px; height: 10px; border-right: 2px solid var(--lp-on-accent); border-bottom: 2px solid var(--lp-on-accent); rotate: 45deg; }

/* ==========================================================================
   Jenis riset: a full-bleed band with white cards
   ========================================================================== */
.jenis-sec { background: var(--lp-surface-2); }
.type-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card-slot { display: flex; }
.lp a.type-card {
  position: relative; display: flex; flex-direction: column; width: 100%;
  padding: 24px 24px 22px; border-radius: var(--lp-r-l);
  background: var(--lp-surface); color: var(--lp-ink);
}
.type-viz { display: block; width: 64px; height: 40px; margin-bottom: 16px; }
.type-viz svg { width: 100%; height: 100%; overflow: visible; }
.tv-axis { fill: none; stroke: var(--lp-line-control); stroke-width: 1.2; stroke-dasharray: 2 2; }
.tv-line { fill: none; stroke: var(--lp-ink-2); stroke-width: 1.4; stroke-linecap: round; }
.tv-mark { fill: var(--lp-ink-2); }
.tv-acc, .tv-acc-fill { fill: var(--lp-accent); }
.tv-acc-soft { fill: var(--lp-accent-wash-2); }
.tv-frame { fill: none; stroke: var(--lp-ink-2); stroke-width: 1.4; }
.tv-grid { fill: none; stroke: var(--lp-line-2); stroke-width: 1; }
.tv-dot { fill: var(--lp-line-control); }
.tv-soft { fill: var(--lp-surface-3); }
.tv-mid { fill: var(--lp-line-control); }
.type-card h3 { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.017em; color: var(--lp-ink); }
.type-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.type-card p { margin: 6px 0 16px; font-size: var(--lp-fs-small); line-height: 1.47; color: var(--lp-muted); }
.type-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.type-tags span { padding: 4px 10px; border-radius: var(--lp-pill); background: var(--lp-surface-2); color: var(--lp-ink-2); font-size: 12px; font-weight: 600; }
.type-flag { flex: none; padding: 3px 10px; border-radius: var(--lp-pill); background: var(--lp-accent-wash); color: var(--lp-accent-ink); font-size: 12px; line-height: 1.5; font-weight: 600; white-space: nowrap; }
/* "Mulai" sits at the top right, level with the micro-visual (on pointer devices it shows on hover). */
.type-go { position: absolute; right: 24px; top: 34px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--lp-accent-ink); }
.type-go::after { content: ""; width: 6px; height: 6px; margin-left: 6px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; rotate: 45deg; }
@media (hover: hover) and (pointer: fine) {
  .type-go { opacity: 0; }
  .type-card:hover .type-go, .type-card:focus-visible .type-go { opacity: 1; }
}

/* ==========================================================================
   Poster & presentasi
   ========================================================================== */
.tampil-head { max-width: calc(var(--lp-wrap-text) + 80px); margin: 0 auto; text-align: center; }
.tampil-head .lp-lead { max-width: 700px; margin: 22px auto 0; }
.tampil-viz { max-width: 840px; margin: var(--head-gap) auto 0; }
/* The student's work on pure white: one portrait poster beside two slides, all real renders. */
.tv-tray {
  display: grid; grid-template-columns: minmax(0, .825fr) minmax(0, 1fr); gap: clamp(10px, 1.8vw, 20px); align-items: center;
  padding: clamp(12px, 2.4vw, 28px); border-radius: var(--lp-r-l);
  background: var(--lp-doc-bg); box-shadow: var(--lp-shadow-stage), 0 0 0 1px var(--lp-line);
}
.tv-poster, .tv-slide { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px var(--lp-doc-frame); }
.tv-slides { display: grid; gap: clamp(10px, 1.8vw, 20px); }
.tv-cap { margin: 14px 0 0; text-align: center; font-size: var(--lp-fs-caption); line-height: 1.45; color: var(--lp-faint); }
.tampil-copy { max-width: var(--lp-wrap); margin: clamp(32px, 4vw, 52px) auto 0; }
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(24px, 3vw, 40px); }
.points li { padding-left: 18px; border-left: 2px solid var(--lp-line-2); }
.points b { font-size: 16px; font-weight: 600; }
.points p { margin: 4px 0 0; font-size: var(--lp-fs-small); line-height: 1.5; color: var(--lp-muted); }
.tampil-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--lp-line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.chips span { padding: 6px 12px; border-radius: var(--lp-pill); background: var(--lp-surface-2); color: var(--lp-ink-2); font-size: 13px; font-weight: 600; }

/* ==========================================================================
   Mode
   ========================================================================== */
.mode-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mode-slot { display: flex; }
.mode-card { position: relative; width: 100%; padding: 26px 26px 24px; border-radius: var(--lp-r-l); background: var(--lp-surface-2); }
.mode-card.is-rec { background: var(--lp-surface); box-shadow: 0 0 0 1.5px var(--lp-accent), var(--lp-shadow-s); }
.mode-bars { display: flex; gap: 5px; }
.mode-bars i { width: 26px; height: 6px; border-radius: var(--lp-pill); background: var(--lp-surface-3); }
.mode-card.is-rec .mode-bars i:not(.on) { background: var(--lp-surface-2); }
.mode-bars i.on { background: var(--lp-accent-stroke); }
.mode-card h3 { margin: 20px 0 2px; font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -.018em; }
.mode-tag { margin: 0; font-size: 14px; font-weight: 600; color: var(--lp-ink-2); }
.mode-card p:last-child { margin: 12px 0 0; font-size: var(--lp-fs-small); line-height: 1.5; color: var(--lp-muted); }
.mode-rec { position: absolute; top: 22px; right: 22px; padding: 4px 10px; border-radius: var(--lp-pill); background: var(--lp-accent-wash); color: var(--lp-accent-ink); font-size: 12px; font-weight: 600; }
.mode-note { margin: 24px 0 0; text-align: center; font-size: 14px; color: var(--lp-faint); }

/* ==========================================================================
   Penutup: the name, then the last call to action
   ========================================================================== */
.closing { text-align: center; }
.name-block { max-width: 640px; margin: 0 auto; }
.name-word { margin: 16px 0 0; font-size: clamp(5rem, 2.6rem + 8vw, 8.25rem); line-height: .98; font-weight: var(--lp-fw-display); letter-spacing: -.02em; }
.name-word i { font-style: italic; }
.name-text { margin: 14px auto 0; max-width: 600px; font-size: var(--lp-fs-lead); line-height: var(--lp-lh-lead); letter-spacing: -.012em; color: var(--lp-muted); }
.name-sign { display: flex; align-items: flex-start; gap: 12px; max-width: 500px; margin: 20px auto 0; text-align: left; font-size: 14px; line-height: 1.5; color: var(--lp-muted); }
.name-sign img { flex: none; width: 24px; height: 24px; margin-top: 0; }   /* the 24 px pixel master, at exactly 24 px */
.closing-title { margin-top: clamp(44px, 5.5vw, 76px); }
.closing-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 30px; margin-top: 34px; }
.share { display: none; }
@media (scripting: enabled) and (pointer: coarse) {
  .share { display: grid; justify-items: center; gap: 10px; margin-top: 30px; }
}
@media (scripting: enabled) and (max-width: 759.98px) {
  .share { display: grid; justify-items: center; gap: 10px; margin-top: 30px; }
}
.share-note { margin: 0; font-size: var(--lp-fs-caption); color: var(--lp-faint); }
.lp-toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60;
  translate: -50% 0; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 14px;
  background: var(--lp-ink); color: var(--lp-surface); font-size: 14px; font-weight: 500;
  opacity: 0; pointer-events: none;
}
.lp-toast.is-on { opacity: 1; }

/* ==========================================================================
   Footer
   ========================================================================== */
.lp-foot { padding: 32px 0 28px; background: var(--lp-surface-2); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: start; }
.foot-line { margin: 12px 0 0; font-size: 14px; color: var(--lp-muted); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 26px; padding-top: 4px; }
.lp .foot-links a { font-size: 14px; color: var(--lp-ink-2); }
.lp .foot-links a:hover { color: var(--lp-ink); }
.foot-copy { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--lp-line-2); font-size: 13px; color: var(--lp-faint); }

/* ==========================================================================
   Privasi page (privasi.html)
   ========================================================================== */
.doc { padding-block: clamp(48px, 7vw, 96px) var(--sec-y); }
.doc-head { max-width: var(--lp-wrap-text); }
.doc-head .lp-lead { margin-top: 20px; }
.doc-date { margin: 18px 0 0; font-size: var(--lp-fs-caption); color: var(--lp-faint); }
.doc-body { max-width: var(--lp-wrap-text); margin-top: clamp(40px, 5vw, 64px); }
.doc-sec { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--lp-line-2); }
.doc-sec:first-child { margin-top: 0; }
.doc-sec h2 { margin: 0; font-size: var(--lp-fs-card); line-height: 1.3; font-weight: 600; letter-spacing: -.017em; }
.doc-sec p, .doc-sec li { font-size: var(--lp-fs-body); line-height: 1.6; color: var(--lp-ink-2); }
.doc-sec p { margin: 12px 0 0; }
.doc-sec ul { margin: 12px 0 0; padding-left: 1.2em; }
.doc-sec li + li { margin-top: 6px; }
.doc-sec a { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1023.98px) {
  .chapter { padding-block: 22px; }
  .story-progress + .chapter { padding-top: 6px; }
  .chapter-copy, .chapter-fig { max-width: 640px; }
  .lomba-grid { grid-template-columns: minmax(0, 1fr); }
  .rules-viz { justify-self: center; width: 100%; max-width: 440px; }
  .tampil-viz { max-width: 720px; }
  .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-wide { grid-template-columns: minmax(0, 1fr); }
  .ap-card { justify-self: start; }
}
/* Tablets: the title runs across the tile, the three points and the approval card sit side by side below it. */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .tile-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title title" "list card"; row-gap: 24px; align-items: start; }
  .tile-wide-copy { display: contents; }
  .tile-wide-title { grid-area: title; }
  .control-list { grid-area: list; margin-top: 0; }
  .approve { grid-area: card; }
  .ap-card { justify-self: stretch; max-width: none; }
}
@media (max-width: 899.98px) {
  .integ-grid { grid-template-columns: minmax(0, 1fr); }
  .mode-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .points { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .tampil-copy { max-width: 560px; }
  .tampil-end { display: grid; justify-items: start; }
}
@media (max-width: 759.98px) {
  .lp-nav-inner { gap: 12px; }
  .lp-nav-links { display: none; }
  .lp-nav-cta { margin-left: auto; }
  .hero { padding-top: 32px; }
  .hero-sign { width: 40px; height: 40px; margin-bottom: 16px; }
  .hero-cta { flex-direction: column; gap: 16px; margin-top: 30px; }
  .hero-cta .lp-btn { width: 100%; max-width: 320px; }
  .hero-note { display: none; }
  .hero-stage { margin-top: 40px; }

  .m-top { padding: 0 1em; }
  .m-mode { display: none; }
  .m-body { display: block; }
  .m-rail { display: none; }
  .m-main { padding: 1.2em 1em 1.1em; }
  .m-h { font-size: 1.6em; }
  .m-sub { display: none; }
  .m-card { display: block; padding: 14px 14px 14px 48px; }
  .m-card .m-rank { position: absolute; left: 12px; top: 14px; width: 26px; height: 26px; font-size: 13px; }
  .m-title { font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .m-met:nth-child(n+3) { display: none; }
  .m-picked, .m-foot { display: none; }

  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; padding-block: 20px; }
  .proof-item { padding: 0 14px; }
  .proof-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  /* Lists read one item per line on phones, without the dots. */
  .proof-list span { display: block; }
  .proof-list .sep { display: none; }

  .steps-list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .steps-all summary { font-size: 15px; }

  .panel-dark { margin-inline: 12px; border-radius: 24px; padding: 48px 22px 44px; }
  .files { gap: 10px; }
  .file { width: 62px; height: 80px; }
  .rules-card { padding: 18px; }
  .rules-card dl div { grid-template-columns: 68px minmax(0, 1fr); }

  .tile:not(.tile-wide) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 22px 22px 24px; }
  .tile-ic { grid-row: 1 / span 2; width: 40px; height: 40px; }
  .tile > h3 { margin: 8px 0 6px; }
  .ap-card { padding: 18px; border-radius: 18px; }
  .ap-h { padding-bottom: 14px; }
  .ap-l { margin: 14px 0 8px; }
  .ap-ok { margin-top: 8px; padding: 9px 12px; }

  .type-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lp a.type-card {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 12px; grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 3px; align-items: center;
    padding: 16px 16px 16px 14px; border-radius: 18px;
  }
  .type-viz { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; padding: 9px 5px; border-radius: 11px; background: var(--lp-surface-2); }
  .type-card h3 { grid-column: 2; font-size: 16px; }
  .type-head { grid-column: 2; gap: 4px 8px; }
  .type-card p {
    grid-column: 2; margin: 0; font-size: 14px; line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .type-tags { display: none; }
  .type-flag { padding: 2px 8px; font-size: 11.5px; }
  .type-go { position: static; grid-column: 3; grid-row: 1 / span 2; font-size: 0; opacity: 1; }
  .type-go::after { margin: 0; width: 8px; height: 8px; }

  .tv-tray { padding: 10px; gap: 8px; border-radius: 18px; }
  .tv-slides { gap: 8px; }
  .tv-poster, .tv-slide { border-radius: 3px; }

  .mode-card { padding: 20px 20px 18px; }
  .mode-card h3 { margin-top: 12px; font-size: 19px; }
  .mode-card p:last-child { margin-top: 8px; }
  .closing-title .line { display: inline; }
  .closing-cta { flex-direction: column; gap: 16px; }
  .closing-cta .lp-btn { width: 100%; max-width: 320px; }

  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-links { justify-content: flex-start; }
}
/* Narrow phones: "Riset pertamamu," keeps its line. */
@media (max-width: 374.98px) {
  .hero-title { font-size: clamp(2.125rem, 10.6vw, 2.75rem); }
}
@media (max-width: 359.98px) {
  .lp-nav .lp-brand { font-size: 18px; }
  .lp-nav-cta { padding: 0 12px; }
}

/* ==========================================================================
   Motion, "gerak pena": a calm stroke, then one decisive flick. Additive only:
   everything above is the finished, static page. Nothing is hidden unless the
   script runs (html.lp-ready) and the reader allows motion, so the page reads
   fully without scripts and under prefers-reduced-motion. Only transform,
   opacity and stroke-dashoffset animate, apart from short colour changes.
   ========================================================================== */
@keyframes lp-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes lp-stage-in { from { opacity: 0; transform: translate3d(0, var(--m-rise-lg), 0) scale(.965); } }
@keyframes lp-write { to { stroke-dashoffset: 0; } }
@keyframes lp-up { from { opacity: 0; transform: translate3d(0, var(--up, 10px), 0); } }
@keyframes lp-chip { from { opacity: 0; transform: scale(.85); } }
@keyframes lp-pop { from { opacity: 0; transform: scale(0); } }
@keyframes lp-sx { from { transform: scaleX(0); } }
@keyframes lp-ring { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
@keyframes lp-flatten { from { transform: perspective(1800px) rotateX(9deg) scale(.95); } to { transform: none; } }
@keyframes lp-panel { from { transform: scale(.94); } to { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .lp-btn { transition: background-color var(--m-fast) var(--m-ease-out), transform var(--m-instant) var(--m-ease-out); }
  .lp-btn:active { transform: scale(.97); }
  .lp-nav-links a { transition: color var(--m-fast) var(--m-ease-out); }
  .lp-nav-links a::after { transition: transform var(--m-fast) var(--m-ease-out); }
  .steps-all summary { transition: background-color var(--m-fast) var(--m-ease-out); }
  .steps-all summary::before { transition: rotate var(--m-fast) var(--m-ease-out); }
  .lp-toast { transform: translate3d(0, 8px, 0); transition: opacity 160ms var(--m-ease-out), transform 160ms var(--m-ease-out); }
  .lp-toast.is-on { transform: none; transition-duration: var(--m-fast); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lp-link::after { transition: translate var(--m-fast) var(--m-ease-out); }
  .lp-link:hover::after { translate: 3px 0; }
  .type-card { transition: transform var(--m-fast) var(--m-ease-out); }
  .type-card:hover { transform: translate3d(0, -3px, 0); }
  .type-go { transform: translate3d(-4px, 0, 0); transition: opacity var(--m-fast) var(--m-ease-out), transform var(--m-fast) var(--m-ease-out); }
  .type-card:hover .type-go, .type-card:focus-visible .type-go { transform: none; }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  /* Hero: plays from the first paint, CSS only; everything settles by about 2.2 s. */
  [data-hero] { animation: lp-in var(--m-slow) var(--m-ease-out) var(--d, 0ms) both; }
  .hero-stage[data-hero] { animation-name: lp-stage-in; animation-duration: var(--m-slower); }
  /* The Paraf signature: the symbol writes itself (bowl, stem, flick), once per session (html.sig-seen after that). */
  .hero-sign[data-hero] { animation: none; }
  .hero-sign mask path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lp-write 450ms var(--m-ease-inout) forwards; }
  .hero-sign mask .s2 { animation-duration: 340ms; animation-delay: 380ms; }
  .hero-sign mask .s3 { animation-duration: 140ms; animation-delay: 720ms; animation-timing-function: var(--m-ease-flick); }
  .sig-seen .hero-sign mask path { animation: none; stroke-dashoffset: 0; }

  /* Hero mock: its own sequence once 30% of it is on screen (.is-in from landing.js). */
  .m-chips .m-chip-edit { --k: 3; }
  .lp-ready .hero-stage .m-chips > span { transition: opacity var(--m-base) var(--m-ease-out), transform var(--m-base) var(--m-ease-spring); transition-delay: calc(700ms + var(--k, 0) * 120ms); }
  .lp-ready .hero-stage:not(.is-in) .m-chips > span { opacity: 0; transform: scale(.85); }
  .lp-ready .hero-stage .m-card { transition: opacity 560ms var(--m-ease-out), transform 560ms var(--m-ease-out); transition-delay: calc(1100ms + var(--k, 0) * 80ms); }
  .lp-ready .hero-stage:not(.is-in) .m-card { opacity: 0; transform: translate3d(0, 12px, 0); }
  .lp-ready .hero-stage .m-met { transition: opacity var(--m-base) var(--m-ease-out); transition-delay: calc(1300ms + var(--k, 0) * 80ms); }
  .lp-ready .hero-stage:not(.is-in) .m-met { opacity: 0; }
  .lp-ready .hero-stage .m-card.is-picked { box-shadow: 0 0 0 1px var(--lp-line-2); }
  .lp-ready .hero-stage .m-card.is-picked::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 1.5px var(--lp-accent), 0 0 0 .3em var(--lp-accent-wash);
    transition: opacity var(--m-base) var(--m-ease-out) 1800ms, transform var(--m-base) var(--m-ease-out) 1800ms;
  }
  .lp-ready .hero-stage:not(.is-in) .m-card.is-picked::after { opacity: 0; transform: scale(1.02); }
  .lp-ready .hero-stage .m-picked, .lp-ready .hero-stage .m-steps li.is-now em { transition: opacity var(--m-base) var(--m-ease-out) 1800ms; }
  .lp-ready .hero-stage:not(.is-in) .m-picked, .lp-ready .hero-stage:not(.is-in) .m-steps li.is-now em { opacity: 0; }

  /* Reveal API: data-reveal (text), ="stage" (product visuals), ="fade" (strips); --i staggers grid children. */
  .lp-ready [data-reveal] { transition: opacity var(--m-slow) var(--m-ease-out), transform var(--m-slow) var(--m-ease-out); transition-delay: calc(var(--i, 0) * var(--m-stagger)); }
  .lp-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, var(--m-rise), 0); }
  .lp-ready [data-reveal="stage"] { transition-duration: var(--m-slower); }
  .lp-ready [data-reveal="stage"]:not(.is-in) { transform: translate3d(0, var(--m-rise-lg), 0) scale(.965); }
  .lp-ready [data-reveal="fade"]:not(.is-in) { transform: none; }
  .lp-ready .name-block { transition-duration: 1200ms; }
  .lp-ready .name-block:not(.is-in) { transform: scale(.98); }

  /* Story: one chapter at a time; the stage cross-fades its layers and the thread grows. */
  .lp-ready .chapter .chapter-copy { transition: opacity var(--m-base) var(--m-ease-inout); }
  .lp-ready .chapter .chapter-eyebrow { transition: color var(--m-fast) var(--m-ease-inout); }
  .story-progress i { transition: transform 400ms var(--m-ease-out); }
  .st-steps::after { transition: transform var(--m-base) var(--m-ease-inout); }
  .st-steps li { transition: background-color var(--m-fast) var(--m-ease-inout), border-color var(--m-fast) var(--m-ease-inout), color var(--m-fast) var(--m-ease-inout); }
  .st-layer { transform: translate3d(0, 24px, 0) scale(.98); transition: opacity 320ms var(--m-ease-inout), transform var(--m-slow) var(--m-ease-out); }
  .story-stage[data-stage="1"] [data-layer="1"],
  .story-stage[data-stage="2"] [data-layer="2"],
  .story-stage[data-stage="3"] [data-layer="3"],
  .story-stage[data-stage="4"] [data-layer="4"] { transform: none; transition: opacity 480ms var(--m-ease-inout) 80ms, transform var(--m-slow) var(--m-ease-out) 80ms; }

  /* Layer content: plays when its layer becomes current in a revealed stage (desktop), or when the chapter figure
     is revealed (narrower screens). --r is the element's place among its siblings (landing.js). */
  .story-stage.is-in[data-stage="1"] [data-layer="1"] .v-chips span, .chapter-fig.is-in .v-chips span { animation: lp-chip var(--m-base) var(--m-ease-spring) calc(var(--r, 0) * 90ms) both; }
  .story-stage.is-in[data-stage="1"] [data-layer="1"] .v-pick, .chapter-fig.is-in .v-pick { --up: 12px; animation: lp-up var(--m-slow) var(--m-ease-out) 200ms both; }
  .story-stage.is-in[data-stage="1"] [data-layer="1"] :is(.crit-meter i, .crit-units i, .tb i),
  .chapter-fig.is-in :is(.crit-meter i, .crit-units i, .tb i) { transform-origin: 0 50%; animation: lp-sx 900ms var(--m-ease-out) calc(450ms + var(--r, 0) * 45ms) both; }
  .story-stage.is-in[data-stage="1"] [data-layer="1"] .v-mini, .chapter-fig.is-in .v-mini { animation: lp-up var(--m-slow) var(--m-ease-out) calc(600ms + var(--r, 0) * 100ms) both; }

  .story-stage.is-in[data-stage="2"] [data-layer="2"] .v-pico span, .chapter-fig.is-in .v-pico span { animation: lp-up var(--m-base) var(--m-ease-out) calc(var(--r, 0) * 60ms) both; }
  .story-stage.is-in[data-stage="2"] [data-layer="2"] .v-code, .chapter-fig.is-in .v-code { animation: lp-up var(--m-slow) var(--m-ease-out) 180ms both; }
  .story-stage.is-in[data-stage="2"] [data-layer="2"] .v-dbs span, .chapter-fig.is-in .v-dbs span { animation: lp-up var(--m-base) var(--m-ease-out) calc(320ms + var(--r, 0) * 50ms) both; }
  .story-stage.is-in[data-stage="2"] [data-layer="2"] :is(.vf, .vf-arrow), .chapter-fig.is-in :is(.vf, .vf-arrow) { animation: lp-up var(--m-base) var(--m-ease-out) calc(420ms + var(--r, 0) * 90ms) both; }

  .story-stage.is-in[data-stage="3"] [data-layer="3"] .fp-ci, .chapter-fig.is-in .fp-ci { transform-origin: 50% 50%; animation: lp-sx 480ms var(--m-ease-out) calc(var(--r, 0) * 70ms) both; }
  .story-stage.is-in[data-stage="3"] [data-layer="3"] .fp-sq, .chapter-fig.is-in .fp-sq { animation: lp-pop var(--m-base) var(--m-ease-spring) calc(var(--r, 0) * 70ms + 120ms) both; }
  .story-stage.is-in[data-stage="3"] [data-layer="3"] .fp-dia, .chapter-fig.is-in .fp-dia { animation: lp-pop 400ms var(--m-ease-out) calc(var(--r, 0) * 70ms + 150ms) both; }
  .story-stage.is-in[data-stage="3"] [data-layer="3"] .fp-pool .lp-paraf, .chapter-fig.is-in .fp-pool .lp-paraf { animation: lp-chip var(--m-base) var(--m-ease-out) calc(var(--r, 0) * 70ms + 480ms) both; }
  .story-stage.is-in[data-stage="3"] [data-layer="3"] .pz-row, .chapter-fig.is-in .pz-row { --up: 8px; animation: lp-up var(--m-base) var(--m-ease-out) calc(320ms + var(--r, 0) * 60ms) both; }
  .story-stage.is-in[data-stage="3"] [data-layer="3"] .page, .chapter-fig.is-in .page { --up: 14px; animation: lp-up 720ms var(--m-ease-out) calc(420ms + var(--r, 0) * 90ms) both; }

  .story-stage.is-in[data-stage="4"] [data-layer="4"] .v-slide, .chapter-fig.is-in .v-slide { --up: 24px; animation: lp-up var(--m-slow) var(--m-ease-out) both; }
  .story-stage.is-in[data-stage="4"] [data-layer="4"] .v-juri, .chapter-fig.is-in .v-juri { --up: 24px; animation: lp-up var(--m-slow) var(--m-ease-out) 160ms both; }
  .story-stage.is-in[data-stage="4"] [data-layer="4"] .v-tags span, .chapter-fig.is-in .v-tags span { animation: lp-up var(--m-base) var(--m-ease-out) calc(320ms + var(--r, 0) * 60ms) both; }

  /* Lomba: the three files land, then the rules are read line by line. */
  .lp-ready .rules-viz .file { transition: opacity var(--m-slow) var(--m-ease-out), transform var(--m-slow) var(--m-ease-out); transition-delay: calc(200ms + var(--r, 0) * 80ms); }
  .lp-ready .rules-viz:not(.is-in) .f-jpg { opacity: 0; transform: translate(-60px, 30px) rotate(-12deg); }
  .lp-ready .rules-viz:not(.is-in) .f-pdf { opacity: 0; transform: translate(0, 50px) rotate(4deg); }
  .lp-ready .rules-viz:not(.is-in) .f-doc { opacity: 0; transform: translate(60px, 30px) rotate(10deg); }
  .lp-ready .rules-viz .rules-arrow { transition: opacity var(--m-base) var(--m-ease-out) 520ms; }
  .lp-ready .rules-viz:not(.is-in) .rules-arrow { opacity: 0; }
  .lp-ready .rules-viz .rules-card dl > div { transition: opacity var(--m-base) var(--m-ease-out), transform var(--m-base) var(--m-ease-out); transition-delay: calc(640ms + var(--r, 0) * 70ms); }
  .lp-ready .rules-viz:not(.is-in) .rules-card dl > div { opacity: 0; transform: translate3d(0, 8px, 0); }
  .rules-viz.is-in .rc-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lp-ok); animation: lp-ring 900ms var(--m-ease-out) 1100ms both; }

  /* Integritas: the two reviewers sign off one after the other. */
  .lp-ready .tile-slot-wide .ap-check { transition: opacity var(--m-base) var(--m-ease-out) 300ms, transform var(--m-base) var(--m-ease-spring) 300ms; }
  .lp-ready .tile-slot-wide .ap-ok + .ap-ok .ap-check { transition-delay: 700ms; }
  .lp-ready .tile-slot-wide:not(.is-in) .ap-check { opacity: 0; transform: scale(0); }

  /* Mode: the bars fill, then the recommendation badge. */
  .lp-ready .mode-slot .mode-bars i { transform-origin: 0 50%; transition: transform 480ms var(--m-ease-out); transition-delay: calc(200ms + var(--r, 0) * 80ms); }
  .lp-ready .mode-slot:not(.is-in) .mode-bars i { transform: scaleX(0); }
  .lp-ready .mode-slot .mode-rec { transition: opacity var(--m-base) var(--m-ease-out) 400ms, transform var(--m-base) var(--m-ease-spring) 400ms; }
  .lp-ready .mode-slot:not(.is-in) .mode-rec { opacity: 0; transform: scale(.85); }
}

/* Scroll-linked touches, only where the browser supports scroll timelines (others keep the plain reveal). */
@supports (animation-timeline: view()) {
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .stage-tilt { transform-origin: 50% 0; animation: lp-flatten linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .panel-dark { animation: lp-panel linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }
}