.hp {
  --hp-amber-on-green: #F5C46B;
  --hp-line-on-dark: rgb(255 255 255 / 0.18);
  --hp-focus-on-dark: var(--white);
}
.hp-dark :focus-visible { outline-color: var(--hp-focus-on-dark); }
.hp .site-footer { margin-top: 0; }
.hp .site-footer .brand { color: var(--white); }
.hp-band { background: var(--green-800); color: var(--white); padding: var(--sp-8) 0 112px; }
.hp-band__in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6) var(--sp-10); align-items: end; }
.hp--home .hp-band__in { grid-template-columns: minmax(0, 1fr); }
.hp--home .tsearch { max-width: 520px; }
.hp-band h1 {
  color: var(--white);
  font-size: clamp(2.125rem, 1.25rem + 2.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 20ch;
}
.hp-lede { margin-top: var(--sp-4); font-size: var(--fs-18); line-height: 1.5; color: var(--green-100); max-width: 60ch; text-wrap: pretty; }
.hp-proofline { margin-top: var(--sp-3); font-size: var(--fs-15); line-height: 1.45; color: var(--green-100); }
.hp-proofline a { color: var(--white); font-weight: var(--fw-medium); text-underline-offset: 3px; white-space: nowrap; }
.hp-crumbs { margin: 0 0 var(--sp-3); color: var(--green-100); }
.hp-crumbs a { --slop-allow: underlined-text;  color: var(--green-100); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.4); }
.hp-crumbs a:hover { color: var(--white); text-decoration-color: currentColor; }
.hp-crumbs li + li::before { color: var(--green-300); }
.hp .hp-band { padding-bottom: var(--sp-10); }
.hp-tiles { margin-top: var(--sp-10); }
.tg { --tg-c: var(--green-700); }
.tg + .tg { margin-top: var(--sp-10); }
.tg__band { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-4); padding: 14px var(--sp-5); border-radius: var(--radius-panel); }
.tg__band h3 { font-size: var(--fs-20); font-weight: var(--fw-semibold); line-height: 1.3; color: inherit; }
.tg__band p { font-size: var(--fs-15); line-height: 1.4; }
.tg--pay .tg__band { background: var(--green-700); color: var(--white); }
.tg--pay .tg__band p { color: var(--green-100); }
.tg--hrs { --tg-c: var(--green-600); }
.tg--hrs .tg__band { background: var(--green-100); color: var(--green-800); }
.tg--hrs .tg__band p { color: var(--ink-700); }
.tg--rates { --tg-c: var(--amber-700); }
.tg--rates .tg__band { background: var(--amber-100); color: var(--ink-900); }
.tg--rates .tg__band p { color: var(--ink-700); }
.tg--cnv { --tg-c: var(--green-800); }
.tg--cnv .tg__band { background: var(--green-50); color: var(--green-800); }
.tg--cnv .tg__band p { color: var(--ink-700); }
.tiles { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--sp-3); }
.tiles > li { display: flex; min-width: 0; }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 172px;
  padding: var(--sp-5); background: var(--white); color: var(--ink-900);
  background: color-mix(in srgb, var(--tg-c) 5%, var(--white));
  border: 1px solid var(--ink-200); border-color: color-mix(in srgb, var(--tg-c) 22%, var(--white)); border-radius: var(--radius-card);
  text-decoration: none; cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), background-color var(--dur-press) var(--ease-out);
}
.tile__icon { width: 32px; height: 32px; flex: none; margin-bottom: var(--sp-2); color: var(--tg-c); }
.tile__name { font-size: var(--fs-17); font-weight: var(--fw-semibold); line-height: 1.25; overflow-wrap: anywhere; }
.tile__line { font-size: var(--fs-14); line-height: 1.4; color: var(--ink-600); }
.tile__go { position: absolute; top: var(--sp-5); right: var(--sp-5); width: 20px; height: 20px; color: var(--tg-c); opacity: 0; transition: opacity var(--dur-ui) var(--ease-out); }
.tile:hover, .tile:focus-visible { border-color: var(--tg-c); box-shadow: var(--shadow-2); }
.tile:hover .tile__go, .tile:focus-visible .tile__go { opacity: 1; }
.tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tile:active { background: color-mix(in srgb, var(--tg-c) 12%, var(--white)); box-shadow: none; }
.tile--more { background: var(--green-50); border-color: transparent; justify-content: flex-end; }
.tile--more .tile__name { color: var(--green-800); }
.tile--more .tile__go { opacity: 1; }
.tile--more:active { background: var(--green-100); }
.tiles--n3, .tiles--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hp-all { margin-top: var(--sp-8); font-size: var(--fs-18); font-weight: var(--fw-semibold); }
.tsearch { position: relative; }
.tsearch__label { display: block; margin-bottom: var(--sp-2); font-weight: var(--fw-medium); font-size: var(--fs-15); color: var(--white); }
.tsearch__box { position: relative; }
.tsearch__input {
  width: 100%; height: 52px; padding: 0 var(--sp-4);
  border: 0; border-radius: var(--radius-field);
  background: var(--white); color: var(--ink-900);
  font-size: var(--fs-17);
}
.tsearch__input::placeholder { color: var(--ink-500); }
.tsearch__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.tsearch__key { font-size: var(--fs-13); font-weight: var(--fw-regular, 400); color: var(--green-100); }
.tsearch__key kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; border: 1px solid rgb(255 255 255 / 0.4); border-radius: 4px; font: inherit; text-align: center; }
@media (hover: none) { .tsearch__key { display: none; } }
.tsearch__icon { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--ink-500); pointer-events: none; z-index: 1; }
.tsearch .tsearch__input { height: 3.75rem; padding: 0 calc(52px + 6.25rem) 0 48px; border-radius: 12px; font-size: var(--fs-18); box-shadow: 0 1px 2px rgb(4 30 22 / 0.20); }
.tsearch__clear { position: absolute; right: calc(12px + 6.25rem); top: 50%; width: 36px; height: 36px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink-600); cursor: pointer; }
.tsearch__clear[hidden] { display: none; }
.tsearch__clear:hover { background: var(--ink-50); color: var(--ink-900); }
.tsearch__clear svg { width: 18px; height: 18px; }
.tsearch__go { position: absolute; right: 6px; top: 6px; height: 3rem; min-width: 100px; padding: 0 var(--sp-5); border: 0; border-radius: 8px; background: var(--green-700); color: var(--white); font: inherit; font-size: var(--fs-16); font-weight: var(--fw-semibold); cursor: pointer; }
.tsearch__go:hover { background: var(--green-800); }
.tsearch__go:active { background: var(--green-900, var(--green-800)); }
.tsearch__popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--sp-3); font-size: var(--fs-14); color: var(--green-100); }
.tsearch__popular a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid rgb(255 255 255 / 0.35); border-radius: 999px; color: var(--white); text-decoration: none; font-weight: var(--fw-medium); }
.tsearch__popular a:hover { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.6); }
.tsearch__input:focus-visible { outline: 3px solid var(--hp-amber-on-green); outline-offset: 2px; }
.tsearch__pop {
  position: absolute; z-index: 25; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--white); color: var(--ink-900);
  border-radius: var(--radius-field);
  box-shadow: var(--shadow-3);
  max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain;
}
.tsearch__list { list-style: none; margin: 0; padding: 4px; }
.tsearch__opt {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  min-height: 44px; padding: 10px 12px; border-radius: 6px; cursor: pointer;
  font-size: var(--fs-16); line-height: 1.35;
}
.tsearch__opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tsearch__opt-name { font-weight: var(--fw-medium); color: var(--ink-900); }
.tsearch__opt-line { font-size: var(--fs-14); color: var(--ink-600); }
.tsearch__note--plain { background: none; padding: 10px 12px 2px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink-600); }
.tsearch__tag { flex: none; font-size: var(--fs-13); color: var(--ink-600); }
.tsearch__opt:hover { background: var(--ink-50); }
.tsearch__opt[aria-selected="true"] { background: var(--green-100); }
.tsearch__opt[aria-selected="true"] .tsearch__opt-name { color: var(--green-800); }
.tsearch__note { margin: 0; padding: 12px 16px; background: var(--green-50); font-size: var(--fs-15); line-height: 1.45; color: var(--ink-700); }
.tsearch__empty { padding: 14px 16px; font-size: var(--fs-15); line-height: 1.45; color: var(--ink-700); }
.tsearch__empty a { font-weight: var(--fw-medium); }
.tsearch__empty-h { font-weight: var(--fw-semibold); color: var(--ink-900); margin-bottom: 4px; overflow-wrap: anywhere; }
.hp .rail { --rail-offset: 72px; }
.hp-sec { margin-top: 72px; }
.hp-sec h2 { margin-bottom: var(--sp-4); }
.hp-p { font-size: var(--fs-17); line-height: 1.6; max-width: 68ch; color: var(--ink-700); }
.hp-p + .hp-p, .hp-p + table, table + .hp-p { margin-top: var(--sp-5); }
.hp-entity { color: var(--ink-900); }
.hp-small { margin-top: var(--sp-4); font-size: var(--fs-14); color: var(--ink-600); }
.hp-h3 { font-size: var(--fs-17); font-weight: var(--fw-semibold); }
.hp-which, .hp-rules { width: 100%; border-collapse: collapse; font-size: var(--fs-16); }
.hp-which th, .hp-rules thead th { text-align: left; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--ink-600); padding: 0 var(--sp-4) var(--sp-2) 0; border-bottom: 2px solid var(--green-700); }
.hp-which td, .hp-rules td, .hp-rules tbody th { padding: 12px var(--sp-4) 12px 0; border-bottom: 1px solid var(--color-line); vertical-align: top; text-align: left; }
.hp-which td:first-child { color: var(--ink-700); width: 52%; }
.hp-which a { font-weight: var(--fw-semibold); }
.hp-rules tbody th { font-weight: var(--fw-semibold); color: var(--green-800); width: 20%; }
.hp-rules td:last-child { width: 28%; }
.hp-rules .x { color: var(--amber-700); font-weight: var(--fw-bold); font-variant-numeric: var(--num); }
.hp-srclist { margin: var(--sp-5) 0 0; display: grid; gap: 0; }
.hp-srclist > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-4); padding: 12px 0; border-top: 1px solid var(--color-line); }
.hp-srclist > div:last-child { border-bottom: 1px solid var(--color-line); }
.hp-srclist dt { font-weight: var(--fw-semibold); color: var(--green-800); }
.hp-srclist dd { margin: 0; color: var(--ink-700); }
.hp-adband { margin-top: 72px; }
.hp-adband .ad--mpu { margin: 0 auto; padding: var(--sp-6) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
[data-ads="off"] .hp .rail,
[data-ads="off"] .hp-adband,
[data-ads="off"] .hp .ad--anchor { display: none; }
@media screen and (max-width: 760px) { [data-ads="off"] .hp { padding-bottom: 0; } }
.hp-proof { margin-top: 72px; background: var(--green-50); padding: 64px 0; }
.hp-proof__in { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-12); align-items: start; }
.hp-big { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem); font-weight: var(--fw-semibold); line-height: 1.05; letter-spacing: -0.025em; color: var(--green-800); }
.hp-big span { color: var(--ink-900); }
.hp-proof p:not(.hp-small) { margin-top: var(--sp-4); color: var(--ink-700); max-width: 52ch; }
.hp-cases { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: var(--radius-panel); font-size: var(--fs-15); font-variant-numeric: var(--num); }
.hp-cases caption { text-align: left; font-weight: var(--fw-semibold); padding-bottom: var(--sp-3); }
.hp-cases th { text-align: left; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink-600); padding: 12px 14px; border-bottom: 1px solid var(--ink-200); }
.hp-cases td { padding: 12px 14px; border-bottom: 1px solid var(--ink-100); }
.hp-cases tbody tr:last-child td { border-bottom: 0; }
.hp-cases .r { text-align: right; }
.hp-cases .ok { color: var(--green-700); font-weight: var(--fw-bold); }
.hp-srcs { list-style: none; margin: var(--sp-3) 0 0; padding: 0; font-size: var(--fs-15); }
.hp-srcs li { padding: 10px 0; border-top: 1px solid var(--green-200); }
.hp-srcs span { display: block; font-size: var(--fs-14); color: var(--ink-600); }
@media screen and (max-width: 1023px) {
  .hp-band__in { grid-template-columns: minmax(0, 1fr); }
  .hp-proof__in { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
}
@media screen and (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tiles > li { grid-column: span 2; }
  .tiles--n4 > li { grid-column: span 3; }
  .tiles--n5 > li:nth-child(n+4) { grid-column: span 3; }
}
@media screen and (max-width: 760px) {
  .hp-band { padding: var(--sp-5) 0 var(--sp-6); }
  .hp-band h1 { font-size: clamp(1.875rem, 1.2rem + 3vw, 2.25rem); }
  .hp-lede { margin-top: var(--sp-3); font-size: var(--fs-16); }
  .hp-crumbs { margin-bottom: var(--sp-2); }
  .hp-tiles { margin-top: var(--sp-6); }
  .tg + .tg { margin-top: var(--sp-8); }
  .tg__band { padding: 12px var(--sp-4); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tiles > li, .tiles--n4 > li, .tiles--n5 > li:nth-child(n+4) { grid-column: auto; }
  .tiles > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile { min-height: 156px; padding: var(--sp-4); }
  .tile__go { top: var(--sp-4); right: var(--sp-4); }
  .hp-sec, .hp-adband { margin-top: 56px; }
  .hp-proof { margin-top: 56px; padding: 44px 0; }
  .hp-srclist > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hp-which td:first-child { width: 50%; }
  .hp-rules thead { display: none; }
  .hp-rules, .hp-rules tbody, .hp-rules tr, .hp-rules th, .hp-rules td { display: block; width: auto !important; }
  .hp-rules tr { padding: 12px 0; border-bottom: 1px solid var(--color-line); }
  .hp-rules tbody th, .hp-rules td { padding: 2px 0; border: 0; }
  .hp-cases .hide-s { display: none; }
  .hp-cases th, .hp-cases td { padding: 10px 8px; }
}
@media screen and (max-width: 380px) {
  .hp-band h1 { font-size: 1.75rem; }
  .hp-lede { font-size: var(--fs-15); line-height: 1.45; }
  .hp-proofline { font-size: var(--fs-14); }
  .hp-band { padding: var(--sp-4) 0 var(--sp-5); }
  .hp-crumbs { margin-bottom: var(--sp-1); }
  .hp-lede, .hp-proofline { margin-top: var(--sp-2); }
  .hp-band__in { row-gap: var(--sp-4); }
  .tsearch__label { margin-bottom: var(--sp-1); }
  .hp-tiles { margin-top: var(--sp-4); }
  .tg__band { padding: 10px var(--sp-4); }
  .tiles { margin-top: var(--sp-2); }
}
@media screen and (max-width: 760px) { body.hp { padding-bottom: env(safe-area-inset-bottom); } }
.hp .menu-btn [data-icon] { display: inline-flex; width: 18px; }
.hp-stats-wrap { position: relative; z-index: 2; margin-top: -56px; }
.hp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-card); box-shadow: var(--shadow-2); }
.hp-stats li { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-5) var(--sp-6); }
.hp-stats li + li { border-left: 1px solid var(--ink-200); }
.hp-stats b { font-size: 2rem; line-height: 1.1; font-weight: var(--fw-bold); color: var(--green-800); font-variant-numeric: tabular-nums; }
.hp-stats span { font-size: var(--fs-14); line-height: 1.4; color: var(--ink-600); }
.hp--home .hp-tiles { margin-top: 56px; }
.hp-for h2 { margin-bottom: var(--sp-6); }
.hp-for__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); list-style: none; margin: 0; padding: 0; }
.hp-for__card { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-card); box-shadow: var(--shadow-1); }
.hp-for__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hp-for__img.ph-empty { border: 0; border-bottom: 1px dashed var(--green-300); background: var(--green-50); color: var(--green-800); }
.hp-for__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6) var(--sp-6); flex: 1; }
.hp-for__body h3 { font-size: var(--fs-20); font-weight: var(--fw-semibold); line-height: 1.3; }
.hp-for__body p { color: var(--ink-700); line-height: 1.5; }
.hp-for__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: var(--sp-2); }
.hp-for__links a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--green-50); color: var(--green-800); font-weight: var(--fw-semibold); font-size: var(--fs-15); text-decoration: none; }
.hp-for__links a:hover { background: var(--green-100); }
@media screen and (max-width: 1023px) {
  .hp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-stats li:nth-child(3) { border-left: 0; }
  .hp-stats li:nth-child(n+3) { border-top: 1px solid var(--ink-200); }
  .hp-for__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media screen and (max-width: 760px) {
  .tsearch__key { display: none; }
  .tsearch__popular { display: none; } 
  .hp--home main { display: flex; flex-direction: column; }
  .hp--home main > * { order: 3; }
  .hp--home main > .hp-hero { order: 0; }
  .hp--home main > .hp-tiles { order: 1; margin-top: var(--sp-6); }
  .hp--home main > .hp-stats-wrap { order: 2; margin-top: var(--sp-8); }
  .tsearch .tsearch__input { height: 3.5rem; padding-right: calc(28px + 6.25rem); font-size: var(--fs-16); }
  .tsearch__go { height: 2.75rem; min-width: 84px; padding: 0 var(--sp-4); }
  .tsearch__clear { right: calc(6.25rem - 4px); }
  .hp-stats li { padding: var(--sp-4); }
  .hp-stats b { font-size: 1.625rem; }
  .hp--home .hp-tiles { margin-top: 40px; }
}
body.hp main { --column: var(--column-wide); --rail-w: 0px; --rail-gap: 0px; }
@media screen and (min-width: 761px) and (max-width: 1359px) {
  body.hp main .frame { grid-template-columns: minmax(40px, 1fr) minmax(0, var(--column)) minmax(40px, 1fr); }
}
@media screen and (min-width: 1024px) {
  .hp--home .hp-hero { padding-top: var(--sp-12); }
  .hp--home .hp-hero h1 { font-size: clamp(2.5rem, 1rem + 2.3vw, 3.25rem); line-height: 1.08; letter-spacing: -0.028em; max-width: none; }
  .hp--home .hp-lede { font-size: var(--fs-20, 1.25rem); max-width: 46ch; }
  .hp--home .hp-sec { margin-top: 112px; }
  .hp--home .hp-proof { margin-top: 112px; }
  .hp--home .hp-for__grid { gap: var(--sp-8); }
}
@media screen and (min-width: 1280px) {
}
.hp-for__card { position: relative; transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); }
.hp-for__go { color: inherit; text-decoration: none; }
.hp-for__go::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hp-for__card { border-radius: var(--radius-card); }
.hp-for__links { position: relative; z-index: 2; }
.hp-for__img { transition: filter var(--dur-ui) var(--ease-out); }
.hp-for__card:has(.hp-for__go:hover):not(:has(.hp-for__links a:hover)) { border-color: var(--green-700); box-shadow: var(--shadow-2); }
.hp-for__card:has(.hp-for__go:hover):not(:has(.hp-for__links a:hover)) .hp-for__go { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--green-300); }
.hp-for__card:has(.hp-for__go:hover):not(:has(.hp-for__links a:hover)) .hp-for__img { filter: saturate(1.08) brightness(1.03); }
.hp-for__go:focus-visible { outline: none; }
.hp-for__go:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.hp-for__card:active:has(.hp-for__go:active) { background: var(--green-50); }
.hp--home .hp-hero { padding: 12px 0 var(--sp-5); color: var(--white); background: radial-gradient(120% 90% at 85% 0%, #0A5640 0%, rgb(10 86 64 / 0) 62%), var(--green-800); }
.hp-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "tool" "find"; gap: var(--sp-2) 0; }
.hp-hero__left { display: contents; }
.hp-hero__text { grid-area: text; }
.hp-hero__tool { grid-area: tool; margin-top: 4px; }
.hp-hero__find { grid-area: find; margin-top: 4px; }
.hp--home .hp-hero h1 { letter-spacing: -0.02em; }
@media screen and (max-width: 380px) { .hp--home .hp-hero h1 { font-size: 1.625rem; } }
.hp--home .hp-lede { display: none; }
.hp-hero__find .tsearch { max-width: 35rem; }
.hp-hero__find .tsearch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp--home .hp-hero__find .tsearch .tsearch__input { height: 3rem; }
.hp--home .hp-hero__find .tsearch__go { top: 4px; height: 2.5rem; }
@media screen and (min-width: 400px) {
  .hp--home .hp-lede { display: block; }
}
@media screen and (min-width: 761px) {
  .hp--home .hp-hero { padding: var(--sp-10) 0 112px; }
}
.hp--home .hp-hero > .frame { container: hero / inline-size; }
@container hero (min-width: 47.5625rem) {
  .hp-hero__in { gap: var(--sp-6); }
  .hp-hero__find .tsearch__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .hp--home .hp-hero__find .tsearch .tsearch__input { height: 3.75rem; }
  .hp--home .hp-hero__find .tsearch__go { top: 6px; height: 3rem; }
  .hp-hero__tool { max-width: 30rem; }
}
@media screen and (min-width: 761px) {
  @container hero (width < 47.5625rem) { .hp-hero__tool, .hp-hero__find .tsearch { max-width: 30rem; } }
}
@container hero (min-width: 64rem) {
  .hp-hero__in { grid-template-columns: minmax(0, 1fr) 27.5rem; grid-template-areas: "left tool"; gap: 0 4.5rem; align-items: center; }
  .hp-hero__left { display: flex; flex-direction: column; gap: var(--sp-8); grid-area: left; }
  .hp-hero__tool { max-width: none; margin: 0; }
  .hp-hero__find { margin: 0; }
  .hp-hero__find .tsearch { max-width: 37.5rem; }
}
@container hero (min-width: 64rem) and (max-width: 79.9375rem) {
  .hp-hero__in { grid-template-columns: minmax(0, 1fr) 25rem; gap: 0 3rem; }
}
@media screen and (min-width: 1024px) {
  .hp--home .tsearch__popular { flex-wrap: nowrap; gap: 6px; white-space: nowrap; }
  .hp--home .tsearch__popular a { padding: 0 11px; }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .hp--home .tsearch__popular { flex-wrap: wrap; }
}
.hp-how__lead { margin-top: var(--sp-3); font-size: var(--fs-18); line-height: 1.5; color: var(--ink-700); max-width: 64ch; text-wrap: pretty; }
.hp-steps { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; gap: var(--sp-6); }
.hp-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.hp-steps h3 { font-size: var(--fs-20); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--ink-900); }
.hp-steps h3 span { color: var(--green-700); font-variant-numeric: var(--num); margin-right: 2px; }
.hp-steps p { margin-top: 4px; font-size: var(--fs-16); line-height: 1.55; color: var(--ink-700); max-width: 42ch; }
.hp-spot { width: 56px; height: 56px; fill: none; stroke: var(--green-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-spot .f { fill: var(--green-100); }
.hp-spot .w { fill: var(--white); }
.hp-spot text { fill: var(--green-700); stroke: none; font-family: var(--font-body); font-size: 18px; font-weight: var(--fw-bold); }
.hp-how__math { margin-top: var(--sp-10); }
.hp-stub { margin: 0; display: grid; gap: var(--sp-5); }
.hp-stub__svg { display: block; width: 100%; max-width: 560px; height: auto; font-family: var(--font-body); font-size: 14px; }
.hp-stub__svg text { fill: var(--ink-900); }
.hp-stub__svg .paper { fill: var(--white); stroke: var(--ink-200); }
.hp-stub__svg .band { fill: var(--green-50); }
.hp-stub__svg .emp { font-size: 16px; font-weight: var(--fw-bold); fill: var(--green-800); }
.hp-stub__svg .sub, .hp-stub__svg .th, .hp-stub__svg .foot { fill: var(--ink-600); font-size: 12.5px; }
.hp-stub__svg .th { font-weight: var(--fw-semibold); }
.hp-stub__svg .tag { fill: var(--amber-50); stroke: var(--amber-500); }
.hp-stub__svg .tag-t { fill: var(--amber-700); font-size: 12px; font-weight: var(--fw-bold); }
.hp-stub__svg .rule { stroke: var(--ink-200); }
.hp-stub__svg .num { font-variant-numeric: tabular-nums; }
.hp-stub__svg .ot { fill: var(--amber-700); font-weight: var(--fw-semibold); }
.hp-stub__svg .gross { font-size: 16px; font-weight: var(--fw-bold); }
.hp-stub__svg .gross.num { fill: var(--green-700); }
.hp-stub__svg .mk circle { fill: var(--green-700); stroke: var(--white); stroke-width: 2; }
.hp-stub__svg .mk text { fill: var(--white); font-size: 12px; font-weight: var(--fw-bold); }
.hp-notes { list-style: none; counter-reset: note; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.hp-notes li { counter-increment: note; position: relative; padding-left: 34px; font-size: var(--fs-16); line-height: 1.5; color: var(--ink-700); }
.hp-notes li::before { content: counter(note); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--green-700); color: var(--white); font-size: var(--fs-13); font-weight: var(--fw-bold); }
.hp-notes b { color: var(--ink-900); font-variant-numeric: var(--num); }
.hp-scope { margin-top: var(--sp-8); font-size: var(--fs-15); line-height: 1.55; color: var(--ink-600); max-width: 68ch; }
.hp-src { margin-top: 56px; padding: var(--sp-6) var(--sp-5); background: var(--green-50); border-radius: 16px; }
.hp-src__lead { margin-top: var(--sp-2); color: var(--ink-700); }
.hp-srct { width: 100%; margin-top: var(--sp-4); border-collapse: collapse; font-size: var(--fs-15); line-height: 1.45; }
.hp-srct thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hp-srct tr { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--green-200); }
.hp-srct tr > * { display: block; padding: 0; text-align: left; }
.hp-srct tbody th { order: -1; font-weight: var(--fw-semibold); color: var(--ink-900); font-size: var(--fs-16); }
.hp-srct__law { color: var(--ink-700); }
.hp-srct__law a, .hp-credit a { color: var(--green-800); text-underline-offset: 2px; }
.hp-srct__date { font-size: var(--fs-14); color: var(--ink-600); font-variant-numeric: var(--num); }
.hp-srct__date::before { content: "Last checked "; }
.hp-credit { margin-top: var(--sp-4); font-size: var(--fs-13); line-height: 1.45; color: var(--ink-600); }
@media screen and (min-width: 761px) {
  .hp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .hp-steps li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--ink-200); }
  .hp-spot { width: 64px; height: 64px; }
  .hp-src { margin-top: 96px; padding: var(--sp-10); }
  .hp-srct thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .hp-srct tr { display: table-row; padding: 0; border: 0; }
  .hp-srct tr > * { display: table-cell; padding: 14px var(--sp-6) 14px 0; border-top: 1px solid var(--green-200); vertical-align: top; }
  .hp-srct tr > *:last-child { padding-right: 0; }
  .hp-srct thead th { padding-top: 0; border-top: 0; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink-600); }
  .hp-srct tbody th { font-size: var(--fs-15); width: 42%; }
  .hp-srct__law { width: 38%; }
  .hp-srct__date { white-space: nowrap; }
  .hp-srct__date::before { content: none; }
}
@media screen and (min-width: 960px) {
  .hp-stub { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-12); align-items: center; }
}
.hp-stats a { font-size: var(--fs-14); line-height: 1.4; color: var(--ink-600); text-underline-offset: 2px; }
.hp-stats a:hover { color: var(--green-800); }
.hp-hero__photo { display: none; }
@container hero (min-width: 47.5625rem) {
  .hp-hero__tool { position: relative; max-width: none; height: 33.75rem; }
  .hp-hero__photo { display: block; position: absolute; overflow: hidden; background: var(--green-700); }
  .hp-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
  .hp-hero__photo--a { top: 3rem; left: 0; width: calc(100% - 8.75rem); height: 26.25rem; border-radius: 22px; box-shadow: 0 12px 24px -16px rgb(0 0 0 / 0.35); }
  .hp-hero__photo--a img { object-position: 52% 20%; }
  .hp-hero__photo--b { top: 0; right: 0; z-index: 1; width: 11.25rem; height: 14.0625rem; border-radius: 18px; box-shadow: 0 12px 24px -16px rgb(0 0 0 / 0.35); }
  .hp-hero__photo--b img { object-position: 50% 35%; }
  .hp-hero__find .tsearch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media screen and (min-width: 1024px) {
  .hp--home .hp-hero { padding: 72px 0 136px; }
}
@container hero (min-width: 64rem) {
  .hp-hero__in { grid-template-columns: minmax(0, 1fr) 35rem; gap: 0 3.5rem; }
  .hp-hero__left { gap: var(--sp-10); }
}
@container hero (min-width: 64rem) and (max-width: 79.9375rem) {
  .hp-hero__in { grid-template-columns: minmax(0, 1fr) 30rem; gap: 0 2.5rem; }
  .hp-hero__photo--b { width: 9.75rem; height: 12.25rem; }
  .hp-hero__photo--a { width: calc(100% - 7.75rem); }
}
.hp-calc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
  grid-template-areas: "in in" "picks state" "total total" "bar bar" "out out" "foot foot";
  margin: 0; padding: 14px; background: var(--white); color: var(--ink-900); border-radius: 14px; box-shadow: var(--shadow-3); font-variant-numeric: var(--num); }
.hp-calc__head { display: contents; }
.hp-calc__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp-calc__state { grid-area: state; display: grid; align-items: center; justify-items: end; margin-top: 8px; }
.hp-calc__state > * { grid-area: 1 / 1; }
.hp-calc__tag { font-size: var(--fs-13); line-height: 24px; font-weight: var(--fw-semibold); color: var(--amber-700); pointer-events: none; transition: opacity var(--dur-ui) var(--ease-out); }
.hp-calc__reset { min-height: 24px; padding: 0 2px; border: 0; background: none; font: inherit; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; visibility: hidden; }
.hp-calc__reset:hover { color: var(--green-800); }
.hp-calc.is-edited .hp-calc__tag { opacity: 0; }
.hp-calc.is-edited .hp-calc__reset { visibility: visible; }
.hp-calc__in { grid-area: in; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border: 1px solid var(--ink-400); border-radius: 10px; background: var(--white); }
.hp-calc__in input { --slop-allow: redundant-border; }
.hp-f { position: relative; }
.hp-f label { position: absolute; z-index: 1; top: 7px; left: 12px; font-size: 0.78125rem; line-height: 1rem; font-weight: var(--fw-semibold); color: var(--ink-700); pointer-events: none; }
.hp-f:focus-within label { color: var(--green-800); }
.hp-f:has(input[aria-invalid="true"]) label { color: #B42318; }
.hp-f--rate { border-left: 1px solid var(--ink-200); }
.hp-f__row { position: relative; }
.hp-f__row input { display: block; width: 100%; height: 3.75rem; padding: 1.4375rem 5rem 5px 12px; border: 0; border-radius: 9px 0 0 9px; background: transparent; color: var(--ink-900); font: inherit; font-size: 1.25rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; font-variant-numeric: var(--num); transition: background-color var(--dur-ui) var(--ease-out); }
.hp-f--rate .hp-f__row input { padding: 1.4375rem 10px 5px 1.75rem; border-radius: 0 9px 9px 0; }
.hp-f__row input:hover { background: var(--green-50); }
.hp-f__row input:focus { outline: none; }
.hp-f__row input:focus-visible, .hp-f__row input:focus { outline: 2px solid var(--green-700); outline-offset: -2px; background: var(--white); }
.hp-f__row input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #B42318; }
.hp-f__u { position: absolute; left: 12px; bottom: 5px; line-height: 2rem; font-size: 1.25rem; font-weight: var(--fw-semibold); color: var(--ink-600); pointer-events: none; }
.hp-step { position: absolute; right: 8px; bottom: 5px; display: flex; gap: 4px; }
.hp-step button { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 8px; background: var(--green-50); color: var(--green-800); cursor: pointer; transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.hp-step svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.hp-step button:hover { background: var(--green-100); }
.hp-step button:active { background: var(--green-200); }
.hp-step button[aria-disabled="true"] { background: transparent; color: var(--ink-400); cursor: default; }
.hp-step button:focus-visible { outline: 2px solid var(--green-700); outline-offset: 1px; }
.hp-picks { grid-area: picks; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; height: 1.875rem; border: 1px solid var(--ink-400); border-radius: 8px; overflow: hidden; }
.hp-picks button { padding: 0; border: 0; background: var(--white); color: var(--ink-700); font: inherit; font-size: var(--fs-13); font-weight: var(--fw-semibold); font-variant-numeric: var(--num); cursor: pointer; transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.hp-picks button + button { border-left: 1px solid var(--ink-200); }
.hp-picks button:hover { background: var(--green-50); color: var(--green-800); }
.hp-picks button[aria-pressed="true"] { background: var(--green-700); color: var(--white); }
.hp-picks button:focus-visible { outline: 2px solid var(--green-800); outline-offset: -3px; }
.hp-picks button[aria-pressed="true"]:focus-visible { outline-color: var(--white); }
.hp-calc__in { box-shadow: inset 0 1px 2px rgb(20 35 29 / 0.07); }
.hp-step button { background: var(--white); box-shadow: 0 0 0 1px var(--ink-200), 0 1px 2px rgb(20 35 29 / 0.14), inset 0 -1px 0 rgb(20 35 29 / 0.06); }
.hp-step button:hover { background: var(--green-50); box-shadow: 0 0 0 1px var(--green-200), 0 2px 4px rgb(20 35 29 / 0.14), inset 0 -1px 0 rgb(20 35 29 / 0.06); }
.hp-step button:active { background: var(--green-100); box-shadow: 0 0 0 1px var(--green-200), inset 0 1px 3px rgb(20 35 29 / 0.20); }
.hp-step button[aria-disabled="true"] { box-shadow: 0 0 0 1px var(--ink-100); }
.hp-picks { box-shadow: 0 1px 2px rgb(20 35 29 / 0.10); }
.hp-picks button { box-shadow: inset 0 -1px 0 rgb(20 35 29 / 0.05); }
.hp-picks button:active { background: var(--green-100); box-shadow: inset 0 1px 3px rgb(20 35 29 / 0.18); }
.hp-picks button[aria-pressed="true"] { box-shadow: inset 0 1px 3px rgb(2 28 20 / 0.35); }
.hp-calc__total { grid-area: total; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 6px; height: 36px; border-top: 1px solid var(--ink-100); box-sizing: content-box; }
.hp-calc__total span { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--ink-700); }
.hp-calc__total output { font-size: 1.875rem; line-height: 36px; letter-spacing: -0.02em; font-weight: var(--fw-bold); color: var(--green-700); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp-calc.is-error .hp-calc__total output { color: var(--ink-500); }
.hp-calc__bar { grid-area: bar; display: flex; gap: 2px; height: 8px; margin: 6px 0 4px; }
.hp-calc__bar i { flex: 1 1 0; min-width: 0; border-radius: 4px; background: var(--green-700); transition: flex-grow 200ms var(--ease-out), background-color var(--dur-ui) var(--ease-out); }
.hp-calc__bar i + i { background: var(--amber-500); }
.hp-calc__bar i[style*="flex-grow: 0"] { display: none; }
.hp-calc.is-error .hp-calc__bar i { background: var(--ink-200); }
.hp-calc__out { grid-area: out; position: relative; height: 20px; }
.hp-calc__rows { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: var(--fs-13); line-height: 20px; }
.hp-calc__rows div { display: flex; gap: 6px; }
.hp-calc__rows dt { display: flex; align-items: center; color: var(--ink-700); font-weight: var(--fw-medium); white-space: nowrap; }
.hp-calc__rows dt::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--green-700); }
.hp-calc__rows .hp-calc__ot dt::before { background: var(--amber-500); }
.hp-calc__m { display: none; margin-left: 6px; font-weight: var(--fw-regular, 400); color: var(--ink-600); white-space: pre; }
.hp-calc__rows dd { margin: 0; font-weight: var(--fw-semibold); white-space: nowrap; }
.hp-calc__rows .hp-calc__ot dd { color: var(--amber-700); }
.hp-calc__err { position: absolute; inset: 0; margin: 0; font-size: var(--fs-13); line-height: 20px; font-weight: var(--fw-semibold); color: #B42318; visibility: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-calc.is-error .hp-calc__err { visibility: visible; }
.hp-calc.is-error .hp-calc__rows { visibility: hidden; }
.hp-calc.is-long .hp-calc__rows { font-size: var(--fs-12); gap: 8px; }
.hp-calc.is-long .hp-calc__rows dt::before { display: none; }
.hp-calc__foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; min-height: 24px; font-size: var(--fs-13); color: var(--ink-600); }
.hp-calc__src { display: grid; }
.hp-calc__src > span { grid-area: 1 / 1; white-space: nowrap; }
.hp-calc__rule { visibility: hidden; }
.hp-calc.is-edited .hp-calc__ex { visibility: hidden; }
.hp-calc.is-edited .hp-calc__rule { visibility: visible; }
.hp-calc__foot a { color: var(--green-700); text-underline-offset: 2px; }
.hp-calc__go { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0; border: 0; background: none; color: var(--green-700); font: inherit; font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer; }
.hp-calc__go > span { --slop-allow: underlined-text;  text-decoration: underline; text-underline-offset: 2px; }
.hp-calc__go:hover { color: var(--green-800); }
.hp-calc__go::after { content: "\2192"; }
.hp-calc__long { display: none; }
@container hero (min-width: 47.5625rem) {
  .hp-hero__tool .hp-calc { position: absolute; z-index: 1; right: 0; top: 18.375rem; width: 19.75rem; padding: 14px 16px 12px; border-radius: 16px;
    grid-template-areas: "h state" "in in" "picks picks" "total total" "bar bar" "out out" "foot foot";
    box-shadow: inset 0 1px 0 rgb(255 255 255), 0 0 0 1px rgb(2 28 20 / 0.08), 0 12px 32px -16px rgb(2 28 20 / 0.40); }
  .hp-hero__tool .hp-calc__h { grid-area: h; position: static; width: auto; height: auto; overflow: visible; clip: auto; margin-bottom: 10px; font-size: var(--fs-15); font-weight: var(--fw-semibold); line-height: 24px; color: var(--ink-900); white-space: normal; }
  .hp-hero__tool .hp-calc__state { margin: 0 0 10px; }
  .hp-hero__tool .hp-f__row input, .hp-hero__tool .hp-f__u { font-size: 1.1875rem; }
  .hp-hero__tool .hp-f__row input { padding-right: 4.5rem; }
  .hp-hero__tool .hp-f--rate .hp-f__row input { padding-right: 10px; }
  .hp-hero__tool .hp-step { bottom: 7px; }
  .hp-hero__tool .hp-step button { width: 1.75rem; height: 1.75rem; }
  .hp-hero__tool .hp-picks { height: 2rem; }
  .hp-hero__tool .hp-calc__total { margin-top: 12px; padding-top: 8px; }
  .hp-hero__tool .hp-calc__bar { margin: 8px 0 6px; }
  .hp-hero__tool .hp-calc__out { height: auto; min-height: 44px; }
  .hp-hero__tool .hp-calc__rows { flex-direction: column; gap: 4px; font-size: var(--fs-13); line-height: 20px; }
  .hp-hero__tool .hp-calc__rows div { justify-content: space-between; }
  .hp-hero__tool .hp-calc__m { display: inline; }
  .hp-hero__tool .hp-calc__err { white-space: normal; }
  .hp-hero__tool .hp-calc.is-long .hp-calc__rows { font-size: var(--fs-13); }
  .hp-hero__tool .hp-calc.is-long .hp-calc__rows dt::before { display: block; }
  .hp-hero__tool .hp-calc.is-long .hp-calc__m { display: none; }
  .hp-hero__tool .hp-calc__foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ink-100); font-size: var(--fs-12); }
  .hp-hero__tool .hp-calc__go { font-size: var(--fs-13); }
}
@container hero (min-width: 47.5625rem) and (max-width: 63.9375rem) {
  .hp-hero__tool { height: 40rem; }
}
@media screen and (min-width: 761px) {
  .hp--home .hp-hero { padding-bottom: 168px; }
}
@media screen and (min-width: 1024px) {
  .hp--home .hp-hero { padding-bottom: 196px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-calc__bar i, .hp-calc__tag, .hp-f__row input, .hp-step button, .hp-picks button { transition: none; }
}
.hp-steps li { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--sp-4); row-gap: 4px; scroll-margin-top: 96px; }
.hp-steps li > .hp-spot { grid-row: 1 / 3; width: 48px; height: 48px; }
.hp-steps li > h3 { align-self: end; }
.hp-steps li > p { margin-top: 0; }
.hp-how__math { margin-top: var(--sp-12); }
.hp-stub__h { font-size: var(--fs-20); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--ink-900); }
.hp-stub__lead { margin: 6px 0 var(--sp-5); font-size: var(--fs-16); line-height: 1.5; color: var(--ink-700); }
.hp-stub__lead a { color: var(--green-800); text-underline-offset: 2px; }
.hp-src .hp-scope { margin-top: var(--sp-5); color: var(--ink-700); }
.hp--home .hp-src { margin-bottom: 64px; }
@media screen and (min-width: 761px) {
  .hp-how__head { max-width: 720px; }
  .hp-steps { margin-top: var(--sp-10); gap: var(--sp-10); }
  .hp-steps li { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: 48px auto; column-gap: var(--sp-4); row-gap: var(--sp-3); padding-top: var(--sp-6); }
  .hp-steps li > .hp-spot { grid-row: 1; width: 48px; height: 48px; margin: 0; }
  .hp-steps li > h3 { align-self: center; }
  .hp-steps li > p { grid-column: 1 / -1; margin-top: 0; }
  .hp-how__math { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--ink-200); }
  .hp--home .hp-src { margin-top: 96px; margin-bottom: 112px; }
}
@media screen and (min-width: 960px) {
  .hp-stub { grid-template-columns: 560px minmax(0, 1fr); gap: 80px; align-items: center; }
  .hp-stub__svg { margin-left: -5.5px; }
}
.hp-stats li { align-items: center; text-align: center; }
.hp-stats span, .hp-stats a { text-wrap: balance; max-width: 24ch; }
.hp-notes a, .hp-stub__lead a { white-space: nowrap; } 
.hp--hub .tile__icon { display: none; }
.hp--hub .tile { min-height: 0; padding-block: 14px; }
@media screen and (max-width: 760px) { .hp--hub .tile { min-height: 0; } }
.hp--hub .tsearch .tsearch__input:placeholder-shown { padding-right: 116px; } 
.hp-calc { min-width: 0; overflow-wrap: break-word; }
.hp-calc__total { flex-wrap: wrap; height: auto; min-height: 36px; }
.hp-calc__total output { white-space: normal; }
.hp-calc__out { height: auto; min-height: 20px; }
.hp-calc__rows { flex-wrap: wrap; }
.hp-calc__rows div, .hp-calc__rows dt, .hp-calc__rows dd { min-width: 0; }
.hp-calc__rows dt, .hp-calc__rows dd, .hp-calc__go, .hp-calc__src > span { white-space: normal; }
.hp-calc__foot { flex-wrap: wrap; }
.hp-hero__tool { container: tool / inline-size; }
@container tool (width < 16rem) {
  .hp-calc { grid-template-areas: "in in" "picks picks" "state state" "total total" "bar bar" "out out" "foot foot"; }
  .hp-calc__state { justify-items: start; }
  .hp-calc__in { grid-template-columns: minmax(0, 1fr); }
  .hp-f--rate { border-left: 0; border-top: 1px solid var(--ink-200); }
  .hp-f__row input { border-radius: 9px 9px 0 0; }
  .hp-f--rate .hp-f__row input { border-radius: 0 0 9px 9px; }
  .hp-calc__total { flex-direction: column; align-items: flex-start; }
  .hp-calc__total output { font-size: min(1.875rem, 11cqi); line-height: 1.2; }
  .hp-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .hp-picks button { padding-block: 0.25em; white-space: nowrap; }
  .hp-picks button:nth-child(3) { border-left: 0; }
  .hp-picks button:nth-child(n+3) { border-top: 1px solid var(--ink-200); }
  .hp-hero__tool .hp-calc__rows div { flex-direction: column; gap: 0; }
  .hp-calc__rows dt, .hp-calc__rows dd { overflow-wrap: normal; }
  .hp-calc__rows dd { white-space: nowrap; }
  .hp-calc__bar { margin-top: 0.5rem; }
}
.hp-calc__go, .hp-calc__reset { position: relative; }
.hp-calc__go::before, .hp-calc__reset::before { content: ""; position: absolute; inset: -10px -6px; }
@media screen and (max-width: 15em) {
  .hp-band h1 { font-size: min(1.5rem, 10.5vw); hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
  .hp-which, .hp-which tbody, .hp-which tr, .hp-which td { display: block; width: auto !important; }
  .hp-which thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hp-which td:first-child { border-bottom: 0; padding-bottom: 0; }
}