/* Allocate marketing — calculator pages (SEO phase 1, 2026-09-28).
   Shared by every /calculators/* page. Speaks the landing page's language:
   one big rounded card (--r) with the spread shadow, rows carried by type
   and hairlines rather than boxes, the eyebrow/display/figure type roles,
   the iris accent, and a dark card for the method. Nothing here sets a
   font or a colour the rest of the site doesn't already use. */

:root { --calc-green: #178f6b; --calc-amber: #c2830f; --calc-red: #c2410c; }

/* ---- header: centred like every other page's ---- */
.calc-head { text-align: center; padding: clamp(36px, 5vh, 64px) 0 clamp(24px, 3vw, 40px); }
.calc-head .eyebrow { margin-bottom: 14px; }
.calc-head .eyebrow a { color: inherit; text-decoration: none; }
.calc-head .eyebrow a:hover { color: var(--iris-deep); }
.calc-head h1 { margin: 0 auto; max-width: 16ch; font-size: clamp(34px, 5vw, 64px); line-height: 1.06; letter-spacing: -0.024em; font-weight: 600; text-wrap: balance; }
.calc-head p { margin: 16px auto 0; max-width: 54ch; font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); }

/* ---- the tool: one card ---- */
.calc-shell {
  position: relative;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: clamp(24px, 3.2vw, 44px);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.calc { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
@media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } .calc-shell { border-radius: 28px; } }

/* inputs: a column, not a box. It pins while the results scroll, and when
   the form is taller than the window (compound interest, rent vs. buy) it
   scrolls on its own inside the pinned height, so the last field is always
   reachable — two independent scrolls, one per column (Edward 2026-09-28). */
.calc-in {
  position: sticky;
  top: calc(var(--nav) + 24px);
  max-height: calc(100vh - var(--nav) - 48px);
  max-height: calc(100dvh - var(--nav) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.14) transparent;
  padding-right: 6px;
  margin-right: -6px;
  /* the last field fades under the edge so the cut reads as "more below" */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  padding-bottom: 28px;
}
.calc-in::-webkit-scrollbar { width: 6px; }
.calc-in::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.14); border-radius: 999px; }
.calc-in::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 860px) {
  .calc-in { position: static; max-height: none; overflow: visible; mask-image: none; -webkit-mask-image: none; padding: 0; margin: 0; }
}
.calc-in__g { margin-bottom: 22px; }
.calc-in__t { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.calc-f { margin-bottom: 12px; }
.calc-f > label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.calc-f small { display: block; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); margin-top: 5px; }
.calc-num { display: flex; align-items: center; gap: 6px; border-radius: 12px; padding: 0 12px; background: #f5f5f7; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 0.15s, background 0.15s; }
.calc-num:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--iris), 0 0 0 4px rgba(97, 83, 228, 0.12); }
.calc-num span { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.calc-num input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; padding: 11px 0; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); background: transparent; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.calc-num input::-webkit-outer-spin-button, .calc-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-sum { border-top: 1px solid var(--hair); padding-top: 14px; font-size: 13px; }
.calc-sum div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.calc-sum span { color: var(--ink-2); }
.calc-sum b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* results */
.calc-out { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 32px); min-width: 0; }
.calc-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: #f5f5f7; align-self: flex-start; max-width: 100%; }
.calc-tab { font: inherit; font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; white-space: nowrap; }
.calc-tab:hover { color: var(--ink); }
.calc-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04); }
.calc-tab:focus-visible { outline: 2px solid var(--iris-deep); outline-offset: 2px; }
.calc-panel[hidden] { display: none; }
.calc-panel { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 32px); }

/* the figures: three columns carried by type, hairlines between */
.calc-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc-m { min-width: 0; padding: 4px clamp(14px, 1.8vw, 24px) 4px 0; }
.calc-m + .calc-m { border-left: 1px solid var(--hair); padding-left: clamp(14px, 1.8vw, 24px); }
@media (max-width: 640px) {
  .calc-metrics { grid-template-columns: minmax(0, 1fr); }
  .calc-m { padding: 12px 0; }
  .calc-m + .calc-m { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); }
}
.calc-m__l { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.calc-m__v { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.1; letter-spacing: -0.024em; margin-top: 8px; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.calc-m__s { font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); margin-top: 6px; }
.calc-m--good .calc-m__v { color: var(--calc-green); }
.calc-m--warn .calc-m__v { color: var(--calc-amber); }
.calc-m--bad .calc-m__v { color: var(--calc-red); }
.calc-m--iris .calc-m__v { color: var(--iris-deep); }

/* the one-line verdict: the landing's approve-chip, in a tone */
.calc-say { border-radius: clamp(14px, 1.4vw, 18px); padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px); background: rgba(97, 83, 228, 0.045); box-shadow: inset 0 0 0 1px rgba(97, 83, 228, 0.16); }
.calc-say b { display: block; font-size: var(--t-heading); line-height: 1.2; font-weight: 600; letter-spacing: -0.018em; color: var(--ink); }
.calc-say p { margin: 8px 0 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); max-width: 70ch; }
.calc-say p strong { color: var(--ink); font-weight: 600; }
.calc-say--good { background: rgba(23, 143, 107, 0.06); box-shadow: inset 0 0 0 1px rgba(23, 143, 107, 0.2); }
.calc-say--good b { color: var(--calc-green); }
.calc-say--bad { background: rgba(194, 65, 12, 0.05); box-shadow: inset 0 0 0 1px rgba(194, 65, 12, 0.18); }
.calc-say--bad b { color: var(--calc-red); }

/* a chart or a table: a titled block above a hairline, no box */
.calc-card { border-top: 1px solid var(--hair); padding-top: clamp(18px, 2vw, 26px); min-width: 0; }
.calc-card__t { font-size: var(--t-heading); line-height: 1.14; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); margin: 0 0 4px; }
.calc-card__s { font-size: var(--t-small); color: var(--ink-3); margin: 0 0 14px; }
.calc-chart { position: relative; width: 100%; height: 280px; margin-top: 8px; }
.calc-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.calc-chart .tip { position: absolute; pointer-events: none; background: #fff; border-radius: 10px; padding: 9px 11px; font-size: 12px; line-height: 1.45; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--hair); white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); opacity: 0; transition: opacity 0.12s; z-index: 2; }
.calc-chart .tip b { display: block; color: var(--ink); margin-bottom: 2px; }
.calc-chart .tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.calc-chart .tip span { color: var(--ink-2); }
.calc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.calc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* a strip of small figures (the milestones) */
.calc-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.calc-chip { padding: 14px 8px; text-align: center; }
.calc-chip + .calc-chip { border-left: 1px solid var(--hair); }
.calc-chip small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.calc-chip b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.calc-chip span { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }

/* tables: rows on hairlines, figures tabular */
.calc-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.calc-table th { text-align: right; padding: 8px 8px 10px; font-weight: 500; color: var(--ink-3); font-size: 12px; letter-spacing: 0.02em; }
.calc-table th:first-child, .calc-table td:first-child { text-align: left; padding-left: 0; }
.calc-table th:last-child, .calc-table td:last-child { padding-right: 0; }
.calc-table td { text-align: right; padding: 11px 8px; border-top: 1px solid var(--hair); color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-table .dim { color: var(--ink-2); }
.calc-table .good { color: var(--calc-green); font-weight: 600; }
.calc-table .bad { color: var(--calc-red); }
.calc-table .iris { color: var(--iris-deep); }
.calc-table tr.you td { background: rgba(23, 143, 107, 0.05); }
.calc-table .you-tag { display: inline-block; margin-left: 8px; background: var(--calc-green); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; vertical-align: 1px; }
.calc-scroll { overflow-x: auto; }
.calc-card details > summary { cursor: pointer; font-size: var(--t-small); font-weight: 600; color: var(--iris-deep); list-style: none; }
.calc-card details > summary::-webkit-details-marker { display: none; }
.calc-card details > summary::before { content: "+"; display: inline-block; width: 16px; }
.calc-card details[open] > summary::before { content: "−"; }
.calc-card details > div { margin-top: 12px; }

.calc-note { font-size: 12px; line-height: 1.55; color: var(--ink-3); max-width: 78ch; }

/* how it's calculated: the dark card */
.calc-how {
  position: relative; overflow: hidden;
  border-radius: clamp(22px, 2.4vw, 32px);
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.8vw, 36px);
  color: #fff;
  background:
    radial-gradient(120% 90% at 18% 0%, #24222f 0%, rgba(36, 34, 47, 0) 62%),
    radial-gradient(90% 70% at 92% 100%, #1b1926 0%, rgba(27, 25, 38, 0) 58%),
    #0f0e14;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}
.calc-how h2 { margin: 0 0 6px; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.calc-how p { margin: 0 0 18px; font-size: var(--t-body); line-height: var(--lh-body); color: rgba(255, 255, 255, 0.72); max-width: 60ch; }
.calc-how dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; font-size: var(--t-small); }
.calc-how dt { color: rgba(255, 255, 255, 0.55); padding-top: 1px; }
.calc-how dd { margin: 0; font-family: var(--mono); font-size: 13px; color: #fff; letter-spacing: 0.01em; }
.calc-how dd sup { font-size: 10px; }
.calc-how ul { margin: 18px 0 0; padding: 18px 0 0 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: var(--t-small); line-height: 1.6; color: rgba(255, 255, 255, 0.62); }
@media (max-width: 640px) { .calc-how dl { grid-template-columns: minmax(0, 1fr); gap: 4px 0; } .calc-how dt { margin-top: 10px; } }

/* the article under the tool */
.calc-read { max-width: 68ch; margin: 0 auto; }
.calc-read h2 { margin: clamp(36px, 4vw, 52px) 0 14px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.14; font-weight: 600; letter-spacing: -0.022em; text-wrap: balance; }
.calc-read h2:first-child { margin-top: 0; }
.calc-read h3 { margin: 20px 0 8px; font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.015em; }
.calc-read p { margin: 0 0 14px; font-size: var(--t-body); line-height: 1.7; color: var(--ink-2); }
.calc-read p strong { color: var(--ink); font-weight: 600; }
.calc-read a { color: var(--iris-deep); text-decoration: underline; text-underline-offset: 3px; }
.calc-read pre { background: #f5f5f7; border-radius: 12px; padding: 16px 18px; margin: 14px 0; font-family: var(--mono); font-size: 13px; color: var(--ink); white-space: pre-wrap; }
.calc-read .fine { font-size: 12px; color: var(--ink-3); margin-top: 28px; }
.calc-faq details { border-top: 1px solid var(--hair); }
.calc-faq details:last-child { border-bottom: 1px solid var(--hair); }
.calc-faq summary { list-style: none; cursor: pointer; padding: 16px 0; font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; }
.calc-faq summary::-webkit-details-marker { display: none; }
.calc-faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; }
.calc-faq details[open] summary::after { content: "−"; color: var(--iris); }
.calc-faq summary:hover { color: var(--iris-deep); }
.calc-faq details p { margin: -4px 0 16px; }

/* related: small cards in the landing's card language */
.calc-rel { margin-top: clamp(48px, 6vw, 88px); }
.calc-rel h2 { margin: 0 0 16px; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.calc-rel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap); }
.calc-rel a { display: block; padding: 20px 22px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; font-size: var(--t-row); font-weight: 600; letter-spacing: -0.01em; transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1); }
.calc-rel a:hover { transform: translateY(-3px); }
.calc-rel a span { display: block; font-size: var(--t-small); font-weight: 400; color: var(--ink-2); margin-top: 5px; line-height: 1.45; }

/* the close: the landing's closer, in miniature */
.calc-cta { margin: clamp(56px, 7vw, 100px) 0 clamp(64px, 8vw, 120px); text-align: center; }
.calc-cta b { display: block; margin: 0 auto; max-width: 18ch; font-size: clamp(28px, 3.8vw, 50px); line-height: 1.06; font-weight: 600; letter-spacing: -0.024em; text-wrap: balance; }
.calc-cta p { margin: 14px auto 0; max-width: 50ch; font-size: var(--t-body); color: var(--ink-2); line-height: var(--lh-body); }
.calc-cta .cta { margin-top: 24px; }

/* the /calculators index */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); padding-bottom: clamp(64px, 8vw, 120px); }
.calc-grid h2 { grid-column: 1 / -1; margin: 28px 0 0; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.calc-grid a { display: block; padding: 24px 26px; border-radius: 28px; background: var(--card); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1); }
.calc-grid a:hover { transform: translateY(-3px); }
.calc-grid a b { display: block; font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; }
.calc-grid a span { display: block; margin-top: 8px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.calc-grid__soon { padding: 24px 26px; border-radius: 28px; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.08); color: var(--ink-3); }
.calc-grid__soon b { display: block; font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; color: var(--ink-2); }
.calc-grid__soon span { display: block; margin-top: 8px; font-size: var(--t-small); line-height: 1.5; }
.calc-grid__soon small { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* selects inside the inputs column (several calculators have one) */
.calc-num select { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; padding: 11px 0; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.calc-num:has(select)::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg) translateY(-2px); flex: none; }
.calc-f input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--iris); vertical-align: -3px; margin-right: 8px; }

/* ---- /compare pages (SEO phase 2, 2026-09-28) ---- */
.cmp-shell { padding: clamp(24px, 3.2vw, 44px); }
.cmp-verdict { max-width: 68ch; margin-bottom: clamp(22px, 2.6vw, 32px); }
.cmp-verdict .eyebrow { margin-bottom: 10px; }
.cmp-verdict__t { margin: 0; font-size: var(--t-heading); line-height: 1.4; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.cmp-table th[scope="row"] { text-align: left; padding-left: 0; font-weight: 500; color: var(--ink-2); font-size: var(--t-small); width: 22%; border-top: 1px solid var(--hair); vertical-align: top; }
.cmp-table thead th { text-align: left; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-3); padding: 0 8px 12px; }
.cmp-table thead th:first-child { padding-left: 0; }
.cmp-table thead th:nth-child(2) { color: var(--iris-deep); }
.cmp-table td { text-align: left; font-size: var(--t-small); line-height: 1.45; vertical-align: top; width: 39%; }
.cmp-table .cmp-yes { color: var(--calc-green); font-weight: 600; }
.cmp-table .cmp-no { color: var(--ink-3); }
.cmp-shell .calc-note { margin-top: 16px; }
.cmp-read ul { margin: 0 0 14px; padding-left: 20px; }
.cmp-read li { margin: 0 0 10px; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
.cmp-read li strong { color: var(--ink); font-weight: 600; }
.cmp-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.cmp-pick > div { padding: 20px 22px; border-radius: 22px; background: #f5f5f7; }
.cmp-pick b { display: block; font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.cmp-pick ul { margin: 0; padding-left: 18px; }
.cmp-pick li { font-size: var(--t-small); margin-bottom: 6px; }
@media (max-width: 640px) { .cmp-pick { grid-template-columns: minmax(0, 1fr); } }
.cmp-sources li { font-size: var(--t-small); margin-bottom: 4px; }
.cmp-sources a { color: var(--ink-2); }

/* ---- /glossary (SEO phase 2, 2026-09-28) ---- */
.gl-read { margin-top: 8px; }
.gl-read ul { margin: 0 0 14px; padding-left: 20px; }
.gl-read li { margin: 0 0 8px; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
.gl-calc { margin: 24px 0 0; }
.gl-calc .cta { margin-top: 0; }
.gl-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.gl-jump a { font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px; background: #f5f5f7; color: var(--ink-2); text-decoration: none; }
.gl-jump a:hover { background: var(--iris); color: #fff; }
.gl-group { margin: clamp(32px, 4vw, 52px) 0; }
.gl-group h2 { margin: 0 0 14px; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.gl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 var(--gap); }
.gl-list li { border-top: 1px solid var(--hair); }
.gl-list a { display: block; padding: 14px 0; color: var(--ink); text-decoration: none; }
.gl-list a:hover b { color: var(--iris-deep); }
.gl-list b { display: block; font-size: var(--t-row); font-weight: 600; letter-spacing: -0.01em; }
.gl-list span { display: block; margin-top: 3px; font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); }

/* ---- /guides pages (SEO phase 3, 2026-09-29) ---- */
.gd-read { margin-top: 8px; }
.gd-read ul, .gd-read ol { margin: 0 0 14px; padding-left: 20px; }
.gd-read li { margin: 0 0 8px; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
.gd-read li strong { color: var(--ink); font-weight: 600; }
.gd-read .calc-table { margin: 6px 0 18px; }
.gd-read .calc-table th, .gd-read .calc-table td { text-align: left; }
.gd-toc { margin: 22px 0 8px; padding: 18px 22px; border-radius: 22px; background: #f5f5f7; }
.gd-toc .eyebrow { margin: 0 0 8px; }
.gd-toc ol { margin: 0; padding-left: 20px; }
.gd-toc li { margin: 0 0 4px; font-size: var(--t-small); line-height: 1.5; }
.gd-toc a { color: var(--ink); text-decoration: none; }
.gd-toc a:hover { color: var(--iris-deep); }
.gd-step { scroll-margin-top: 96px; }
.gd-step h2 { display: flex; align-items: baseline; gap: 12px; }
.gd-n { flex: none; width: 30px; height: 30px; border-radius: 999px; background: var(--iris); color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transform: translateY(-3px); }
.gd-plan { margin: clamp(28px, 3.6vw, 44px) 0; padding: clamp(20px, 2.6vw, 30px) clamp(22px, 2.8vw, 32px); border-radius: 26px; background: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.gd-plan__h { margin: 0 0 10px; font-size: var(--t-eyebrow); line-height: 1.3; font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--iris-deep); }
.gd-plan__lead { margin: 0 0 14px; font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); }
.gd-plan ul { margin: 0 0 14px; padding: 0; list-style: none; }
.gd-plan li { position: relative; margin: 0; padding: 10px 0 10px 22px; border-top: 1px solid var(--hair); font-size: var(--t-small); line-height: 1.5; color: var(--ink); }
.gd-plan li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 7px; height: 7px; border-radius: 999px; background: var(--iris); }
.gd-plan__how { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }

/* ---- /security (SEO phase 3, 2026-09-29) ---- */
.sec-shell { padding: clamp(24px, 3.2vw, 44px); }
.sec-h { margin: 0 0 18px; font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.01em; }
.sec-never { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.sec-never li { padding: 20px 22px; border-radius: 22px; background: #f5f5f7; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.sec-never b { display: block; margin-bottom: 6px; font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.sec-read { margin-top: clamp(28px, 3.6vw, 44px); }
.sec-read ul { margin: 0 0 14px; padding-left: 20px; }
.sec-read li { margin: 0 0 10px; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
.sec-read li strong { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { .sec-never { grid-template-columns: 1fr; } }

/* ---- /changelog (SEO phase 3, 2026-09-29) ---- */
.cl-filter { margin-top: 22px; }
.cl-filter a[aria-current="true"] { background: var(--iris); color: #fff; }
.cl-month { max-width: 860px; margin: 0 auto clamp(28px, 4vw, 52px); }
.cl-month__h { margin: 0 0 6px; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.cl-entry { display: grid; grid-template-columns: 172px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--hair); }
.cl-entry[hidden] { display: none; }
.cl-month[hidden] { display: none; }
.cl-meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding-top: 4px; }
.cl-meta time { font-size: var(--t-small); font-weight: 500; color: var(--ink-2); }
.cl-area { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--iris-deep); background: rgba(91, 91, 214, 0.10); padding: 4px 9px; border-radius: 999px; }
.cl-body h3 { margin: 0 0 10px; font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; }
.cl-body h3 a { color: var(--ink); text-decoration: none; }
.cl-body h3 a:hover { color: var(--iris-deep); }
.cl-body p { margin: 0 0 12px; font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); }
.cl-body ul { margin: 0 0 12px; padding-left: 20px; }
.cl-body li { margin: 0 0 8px; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
.cl-body strong, .cl-body li strong { color: var(--ink); font-weight: 600; }
.cl-body code { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.92em; background: #f5f5f7; padding: 1px 6px; border-radius: 6px; }
.cl-sep { display: none; }
.cl-link { margin: 0; }
.cl-link a { font-size: var(--t-small); font-weight: 600; color: var(--iris-deep); text-decoration: none; }
@media (max-width: 720px) { .cl-entry { grid-template-columns: 1fr; gap: 10px; } .cl-meta { flex-direction: row; align-items: center; gap: 12px; } }