.listing__search { display: flex; align-items: center; gap: 12px; width: 440px; max-width: 100%; height: 56px; padding: 0 6px 0 20px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--k-line); background: var(--k-card); }
.listing__icon { flex: none; fill: none; stroke: var(--k-fg); stroke-width: 1.6; stroke-linecap: round; }
.listing__q { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--k-fg); font: 400 16px var(--font-sans); }
.listing__q::-webkit-search-cancel-button { display: none; }
.listing__q::placeholder { color: var(--k-mute); }
.listing__search:focus-within { border-color: var(--k-fg); }
.listing__x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--sand); color: var(--k-body); font: 400 16px/1 var(--font-sans); text-decoration: none; }
.listing__go { flex: none; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--k-fg); color: var(--k-bg); font: 500 14px var(--font-sans); cursor: pointer; }
.listing__result { min-height: 28px; margin: 22px 0 24px; }
.listing__result-t { margin-right: 14px; font: 600 22px/1.2 var(--font-sans); letter-spacing: -0.015em; }
.listing__clear { font: 500 15px var(--font-sans); color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.listing__none { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; padding: 48px; border: 1px solid var(--k-line); border-radius: 14px; background: var(--k-card); }
.listing__none-main, .listing__none-side { display: flex; flex-direction: column; gap: 12px; }
.listing__none-t { font: 600 28px/1.15 var(--font-sans); letter-spacing: -0.02em; }
.listing__none-d { font: 400 16px/1.5 var(--font-sans); color: var(--k-body); }
.listing__none-k { font: 500 11px var(--font-mono); text-transform: uppercase; color: var(--k-mute); }
.listing__none-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.listing__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; }
.listing__range { font: 500 12px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--k-mute); }
.listing__pages { display: flex; align-items: center; gap: 6px; }
.listing__pg { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 44px; padding: 0 4px; border-bottom: 2px solid transparent; box-sizing: border-box; color: var(--k-mute); font: 500 15px var(--font-sans); text-decoration: none; }
.listing__pg:hover { color: var(--k-fg); }
.listing__pg.is-on, .listing__pg.is-on:hover { border-bottom-color: var(--k-fg); color: var(--k-fg); font-weight: 600; }
.listing__pg--arrow { width: 44px; margin: 0 6px; padding: 0; border: 1px solid var(--k-fg); border-radius: 999px; color: var(--k-fg); font-size: 17px; }
.listing__pg--arrow.is-off { opacity: .25; }
.listing__gap { min-width: 24px; text-align: center; color: var(--k-mute); }

.sec__inner:has(> .listing--paged) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; }
.sec__inner:has(> .listing--paged) > * { grid-column: 1 / -1; }
.sec__inner:has(> .listing--paged) > .sec__head { grid-column: 1; grid-row: 1; }
.listing--paged { display: contents; }
.listing--paged > .listing__search { grid-column: 2; grid-row: 1; margin-bottom: clamp(32px, 4cqi, 56px); }
.listing--paged > :not(.listing__search) { grid-column: 1 / -1; }
.listing--paged .listing__chips { flex-wrap: nowrap; gap: 28px; margin-bottom: 0; overflow-x: auto; border-bottom: 1px solid var(--k-line); scrollbar-width: none; }
.listing--paged .listing__chip { flex: none; height: auto; margin-bottom: -1px; padding: 0 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--k-mute); font-size: 15px; }
.listing--paged .listing__chip::after { content: var(--n); margin-left: 6px; font: 500 11px var(--font-mono); }
.listing--paged .listing__chip:hover { color: var(--k-fg); }
.listing--paged .listing__chip.is-on, .listing--paged .listing__chip.is-on:hover { background: none; border-bottom-color: var(--k-fg); color: var(--k-fg); font-weight: 600; }
.listing--paged .listing__none-chips .listing__chip { height: 38px; padding: 0 16px; border: 1px solid var(--k-line); border-radius: 999px; background: var(--k-card); color: var(--k-fg); }
.listing--paged .listing__none-chips .listing__chip::after { content: none; }
.listing--paged .listing__empty { display: none; }
.listing--paged .listing__card:not(.listing__card--big) .listing__d { display: none; }
.listing--paged .listing__card--big .listing__k::before { content: var(--lead, ""); }
.listing--paged .listing__card--big { grid-column: 1 / -1; flex-direction: row; }
.listing--paged .listing__card--big .listing__media { flex: 1.35 1 0; border-bottom: 0; border-right: 1px solid var(--k-line); aspect-ratio: 16 / 9; }
.listing--paged .listing__card--big .listing__body { flex: 1 1 0; gap: 14px; padding: 40px; }

@media (max-width: 899px) {
  .sec__inner:has(> .listing--paged) { grid-template-columns: minmax(0, 1fr); }
  .sec__inner:has(> .listing--paged) > .sec__head { grid-row: auto; }
  .listing--paged > .listing__search { grid-column: 1; grid-row: auto; width: 100%; margin-bottom: 24px; }
  .listing--paged .listing__card--big { flex-direction: column; }
  .listing--paged .listing__card--big .listing__media { flex: none; border-right: 0; border-bottom: 1px solid var(--k-line); }
  .listing--paged .listing__card--big .listing__body { padding: 22px; }
  .listing__none { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }
  .listing__range { display: none; }
  .listing__pager { justify-content: center; }
  .listing__pg:not(.listing__pg--arrow):not(.is-on), .listing__gap { display: none; }
}
.listing__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.listing__chip { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--k-fg); background: transparent; color: var(--k-fg); font: 500 14px var(--font-sans); text-decoration: none; }
.listing__chip:hover { color: var(--k-fg); }
.listing__chip.is-on, .listing__chip.is-on:hover { background: var(--k-fg); color: var(--k-bg); }
.listing__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.listing__card { display: flex; flex-direction: column; overflow: hidden; padding: 0; border: 1px solid var(--k-line); border-radius: 14px; background: var(--k-card); color: var(--k-fg); text-align: left; text-decoration: none; }
.listing__card:hover { border-color: var(--ink); color: var(--k-fg); }
.listing__card[hidden] { display: none; }
.listing__media { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--k-line); }
.listing__photo { position: absolute; inset: 0; background: var(--sand); }
.listing__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(200deg, rgba(22, 21, 19, .34) 0%, rgba(22, 21, 19, 0) 55%); }
.listing__overlay { position: absolute; top: 0; right: 0; width: 58%; height: 70%; padding: 12px; pointer-events: none; }
.listing__play { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--ink); }
.listing__play svg { width: 14px; height: 14px; margin-left: 2px; fill: var(--paper); }
.listing__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 22px; }
.listing__k, .listing__meta { font: 500 11px var(--font-mono); color: var(--k-mute); }
.listing__t { font: 600 20px/1.2 var(--font-sans); letter-spacing: -0.02em; text-wrap: pretty; }
.listing__d { font: 400 15px/1.5 var(--font-sans); color: var(--k-body); text-wrap: pretty; }
.listing__meta { margin-top: auto; padding-top: 8px; }
.listing__empty { margin: 0; font: 400 16px var(--font-sans); color: var(--k-body); }
.listing__empty[hidden] { display: none; }

@media (min-width: 1180px) {
  .listing__card--big { grid-column: span 2; }
  .listing__card--big .listing__media { aspect-ratio: 16 / 7; }
  .listing__card--big .listing__t { font-size: clamp(24px, 2.6cqi, 34px); }
}

.article { display: flex; flex-direction: column; gap: clamp(32px, 4cqi, 56px); }
.article__head { display: flex; flex-direction: column; gap: 20px; max-width: 900px; }
.article__crumb { align-self: flex-start; padding: 0; font: 500 12px var(--font-mono); color: var(--k-mute); white-space: nowrap; text-align: left; text-decoration: none; }
.article__crumb:hover { color: var(--ink); }
.article__eyebrow { font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--k-mute); }
.article__title { margin: 0; font: 600 clamp(38px, 5cqi, 72px)/1 var(--font-sans); letter-spacing: -0.045em; text-wrap: balance; }
.article__lead { margin: 0; max-width: 720px; font: 400 clamp(18px, 1.6cqi, 22px)/1.5 var(--font-sans); color: var(--k-body); text-wrap: pretty; }
.article__meta { font: 500 12px var(--font-mono); color: var(--k-mute); }
.article__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5cqi, 80px); align-items: start; border-top: 1px solid var(--k-fg); padding-top: 32px; }
.article__side { position: static; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.article__side-t { margin-bottom: 10px; font: 500 11px var(--font-mono); color: var(--k-mute); }
.article__side-link { padding: 8px 0 8px 14px; border-left: 2px solid var(--k-line); font: 400 15px/1.35 var(--font-sans); color: var(--k-fg); text-align: left; text-decoration: none; }
.article__side-link.is-on { border-left-color: var(--k-fg); font-weight: 600; }
.article__side-link:hover { border-left-color: var(--ink); color: var(--k-fg); }
.article__body { display: flex; flex-direction: column; gap: 40px; max-width: 720px; min-width: 0; }
.article__block { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 96px; }
.article__h { margin: 0; font: 600 clamp(24px, 2.4cqi, 32px)/1.15 var(--font-sans); letter-spacing: -0.03em; text-wrap: balance; }
.article__p { margin: 0; font: 400 18px/1.65 var(--font-sans); color: var(--k-body); text-wrap: pretty; }
.article__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.article__list li { display: flex; gap: 12px; align-items: baseline; font: 400 17px/1.55 var(--font-sans); }
.article__list svg { flex: none; width: 11px; height: 11px; }
.article__list path { fill: none; stroke: var(--k-fg); stroke-width: 1.6; stroke-linecap: round; }
.article__a { color: inherit; text-decoration: underline; text-decoration-color: var(--k-mute); text-underline-offset: .2em; }
.article__fig { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.article__fig img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--k-line); }
.article__cover--art { aspect-ratio: 16 / 7; border-radius: 12px; overflow: hidden; }
.article__fig figcaption { font: 500 12px/1.5 var(--font-mono); color: var(--k-mute); }
.article__appshots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 24px 16px; align-items: start; }
.appshot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.appshot__frame { width: min(100%, 190px); padding: 5px; border-radius: 26px; background: var(--ink); box-shadow: 0 10px 24px rgb(0 0 0 / .16); }
.appshot__frame img { display: block; width: 100%; height: auto; aspect-ratio: 1320 / 2868; border-radius: 21px; background: var(--white); }
.appshot__cap { max-width: 190px; font: 500 13px/1.45 var(--font-sans); color: var(--k-body); text-align: center; text-wrap: balance; }
.article__note { margin: 0; padding: 16px 20px; border: 1px dashed var(--k-mute); border-radius: 10px; font: 500 12px/1.5 var(--font-mono); color: var(--k-mute); }

.article__progress { position: fixed; top: 0; left: 0; z-index: 60; height: 3px; width: 100%; background: var(--green); transform: scaleX(var(--read, 0)); transform-origin: left; pointer-events: none; }
.article__nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; border-top: 1px solid var(--k-fg); padding-top: 32px; }
.article__nav-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--k-line); border-radius: 14px; background: var(--white); color: var(--k-fg); text-align: left; text-decoration: none; }
.article__nav-card:hover { border-color: var(--k-fg); }
.article__nav-card--next { align-items: flex-end; border-color: var(--k-fg); background: var(--k-card); text-align: right; }
.article__nav-card--next:hover { background: var(--k-tone2); }
.article__nav-k { font: 500 11px var(--font-mono); color: var(--k-mute); }
.article__nav-t { font: 500 17px/1.3 var(--font-sans); text-wrap: pretty; }
.article__nav-card--next .article__nav-t { font: 600 clamp(20px, 2cqi, 24px)/1.15 var(--font-sans); letter-spacing: -0.02em; }
.article__upnext { position: fixed; left: 50%; bottom: 20px; z-index: 50; display: flex; align-items: center; gap: 14px; max-width: min(640px, calc(100vw - 32px)); padding: 10px 10px 10px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); transform: translateX(-50%); }
.article__upnext[hidden] { display: none; }
.article__upnext-k { flex: none; font: 500 11px var(--font-mono); color: var(--muted); }
.article__upnext-t { min-width: 0; overflow: hidden; font: 500 14px var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.article__upnext-go { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 13px var(--font-sans); text-decoration: none; }

@media print { .article__progress, .article__upnext { display: none; } }

@media (min-width: 1180px) {
  .article__grid { grid-template-columns: 240px minmax(0, 1fr); }
  .article__side { position: sticky; }
  .article__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); margin-left: calc(240px + clamp(32px, 5cqi, 80px)); }
}

.calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; align-items: stretch; }
.calc__in, .calc__out { display: flex; flex-direction: column; border-radius: 14px; padding: clamp(24px, 3cqi, 40px); }
.calc__in { gap: 28px; background: var(--k-card); }
.calc__out { gap: 22px; background: var(--ink); color: var(--paper); }
.calc__k { font: 500 11px var(--font-mono); color: var(--k-mute); }
.calc__out .calc__k { color: var(--muted); }
.calc__field { display: flex; flex-direction: column; gap: 10px; }
.calc__row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.calc__label { font: 500 16px var(--font-sans); }
.calc__value { font: 600 20px var(--font-sans); white-space: nowrap; }
.calc__range { width: 100%; height: 24px; margin: 0; accent-color: var(--green); cursor: pointer; }
.calc__ends { display: flex; justify-content: space-between; font: 500 11px var(--font-mono); color: var(--k-mute); }
.calc__result { display: flex; flex-direction: column; gap: 8px; }
.calc__big-l { font: 400 16px var(--font-sans); color: var(--stone); }
.calc__big { font: 600 clamp(44px, 6cqi, 84px)/1 var(--font-sans); letter-spacing: -0.05em; color: var(--yellow); }
.calc__big.is-negative { color: var(--product-join); }
.calc__dots-wrap { display: flex; flex-direction: column; gap: 10px; }
.calc__dots { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 5px; max-width: 420px; }
.calc__dot { aspect-ratio: 1 / 1; border-radius: 999px; background: var(--text-3); }
.calc__dot.is-on { background: var(--yellow); }
.calc__rows { display: flex; flex-direction: column; border-top: 1px solid var(--text-3); }
.calc__out-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--text-3); }
.calc__out-row span { font: 400 15px var(--font-sans); color: var(--stone); }
.calc__out-row b { font: 600 17px var(--font-sans); white-space: nowrap; }
.calc__note { margin: 0; font: 400 13px/1.5 var(--font-sans); color: var(--muted); text-wrap: pretty; }
.calc__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.calc__cta { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 15px var(--font-sans); text-decoration: none; }
.calc__cta:hover { background: var(--yellow); color: var(--ink); }
.calc__reset { height: 50px; padding: 0 20px; border: 1px solid var(--text-3); border-radius: 999px; background: transparent; color: var(--paper); font: 500 15px var(--font-sans); cursor: pointer; }
.calc__reset:hover { border-color: var(--paper); }
.calc__intro { margin: -12px 0 0; max-width: 44ch; font: 400 15px/1.55 var(--font-sans); color: var(--k-body); }
.calc__field { gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--k-line); }
.calc__label { font-weight: 600; }
.calc__hint { font: 400 13px/1.5 var(--font-sans); color: var(--k-body); text-wrap: pretty; }
.calc__number-wrap { display: inline-flex; align-items: center; max-width: 280px; border: 1px solid var(--k-line); border-radius: 8px; background: var(--white); overflow: hidden; }
.calc__number-wrap:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.calc__number { width: 100%; min-width: 0; border: 0; outline: 0; padding: 12px 14px; background: transparent; color: var(--ink); font: 600 22px var(--font-sans); font-variant-numeric: tabular-nums; }
.calc__number-unit { flex: none; padding: 0 14px; font: 600 16px var(--font-sans); color: var(--k-body); }
.calc__distribution { display: flex; flex-direction: column; gap: 12px; }
.calc__bar { height: 14px; border-radius: 7px; overflow: hidden; background: var(--text-3); }
.calc__bar-missed { display: block; height: 100%; border-radius: inherit; background: var(--yellow); }
.calc__legend { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; font: 400 12px/1.5 var(--font-sans); color: var(--stone); }
.calc__legend span { display: inline-flex; gap: 6px; align-items: center; }
.calc__legend b { color: var(--paper); }
.calc__swatch { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.calc__swatch--missed { background: var(--yellow); }
.calc__steps { display: flex; flex-direction: column; gap: 7px; padding: 18px; border: 1px solid var(--text-3); border-radius: 10px; }
.calc__steps-title { font: 600 15px var(--font-sans); color: var(--paper); }
.calc__method { margin: 0; font: 400 13px/1.55 var(--font-sans); color: var(--stone); }
.calc__out-row b.is-negative { color: var(--product-join); }
.calc__warning { margin: 0; padding: 12px 16px; border-radius: 8px; background: rgba(255,255,255,.1); color: var(--paper); font: 500 13px/1.55 var(--font-sans); }
.calc__warning[hidden] { display: none; }
@media (max-width: 640px) {
  .calc__in, .calc__out { padding: 22px 20px; }
  .calc__out-row { align-items: flex-start; }
  .calc__out-row span { max-width: 55%; }
  .calc__big { font-size: clamp(35px, 8.5vw, 60px); overflow-wrap: anywhere; }
}


.help { display: flex; flex-direction: column; gap: clamp(40px, 5cqi, 72px); }
.help__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(32px, 5cqi, 72px); align-items: center; }
.help__intro { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.help__eyebrow { font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--k-mute); }
.help__title { margin: 0; font: 600 clamp(42px, 6cqi, 84px)/0.98 var(--font-sans); letter-spacing: -0.05em; text-wrap: balance; }
.help__sub { margin: 0; max-width: 560px; font: 400 clamp(17px, 1.5cqi, 20px)/1.5 var(--font-sans); color: var(--k-body); text-wrap: pretty; }
.help__search { display: flex; align-items: center; gap: 12px; height: 60px; max-width: 620px; padding: 0 8px 0 20px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); }
.help__search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.help__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font: 400 17px var(--font-sans); color: var(--ink); }
.help__scene { width: 100%; min-width: 0; max-width: 560px; aspect-ratio: 5 / 4; }
.help__cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.help__cat { display: flex; flex-direction: column; gap: 12px; min-height: 170px; padding: 22px; border: 0; border-radius: 14px; background: var(--white); color: var(--ink); text-align: left; cursor: pointer; }
.help__cat:hover { outline: 1px solid var(--ink); }
.help__categories { display: flex; justify-content: flex-start; margin-bottom: -24px; }
.help__all { border: 1px solid var(--k-line); border-radius: 999px; padding: 10px 18px; background: var(--white); color: var(--k-fg); font: 500 14px var(--font-sans); cursor: pointer; }
.help__all:hover, .help__all[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.help__cat[aria-pressed="true"] { outline: 2px solid var(--green); outline-offset: -2px; }
.help__cat:focus-visible, .help__all:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.help__search:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.help__cat-name { flex-shrink: 0; }

.help__mark { width: 40px; height: 40px; }
.help__cat b { font: 600 19px/1.2 var(--font-sans); }
.help__cat span { font: 400 14px/1.45 var(--font-sans); color: var(--text-3); }
.help__pop { display: flex; flex-direction: column; gap: 12px; }
.help__k { font: 500 11px var(--font-mono); color: var(--k-mute); }
.help__arts { border-top: 1px solid var(--k-fg); }
.help__art { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; width: 100%; padding: 18px 0; border-bottom: 1px solid var(--k-line); color: var(--k-fg); font: 500 17px var(--font-sans); text-align: left; text-decoration: none; }
.help__art:hover { color: var(--k-fg); opacity: .7; }
.help__art[hidden] { display: none; }
.help__cat-name { font: 500 11px var(--font-mono); color: var(--k-mute); white-space: nowrap; }
@media (max-width: 640px) {
  .help__art { align-items: flex-start; flex-direction: column; gap: 6px; }
  .help__cat-name { white-space: normal; }
}

.help__empty { margin: 0; padding: 18px 0; font: 400 16px var(--font-sans); color: var(--k-body); }
.help__empty[hidden] { display: none; }
.help__resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.help__resource { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--k-line); border-radius: 14px; background: var(--white); color: var(--k-fg); text-decoration: none; }
.help__resource b { font: 600 18px/1.3 var(--font-sans); }
.help__resource span { font: 400 14px/1.5 var(--font-sans); color: var(--k-body); }
.help__resource:hover, .help__resource:focus-visible { border-color: var(--ink); color: var(--k-fg); }
.help__ct { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; padding: clamp(24px, 3cqi, 36px); border-radius: 14px; background: var(--ink); color: var(--paper); }
.help__ct-text { display: flex; flex-direction: column; gap: 6px; }
.help__ct-text b { font: 600 24px/1.2 var(--font-sans); letter-spacing: -0.02em; }
.help__ct-text span { font: 400 16px var(--font-sans); color: var(--stone); }
.help__ct-btn { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 15px var(--font-sans); text-decoration: none; }
.help__ct-btn:hover { background: var(--yellow); color: var(--ink); }

.doclist { border-top: 1px solid var(--k-fg); }
.doclist__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; width: 100%; padding: 22px 0; border-bottom: 1px solid var(--k-line); color: var(--k-fg); text-align: left; text-decoration: none; }
.doclist__row:hover { color: var(--k-fg); opacity: .7; }
.doclist__n { font: 500 12px var(--font-mono); color: var(--k-mute); }
.doclist__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.doclist__text b { font: 600 clamp(18px, 1.8cqi, 22px)/1.25 var(--font-sans); letter-spacing: -0.015em; }
.doclist__text span { font: 400 15px/1.45 var(--font-sans); color: var(--k-body); }
.doclist__meta { font: 500 11px var(--font-mono); color: var(--k-mute); white-space: nowrap; }

.jobs { display: flex; flex-direction: column; gap: 24px; }
.jobs__empty { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px 32px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--k-fg); border-bottom: 1px solid var(--k-line); }
.jobs__empty b { font: 600 clamp(22px, 2.2cqi, 28px)/1.2 var(--font-sans); letter-spacing: -0.02em; }
.jobs__empty span { max-width: 560px; font: 400 16px/1.55 var(--font-sans); color: var(--k-body); text-wrap: pretty; }
.jobs__rows { border-top: 1px solid var(--k-fg); }
.jobs__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px 24px; align-items: center; width: 100%; padding: 22px 0; border-bottom: 1px solid var(--k-line); color: var(--k-fg); text-align: left; text-decoration: none; }
.jobs__row:hover { color: var(--k-fg); opacity: .7; }
.jobs__row b { font: 600 20px var(--font-sans); }
.jobs__row span { font: 400 15px var(--font-sans); color: var(--k-body); }
.jobs__row .jobs__type { justify-self: end; font: 500 11px var(--font-mono); color: var(--k-mute); }
.jobs__gen { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; padding: clamp(24px, 3cqi, 36px); border-radius: 14px; background: var(--k-card); }
.jobs__gen-text { display: flex; flex-direction: column; gap: 6px; max-width: 620px; }
.jobs__gen-text b { font: 600 22px/1.2 var(--font-sans); letter-spacing: -0.02em; }
.jobs__gen-text span { font: 400 16px/1.5 var(--font-sans); color: var(--k-body); }
.jobs__btn { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border-radius: 999px; background: var(--green); color: var(--white); font: 600 15px var(--font-sans); text-decoration: none; }
.jobs__btn:hover { background: var(--green-dark); color: var(--white); }

.sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px 28px; }
.sitemap__col { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--k-fg); }
.sitemap__t { margin-bottom: 8px; font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--k-mute); }
.sitemap__link { padding: 6px 0; color: var(--k-fg); font: 500 16px/1.35 var(--font-sans); text-align: left; text-decoration: none; }
.sitemap__link:hover { color: var(--k-fg); text-decoration: underline; }

.assets { display: flex; flex-direction: column; gap: 48px; }
.assets__group { display: flex; flex-direction: column; gap: 18px; }
.assets__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--k-fg); }
.assets__head b { font: 600 clamp(20px, 2cqi, 24px)/1.2 var(--font-sans); letter-spacing: -0.02em; }
.assets__head span { max-width: 560px; font: 400 15px/1.5 var(--font-sans); color: var(--k-body); text-wrap: pretty; }
.assets__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.assets__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--k-line); border-radius: 14px; background: var(--white); }
.assets__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 12% 14%; border-bottom: 1px solid var(--k-line); }
.assets__media img { display: block; max-width: 100%; max-height: 100%; }
.assets__soon { font: 500 11px var(--font-mono); letter-spacing: .04em; color: var(--text-2); text-align: center; }
.assets__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; }
.assets__name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.assets__name b { font: 600 15px/1.3 var(--font-sans); color: var(--ink); }
.assets__name span { font: 500 11px var(--font-mono); color: var(--text-2); }
.assets__dl { display: flex; flex: none; gap: 6px; }
.assets__btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font: 600 13px var(--font-sans); text-decoration: none; }
.assets__btn:hover { background: var(--ink); color: var(--white); }
.assets__btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.assets__btn--alt { border-color: var(--border); }
.assets__btn--alt:hover { background: none; border-color: var(--ink); color: var(--ink); }

.swatches { display: flex; flex-direction: column; gap: 40px; }
.swatches__brand { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.swatch { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--k-line); border-radius: 14px; background: var(--white); }
.swatch__chip { height: 120px; }
.swatch__text { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.swatch__text b { font: 600 15px var(--font-sans); color: var(--ink); }
.swatch__code { font: 500 12px var(--font-mono); color: var(--ink); }
.swatch__role { font: 400 13px/1.45 var(--font-sans); color: var(--text-2); text-wrap: pretty; }
.swatches__prods { display: flex; flex-direction: column; gap: 14px; }
.swatches__head b { font: 600 20px var(--font-sans); letter-spacing: normal; }
.swatches__head span { text-wrap: wrap; }
.swatches__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.swatch-prod { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--k-line); border-radius: 12px; background: var(--white); }
.swatch-prod svg { flex: none; width: 22px; height: 22px; }
.swatch-prod div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.swatch-prod b { font: 600 14px var(--font-sans); color: var(--ink); }
.swatch-prod span { font: 500 11px var(--font-mono); color: var(--text-2); }

.founder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(32px, 5cqi, 80px); align-items: start; }
.founder__fig { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: min(100%, 480px); margin: 0; }
.founder__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--sand); }
.founder__slot { position: absolute; inset: 0; }
.founder__fig figcaption { display: flex; justify-content: space-between; gap: 12px; font: 500 11px var(--font-mono); color: var(--k-mute); }
.founder__text { display: flex; flex-direction: column; gap: 22px; }
.founder__eyebrow { font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--k-mute); }
.founder__title { margin: 0; font: 600 clamp(40px, 5.2cqi, 72px)/0.95 var(--font-sans); letter-spacing: -0.05em; text-wrap: balance; }
.founder__lead { margin: 0; font: 500 clamp(21px, 2cqi, 27px)/1.35 var(--font-sans); letter-spacing: -0.02em; text-wrap: pretty; }
.founder__paras { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.founder__paras p { margin: 0; font: 400 17px/1.65 var(--font-sans); color: var(--k-body); text-wrap: pretty; }
.founder__sign { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.founder__sign b { font: 600 18px var(--font-sans); letter-spacing: -0.01em; }
.founder__sign span { font: 400 15px var(--font-sans); color: var(--k-mute); }
.founder__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 0 20px; border-top: 1px solid var(--k-fg); }
.founder__fact { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--k-line); }
.founder__fact span:first-child { font: 500 11px var(--font-mono); color: var(--k-mute); }
.founder__fact span:last-child { font: 500 15px/1.4 var(--font-sans); }
.founder__actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.founder__btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; background: var(--green); color: var(--white); font: 600 15px var(--font-sans); text-decoration: none; }
.founder__btn:hover { background: var(--green-dark); color: var(--white); }
.founder__press { padding: 0; font: 500 15px var(--font-sans); color: var(--k-fg); text-decoration: underline; text-underline-offset: 3px; }
.founder__press:hover { color: var(--k-fg); }

.errpage { display: flex; flex-direction: column; gap: clamp(40px, 6cqi, 72px); }
.errpage__main { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5cqi, 72px); align-items: center; min-height: min(64vh, 600px); }
.errpage__text { display: flex; flex-direction: column; gap: 22px; }
.errpage__eyebrow { font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--k-mute); }
.errpage__code { display: flex; align-items: flex-start; font: 600 clamp(104px, 17cqi, 232px)/0.84 var(--font-sans); letter-spacing: -0.06em; color: var(--ink); }
.errpage__code svg { flex: none; width: .24em; height: .24em; margin-top: .02em; margin-left: .05em; fill: var(--green); }
.errpage__title { margin: 0; font: 600 clamp(34px, 4.2cqi, 58px)/1.02 var(--font-sans); letter-spacing: -0.04em; text-wrap: balance; }
.errpage__sub { margin: 0; max-width: 540px; font: 400 clamp(17px, 1.5cqi, 20px)/1.55 var(--font-sans); color: var(--k-body); text-wrap: pretty; }
.errpage__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.errpage__btn { display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--green); color: var(--white); font: 600 16px var(--font-sans); text-decoration: none; }
.errpage__btn:hover { background: var(--green-dark); color: var(--white); }
.errpage__btn--ghost { border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.errpage__btn--ghost:hover { background: var(--ink); color: var(--white); }
.errpage__ref { font: 500 11px var(--font-mono); color: var(--k-mute); }
.errpage__art { justify-self: center; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; }
.errpage__more { display: flex; flex-direction: column; gap: 14px; }
.errpage__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); column-gap: 28px; border-top: 1px solid var(--k-fg); }
.errpage__link { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--k-line); color: var(--k-fg); text-align: left; text-decoration: none; }
.errpage__link:hover { color: var(--k-fg); opacity: .7; }
.errpage__link > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.errpage__link b { font: 600 17px var(--font-sans); }
.errpage__link > span:first-child > span { font: 400 14px/1.45 var(--font-sans); color: var(--k-body); }
.errpage__arrow { font: 600 16px var(--font-sans); }

.contact { display: flex; flex-wrap: wrap; gap: clamp(32px, 5cqi, 80px); align-items: flex-start; }
.contact__info { display: flex; flex: 1 1 360px; flex-direction: column; gap: 24px; min-width: 0; }
.contact__eyebrow { font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--k-mute); }
.contact__title { margin: 0; font: 600 clamp(42px, 6cqi, 84px)/0.98 var(--font-sans); letter-spacing: -0.05em; text-wrap: balance; }
.contact__title--sub { font: 600 clamp(32px, 4.2cqi, 56px)/1 var(--font-sans); letter-spacing: -0.045em; }
.contact__sub { margin: 0; max-width: 560px; font: 400 clamp(17px, 1.5cqi, 20px)/1.5 var(--font-sans); color: var(--k-body); text-wrap: pretty; }
.contact__rows { display: flex; flex-direction: column; border-top: 1px solid var(--k-fg); }
.contact__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--k-line); }
.contact__row b { font: 600 16px var(--font-sans); }
.contact__v { font: 500 12px var(--font-mono); text-align: right; }
.contact__d { grid-column: 1 / -1; font: 400 14px var(--font-sans); color: var(--k-body); }
.contact__panel { flex: 1.2 1 440px; min-width: 0; padding: clamp(24px, 3cqi, 40px); border-radius: 14px; background: var(--white); color: var(--ink); }
.contact__form { margin: 0; }
.contact__stack { display: flex; flex-direction: column; gap: 22px; }
.contact__alert { padding: 12px 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 500 14px var(--font-sans); }
.contact__alert[hidden], .contact__err[hidden], .contact__hint[hidden] { display: none; }
.contact__err { font: 400 13px var(--font-sans); color: var(--red); }
.contact__err--indent { padding-left: 36px; }
.contact__field.is-ok .contact__input, .contact__field.is-ok .contact__area { border-color: var(--ink); }
.contact__field.is-err .contact__input, .contact__field.is-err .contact__area { border-color: var(--red); }
.contact__field.is-err .contact__chip:not([aria-pressed="true"]) { border-color: var(--red); }
.contact__chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.contact__count.is-near { color: var(--text-3); }
.contact__count.is-full { color: var(--red); }
.contact__box[aria-checked="true"] { border-color: var(--green); background: var(--green); }
.contact__box[aria-checked="true"] svg { stroke: var(--white); }
.contact__box.is-err, .contact__ts.is-err { border-color: var(--red); }
.contact__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px 16px; }
.contact__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contact__field--full { grid-column: 1 / -1; }
.contact__label-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.contact__label-row label { font: 500 14px var(--font-sans); }
.contact__label-row label span { color: var(--text-2); }
.contact__count { font: 500 12px var(--font-mono); color: var(--muted); }
.contact__input-wrap { position: relative; }
.contact__tel .contact__input-wrap { flex: 1; min-width: 0; }
.contact__input, .contact__area { width: 100%; border: 1px solid #B9B2A3; border-radius: 10px; outline: none; background: var(--white); color: var(--ink); }
.contact__input { height: 48px; padding: 0 40px 0 14px; font: 400 16px var(--font-sans); }
.contact__input--tel { letter-spacing: .02em; }
.contact__input:focus, .contact__area:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16, 99, 68, .18); }
.contact__area { padding: 12px 14px; font: 400 16px/1.45 var(--font-sans); resize: vertical; }
.contact__tel { position: relative; display: flex; gap: 8px; }
.contact__cc { display: flex; flex: none; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border: 1px solid #B9B2A3; border-radius: 10px; background: var(--white); color: var(--ink); font: 500 15px var(--font-sans); }
.contact__cc > span { font: 500 11px var(--font-mono); color: var(--text-2); }
.contact__cc svg { width: 10px; height: 10px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.contact__hint { font: 400 13px var(--font-sans); color: var(--text-2); }
.contact__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.contact__chip { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid #B9B2A3; border-radius: 999px; background: var(--white); color: var(--ink); font: 500 14px/1 var(--font-sans); white-space: nowrap; cursor: pointer; }
.contact__chip > span { display: inline-flex; align-items: flex-start; line-height: 1; }
.contact__checks { display: flex; flex-direction: column; gap: 12px; }
.contact__check { display: flex; gap: 12px; align-items: flex-start; }
.contact__check > span { font: 400 14px/1.5 var(--font-sans); }
.contact__notice { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--text-3); }
.contact__check--mkt > span { color: var(--text-3); }
.contact__box { display: flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px; padding: 0; border: 1px solid var(--ink); border-radius: 6px; background: var(--white); cursor: pointer; }
.contact__box svg, .contact__ts-box svg { width: 14px; height: 14px; fill: none; stroke: transparent; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact__doc { display: inline-block; padding: 0; font: 500 14px var(--font-sans); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.contact__doc:hover { color: var(--ink); }
.contact__req { color: var(--text-2); }
.contact__ts { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 65px; margin-top: 4px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: #FAF9F6; text-align: left; cursor: pointer; }
.contact__ts-l { display: flex; align-items: center; gap: 12px; }
.contact__ts-l > span:last-child { font: 500 14px var(--font-sans); color: var(--ink); }
.contact__ts-box { display: flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border: 2px solid var(--muted); border-radius: 6px; background: var(--white); }
.contact__ts-box svg { stroke-width: 2.4; }
.contact__submit { height: 56px; border: 0; border-radius: 999px; background: var(--green); color: var(--white); font: 600 17px var(--font-sans); cursor: pointer; }
.contact__submit:hover { background: var(--green-dark); }
.contact__note { font: 400 13px var(--font-sans); color: var(--text-2); }

.doclist__meta, .jobs__row .jobs__type { font-family: 'JetBrains Mono'; }

.contact__field-label { font: 500 14px var(--font-sans); }
.contact__field-label span { color: var(--text-2); }
.contact__chip:focus-visible, .contact__submit:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

@media (max-width: 680px) {
  .contact { gap: 24px; }
  .contact__panel { width: 100%; padding: 20px 16px; }
  .contact__fields { grid-template-columns: minmax(0, 1fr); }
  .contact__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .contact__v { text-align: left; overflow-wrap: anywhere; }
  .contact__chips { gap: 8px; }
  .contact__chip { height: auto; min-height: 44px; padding: 10px 14px; white-space: normal; line-height: 1.3; text-align: left; }
  .contact__title { font-size: clamp(34px, 10vw, 52px); line-height: 1.05; }
}

/* Editorial covers: a restrained dark veil across blog and guide photography.
   Decorative overlays never capture clicks or change the image's alt text. */
.listing__shade {
  background: linear-gradient(rgba(0, 0, 0, .10), rgba(0, 0, 0, .10)),
              linear-gradient(200deg, rgba(22, 21, 19, .34) 0%, rgba(22, 21, 19, 0) 55%);
}
.article__cover {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.article__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .10);
  border-radius: inherit;
  pointer-events: none;
}
@media (forced-colors: active) {
  .article__cover::after,
  .listing__shade { display: none; }
}