/* =====================================================================================================================
   HINNAT JA LASKURI (#hinnat .hn). KIRKAS: the intro and the three plans on a full-width Kuusi band, the calculator (the
   section's only boxed object, an instrument) straddling the band's lower edge, a hairline matrix, then the terms and the
   two actions on the page.
   Every selector starts with .hn; only styles.css :root tokens are used.
   ===================================================================================================================== */
.hn { position: relative; padding-block: 128px 96px; background-color: var(--page); color: var(--ink); }
.hn__in { box-sizing: content-box; max-width: 1312px; margin: 0 auto; padding-inline: var(--gut); }
.hn__vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hn :focus-visible { outline: 2px solid var(--kuusi); outline-offset: 3px; }

/* ---------- intro (the shared pattern) ---------- */
.hn__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; }
.hn__head { grid-column: 1 / span 6; }
.hn__kick { margin: 0; font: 600 16px/1.4 var(--f-sans); color: var(--text-2); }
.hn__h2 { margin: 16px 0 0; font-family: var(--f-disp); font-weight: 600; font-stretch: 100%; font-size: 48px; line-height: 1.06; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.hn__h2a, .hn__h2b { display: block; }
.hn__h2b { color: var(--text-2); }
.hn__lead { grid-column: 8 / span 5; margin: 0; max-width: 34em; font: 400 20px/1.55 var(--f-sans); color: var(--ink-2); }

/* ---------- the plans: three columns under one paint-line rule, no boxes ---------- */
.hn__plans { margin: 64px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 32px; border-top: 1px solid var(--rule-strong); }
.hn__plan { position: relative; grid-row: 1 / span 5; display: grid; grid-template-rows: subgrid; align-content: start; padding-top: 32px; }
.hn__plan:nth-child(1) { grid-column: 1 / span 4; }
.hn__plan:nth-child(2) { grid-column: 5 / span 4; }
.hn__plan:nth-child(3) { grid-column: 9 / span 4; }
.hn__plan + .hn__plan { padding-left: 32px; border-left: 1px solid var(--rule-strong); }
/* the plan that fits the calculator's count: the top hairline becomes a 3 px Kuusi rule, reaching the next vertical rule */
.hn__plan::before { content: ""; position: absolute; top: -1px; left: 0; right: -32px; height: 3px; background: var(--kuusi); visibility: hidden; }
.hn__plan + .hn__plan::before { left: -1px; }
.hn__plan:last-child::before { right: 0; }
.hn__plan.is-on::before { visibility: visible; }
.hn__aud { margin: 0; font: 600 16px/1.4 var(--f-sans); color: var(--text-2); }
.hn__name { margin: 8px 0 0; font: 600 20px/1.35 var(--f-sans); color: var(--ink); }
.hn__price { align-self: end; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; margin: 16px 0 0; }
.hn__from { flex: 0 0 100%; margin-bottom: 8px; font: 600 16px/1.4 var(--f-sans); color: var(--text-2); }
.hn__fig { font-family: var(--f-disp); font-weight: 700; font-stretch: 100%; font-size: 72px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hn__plan.is-on .hn__fig { color: var(--kuusi); }
.hn__unit { font: 400 15px/1.5 var(--f-sans); color: var(--ink-2); white-space: nowrap; }
.hn__line { margin: 16px 0 0; max-width: 24em; font: 400 17px/1.6 var(--f-sans); color: var(--ink); }

/* ---------- the calculator: the one boxed element, an instrument in two halves ---------- */
.hn__calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; background: var(--sheet); border: 1px solid var(--ink); }
.hn__ask { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 40px; }
.hn__out { position: relative; min-width: 0; padding: 40px; border-left: 1px solid var(--rule); }
.hn__q { font: 600 20px/1.35 var(--f-sans); color: var(--ink); cursor: pointer; }
.hn__step { display: flex; align-items: center; margin-top: 16px; }
.hn__sb { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 1px solid var(--ink); border-radius: 0; background: var(--sheet); color: var(--ink); cursor: pointer; transition: background .15s, color .15s; touch-action: manipulation; }
.hn__sb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hn__sb:hover { background: var(--ink); color: var(--sheet); }
.hn__sb:active { background: var(--kuusi); color: var(--sheet); }
.hn__sb[aria-disabled="true"] { color: var(--rule-2); background: var(--sheet); cursor: default; }
.hn__num { position: relative; z-index: 0; flex: none; width: 120px; height: 48px; margin: 0 -1px; padding: 0 8px; border: 1px solid var(--ink); border-radius: 0; background: var(--sheet); color: var(--ink);
  font: 400 32px/1 var(--f-mono); font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.hn__num::-webkit-inner-spin-button, .hn__num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hn__num:focus-visible { z-index: 1; }
.hn__suf { margin-left: 16px; font: 400 17px/1.6 var(--f-sans); color: var(--ink-2); }

/* the slider: log scale 1-400, square thumb, travel inset by half the thumb so 1 and 400 sit under the rail ends */
.hn__sl { align-self: stretch; margin-top: 32px; }
.hn__track { position: relative; height: 40px; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.hn__track:focus-visible { outline: none; }
.hn__rail { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--ink); }
.hn__fill { position: absolute; left: 0; top: 50%; width: calc(10px + var(--p, 0) * (100% - 20px)); height: 6px; margin-top: -3px; background: var(--kuusi); }
.hn__thumb { position: absolute; top: 50%; left: calc(10px + var(--p, 0) * (100% - 20px)); width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 1.5px solid var(--ink); background: var(--sheet); }
.hn__thumb::after { content: ""; position: absolute; inset: 4px; background: var(--ink); }
.hn__track:hover .hn__thumb::after, .hn__track.is-drag .hn__thumb::after { background: var(--kuusi); }
.hn__track:focus-visible .hn__thumb { outline: 2px solid var(--kuusi); outline-offset: 3px; }
.hn__ticks { position: relative; height: 24px; margin: 0; padding: 0; list-style: none; font: 400 15px/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hn__ticks li { position: absolute; top: 0; left: calc(10px + var(--p) * (100% - 20px)); padding-top: 11px; transform: translateX(-50%); }
.hn__ticks li::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 6px; background: var(--ink); }
.hn__ticks li:first-child { transform: translateX(-10px); }
.hn__ticks li:first-child::before { left: 10px; }
.hn__ticks li:last-child { transform: translateX(calc(-100% + 10px)); }
.hn__ticks li:last-child::before { left: auto; right: 10px; }

/* the plans along the scale, drawn like dimension lines; the one in use is Kuusi */
.hn__zones { position: relative; height: 24px; margin: 12px 0 0; padding: 0; list-style: none; }
.hn__zone { position: absolute; top: 0; left: calc(10px + var(--a) * (100% - 20px)); width: calc((var(--b) - var(--a)) * (100% - 20px)); padding-top: 6px; border-top: 1px solid var(--rule-2);
  font: 600 16px/1 var(--f-sans); text-align: center; white-space: nowrap; color: var(--text-2); }
.hn__zone::before, .hn__zone::after { content: ""; position: absolute; top: -4px; width: 1px; height: 7px; background: currentColor; }
.hn__zone::before { left: 0; }
.hn__zone::after { right: 0; }
.hn__zone--pt { width: auto; border-top-color: transparent; text-align: left; transform: translateX(-10px); padding-left: 0; }
.hn__zone--pt::before { left: 10px; }
.hn__zone--pt::after { display: none; }
.hn__zone.is-on { color: var(--kuusi); border-top-color: var(--kuusi); }
.hn__zone--pt.is-on { border-top-color: transparent; }
.hn__quick { display: flex; flex-wrap: wrap; align-items: baseline; margin: 24px 0 0; font: 400 15px/1.5 var(--f-sans); color: var(--ink-2); }
.hn__qk { margin-right: 8px; }
.hn__qb { min-width: 32px; padding: 6px 4px; border: 0; background: none; color: var(--ink); cursor: pointer; font: 500 15px/1.5 var(--f-mono); font-variant-numeric: tabular-nums;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hn__qb:hover { color: var(--kuusi); }
.hn__qb[aria-pressed="true"] { color: var(--kuusi); text-decoration-thickness: 2px; }
.hn__dot { padding: 0 4px; color: var(--rule-2); }
.hn__note { align-self: stretch; margin: auto 0 0; padding-top: 32px; font: 400 15px/1.5 var(--f-sans); color: var(--ink-2); max-width: 30em; }

/* the result reads like the bottom of an invoice */
.hn__pk { margin: 0; font: 600 16px/1.4 var(--f-sans); color: var(--text-2); }
.hn__total { margin: 16px 0 0; font-family: var(--f-disp); font-weight: 700; font-stretch: 100%; font-size: 72px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.hn__per { margin: 8px 0 0; font: 400 17px/1.6 var(--f-sans); color: var(--ink-2); }
.hn__formula { margin: 16px 0 0; font: 400 15px/1.5 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.hn__rows { margin: 24px 0 0; border-top: 1px solid var(--ink); }
.hn__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font: 400 15px/1.5 var(--f-mono); font-variant-numeric: tabular-nums; }
.hn__row dt { color: var(--ink-2); }
.hn__row dd { margin: 0; flex: none; text-align: right; white-space: nowrap; color: var(--ink); }
.hn__row--sum dt, .hn__row--sum dd { color: var(--ink); font-weight: 500; }

/* ---------- the matrix: a compact hairline table ---------- */
.hn__mx { margin-top: 64px; }
.hn__mxtop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.hn__mxh { margin: 0; font: 600 20px/1.35 var(--f-sans); color: var(--ink); }
.hn__mxhint { display: none; margin: 0; font: 400 15px/1.4 var(--f-mono); color: var(--ink-2); }
.hn__mxw { position: relative; }
.hn__mxw:focus-visible { outline-offset: 6px; }
.hn__tbl { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
/* columns sit on the page grid: labels on cols 1-3, the plans on 4-6, 7-9 and 10-12 */
.hn__c0, .hn__c1, .hn__c2 { width: 25.61%; }
.hn__c3 { width: 23.17%; }
.hn__tbl th, .hn__tbl td { height: 48px; padding: 8px 32px 8px 0; vertical-align: middle; }
.hn__tbl tr > :last-child { padding-right: 0; }
.hn__tbl thead th { position: relative; font: 600 15px/1.35 var(--f-sans); text-align: center; color: var(--ink); border-bottom: 1px solid var(--rule-strong); }
.hn__tbl thead th.is-on { color: var(--kuusi); }
.hn__tbl thead th.is-on::before { content: ""; position: absolute; left: 0; right: 32px; top: -1px; height: 3px; background: var(--kuusi); }
.hn__tbl thead th.is-on:last-child::before { right: 0; }
.hn__tbl tbody tr + tr > * { border-top: 1px solid var(--rule); }
.hn__tbl tbody th { font: 400 15px/1.4 var(--f-sans); text-align: left; color: var(--ink); }
.hn__tbl td { font: 400 15px/1.4 var(--f-mono); font-variant-numeric: tabular-nums; text-align: center; color: var(--ink); }
.hn__yes { display: inline-block; width: 10px; height: 10px; vertical-align: 1px; background: var(--kuusi); }
.hn__no { color: var(--ink-2); }

/* ---------- terms and the two actions ---------- */
.hn__buy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; margin-top: 48px; }
.hn__terms { grid-column: 1 / span 7; max-width: 46em; margin: 0; font: 400 15px/1.6 var(--f-sans); color: var(--ink-2); }
/* each term breaks as a unit where it can; the middle dot travels with the term before it */
.hn__t { display: inline-block; max-width: 100%; }
.hn__sep { margin: 0 4px 0 8px; color: var(--ink-2); }
/* the two actions stack at one width, flush with the matrix's right edge */
.hn__acts { grid-column: 8 / span 5; justify-self: end; display: grid; grid-auto-rows: auto; justify-items: stretch; gap: 12px; }
.hn .hn__go { justify-content: space-between; }
.hn__mail { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px; border: 1px solid var(--ink); background: var(--sheet); color: var(--ink);
  font: 600 16px/1 var(--f-sans); text-decoration: none; white-space: nowrap; transition: background .18s, color .18s; }
.hn__mail:hover { background: var(--ink); color: var(--sheet); }

/* ---------- tablets (768-1199) ---------- */
@media (max-width: 1199.98px) {
  .hn { padding-block: 96px; }
  .hn__intro { column-gap: 24px; }
  .hn__head { grid-column: 1 / span 7; }
  .hn__lead { grid-column: 8 / span 5; font-size: 18px; }
  .hn__plans { column-gap: 24px; }
  .hn__plan + .hn__plan { padding-left: 24px; }
  .hn__plan::before { right: -24px; }
  .hn__plan:last-child::before { right: 0; }
  .hn__calc { grid-template-columns: minmax(0, 1fr); }
  .hn__out { border-left: 0; border-top: 1px solid var(--rule); }
  .hn__note { padding-top: 24px; }
  .hn__buy { display: block; }
  .hn__terms { max-width: 40em; }
  .hn__acts { justify-self: start; margin-top: 24px; }
}

/* ---------- phones (< 768): 4 columns, 16 px gutters ---------- */
@media (max-width: 767.98px) {
  .hn { padding-block: 72px; }
  .hn__intro { display: block; }
  .hn__h2 { margin-top: 12px; font-size: 32px; line-height: 1.12; }
  .hn__lead { margin-top: 20px; font-size: 18px; }
  .hn__plans { display: block; margin-top: 40px; border-top: 0; }
  .hn__plan { display: block; padding: 32px 0 0; border-top: 1px solid var(--rule-strong); }
  .hn__plan + .hn__plan { margin-top: 32px; padding-left: 0; border-left: 0; }
  .hn__plan::before, .hn__plan + .hn__plan::before, .hn__plan:last-child::before { left: 0; right: 0; }
  .hn__price { margin-top: 16px; }
  .hn__fig { font-size: 56px; }
  .hn__line { margin-top: 12px; }
  .hn__calc { margin-top: 40px; }
  .hn__ask, .hn__out { padding: 20px; }
  .hn__ask { align-items: stretch; }
  .hn__step { margin-top: 12px; }
  .hn__num { flex: 1 1 auto; width: auto; min-width: 0; }
  .hn__suf { display: none; }
  .hn__sl { margin-top: 24px; }
  .hn__quick { margin-top: 16px; }
  .hn__note { padding-top: 16px; }
  .hn__total { margin-top: 12px; font-size: 56px; }
  .hn__row { flex-wrap: wrap; row-gap: 0; }
  .hn__row dt { flex: 1 1 12em; }
  .hn__mx { margin-top: 48px; }
  .hn__mxhint { display: block; }
  .hn__mxw { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .hn__tbl { min-width: 640px; }
  .hn__c0 { width: 25%; } .hn__c1, .hn__c2, .hn__c3 { width: 25%; }
  .hn__tbl td { font-size: 15px; }
  .hn__tbl tbody th { font-size: 15px; }
  .hn__tbl th, .hn__tbl td { padding-right: 12px; }
  .hn__tbl thead th.is-on::before { right: 12px; }
  .hn__tbl tbody th, .hn__tbl thead th:first-child { position: sticky; left: 0; z-index: 1; background-color: var(--page); box-shadow: 1px 0 0 var(--rule); }
  .hn__buy { margin-top: 40px; }
  .hn__acts { justify-self: stretch; }
  .hn .hn__go, .hn__mail { width: 100%; }
}

/* the narrowest phones: 240 and 400, and the Starter and Pro labels, would touch under the rail. The marks stay; 240 is a quick value and the result names the plan. */
@media (max-width: 459.98px) {
  .hn__ticks li.hn__tk240 { color: transparent; }
  .hn__zone--pt { color: transparent; }
  .hn__zone--pt::before { background: var(--ink-2); }
  .hn__zone--pt.is-on::before { background: var(--kuusi); }
}

/* buyer pass 2: long table values break only at their joints */
.hn__nw { white-space: nowrap; }

/* buyer pass 2, phones: all three plans fit the screen (Salkku is the column a toimisto reads, so it is never off to the
   right), and the terms read as a short list instead of a run with dots at the line ends */
@media (max-width: 767.98px) {
  .hn__mxhint { display: none; }
  .hn__mxw { overflow-x: visible; }
  .hn__tbl { min-width: 0; }
  .hn__c0 { width: 34%; } .hn__c1, .hn__c2, .hn__c3 { width: 22%; }
  .hn__tbl th, .hn__tbl td { height: 44px; padding: 10px 8px 10px 0; }
  .hn__tbl tr > :last-child { padding-right: 0; }
  .hn__tbl thead th { font-size: 15px; }
  .hn__tbl thead th.is-on::before { right: 8px; }
  .hn__tbl thead th.is-on:last-child::before { right: 0; }
  .hn__tbl tbody th { font-size: 15px; line-height: 1.35; }
  .hn__tbl td { font-size: 15px; line-height: 1.4; }
  .hn__tbl tbody th, .hn__tbl thead th:first-child { position: static; box-shadow: none; background: none; }
  .hn__t { display: block; }
  .hn__t + .hn__t { margin-top: 6px; }
  .hn__sep { display: none; }
}

/* ---------- KIRKAS (27.10.): the Kuusi band. It runs full width from the section top to 120 px into the calculator;
   the intro and the plans read white on it, the plan in use carries a mint rule and the brightest figure. ---------- */
.hn { overflow: clip; isolation: isolate; }
.hn__calc { position: relative; }
.hn__calc::before { content: ""; position: absolute; z-index: -1; left: -100vw; right: -100vw; bottom: calc(100% - 120px); height: 4000px; background: var(--kuusi); pointer-events: none; }
.hn__kick, .hn__aud { color: var(--mint-tx); }
.hn__h2, .hn__name { color: #FFFFFF; }
.hn__h2b { color: rgba(255,255,255,.62); }
.hn__lead { color: rgba(255,255,255,.84); }
.hn__plans { border-top-color: rgba(255,255,255,.26); }
.hn__plan + .hn__plan { border-left-color: rgba(255,255,255,.26); }
.hn__plan { border-top-color: rgba(255,255,255,.26); }
.hn__plan::before { background: var(--mint-tx); }
.hn__from, .hn__unit { color: rgba(255,255,255,.7); }
.hn__fig { color: rgba(255,255,255,.78); }
.hn__plan.is-on .hn__fig { color: #FFFFFF; }
.hn__line { color: rgba(255,255,255,.86); }

/* ---------- V6 PINNAT (27.10.): the calculator as a white sheet with soft elevation, rounded controls, the Starter
   gross price and the board kit, the terms as plain sentences, and one list per plan on phones (no sideways table) ---------- */
.hn__kick { font-size: 16px; }
.hn__h2 { font-weight: 700; font-stretch: 106%; line-height: 1.04; }
.hn__aud { font-size: 16px; }
.hn__name { font-size: 22px; font-weight: 700; }
.hn__fig { font-weight: 760; font-stretch: 110%; }
.hn__unit { font-size: 16px; }
.hn__gross { display: block; margin-bottom: 8px; font: 600 16px/1.4 var(--f-sans); color: #FFFFFF; }
.hn__line { font-size: 17px; }
.hn__kit { justify-self: start; align-self: start; margin-top: 14px; font: 600 16px/1.4 var(--f-sans); color: #FFFFFF;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.hn__kit:hover { color: var(--mint-tx); }

.hn__calc { border: 0; border-radius: var(--r-sheet); box-shadow: var(--sh-card); }
.hn__q { font-size: 20px; }
.hn__sb { width: 52px; height: 52px; border: 1.5px solid var(--edge); background: var(--sheet); }
.hn__sb:first-child { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.hn__step .hn__sb:last-of-type { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.hn__sb svg { stroke-width: 2; stroke-linecap: round; }
.hn__sb:hover { background: var(--sunken); color: var(--ink); }
.hn__sb:active { background: var(--selected); color: var(--kuusi); }
.hn__num { height: 52px; margin: 0 -1.5px; border: 1.5px solid var(--edge); font: 600 30px/1 var(--f-disp); font-stretch: 105%; }
.hn__suf { font-size: 17px; }
.hn__rail { height: 4px; margin-top: -2px; border-radius: 2px; background: var(--rule); }
.hn__fill { height: 6px; margin-top: -3px; border-radius: 3px; }
.hn__thumb { width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 2px solid var(--kuusi); border-radius: 8px; background: var(--sheet); box-shadow: var(--sh-raised); }
.hn__thumb::after { inset: 5px; border-radius: 3px; background: var(--kuusi); }
.hn__ticks li::before { background: var(--edge); }
.hn__ticks { height: 28px; }
.hn__zones { height: 30px; }
.hn__zone { font-size: 15px; font-weight: 600; }
.hn__qb { font-weight: 600; }
.hn__note { font-size: 16px; }
.hn__pk { font-size: 16px; }
.hn__total { font-weight: 760; font-stretch: 110%; }
.hn__formula { font-size: 16px; }
.hn__rows { border-top-color: var(--rule); }
.hn__row { font-size: 16px; }
.hn__row--sum dt, .hn__row--sum dd { font-weight: 600; }
.hn__mxh { font-size: 22px; font-weight: 700; }
.hn__tbl thead th { font-size: 16px; }
.hn__tbl tbody th { font-size: 16px; }
.hn__tbl td { font-size: 16px; }
.hn__tbl thead th.is-on::before { border-radius: 2px; }
.hn__yes { width: 12px; height: 12px; border-radius: var(--r-mark); }
.hn__terms { margin: 0; padding: 0; list-style: none; font-size: 16px; color: var(--ink-2); }
.hn__terms li { position: relative; padding-left: 22px; }
.hn__terms li + li { margin-top: 8px; }
.hn__terms li::before { content: ""; position: absolute; left: 0; top: .58em; width: 10px; height: 10px; border-radius: var(--r-mark); background: var(--kuusi); }
.hn__mail { height: 60px; border: 1.5px solid var(--edge); border-radius: var(--r-btn); font-size: 17px; }
.hn__mail:hover { background: var(--sunken); color: var(--ink); }
.hn__lists { display: none; }

@media (max-width: 767.98px) {
  .hn__fig { font-size: 56px; }
  .hn__total { font-size: 52px; }
  .hn__ask, .hn__out { padding: 24px 20px; }
  .hn__mxw, .hn__mxw .hn__tbl { display: none; }
  .hn__lists { display: block; }
  .hn__ls { padding: 20px 20px 22px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--sh-card); }
  .hn__ls + .hn__ls { margin-top: 16px; }
  .hn__lsn { margin: 0; font: 700 22px/1.25 var(--f-sans); color: var(--ink); }
  .hn__ls[data-plan].is-on .hn__lsn { color: var(--kuusi); }
  .hn__lsp { margin: 6px 0 0; font: 600 17px/1.45 var(--f-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
  .hn__lsg { font-weight: 400; color: var(--ink-2); }
  .hn__lsr { margin: 14px 0 0; border-top: 1px solid var(--rule); }
  .hn__lsr > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 400 16px/1.4 var(--f-sans); }
  .hn__lsr dt { color: var(--ink-2); }
  .hn__lsr dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); }
  .hn__lsk { margin: 14px 0 0; font: 600 16px/1.35 var(--f-sans); color: var(--text-2); }
  .hn__lsf { margin: 6px 0 0; padding: 0; list-style: none; font: 400 16px/1.45 var(--f-sans); color: var(--ink); }
  .hn__lsf li { position: relative; padding: 3px 0 3px 22px; }
  .hn__lsf li::before { content: ""; position: absolute; left: 0; top: calc(3px + .5em); width: 10px; height: 10px; border-radius: var(--r-mark); background: var(--kuusi); }
  .hn__lsx { margin: 10px 0 0; font: 400 16px/1.45 var(--f-sans); color: var(--ink-2); }
}
@media (max-width: 767.98px) { .hn__h2 { font-stretch: 100%; } }

/* ---------- V6 CRITIC (27.10.): the narrowest phones keep the Starter label hidden when Starter is the chosen plan
   too (it would touch "Pro"); the result line names the plan ---------- */
@media (max-width: 459.98px) { .hn__zone--pt.is-on { color: transparent; } }