:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --text: #172033;
  --muted: #64748b;
  --line: #dbe3ef;
  --brand: #1665d8;
  --brand-dark: #0d4fae;
  --ok: #0f7b4d;
  --warn: #b36200;
  --danger: #b42318;
  --soft: #eef5ff;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif; line-height: 1.6; }
button, input, select, textarea { font: inherit; }
.wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-size: 1.25rem; font-weight: 800; letter-spacing: .01em; }
.tagline { color: var(--muted); font-size: .85rem; }
.privacy-badge { color: var(--ok); background: #eefbf5; border: 1px solid #ccebdc; border-radius: 999px; padding: 6px 10px; font-size: .86rem; }
.hero { padding: 52px 0 26px; }
.eyebrow { color: var(--brand); font-weight: 800; margin: 0 0 8px; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.16; margin: 0 0 16px; letter-spacing: -.03em; }
.lead { max-width: 820px; color: #40506a; font-size: 1.08rem; margin: 0; }
.mode-tabs { display: flex; gap: 8px; margin: 10px 0 14px; }
.tab { border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 10px; padding: 10px 16px; cursor: pointer; font-weight: 700; }
.tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 8px 24px rgba(21, 42, 75, .05); margin-bottom: 22px; }
.soft { background: linear-gradient(180deg, #fff, #f8fbff); }
.two-col, .file-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-card, .file-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff; }
.field-title { font-weight: 800; display: block; margin-bottom: 8px; }
textarea { width: 100%; resize: vertical; border: 1px solid #b8c5d8; border-radius: 10px; padding: 12px; min-height: 130px; outline: none; }
textarea:focus, select:focus, input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,101,216,.12); outline: none; }
.helper, .small, .muted { color: var(--muted); font-size: .88rem; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
button { cursor: pointer; }
.primary, .secondary { border-radius: 10px; padding: 11px 17px; font-weight: 800; border: 1px solid transparent; }
.primary { background: var(--brand); color: #fff; }
.primary:hover { background: var(--brand-dark); }
.primary:disabled { opacity: .5; cursor: not-allowed; }
.secondary { background: #fff; border-color: var(--line); color: var(--text); }
.result-area { margin-top: 20px; }
.result-head { border-radius: 14px; padding: 16px; border: 1px solid var(--line); background: #fbfdff; }
.result-head.ok { border-color: #b9e1ce; background: #f0fbf6; }
.result-head.warn { border-color: #f0cf9f; background: #fff9ef; }
.result-head.danger { border-color: #efc1bc; background: #fff6f5; }
.result-title { font-size: 1.25rem; font-weight: 900; margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.chip { border: 1px solid #b8ccec; background: #eff5ff; color: #174b8c; padding: 5px 9px; border-radius: 999px; font-size: .86rem; font-weight: 700; }
.visual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.visual-card { border: 1px solid var(--line); border-radius: 12px; padding: 13px; min-width: 0; }
.visual-value { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; background: #f7f9fc; padding: 10px; border-radius: 8px; margin: 7px 0; }
.code-list { max-height: 160px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; color: #52617a; }
.finding-list { display: grid; gap: 10px; margin-top: 14px; }
.finding { border-left: 4px solid var(--brand); background: #f8fbff; padding: 10px 12px; border-radius: 6px 10px 10px 6px; }
.finding strong { display: inline-block; margin-right: 8px; }
.fix-box { border: 1px solid #b9e1ce; background: #f0fbf6; border-radius: 12px; padding: 13px; margin-top: 14px; }
.fix-row { display: flex; gap: 8px; align-items: center; }
.fix-row code { flex: 1; overflow-wrap: anywhere; }
.notice { padding: 12px 14px; border-radius: 10px; background: var(--soft); color: #315079; margin-bottom: 16px; }
.file-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.badge { min-width: 30px; width: auto; padding: 0 8px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 900; }
.file-meta { margin-top: 10px; min-height: 46px; }
.file-controls { margin-top: 12px; display: grid; gap: 10px; }
.file-controls label { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; font-size: .9rem; }
.file-controls select, .file-controls input { width: 100%; border: 1px solid #b8c5d8; border-radius: 8px; padding: 8px; background: #fff; }
.summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0; }
.metric { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; }
.metric .n { font-size: 1.6rem; font-weight: 900; line-height: 1.1; }
.metric .label { color: var(--muted); font-size: .82rem; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; min-width: 900px; font-size: .86rem; }
th, td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
th { position: sticky; top: 0; background: #f3f6fb; z-index: 1; }
.status { font-weight: 800; }
.status.exact { color: var(--ok); }
.status.diagnosed { color: var(--warn); }
.status.missing, .status.ambiguous { color: var(--danger); }
.cause-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cause-grid div { padding: 10px; border-radius: 9px; background: #f4f7fb; border: 1px solid var(--line); font-size: .9rem; }
.site-footer { color: var(--muted); padding: 12px 0 34px; font-size: .85rem; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.error-box { border: 1px solid #efc1bc; background: #fff6f5; color: var(--danger); border-radius: 10px; padding: 12px; }
@media (max-width: 760px) {
  .two-col, .file-grid, .visual-grid { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .cause-grid { grid-template-columns: 1fr 1fr; }
  .header-inner { align-items: flex-start; padding: 13px 0; flex-direction: column; }
  .hero { padding-top: 34px; }
  .panel { padding: 15px; }
}

/* v0.1.1: verdict-first results and beginner-friendly glossary */
.header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.header-link, .term-link { color: var(--brand); text-decoration: none; font-weight: 700; }
.header-link:hover, .term-link:hover { text-decoration: underline; }
.brand-link { color: inherit; text-decoration: none; }
.verdict-box { border: 2px solid var(--line); border-radius: 16px; padding: 18px 20px; margin-bottom: 12px; background: #fff; }
.verdict-box.ok { border-color: #86d0ae; background: #eefaf4; }
.verdict-box.warn { border-color: #e9b86e; background: #fff8ed; }
.verdict-box.danger { border-color: #e7a7a1; background: #fff5f4; }
.verdict-label { font-size: .82rem; font-weight: 800; color: var(--muted); margin-bottom: 2px; }
.verdict-main { font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.25; font-weight: 900; }
.verdict-box.ok .verdict-main { color: var(--ok); }
.verdict-box.warn .verdict-main { color: var(--warn); }
.verdict-box.danger .verdict-main { color: var(--danger); }
.verdict-note { margin-top: 6px; color: #40506a; }
.finding-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.finding-help { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 7px; }
.technical-term { color: var(--muted); font-size: .8rem; }
.glossary-main { padding-bottom: 28px; }
.glossary-hero { padding-bottom: 18px; }
.glossary-index { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; }
.glossary-index a { color: #174b8c; background: #eff5ff; border: 1px solid #c7d8f1; border-radius: 999px; padding: 6px 10px; text-decoration: none; font-size: .9rem; font-weight: 700; }
.glossary-index a:hover { background: #e3efff; }
.glossary-list { display: grid; gap: 14px; }
.glossary-card { scroll-margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 6px 18px rgba(21,42,75,.04); }
.glossary-card:target { border-color: #86b5ef; box-shadow: 0 0 0 3px rgba(22,101,216,.08); }
.glossary-card h2 { margin: 0 0 8px; font-size: 1.25rem; }
.glossary-card p { margin: 8px 0; }
.technical-note { color: var(--muted); font-size: .9rem; }
@media (max-width: 760px) {
  .header-actions { align-items: flex-start; }
  .verdict-box { padding: 15px; }
}

/* v0.2.0: safer diagnosis and practical file comparison */
.mode-note { margin-top: 14px; padding: 11px 13px; border-radius: 10px; background: #f7f9fc; border: 1px solid var(--line); color: #52617a; font-size: .88rem; }
.column-preview { margin-top: 2px; padding: 9px 10px; border-radius: 8px; background: #f7f9fc; color: #40506a; font-size: .84rem; min-height: 42px; }
.file-error { color: var(--danger); font-weight: 700; }
.result-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; }
.result-list-head h3 { margin-bottom: 6px; }
.result-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; }
.result-filter { border: 1px solid var(--line); background: #fff; color: #40506a; border-radius: 999px; padding: 6px 10px; font-size: .82rem; font-weight: 700; }
.result-filter:hover { border-color: #9bbbe5; }
.result-filter.active { background: #eaf2ff; border-color: #8eb4e8; color: #174b8c; }
.status.onlyb { color: #7c3aed; }
.empty-table { color: var(--muted); text-align: center; padding: 22px; }

/* v0.2.1: clearer file terminology and reset action */
.result-guide { margin: 0 0 12px; padding: 11px 13px; border: 1px solid #c9d9ee; border-radius: 10px; background: #f7fbff; color: #40506a; font-size: .88rem; }
.result-guide strong { color: var(--text); display: block; margin-bottom: 2px; }

/* v0.3.1: XLSX type-aware diagnosis */
.type-summary { margin-top: 7px; color: #40506a; font-size: .8rem; line-height: 1.6; }
.type-chip { display: inline-block; margin: 3px 4px 0 0; padding: 2px 7px; border-radius: 999px; background: #eef3f9; border: 1px solid #d6e0ed; color: #40506a; font-weight: 700; }
.type-warning { display: inline-block; margin-top: 4px; color: #9a5b05; font-weight: 700; }
.file-value { overflow-wrap: anywhere; }
.value-type { display: block; width: fit-content; margin-top: 4px; padding: 2px 6px; border-radius: 6px; background: #f1f4f8; color: #64748b; font-size: .72rem; font-weight: 700; }
.chip-link { text-decoration: none; }
.chip-link:hover { background: #e2eeff; text-decoration: underline; }

.finding-action { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #f4f8ff; color: #26456b; }


/* v0.5.0: code-point comparison view and clearer wide result table */
.result-table { min-width: 1480px; table-layout: auto; }
.result-table th:nth-child(1), .result-table th:nth-child(4) { min-width: 92px; }
.result-table th:nth-child(2), .result-table th:nth-child(5) { min-width: 160px; }
.result-table th:nth-child(3) { min-width: 118px; }
.result-table th:nth-child(6) { min-width: 190px; }
.result-table th:nth-child(7) { min-width: 250px; }
.result-table th:nth-child(8) { min-width: 320px; }
.row-number-cell, .status-cell { white-space: nowrap; }
.key-value-cell .file-value:not(.codepoint-value) { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.value-view-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; }
.value-view-btn { border: 1px solid var(--line); background: #fff; color: #40506a; border-radius: 999px; padding: 6px 11px; font-size: .82rem; font-weight: 800; }
.value-view-btn:hover { border-color: #9bbbe5; }
.value-view-btn.active { background: #eaf2ff; border-color: #8eb4e8; color: #174b8c; }
.guide-sub { margin-top: 6px; }
.codepoint-value { display: flex; flex-wrap: wrap; gap: 4px; min-width: 240px; }
.cp-token { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 48px; padding: 3px 5px; border: 1px solid #d6e0ed; border-radius: 7px; background: #f7f9fc; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 1.2; }
.cp-char { font-weight: 800; color: #25364d; white-space: nowrap; }
.cp-code { margin-top: 2px; color: #64748b; font-size: .68rem; white-space: nowrap; }
.cp-note { display: block; margin-top: 4px; color: var(--muted); font-size: .75rem; }
.cp-nontext { min-width: 160px; }
@media (max-width: 760px) {
  .result-table { min-width: 1380px; }
}

.cp-token.cp-diff { border-color: #e5a49e; background: #fff0ef; box-shadow: inset 0 0 0 1px rgba(183, 28, 28, .06); }
.cp-token.cp-diff .cp-code { color: #a71d16; font-weight: 800; }
.cp-diff-guide { display: inline-flex; align-items: center; gap: 5px; }
.cp-diff-sample { width: 13px; height: 13px; border: 1px solid #e5a49e; background: #fff0ef; border-radius: 4px; }

/* v0.5.1 audit: unified terminology */
.file-card-head .badge { white-space: nowrap; }

.safe-row-suggestion { margin-top: 7px; padding: 6px 8px; border-radius: 7px; background: #eefaf4; color: #285b42; font-size: .78rem; }
.safe-row-suggestion code { word-break: break-all; }


/* v0.6.2: practical scrolling for large comparison result tables */
.table-wrap {
  position: relative;
  isolation: isolate;
  overflow: auto;
  max-height: 68vh;
  max-height: min(68vh, 700px);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

/*
  Keep the three columns users need to identify a row visible while moving
  horizontally through cause / explanation / action columns.
*/
.result-table {
  --sticky-row-width: 108px;
  --sticky-key-width: 210px;
  --sticky-status-width: 126px;
  border-collapse: separate;
  border-spacing: 0;
}

.result-table th:nth-child(1),
.result-table td:nth-child(1) {
  width: var(--sticky-row-width);
  min-width: var(--sticky-row-width);
  max-width: var(--sticky-row-width);
  position: sticky;
  left: 0;
}

.result-table th:nth-child(2),
.result-table td:nth-child(2) {
  width: var(--sticky-key-width);
  min-width: var(--sticky-key-width);
  max-width: var(--sticky-key-width);
  position: sticky;
  left: var(--sticky-row-width);
}

.result-table th:nth-child(3),
.result-table td:nth-child(3) {
  width: var(--sticky-status-width);
  min-width: var(--sticky-status-width);
  max-width: var(--sticky-status-width);
  position: sticky;
  left: calc(var(--sticky-row-width) + var(--sticky-key-width));
  box-shadow: 7px 0 10px -10px rgba(23, 32, 51, .65);
}

/* Body cells need an opaque surface or scrolled columns would show through. */
.result-table tbody td:nth-child(-n+3) {
  background: #fff;
  z-index: 2;
}

/* Header cells are sticky in both directions and must sit above body cells. */
.result-table thead th {
  top: 0;
  z-index: 4;
}

.result-table thead th:nth-child(-n+3) {
  background: #f3f6fb;
  z-index: 6;
}

/* A long key should not force the fixed column wider than its sticky offset. */
.result-table td:nth-child(2) .file-value:not(.codepoint-value) {
  max-width: calc(var(--sticky-key-width) - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-table td:nth-child(2) .codepoint-value {
  min-width: 0;
  max-width: calc(var(--sticky-key-width) - 20px);
}

@media (max-width: 760px) {
  .table-wrap {
    max-height: 62vh;
  }
  .result-table {
    --sticky-row-width: 82px;
    --sticky-key-width: 150px;
    --sticky-status-width: 100px;
  }
}

/* v0.6.3: pair-mode difference locations and expandable code points */
.visual-value {
  max-height: 190px;
  overflow: auto;
}
.difference-panel {
  margin: 12px 0;
  border: 1px solid #e6c38c;
  border-radius: 12px;
  background: #fffdf8;
  overflow: hidden;
}
.difference-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 13px;
  border-bottom: 1px solid #ead7b7;
  background: #fff9ee;
}
.difference-count {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e5c58f;
  color: #8b5608;
  font-size: .78rem;
  font-weight: 800;
}
.diff-location-list { display: grid; }
.diff-location-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 11px 13px;
  border-bottom: 1px solid #eee3d0;
}
.diff-location-row:last-child { border-bottom: 0; }
.diff-location-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff2db;
  color: #8b5608;
  font-size: .78rem;
  font-weight: 900;
}
.diff-side { min-width: 0; }
.diff-side > strong { display: block; margin-bottom: 5px; font-size: .84rem; }
.diff-arrow { align-self: center; text-align: center; color: #8b6b3d; font-weight: 900; }
.diff-char-list { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.diff-char {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid #e7b1ab;
  border-radius: 7px;
  background: #fff2f0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.diff-char code { color: #9f2c24; font-size: .72rem; }
.diff-none { color: var(--muted); font-style: italic; }
.code-list-text {
  margin: 7px 0 0;
  white-space: pre;
  line-height: 1.45;
}
.code-limit-note {
  margin: 7px 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}
.small-button { padding: 6px 10px; font-size: .78rem; }

@media (max-width: 760px) {
  .diff-location-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .diff-arrow { display: none; }
  .diff-location-row .diff-side:last-child { grid-column: 2; }
}

/* v0.6.5: one-card comparison summary */
.verdict-subnote { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(70, 88, 120, .16); font-size: 13px; color: var(--muted); }


/* v0.7.0: Excel formula-side follow-up after value diagnosis */
.lookup-checklist {
  margin: 14px 0;
  border: 1px solid #cfd9e8;
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
}
.lookup-checklist summary { cursor: pointer; font-weight: 700; }
.lookup-checklist-body { margin-top: 10px; line-height: 1.7; }
.lookup-checklist-body ul { margin: 8px 0 8px 1.3em; padding: 0; }
.lookup-limit-warning {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e9b45d;
  background: #fff8e8;
  line-height: 1.6;
}


/* v0.7.1: XLOOKUP固有の補足は必要な利用者だけ開く */
.lookup-semantics-note {
  margin: 12px 0 16px;
  border: 1px solid #cddcf2;
  border-radius: 10px;
  background: #f7faff;
  color: #315079;
}
.lookup-semantics-note summary {
  cursor: pointer;
  padding: 11px 14px;
  font-weight: 700;
}
.lookup-semantics-body {
  padding: 0 14px 13px;
  line-height: 1.75;
}


/* v0.8.0: public release pages, navigation and accessibility */
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; background: #172033; color: #fff; padding: 9px 12px; border-radius: 8px; text-decoration: none; }
.skip-link:focus { top: 12px; }
.site-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-nav a, .footer-links a { color: #40506a; text-decoration: none; font-weight: 700; font-size: .9rem; }
.site-nav a:hover, .footer-links a:hover { color: var(--brand); text-decoration: underline; }
.public-header { padding: 8px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
.content-main { padding-bottom: 34px; }
.content-hero { padding: 44px 0 20px; max-width: 880px; }
.content-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; margin-bottom: 16px; box-shadow: 0 6px 18px rgba(21,42,75,.04); }
.content-card h2, .public-info h2, .related-links h2 { margin-top: 0; }
.content-cta { margin: 24px 0; }
.primary-link { display: inline-block; background: var(--brand); color: #fff; text-decoration: none; border-radius: 10px; padding: 11px 17px; font-weight: 800; }
.primary-link:hover { background: var(--brand-dark); }
.text-link { color: var(--brand); font-weight: 800; }
.numbered { padding-left: 1.5rem; }
.numbered li { margin: 8px 0; }
.callout { border-left: 4px solid var(--brand); background: #f7fbff; padding: 10px 12px; }
.definition-list { display: grid; grid-template-columns: minmax(130px, 180px) 1fr; gap: 8px 18px; }
.definition-list dt { font-weight: 800; }
.definition-list dd { margin: 0; }
.plain-list { padding-left: 1.25rem; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.step-card { border: 1px solid var(--line); border-radius: 12px; padding: 15px; background: #fbfdff; }
.step-card p { margin-bottom: 0; color: #52617a; }
.step-no { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 7px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 900; }
.guide-link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.guide-link-grid a { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-decoration: none; color: var(--text); background: #fbfdff; }
.guide-link-grid a:hover { border-color: #9bbbe5; background: #f4f8ff; }
.guide-link-grid strong, .guide-link-grid span { display: block; }
.guide-link-grid span { margin-top: 3px; color: var(--muted); font-size: .86rem; }
.related-links { margin: 24px 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(22,101,216,.35); outline-offset: 2px; }
@media (max-width: 820px) { .compact-nav { display: none; } .step-grid, .guide-link-grid { grid-template-columns: 1fr; } .definition-list { grid-template-columns: 1fr; gap: 2px; } .definition-list dd { margin-bottom: 10px; } }
@media (max-width: 520px) { .actions .primary, .actions .secondary { width: 100%; } .privacy-badge { font-size: .78rem; } .hero { padding-top: 34px; } }


/* v0.9.1: public operator/contact footer */
.footer-rich { align-items: flex-start; }
.footer-identity { display: grid; gap: 3px; color: var(--muted); }
.footer-identity strong { color: var(--text); font-size: .95rem; }
.footer-identity span { display: block; }


/* v0.9.2: simplified public header/footer and sitemap */
.footer-product { display: grid; gap: 3px; color: var(--muted); }
.footer-product strong { color: var(--text); font-size: .95rem; }
.link-list { margin: 0; padding-left: 1.25rem; }
.link-list li { margin: .55rem 0; }


/* v0.9.3: footer brand links back to the top page */
.footer-brand {
  color: var(--text);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
}
.footer-brand:hover,
.footer-brand:focus-visible {
  text-decoration: underline;
}


/* v0.9.4: brand logo / icon */
.brand-with-mark,
.footer-brand-with-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.brand-with-mark img,
.footer-brand-with-mark img {
  display: block;
  flex: 0 0 auto;
}
.brand-with-mark:hover,
.brand-with-mark:focus-visible {
  color: var(--brand);
}
@media (max-width: 640px) {
  .brand-with-mark img { width: 30px; height: 30px; }
}

/* v0.9.6: browser-processing badge */
.header-privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid #bfe3d0;
  border-radius: 999px;
  background: #eefaf4;
  color: #087a48;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .header-privacy-badge {
    margin-top: 10px;
    align-self: flex-start;
    font-size: .92rem;
  }
}