/* Noboru AI — reusable component classes
 * Built on tokens.css. Mirrors components.jsx primitives (Frame, SlideHeader,
 * Chrome, KPI, FeatureCard, CompareCard, AscentHero/Motif).
 *
 * Authoring rules:
 *  - All sizes/colors come from var(--…). No magic numbers.
 *  - Templates compose these classes. Inline styles only for per-instance
 *    accents (e.g. featured course card border color).
 */

/* ── Base typography ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  font-family: var(--font-jp);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
}

deck-stage section {
  font-family: var(--font-jp);
  background: var(--color-paper);
  color: var(--color-ink);
  letter-spacing: 0.01em;
}

/* ── Frame — standardized slide padding ──────────────────────── */
.deck-frame {
  position: absolute;
  inset: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-pad-top) var(--space-pad-x) var(--space-pad-bottom);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.deck-frame--mist { background: var(--color-mist); }
.deck-frame--deep {
  background: var(--color-deep);
  color: #fff;
}

/* ── Header — eyebrow + title + focus-bar ────────────────────── */
.deck-header { margin-bottom: var(--space-title-gap); }
.deck-eyebrow {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: var(--type-micro);
  letter-spacing: 0.18em;
  color: var(--color-orange);
  margin-bottom: 22px;
}
.deck-eyebrow--muted { color: var(--color-muted); }
.deck-title {
  margin: 0;
  font-size: var(--type-title);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.deck-title--navy { color: var(--color-navy); }
.deck-title--white { color: #fff; }
.focus-bar {
  width: 56px;
  height: 6px;
  background: var(--color-orange);
  border-radius: 3px;
  margin-top: 28px;
}

/* ── Numbered eyebrow (orange index + accent line + label) ─── */
.deck-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.deck-eyebrow-row__num {
  font-family: var(--font-en);
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--color-orange);
}
.deck-eyebrow-row__line {
  width: 36px;
  height: 2px;
  background: var(--color-orange);
  flex-shrink: 0;
}

/* ── Bottom chrome (Noboru AI mark + 01/25) ──────────────────── */
.chrome {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 56px;
  font-size: var(--type-micro);
  color: var(--color-muted);
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 5;
}
.chrome .mark { font-weight: 700; font-size: var(--type-micro); letter-spacing: 0.02em; }
.chrome .mark .n { color: var(--color-navy); }
.chrome .mark .a { color: var(--color-orange); }
.chrome .num { font-variant-numeric: tabular-nums; font-weight: 500; }
.chrome .num .sep { color: var(--color-line); margin: 0 8px; }
.chrome--light { color: rgba(255,255,255,0.6); }
.chrome--light .mark .n { color: #fff; }
.chrome--light .mark .a { color: var(--color-orange); }
.chrome--light .num .sep { color: rgba(255,255,255,0.25); }

/* ── Subtle grid backgrounds ─────────────────────────────────── */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(11, 59, 140, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 59, 140, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
}
.grid-bg--dark {
  background-image:
    linear-gradient(to right, rgba(255,255,255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255, 0.06) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* ── Logotype ────────────────────────────────────────────────── */
.logotype {
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.logotype .n { color: var(--color-navy); }
.logotype .a { color: var(--color-orange); }
.logotype--light .n { color: #fff; }
.logotype--light .a { color: var(--color-orange); }

/* ── Card primitive ──────────────────────────────────────────── */
.card {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}
.card--accent-top {
  border-top: 4px solid var(--color-orange);
}
.card--accent-left {
  border-left: 4px solid var(--color-orange);
}

/* ── KPI tile ─────────────────────────────────────────────────── */
.kpi {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  box-sizing: border-box;
}
.kpi__label {
  font-size: var(--type-small);
  color: var(--color-muted);
  font-weight: 500;
}
.kpi__value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.kpi__value {
  font-family: var(--font-en);
  font-size: var(--type-display-xl);
  font-weight: 800;
  line-height: 1;
  color: var(--color-navy);
  letter-spacing: -0.04em;
}
.kpi__value--orange { color: var(--color-orange); }
.kpi__unit {
  font-size: var(--type-subtitle);
  color: inherit;
  font-weight: 700;
}
.kpi__sublabel {
  font-size: var(--type-small);
  color: var(--color-muted);
}

/* ── Feature card (3-column) ─────────────────────────────────── */
.feature-card {
  flex: 1;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}
.feature-card__num {
  font-family: var(--font-en);
  font-size: 34px;
  font-weight: 700;
  color: var(--color-orange);
  letter-spacing: -0.01em;
}
.feature-card__title {
  font-size: var(--type-subtitle);
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.feature-card__body {
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--color-muted);
  font-weight: 400;
}

/* ── Bullet list (orange marker) ─────────────────────────────── */
.bullet-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-item-gap);
}
.bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--color-ink);
}
.bullet-list li::before {
  content: '';
  flex: none;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--color-orange);
  margin-top: 18px;
}

/* ── Compare card (Before / After) ───────────────────────────── */
.compare-card {
  flex: 1;
  border-radius: var(--radius-lg);
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-sizing: border-box;
}
.compare-card--before {
  background: var(--color-mist);
  border: 1px solid var(--color-line);
}
.compare-card--after {
  background: var(--color-paper);
  border: 2px solid var(--color-navy);
}
.compare-card__tag {
  align-self: flex-start;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.compare-card--before .compare-card__tag {
  background: #E2E8F0;
  color: var(--color-muted);
}
.compare-card--after .compare-card__tag {
  background: var(--color-orange);
  color: #fff;
}
.compare-card__title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.compare-card--before .compare-card__title { color: var(--color-muted); }
.compare-card--after .compare-card__title { color: var(--color-navy); }
.compare-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-item-gap);
}
.compare-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 26px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.compare-card--before .compare-card__list li { color: var(--color-muted); }
.compare-card--after .compare-card__list li { color: var(--color-ink); }
.compare-card__list li::before {
  flex: none;
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.compare-card--before .compare-card__list li::before {
  content: '×';
  color: #94A3B8;
}
.compare-card--after .compare-card__list li::before {
  content: '→';
  color: var(--color-orange);
}

/* ── AscentHero motif (used in cover / dividers / closing) ──── */
.ascent-hero {
  position: absolute;
  right: 0; bottom: 0;
  pointer-events: none;
}

/* ── Lucide icon (mask helper) ────────────────────────────────
 * Drives the fill via `color`, the glyph via `--icon-url`,
 * and the size via `--icon-size`. Token-friendly, PDF-safe.
 *   <span class="icon" style="--icon-url:url('../../assets/icons/shield-check.svg');"></span>
 */
.icon {
  display: inline-block;
  flex: none;
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
  background-color: currentColor;
  -webkit-mask-image: var(--icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}