/* Pricing · Shocking Mike Records. The front page of a broadsheet: a masthead set between heavy rules,
   one story per package running the full width of the sheet, columns under it like a newspaper, and a
   single second ink (vermilion, the old letterpress second colour) used in exactly three places —
   the masthead rule, the price figures, and the order button at the foot of each story. Nowhere else.
   Display face: Playfair Display, chosen because it carries a complete Vietnamese set with clean
   stacked diacritics at 100px+ (proof: p7-font-vietnamese.png) and the stroke contrast of a headline. */

:root {
  --bg: #1c1b1f;
  --bg-2: #252429;
  --ink: #ece8e1;
  --mute: #a9a49e;
  --line: rgba(236, 232, 225, 0.16);
  --line-2: rgba(236, 232, 225, 0.34);
  --ink-dark: #17161a;
  --thermal: #eef0ec;
  --paper: #ece7dc;
  --paper-2: #f3efe6;
  --ink-p: #17150f;
  --ink-soft: rgba(23, 21, 15, 0.66);
  --rule: rgba(23, 21, 15, 0.26);
  --rule-2: rgba(23, 21, 15, 0.5);
  /* the one second ink. Vermilion on cream is the classic letterpress second colour, it clears 5.3:1
     on this paper, and no other page in the portfolio uses it (Kern is blue, Rhumb gold, Chom rose). */
  --do: #A8341C;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --display: 'Playfair Display', 'Newsreader', Georgia, serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 0.84, 0.3, 1);
  --page-bg: var(--bg);
  --page-fg: var(--ink);
  --page-line: color-mix(in srgb, var(--page-fg) 34%, transparent);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --pad: 88px;        /* the sheet's printed margin */
  --gut: 48px;        /* gutter between newspaper columns */
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page-bg); }
html, body { margin: 0; }
body { background: var(--page-bg); color: var(--page-fg); transition: background-color 0.5s ease; }
body { font: 400 17px/1.55 var(--serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,0.55), transparent 60%), radial-gradient(1px 1px at 78% 34%, rgba(255,255,255,0.45), transparent 60%), radial-gradient(1.4px 1.4px at 55% 72%, rgba(255,255,255,0.4), transparent 60%), radial-gradient(1px 1px at 30% 86%, rgba(255,255,255,0.5), transparent 60%), radial-gradient(1px 1px at 88% 80%, rgba(255,255,255,0.35), transparent 60%), radial-gradient(1.2px 1.2px at 64% 12%, rgba(255,255,255,0.5), transparent 60%), radial-gradient(1px 1px at 40% 44%, rgba(255,255,255,0.3), transparent 60%), radial-gradient(1px 1px at 8% 60%, rgba(255,255,255,0.4), transparent 60%), var(--grain);
  background-size: 900px 700px, 1100px 800px, 800px 900px, 1000px 700px, 900px 900px, 1200px 700px, 700px 800px, 1000px 1000px, 240px 240px;
  opacity: 0.35;
}
body > * { position: relative; z-index: 1; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 13px 26px; background: color-mix(in srgb, var(--page-bg) 88%, transparent); backdrop-filter: blur(8px); }
.bar__back { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font: 500 16px/1 var(--serif); text-decoration: none; }
.bar__back:hover span { text-decoration: underline; text-underline-offset: 4px; }
.bar__name { margin: 0; display: flex; align-items: center; font: 600 17px/1 var(--serif); }
/* The wordmark is a link home, like the one on the portfolio page. */
.bar__home { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; margin: -6px -12px -6px -6px; border-radius: 999px; color: inherit; text-decoration: none; transition: background-color 0.2s ease; }
.bar__home:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.bar__home:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.bar__disc { width: 22px; height: 22px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='40%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23d0472c'/%3E%3Cstop offset='1' stop-color='%23a8341c'/%3E%3C/radialGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6e8' stop-opacity='.3'/%3E%3Cstop offset='.42' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.58' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff6e8' stop-opacity='.15'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23g)'/%3E%3Ccircle cx='50.6' cy='51.4' r='40.4' fill='%23280600' fill-opacity='.35'/%3E%3Ccircle cx='50' cy='50' r='40' fill='%230e0d10'/%3E%3Ccircle cx='50' cy='50' r='39' fill='url(%23s)'/%3E%3Ccircle cx='50' cy='50' r='14.5' fill='%23ece8e1'/%3E%3Ccircle cx='50' cy='50' r='10.4' fill='none' stroke='%23c23b22' stroke-width='1.6'/%3E%3Ccircle cx='50' cy='50' r='2.8' fill='%230e0d10'/%3E%3C/svg%3E") center / contain no-repeat; }
.lang { justify-self: end; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--page-line); background: none; font: 500 15px/1 var(--serif); }
.lang:hover { border-color: currentColor; }

/* ---------- the broadsheet ---------- */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageIn 0.45s ease both; }
.sheet {
  position: relative; max-width: 1330px; margin: 14px auto 40px; padding: 32px var(--pad) 44px;
  background: var(--paper); color: var(--ink-p);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 1px 2px rgba(0, 0, 0, 0.35), 0 24px 44px -20px rgba(0, 0, 0, 0.7);
}
.sheet::before { content: ''; position: absolute; inset: 0; background: var(--grain); background-size: 240px 240px; opacity: 0.16; mix-blend-mode: multiply; pointer-events: none; }
.sheet > * { position: relative; }

/* ---------- masthead: the title held between two heavy rules ---------- */
.mast { margin: 0; }
.mast__rule { height: 6px; background: var(--ink-p); }
.mast__rule--do { background: var(--do); }
.hero__title {
  margin: 0; padding: 8px 0 12px; font-family: var(--display); font-weight: 900;
  font-size: clamp(58px, 8.6vw, 128px); line-height: 0.92; letter-spacing: -0.035em;
}
.mast__line {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 28px;
  padding: 11px 0 12px; border-bottom: 1px solid var(--ink-p);
  font: 600 13px/1.5 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-p);
}
.mast__line span { white-space: nowrap; }

/* ---------- opening: the lead, and the small print beside it ---------- */
.opening { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: var(--gut); padding: 26px 0 0; }
.opening > * { min-width: 0; }
.hero__lead { margin: 0; max-width: 30em; font: 400 22px/1.5 var(--serif); }
.note { margin: 0; padding-left: var(--gut); border-left: 1px solid var(--rule); font: 400 16.5px/1.6 var(--serif); color: var(--ink-soft); }

.k { font: 600 13px/1.5 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- the three packages: cards, the full comparison, two add-on boxes ---------- */
.compare { margin: 46px 0 0; }
/* the cards: one mould, a 1px rule round each, square corners, a 20px gutter */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; min-width: 0; padding: 26px 26px 28px; border: 1px solid var(--rule-2); background: var(--paper-2); }
.card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.card__name { margin: 0; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.015em; }
.card__tag { font: 600 13px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-p); padding: 5px 8px 4px; border: 1px solid var(--ink-p); border-radius: 2px; }
/* the price is the biggest thing on the card; the words round the figure are small and quiet */
.card__price { margin: 18px 0 0; font: 400 17px/1.1 var(--serif); color: var(--ink-soft); }
.card__price b { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--do); font-variant-numeric: lining-nums; }
.card__time { margin: 10px 0 0; font: 500 13px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--ink-soft); }
.card__fit { margin: 12px 0 0; font: italic 400 16.5px/1.5 var(--serif); }
/* the line that says the two upper cards hold everything below them; Standard keeps it empty, so the three lists start level */
.card__plus { margin: 4px 0 0; min-height: 1.4em; font: 600 13px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-p); }
.card__list { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-2); }
.card__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; padding: 8px 0 9px; border-bottom: 1px solid var(--rule); font: 400 16.5px/1.45 var(--serif); }
.card__list li svg { position: relative; top: 1px; color: var(--ink-p); }
.card__lead span { font-style: italic; }
.card__foot { margin-top: auto; padding-top: 24px; }
.card__foot .row { margin: 0; width: 100%; justify-content: center; }
.row.row--line { background: transparent; color: var(--do); box-shadow: inset 0 0 0 1.5px var(--do); }
.row.row--line:hover { background: rgba(168, 52, 28, 0.07); }

/* the full comparison: its own heading, a head that stays put while the table scrolls past */
.cmpwrap { margin: 64px 0 0; }
.cmp__title { margin: 0 0 18px; font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -0.015em; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-variant-numeric: lining-nums tabular-nums; }
.cmp__labcol { width: 34%; }
.cmp th, .cmp td { padding: 0; vertical-align: middle; text-align: left; font-weight: 400; }
.cmp thead > tr > * { position: sticky; top: var(--bar-h, 66px); z-index: 2; background: var(--paper); border-top: 2px solid var(--ink-p); border-bottom: 1px solid var(--ink-p); padding: 14px 16px 14px; vertical-align: bottom; }
.cmp thead .cmp__c { text-align: center; border-left: 1px solid var(--rule); }
.cmp__name { display: block; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; }
.cmp__price { display: block; margin-top: 4px; font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--do); }
.cmp__go { display: inline-block; margin-top: 9px; font: 600 13px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-p); text-decoration: none; border-bottom: 1px solid currentColor; }
.cmp__go:hover { color: var(--do); }
/* groups: a name in small capitals on its own line */
.cmp .cmp__gname { padding: 30px 0 10px; border-bottom: 1px solid var(--rule-2); font: 600 13px/1.5 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
/* rows: even height, a hairline under each, thin rules between the package columns */
.cmp tbody tr:not(.cmp__group) > * { height: 48px; padding: 9px 16px 10px; border-bottom: 1px solid var(--rule); font: 400 16.5px/1.4 var(--serif); }
.cmp tbody tr:not(.cmp__group) > .cmp__label { padding-left: 0; }
.cmp td.cmp__c { text-align: center; border-left: 1px solid var(--rule); }
.cmp__c a { color: inherit; text-underline-offset: 3px; }
.tick { display: inline-block; line-height: 1; vertical-align: -1px; color: var(--ink-p); }
.cmp__note { display: block; margin-top: 3px; font: italic 400 14px/1.35 var(--serif); color: var(--ink-soft); }
.cmp__tabs { display: none; }
/* while the order form covers the page, nothing behind it needs to stay pinned */
.has-counter .cmp thead > tr > *, .has-counter .cmp__tabs { position: static; }

/* care and copywriting: two small boxes of one mould under the table */
.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 56px 0 0; }
.addon-box { padding: 24px 26px 26px; border: 1px solid var(--rule-2); background: var(--paper-2); }
.addon-box__name { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.15; }
.addon-box__price { margin: 8px 0 0; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--do); }
.addon-box__text { margin: 12px 0 0; max-width: 36em; font: 400 16.5px/1.55 var(--serif); }
.addon-box__note { color: var(--ink-soft); }
.addon-box__go { display: inline-block; margin-top: 16px; font: 600 13px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-p); text-decoration: none; border-bottom: 1px solid currentColor; }
.addon-box__go:hover { color: var(--do); }

/* narrower than three cards can hold: the cards stack, the recommended one first */
/* three across: each card's seven lines share one set of rows, so the three lists start level even when a tag or
   the "plus" line wraps on a narrower screen (2/10, measured 51 px apart at 1024 px before) */
@media (min-width: 981px) {
  .cards { grid-template-rows: repeat(7, auto); }
  .card { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
  .card__foot { align-self: end; }
  .card__head { align-self: start; }
  .card__price b { font-size: clamp(32px, 3.1vw, 44px); }
}
@media (max-width: 980px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card.is-pick { order: -1; }
  .card__fit { min-height: 0; }
}

/* ---------- section head ---------- */
.sect { padding-top: 62px; }
/* các phần cuối: giãn đúng chỗ nào một màn hình sắp quá tải chữ */
@media (min-width: 701px) {
  #sect-extras { padding-top: 150px; }
  #process { padding-top: 160px; }
  #faq { padding-top: 185px; }
  #terms { padding-top: 56px; }
  #contact { padding-top: 230px; }
}
.sect__head { display: flex; align-items: center; gap: 18px; margin: 0 0 20px; }
.sect__head .k { flex: 0 1 auto; min-width: 0; }
.sect__head::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--rule-2); }

/* ---------- one package = one block: the sample page running beside the words (s2-luat.txt) ----------
   The frame takes 56% of the sheet's width and swaps sides from one package to the next. Beside it, top to
   bottom: number, name (+ the small tag on the recommended one), price, the experience in small capitals,
   Mike's paragraph, a row of big figures, two buttons. On a narrow sheet the frame moves between the price
   and the paragraph, so a visitor meets the name, the price, then the page itself. */
.plans, .extras { list-style: none; margin: 0; padding: 0; }
.plans > li + li { margin-top: 96px; }
.plan { padding: 30px 0 0; border-top: 2px solid var(--ink-p); scroll-margin-top: 88px; }
.plan.is-picked { background: rgba(23, 21, 15, 0.045); box-shadow: 0 0 0 16px rgba(23, 21, 15, 0.045); }
.plan--pkg {
  display: grid; column-gap: 64px;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "shot ." "shot head" "shot body" "shot .";
}
.plan--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); grid-template-areas: ". shot" "head shot" "body shot" ". shot"; }
.plan--pkg > * { min-width: 0; }
.plan__head { grid-area: head; }
.plan__body { grid-area: body; }
.plan__n { display: block; margin-bottom: 8px; font: 500 13px/1.5 var(--mono); letter-spacing: 0.08em; color: var(--ink-soft); }
.plan__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.plan__name { margin: 0; font-family: var(--display); font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -0.03em; }
/* the price: the figures big in the second ink, the words round them small and quiet (as on the cards) */
.plan__price { margin: 14px 0 0; font: 400 17px/1.1 var(--serif); color: var(--ink-soft); }
.plan__price b { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--do); font-variant-numeric: lining-nums; }
.plan__price--word { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--do); }
.plan__kicker { margin: 26px 0 0; color: var(--ink-p); }
.plan__for { margin: 10px 0 0; max-width: 31em; font: 400 18.5px/1.55 var(--serif); text-wrap: pretty; }
.plan__note { color: var(--ink-soft); }
.plan__pnote { margin: 8px 0 0; max-width: 24em; font: italic 400 15.5px/1.45 var(--serif); color: var(--ink-soft); }
/* the list of what each package gives: the same ticked lines as the cards, a little larger; the upper packages open with the line that says they hold everything below them */
.plan__gets { margin: 22px 0 0; max-width: 34em; }
.plan__plus { margin: 0 0 6px; font: 600 13px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-p); }
.plan__gets ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-2); }
.plan__gets li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; padding: 7px 0 8px; border-bottom: 1px solid var(--rule); font: 400 17px/1.5 var(--serif); }
.plan__gets li svg { position: relative; top: 1px; color: var(--ink-p); }
.plan__when { margin: 10px 0 0; font: 500 13px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--ink-soft); }
/* the two short notes under the figures: an honest word on whether you need this package, and the upgrade credit */
.plan__aside { margin: 18px 0 0; max-width: 34em; }
.plan__aside-k { margin: 0 0 4px; font: 600 13px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-p); }
.plan__aside p { margin: 0; font: 400 16.5px/1.55 var(--serif); text-wrap: pretty; }
/* the figures: printed big in ink, a small label under each; three or four across */
.facts { margin: 26px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--rule-2);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 18px; }
.facts li { display: flex; flex-direction: column; gap: 6px; }
.facts b { font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: -0.02em; color: var(--ink-p); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.facts span { font: 600 13px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); text-wrap: balance; }
.plan__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
/* two buttons side by side in the text column: a little tighter than the order line elsewhere, so they fit on one line */
.plan__acts .row { margin: 0; gap: 8px; padding: 0 18px; font-size: 13.5px; letter-spacing: 0.06em; }
.row.row--ink { background: transparent; color: var(--ink-p); box-shadow: inset 0 0 0 1.5px var(--ink-p); }
.row.row--ink:hover { background: rgba(23, 21, 15, 0.06); }

/* the sample page in a thin browser frame: one hairline round it, three rings and the address in the bar */
.shot { grid-area: shot; align-self: center; margin: 0; }
/* the package text grew taller than the frame (2/10), so on a wide sheet the frame rides along beside it while it is read */
@media (min-width: 981px) { .plan--pkg .shot { align-self: start; position: sticky; top: 88px; } }
.browser { border: 1px solid var(--ink-p); background: var(--paper-2); }
.browser__bar { position: relative; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--ink-p); }
.browser__bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--rule-2); }
.browser__url { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 500 13px/1 var(--mono); letter-spacing: 0.02em; color: var(--ink-soft); white-space: nowrap; }
.browser__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.browser__view img, .browser__view video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* the video waits, invisible, over the still until its first frame is actually playing */
.browser__view video { opacity: 0; transition: opacity 0.45s ease; }
.browser__view video.is-live { opacity: 1; }
/* the Chom recording carries a 12px strip of the browser's scroll bar at its right edge: scaled just past it */
.browser__view--trim img, .browser__view--trim video { transform: scale(1.0127); transform-origin: 0 0; }

/* what no package covers: the small print under the three blocks. A hairline, not the heavy rule a package
   stands under, so it reads as the small print of all three rather than a fourth package. */
.shared { margin: 64px 0 0; padding-top: 16px; border-top: 1px solid var(--rule-2); max-width: 46em; }
.shared__k { margin: 0 0 6px; }
.shared__fine { margin: 10px 0 0; font: 400 16.5px/1.6 var(--serif); color: var(--ink-soft); }
/* what is not included: a real list, set as one run of words with dots between, the way it reads aloud */
.shared__nots { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; column-gap: 9px;
  font: 400 16.5px/1.6 var(--serif); color: var(--ink-soft); }
/* the dot trails each word rather than leading the next, so a line never starts with one */
.shared__nots li:not(:last-child)::after { content: '·'; margin-left: 9px; }

/* the order line at the foot of the story: the one button, in the second ink */
.row {
  margin: 22px 0 0; display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 26px;
  border: 0; background: var(--do); color: var(--paper); text-decoration: none; cursor: pointer;
  font: 600 14px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
  transition: background-color 0.2s ease;
}
.row:hover { background: #8d2b16; }
.row:focus-visible { outline-color: var(--ink-p); }
.row__arrow { display: grid; place-items: center; }
/* care and copywriting: the same words and buttons as a package, smaller, no picture, side by side */
.extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; align-items: stretch; }
.extras > li { display: flex; }
.plan--add { flex: 1; display: flex; flex-direction: column; }
.plan--add .plan__name { font-size: 40px; }
.plan--add .plan__price { margin-top: 12px; }
.plan--add .plan__price b { font-size: 34px; }
.plan--add .plan__for { margin-top: 14px; }
.plan--add .plan__acts { margin-top: auto; padding-top: 24px; }

/* ---------- the back of the sheet: short items, small type, hairlines ---------- */
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); }
.steps li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 22px; align-items: baseline; padding: 56px 0 58px; border-top: 1px solid var(--rule); }
.steps li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.steps__n { font-family: var(--display); font-weight: 700; font-size: 84px; line-height: 0.9; color: var(--rule-2); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.steps p { margin: 0; font: 400 16.5px/1.6 var(--serif); }

.faq { margin: 0; border-top: 1px solid var(--rule-2); }
.qa { border-bottom: 1px solid var(--rule); }
.qa > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 46px minmax(0, 1fr) 24px; column-gap: 18px; align-items: center; padding: 15px 0; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.35; }
.qa > summary::-webkit-details-marker { display: none; }
.qa__k { font: 600 13px/1.5 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.qa__q { margin: 0; font: inherit; }
.qa > p { margin: 0 0 18px; padding-left: 64px; max-width: 42em; font: 400 16.5px/1.6 var(--serif); }
.qa__sign { position: relative; flex: none; width: 13px; height: 13px; justify-self: end; }
.qa__sign::before, .qa__sign::after { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease-out); }
.qa__sign::after { transform: rotate(90deg); }
.qa[open] .qa__sign::after { transform: rotate(0deg); }
.qa:not([open]) > p, .qa:not([open]) > .terms { display: none; }
.qa--terms { border-top: 0; border-bottom: 1px solid var(--rule); }
.qa--terms > summary { grid-template-columns: minmax(0, 1fr) 24px; padding: 2px 0 14px; }
.qa--terms > summary h2 { margin: 0; }
.terms { margin: 0; padding: 0 0 8px; list-style: none; columns: 2; column-gap: var(--gut); counter-reset: term; }
.terms li { break-inside: avoid; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; align-items: baseline; padding: 11px 0 12px; border-top: 1px solid var(--rule); font: 400 16.5px/1.6 var(--serif); }
.terms li::before { content: counter(term, decimal-leading-zero); counter-increment: term; font: 500 13px/1.7 var(--mono); letter-spacing: 0.06em; color: var(--ink-soft); }

/* ---------- closing ---------- */
.closing { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: var(--gut); align-items: start; }
.closing > * { min-width: 0; }
.block__text { margin: 0; max-width: 30em; font: 400 21px/1.55 var(--serif); }
.block__mail { margin: 14px 0 0; font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1.25; }
.block__mail a { text-decoration-thickness: 1px; text-underline-offset: 6px; }
.block__foot { margin: 0; padding-left: var(--gut); border-left: 1px solid var(--rule); font: 400 16.5px/1.6 var(--serif); color: var(--ink-soft); }
.sheet__by { margin: 44px 0 0; padding-top: 12px; border-top: 6px solid var(--ink-p); font: 600 13px/1.5 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- buttons inside the counter ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font: 600 16px/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; transition: background-color 0.25s, border-color 0.25s; }
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--line { border-color: var(--line-2); background: transparent; }
.btn--line:hover { border-color: currentColor; }
.btn--text { background: none; border: 0; padding: 0 8px; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- the counter: order slip + receipt printer ---------- */
.counter {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(480px, 100vw);
  display: flex; flex-direction: column; background: var(--bg-2); color: var(--ink); border-left: 1px solid var(--line);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.6);
  transform: translate3d(104%, 0, 0); transition: transform 0.6s var(--ease-out);
}
.counter.is-in { transform: none; }
.counter__bar { flex: none; height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 26px; border-bottom: 1px solid var(--line); }
.counter__label { margin: 0; font: 600 13px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.counter__close { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font: 500 15px/1 var(--sans); }
.counter__area { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 0; display: flex; flex-direction: column; scrollbar-width: thin; }
.counter__area > .slip, .counter__area > .paper { margin-top: auto; }
.slip {
  position: relative; background: var(--paper); color: var(--ink-dark); padding: 20px 22px 16px; margin: 0 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 30px -18px rgba(0, 0, 0, 0.7);
  transition: transform 0.4s var(--ease-out), opacity 0.35s;
}
.slip::before { content: ''; position: absolute; inset: 0; background: var(--grain); background-size: 240px 240px; opacity: 0.14; mix-blend-mode: multiply; pointer-events: none; }
.slip > * { position: relative; }
.slip.is-away { transform: translate3d(0, -28px, 0) rotate(-1.5deg); opacity: 0; }
/* măng-sét của phiếu: cho xuống dòng và có khe, nếu không thì ở khổ hẹp hai cụm chữ dính vào nhau */
.slip__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-2); font: 600 13px/1.35 var(--sans); letter-spacing: 0.15em; text-transform: uppercase; }
.slip__head .mono { font: 500 13px/1 var(--mono); letter-spacing: 0.06em; }
.slip__title { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
.slip fieldset { border: 0; padding: 0; margin: 0; }
.slip__label { font: 600 13px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.slip__records { display: grid; }
.slip__records legend { margin-bottom: 6px; }
.slip__records label { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.slip__records input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.slip__records label::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink-dark); grid-column: 1; }
.slip__records label:has(input:checked)::before { background: radial-gradient(circle, var(--ink-dark) 0 4px, transparent 4.5px); }
.slip__records label:has(input:focus-visible) { outline: 2px solid var(--ink-dark); outline-offset: 2px; }
.slip__name { font: 600 18px/1.3 var(--serif); grid-column: 2; }
.slip__price { font: 600 16px/1.3 var(--serif); white-space: nowrap; }
/* Hàng của phiếu xếp theo kiểu co giãn, KHÔNG phải lưới cột cứng: nhãn chiếm trọn một dòng,
   nút −/+ và khoảng giá đứng dòng dưới. Con số đặt flex-shrink 0 nên khi hẹp nó XUỐNG DÒNG
   chứ không bị bóp lại rồi cắt cụt (lỗi 23/9: một khoảng giá bị bóp lại rồi cắt cụt). */
.slip__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.slip__row > .slip__label { flex: 1 1 100%; }
.slip__row .stepper { flex: 0 0 auto; }
.slip__row > .slip__price { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.slip__hint { flex: 1 1 100%; margin-top: -2px; font: italic 400 15px/1.4 var(--serif); opacity: 0.8; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink-dark); background: transparent; color: var(--ink-dark); font: 500 19px/1 var(--sans); display: grid; place-items: center; padding: 0; }
.stepper button:disabled { opacity: 0.35; cursor: default; }
.stepper output { min-width: 58px; text-align: center; font: 500 16px/1 var(--sans); }
.slip__toggle { cursor: pointer; position: relative; }
.slip__toggle .slip__label { text-transform: none; letter-spacing: 0; font: 500 17px/1.3 var(--serif); }
.slip__toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { width: 42px; height: 24px; border-radius: 12px; border: 1.5px solid var(--ink-dark); position: relative; transition: background-color 0.25s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--ink-dark); transition: transform 0.3s var(--ease-out); }
.slip__toggle input:checked + .switch { background: var(--ink-dark); }
.slip__toggle input:checked + .switch::after { transform: translateX(18px); background: var(--paper); }
.slip__toggle input:focus-visible + .switch { outline: 2px solid var(--ink-dark); outline-offset: 3px; }
.slip__notes { display: grid; gap: 8px; padding: 12px 0 4px; }
.slip__notes label { display: grid; grid-template-columns: 10.5em 1fr; align-items: end; gap: 10px; font: 600 13px/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.slip__notes input { width: 100%; border: 0; border-bottom: 1px solid var(--rule-2); background: transparent; border-radius: 0; font: 400 17px/1.3 var(--serif); color: var(--ink-dark); padding: 4px 0; letter-spacing: 0; text-transform: none; }
.slip__notes input::placeholder { color: rgba(23, 22, 26, 0.5); font-style: italic; font-size: 15px; }
.slip__notes input:focus { outline: none; border-bottom: 2px solid var(--ink-dark); }
.slip__total { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 0; padding-top: 12px; border-top: 2px solid var(--ink-dark); }
.slip__total span { font: 600 13px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.slip__total b { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.02em; color: var(--do); }
.slip__msg { margin: 8px 0 0; min-height: 1.2em; font: 500 15px/1.35 var(--sans); color: #8a1f2a; }
.slip__msg:empty { min-height: 0; margin: 0; }
.slip__intro { margin: 0 0 12px; font: italic 400 16px/1.45 var(--serif); }
.slip__label span, .slip__notes em { font: 500 13px/1 var(--sans); font-style: normal; letter-spacing: 0.02em; text-transform: none; opacity: 0.7; margin-left: 6px; }

.paper { container-type: inline-size; width: calc(100% - 40px); margin: 0 auto; position: relative; z-index: 1; }
/* Mép trên là chỗ tờ giấy bị GIẬT RA khỏi máy in, nên nó phải là một đường xé:
   biên không đều (hình do pricing.js dựng một lần mỗi phiên, không nhảy theo khung hình),
   cùng màu giấy, giấy mỏng ra ở mép nên sáng hơn một chút, và ngay dưới có một vệt bóng
   rất nhạt cho thấy tờ giấy có bề dày. Bản cũ là một hàng tam giác đen đều tăm tắp —
   đọc ra hoa văn trang trí chứ không ra vết xé (Mike, 23/9). */
.paper__roll {
  --xe: 15px;
  position: relative; background-color: var(--thermal); color: #1f1e22; padding: 30px 16px 34px;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 13px),
    linear-gradient(180deg, transparent 15px, rgba(0, 0, 0, 0.055) 17px, transparent 27px);
  font: 400 min(17px, calc((100cqw - 32px) / 19.4))/1.42 var(--mono);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  -webkit-mask: linear-gradient(#000, #000) 0 var(--xe) / 100% calc(100% - var(--xe)) no-repeat,
                var(--xe-hinh, linear-gradient(#000, #000)) 0 0 / 100% var(--xe) no-repeat;
          mask: linear-gradient(#000, #000) 0 var(--xe) / 100% calc(100% - var(--xe)) no-repeat,
                var(--xe-hinh, linear-gradient(#000, #000)) 0 0 / 100% var(--xe) no-repeat;
}
.paper__roll::before { content: ''; position: absolute; inset: 0; background: var(--grain); background-size: 240px 240px; opacity: 0.1; mix-blend-mode: multiply; pointer-events: none; }
.rl { position: relative; white-space: pre; min-height: 1.42em; }
.r-shop, .r-title, .r-total, .r-item, .r-thanks { font-weight: 600; }
.r-rule { opacity: 0.55; }
.r-terms { font-size: 0.84em; line-height: 1.5; opacity: 0.9; }
.r-foot { opacity: 0.9; }
.rterms { position: relative; }
.rterms > summary { list-style: none; cursor: pointer; }
.rterms > summary::-webkit-details-marker { display: none; }
.rterms > summary::after { content: ' +'; }
.rterms[open] > summary::after { content: ' −'; }
.r-item { font-weight: 600; }
.r-note { font-style: italic; }

.printer { position: relative; z-index: 2; margin: 0 22px; }
.printer__lip { height: 26px; border-radius: 12px 12px 0 0; position: relative; background: linear-gradient(#5a5960, #46454c); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset; }
.printer__slot { position: absolute; left: 14px; right: 14px; top: 9px; height: 6px; border-radius: 3px; background: #0f0f11; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12); }
.printer__face { height: 92px; border-radius: 0 0 16px 16px; padding: 0 18px; display: flex; align-items: center; gap: 14px; background: linear-gradient(#3d3c43, #2e2d33); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 30px -14px rgba(0, 0, 0, 0.75); transition: height 0.4s var(--ease-out); }
.printer__brand { font: 600 14px/1 var(--mono); color: rgba(236, 232, 225, 0.62); letter-spacing: 0.06em; }
.printer__led { width: 8px; height: 8px; border-radius: 50%; background: #86d49a; box-shadow: 0 0 8px rgba(134, 212, 154, 0.55); }
.printer__key { margin-left: auto; min-height: 50px; padding: 0 22px; border-radius: 12px; border: 0; background: linear-gradient(#f0ede6, #dcd8cf); color: var(--ink-dark); font: 700 16px/1 var(--sans); letter-spacing: 0.02em; box-shadow: 0 3px 0 #8f8b82, 0 6px 12px -4px rgba(0, 0, 0, 0.5); transition: transform 0.12s, box-shadow 0.12s; }
.printer__key:active, .printer__key:disabled { transform: translateY(2px); box-shadow: 0 1px 0 #8f8b82, 0 3px 6px -3px rgba(0, 0, 0, 0.5); }
.printer__key:disabled { cursor: default; opacity: 0.8; }
.is-printed .printer__key { display: none; }
.is-printed .printer__face { height: 54px; }
.counter__actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 22px 22px; }
.counter__actions .btn--solid { flex: 1 1 100%; }
.counter__actions .btn--line { flex: 1 1 auto; }
.counter__hint { flex: 1 1 100%; margin: -2px 0 4px; font: 400 15px/1.45 var(--sans); color: var(--mute); }
.counter__hint--warn { color: var(--ink); }

/* ---------- narrower sheets ---------- */
@media (max-width: 1180px) {
  :root { --pad: 52px; --gut: 34px; }
  .sheet { margin: 14px 18px 36px; }
  .plan--pkg { column-gap: 44px; }
  .plan__name { font-size: 50px; }
  /* a narrower column beside the frame: the figures two by two */
  .facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
}
/* too narrow for the frame and the words side by side: name and price, then the page, then the words */
@media (max-width: 980px) {
  .plan--pkg, .plan--flip { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "shot" "body"; }
  .plan--pkg .shot { margin-top: 24px; }
  .plan__kicker { margin-top: 24px; }
  .facts { grid-auto-flow: column; grid-template-columns: none; max-width: 40em; }
  .plans > li + li { margin-top: 80px; }
}
@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li:nth-child(-n+2) { border-top: 1px solid var(--rule); padding-top: 20px; }
  .steps li:first-child { border-top: 0; padding-top: 0; }
  .terms { columns: 1; }
  .opening, .closing { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .opening { row-gap: 130px; }
  .note, .block__foot { padding-left: 0; padding-top: 16px; border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---------- phone ---------- */
@media (max-width: 700px) {

  :root { --pad: 20px; --gut: 20px; }
  .bar { padding: 10px 12px; grid-template-columns: auto 1fr auto; gap: 8px; }
  .bar__name { visibility: hidden; }
  .bar__back { font-size: 15px; gap: 6px; }
  .lang { padding: 0 12px; }
  .sheet { margin: 8px 8px 30px; padding: 20px var(--pad) 28px; }
  .mast__rule { height: 4px; }
  .hero__title { font-size: clamp(40px, 12.5vw, 58px); padding: 4px 0 6px; }
  .mast__line { font-size: 13px; letter-spacing: 0.14em; gap: 4px 12px; }
  .hero__lead { font-size: 18.5px; max-width: none; }
  .note { font-size: 16.5px; }

  #sect-extras { padding-top: 230px; }
  #process { padding-top: 150px; }
  #faq { padding-top: 200px; }
  #terms { padding-top: 60px; }
  #contact { padding-top: 280px; }

  .sect { padding-top: 46px; }
  .plans > li + li { margin-top: 64px; }
  .plan { padding-top: 22px; }
  .plan__name { font-size: 42px; }
  .plan__price b { font-size: 36px; }
  .plan--add .plan__name { font-size: 32px; }
  .plan--add .plan__for { font-size: 17px; }
  /* the small print gets its own screen, apart from the last package's paragraph */
  .shared { margin-top: 150px; }
  .plan--add .plan__price b { font-size: 30px; }
  .plan__for { font-size: 18px; max-width: none; text-wrap: wrap; }
  .plan__gets, .plan__aside { max-width: none; }
  .plan__gets li, .plan__aside p { font-size: 16px; }
  .plan--pkg .shot { margin-top: 20px; }
  /* a phone: the figures two by two, the two buttons one under the other at full width */
  .facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .facts b { font-size: 34px; }
  .browser__bar { height: 30px; }
  .browser__bar i { display: none; }
  .plan__acts { flex-direction: column; gap: 10px; margin-top: 24px; }
  .extras { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .row { width: 100%; justify-content: space-between; margin-top: 20px; }

  .steps li { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; padding: 100px 0 102px; }
  .steps li:first-child { padding-top: 0; }
  .steps__n { font-size: 54px; }
  .steps p, .qa > p, .terms li { font-size: 16px; }
  .qa > summary { grid-template-columns: 34px minmax(0, 1fr) 20px; column-gap: 12px; font-size: 17px; }
  .qa > p { padding-left: 46px; }
  .terms li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; }
  .block__text { font-size: 18.5px; }
  .block__mail { font-size: 19px; word-break: break-word; }
  .sheet__by { border-top-width: 4px; }

  .counter { width: 100vw; border-left: 0; }
  .counter__area { padding: 14px 12px 0; }
  .counter__bar { height: 56px; padding: 0 12px 0 16px; }
  .slip { margin: 0 0 12px; padding: 16px 16px 14px; }
  .slip__notes label { grid-template-columns: 1fr; gap: 2px; }
  .paper { width: calc(100% - 12px); }
  .printer { margin: 0 10px; }
  /* a phone: the cards stack (the recommended one first); the table shows one package at a time, chosen with
     the three buttons over it, which stay at the top while the table scrolls past. Without JavaScript all three
     columns stay. */
  .cmp__tabs { position: sticky; top: var(--bar-h, 60px); z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--paper); border-top: 2px solid var(--ink-p); }
  .cmp__tab { appearance: none; margin: 0; border: 0; border-bottom: 1px solid var(--ink-p); background: none; color: var(--ink-soft);
    padding: 10px 8px 11px; text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; }
  .cmp__tab[aria-pressed="true"] { color: var(--ink-p); box-shadow: inset 0 -3px 0 var(--ink-p); }
  .cmp__tabname { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.15; }
  .cmp__tabprice { margin-top: 4px; font-family: var(--display); font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--do); }
  .js .cmp thead { display: none; }
  .js .cmp { table-layout: auto; }
  .js .cmp col { display: none; }
  .js .cmp .cmp__label { width: 50%; }
  .js .cmp .cmp__c { display: none; width: 50%; border-left: 0; }
  .js .cmp[data-show="standard"] .cmp__c[data-plan="standard"],
  .js .cmp[data-show="advanced"] .cmp__c[data-plan="advanced"],
  .js .cmp[data-show="custom"] .cmp__c[data-plan="custom"] { display: table-cell; }
  .cmp tbody tr:not(.cmp__group) > * { height: 46px; padding: 9px 10px 10px; font-size: 16px; }
  .cmp .cmp__gname { padding-top: 24px; }
  .cmp__title { font-size: 28px; }
  .card { padding: 22px 20px 24px; }
  .card__price b { font-size: 40px; }
  .addons { grid-template-columns: minmax(0, 1fr); }
  /* on a phone the two boxes become two ruled entries at full width, so their sentence has room to run */
  .addon-box { padding: 18px 0 20px; border-width: 2px 0 0; border-color: var(--ink-p); background: none; }
  .addons { gap: 28px; }
}
/* print or save as PDF: only the estimate */
@media print {
  body * { visibility: hidden !important; }
  .paper, .paper * { visibility: visible !important; }
  .paper { position: absolute; left: 0; top: 0; width: 100%; }
  .paper__roll { box-shadow: none; -webkit-mask: none; mask: none; font-size: 12pt; }
  .paper__roll::before { display: none; }
  .counter { position: static; transform: none; box-shadow: none; }
}
/* motion always plays (Mike, Rhumb Line): no reduced-motion branch here */