/* インド進出ナビ — one face (IBM Plex Sans JP), navy on white, tangerine on the one action.
   Tokens come from the dealt direction sheet (.taste-skill/direction.json). No gradients, no hairlines,
   no shadows at rest; surfaces are separated by a step in tone. Interface fragments marked data-ui
   follow the product's own conventions. */

:root {
  --bg: #ffffff;
  --surface: #f4f4f2;
  --surface-2: #e9e9e5;
  --ink: #1f2b4d;
  --muted: #3f4759;
  --accent: #f7941d;
  --accent-ink: #1f2b4d;
  --field-1: #05070a;
  --field-1-ink: #ffffff;
  --field-2: #e3e1dc;
  --field-2-ink: #1f2b4d;
  --danger: #b42318;
  --ok: #067647;

  --font: "IBM Plex Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --step-small: 0.9375rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-hero: clamp(2.25rem, 1rem + 3vw, 3.5rem);
  --step-statement: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);

  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(4rem, 7vw, 7rem);
  --radius: 4px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --stagger-line: 90ms;
  --stagger-item: 70ms;
}

/* ---------- reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; line-height: 1.15; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
p + p { margin-top: 0.8em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: var(--step-small); line-height: 1.5; }
.nums { font-variant-numeric: tabular-nums; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: .5rem .8rem; z-index: 20; }
.skip-link:focus { left: var(--margin); }
.only-wide { display: none; }
@media (min-width: 901px) { .only-wide { display: inline; } }

/* ---------- the bar ---------- */
.bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 0 var(--margin); }
.bar__mark { font-weight: 500; text-decoration: none; font-size: 1.05rem; white-space: nowrap; }
.bar__right { display: none; align-items: center; gap: .6rem; }
.bar__menu { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.6rem; padding: 0 .8rem; background: var(--surface); border: 0; border-radius: var(--radius); font-size: var(--step-small); cursor: pointer; }
.bar__menu[aria-expanded="true"] { background: var(--ink); color: #fff; }
.bar__menu-icon { display: inline-grid; gap: 3px; width: 16px; }
.bar__menu-icon i { display: block; height: 2px; background: currentColor; border-radius: 1px; }
.bar__nav { display: flex; align-items: center; gap: 1.1rem; }
.bar__link { text-decoration: none; font-size: var(--step-small); padding: .4rem 0; white-space: nowrap; transition: color var(--t-hover) ease; }
.bar__link:hover { color: var(--muted); }
.bar__button { background: none; border: 0; padding: 0; cursor: pointer; }
.bar__cta { display: none; }
@media (max-width: 767px) {
  .bar__right { display: flex; }
  .bar__cta { display: inline-flex; }
  .bar__cta--wide { display: none; }
  .bar__nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: .3rem 0 .8rem; }
  .bar__nav.is-open { display: flex; }
  .bar__nav .bar__link { display: block; padding: .7rem .2rem; font-size: 1.05rem; }
  .bar__nav form { display: block; }
}

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.3rem; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:hover { background: #e9870f; }
.button:active { transform: scale(0.97); }
.button--small { min-height: 2.4rem; padding: 0 1rem; font-size: var(--step-small); }
.button--ghost { background: var(--surface-2); color: var(--ink); }
.button--ghost:hover { background: #dedcd6; }
.link { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: .07em; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); transition: text-decoration-color var(--t-hover) ease; }
.link:hover { text-decoration-color: currentColor; }
.link-button { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
form.inline { display: inline; }
.field, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="datetime-local"], select, textarea {
  width: 100%; min-height: 3rem; padding: .65rem .9rem; background: var(--surface); border: 0; border-radius: var(--radius); font-size: max(1rem, var(--step-body)); color: var(--ink);
}
textarea { min-height: 6rem; }
.field-block { margin-bottom: 1.1rem; }
.field-block label, .field-block legend, .field label, .field legend { display: block; font-weight: 500; margin-bottom: .35rem; }
.field { margin-bottom: 1.1rem; }
.field small { display: block; margin-top: .3rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.checkbox { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; margin-right: 1rem; min-height: 2.2rem; }
.checkbox input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; }
.checkbox-grid, .topics__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .1rem .5rem; }
.errors { background: #fdeceb; color: var(--danger); padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.errors ul { padding-left: 1.1rem; }
.flashes { padding: 1rem var(--margin) 0; }
.flash { padding: .7rem 1rem; border-radius: var(--radius); margin: 0 0 .5rem; }
.flash-notice { background: #e6f4ec; color: var(--ok); }
.flash-alert { background: #fdeceb; color: var(--danger); }

/* ---------- inner pages (search, categories, guides, auth, mypage) ---------- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--margin); }
.page { padding: clamp(2rem, 5vw, 4rem) var(--margin) var(--section); max-width: 1120px; margin: 0 auto; }
.narrow { max-width: 560px; }
.lead { font-size: var(--step-lead); line-height: 1.4; max-width: 44ch; }
h1.page-title, .page h1 { font-size: var(--step-head); margin-bottom: 1rem; }
.page h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: .8rem; }
.breadcrumb { font-size: var(--step-small); color: var(--muted); margin: 0 0 1.2rem; }
.resource-list { display: grid; gap: .6rem; }
.resource { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.2rem; transition: background-color var(--t-hover) ease; }
.resource:hover { background: var(--surface-2); }
.resource h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: 1.05rem; margin-bottom: .2rem; }
.resource .host { color: var(--muted); font-size: var(--step-small); font-weight: 400; }
.resource .operator { font-size: var(--step-small); color: var(--muted); }
.resource .desc { margin: .2rem 0 .5rem; }
.badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.badge { font-size: 13px; padding: .15rem .55rem; border-radius: var(--radius); background: var(--bg); color: var(--muted); }
.badge-free { color: var(--ok); }
.badge-paid { color: var(--danger); }
.badge-broken { color: #fff; background: var(--danger); }
.actions { display: flex; gap: 1rem; font-size: var(--step-small); margin: 0; }
.subcategory { margin-top: 2.2rem; }
.search-form .filters { background: var(--surface); padding: 1rem 1.2rem; border-radius: var(--radius); margin-top: .5rem; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem 1rem; }
.filter-grid .field { margin-bottom: .6rem; }
.filter-grid select { background: var(--bg); }
.results-count { margin: 1.2rem 0 .8rem; }
.search__genres-title { font-size: 1.15rem; margin-top: 1.8rem; }
.search__genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .4rem 1rem; margin-top: .6rem; }
.pagination { display: flex; gap: 1rem; align-items: center; margin: 1.5rem 0; }
.bookmark-list li { margin: .5rem 0; }
.profile { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
.profile dt { font-weight: 500; }
.prose p { margin-bottom: 1rem; max-width: 65ch; }
.prose h2 { margin-top: 2rem; font-size: 1.35rem; }
.prose h3 { margin-top: 1.4rem; font-size: 1.1rem; }
.prose ol, .prose ul { margin-bottom: 1rem; padding-left: 1.3rem; max-width: 65ch; }
.prose li { margin: .3rem 0; }
.prose blockquote { background: var(--surface); margin: 1rem 0; padding: .8rem 1.2rem; border-radius: var(--radius); color: var(--muted); }
.prose code { background: var(--surface); padding: .1rem .35rem; border-radius: var(--radius); font-size: .92em; }
.prose pre { background: var(--surface); padding: .8rem 1rem; overflow-x: auto; border-radius: var(--radius); }
.guide-list { display: grid; gap: .6rem; }
.guide-item { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.2rem; }
.guide-item h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.guide-meta { font-size: var(--step-small); color: var(--muted); margin-bottom: .3rem; }
.guide .prose { max-width: 760px; }
.related { margin-top: 2.5rem; }
.sources { margin-top: 2.5rem; background: var(--surface); border-radius: var(--radius); padding: 1rem 1.2rem; max-width: 760px; }
.sources h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.sources ul { padding-left: 1.2rem; }
.sources li { margin: .25rem 0; }
.stacked-form { margin-bottom: 1.5rem; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: .6rem .7rem; }
thead th { background: var(--surface); font-weight: 500; }
tbody tr:nth-child(even) td, tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--surface) 55%, transparent); }
/* admin */
.admin .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.admin .stats div { background: var(--surface); border-radius: var(--radius); padding: .9rem 1rem; }
.admin .stats dt { color: var(--muted); font-size: var(--step-small); }
.admin .stats dd { font-size: 1.6rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.inline-form input, .inline-form select { width: auto; }
.admin-table td .link-button { display: block; margin-bottom: .3rem; }

/* ---------- landing: first screen ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) var(--margin) clamp(2rem, 4vw, 3rem); }
.hero__inner { max-width: 1120px; margin: 0 auto; }
.hero__title { font-size: var(--step-hero); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; margin-bottom: 1rem; }
.hero__lead { font-size: max(18px, var(--step-body)); line-height: 1.55; max-width: 46ch; margin-bottom: 1.6rem; }
.hero__search { max-width: 720px; }
.hero__search-label { display: block; font-weight: 500; margin-bottom: .4rem; }
.hero__search-row { display: flex; gap: .5rem; }
.hero__input { flex: 1; min-height: 3.2rem; font-size: 1.1rem; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .9rem; }
.chips__label { color: var(--muted); font-size: var(--step-small); margin-right: .2rem; }
.chip { display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0 .85rem; background: var(--surface); border-radius: 999px; text-decoration: none; font-size: var(--step-small); transition: background-color var(--t-hover) ease; }
.chip:hover { background: var(--surface-2); }
@media (max-width: 640px) {
  .hero__search-row { flex-direction: column; }
}

/* ---------- landing: the 13 genres by stage ---------- */
.stages { padding: 0 var(--margin) clamp(3rem, 6vw, 5rem); }
.stages__title { max-width: 1120px; margin: 0 auto 1.2rem; font-size: 1.35rem; }
.stages__grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); }
.stage { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.1rem; }
.stage__name { font-size: 1.05rem; margin-bottom: .6rem; }
.stage__genres { display: grid; gap: .35rem; }
.stage__genres li { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; font-size: var(--step-small); line-height: 1.4; }
.stage__genres a { text-decoration: none; }
.stage__genres a:hover { text-decoration: underline; text-underline-offset: .15em; }
.stage__n { color: var(--muted); }
@media (max-width: 900px) { .stages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stages__grid { grid-template-columns: 1fr; } }

/* ---------- landing: capabilities (statement + fragment rows) ---------- */
.caps { padding: clamp(2rem, 4vw, 3rem) var(--margin) 0; max-width: 1120px; margin: 0 auto; }
.caps__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); max-width: 20ch; margin-bottom: 1.2rem; }
.caps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.cap { display: grid; gap: .8rem; }
.cap__claim { font-size: 1.3rem; font-weight: 500; line-height: 1.3; margin-bottom: .4rem; }
.cap__support { margin-bottom: .4rem; }
.frag { background: var(--surface); border-radius: var(--radius); padding: 16px 20px; font-size: 15px; line-height: 1.45; }
.frag__title { font-weight: 500; margin-bottom: 10px; }
.frag__host { color: var(--muted); font-weight: 400; margin-left: .4rem; }
.frag__text { margin-bottom: 10px; }
.frag__steps { padding-left: 1.3rem; display: grid; gap: 6px; max-width: 60ch; }
.frag__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.frag__badges span { background: var(--bg); padding: 3px 9px; border-radius: var(--radius); color: var(--muted); }
.frag__foot { margin-top: 12px; }
.frag__foot a { text-decoration: underline; text-underline-offset: .15em; }
.frag__code { font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); letter-spacing: .06em; font-weight: 500; margin-bottom: 14px; }
.frag__parts { display: grid; gap: 6px; }
.frag__parts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 8px; background: var(--bg); padding: 5px 8px; border-radius: var(--radius); }
.frag__parts dt { font-weight: 500; }
@media (max-width: 900px) { .caps__grid { grid-template-columns: 1fr; } }

figure img { width: 100%; border-radius: var(--radius); object-fit: cover; }
figcaption { font-size: var(--step-small); color: var(--muted); margin-top: .5rem; }

/* ---------- landing: the band ---------- */
.band { position: relative; margin-top: clamp(3rem, 5vw, 4rem); min-height: 52vh; display: grid; align-items: end; overflow: clip; color: var(--field-1-ink); }
.band__picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.band__text { position: relative; padding: 4rem var(--margin) 2.5rem; width: 100%; max-width: calc(1120px + 2 * var(--margin)); margin: 0 auto; background: linear-gradient(to top, rgba(5, 7, 10, .78), rgba(5, 7, 10, 0)); /* taste-skill-ignore: scrim under text on a photograph */ }
.band__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); max-width: 16ch; margin-bottom: .8rem; }
.band__support { max-width: 40ch; margin-bottom: 1.2rem; font-size: var(--step-lead); line-height: 1.4; }
.band .button--ghost { background: var(--bg); color: var(--ink); }
.band__caption { position: absolute; top: 1rem; right: var(--margin); max-width: 40ch; text-align: right; font-size: var(--step-small); color: #fff; background: rgba(5, 7, 10, .55); padding: .3rem .7rem; border-radius: var(--radius); }

/* ---------- landing: proof (dark field) ---------- */
.proof { margin-top: 0; background: var(--field-1); color: var(--field-1-ink); padding: clamp(2.5rem, 4vw, 3.5rem) var(--margin); }
.proof__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; max-width: 1120px; margin: 0 auto; }
.proof__text { grid-column: 1 / 7; }
.proof__picture { grid-column: 8 / 13; }
.proof__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: 1.4rem; }
.proof__list { display: grid; gap: 1.6rem; margin-bottom: 1.6rem; }
.proof__date { font-size: var(--step-small); color: #c9cdd6; margin-top: .4rem; }
.proof__claim { font-size: var(--step-statement); font-weight: 500; line-height: 1.3; max-width: 24ch; }
.proof__body { max-width: 44ch; margin-top: .5rem; color: #e5e7ec; }
.proof .link { color: #fff; }
.proof figcaption { color: #b9bec9; }
@media (max-width: 900px) {
  .proof__grid { display: block; }
  .proof__picture { margin-top: 2rem; }
}

/* ---------- landing: digest ---------- */
.digest { background: var(--surface); padding: clamp(2.5rem, 4vw, 3.5rem) var(--margin); }
.digest__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; max-width: 1120px; margin: 0 auto; }
.digest__text { grid-column: 1 / 7; }
.digest__picture { grid-column: 8 / 13; }
.digest__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: .8rem; }
.digest__lead { line-height: 1.5; max-width: 44ch; margin-bottom: 1.4rem; }
.digest .field, .digest select { background: var(--bg); }
.digest__row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.digest .topics__grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 640px) { .digest__row { grid-template-columns: 1fr; } }
.digest .topics__grid { background: var(--bg); padding: .6rem .8rem; border-radius: var(--radius); }
@media (max-width: 900px) {
  .digest__grid { display: block; }
  .digest__picture { margin-top: 2rem; }
}

/* ---------- landing: plans ---------- */
.plans { padding: clamp(2.5rem, 4vw, 3.5rem) var(--margin); max-width: 1120px; margin: 0 auto; }
.plans__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: .6rem; }
.plans__lead { max-width: 60ch; margin-bottom: 1.4rem; line-height: 1.5; }
.plans__wrap { overflow-x: auto; }
.plans__table th, .plans__table td { padding: .55rem .8rem; vertical-align: top; }
.plans__table thead th { background: var(--surface); font-weight: 500; font-size: 1rem; }
.plans__table tbody th { font-weight: 500; }
.plans__table .plans__hl { background: #fff4e6; }
.plans__table tbody tr:nth-child(even) td, .plans__table tbody tr:nth-child(even) th { background: transparent; }
.plans__table tbody tr:nth-child(even) .plans__hl { background: #fff4e6; }
.plans__table tfoot td { padding-top: 1rem; }
.plans__sub { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.planned { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .9rem; }
.planned__item { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; align-items: baseline; background: var(--surface); padding: .55rem .8rem; border-radius: var(--radius); }
.planned__badge { font-size: 13px; padding: .1rem .5rem; background: var(--bg); color: var(--muted); border-radius: 999px; white-space: nowrap; }
.planned__label { font-weight: 500; }
.planned__note { grid-column: 2; color: var(--muted); font-size: var(--step-small); }
@media (max-width: 900px) { .planned { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .planned { grid-template-columns: 1fr; } }

/* ---------- the close ---------- */
.close { background: var(--field-2); color: var(--field-2-ink); padding: clamp(2rem, 4vw, 3rem) var(--margin) 1.5rem; margin-top: 0; }
.close__name { font-size: clamp(2.2rem, 1rem + 4.5vw, 4.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; margin: 0 auto 1.4rem; max-width: 1120px; }
.close__credits, .close__copy { max-width: 1120px; margin-inline: auto; }
.close__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; margin-bottom: 2rem; max-width: 1120px; margin-inline: auto; }
.close__tagline { grid-column: 1 / 6; max-width: 32ch; }
.close__links { grid-column: 7 / 13; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.close__links a { text-decoration: none; }
.close__links a:hover { text-decoration: underline; text-underline-offset: .2em; }
.close__credits { color: var(--ink); max-width: 70ch; margin-bottom: .6rem; font-size: var(--step-body); }
.close__credits a { color: inherit; }
.close__copy { color: var(--muted); }
@media (max-width: 900px) {
  .close__grid { display: block; }
  .close__links { margin-top: 1rem; }
}

/* ---------- motion: the one animation on the page, the first screen settling in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero [data-load] { opacity: 0; transform: translateY(10px); animation: load-rise 480ms var(--ease-out) forwards; animation-delay: var(--d); }
}
@keyframes load-rise { to { opacity: 1; transform: none; } }

/* plans on a phone: each row becomes a block with its three values */
@media (max-width: 700px) {
  .plans__wrap { overflow: visible; }
  .plans__table, .plans__table tbody, .plans__table tr, .plans__table th, .plans__table td, .plans__table tfoot { display: block; }
  .plans__table thead { display: none; }
  .plans__table tbody tr { background: var(--surface); border-radius: var(--radius); padding: .6rem .8rem; margin-bottom: .6rem; }
  .plans__table tbody th { padding: 0 0 .4rem; }
  .plans__table tbody td { padding: .2rem 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; }
  .plans__table tbody td::before { content: attr(data-plan); color: var(--muted); font-size: var(--step-small); }
  .plans__table tbody tr:nth-child(even) td, .plans__table tbody tr:nth-child(even) th, .plans__table .plans__hl { background: transparent; }
  .plans__table tfoot tr { display: flex; flex-wrap: wrap; gap: .8rem; }
  .plans__table tfoot td { padding: .4rem 0; }
  .plans__table tfoot td:empty { display: none; }
}

/* ---------- guides, glossary, faq ---------- */
.hero__roadmap { margin-top: 1rem; }
.guides__search { display: flex; gap: .5rem; max-width: 640px; margin: 1rem 0; }
.guides__search input { flex: 1; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .8rem 0 1.2rem; }
.chip.is-on { background: var(--ink); color: #fff; }
.guides__stage { margin-top: 2.5rem; }
.guides__stage > h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.guides__category { font-size: 1rem; color: var(--muted); margin: 1.2rem 0 .5rem; font-weight: 500; }
.guides__category a { text-decoration: none; }
.guide-item h4 { font-size: 1.1rem; margin-bottom: .2rem; }
.guide-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.guide-toc { position: sticky; top: 1rem; }
.toc { background: var(--surface); border-radius: var(--radius); padding: .8rem 1rem; font-size: var(--step-small); }
.toc summary { cursor: pointer; font-weight: 500; }
.toc__list { padding-left: 1.2rem; margin-top: .6rem; display: grid; gap: .3rem; }
.toc__list a { text-decoration: none; }
.toc__list a:hover { text-decoration: underline; text-underline-offset: .15em; }
.key-points { background: #fff4e6; border-radius: var(--radius); padding: 1rem 1.3rem; margin: 1.2rem 0 1.6rem; }
.key-points h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.key-points .prose ul { margin-bottom: 0; }
.prose a.term { text-decoration: none; border-bottom: 1px dotted currentColor; }
.prose a.term abbr { text-decoration: none; }
.prose table { display: block; overflow-x: auto; font-size: var(--step-small); }
.prose th, .prose td { padding: .45rem .6rem; }
.prose thead th { background: var(--surface); }
.prose tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.guide-faq, .related-guides { margin-top: 2.5rem; max-width: 760px; }
.faq-item { background: var(--surface); border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: .5rem; }
.faq-item summary { cursor: pointer; font-weight: 500; }
.faq-item__body, .faq-item > p { margin-top: .6rem; }
.faq-item__anchor { color: var(--muted); text-decoration: none; margin-left: .3rem; font-weight: 400; }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.guide-card { background: var(--surface); border-radius: var(--radius); padding: .8rem 1rem; }
.guide-card h3 { font-size: 1rem; margin-bottom: .2rem; }
.guide-card a { text-decoration: none; }
.az { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 1.5rem; }
.az a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; min-height: 2.2rem; background: var(--surface); border-radius: var(--radius); text-decoration: none; font-weight: 500; }
.glossary__letter { margin-top: 2rem; }
.glossary__letter > h2 { font-size: 1.3rem; }
.glossary { display: grid; gap: .6rem; }
.glossary__entry { background: var(--surface); border-radius: var(--radius); padding: .8rem 1rem; scroll-margin-top: 1rem; }
.glossary__entry dt { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: baseline; margin-bottom: .3rem; }
.glossary__term { font-weight: 500; text-decoration: none; font-size: 1.05rem; }
.glossary__ja { font-weight: 500; }
.glossary__reading { font-size: var(--step-small); }
.glossary__entry dd { margin: 0; }
.faq__group { margin-top: 2rem; }
.faq__group > h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.search__tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.search__tabs a { display: inline-flex; gap: .4rem; align-items: center; padding: .4rem .9rem; background: var(--surface); border-radius: 999px; text-decoration: none; font-size: var(--step-small); }
.search__section { margin-top: 1.5rem; }
.search__section > h2 { font-size: 1.2rem; margin-bottom: .6rem; }
.faq-results li { margin: .5rem 0; }
.admin-table tr.is-stale .admin-verified { color: var(--danger); font-weight: 500; }
.admin-stale { font-size: 13px; background: #fdeceb; color: var(--danger); padding: .1rem .5rem; border-radius: 999px; }
@media (max-width: 900px) {
  .guide-layout { display: block; }
  .guide-toc { position: static; margin-bottom: 1rem; }
}