/* KISO AI site v3. Layout follows the AI with Remy system (centred reading column,
   desktop-software framing, tilted paper objects); colour, type and texture follow docs/BRAND.md.
   Single light theme on purpose: cream ground, never plain white. */
:root {
  --bg: #F4F1EB;          /* cream ground */
  --bg-subtle: #F0ECE5;
  --card: #EDE9E1;
  --raise: #E6E2D9;
  --sheet: #FCFAF5;       /* raised paper objects that sit on the cream */
  --ruled: #FAF7EE;       /* letter paper */
  --ruled-edge: #E5DECA;
  --ink: #111827;
  --ink-2: #374151;
  --muted: #6B7280;
  --faint: #9CA3AF;
  --indigo: #4338CA;
  --indigo-lt: #6366F1;
  --indigo-dim: rgba(67, 56, 202, 0.10);
  --indigo-glow: rgba(67, 56, 202, 0.05);
  --ice: #EEF2FF;
  --lavender: #C7D2FE;
  --claude: #D97757;      /* AI-feature accents only */
  --claude-dim: rgba(217, 119, 87, 0.14);
  --green: #059669;
  --line-green: #06C755;
  --rule: rgba(17, 24, 39, 0.09);
  --rule-strong: rgba(17, 24, 39, 0.18);
  --shadow-soft: 0 1px 2px rgba(17, 24, 39, 0.05), 0 12px 32px -12px rgba(17, 24, 39, 0.16);
  --shadow-lift: 0 2px 0 rgba(17, 24, 39, 0.04), 0 24px 60px -24px rgba(17, 24, 39, 0.28);

  --f-display: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --f-body: "Inter", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-hand: "Caveat", "Klee One", cursive;
  --f-kanji: "Yuji Boku", "Noto Serif JP", serif;

  --col: 720px;
  --wide: 1040px;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(67, 56, 202, 0.13) 1px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  overflow-x: clip;
}
/* paper grain over everything, ~3.5% */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html[lang="ja"] body { font-size: 15px; line-height: 1.9; }
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--lavender); color: var(--ink); }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- language switching ---------- */
html[data-lang="en"] .ja { display: none !important; }
html:not([data-lang="en"]) .en { display: none !important; }
.ib { display: inline-block; } /* keep Japanese phrases whole when wrapping */

/* ---------- shared type ---------- */
h1, h2, h3 { font-family: var(--f-display); color: var(--ink); text-wrap: balance; margin: 0; }
h1 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; font-size: clamp(36px, 6.2vw, 64px); }
html[lang="ja"] h1 { letter-spacing: -0.01em; line-height: 1.28; font-size: clamp(32px, 5.4vw, 56px); }
h2 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; font-size: clamp(26px, 3.6vw, 36px); }
html[lang="ja"] h2 { letter-spacing: 0; line-height: 1.45; font-size: clamp(23px, 3.2vw, 32px); }
h3 { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; line-height: 1.4; }
p { margin: 0; }
.mono { font-family: var(--f-mono); }
.label {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.lead { color: var(--muted); font-size: clamp(16px, 1.6vw, 18px); max-width: 38em; margin-inline: auto; }
html[lang="ja"] .lead { font-size: clamp(15px, 1.5vw, 17px); }
.hand { font-family: var(--f-hand); font-weight: 600; color: var(--indigo); line-height: 1.15; }
html[lang="en"] .hand { font-size: 1.35em; font-weight: 700; }

/* the selection-box highlight (Remy's signature move, in KISO indigo) */
.sel {
  position: relative; display: inline-block; color: var(--indigo);
  padding: 0 0.12em; margin: 0 0.04em;
  outline: 1.5px dashed rgba(67, 56, 202, 0.75); outline-offset: 2px;
  background: var(--indigo-glow);
}
.sel::before, .sel::after, .sel > i::before, .sel > i::after {
  content: ""; position: absolute; width: 8px; height: 8px; background: var(--sheet);
  border: 1.5px solid var(--indigo); border-radius: 1px;
}
.sel::before { left: -7px; top: -7px; }
.sel::after { right: -7px; top: -7px; }
.sel > i::before { left: -7px; bottom: -7px; }
.sel > i::after { right: -7px; bottom: -7px; }
.sel > i { font-style: normal; }

mark, .mk { background: linear-gradient(transparent 52%, rgba(99, 102, 241, 0.22) 52%); color: inherit; padding: 0 0.1em; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wide) + 40px); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.col { width: 100%; max-width: calc(var(--col) + 40px); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.section { padding-block: clamp(96px, 12.5vw, 180px); } /* aiwithremy.com uses 200px above and 80 to 230px below each section */
.section-head { display: grid; gap: 14px; text-align: center; justify-items: center; margin-bottom: clamp(44px, 6vw, 80px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font-family: var(--f-body); font-weight: 600; font-size: 15px; line-height: 1;
  border-radius: 999px; padding: 6px 6px 6px 20px; min-height: 44px; border: 0;
  background: var(--indigo); color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 6px 18px -6px rgba(67, 56, 202, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { background: #3B31B8; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.2); }
.btn .key {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--f-mono); font-size: 14px;
}
.btn--sm { font-size: 13px; min-height: 36px; padding: 4px 4px 4px 14px; }
.btn--sm .key { width: 26px; height: 26px; font-size: 12px; }
.btn--plain { padding: 0 22px; }
/* LINE buttons: LINE brand green with dark ink (white on #06C755 fails contrast) */
.btn--line { background: var(--line-green); color: #0A2614; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14), 0 8px 20px -8px rgba(6, 199, 85, 0.6); }
.btn--line:hover { background: #05B34C; }
.btn--line .key { background: rgba(10, 38, 20, 0.1); border-color: rgba(10, 38, 20, 0.2); }
.btn--line .line-dot { background: #fff; width: 24px; height: 24px; border-radius: 7px; }
.btn--line .line-dot path { fill: var(--line-green); }
.btn--line .line-dot svg { width: 16px; height: 16px; }
.btn--lg { font-size: 16px; min-height: 56px; padding: 8px 8px 8px 16px; gap: 12px; }
.btn--lg .key { width: 40px; height: 40px; }
@media (max-width: 420px) { .btn--lg { font-size: 15px; width: 100%; justify-content: space-between; } }
.btn--ghost {
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule-strong);
  box-shadow: inset -2px -2px 0 var(--raise); padding: 0 18px;
}
.btn--ghost:hover { background: var(--bg-subtle); }
.line-dot { width: 18px; height: 18px; border-radius: 6px; background: var(--line-green); display: inline-grid; place-items: center; flex: none; }
.line-dot svg { width: 12px; height: 12px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(244, 241, 235, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s;
}
.nav.is-scrolled { border-bottom-color: var(--rule); box-shadow: 0 6px 22px -12px rgba(17, 24, 39, 0.18); }
.nav__in { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand svg { width: 26px; height: 26px; }
.brand b { font-family: var(--f-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.brand small { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; padding-left: 10px; border-left: 1px solid var(--rule-strong); }
.nav__links { display: flex; gap: 4px; margin-inline: auto; }
.nav__links a {
  text-decoration: none; color: var(--ink-2); font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: 8px; transition: background 0.15s, color 0.15s;
}
.nav__links a:hover { background: var(--indigo-dim); color: var(--indigo); }
.nav__links a[aria-current="page"] { color: var(--indigo); }
.nav__end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav__links + .nav__end { margin-left: 0; }
.lang {
  display: inline-flex; padding: 3px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
}
.lang button {
  border: 0; background: transparent; color: var(--muted); padding: 5px 9px; border-radius: 999px; cursor: pointer;
  font: inherit; letter-spacing: 0.06em; min-width: 34px;
}
.lang button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12); }
.menu-btn {
  display: none; border: 1px solid var(--rule-strong); background: var(--sheet); width: 40px; height: 40px;
  border-radius: 10px; cursor: pointer; place-items: center; color: var(--ink);
}
.menu-btn svg { width: 18px; height: 18px; }
.mmenu {
  position: absolute; left: var(--gutter-l); right: var(--gutter-r); top: 70px;
  background: rgba(252, 250, 245, 0.97); backdrop-filter: blur(16px); border: 1px solid var(--rule);
  border-radius: 14px; box-shadow: var(--shadow-lift); padding: 8px; display: grid;
}
.mmenu a { text-decoration: none; padding: 14px 14px; border-radius: 10px; font-weight: 500; color: var(--ink); }
.mmenu a:hover { background: var(--indigo-dim); color: var(--indigo); }
@media (max-width: 880px) {
  .nav__links { display: none; }
  .menu-btn { display: inline-grid; }
  .nav__end { margin-left: auto; }
  .brand small { display: none; }
}
@media (max-width: 420px) {
  .nav__end .btn .txt-long { display: none; }
  .nav__end { gap: 6px; }
  .brand b { font-size: 16px; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding-top: clamp(56px, 9vw, 104px); text-align: center; isolation: isolate; overflow-x: clip; }
.hero__kanji {
  position: absolute; z-index: -1; left: 50%; top: 10px; transform: translateX(-50%);
  font-family: var(--f-kanji); font-size: clamp(220px, 34vw, 460px); line-height: 1; color: var(--indigo);
  opacity: 0.045; white-space: nowrap; pointer-events: none; user-select: none;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule); background: var(--sheet);
  border-radius: 999px; padding: 6px 14px 6px 8px; font-size: 13px; color: var(--ink-2); font-weight: 500;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
}
.chip .kmark { width: 20px; height: 20px; }
.hero h1 { margin-top: 26px; }
.hero .lead { margin-top: 22px; }
.hero__cta { margin-top: 34px; display: grid; justify-items: center; gap: 18px; position: relative; }

/* the pill that stands in for Remy's email field */
.pillcta {
  display: flex; align-items: center; gap: 12px; width: min(100%, 560px);
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 7px 7px 7px 18px; text-decoration: none; color: var(--muted);
  box-shadow: var(--shadow-soft); transition: box-shadow 0.2s, transform 0.2s;
}
.pillcta:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.pillcta__field { flex: 1; min-width: 0; text-align: left; display: flex; align-items: center; gap: 10px; font-size: 15px; overflow: hidden; }
.pillcta__field span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pillcta__field b { font-family: var(--f-mono); color: var(--ink); font-weight: 500; font-size: 14px; }
.pillcta .btn { pointer-events: none; }
@media (max-width: 520px) {
  .pillcta { flex-direction: column; border-radius: 22px; padding: 14px; gap: 12px; }
  .pillcta__field { justify-content: center; }
  .pillcta .btn { width: 100%; justify-content: space-between; }
}
.proof { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.45); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.45); } 80%, 100% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); } }
.note {
  position: absolute; font-size: 24px; transform: rotate(-6deg); white-space: nowrap; pointer-events: none;
}
.note svg { width: 54px; height: 34px; color: var(--indigo); }




/* ---------- desktop window frame ---------- */
.window {
  margin-top: clamp(48px, 7vw, 80px); background: var(--sheet); border: 1px solid var(--rule-strong);
  border-radius: 12px; box-shadow: var(--shadow-lift); overflow: hidden; text-align: left; position: relative;
}
.window__bar {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; background: var(--bg-subtle);
  border-bottom: 1px solid var(--rule);
}
.window__bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; flex: none; }
.window__bar i:nth-child(2) { background: #FEBC2E; }
.window__bar i:nth-child(3) { background: #28C840; }
.window__title { margin-left: 10px; font-family: var(--f-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.window__body { position: relative; padding: clamp(20px, 4vw, 40px) clamp(14px, 4vw, 40px); background: var(--bg-subtle); }

/* lesson sheet inside the hero window */
.sheet {
  max-width: 560px; margin-inline: auto; background: var(--ruled); border: 1px solid var(--ruled-edge);
  border-radius: 3px; padding: 28px clamp(18px, 4vw, 34px) 30px;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(17, 24, 39, 0.06) 31px 32px);
  box-shadow: 0 12px 32px -14px rgba(17, 24, 39, 0.25); font-family: var(--f-mono); font-size: 13px; line-height: 2.45; color: #2A2A2A;
}
html[lang="ja"] .sheet { font-family: var(--f-mono), "Noto Sans JP", sans-serif; font-size: 12.5px; }
.sheet__day { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.sheet h3 { font-family: var(--f-display); font-size: 19px; margin: 4px 0 10px; line-height: 1.5; }
.bubble {
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 12px 12px 12px 4px;
  padding: 10px 14px; line-height: 1.8; margin: 10px 0 14px; box-shadow: 0 2px 0 var(--raise);
}
.bubble--ai { border-radius: 12px 12px 4px 12px; background: var(--ice); border-color: rgba(67, 56, 202, 0.2); }
.bubble small { display: block; font-size: 10px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.bubble ul { margin: 4px 0 0; padding-left: 1.2em; }
.sheet .hl { background: rgba(67, 56, 202, 0.12); padding: 1px 3px; border-radius: 2px; }
.sheet__sign { font-family: var(--f-hand); font-size: 30px; color: var(--indigo); line-height: 1; margin-top: 6px; }
.vidbubble {
  position: absolute; left: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px); width: clamp(170px, 26vw, 230px); aspect-ratio: 4 / 3;
  border-radius: 18px; background: linear-gradient(150deg, #1E1B4B, #312E81 60%, #4338CA); color: #fff; overflow: hidden;
  display: grid; place-items: center; box-shadow: 0 18px 40px -16px rgba(30, 27, 75, 0.7); border: 3px solid var(--sheet);
}
.vidbubble__k { position: absolute; font-family: var(--f-kanji); font-size: 120px; opacity: 0.12; line-height: 1; }
.vidbubble__in { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 10px; }
.play { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.4); display: grid; place-items: center; }
.play svg { width: 16px; height: 16px; margin-left: 2px; }
.vidbubble .label { color: #C7D2FE; font-size: 10px; }
.vidbubble strong { font-size: 13px; font-weight: 600; }

/* ---------- tools marquee ---------- */
.tools-strip { padding-block: clamp(64px, 8vw, 104px) 0; text-align: center; }
.marquee { overflow: hidden; margin-top: 18px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; width: max-content; animation: scrollx 60s linear infinite; }
.marquee__set { display: flex; gap: 14px; padding-right: 14px; flex: none; } /* two identical sets, each wider than the screen: -50% lands exactly on the start of the second */
.marquee:hover .marquee__track { animation-play-state: paused; }
.logo-tile { width: 52px; height: 52px; border-radius: 12px; background: var(--sheet); border: 1px solid var(--rule); display: grid; place-items: center; flex: none; box-shadow: 0 2px 0 var(--raise); }
.logo-tile img { width: 26px; height: 26px; object-fit: contain; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.tools__note { margin-top: 16px; font-size: 11px; color: var(--faint); font-family: var(--f-mono); letter-spacing: 0.02em; }

/* ---------- numbers ---------- */
.bars { display: grid; gap: 10px; max-width: 640px; margin-inline: auto; }
.bar { display: grid; grid-template-columns: 4.6em 6.5em 1fr 3em; align-items: center; gap: 12px; font-size: 14px; }
html[data-lang="en"] .bar { grid-template-columns: 3.6em 7.5em 1fr 3em; }
.bar__rank { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.bar__name { font-weight: 500; white-space: nowrap; }
.bar__track { height: 14px; background: var(--card); border-radius: 3px; position: relative; overflow: hidden; }
.bar__fill { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--lavender); border-radius: 3px; transform-origin: left; }
.bar__track::after { content: ""; position: absolute; left: 20%; top: 0; bottom: 0; border-left: 1.5px dotted var(--ink-2); opacity: 0.55; }
.bar__val { font-family: var(--f-mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.bar.is-jp .bar__fill { background: var(--indigo); }
.bar.is-jp .bar__name, .bar.is-jp .bar__val { color: var(--indigo); font-weight: 700; }
.bar.is-jp { position: relative; }
.bar.is-jp::before { content: ""; position: absolute; inset: -6px -10px; border: 1.5px dashed rgba(67, 56, 202, 0.55); border-radius: 6px; pointer-events: none; }
.bars.pending .bar__fill { transform: scaleX(0); }
.bars.is-playing .bar__fill { animation: grow 0.9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bars__axis { font-family: var(--f-mono); font-size: 11px; color: var(--faint); text-align: center; margin-top: 18px; }
.source { font-family: var(--f-mono); font-size: 11px; line-height: 1.8; color: var(--muted); max-width: 640px; margin: 22px auto 0; text-align: center; }
.keyline { margin-top: 40px; text-align: center; font-family: var(--f-display); font-weight: 700; font-size: clamp(18px, 2.2vw, 22px); }
@media (max-width: 520px) {
  .bar, html[data-lang="en"] .bar { grid-template-columns: 3.2em 5.6em 1fr 2.6em; gap: 8px; font-size: 13px; }
}

/* ---------- comparison: two overlapping, tilted cards (measured from aiwithremy.com at 1440px) ---------- */
#compare { padding-top: clamp(96px, 14vw, 200px); padding-bottom: 80px; }
#compare .section-head { margin-bottom: 72px; }
.stack { display: grid; grid-template-columns: 398px 448px; justify-content: center; align-items: start; max-width: 790px; margin-inline: auto; }
.card-slop {
  margin-top: 38px; background: var(--card); border: 1px solid rgba(17, 24, 39, 0.07); border-radius: 16px; padding: 32px 26px;
  transform: rotate(-3deg); color: var(--faint);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 18px 32px -20px rgba(0, 0, 0, 0.1);
}
.card-slop h3 { color: var(--faint); font-size: 22px; }
.card-slop .ticks { margin-top: 22px; gap: 14px; }
.card-slop li { font-size: 14px; text-decoration: line-through; text-decoration-color: rgba(17, 24, 39, 0.25); }
.card-kiso {
  position: relative; z-index: 1; margin: 16px 0 0 -61px; background: var(--sheet); border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 18px; padding: 38px 36px; transform: rotate(1.5deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04), 0 30px 60px -28px rgba(0, 0, 0, 0.12);
}
.card-kiso h3 { font-size: 24px; }
.card-kiso .ticks { margin-top: 24px; gap: 18px; }
.card-kiso li { font-size: 15px; color: #2A2A2A; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; line-height: 1.55; }
.ico { width: 22px; height: 22px; border-radius: 6px; background: var(--indigo-dim); color: var(--indigo); display: grid; place-items: center; }
.ico svg { width: 13px; height: 13px; }
.ico--ai { background: var(--claude-dim); color: var(--claude); }
.card-slop .ticks .ico { background: rgba(17, 24, 39, 0.06); color: var(--faint); font-size: 12px; }
/* image-resize selection frame: thin line, 8 square handles, sits 10px outside the card */
.sel-frame { position: absolute; inset: -10px; border: 1.5px solid var(--indigo); border-radius: 2px; pointer-events: none; }
.sel-frame i { position: absolute; width: 9px; height: 9px; background: var(--sheet); border: 1.5px solid var(--indigo); border-radius: 2px; }
.sel-frame i:nth-child(1) { left: -5px; top: -5px; }
.sel-frame i:nth-child(2) { left: calc(50% - 4.5px); top: -5px; }
.sel-frame i:nth-child(3) { right: -5px; top: -5px; }
.sel-frame i:nth-child(4) { right: -5px; top: calc(50% - 4.5px); }
.sel-frame i:nth-child(5) { right: -5px; bottom: -5px; }
.sel-frame i:nth-child(6) { left: calc(50% - 4.5px); bottom: -5px; }
.sel-frame i:nth-child(7) { left: -5px; bottom: -5px; }
.sel-frame i:nth-child(8) { left: -5px; top: calc(50% - 4.5px); }
.sel-cursor { position: absolute; right: -24px; bottom: -30px; width: 24px; height: 28px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); pointer-events: none; }
.stack__note { position: absolute; right: 18px; top: -44px; font-size: 26px; transform: rotate(4deg); }
html[lang="ja"] .stack__note { font-size: 22px; }
@media (max-width: 880px) {
  .stack { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .card-slop { margin-top: 0; padding-bottom: 96px; transform: rotate(-2.2deg); }
  .card-kiso { margin: -72px 12px 0 12px; }
  .sel-cursor { right: -8px; }
}
@media (max-width: 480px) { .card-kiso { padding: 30px 24px; } .card-kiso h3 { font-size: 21px; } .stack__note { top: -40px; right: 6px; } }

/* ---------- three daily cards ---------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; max-width: 860px; margin-inline: auto; text-align: center; }
.trio > div { display: grid; justify-items: center; gap: 14px; align-content: start; }
.trio h3 { font-size: 18px; }
.trio .ico { width: 40px; height: 40px; border-radius: 11px; }
.trio .ico svg { width: 20px; height: 20px; }
.trio p { color: var(--muted); font-size: 15px; }
html[lang="ja"] .trio p { font-size: 14px; }
.oncall .ico { position: relative; background: rgba(6, 199, 85, 0.12); color: #04893B; }
.oncall__dot { position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--line-green); border: 2px solid var(--bg); }
.oncall__badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: #04893B; background: rgba(6, 199, 85, 0.1); border: 1px solid rgba(6, 199, 85, 0.25); padding: 3px 10px 3px 8px; border-radius: 999px; margin-top: -4px; }
.oncall .pulse { background: var(--line-green); }
.tag { display: inline-block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--claude-dim); color: #A4472A; vertical-align: 2px; }
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- the letter ---------- */
.letterbox { position: relative; max-width: 660px; margin-inline: auto; }
.paper {
  position: relative; background: var(--ruled); border: 1px solid var(--ruled-edge); border-radius: 2px;
  padding: clamp(40px, 7vw, 64px) clamp(22px, 6vw, 60px) 48px;
  background-image:
    radial-gradient(circle at 18% 8%, rgba(160, 130, 70, 0.05), transparent 30%),
    radial-gradient(circle at 82% 92%, rgba(160, 130, 70, 0.06), transparent 34%),
    repeating-linear-gradient(transparent 0 33px, rgba(17, 24, 39, 0.065) 33px 34px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 0 rgba(17, 24, 39, 0.04), 0 12px 32px -8px rgba(17, 24, 39, 0.18), 0 24px 60px -20px rgba(17, 24, 39, 0.12);
  transform: rotate(-0.6deg); font-family: var(--f-mono); font-size: 14px; line-height: 34px; color: #2A2A2A;
}
html[lang="ja"] .paper { font-family: var(--f-mono), "Noto Sans JP", sans-serif; font-size: 14px; }
.paper::before { /* perforated pad edge */
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px;
  background: radial-gradient(circle at 5px 6px, var(--ruled) 3px, transparent 3.5px) 0 0 / 10px 6px repeat-x;
}
.paper p + p { margin-top: 17px; }
.paper .hl { background: rgba(67, 56, 202, 0.12); padding: 0 3px; }
.letter__meta { display: grid; gap: 0; font-size: 11.5px; color: rgba(42, 42, 42, 0.8); margin-bottom: 20px; }
.letter__meta b { font-weight: 700; letter-spacing: 0.1em; color: rgba(42, 42, 42, 0.55); margin-right: 10px; text-transform: uppercase; }
.stamp {
  position: absolute; right: clamp(14px, 4vw, 34px); top: -24px; width: 98px; height: 112px; transform: rotate(6deg);
  background: var(--sheet); border: 2px dashed rgba(17, 24, 39, 0.25); border-radius: 3px;
  display: grid; justify-items: center; align-content: center; gap: 2px; text-align: center; box-shadow: 0 6px 16px -8px rgba(17, 24, 39, 0.3);
  font-family: var(--f-mono); line-height: 1.3;
}
.stamp small { font-size: 8px; letter-spacing: 0.12em; color: var(--muted); }
.stamp span { font-family: var(--f-kanji); font-size: 40px; color: var(--indigo); line-height: 1.1; }
.signature { font-family: var(--f-hand); font-size: 40px; color: var(--indigo); line-height: 1; margin-top: 18px; transform: rotate(-4deg); display: inline-block; }
.margin-note { position: absolute; font-size: 22px; width: 160px; text-align: center; }
html[lang="ja"] .margin-note.sticky { font-size: 18px; line-height: 1.5; }
.margin-note--a { left: -170px; top: 41%; transform: rotate(-7deg); }
.margin-note--b { right: -170px; top: 70%; transform: rotate(5deg); }
.sticky {
  background: var(--ice); border: 1px solid rgba(67, 56, 202, 0.18); padding: 12px 10px 14px; border-radius: 2px;
  box-shadow: 0 10px 24px -14px rgba(30, 27, 75, 0.45);
}
@media (max-width: 1040px) { .margin-note { display: none; } }
.letter__src { font-family: var(--f-mono); font-size: 11px; color: var(--muted); text-align: center; margin-top: 26px; line-height: 1.8; }

/* ---------- closing ---------- */
.closing { text-align: center; }
.closing .hero__cta { margin-top: 30px; }
.closing__note { font-size: 28px; transform: rotate(-4deg); display: inline-block; margin-top: 4px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--rule); margin-top: clamp(40px, 6vw, 80px); padding-block: 56px 28px; background: rgba(240, 236, 229, 0.6); }
.footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 32px; }
.footer h4 { margin: 0 0 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer a { text-decoration: none; color: var(--muted); font-size: 14px; }
.footer a:hover { color: var(--indigo); }
.footer p { color: var(--muted); font-size: 14px; }
.desk { display: flex; justify-content: flex-end; gap: 4px; flex-wrap: nowrap; align-items: flex-start; }
.desk a { display: grid; justify-items: center; gap: 4px; width: 80px; flex: none; text-align: center; text-decoration: none; }
.desk .macfolder { width: 64px; height: 52px; padding: 4px; box-sizing: content-box; border-radius: 6px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.18)); transition: transform 0.15s; }
.desk__label { font: 500 12px -apple-system, "SF Pro Text", var(--f-body); color: var(--ink); padding: 1px 6px; border-radius: 4px; line-height: 1.4; }
.desk a:hover .macfolder, .desk a:focus-visible .macfolder { background: rgba(17, 24, 39, 0.08); }
.desk a:hover .desk__label, .desk a:focus-visible .desk__label { background: #0A64D8; color: #fff; }
.desk a:active .macfolder { transform: scale(0.96); }
.desk a:focus-visible { outline: none; }
.empty__in .macfolder { width: 84px; height: 68px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15)); }
.footer__base { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; color: var(--faint); }
.footer__base nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__base a { font-size: 11px; color: var(--faint); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .desk { justify-content: flex-start; grid-column: 1 / -1; } }
@media (max-width: 460px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- scroll reveal (from a visible resting state) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { transition: transform 0.5s cubic-bezier(.2, .7, .2, 1), opacity 0.5s; }
  .js .reveal.below { transform: translateY(18px); opacity: 0.4; }
  .hero > * { animation: rise 0.5s cubic-bezier(.2, .7, .2, 1) both; }
  .hero > *:nth-child(2) { animation-delay: 60ms; } .hero > *:nth-child(3) { animation-delay: 120ms; }
  .hero > *:nth-child(4) { animation-delay: 180ms; } .hero > *:nth-child(5) { animation-delay: 240ms; }
  .hero > *:nth-child(6) { animation-delay: 300ms; }
}
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee__track { animation: none; }
}

/* =========================================================
   MEDIA PAGE
   ========================================================= */
.page-head { text-align: center; padding-top: clamp(56px, 8vw, 96px); display: grid; gap: 14px; justify-items: center; }
.finder { margin-top: 44px; display: grid; grid-template-rows: auto 1fr; min-height: 560px; }
.finder .window__bar { gap: 8px; }
.finder__nav { display: flex; gap: 2px; margin-left: 14px; color: var(--faint); font-family: var(--f-mono); font-size: 14px; }
.finder__name { font-weight: 600; font-size: 13px; color: var(--ink); margin-left: 8px; }
.finder__search { margin-left: auto; display: flex; align-items: center; gap: 6px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 7px; padding: 0 8px; height: 26px; }
.finder__search svg { width: 12px; height: 12px; color: var(--faint); flex: none; }
.finder__search input { border: 0; background: transparent; font: 12px var(--f-body); width: 130px; color: var(--ink); outline: none; }
.finder__main { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.finder__side { background: var(--bg-subtle); border-right: 1px solid var(--rule); padding: 16px 10px; display: grid; align-content: start; gap: 2px; }
.finder__side .label { font-size: 10px; padding: 10px 10px 6px; }
.finder__side button, .finder__side a {
  display: flex; align-items: center; gap: 9px; border: 0; background: transparent; text-align: left; width: 100%;
  padding: 7px 10px; border-radius: 7px; font: 500 13px var(--f-body); color: var(--ink-2); cursor: pointer; text-decoration: none;
}
.finder__side button svg, .finder__side a svg { width: 15px; height: 15px; color: var(--indigo); flex: none; }
.finder__side button[aria-selected="true"] { background: var(--indigo-dim); color: var(--indigo); }
.finder__side button:hover, .finder__side a:hover { background: rgba(17, 24, 39, 0.05); }
.finder__pane { padding: 22px; position: relative; display: grid; grid-template-rows: 1fr auto; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 22px 18px; align-content: start; }
.vtile { text-decoration: none; color: var(--ink); display: grid; gap: 8px; border-radius: 8px; padding: 6px; }
.vtile:hover { background: var(--indigo-dim); }
.vtile__thumb { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--card); border: 1px solid var(--rule); position: relative; }
.vtile__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vtile__dur { position: absolute; right: 6px; bottom: 6px; font-family: var(--f-mono); font-size: 10px; background: rgba(17, 24, 39, 0.8); color: #fff; padding: 1px 5px; border-radius: 3px; }
.vtile__t { font-size: 12.5px; line-height: 1.45; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vtile--ghost .vtile__thumb { background: repeating-linear-gradient(135deg, var(--card) 0 10px, var(--bg-subtle) 10px 20px); }
.vtile--ghost .vtile__t { height: 9px; width: 70%; margin-inline: auto; background: var(--card); border-radius: 4px; }
.empty {
  position: absolute; inset: 22px 22px 48px; display: grid; place-items: center; text-align: center;
  background: linear-gradient(rgba(252, 250, 245, 0.55), rgba(252, 250, 245, 0.92) 40%);
}
.empty__in { display: grid; justify-items: center; gap: 12px; max-width: 380px; padding: 20px; }
.empty__in svg { width: 70px; height: 60px; }
.empty__in p { color: var(--muted); font-size: 14px; }
.empty__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.finder__status { border-top: 1px solid var(--rule); margin: 18px -22px -22px; padding: 8px 22px; font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); text-align: center; background: var(--bg-subtle); }
@media (max-width: 720px) {
  .finder__main { grid-template-columns: 1fr; }
  .finder__side { border-right: 0; border-bottom: 1px solid var(--rule); display: flex; overflow-x: auto; padding: 8px; gap: 4px; }
  .finder__side .label { display: none; }
  .finder__side button, .finder__side a { width: auto; white-space: nowrap; }
  .finder__search { display: none; }
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
}

/* =========================================================
   PROGRAM PAGE (theaicourse-style long sales page)
   ========================================================= */
.prog .hero h1 { max-width: 15em; margin-inline: auto; }
html[lang="ja"] .prog .hero h1 { max-width: 13em; }
.eyebrow-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.eyebrow-row > span + span::before { content: "·"; margin-right: 14px; color: var(--faint); }
.vsl { max-width: 880px; margin-inline: auto; }
.vsl .window__body { padding: 0; aspect-ratio: 16 / 9; background: linear-gradient(160deg, #1E1B4B, #312E81 55%, #4338CA); display: grid; place-items: center; color: #fff; overflow: hidden; }
.vsl__k { position: absolute; font-family: var(--f-kanji); font-size: clamp(160px, 30vw, 300px); opacity: 0.1; line-height: 1; }
.vsl__in { position: relative; display: grid; justify-items: center; gap: 12px; text-align: center; padding: 20px; }
.vsl .play { width: 68px; height: 68px; }
.vsl .play svg { width: 24px; height: 24px; }
.vsl__bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: linear-gradient(transparent, rgba(10, 8, 40, 0.55)); color: rgba(255, 255, 255, 0.9);
  font-family: var(--f-mono); font-size: 11px;
}
.vsl__bar svg { width: 16px; height: 16px; flex: none; }
.vsl__track { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); position: relative; }
.vsl__track span { position: absolute; left: 0; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.vsl__time { font-variant-numeric: tabular-nums; }
.hero .vsl { margin-top: clamp(48px, 7vw, 80px); }
@media (max-width: 520px) { .vsl__bar { gap: 8px; padding: 8px 10px; } .vsl__bar svg:nth-last-child(2) { display: none; } }
.vsl strong { font-family: var(--f-display); font-size: clamp(18px, 2.4vw, 24px); }
.vsl .label { color: var(--lavender); }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 13px; color: var(--muted); }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 14px; height: 14px; color: var(--green); }

.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.role { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 26px; display: grid; gap: 16px; align-content: start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.role h3 { font-size: 18px; }
.role .label { font-size: 10px; margin-bottom: 6px; }
.role ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.role li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; line-height: 1.55; }
.role li::before { content: "+"; font-family: var(--f-mono); color: var(--indigo); }
.role .drain li::before { content: "−"; color: var(--faint); }
.role .drain { color: var(--muted); }
.role hr { border: 0; border-top: 1px dashed var(--rule-strong); margin: 0; width: 100%; }
@media (max-width: 860px) { .roles { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.split + .split { margin-top: clamp(64px, 9vw, 112px); padding-top: clamp(64px, 9vw, 112px); border-top: 1px solid var(--rule); }
.split--flip .split__art { order: 2; }
.split__copy { display: grid; gap: 14px; }
.split__copy p { color: var(--muted); }
.split__copy ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; }
.split__copy li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.split__copy li::before { content: "✓"; font-family: var(--f-mono); color: var(--indigo); }
.split__art { position: relative; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split--flip .split__art { order: 0; } }
.mini { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 10px; box-shadow: var(--shadow-lift); overflow: hidden; font-size: 13px; }
.mini__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: var(--bg-subtle); border-bottom: 1px solid var(--rule); }
.mini table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mini th, .mini td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--rule); font-weight: 400; }
.mini th { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; width: 38%; }
.mini td.blank { font-family: var(--f-mono); color: var(--faint); letter-spacing: 0.15em; }
.mini tr:last-child th, .mini tr:last-child td { border-bottom: 0; }
.platforms { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.platforms span { font-family: var(--f-mono); font-size: 11px; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 3px 10px; background: var(--bg-subtle); }
.art-note { position: absolute; width: 190px; font-size: 21px; transform: rotate(-4deg); }
.art-note .label { font-family: var(--f-hand); text-transform: none; letter-spacing: 0; font-size: 22px; color: var(--claude); display: block; }
.art-note--br { right: -26px; bottom: -96px; }
.art-note--bl { left: -26px; bottom: -110px; transform: rotate(3deg); }
html[lang="ja"] .art-note { font-size: 17px; line-height: 1.5; }
@media (max-width: 820px) { .art-note { position: relative; inset: auto; margin: 16px 0 0 auto; display: block; } .art-note--bl { margin: 16px auto 0 0; } }

.tceo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: center; }
.prompt-card { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 8px; box-shadow: var(--shadow-soft); font-size: 13.5px; }
.seg { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: 6px; line-height: 1.65; }
.seg + .seg { margin-top: 4px; }
.seg b { font-family: var(--f-mono); font-size: 18px; color: var(--indigo); line-height: 1.3; }
.seg small { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.seg:nth-child(1) { background: rgba(67, 56, 202, 0.07); }
.seg:nth-child(2) { background: rgba(67, 56, 202, 0.045); }
.seg:nth-child(3) { background: rgba(67, 56, 202, 0.03); }
.seg:nth-child(4) { background: rgba(67, 56, 202, 0.015); }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.pillars div { display: grid; gap: 4px; }
.pillars b { font-family: var(--f-display); font-size: 16px; }
.pillars p { font-size: 14px; color: var(--muted); }
@media (max-width: 820px) { .tceo { grid-template-columns: 1fr; } }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--sheet); overflow: hidden; }
.stats div { padding: 26px 18px; text-align: center; display: grid; gap: 4px; }
.stats div + div { border-left: 1px solid var(--rule); }
.stats b { font-family: var(--f-display); font-size: clamp(32px, 4.4vw, 46px); letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats span { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } .stats div + div { border-left: 0; border-top: 1px solid var(--rule); } }
.stats-note { text-align: center; margin-top: 22px; font-size: 22px; transform: rotate(-2deg); }

.curr { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 2px; }
.steps::before { content: ""; position: absolute; left: 13px; top: 16px; bottom: 16px; width: 2px; background: var(--rule); }
.steps button {
  position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 9px 10px 9px 0; border-radius: 8px; cursor: pointer; font: 500 14px var(--f-body); color: var(--muted); line-height: 1.4;
}
.steps button .dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--rule-strong); background: var(--bg); display: grid; place-items: center; font-family: var(--f-mono); font-size: 10px; color: var(--muted); }
.steps button small { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--faint); }
.steps button:hover { color: var(--ink); }
.steps button[aria-selected="true"] { color: var(--indigo); }
.steps button[aria-selected="true"] .dot { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.steps button.done .dot { border-color: var(--indigo); color: var(--indigo); }
.panel { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 10px; padding: clamp(22px, 4vw, 34px); box-shadow: var(--shadow-lift); position: relative; min-width: 0; }
.panel .label { color: var(--indigo); }
.panel h3 { font-size: clamp(20px, 2.4vw, 26px); margin: 8px 0 10px; }
.panel > p { color: var(--muted); }
.days { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.days li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.5; }
.days li span:first-child { font-family: var(--f-mono); font-size: 11px; color: var(--muted); padding-top: 2px; }
.days li.proof > span:last-child::after { content: "PROOF"; margin-left: 8px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.1em; padding: 1px 6px; border-radius: 999px; background: var(--indigo-dim); color: var(--indigo); vertical-align: 1px; }
.panel__flag { position: absolute; right: 18px; top: -12px; background: var(--claude); color: #fff; font-family: var(--f-mono); font-size: 10px; padding: 4px 8px; letter-spacing: 0.08em; border-radius: 3px; transform: rotate(3deg); }
@media (max-width: 820px) {
  .curr { grid-template-columns: 1fr; }
  .steps { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .steps::before { display: none; }
  .steps button { grid-template-columns: 24px auto; white-space: nowrap; border: 1px solid var(--rule); padding: 7px 12px 7px 7px; border-radius: 999px; background: var(--sheet); }
  .steps button .dot { width: 24px; height: 24px; }
  .steps button small { display: none; }
}

.memo { max-width: 640px; margin-inline: auto; display: grid; grid-template-columns: 96px 1fr; gap: 26px; align-items: start; }
.avatar { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(150deg, #312E81, #4338CA); display: grid; place-items: center; color: #fff; font-family: var(--f-kanji); font-size: 44px; box-shadow: var(--shadow-soft); border: 3px solid var(--sheet); }
.memo__body { display: grid; gap: 14px; }
.memo__body p { color: var(--ink-2); }
@media (max-width: 560px) { .memo { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

.incl { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--sheet); overflow: hidden; }
.incl li { display: grid; grid-template-columns: 40px 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 22px; }
.incl li + li { border-top: 1px solid var(--rule); }
.incl .n { font-family: var(--f-mono); font-size: 12px; color: var(--faint); padding-top: 6px; }
.incl .ico { width: 34px; height: 34px; border-radius: 9px; }
.incl .ico svg { width: 17px; height: 17px; }
.incl b { display: block; font-family: var(--f-display); font-size: 15.5px; }
.incl p { font-size: 14px; color: var(--muted); margin-top: 2px; }
@media (max-width: 520px) { .incl li { grid-template-columns: 34px minmax(0, 1fr); padding: 16px; } .incl .n { display: none; } }

.promise { max-width: 680px; margin-inline: auto; position: relative; background: var(--ruled); border: 1px solid var(--ruled-edge); padding: clamp(36px, 6vw, 56px) clamp(22px, 6vw, 56px); text-align: center; box-shadow: var(--shadow-lift); }
.promise::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--ruled-edge); pointer-events: none; }
.promise__lines { display: grid; gap: 6px; margin-top: 22px; font-family: var(--f-display); font-weight: 700; font-size: clamp(18px, 2.3vw, 22px); line-height: 1.6; }
.promise .stamp { top: auto; bottom: -58px; right: -26px; transform: rotate(-8deg); }
@media (max-width: 760px) { .promise .stamp { position: relative; right: auto; bottom: auto; margin: 22px auto -8px; } }
.promise .stamp span { font-size: 34px; }

.price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.price__l, .price__r { padding: clamp(28px, 5vw, 56px) clamp(0px, 3vw, 40px); display: grid; gap: 16px; align-content: start; }
.price__l { padding-left: 0; }
.price__r { border-left: 1px solid var(--rule); padding-right: 0; }
.price__l h2 { font-size: clamp(32px, 4.6vw, 48px); line-height: 1.15; }
.price__l > p { color: var(--muted); }
.price__inc { display: grid; gap: 14px; margin-top: 10px; }
.price__inc div { display: grid; gap: 2px; font-size: 14px; }
.price__inc b { font-weight: 600; }
.price__inc span { color: var(--muted); }
.amount { font-family: var(--f-display); font-weight: 700; font-size: clamp(64px, 9vw, 96px); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.amount sup { font-size: 0.32em; letter-spacing: 0; vertical-align: 1.6em; margin-left: 6px; color: var(--muted); font-weight: 600; }
.price__r .btn { justify-self: start; }
.price__fine { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.price__fine a { color: var(--indigo); }
@media (max-width: 820px) { .price { grid-template-columns: 1fr; } .price__r { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; } .price__l { padding-right: 0; } }

.faq { max-width: 720px; margin-inline: auto; display: grid; gap: 12px; position: relative; }
.faq details { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 6px; transition: box-shadow 0.15s; }
.faq details:hover { box-shadow: 0 2px 0 var(--raise); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 15px 18px; font-weight: 500; font-size: 15px; line-height: 1.55; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "[+]"; font-family: var(--f-mono); font-size: 13px; color: var(--muted); flex: none; }
.faq details[open] summary::after { content: "[−]"; color: var(--indigo); }
.faq details > div { padding: 0 18px 18px; color: var(--muted); font-size: 14.5px; }
.faq__note { position: absolute; right: -150px; top: -10px; font-size: 26px; transform: rotate(6deg); }
@media (max-width: 1060px) { .faq__note { position: static; text-align: right; transform: rotate(-3deg); } }
.prog-nav .nav__links a { font-size: 13.5px; }

/* =========================================================
   CURRICULUM PAGE v2: problems, fix, overview map, method cards,
   timeline, mentor photos
   ========================================================= */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 44px; }
.btn--ghost.btn { padding: 0 20px; min-height: 44px; }

/* problems: six plain, readable cards */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin-inline: auto; }
.pcard { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 24px; display: grid; gap: 8px; align-content: start; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.pcard__ico { width: 40px; height: 40px; border-radius: 11px; background: rgba(220, 38, 38, 0.08); color: #B91C1C; display: grid; place-items: center; margin-bottom: 6px; }
.pcard__ico svg { width: 21px; height: 21px; }
.pcard h3 { font-size: 18px; line-height: 1.45; }
html[lang="ja"] .pcard h3 { font-size: 17px; }
.pcard p { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
@media (max-width: 860px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pgrid { grid-template-columns: 1fr; gap: 12px; } .pcard { grid-template-columns: 40px 1fr; column-gap: 14px; padding: 18px; } .pcard__ico { grid-row: span 2; margin: 0; } }

/* the fix: problem -> answer board */
.fixboard { max-width: 980px; margin-inline: auto; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 14px; box-shadow: var(--shadow-lift); overflow: hidden; }
.fixboard__head, .fix { display: grid; grid-template-columns: minmax(0, 0.85fr) 40px minmax(0, 1.4fr); gap: 12px; align-items: center; }
.fixboard__head { padding: 12px 24px; background: var(--bg-subtle); border-bottom: 1px solid var(--rule); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fixboard__head span:last-child { color: var(--indigo); }
.fixlist { list-style: none; margin: 0; padding: 0; }
.fix { padding: 18px 24px; }
.fix + .fix { border-top: 1px solid var(--rule); }
.fix__was { color: var(--faint); font-size: 14.5px; text-decoration: line-through; text-decoration-color: rgba(17, 24, 39, 0.25); }
.fix__arrow { color: var(--indigo); font-family: var(--f-mono); font-size: 18px; text-align: center; }
.fix__now { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.65; }
.fix__chip { display: inline-block; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--indigo); background: var(--indigo-dim); border-radius: 999px; padding: 2px 9px; margin-right: 10px; vertical-align: 1px; white-space: nowrap; }
@media (max-width: 720px) {
  .fixboard__head { display: none; }
  .fix { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .fix__arrow { display: none; }
  .fix__was::before { content: "× "; text-decoration: none; display: inline-block; margin-right: 2px; }
}

/* overview map */
.map { display: grid; grid-template-columns: 250px minmax(0, 1fr) 260px; align-items: center; max-width: 1000px; margin-inline: auto; padding-block: 120px 96px; }
.map__side .label { margin: 0 0 12px; }
.map__side--l .label { text-align: left; }
.nodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; }
.node { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 10px; box-shadow: 0 2px 0 var(--raise); font-weight: 500; font-size: 15px; position: relative; }
.node img, .node svg { width: 22px; height: 22px; flex: none; }
.node small { font-family: var(--f-mono); font-size: 10px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.map__side--l .nodes::before, .map__side--r .nodes::before { content: ""; position: absolute; top: 26px; bottom: 26px; border-left: 1.5px solid var(--rule-strong); }
.map__side--l .nodes::before { right: -28px; }
.map__side--r .nodes::before { left: -28px; }
.map__side--l .node::after, .map__side--r .node::after { content: ""; position: absolute; top: 50%; width: 28px; border-top: 1.5px solid var(--rule-strong); }
.map__side--l .node::after { right: -29px; }
.map__side--r .node::after { left: -29px; }
.map__core { position: relative; display: grid; justify-items: center; padding-inline: 56px; }
.map__core::before, .map__core::after { content: ""; position: absolute; top: 50%; width: 56px; border-top: 1.5px solid var(--rule-strong); }
.map__core::before { left: 0; } .map__core::after { right: 0; }
.map__dot { position: absolute; top: calc(50% - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--indigo); z-index: 1; }
.map__dot--l { left: 23px; } .map__dot--r { right: 23px; }
.corefolder { width: 100%; max-width: 260px; height: auto; filter: drop-shadow(0 10px 18px rgba(30, 80, 160, 0.25)); }
.map__name { position: absolute; top: calc(100% + 10px); font-family: var(--f-display); font-weight: 700; font-size: 17px; white-space: nowrap; }
.map__eng { position: absolute; top: calc(100% + 46px); display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #04893B; background: rgba(6, 199, 85, 0.1); border: 1px solid rgba(6, 199, 85, 0.25); border-radius: 999px; padding: 3px 12px 3px 9px; white-space: nowrap; }
.map__eng .pulse { background: var(--line-green); }
.mapdocs { position: absolute; bottom: calc(100% - 2px); left: 0; right: 0; display: flex; justify-content: space-between; padding-inline: 40px; pointer-events: none; }
.mapdoc { display: grid; justify-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); position: relative; }
.mapdoc .mdoc { width: 38px; height: 48px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1)); }
.mapdoc::after { content: ""; position: absolute; top: 100%; left: 50%; height: 34px; border-left: 1.5px dashed rgba(67, 56, 202, 0.45); }
.mapdoc--1 { transform: translateY(-28px); } .mapdoc--1::after { height: 62px; }
@media (max-width: 900px) {
  .map { grid-template-columns: 1fr; gap: 28px; padding-block: 0; max-width: 420px; }
  .map__side--l .nodes::before, .map__side--r .nodes::before, .map__side--l .node::after, .map__side--r .node::after,
  .map__core::before, .map__core::after, .map__dot, .mapdoc::after { display: none; }
  .map__core { padding: 0; order: 0; }
  .mapdocs { position: static; padding: 0; margin-bottom: 12px; justify-content: center; gap: 22px; }
  .mapdoc--1 { transform: none; }
  .map__name, .map__eng { position: static; margin-top: 8px; }
  .corefolder { max-width: 200px; }
  .map__side .label { text-align: center !important; }
  .map__side--l { order: -1; }
}

/* method: four illustrated cards */
.mgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1040px; margin-inline: auto; }
.mcard { display: grid; gap: 6px; align-content: start; }
.mcard__art { aspect-ratio: 4 / 3; background: var(--card); border-radius: 12px; margin-bottom: 14px; display: grid; place-items: center; padding: 18px; overflow: hidden; }
.mcard h3 { font-size: 26px; letter-spacing: -0.02em; }
.mcard__sub { font-weight: 600; font-size: 15px; color: var(--ink); }
.mcard p:last-child { color: var(--muted); font-size: 14.5px; }
@media (max-width: 960px) { .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mgrid { grid-template-columns: 1fr; } }
.ill-input { width: 100%; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 8px 8px 8px 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.2); }
.ill-input span { flex: 1; min-width: 0; }
.ill-input b { width: 26px; height: 26px; border-radius: 50%; background: var(--indigo); color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }
.ill-papers { position: relative; width: 70%; height: 82%; }
.ill-paper { position: absolute; inset: 0; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 12px; display: grid; gap: 6px; align-content: start; transform: rotate(3deg); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.25); }
.ill-paper--back { transform: rotate(-7deg) translate(-12px, 4px); }
.ill-paper em { font-style: normal; font-size: 11px; font-weight: 600; margin-bottom: 4px; }
.ill-paper i { height: 3px; border-radius: 2px; background: var(--raise); }
.ill-paper i:nth-child(odd) { width: 78%; }
.ill-docs { width: 72%; }
.ill-ex { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 12px; display: grid; gap: 6px; font-size: 11px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.25); }
.ill-ex em { font-style: normal; font-weight: 600; font-size: 11.5px; }
.ill-ex span { padding: 3px 8px; border-radius: 4px; background: var(--indigo-dim); color: var(--indigo); font-family: var(--f-mono); font-size: 10px; }
.ill-out { width: 76%; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 14px; display: grid; gap: 8px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.25); }
.ill-out span { height: 4px; border-radius: 2px; background: var(--raise); position: relative; margin-left: 12px; }
.ill-out span::before { content: ""; position: absolute; left: -12px; top: -1px; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
.ill-out span:nth-child(2) { width: 70%; }
.ill-out em { font-style: normal; font-family: var(--f-mono); font-size: 9.5px; color: var(--muted); margin-top: 4px; }

/* interactive curriculum timeline (theaicourse layout) */
.tl-wrap { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; max-width: 1080px; margin-inline: auto; }
.tl { list-style: none; margin: 0; padding: 0 0 0 44px; position: relative; border-top: 1px solid var(--rule-strong); }
.tl::before { content: ""; position: absolute; left: 10px; top: 30px; bottom: 30px; border-left: 2px solid var(--rule); }
.tl li { border-bottom: 1px solid var(--rule-strong); }
.tl button { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; padding: 16px 6px 16px 0; cursor: pointer; font: 500 16.5px var(--f-body); color: var(--ink); line-height: 1.4; }
html[lang="ja"] .tl button { font-size: 15.5px; }
.tl__dot { position: absolute; left: -44px; top: calc(50% - 11px); width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rule-strong); background: var(--bg); transition: border-color .15s, background .15s; }
.tl__n { font-family: var(--f-mono); font-size: 12px; color: var(--faint); }
.tl__t small { display: block; font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); letter-spacing: 0.04em; margin-top: 2px; font-weight: 400; }
.tl button:hover .tl__t { color: var(--indigo); }
.tl button[aria-selected="true"] { color: var(--indigo); }
.tl button[aria-selected="true"] .tl__n { color: var(--indigo); }
.tl button[aria-selected="true"] .tl__dot { border-color: var(--indigo); border-width: 2.5px; box-shadow: 0 0 0 4px var(--indigo-dim); }
.tl button.done .tl__dot { border-color: var(--indigo); background: var(--indigo); }
.tl-stage { position: relative; min-width: 0; }
.tl-card { position: relative; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 4px; padding: clamp(26px, 4vw, 44px); box-shadow: 0 1px 0 var(--raise), 0 24px 50px -28px rgba(17, 24, 39, 0.35); }
.tl-card::before, .tl-card::after { content: ""; position: absolute; inset: 0; background: var(--ruled); border: 1px solid var(--ruled-edge); border-radius: 4px; z-index: -1; }
.tl-card::before { transform: rotate(1.4deg) translate(10px, 8px); }
.tl-card::after { transform: rotate(-0.8deg) translate(-4px, 12px); }
.tl-stage { isolation: isolate; }
.tl-card__clip { position: absolute; right: 36px; top: -30px; width: 70px; height: 56px; }
.tl-card__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.tl-card__count { font-family: var(--f-mono); font-size: 13px; color: var(--indigo); }
.tl-card h3 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; line-height: 1.25; margin: 16px 0 12px; }
html[lang="ja"] .tl-card h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: 0; }
.tl-card > p { color: var(--muted); font-size: 15.5px; }
.tl-card__build { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 22px; align-items: center; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--rule-strong); }
.tl-card__k { font-size: 13px; color: var(--muted); }
.tl-card__build b { display: block; font-family: var(--f-display); font-size: 19px; margin: 4px 0 6px; line-height: 1.4; }
.tl-card__build p { color: var(--muted); font-size: 14px; }
.mini-papers { position: relative; height: 120px; background: var(--card); border-radius: 8px; }
.mini-papers div { position: absolute; width: 70px; height: 88px; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 8px; display: grid; gap: 5px; align-content: start; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.3); }
.mini-papers div:first-child { left: 22px; top: 18px; transform: rotate(-6deg); }
.mini-papers div:last-child { left: 70px; top: 12px; transform: rotate(3deg); }
.mini-papers em { font-style: normal; font-size: 9px; font-weight: 600; font-family: var(--f-mono); }
.mini-papers i { height: 2px; background: var(--raise); }
.tl-card__days { margin-top: 20px; }
.tl-card__days summary { cursor: pointer; font-size: 13.5px; color: var(--indigo); font-weight: 500; list-style: none; }
.tl-card__days summary::-webkit-details-marker { display: none; }
.tl-card__days summary::before { content: "+ "; font-family: var(--f-mono); }
.tl-card__days[open] summary::before { content: "− "; }
.tl-card__nav { display: flex; justify-content: space-between; margin-top: 22px; }
.tl-card__nav button { border: 1px solid var(--rule-strong); background: var(--bg); border-radius: 999px; padding: 6px 14px; font: 500 13px var(--f-body); cursor: pointer; color: var(--ink-2); }
.tl-card__nav button:hover:not(:disabled) { border-color: var(--indigo); color: var(--indigo); }
.tl-card__nav button:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 860px) {
  .tl-wrap { grid-template-columns: 1fr; }
  .tl { display: flex; overflow-x: auto; padding: 0 0 8px; border-top: 0; gap: 8px; scrollbar-width: thin; }
  .tl::before { display: none; }
  .tl li { border: 0; flex: none; }
  .tl button { grid-template-columns: auto auto; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 8px 14px; background: var(--sheet); white-space: nowrap; }
  .tl__dot, .tl__t small { display: none; }
  .tl button[aria-selected="true"] { border-color: var(--indigo); background: var(--indigo-dim); }
  .tl-card__build { grid-template-columns: 1fr; }
  .mini-papers { display: none; }
  .tl-card__clip { right: 18px; }
}

/* mentor photos */
.split__h { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; line-height: 1.3; }
.photo { margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow-soft); }
.photo__img { width: 100%; height: 100%; object-fit: cover; }
.photo__ph { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; padding: 16px;
  background: repeating-linear-gradient(135deg, var(--card) 0 14px, var(--bg-subtle) 14px 28px); color: var(--muted); }
.photo__ph svg { width: 34px; height: 34px; color: var(--faint); }
.photo__ph b { font-size: 15px; color: var(--ink-2); }
.photo__ph span { font-size: 13px; }
.photo__ph code { font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 6px; }
.pin-note { position: absolute; width: 230px; background: var(--ruled); border: 1px solid var(--ruled-edge); padding: 18px 16px 16px; display: grid; gap: 6px; font-size: 13px; line-height: 1.6;
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(67, 56, 202, 0.12) 23px 24px); box-shadow: 0 16px 28px -16px rgba(17, 24, 39, 0.45); }
.pin-note__k { font-family: var(--f-hand); font-size: 22px; color: #C2410C; line-height: 1; }
.pin-note--br { right: -24px; bottom: -56px; transform: rotate(2deg); }
.pin-note--bl { left: -24px; bottom: -56px; transform: rotate(-2deg); }
.pin { position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F87171, #B91C1C 70%); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3); }
.pin--blue { background: radial-gradient(circle at 35% 35%, #818CF8, #3730A3 70%); }
#mentor .split { margin-top: 24px; }
#mentor .split + .split { margin-top: clamp(80px, 10vw, 120px); padding-top: clamp(80px, 10vw, 120px); }
@media (max-width: 820px) { .pin-note { position: relative; inset: auto; width: auto; margin: -24px 12px 0; } }
.polaroids { display: flex; justify-content: center; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; margin-top: clamp(90px, 10vw, 130px); }
.polaroid { margin: 0; width: min(260px, 100%); background: #fff; padding: 10px 10px 4px; box-shadow: 0 12px 26px -14px rgba(17, 24, 39, 0.4); border: 1px solid var(--rule); }
.polaroid:nth-child(1) { transform: rotate(-3deg); } .polaroid:nth-child(2) { transform: rotate(1.5deg) translateY(14px); } .polaroid:nth-child(3) { transform: rotate(-1deg); }
.polaroid .photo__ph, .polaroid .photo__img { aspect-ratio: 1; height: auto; }
.polaroid .photo__ph b { font-size: 13px; } .polaroid .photo__ph span { display: none; }
.polaroid figcaption { text-align: center; font-size: 24px; padding: 6px 0 4px; }

/* pricing button lock icon, doc icon */
.btn__lock { width: 18px; height: 18px; margin-right: -2px; }
.desk .macdoc { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.12)); }

/* =========================================================
   CURRICULUM PAGE v3: flow diagram, skills, result tracks,
   offer + calculator, checkout
   ========================================================= */
/* five-stage flow */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 1.1fr) 54px minmax(0, 1fr) 54px minmax(0, 1fr); align-items: stretch; max-width: 1180px; margin-inline: auto; }
.stage { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 14px; padding: 16px 14px 18px; display: grid; gap: 14px; align-content: start; box-shadow: 0 2px 0 var(--raise); min-width: 0; }
.stage__head { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; }
.stage__n { width: 26px; height: 26px; border-radius: 50%; background: var(--indigo); color: #fff; font: 600 12px var(--f-mono); display: grid; place-items: center; }
.stage__head b { display: block; font-family: var(--f-display); font-size: 15px; line-height: 1.35; }
.stage__head small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.stage--core { background: linear-gradient(180deg, #EEF6FF, var(--sheet)); border-color: rgba(63, 146, 222, 0.45); justify-items: center; text-align: center; }
.stage--core .stage__head { text-align: left; justify-self: stretch; }
.stage__folder .corefolder { max-width: 150px; }
.stage--core .map__eng { position: static; font-size: 11px; white-space: normal; text-align: left; }
.stage--result { background: linear-gradient(180deg, rgba(5, 150, 105, 0.07), var(--sheet)); border-color: rgba(5, 150, 105, 0.35); }
.stage--result .stage__n { background: var(--green); }
.tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tools--2 { grid-template-columns: 1fr 1fr; }
.tool { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; background: var(--bg-subtle); border: 1px solid var(--rule); font-size: 11px; font-weight: 500; text-align: center; line-height: 1.25; }
.tool img { width: 22px; height: 22px; }
.gt { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; color: #fff; }
.gt svg { width: 14px; height: 14px; }
.gt b { font: 700 13px var(--f-display); color: #fff; }
.fdocs { display: grid; gap: 8px; }
.fdoc { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; font-size: 12px; font-weight: 500; }
.fdoc .mdoc { width: 26px; height: 32px; }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.results li { font-size: 12.5px; font-weight: 500; line-height: 1.4; display: grid; grid-template-columns: 16px 1fr; gap: 6px; }
.results li::before { content: "✓"; color: var(--green); font-weight: 700; }
.flow__arrow { position: relative; display: grid; place-items: center; }
.flow__line { position: absolute; left: 6px; right: 6px; top: 50%; border-top: 2px dashed rgba(67, 56, 202, 0.45); }
.flow__line::after { content: ""; position: absolute; right: -2px; top: -6px; border: 5px solid transparent; border-left: 7px solid var(--indigo); }
.flow__lbl { position: relative; z-index: 1; transform: translateY(-22px); font-family: var(--f-hand); font-size: 15px; color: var(--indigo); text-align: center; line-height: 1.1; background: var(--bg); padding: 0 2px; }
html[lang="ja"] .flow__lbl { font-size: 12px; }
@media (max-width: 1080px) {
  .flow { grid-template-columns: 1fr; max-width: 460px; }
  .flow__arrow { height: 64px; }
  .flow__line { left: 50%; right: auto; top: 6px; bottom: 6px; border-top: 0; border-left: 2px dashed rgba(67, 56, 202, 0.45); }
  .flow__line::after { right: auto; top: auto; left: -7px; bottom: -4px; border: 6px solid transparent; border-top: 8px solid var(--indigo); border-bottom: 0; }
  .flow__lbl { transform: translateX(70px); background: none; }
  .tools--2 { grid-template-columns: repeat(4, 1fr); }
  .stage__folder .corefolder { max-width: 140px; }
}
#map .source { max-width: 760px; margin-top: 28px; }

/* skill block under the TCEO cards */
.skill { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; max-width: 920px; margin: clamp(56px, 7vw, 88px) auto 0; padding: clamp(28px, 4vw, 44px); background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 18px; box-shadow: var(--shadow-lift); }
.skill__copy { display: grid; gap: 12px; }
.skill__copy h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; line-height: 1.3; }
.skill__copy p { color: var(--muted); }
.skill__steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.skill__steps li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; background: var(--bg-subtle); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 10px 4px 4px; }
.skill__steps li > span:first-child { width: 20px; flex: none; height: 20px; border-radius: 50%; background: var(--indigo); color: #fff; font: 600 10px var(--f-mono); display: grid; place-items: center; }
.skill__steps li:last-child { background: var(--indigo-dim); color: var(--indigo); border-color: rgba(67, 56, 202, 0.25); }
.phone { position: relative; width: 260px; height: 420px; margin-inline: auto; border-radius: 38px; background: #111827; padding: 12px; box-shadow: 0 30px 60px -30px rgba(17, 24, 39, 0.6); }
.phone::before { content: ""; position: absolute; inset: 12px; border-radius: 28px; background: var(--bg); }
.phone > * { position: relative; }
.phone__notch { width: 80px; height: 22px; border-radius: 0 0 14px 14px; background: #111827; margin: 0 auto; }
.phone__head { padding: 14px 16px 8px; font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.phone__skills { list-style: none; margin: 0; padding: 0 12px; display: grid; gap: 8px; }
.phone__skills li { display: flex; align-items: center; gap: 10px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 11px 12px; font-size: 13px; font-weight: 500; }
.phone__skills li.on { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-dim); }
.sk-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--claude-dim); display: grid; place-items: center; font-size: 12px; }
.phone__tap { position: absolute; left: 196px; top: 92px; width: 28px; height: 28px; border-radius: 50%; background: rgba(67, 56, 202, 0.25); border: 2px solid rgba(67, 56, 202, 0.6); }
@media (prefers-reduced-motion: no-preference) { .phone__tap { animation: tap 2.4s ease-in-out infinite; } .phone__toast { animation: toast 2.4s ease-in-out infinite; } }
@keyframes tap { 0%, 100% { transform: scale(0.6); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.3); opacity: 0; } }
@keyframes toast { 0%, 30% { opacity: 0; transform: translateY(8px); } 40%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.phone__toast { position: absolute; left: 24px; right: 24px; bottom: 30px; background: #111827; color: #fff; font-size: 12px; border-radius: 12px; padding: 10px 12px; text-align: center; }
@media (max-width: 760px) { .skill { grid-template-columns: 1fr; } }

/* tracks: result-first rows with lock-screen notifications */
#tracks .split + .split { margin-top: clamp(72px, 9vw, 112px); padding-top: clamp(72px, 9vw, 112px); }
.whos { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-sm { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--indigo-dim); color: var(--indigo); }
.lockscreen { max-width: 420px; margin-inline: auto; border-radius: 28px; padding: 26px 18px 22px; background: linear-gradient(160deg, #312E81, #4338CA 55%, #6366F1); display: grid; gap: 10px; box-shadow: var(--shadow-lift); }
.lockscreen__time { color: #fff; text-align: center; font-family: var(--f-display); font-weight: 600; font-size: 52px; letter-spacing: -0.02em; line-height: 1; }
.lockscreen__lab { color: var(--lavender); text-align: center; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.ntf { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(8px); border-radius: 16px; padding: 10px 12px; }
.ntf__ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.ntf__ico svg { width: 18px; height: 18px; }
.ntf__app { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-weight: 600; }
.ntf__app em { font-style: normal; font-weight: 400; }
.ntf__t { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal:not(.below) .ntf { animation: ntfin 0.5s cubic-bezier(.2, .7, .2, 1) both; }
  .js .reveal:not(.below) .ntf:nth-child(4) { animation-delay: 0.15s; } .js .reveal:not(.below) .ntf:nth-child(5) { animation-delay: 0.3s; }
}
@keyframes ntfin { from { transform: translateY(10px); } to { transform: none; } }

/* pricing: offer card + calculator */
.buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; max-width: 1040px; margin-inline: auto; align-items: start; }
.offer { background: var(--sheet); border: 1.5px solid var(--indigo); border-radius: 20px; padding: clamp(24px, 4vw, 36px); box-shadow: 0 30px 60px -30px rgba(67, 56, 202, 0.45); display: grid; gap: 14px; }
.offer__top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.offer__sub { font-size: 14px; color: var(--muted); margin-top: 2px; }
.offer__badge { font-size: 12px; font-weight: 600; color: var(--indigo); background: var(--indigo-dim); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.offer__price { display: flex; align-items: flex-start; gap: 8px; }
.offer__price .amount { font-size: clamp(56px, 7vw, 76px); }
.offer__cur { font: 600 18px var(--f-display); color: var(--muted); margin-top: 10px; }
.offer__perday { font-size: 14px; color: var(--ink-2); margin-top: -8px; }
.offer__inc { list-style: none; margin: 4px 0; padding: 14px 0; border-block: 1px solid var(--rule); display: grid; gap: 10px; }
.offer__inc li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.ck { width: 22px; height: 22px; border-radius: 50%; background: rgba(5, 150, 105, 0.12); color: var(--green); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.offer__inc b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.offer__inc small { font-size: 12.5px; color: var(--muted); }
.offer__cta { width: 100%; justify-content: space-between; font-size: 17px; min-height: 60px; padding-left: 22px; }
.offer__secure { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: -4px; }
.offer__promise { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; background: var(--ruled); border: 1px solid var(--ruled-edge); border-radius: 10px; padding: 14px; }
.offer__promise b { font-size: 14px; } .offer__promise p { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.stamp--sm { position: relative !important; inset: auto !important; width: 70px !important; height: 80px !important; transform: rotate(-6deg) !important; }
.stamp--sm span { font-size: 28px !important; }
.calc { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: clamp(24px, 4vw, 34px); display: grid; gap: 16px; }
.calc h3 { font-size: 22px; letter-spacing: -0.01em; }
.calc__lead { font-size: 13.5px; color: var(--muted); margin-top: -10px; }
.calc__note { position: absolute; right: 18px; top: -26px; font-size: 24px; transform: rotate(5deg); }
.rng { display: grid; gap: 8px; }
.rng > span { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 500; }
.rng output { font: 600 15px var(--f-mono); color: var(--indigo); white-space: nowrap; }
.rng input[type=range] { width: 100%; accent-color: var(--indigo); height: 28px; }
.calc__out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc__out > div { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.calc__out small { font-size: 12px; color: var(--muted); }
.calc__out b { font: 700 22px var(--f-display); font-variant-numeric: tabular-nums; }
.calc__payback { grid-column: 1 / -1; }
.calc__payback b { font-size: 30px; color: var(--indigo); }
.calc.is-good .calc__payback { border-color: rgba(5, 150, 105, 0.4); background: rgba(5, 150, 105, 0.06); }
.calc.is-good .calc__payback b { color: var(--green); }
.calc__bar { position: relative; height: 10px; border-radius: 999px; background: var(--raise); }
.calc__bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--indigo); transition: width .25s; }
.calc.is-good .calc__bar span { background: var(--green); }
.calc__bar i { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.calc__fine { font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.calc__fine input { width: 52px; font: 500 12px var(--f-mono); padding: 1px 4px; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--sheet); }
@media (max-width: 860px) { .buy { grid-template-columns: 1fr; } }

/* checkout page */
.co-page { background-image: none; }
.co-head { border-bottom: 1px solid var(--rule); background: var(--bg); }
.co-head__in { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.co-head__end { display: flex; align-items: center; gap: 18px; font-size: 13.5px; }
.co-head__end a { text-decoration: none; color: var(--muted); }
.co-head__end a:hover { color: var(--indigo); }
.co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 48px); align-items: start; padding-block: clamp(32px, 5vw, 64px); }
.co-sum { background: var(--ruled); border: 1px solid var(--ruled-edge); border-radius: 6px; padding: clamp(24px, 4vw, 34px); box-shadow: 0 2px 0 var(--ruled-edge); display: grid; gap: 12px; }
.co-sum h1 { font-size: clamp(32px, 4.4vw, 46px); letter-spacing: -0.03em; }
.co-sum__sub { font-weight: 600; font-size: 16px; }
.co-sum__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.co-sum__list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; }
.co-sum__list li::before { content: "✓"; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--green); color: var(--green); font-size: 11px; display: grid; place-items: center; margin-top: 3px; }
.co-next { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--rule-strong); }
.co-next h2 { font-size: 18px; margin-bottom: 16px; }
.co-next ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.co-next li { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; counter-increment: s; }
.co-next li::before { content: counter(s); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--indigo-dim); color: var(--indigo); font: 600 13px var(--f-mono); display: grid; place-items: center; }
.co-next b { font-size: 15px; } .co-next li > span { font-size: 13.5px; color: var(--muted); }
.co-promise { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--rule-strong); display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: start; }
.co-promise p { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.co-pay { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 16px; padding: clamp(22px, 4vw, 34px); box-shadow: var(--shadow-soft); display: grid; gap: 18px; }
.co-pay__head { display: flex; justify-content: space-between; align-items: baseline; }
.co-pay__head h2 { font-size: clamp(22px, 2.6vw, 28px); }
.co-pay__head .mono { font-size: 12px; color: var(--muted); }
.plan { display: grid; grid-template-columns: 20px 1fr; gap: 12px; border: 1.5px solid var(--rule-strong); border-radius: 12px; padding: 16px 18px; }
.plan.is-on { border-color: var(--indigo); background: rgba(67, 56, 202, 0.04); }
.plan__radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--indigo); margin-top: 2px; position: relative; }
.plan__radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--indigo); }
.plan b { font-size: 15px; font-weight: 600; }
.plan__price { display: block; font: 700 30px var(--f-display); letter-spacing: -0.02em; margin: 2px 0; }
.plan small { font-size: 13px; color: var(--muted); }
.co-due { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--rule); font-weight: 500; }
.co-due b { font: 700 clamp(24px, 3vw, 32px) var(--f-display); letter-spacing: -0.02em; }
#stripe-checkout:empty { display: none; }
.co-preview { position: relative; display: grid; gap: 12px; padding: 18px; border: 1.5px dashed rgba(67, 56, 202, 0.45); border-radius: 12px; }
.co-preview__flag { font-family: var(--f-mono); font-size: 11px; color: var(--indigo); background: var(--indigo-dim); padding: 6px 10px; border-radius: 6px; }
.sk { display: grid; gap: 6px; font-size: 13.5px; font-weight: 500; }
.sk > i { display: block; height: 44px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--bg-subtle); }
.sk--row { grid-template-columns: repeat(3, 1fr); }
.sk__opt { display: grid !important; place-items: center; height: 46px !important; font-style: normal; font-size: 13px; color: var(--muted); }
.sk__opt--on { border-color: var(--indigo) !important; color: var(--indigo); background: rgba(67, 56, 202, 0.04) !important; }
.sk__sel { display: flex !important; align-items: center; padding: 0 12px; font-style: normal; font-weight: 400; color: var(--ink-2); }
.co-preview__btn { width: 100%; justify-content: space-between; opacity: 0.55; cursor: not-allowed; }
.co-fine { font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.7; }
.co-fine a { color: var(--indigo); }
.co-error { color: #B91C1C; font-size: 14px; }
.co-foot { border-top: 1px solid var(--rule); padding-block: 22px; }
.co-foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 22px; font-size: 13px; color: var(--muted); }
.co-foot a { color: var(--muted); }
.co-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 860px) { .co { grid-template-columns: 1fr; } .co-pay { order: -1; } .co-head__end a:first-child { display: none; } }


/* =========================================================
   v4: Claude-app skill demo, AI-app lock screens, spacing
   ========================================================= */
.cta-row { margin-top: clamp(48px, 6vw, 72px); }
#fix .cta-row, #method .cta-row { margin-bottom: 0; }
.skill { grid-template-columns: 340px minmax(0, 1fr); max-width: 1000px; padding: clamp(28px, 5vw, 56px); margin-top: clamp(80px, 10vw, 140px); }
.skill__punch { font-weight: 600; color: var(--ink) !important; border-left: 3px solid var(--claude); padding-left: 14px; }
.skill__fine { font-size: 12px; color: var(--faint) !important; }
.scene-ctrls { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scene-ctrls button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--rule-strong); background: var(--bg); border-radius: 12px; padding: 10px 12px; font: 500 13.5px var(--f-body); color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s; }
.scene-ctrls button > span:first-child { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 600 11px var(--f-mono); background: var(--raise); color: var(--ink-2); }
.scene-ctrls button[aria-pressed="true"] { border-color: var(--claude); background: rgba(217, 119, 87, 0.08); color: var(--ink); }
.scene-ctrls button[aria-pressed="true"] > span:first-child { background: var(--claude); color: #fff; }
@media (max-width: 860px) { .skill { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .scene-ctrls { grid-template-columns: 1fr; } }

/* phone frame shared by the demo and the lock screens */
.phone2, .lockphone { position: relative; width: 300px; max-width: 100%; aspect-ratio: 9 / 19.2; margin-inline: auto; border-radius: 46px; border: 10px solid #111827; background: #F4F3EE; overflow: hidden; box-shadow: 0 40px 70px -36px rgba(17, 24, 39, 0.65), 0 0 0 1px #2A2F3A inset; }
.phone2__island { position: absolute; z-index: 5; top: 9px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #0B0F17; }
.phone2__status { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 44px; display: flex; justify-content: space-between; align-items: center; padding: 6px 26px 0; font: 600 13px -apple-system, var(--f-body); color: #141413; }
.phone2__sig { font-size: 9px; letter-spacing: 1px; }
.phone2__tag { position: absolute; z-index: 6; right: 12px; bottom: 12px; font: 500 9.5px var(--f-mono); letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: rgba(17, 24, 39, 0.55); color: #fff; }
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.demo[data-scene="1"] .scene--1, .demo[data-scene="2"] .scene--2, .demo[data-scene="3"] .scene--3, .demo[data-scene="4"] .scene--4 { opacity: 1; visibility: visible; }

/* Claude-style chat */
.cl { background: #F4F3EE; display: grid; grid-template-rows: auto 1fr auto; padding-top: 44px; color: #141413; }
.cl__bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgba(20, 20, 19, 0.08); font-size: 15px; }
.cl__bar img { width: 18px; height: 18px; }
.cl__model { margin-left: auto; font-size: 11px; color: #6B6A64; border: 1px solid rgba(20, 20, 19, 0.15); border-radius: 999px; padding: 1px 8px; }
.cl__msgs { padding: 14px 14px 8px; display: grid; gap: 14px; align-content: start; overflow: hidden; font-size: 13px; line-height: 1.6; }
.cl__me { justify-self: end; max-width: 86%; background: #E8E6DC; border-radius: 16px 16px 4px 16px; padding: 9px 12px; }
.cl__ai { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.cl__spark img { width: 18px; height: 18px; margin-top: 2px; }
.cl__skill { margin-top: 8px; display: grid; gap: 2px; background: #fff; border: 1px solid rgba(217, 119, 87, 0.45); border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 14px -10px rgba(217, 119, 87, 0.8); }
.cl__skill b { font-size: 13px; color: #A84F2E; } .cl__skill span { font-size: 11.5px; color: #6B6A64; }
.cl__input { margin: 8px 12px 18px; display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid rgba(20, 20, 19, 0.12); border-radius: 18px; padding: 10px 10px 10px 14px; font-size: 12.5px; color: #9A988F; }
.cl__input .cl__go { width: 26px; height: 26px; border-radius: 9px; background: #D97757; color: #fff; display: grid; place-items: center; font-size: 13px; }
.dr { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.dr li { background: #fff; border: 1px solid rgba(20, 20, 19, 0.1); border-radius: 10px; padding: 7px 10px; display: grid; gap: 1px; }
.dr__to { font-size: 11.5px; font-weight: 600; } .dr__sub { font-size: 11px; color: #6B6A64; } .dr__body { font-size: 11px; color: #3D3D3A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl__more { display: block; font-size: 11px; color: #6B6A64; margin-top: 6px; }
.cl__send { display: inline-block; margin-top: 8px; background: #141413; color: #fff; font-size: 12px; font-weight: 600; border-radius: 10px; padding: 7px 14px; }
.cl__toast { position: absolute; left: 18px; right: 18px; bottom: 64px; background: #141413; color: #fff; text-align: center; font-size: 12.5px; padding: 10px; border-radius: 12px; opacity: 0; transform: translateY(8px); transition: all .4s ease .9s; }
.demo[data-scene="4"] .cl__toast { opacity: 1; transform: none; }
.demo[data-scene="4"] .cl__send { animation: press 0.4s ease 0.6s both; }
@keyframes press { 50% { transform: scale(0.94); background: #D97757; } }

/* overnight */
.night { background: linear-gradient(180deg, #0F1023, #1E1B4B); color: #E0E7FF; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
.night__moon { font-size: 40px; color: #C7D2FE; }
.night b { font-family: var(--f-display); font-size: 17px; }
.night ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; font-size: 12.5px; width: 100%; }
.night li { background: rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 8px 10px; display: flex; justify-content: space-between; gap: 8px; }
.night li.ok::before { content: "✓"; color: #6EE7B7; margin-right: 6px; }
.night li.ok { justify-content: flex-start; }
.night__n { font-family: var(--f-mono); color: #FDBA74; }
.night__bar { width: 100%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.night__bar span { display: block; height: 100%; width: 78%; background: #D97757; border-radius: 6px; }
.demo[data-scene="2"] .night__bar span { animation: fill 3.2s ease-out both; }
@keyframes fill { from { width: 20%; } to { width: 78%; } }

/* lock screens (demo scene 3 and the two tracks) */
.lock, .lockphone { background: radial-gradient(120% 70% at 20% 0%, #6366F1 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, #D97757 0%, transparent 55%), linear-gradient(170deg, #312E81, #1E1B4B); color: #fff; }
.lock { padding: 58px 14px 0; display: grid; align-content: start; justify-items: center; gap: 0; }
.lockphone { padding: 58px 12px 0; display: grid; align-content: start; justify-items: stretch; width: 320px; }
.lock__date { text-align: center; font: 600 15px -apple-system, var(--f-body); opacity: 0.92; }
.lock__time { text-align: center; font: 700 76px/1 -apple-system, "SF Pro Display", var(--f-display); letter-spacing: -0.02em; margin: 2px 0 22px; }
.lock__stack { display: grid; gap: 8px; }
.lock .ios-ntf { width: 100%; }
.ios-ntf { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; background: rgba(245, 245, 247, 0.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 20px; padding: 11px 12px; color: #111; text-align: left; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.35); }
.ios-ntf > div { display: grid; gap: 1px; min-width: 0; }
.ios-ntf__app { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: #3A3A3C; }
.ios-ntf__app em { font-style: normal; font-weight: 400; color: #6E6E73; }
.ios-ntf b { font-size: 13.5px; font-weight: 600; }
.ios-ntf > div > span:last-child { font-size: 12.5px; line-height: 1.4; color: #1C1C1E; }
.ai-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.ai-ico img { width: 24px; height: 24px; }
.ai-ico--claude { background: #F4F3EE; } .ai-ico--gpt { background: #fff; } .ai-ico--gem { background: #fff; }
.ai-ico--grok { background: #000; } .ai-ico--grok b { color: #fff; font: 800 18px var(--f-display); }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal:not(.below) .lock__stack .ios-ntf { animation: ntfin 0.5s cubic-bezier(.2, .7, .2, 1) both; }
  .js .reveal:not(.below) .lock__stack .ios-ntf:nth-child(2) { animation-delay: .12s; } .js .reveal:not(.below) .lock__stack .ios-ntf:nth-child(3) { animation-delay: .24s; } .js .reveal:not(.below) .lock__stack .ios-ntf:nth-child(4) { animation-delay: .36s; }
  .demo[data-scene="3"] .scene--3 .ios-ntf { animation: drop .6s cubic-bezier(.2, .8, .2, 1.2) .2s both; }
}
@keyframes drop { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
#tracks .split { align-items: center; }
#tracks .split + .split { margin-top: clamp(96px, 12vw, 160px); padding-top: clamp(96px, 12vw, 160px); }
@media (max-width: 380px) { .lockphone, .phone2 { width: 100%; } .lock__time { font-size: 62px; } }
/* stage 4 now holds 12 tools */
.stage--4 .tools--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1080px) { .stage--4 .tools--2 { grid-template-columns: repeat(4, 1fr); } }

.lockphone { aspect-ratio: auto; padding-bottom: 46px; }
.lockphone .lock__time { font-size: 64px; margin-bottom: 18px; }
.demo[data-scene="2"] .phone2__status, .demo[data-scene="3"] .phone2__status { color: #fff; }
.phone2__status { transition: color .4s; }

/* problem + fix chat (design option 3) */
.o3 { max-width: 760px; margin-inline: auto; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 24px; box-shadow: var(--shadow-lift); overflow: hidden; }
.o3-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--rule); background: var(--bg-subtle); }
.o3-av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(150deg, #312E81, #4338CA); color: #fff; display: grid; place-items: center; font-family: var(--f-kanji); font-size: 19px; }
.o3-bar b { font-size: 15px; } .o3-bar small { display: block; font-size: 11.5px; color: var(--green); line-height: 1.3; }
.o3-log { padding: 24px 18px; display: grid; gap: 12px; align-content: start; min-height: 320px; max-height: 520px; overflow-y: auto; scroll-behavior: smooth; }
.o3-m { max-width: 82%; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.65; animation: o3pop .3s ease both; }
.o3-me { justify-self: end; background: var(--indigo); color: #fff; border-bottom-right-radius: 6px; }
.o3-ai { justify-self: start; background: #fff; border: 1px solid var(--rule); border-bottom-left-radius: 6px; }
.o3-ai .fix__chip { margin-right: 8px; }
.o3-typing { display: inline-flex; gap: 4px; } .o3-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: o3b 1s infinite; }
.o3-typing i:nth-child(2) { animation-delay: .15s; } .o3-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes o3b { 50% { transform: translateY(-4px); opacity: .5; } } @keyframes o3pop { from { opacity: 0; transform: translateY(6px); } }
.o3-qs { border-top: 1px solid var(--rule); padding: 14px 16px 18px; display: grid; gap: 10px; background: var(--bg-subtle); }
.o3-qs p { font-size: 12px; color: var(--muted); }
.o3-wrapq { display: flex; flex-wrap: wrap; gap: 8px; }
.o3-q { border: 1.5px solid var(--indigo); background: #fff; color: var(--indigo); border-radius: 999px; padding: 8px 15px; font: 600 13.5px var(--f-body); cursor: pointer; transition: background .15s, color .15s; text-align: left; }
.o3-q:hover:not([disabled]) { background: var(--indigo); color: #fff; }
.o3-q[disabled] { opacity: .35; cursor: default; }
.o3-end { display: none; text-align: center; padding-top: 4px; } .o3-end.on { display: block; }
@media (max-width: 520px) { .o3-m { max-width: 92%; font-size: 14.5px; } .o3-log { min-height: 260px; } }

.oncall__badge--indigo { color: var(--indigo); background: var(--indigo-dim); border-color: rgba(67, 56, 202, 0.25); }

/* chat: hand-drawn prompts that point at the questions */
.o3-wrap { position: relative; max-width: 760px; margin-inline: auto; }
.o3-note { position: absolute; right: calc(100% + 8px); bottom: 64px; width: 220px; font-size: 26px; line-height: 1.15; text-align: center; transform: rotate(-4deg); pointer-events: none; }
html[lang="ja"] .o3-note { font-size: 19px; line-height: 1.5; }
.o3-note span { display: block; margin-bottom: 2px; }
.o3-arrow { width: 170px; height: 120px; margin-left: 46px; color: var(--indigo); }
.o3-hint { display: grid; justify-items: center; gap: 0; margin-top: 18px; font-size: 24px; color: var(--indigo); transform: rotate(-2deg); transition: opacity .3s; }
html[lang="ja"] .o3-hint { font-size: 18px; }
.o3-arrow-d { width: 46px; height: 70px; }
.o3.started .o3-hint { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .o3:not(.started) .o3-q { animation: o3nudge 2.4s ease-in-out infinite; }
  .o3:not(.started) .o3-q:nth-child(2) { animation-delay: .2s; } .o3:not(.started) .o3-q:nth-child(3) { animation-delay: .4s; }
  .o3:not(.started) .o3-q:nth-child(4) { animation-delay: .6s; } .o3:not(.started) .o3-q:nth-child(5) { animation-delay: .8s; } .o3:not(.started) .o3-q:nth-child(6) { animation-delay: 1s; }
  .o3-arrow-d { animation: o3bob 1.6s ease-in-out infinite; }
}
@keyframes o3nudge { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(67, 56, 202, 0); } 35% { box-shadow: 0 0 0 5px rgba(67, 56, 202, .14); } }
@keyframes o3bob { 50% { transform: translateY(6px); } }
@media (max-width: 1240px) { .o3-note { display: none; } }

/* =========================================================
   v5: roomier overview flow (one stage per row) and floating notifications
   ========================================================= */
.flow { grid-template-columns: minmax(0, 1fr); max-width: 900px; gap: 0; }
.flow .stage { grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px 32px; border-radius: 18px; }
.flow .stage__head { grid-template-columns: 34px 1fr; gap: 12px; align-self: center; }
.flow .stage__n { width: 34px; height: 34px; font-size: 14px; }
.flow .stage__head b { font-size: 19px; }
.flow .stage__head small { font-size: 13.5px; margin-top: 4px; }
.flow .tools--2, .stage--4 .tools--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stage--4 .tools--2 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.flow .tool { padding: 12px 6px; font-size: 12px; }
.flow .tool img, .flow .gt { width: 26px; height: 26px; }
.flow .fdocs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.flow .fdoc { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; font-size: 13.5px; }
.flow .fdoc .mdoc { width: 40px; height: 50px; }
.flow .stage--core { justify-items: stretch; text-align: left; }
.flow .stage--core > .stage__folder, .flow .stage--core > .map__eng { grid-column: 2; }
.flow .stage--core { grid-template-columns: 250px auto 1fr; }
.flow .stage--core .stage__folder { grid-column: 2; justify-self: start; }
.flow .stage--core .map__eng { grid-column: 3; justify-self: start; font-size: 12.5px; }
.flow .stage__folder .corefolder { max-width: 170px; width: 170px; }
.flow .results { grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.flow .results li { font-size: 14.5px; }
.flow__arrow { height: 84px; }
.flow__line { left: 50%; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 2px dashed rgba(67, 56, 202, 0.45); }
.flow__line::after { right: auto; top: auto; left: -7px; bottom: -4px; border: 6px solid transparent; border-top: 8px solid var(--indigo); border-bottom: 0; }
.flow__lbl { transform: translateX(84px); background: none; font-size: 20px; }
html[lang="ja"] .flow__lbl { font-size: 15px; }
#map .source { margin-top: 44px; }
@media (max-width: 760px) {
  .flow .stage, .flow .stage--core { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; }
  .flow .stage--core .stage__folder, .flow .stage--core .map__eng { grid-column: 1; justify-self: center; }
  .stage--4 .tools--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow .results { grid-template-columns: 1fr; }
  .flow__arrow { height: 64px; }
}
@media (max-width: 420px) { .stage--4 .tools--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* lock-screen notifications: gentle float, lift on hover, drift on scroll */
.lock__stack .ios-ntf { position: relative; top: calc(var(--drift, 0) * var(--k, 0) * 1px); transition: translate .3s cubic-bezier(.2, .8, .2, 1.3), scale .3s cubic-bezier(.2, .8, .2, 1.3), box-shadow .3s; }
.lock__stack .ios-ntf:nth-child(1) { --k: 6; } .lock__stack .ios-ntf:nth-child(2) { --k: 10; } .lock__stack .ios-ntf:nth-child(3) { --k: 14; } .lock__stack .ios-ntf:nth-child(4) { --k: 18; }
.lock__stack .ios-ntf:hover { translate: 0 -6px; scale: 1.035; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.5); z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal:not(.below) .lock__stack .ios-ntf { animation: ntfin 0.5s cubic-bezier(.2, .7, .2, 1) both, nfloat 4.2s ease-in-out 0.6s infinite; }
  .js .reveal:not(.below) .lock__stack .ios-ntf:nth-child(2) { animation-delay: .12s, 1.1s; }
  .js .reveal:not(.below) .lock__stack .ios-ntf:nth-child(3) { animation-delay: .24s, 1.6s; }
  .js .reveal:not(.below) .lock__stack .ios-ntf:nth-child(4) { animation-delay: .36s, 2.1s; }
}
@keyframes nfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* chat prompt v2: one long hand-drawn arrow outside the chat, curving into the buttons */
.o3-side { position: absolute; left: calc(100% + 10px); top: 150px; bottom: 96px; width: min(140px, calc((100vw - 760px) / 2 - 22px)); display: grid; grid-template-rows: auto 1fr; justify-items: start; pointer-events: none; color: var(--indigo); }
.o3-side span { font-size: 23px; line-height: 1.1; transform: rotate(-5deg); transform-origin: left bottom; margin-left: 6px; }
html[lang="ja"] .o3-side span { font-size: 16px; line-height: 1.5; }
.o3-long { width: 100%; height: 100%; min-height: 160px; margin-top: 6px; overflow: visible; }
.o3-top { display: none; align-items: flex-end; justify-content: flex-end; gap: 4px; margin: 0 6px 6px auto; color: var(--indigo); font-size: 22px; line-height: 1.15; pointer-events: none; }
html[lang="ja"] .o3-top { font-size: 16px; }
.o3-top span { transform: rotate(-3deg); }
.o3-short { width: 44px; height: 52px; flex: none; }
@media (max-width: 1010px) { .o3-side { display: none; } .o3-top { display: flex; } }

/* hero "free to sign up" note: anchored to the LINE button, arrow ends at its left edge */
.cta-anchor { position: relative; display: inline-block; }
.hero__note { position: absolute; right: calc(100% + 6px); top: -30px; display: grid; justify-items: end; color: var(--indigo); pointer-events: none; white-space: nowrap; }
.hero__note-t { font-size: 26px; line-height: 1; transform: rotate(-6deg); margin-right: 52px; }
html[lang="ja"] .hero__note-t { font-size: 19px; }
.hero__note svg { width: 84px; height: 46px; margin-top: -2px; }
@media (max-width: 760px) {
  .hero__note { right: auto; left: 50%; top: -58px; transform: translateX(-112%); }
  .hero__note svg { width: 54px; height: 32px; transform: rotate(18deg); margin-right: -18px; }
  .hero__note-t { margin-right: 30px; font-size: 22px; }
  .hero__cta { padding-top: 30px; }
}
.tools-strip .marquee { margin-inline: calc(50% - 50vw); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* =========================================================
   three supports: scroll story (design option 6)
   ========================================================= */
/* mini visuals */
.vc{background:#1F1F23;color:#F3F4F6;border-radius:14px;padding:10px;display:grid;gap:10px;font-family:var(--f-body);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.vc-top{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:2px 4px}
.vc-top b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-rec{display:inline-flex;align-items:center;gap:5px;font:600 10px var(--f-mono);letter-spacing:.06em;color:#FCA5A5;background:rgba(239,68,68,.16);border-radius:999px;padding:2px 8px 2px 6px;flex:none}
.vc-rec i{width:7px;height:7px;border-radius:50%;background:#EF4444;animation:blink 1.2s infinite}
.vc-time{margin-left:auto;font-family:var(--f-mono);font-size:13px;color:#D1D5DB;background:rgba(255,255,255,.08);border-radius:6px;padding:2px 8px;flex:none;font-variant-numeric:tabular-nums}
.vc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vc-tile{position:relative;aspect-ratio:4/3;border-radius:10px;background:linear-gradient(160deg,#2D2D33,#26262B);display:grid;place-items:center;overflow:hidden}
.vc-tile--host{background:linear-gradient(160deg,#312E81,#1E1B4B);box-shadow:0 0 0 2px #6366F1 inset}
.vc-face{width:56px;height:56px;border-radius:50%;background:#4338CA;display:grid;place-items:center;font-family:var(--f-kanji);font-size:24px;color:#fff;box-shadow:0 0 0 4px rgba(99,102,241,.25)}
.vc-tile--host .vc-face{animation:talk 1.6s ease-in-out infinite}
@keyframes talk{50%{box-shadow:0 0 0 9px rgba(99,102,241,.18)}}
.vc-face--you{background:#52525B;box-shadow:none}.vc-face--you svg{width:28px;height:28px;color:#E4E4E7}
.vc-name{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;font-size:11px;background:rgba(0,0,0,.45);border-radius:6px;padding:2px 7px;white-space:nowrap}
.vc-wave{display:inline-flex;gap:2px;align-items:flex-end;height:10px}.vc-wave i{width:2px;background:#86EFAC;border-radius:2px;animation:wave .9s ease-in-out infinite}
.vc-wave i:nth-child(1){height:5px}.vc-wave i:nth-child(2){height:10px;animation-delay:.15s}.vc-wave i:nth-child(3){height:7px;animation-delay:.3s}
@keyframes wave{50%{transform:scaleY(.4)}}
.vc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;font-size:11.5px}
.vc-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 8px;line-height:1.3;transition:background .3s,border-color .3s}
.vc-steps b{font-family:var(--f-mono);font-weight:500;color:#A1A1AA;font-size:10.5px;grid-column:2}
.vc-steps li > span:last-child{grid-column:2}
.vc-ck{grid-row:span 2;width:16px;height:16px;border-radius:50%;border:1.5px solid #52525B;display:grid;place-items:center;font-size:9px;color:transparent;transition:all .3s}
.vc-steps li.on{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35)}
.vc-steps li.on .vc-ck{background:#22C55E;border-color:#22C55E;color:#fff}.vc-steps li.on b{color:#86EFAC}
.vc-ctl{display:flex;justify-content:center;gap:8px;padding:2px 0 2px}
.vc-ctl span{width:34px;height:34px;border-radius:50%;background:#3F3F46;display:grid;place-items:center;color:#E4E4E7}
.vc-ctl svg{width:16px;height:16px}
.vc-ctl .vc-end{background:#DC2626;width:46px;border-radius:999px}
@media (max-width:420px){.vc-steps{grid-template-columns:1fr}.vc-face{width:46px;height:46px;font-size:20px}}
.ve{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:12px;display:grid;gap:8px;font-size:13px}
.ve-top{display:flex;align-items:center;gap:8px}.ve-av{width:28px;height:28px;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;font-size:13px}
.ve-top small{color:var(--green);font-size:11px;margin-left:auto}
.ve-m{max-width:88%;padding:8px 11px;border-radius:14px;line-height:1.55;display:grid;gap:2px}.ve-m em{font-style:normal;font-family:var(--f-mono);font-size:10px;opacity:.6}
.ve-me{justify-self:end;background:#06C755;color:#06210F;border-bottom-right-radius:4px}.ve-ai{background:var(--bg-subtle);border-bottom-left-radius:4px}
.ve-ai code{font-family:var(--f-mono);font-size:12px;background:#fff;border:1px solid var(--rule);border-radius:6px;padding:2px 6px;justify-self:start}
.vl ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vl li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:8px 8px 8px 10px;font-size:13px}
.vl-tag{font-family:var(--f-mono);font-size:10px;color:var(--muted);background:var(--bg-subtle);border-radius:6px;padding:2px 6px}
.vl-dl{width:28px;height:28px;border-radius:8px;border:1px solid var(--rule-strong);background:var(--sheet);display:grid;place-items:center;cursor:pointer;color:var(--indigo);transition:all .2s}
.vl-dl .dl{width:15px;height:15px}.vl-dl.done{background:var(--green);border-color:var(--green);color:#fff}
.vl-dl.done .dl{display:none}.vl-dl.done::after{content:"✓";font-weight:700}
.vl.grid ul{grid-template-columns:1fr 1fr}

.s6{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.s6-step{min-height:68vh;display:grid;align-content:center;gap:12px;opacity:.3;transition:opacity .4s}
.s6-step.on{opacity:1}.s6-step h3{font-size:clamp(22px,2.6vw,30px);line-height:1.35}.s6-step p{color:var(--ink-2);max-width:30em}
.s6-n{font-family:var(--f-display);font-weight:800;font-size:56px;line-height:1;color:var(--indigo);opacity:.18}
.s6-inline{display:none}
.s6-pin{position:relative}.s6-stage{position:sticky;top:calc(50vh - 220px);height:440px;background:var(--sheet);border:1px solid var(--rule-strong);border-radius:28px;box-shadow:var(--shadow-lift);padding:28px;display:grid;align-items:center}
.s6-frame{grid-area:1/1;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s,transform .45s}.s6-frame.on{opacity:1;transform:none}
.s6-bar{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:grid;gap:8px}.s6-bar i{width:5px;height:28px;border-radius:5px;background:var(--raise);transition:background .3s}.s6-bar i.on{background:var(--indigo)}
.s6-hint{text-align:center;font-size:22px;margin-top:10px}
@media(max-width:820px){.s6{grid-template-columns:1fr}.s6-pin,.s6-hint{display:none}.s6-step{min-height:0;opacity:1;padding-bottom:48px}.s6-inline{display:block;margin-top:8px}}

.s6-badge{display:inline-block;justify-self:start;font-family:var(--f-mono);font-size:11px;color:var(--indigo);background:var(--indigo-dim);border:1px solid rgba(67,56,202,.22);border-radius:999px;padding:3px 10px}
.vl-dl .dl{width:15px;height:15px}
.s6-ex{text-align:center;font-family:var(--f-mono);font-size:10.5px;color:var(--faint);margin-top:12px}
@keyframes blink{50%{opacity:.3}}

/* =========================================================
   CAREERS
   ========================================================= */
.car-jump { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.roles2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1040px; margin-inline: auto; align-items: stretch; }
.role2 { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 22px; padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 90px; }
.role2__top { display: flex; justify-content: space-between; align-items: center; }
.role2__ico { width: 48px; height: 48px; border-radius: 14px; background: var(--indigo-dim); color: var(--indigo); display: grid; place-items: center; }
.role2__ico svg { width: 24px; height: 24px; }
.role2__ico--green { background: rgba(6, 199, 85, 0.12); color: #04893B; }
.role2 h3 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.02em; }
.role2__sum { color: var(--ink-2); font-size: 16px; }
.role2__nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.role2__nums > div { background: var(--bg-subtle); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.role2__nums b { font: 800 26px/1.1 var(--f-display); letter-spacing: -0.02em; color: var(--indigo); }
.role2__nums b small { font-size: 13px; margin-left: 2px; }
.role2__nums span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.role2__block { border-top: 1px solid var(--rule); padding-top: 16px; }
.role2__block h4 { margin: 0 0 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.role2__block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.role2__block li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 14.5px; line-height: 1.6; }
.role2__block li::before { content: "✓"; color: var(--indigo); font-weight: 700; }
.role2__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule); display: grid; gap: 12px; }
.role2__pay { font-size: 13.5px; color: var(--muted); }
.role2__foot .btn { justify-content: space-between; white-space: normal; text-align: left; line-height: 1.3; }
@media (max-width: 820px) { .roles2 { grid-template-columns: 1fr; } }
.terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1040px; margin-inline: auto; }
.term { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; padding: 22px 18px; display: grid; justify-items: center; gap: 12px; text-align: center; font-size: 14.5px; }
.term__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--indigo-dim); color: var(--indigo); display: grid; place-items: center; }
.term__ico svg { width: 21px; height: 21px; }
.terms__notes { list-style: none; margin: 28px auto 0; padding: 0; max-width: 720px; display: grid; gap: 8px; text-align: center; font-size: 13.5px; color: var(--muted); }
@media (max-width: 820px) { .terms { grid-template-columns: 1fr 1fr; } }
.proc { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.proc::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 26px; border-top: 2px dashed rgba(67, 56, 202, 0.4); }
.proc li { position: relative; display: grid; justify-items: center; gap: 12px; text-align: center; }
.proc__n { width: 52px; height: 52px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--indigo); color: var(--indigo); font: 700 18px var(--f-mono); display: grid; place-items: center; box-shadow: 0 0 0 6px var(--bg); }
.proc li:last-child .proc__n { background: var(--indigo); color: #fff; }
.proc b { font-size: 16px; }
@media (max-width: 560px) { .proc { grid-template-columns: 1fr 1fr; row-gap: 28px; } .proc::before { display: none; } }
.car-q { position: relative; max-width: 520px; margin: clamp(64px, 8vw, 96px) auto 0; text-align: center; background: var(--ruled); border: 1px solid var(--ruled-edge); padding: 30px 24px; transform: rotate(-0.6deg); box-shadow: var(--shadow-soft); display: grid; gap: 6px; }
.car-q__mail { font-size: 16px; color: var(--indigo); user-select: all; }
.car-q__date { font-size: 12px; color: var(--faint); margin-top: 6px; }
.car-q__note { position: absolute; right: -14px; top: -26px; font-size: 26px; transform: rotate(6deg); }

/* =========================================================
   WORK WITH US
   ========================================================= */
.ww-sec { max-width: 1040px; margin-inline: auto; }
.ww-sec__head { display: grid; gap: 10px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 760px; }
.ww-num { font: 800 clamp(40px, 6vw, 64px)/1 var(--f-display); color: var(--indigo); opacity: .16; letter-spacing: -0.04em; }
.ww-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ww-stat { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 18px; padding: 24px; display: grid; gap: 8px; }
.ww-stat b { font: 800 clamp(40px, 5vw, 56px)/1 var(--f-display); letter-spacing: -0.04em; color: var(--indigo); font-variant-numeric: tabular-nums; }
.ww-stat b small { font-size: .38em; margin-left: 3px; letter-spacing: 0; color: var(--muted); }
.ww-stat > span { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.ww-src { font-size: 11px; color: var(--muted); margin-top: 14px; line-height: 1.8; }
.ww-who { list-style: none; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.ww-who li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 15px; }
.ww-who li::before { content: "→"; color: var(--indigo); font-family: var(--f-mono); }
@media (max-width: 760px) { .ww-why { grid-template-columns: 1fr; } }
.ww-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.ww-offer { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 20px; padding: 26px; display: grid; gap: 12px; box-shadow: 0 2px 0 var(--raise); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ww-offer:hover { transform: translateY(-3px); border-color: var(--indigo); box-shadow: var(--shadow-lift); }
.ww-offer__top { display: flex; justify-content: space-between; align-items: center; }
.ww-offer__ico { width: 46px; height: 46px; border-radius: 13px; background: var(--indigo-dim); color: var(--indigo); display: grid; place-items: center; }
.ww-offer__ico svg { width: 23px; height: 23px; }
.ww-offer h3 { font-size: 21px; }
.ww-offer > p { color: var(--muted); font-size: 14.5px; }
.ww-offer__more { border-top: 1px solid var(--rule); padding-top: 12px; }
.ww-offer__more summary { cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; display: flex; justify-content: space-between; }
.ww-offer__more summary::-webkit-details-marker { display: none; }
.ww-offer__more summary::after { content: "[+]"; font-family: var(--f-mono); color: var(--muted); font-weight: 400; }
.ww-offer__more[open] summary::after { content: "[−]"; color: var(--indigo); }
.ww-offer__more ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.ww-offer__more li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; font-size: 13.5px; line-height: 1.55; }
.ww-offer__more li::before { content: "✓"; color: var(--indigo); font-weight: 700; }
.ww-offer__cta { font-weight: 600; font-size: 14px; color: var(--indigo); text-decoration: none; }
.ww-offer__cta:hover { text-decoration: underline; }
.ww-note { margin-top: 22px; font-size: 13.5px; color: var(--muted); text-align: center; }
@media (max-width: 900px) { .ww-offers { grid-template-columns: 1fr; } }
.proc small { font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 13em; }
.ww-mail { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
.ww-mail__q { font-weight: 600; margin-bottom: 14px; }
.ww-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.ww-pick button { border: 1.5px solid var(--rule-strong); background: var(--sheet); border-radius: 999px; padding: 9px 16px; font: 600 14px var(--f-body); color: var(--ink-2); cursor: pointer; transition: all .15s; }
.ww-pick button[aria-pressed="true"] { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.ww-pick__l { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.ww-pick--size button { font-family: var(--f-mono); font-size: 13px; padding: 7px 13px; }
.ww-mail__draft { position: relative; background: #fff; border: 1px solid var(--rule-strong); border-radius: 18px; box-shadow: var(--shadow-lift); overflow: hidden; }
.ww-mail__bar { display: flex; gap: 12px; align-items: baseline; padding: 14px 18px; background: var(--bg-subtle); border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
.ww-mail__bar b { color: var(--ink); font-weight: 500; font-size: 13.5px; user-select: all; }
.ww-mail__body { margin: 0; padding: 18px; font: 13.5px/1.9 var(--f-body); white-space: pre-wrap; color: var(--ink-2); min-height: 230px; }
.ww-mail__btns { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 18px; }
.ww-mail__note { position: absolute; right: 18px; top: 52px; font-size: 22px; transform: rotate(6deg); }
@media (max-width: 820px) { .ww-mail { grid-template-columns: 1fr; } }
.ww-close { text-align: center; margin-top: clamp(72px, 9vw, 120px); display: grid; gap: 8px; justify-items: center; }
.ww-close__mail { font-size: clamp(20px, 3vw, 30px); color: var(--indigo); user-select: all; word-break: break-all; }
.ww-close__fine { font-size: 13px; color: var(--muted); }

/* three supports: static rows (scroll story retired). Text left, still visual right, alternating. */
#support .s6 { grid-template-columns: minmax(0, 1fr); gap: clamp(64px, 9vw, 112px); max-width: 1040px; margin-inline: auto; }
#support .s6-pin { display: none; }
#support .s6-text { display: grid; gap: clamp(64px, 9vw, 112px); }
#support .s6-step { min-height: 0; opacity: 1; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 72px); row-gap: 12px; align-content: center; align-items: start; }
#support .s6-step > :not(.s6-inline) { grid-column: 1; }
#support .s6-inline { display: block; grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; }
#support .s6-step:nth-child(2) > :not(.s6-inline) { grid-column: 2; }
#support .s6-step:nth-child(2) .s6-inline { grid-column: 1; }
#support .s6-n { font-size: 44px; }
#support .s6-inline > * { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; box-shadow: var(--shadow-soft); }
#support .s6-inline > *:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
@media (max-width: 820px) {
  #support .s6-step, #support .s6-step:nth-child(2) { grid-template-columns: 1fr; }
  #support .s6-step > *, #support .s6-step:nth-child(2) > * { grid-column: 1 !important; }
  #support .s6-inline { grid-row: auto; margin-top: 8px; }
}

/* skill demo v2: TCEO built up in a Claude-style chat */
.cl--tceo { position: absolute; inset: 0; }
.cl__msgs { gap: 10px; }
.cl__me--tceo { max-width: 94%; display: grid; gap: 6px; padding: 10px; }
.pp { display: grid; grid-template-columns: 20px 1fr; column-gap: 7px; align-items: start; font-size: 11.5px; line-height: 1.5; border-radius: 8px; padding: 5px 6px; transition: background .3s, opacity .3s; }
.pp__k { grid-row: span 2; width: 20px; height: 20px; border-radius: 6px; background: #4338CA; color: #fff; font: 700 11px var(--f-mono); display: grid; place-items: center; }
.pp__l { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: #6B6A64; text-transform: uppercase; }
html[lang="ja"] .pp__l { text-transform: none; letter-spacing: 0; }
.pp:nth-child(2) .pp__k { background: #6366F1; } .pp:nth-child(3) .pp__k { background: #D97757; } .pp:nth-child(4) .pp__k { background: #059669; }
.demo[data-scene="1"] .pp[data-s="2"], .demo[data-scene="1"] .pp[data-s="3"], .demo[data-scene="1"] .pp[data-s="4"],
.demo[data-scene="2"] .pp[data-s="3"], .demo[data-scene="2"] .pp[data-s="4"], .demo[data-scene="3"] .pp[data-s="4"] { display: none; }
.demo[data-scene="1"] .pp[data-s="1"], .demo[data-scene="2"] .pp[data-s="2"], .demo[data-scene="3"] .pp[data-s="3"], .demo[data-scene="4"] .pp[data-s="4"] { background: rgba(255, 255, 255, .7); animation: o3pop .35s ease both; }
.cl__reply { display: none; }
.demo[data-scene="4"] .cl__reply { display: grid; animation: o3pop .4s ease .5s both; }
.cl__mail { background: #fff; border: 1px solid rgba(20, 20, 19, .1); border-radius: 12px; padding: 9px 11px; font-size: 11.5px; line-height: 1.6; display: grid; gap: 4px; }
.cl__mail b { font-size: 11.5px; }
.cl__save { justify-self: start; margin-top: 4px; font-size: 11px; font-weight: 600; color: #A84F2E; background: rgba(217, 119, 87, .12); border: 1px solid rgba(217, 119, 87, .4); border-radius: 999px; padding: 3px 9px; }
.scene-ctrls button > span:first-child { font-family: var(--f-mono); }
.demo[data-scene="4"] .pp:not([data-s="4"]) .pp__t { display: none; }
.demo[data-scene="4"] .pp:not([data-s="4"]) { grid-template-columns: 20px 1fr; align-items: center; padding: 2px 6px; }
.demo[data-scene="4"] .pp:not([data-s="4"]) .pp__k { grid-row: auto; }

/* =========================================================
   WORK WITH US v2: plain corporate layout for business owners
   ========================================================= */
.corp-page { background-image: none; }
.corp { font-size: 16.5px; }
html[lang="ja"] .corp { font-size: 16px; line-height: 2; }
.corp .wrap { max-width: 960px; }
.corp-head { padding-block: clamp(72px, 10vw, 120px) clamp(48px, 6vw, 72px); border-bottom: 1px solid var(--rule-strong); }
.corp-kicker { font-weight: 700; font-size: 14px; color: var(--indigo); letter-spacing: .08em; margin-bottom: 18px; }
.corp-head h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.4; letter-spacing: 0; }
.corp-lead { margin-top: 26px; max-width: 46em; color: var(--ink-2); font-size: 17px; }
html[lang="ja"] .corp-lead { font-size: 16.5px; line-height: 2.05; }
.corp-contact { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 18px 22px; background: var(--sheet); border: 1px solid var(--rule-strong); border-left: 4px solid var(--indigo); }
.corp-contact__l { font-weight: 700; font-size: 14px; }
.corp-contact__mail { font-family: var(--f-mono); font-size: clamp(17px, 2.2vw, 20px); color: var(--indigo); text-decoration: none; word-break: break-all; }
.corp-contact__mail:hover { text-decoration: underline; }
.corp-sec { padding-block: clamp(64px, 8vw, 104px); border-bottom: 1px solid var(--rule); }
.corp-sec h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: 0; line-height: 1.5; padding-left: 14px; border-left: 4px solid var(--indigo); margin-bottom: clamp(28px, 4vw, 40px); }
.corp-svc { display: grid; gap: 0; border-top: 1px solid var(--rule-strong); }
.corp-svc article { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; row-gap: 10px; padding: 30px 0; border-bottom: 1px solid var(--rule-strong); }
.corp-svc__n { grid-row: span 3; font: 700 22px var(--f-mono); color: var(--indigo); padding-top: 4px; }
.corp-svc h3 { font-size: 21px; letter-spacing: 0; }
.corp-svc p { color: var(--ink-2); }
.corp-svc ul, .corp-list { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; color: var(--ink); }
.corp-svc li::marker, .corp-list li::marker { color: var(--indigo); }
.corp-note { margin-top: 22px; color: var(--muted); font-size: 15px; }
.corp-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--rule-strong); background: var(--sheet); }
.corp-table th, .corp-table td { text-align: left; vertical-align: top; padding: 18px 20px; border-bottom: 1px solid var(--rule-strong); }
.corp-table th { width: 34%; font-weight: 600; font-size: 15px; background: var(--bg-subtle); }
.corp-table td b { display: block; font: 700 24px var(--f-display); color: var(--indigo); margin-bottom: 2px; }
.corp-table td a { color: var(--indigo); font-family: var(--f-mono); word-break: break-all; }
.corp-table caption { text-align: left; font-weight: 700; font-size: 17px; padding-bottom: 12px; }
.corp-table--co { margin-top: 44px; }
.corp-src { margin-top: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.corp-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.corp-flow li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); position: relative; }
.corp-flow li:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 70px; bottom: -22px; border-left: 2px solid var(--rule-strong); }
.corp-flow__n { width: 48px; height: 48px; border-radius: 50%; background: var(--indigo); color: #fff; font: 700 18px var(--f-mono); display: grid; place-items: center; position: relative; z-index: 1; }
.corp-flow h3 { font-size: 18px; letter-spacing: 0; }
.corp-flow p { color: var(--ink-2); }
.corp-p { color: var(--ink-2); margin-bottom: 14px; }
@media (max-width: 640px) {
  .corp-svc article { grid-template-columns: 1fr; }
  .corp-svc__n { grid-row: auto; padding: 0; }
  .corp-table th, .corp-table td { display: block; width: auto; }
  .corp-table th { border-bottom: 0; padding-bottom: 6px; }
}
.car-q__fine { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.8; max-width: 40em; margin-inline: auto; }

/* =========================================================
   CAREERS: apply pages
   ========================================================= */
.apply { padding-bottom: clamp(72px, 9vw, 120px); }
.apply-back { padding-top: 28px; font-size: 14px; }
.apply-back a { color: var(--muted); text-decoration: none; }
.apply-back a:hover { color: var(--indigo); }
.apply-head { text-align: center; padding-block: clamp(36px, 6vw, 64px) clamp(32px, 5vw, 52px); }
.apply-head h1 { margin-top: 18px; font-size: clamp(32px, 5vw, 54px); line-height: 1.2; }
.apply-head .lead { margin: 18px auto 0; max-width: 38em; }
.apply-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.apply-side { position: sticky; top: 88px; display: grid; gap: 16px; }
.apply-card { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 16px; padding: 22px 22px 20px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(17,24,39,.05)); }
.apply-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.apply-card__top b { font-size: 17px; }
.apply .apply-card__h { font: 600 11px var(--f-mono); line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.apply-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; line-height: 1.65; }
.apply-card__list li { position: relative; padding-left: 22px; }
.apply-card__list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 6px; border-left: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo); transform: rotate(-45deg); }
.apply-card__pay { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
.apply-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative; }
.apply-steps li { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; font-size: 14px; }
.apply-steps .proc__n { width: 30px; height: 30px; font-size: 13px; flex: none; }
.apply-steps em { margin-left: auto; font: 400 20px var(--f-hand); color: var(--indigo); transform: rotate(-4deg); }
.apply-steps li.is-now { background: var(--indigo-tint, rgba(67,56,202,.08)); }
.apply-steps li.is-now .proc__n { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.apply-q { font-size: 13px; color: var(--muted); padding: 4px 6px; line-height: 1.8; }
.apply-q a { color: var(--indigo); }
.apply-window { margin-top: 0; }
.apply-frame { position: relative; min-height: 1180px; background: #fff; }
.apply-frame iframe { display: block; width: 100%; height: 1500px; border: 0; position: relative; z-index: 1; background: transparent; }
.apply-frame__wait { position: absolute; inset: 0; padding: 40px clamp(20px, 5vw, 56px); display: grid; align-content: start; gap: 14px; }
.apply-frame.is-loaded .apply-frame__wait { display: none; }
.apply-frame__wait p { margin-top: 10px; font-size: 13px; color: var(--muted); }
.apply-sk { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #EEF0F4 0%, #F6F7FA 40%, #EEF0F4 80%); background-size: 200% 100%; animation: apply-sk 1.4s linear infinite; }
.apply-sk.w60 { width: 60%; height: 26px; } .apply-sk.w80 { width: 80%; } .apply-sk.w40 { width: 40%; } .apply-sk.tall { height: 44px; border-radius: 8px; }
@keyframes apply-sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .apply-sk { animation: none; } }
.apply-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.apply-open { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; color: var(--muted); }
.apply-open a { color: var(--indigo); font-weight: 600; font-size: 14px; }
.apply-privacy { margin: clamp(40px, 6vw, 64px) auto 0; max-width: 46em; text-align: center; font-size: 13px; line-height: 1.9; color: var(--muted); }
.apply-privacy a { color: var(--indigo); }
@media (max-width: 900px) {
  .apply-grid { grid-template-columns: 1fr; }
  .apply-side { position: static; order: 2; }
  .apply-form { order: 1; }
  .apply-frame { min-height: 900px; }
  .apply-frame iframe { height: 1700px; }
}

/* ---------- home #support 03: the library as something you can take ---------- */
.lib { display: grid; gap: 14px; box-shadow: none !important; transform: none !important; }
.lib-prompt { background: #fff; border: 1px solid var(--rule-strong); border-radius: 16px; box-shadow: var(--shadow-lift); overflow: hidden; }
.lib-prompt__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.lib-prompt__head b { font-size: 14.5px; }
.lib-kind { font: 600 10.5px var(--f-mono); letter-spacing: .06em; color: #fff; background: var(--indigo); border-radius: 6px; padding: 3px 7px; }
.lib-cat { margin-left: auto; font: 500 10.5px var(--f-mono); color: var(--muted); background: var(--bg-subtle); border-radius: 6px; padding: 3px 7px; }
.lib-prompt__body { margin: 0; padding: 16px 18px; font: 400 13px/1.75 var(--f-mono); color: var(--ink); white-space: pre-wrap; background: #FBFAF7; border-bottom: 1px solid var(--rule); }
html[lang="ja"] .lib-prompt__body { font-family: var(--f-mono), "Noto Sans JP", monospace; font-size: 12.5px; }
.lib-prompt__body b { color: var(--indigo); font-weight: 600; }
.lib-prompt__body mark { background: rgba(217,119,87,.16); color: #A4502F; border-radius: 4px; padding: 1px 4px; }
.lib-prompt__foot { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; font-size: 12.5px; color: var(--muted); }
.lib-copy { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: 600 13px var(--f-body); cursor: pointer; transition: background .2s, transform .15s; white-space: nowrap; }
.lib-copy svg { width: 15px; height: 15px; }
.lib-copy:hover { transform: translateY(-1px); }
.lib-copy:active { transform: scale(.97); }
.lib-copy__d { display: none; }
.lib-copy.is-done { background: var(--green); }
.lib-copy.is-done .lib-copy__t { display: none; }
.lib-copy.is-done .lib-copy__d { display: inline; }
.lib-skills { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 12px; align-items: stretch; }
.lib-files { background: #fff; border: 1px solid var(--rule-strong); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-soft); }
.lib-h { font: 600 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 2px 4px 8px; }
.lib-files ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lib-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 7px 7px 9px; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); transition: opacity .3s, background .3s; }
.lib-file__ico { width: 18px; height: 18px; color: var(--claude); }
.lib-file__name { font: 500 12px var(--f-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-add { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--rule-strong); background: #fff; color: var(--indigo); font: 600 11.5px var(--f-body); cursor: pointer; transition: all .2s; }
.lib-add:hover { border-color: var(--indigo); }
.lib-file.is-added { background: rgba(6,199,85,.06); }
.lib-file.is-added .lib-add { background: var(--green); border-color: var(--green); color: #fff; pointer-events: none; }
.lib-file.is-added .lib-add > * { display: none; }
.lib-file.is-added .lib-add::after { content: "✓"; }
.lib-agent { position: relative; display: grid; align-content: center; justify-items: center; gap: 6px; text-align: center; background: var(--ink); color: #fff; border-radius: 16px; padding: 14px 10px; box-shadow: var(--shadow-lift); }
.lib-agent img { width: 34px; height: 34px; background: #fff; border-radius: 10px; padding: 5px; box-sizing: content-box; }
.lib-agent b { font-size: 13px; }
.lib-agent__n { font: 700 26px var(--f-display); line-height: 1; }
.lib-agent__n i { font-style: normal; color: #8FD9A8; display: inline-block; }
.lib-agent__n i.bump { animation: lib-bump .4s ease; }
.lib-agent__t { font-size: 11px; color: rgba(255,255,255,.65); }
.lib-agent__arrow { position: absolute; left: -15px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 1px solid var(--rule-strong); color: var(--muted); font-size: 12px; display: grid; place-items: center; }
@keyframes lib-bump { 40% { transform: scale(1.35); } }
@media (max-width: 520px) {
  .lib-skills { grid-template-columns: 1fr; }
  .lib-agent { grid-template-columns: auto auto 1fr auto; justify-items: start; align-items: center; text-align: left; padding: 12px 14px; }
  .lib-agent__arrow { display: none; }
  .lib-agent__n { font-size: 20px; justify-self: end; }
  .lib-agent__t { display: none; }
  .lib-prompt__foot > span { display: none; }
}

/* =========================================================
   CAREERS v3: editorial layout (option 2) in the site's own look
   ========================================================= */
.ed-hero { padding-block: clamp(48px, 7vw, 88px) clamp(56px, 8vw, 96px); }
.ed-meta { display: flex; justify-content: space-between; gap: 12px; font: 500 11px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--rule-strong); margin-bottom: clamp(40px, 6vw, 80px); }
.ed-hero h1 { font-size: clamp(42px, 7.4vw, 104px); line-height: 1.08; letter-spacing: -.035em; max-width: 13em; }
html[lang="ja"] .ed-hero h1 { font-size: clamp(38px, 6.6vw, 92px); line-height: 1.25; letter-spacing: -.01em; }
.ed-hero__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: clamp(36px, 5vw, 56px); align-items: end; }
.ed-hero__row .proof { justify-content: flex-start; margin: 0; }
.ed-lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.8; color: var(--ink-2); max-width: 32em; }
.ed-hero .car-jump { margin-top: 22px; justify-content: flex-start; }
.ed-sec { padding-block: clamp(72px, 9vw, 120px) 0; }
.ed-sec > .label { display: block; margin-bottom: 12px; }
.ed-sec > h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.15; letter-spacing: -.03em; margin-bottom: clamp(28px, 4vw, 44px); }
.ed-role { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 48px); border-top: 1px solid var(--rule-strong); padding: clamp(36px, 5vw, 56px) 0 clamp(44px, 6vw, 72px); }
.ed-big { display: block; position: sticky; top: 96px; font: 800 clamp(96px, 15vw, 210px)/.82 var(--f-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--indigo); opacity: .55; }
.ed-role__title { display: flex; align-items: center; gap: 14px; }
.ed-role h3 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.2; letter-spacing: -.02em; }
.ed-sum { margin-top: 14px; font-size: 18px; line-height: 1.7; color: var(--ink-2); max-width: 34em; }
.ed-nums { display: flex; flex-wrap: wrap; margin: 28px 0 32px; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 16px; overflow: hidden; }
.ed-nums div { flex: 1 1 150px; padding: 18px 20px; border-right: 1px solid var(--rule); }
.ed-nums div:last-child { border-right: 0; }
.ed-nums b { display: block; font: 800 38px/1 var(--f-display); letter-spacing: -.03em; color: var(--indigo); }
.ed-nums b small { font-size: 15px; margin-left: 2px; }
.ed-nums span span { font-size: 12.5px; color: var(--muted); }
.ed-nums > div > span { display: block; margin-top: 6px; }
.ed-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.ed-cols h4 { font: 600 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--rule-strong); margin: 0 0 4px; }
.ed-cols ul { list-style: none; margin: 0; padding: 0; }
.ed-cols li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.65; }
.ed-chk { width: 16px; height: 16px; margin-top: .3em; color: var(--indigo); }
.ed-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 32px; }
.ed-foot p { font-size: 14px; color: var(--muted); }
.ed-proc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.ed-proc li { padding: 22px 0 6px 20px; border-left: 1px solid var(--rule-strong); }
.ed-proc li:first-child { border-left: 0; padding-left: 0; }
.ed-proc b { display: block; font: 800 clamp(48px, 6vw, 72px)/1 var(--f-display); letter-spacing: -.04em; color: var(--indigo); }
.ed-proc span { display: block; margin-top: 8px; font: 700 17px var(--f-display); }
.ed-q { position: relative; margin-top: clamp(64px, 8vw, 104px); margin-bottom: clamp(72px, 9vw, 120px); background: var(--ink); color: #fff; border-radius: 28px; padding: clamp(32px, 6vw, 64px); box-shadow: var(--shadow-lift); }
.ed-q__note { position: absolute; top: -18px; right: clamp(24px, 6vw, 64px); font-size: 28px; transform: rotate(-5deg); color: var(--indigo); background: var(--bg); padding: 0 10px; border-radius: 8px; }
.ed-q__big { font: 800 clamp(26px, 3.6vw, 44px)/1.2 var(--f-display); letter-spacing: -.02em; }
.ed-q__mail { display: inline-block; margin-top: 16px; font-size: clamp(17px, 2.4vw, 26px); color: #A5B4FC; word-break: break-all; text-decoration: none; }
.ed-q__mail:hover { text-decoration: underline; }
.ed-q__fine { margin-top: 16px; font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.6); max-width: 52em; }
.ed-q__fine + .ed-q__fine { margin-top: 4px; }
@media (max-width: 820px) {
  .ed-hero__row { grid-template-columns: 1fr; gap: 18px; }
  .ed-hero__row .proof { order: 2; }
  .ed-role { grid-template-columns: 1fr; gap: 4px; }
  .ed-big { position: static; font-size: 88px; }
  .ed-cols { grid-template-columns: 1fr; }
  .ed-proc { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .ed-proc li:nth-child(3) { border-left: 0; padding-left: 0; }
  .ed-foot .btn { width: 100%; justify-content: center; text-align: center; }
  .ed-meta span:nth-child(3) { display: none; }
}
html[lang="ja"] .ed-sec > h2 { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.35; letter-spacing: 0; }
html[lang="ja"] .ed-role h3 { font-size: clamp(24px, 3vw, 36px); letter-spacing: 0; }
html[lang="ja"] .ed-q__big { letter-spacing: 0; line-height: 1.4; }
.offer__cta[aria-disabled="true"] { cursor: default; }