/* /pricing/ cabin map: a top-down seat map heads the comparison (Economy behind, First at the nose, Free on
   standby at the gate). The four bundle lines run below it as seat rows and open into paper safety cards.
   Plans are picked as seats. Loaded after pricing_page_inline.css; it only adds this layout and overrides
   what the old table, price grid and proceed button styled. */
@font-face { font-family: "Aeroshow Display"; src: url("/fonts/josefin-sans-latin.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Aeroshow Pass"; src: url("/fonts/ocr-b-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --cm-void: #030509;
  --cm-ink: #f6f2ea;
  --cm-dim: #b4b0a8;
  --cm-faint: #8a867f;
  --cm-line: rgba(246, 242, 234, 0.12);
  --cm-sky: #9fdfff;
  --cm-gold: #ffc878;
  --cm-gold-ink: #1d1406;
  --cm-lamp: #ffe7c7;
  --cm-paper: #f3efe6;
  --cm-paper-ink: #1c1f29;
  --cm-paper-soft: rgba(28, 31, 41, 0.66);
  --cm-navy: #18237a;
  --cm-first: #c7a9ff;
  --cm-eco: #96dca2;
  --cm-sby: #c9ccd3;
  --cm-stamp: rgba(176, 46, 38, 0.8);
  --cm-display: "Aeroshow Display", "Josefin Sans", "Century Gothic", sans-serif;
  --cm-pass: "Aeroshow Pass", "OCR-B", Consolas, monospace;
  --cm-body: "Segoe UI", Tahoma, Arial, sans-serif;
  --cm-cols: 31% repeat(3, minmax(0, 1fr));
}

/* Night cabin instead of the photo backdrop: the thin seat-map lines need a calm ground. */
html { background: var(--cm-void) !important; }
body { background: var(--cm-void); }
body::before { display: none; }
.wrap { max-width: 1240px; }
h1 { font: 300 40px/1.1 var(--cm-display); letter-spacing: 0.01em; }

.cm { margin-top: 44px; color: var(--cm-ink); }
.cm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cm-grid { display: grid; grid-template-columns: var(--cm-cols); }
.cm-top { align-items: end; }
.cm-intro { padding: 0 32px 6px 0; }
.cm-kicker { margin: 0 0 12px; font: 600 12px/1.3 var(--cm-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cm-sky); }
.cm-title { margin: 0; font: 300 34px/1.1 var(--cm-display); color: var(--cm-ink); }
.cm-lede { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--cm-dim); }
.cm-ic { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cm-dot { stroke-width: 2.6; }

/* Plan view, drawn like a seat map: its thirds sit exactly above the Economy, First and Free columns. */
.cm-plan { grid-column: 2 / -1; display: block; width: 100%; height: auto; }
.cm-plan-narrow { display: none; }
.p-lounge { fill: rgba(246, 242, 234, 0.025); }
.p-glass { fill: none; stroke: rgba(159, 223, 255, 0.45); stroke-width: 1; }
.p-gate { fill: none; stroke: rgba(246, 242, 234, 0.22); }
.p-gate-text { font: 15.5px var(--cm-pass); fill: var(--cm-dim); }
.p-seat { fill: none; stroke: rgba(246, 242, 234, 0.3); stroke-width: 1; }
.p-eseat { fill: none; stroke: rgba(246, 242, 234, 0.26); stroke-width: 3.4; }
.p-floor { fill: #0a0e16; stroke: rgba(246, 242, 234, 0.5); stroke-width: 1.1; }
.p-mood { fill: rgba(199, 169, 255, 0.06); }
.p-line { fill: none; stroke: rgba(246, 242, 234, 0.22); }
.p-box { fill: none; stroke: rgba(246, 242, 234, 0.22); }
.p-door { stroke: var(--cm-void); stroke-width: 3; }
.p-bridge { fill: var(--cm-void); stroke: rgba(246, 242, 234, 0.32); }
.p-cut { fill: var(--cm-void); }
.p-break { fill: none; stroke: rgba(246, 242, 234, 0.45); stroke-width: 1.1; }
.p-hl.is-sby { fill: var(--cm-sby); }
.p-hl.is-first { fill: var(--cm-first); }
.p-hl.is-eco { fill: var(--cm-eco); }
.p-hl-line.is-eco { stroke: var(--cm-eco); stroke-width: 3.4; }
.p-label { font: 15.5px var(--cm-pass); }
.p-label.is-sby { fill: var(--cm-sby); }
.p-label.is-first { fill: var(--cm-first); }
.p-label.is-eco { fill: var(--cm-eco); }

/* Fare keys, like the soft keys under a seatback screen; radios sit beside them so focus never scrolls. */
.cm-head { position: relative; margin-top: 18px; align-items: stretch; }
.cm-fare-input { position: absolute; left: 4px; bottom: 24px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cm-fare { display: grid; align-content: center; justify-items: start; gap: 10px; padding: 0 32px 4px 0; }
.cm-fare-keys { display: flex; width: 100%; max-width: 300px; border: 1px solid rgba(246, 242, 234, 0.2); border-radius: 10px; overflow: hidden; }
.cm-fare-keys label { flex: 1 1 0; padding: 11px 6px 10px; border-left: 1px solid rgba(246, 242, 234, 0.12); font: 600 14px/1.2 var(--cm-display); text-align: center; color: var(--cm-dim); cursor: pointer; transition: color 0.18s ease, background-color 0.18s ease; }
.cm-fare-keys label:first-child { border-left: 0; }
.cm-fare-keys label:hover { color: var(--cm-ink); }
#cm-fare-m:checked ~ .cm-fare [for="cm-fare-m"],
#cm-fare-y:checked ~ .cm-fare [for="cm-fare-y"],
#cm-fare-l:checked ~ .cm-fare [for="cm-fare-l"] { background: var(--cm-ink); color: var(--cm-void); }
#cm-fare-m:focus-visible ~ .cm-fare [for="cm-fare-m"],
#cm-fare-y:focus-visible ~ .cm-fare [for="cm-fare-y"],
#cm-fare-l:focus-visible ~ .cm-fare [for="cm-fare-l"] { outline: 2px solid var(--cm-sky); outline-offset: -4px; border-radius: 9px; }
.cm-fare-note { font-size: 13px; color: var(--cm-faint); }
.cm-fare-m, .cm-fare-y, .cm-fare-l { display: none; }
.cm-fare-all,
#cm-fare-m:checked ~ * .cm-fare-m,
#cm-fare-y:checked ~ * .cm-fare-y,
#cm-fare-l:checked ~ * .cm-fare-l { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; animation: cm-fade 0.2s ease both; }
@keyframes cm-fade { from { opacity: 0; } }

/* Pass stubs in the member pass colours. The price is the largest thing on each; the seat is a quiet tag. */
.cm-stub { display: flex; flex-direction: column; margin: 0 8px; padding: 0 18px 18px; border-radius: 12px; overflow: hidden; background: var(--cm-paper); color: var(--cm-paper-ink); }
.cm-stub::before { content: ""; height: 7px; margin: 0 -18px 16px; background: var(--band, #dddee2); }
.cm-stub.is-eco { --band: #d9f4cd; }
.cm-stub.is-first { --band: linear-gradient(90deg, #96b8ff, #cf9eff); box-shadow: 0 0 0 1px rgba(214, 178, 255, 0.45), 0 12px 30px -14px rgba(194, 166, 247, 0.6); }
.cm-stub-class { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0; font: 600 18px/1.2 var(--cm-display); }
.cm-stub-seat { padding: 4px 9px 3px; border: 1.5px solid var(--cm-paper-ink); border-radius: 999px; font: 13px/1.1 var(--cm-pass); }
.cm-stub-price { margin: 14px 0 0; font-family: var(--cm-pass); }
.cm-stub-price b { font-weight: 400; font-size: 30px; line-height: 1.1; white-space: nowrap; }
.cm-stub-price b.is-none { font-family: var(--cm-display); font-weight: 300; }
.cm-stub-price small { font: 13px/1.3 var(--cm-body); color: var(--cm-paper-soft); }
.cm-stub-note { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--cm-paper-soft); }
.cm-sby-more { display: none; }
.cm-stub-act { margin: auto 0 0; padding-top: 16px; }
.cm-choose { justify-content: center; align-items: center; width: 100%; min-height: 42px; padding: 10px 10px 9px; border: 0; border-radius: 8px; background: var(--cm-navy); color: #fff; font: 600 15px/1.2 var(--cm-display); text-align: center; cursor: pointer; transition: background-color 0.18s ease; }
.cm-choose:hover { background: #26339a; }
.cm-choose:focus-visible { outline: 2px solid var(--cm-navy); outline-offset: 2px; }
.cm-choose.is-off { background: transparent; color: var(--cm-paper-soft); box-shadow: inset 0 0 0 1px rgba(28, 31, 41, 0.2); font-weight: 400; cursor: default; }
.cm-stamp {
  display: inline-block; padding: 4px 9px; border: 3px double var(--cm-stamp); border-radius: 6px; color: var(--cm-stamp);
  font: 14px/1 var(--cm-pass); letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-5deg);
  /* Uneven ink, as a rubber stamp leaves it (same stamp as the guest pass). */
  -webkit-mask: repeating-linear-gradient(115deg, #000 0 7px, rgba(0, 0, 0, 0.72) 7px 9px, #000 9px 15px);
  mask: repeating-linear-gradient(115deg, #000 0 7px, rgba(0, 0, 0, 0.72) 7px 9px, #000 9px 15px);
}

/* Seat rows: sign, then one seat per cabin. Free spans every row as a single statement (no seat yet). */
.cm-lines { display: grid; grid-template-columns: 77% 23%; margin-top: 22px; border-top: 1px solid var(--cm-line); }
.cm-line, .cm-row.is-fixed { grid-column: 1; border-bottom: 1px solid var(--cm-line); }
.cm-row { display: grid; grid-template-columns: 40.26% 29.87% 29.87%; align-items: center; list-style: none; cursor: pointer; transition: background-color 0.18s ease; }
.cm-row::-webkit-details-marker { display: none; }
.cm-line > .cm-row:hover { background: rgba(246, 242, 234, 0.03); }
.cm-row.is-fixed { cursor: default; }
.cm-row:focus-visible { outline: 2px solid var(--cm-sky); outline-offset: -2px; }
.cm-sign { display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; align-items: center; gap: 14px; padding: 14px 24px 14px 0; }
.cm-sign-icon { width: 34px; height: 34px; padding: 6px; border: 1px solid rgba(246, 242, 234, 0.18); border-radius: 8px; color: var(--cm-dim); transition: color 0.2s ease, border-color 0.2s ease; }
.cm-line[open] .cm-sign-icon { color: var(--cm-lamp); border-color: rgba(255, 214, 150, 0.5); }
.cm-sign-title { display: block; font: 600 16px/1.25 var(--cm-display); color: var(--cm-ink); }
.cm-sign-sub { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--cm-dim); }
.cm-sign-chev { width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid var(--cm-sky); border-bottom: 1.5px solid var(--cm-sky); transform: rotate(45deg); transition: transform 0.2s ease; }
.cm-line[open] .cm-sign-chev { margin-top: 4px; transform: rotate(225deg); }
.cm-cell { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 26px; font-size: 15px; line-height: 1.35; }
.cm-cell.is-first { background: rgba(199, 169, 255, 0.035); }
.cm-cell-text { color: var(--cm-ink); }
.cm-cell-text small { display: block; margin-top: 3px; font-size: 13px; color: var(--cm-dim); }
.cm-cell.is-num b { min-width: 32px; font: 400 26px/1 var(--cm-pass); text-align: center; }
.cm-glyph { flex: none; width: 32px; height: 28px; }
.cm-cell.is-eco, .cm-legend .is-eco .cm-glyph { color: var(--cm-eco); }
.cm-cell.is-first, .cm-legend .is-first .cm-glyph { color: var(--cm-first); }
.cm-cell.is-no, .cm-legend .is-no .cm-glyph { color: rgba(246, 242, 234, 0.42); }
.cm-cell.is-no .cm-cell-text { color: var(--cm-faint); }
/* One seat symbol for cells, key and seat picker; its state lives in custom properties that reach into the <use> copy. */
.cm-st-frame, .cm-st-cush, .cm-st-x { stroke: currentColor; stroke-width: var(--sw, 1.4px); vector-effect: non-scaling-stroke; }
.cm-st-frame, .cm-st-cush { stroke-dasharray: var(--sd, none); }
.cm-st-frame { fill: currentColor; fill-opacity: var(--sa, 0); }
.cm-st-cush { fill: currentColor; fill-opacity: var(--sfo, 0); }
.cm-st-ck { fill: none; stroke: #0b0f17; stroke-width: var(--ckw, 2.2px); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: var(--ck, 0); }
.cm-st-play { fill: currentColor; opacity: var(--pl, 0); }
.cm-st-x { fill: none; stroke-linecap: round; opacity: var(--xx, 0); }
.cm-cell.is-yes, .cm-legend .is-yes, .cm-trial { --sfo: 1; --sa: 0.5; }
.cm-cell.is-auto, .cm-legend .is-auto { --sfo: 0.12; --pl: 1; }
.cm-cell.is-no, .cm-legend .is-no { --sd: 3 2.5; --xx: 1; }
.cm-trial { grid-column: 2; grid-row: 1 / span 5; position: relative; margin: 18px 8px 18px 26px; padding-left: 18px; border-left: 1px solid rgba(201, 204, 211, 0.45); color: var(--cm-sby); }
.cm-trial::before, .cm-trial::after { content: ""; position: absolute; left: -1px; width: 9px; border-top: 1px solid rgba(201, 204, 211, 0.45); }
.cm-trial::before { top: 0; }
.cm-trial::after { bottom: 0; }
.cm-trial-text { position: sticky; top: 24px; display: grid; justify-items: start; gap: 10px; margin: 0; font-size: 15px; line-height: 1.45; color: var(--cm-ink); }
.cm-trial-text small { font-size: 14px; color: var(--cm-dim); }
.cm-trial .cm-glyph { color: var(--cm-sby); }

/* Safety card: laminated paper, numbered panels with pictograms. */
.cm-card { margin: 0 0 20px; border-radius: 12px; overflow: hidden; background: var(--cm-paper); color: var(--cm-paper-ink); animation: cm-card-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes cm-card-in { from { opacity: 0; transform: translateY(-6px); } }
.cm-card-band { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 9px 20px 8px; background: #d9f4cd; color: var(--cm-navy); font: 600 14px/1.3 var(--cm-display); }
.cm-card.is-first .cm-card-band { background: linear-gradient(90deg, #96b8ff, #cf9eff); }
.cm-panels { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: rgba(28, 31, 41, 0.12); }
.cm-panels.is-5 { --n: 5; }
.cm-panels.is-2 { --n: 2; }
.cm-panel { padding: 18px 20px 20px; background: var(--cm-paper); }
.cm-panel-head { display: flex; align-items: center; gap: 12px; margin: 0; }
.cm-panel-n { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--cm-paper-ink); border-radius: 50%; font: 13px/1 var(--cm-pass); }
.cm-panel-icon { width: 32px; height: 32px; color: var(--cm-navy); stroke-width: 1.5; }
.cm-panel-title { margin: 12px 0 6px; font: 600 16px/1.25 var(--cm-display); }
.cm-panel-list { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; }
.cm-panel-list li { padding: 5px 0; border-top: 1px solid rgba(28, 31, 41, 0.1); }
.cm-panel-text { margin: 6px 0 0; font-size: 15px; line-height: 1.45; }
.cm-panel-list + .cm-panel-text { font-size: 14px; color: var(--cm-paper-soft); }
.cm-card-note { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 20px 16px; border-top: 1px solid rgba(28, 31, 41, 0.12); background: #ebe5d8; font-size: 14px; line-height: 1.5; }
.cm-card-note svg { flex: none; width: 22px; height: 22px; color: var(--cm-navy); }

/* Key and the facts that hold for every seat. */
.cm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; margin-top: 18px; font-size: 14px; color: var(--cm-dim); }
.cm-legend, .cm-every { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.cm-legend li, .cm-every span { display: inline-flex; align-items: center; gap: 8px; }
.cm-legend .cm-glyph { width: 24px; height: 21px; }
.cm-every { color: var(--cm-ink); }
.cm-every svg { width: 20px; height: 20px; color: var(--cm-sky); }

/* Choose your seat: radios keep their ids and data; each label is drawn as a seat on its cabin's floor. */
.cm-pick { margin-top: 64px; color: var(--cm-ink); scroll-margin-top: 24px; }
.cm-pick-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.cm-pick-title { margin: 0; font: 300 30px/1.15 var(--cm-display); }
.cm-pick-lede { margin: 0; font-size: 15px; color: var(--cm-dim); }
.cm-pick-body { display: grid; grid-template-columns: 2fr 3fr; gap: 32px; margin-top: 22px; }
.cm-pick-cabin-head { display: flex; justify-content: space-between; align-items: center; margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--cm-eco); font: 600 17px/1.2 var(--cm-display); }
.cm-pick-cabin.is-first .cm-pick-cabin-head { border-image: linear-gradient(90deg, #96b8ff, #cf9eff) 1; }
.cm-pick-cabin-head b { font: 400 14px/1 var(--cm-pass); color: var(--cm-dim); }
.cm-pick-seats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding-top: 10px; }
.cm-pick .cm-seatpick { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 0; margin: 0; padding: 16px 6px 18px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; animation: none; color: var(--cm-ink); font: inherit; text-align: center; cursor: pointer; transition: background-color 0.18s ease; }
.cm-pick .cm-seatpick.cm-seatpick:hover { border-color: transparent; background: rgba(246, 242, 234, 0.045); box-shadow: none; }
.cm-seatpick-glyph { width: 60px; height: 52px; margin-bottom: 8px; color: rgba(246, 242, 234, 0.4); transition: color 0.18s ease; --sw: 1.5px; --ckw: 3px; }
.cm-seatpick-term { font: 600 15px/1.2 var(--cm-display); color: var(--cm-dim); }
.cm-seatpick-price { font: 400 26px/1.2 var(--cm-pass); }
.cm-seatpick-unit, .cm-seatpick-save { font-size: 13px; line-height: 1.35; color: var(--cm-dim); }
.cm-seatpick-save { margin-top: 4px; color: var(--cm-ink); }
.cm-pick .pricing-option.cm-seatpick.is-selected { border: 0; box-shadow: none; animation: none; }
.cm-pick .pricing-option.first.cm-seatpick.is-selected { background: rgba(199, 169, 255, 0.1); }
.cm-pick .pricing-option.economy.cm-seatpick.is-selected { background: rgba(150, 220, 162, 0.09); }
.cm-pick .is-selected .cm-seatpick-glyph { --sfo: 1; --sa: 0.45; --ck: 1; }
.cm-pick .first.is-selected .cm-seatpick-glyph { color: var(--cm-first); }
.cm-pick .economy.is-selected .cm-seatpick-glyph { color: var(--cm-eco); }
body:has(.pricing-proceed-visual.is-lifetime-mode) .cm-seatpick.is-life { background: rgba(255, 200, 120, 0.08); }
body:has(.pricing-proceed-visual.is-lifetime-mode) .cm-seatpick.is-life .cm-seatpick-glyph { --sfo: 1; --sa: 0.45; --ck: 1; color: var(--cm-gold); }
.cm-pick .pricing-option:has(input:focus-visible), .cm-pick .cm-seatpick.is-life:focus-visible { outline: 2px solid var(--cm-sky); outline-offset: 2px; }
.cm-pick-foot { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--cm-faint); }

/* Proceed: same type and cabin colours as the map; the pass keeps its earlier size; gold marks the one primary action. */
.cm-pick .pricing-proceed-wrap { max-width: 1040px; margin-top: 30px; }
.cm-pick .pricing-proceed-title { width: auto; font: 300 28px/1.2 var(--cm-display); white-space: normal; text-shadow: none; }
.cm-pick .pricing-proceed-plan-name.is-first { color: var(--cm-first); text-shadow: none; }
.cm-pick .pricing-proceed-plan-name.is-economy { color: var(--cm-eco); text-shadow: none; }
.cm-pick .pricing-proceed-btn, .cm-pick .pricing-proceed-btn.is-consent-ready:not(:disabled):not(:hover) { border: 0; background: var(--cm-gold); color: var(--cm-gold-ink); box-shadow: none; animation: none; }
.cm-pick .pricing-proceed-btn:not(:disabled):hover { background: #ffd699; box-shadow: none; }
.cm-pick .pricing-proceed-btn-icon { filter: brightness(0); opacity: 0.85; }
.cm-pick .pricing-proceed-btn-ground { background: var(--cm-gold-ink); box-shadow: none; }
.cm-pick .pricing-proceed-btn-label { font-family: var(--cm-display); font-size: 17px; font-weight: 600; text-shadow: none; }
.pricing-faq-title { font: 300 30px/1.15 var(--cm-display); color: var(--cm-ink); }

/* Narrower screens: Economy and First side by side, Free as one strip, each sign above its two seats. */
@media (max-width: 1099px) {
  :root { --cm-cols: repeat(2, minmax(0, 1fr)); }
  .cm-intro, .cm-fare, .cm-plan, .cm-stub.is-sby { grid-column: 1 / -1; }
  .cm-intro { padding: 0 0 18px; }
  .cm-fare { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 0 0 16px; }
  .cm-fare-keys { flex: 1 1 260px; max-width: 360px; }
  .cm-fare-input { top: 16px; bottom: auto; }
  .cm-stub.is-sby { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 18px; margin-top: 16px; padding-top: 0; }
  .cm-stub.is-sby::before { grid-column: 1 / -1; }
  .cm-stub.is-sby .cm-stub-price { margin: 0; }
  .cm-stub.is-sby .cm-stub-note { grid-column: 1 / -1; margin: 0; }
  .cm-stub.is-sby .cm-stub-act { grid-row: 2; grid-column: 3; margin: 0; padding: 0; }
  .cm-sby-more { display: inline; }
  .cm-lines { grid-template-columns: minmax(0, 1fr); }
  .cm-trial { display: none; }
  .cm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-sign { grid-column: 1 / -1; padding: 14px 0 6px; }
  .cm-pick-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  h1 { font-size: 32px; }
  .cm { margin-top: 30px; }
  .cm-title { font-size: 28px; }
  .cm-plan-wide { display: none; }
  .cm-plan-narrow { display: block; }
  .cm-head { margin-top: 10px; }
  .cm-stub { margin: 0 4px; padding: 0 12px 14px; border-radius: 10px; }
  .cm-stub::before { margin: 0 -12px 12px; }
  .cm-stub-class { font-size: 16px; }
  .cm-stub-price { margin-top: 10px; }
  .cm-stub-price b { font-size: 23px; }
  .cm-stub-price small { font-size: 12px; }
  .cm-stub-note { font-size: 12px; }
  .cm-choose { font-size: 14px; }
  .cm-stamp { padding: 3px 6px; font-size: 12px; letter-spacing: 0.08em; }
  .cm-stub.is-sby { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .cm-stub.is-sby .cm-stub-price { grid-column: 1 / -1; grid-row: 3; }
  .cm-stub.is-sby .cm-stub-act { grid-column: 2; }
  .cm-stub.is-sby .cm-stub-note { grid-row: 4; }
  .cm-cell { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 8px 4px 14px; font-size: 14px; text-align: center; }
  .cm-cell-text small { font-size: 12px; }
  .cm-cell.is-num { flex-direction: row; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
  .cm-cell.is-num b { min-width: 0; font-size: 22px; }
  .cm-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cm-panel { padding: 14px 14px 16px; }
  .cm-panel-list, .cm-panel-text { font-size: 14px; }
  .cm-card-band { padding: 9px 14px 8px; }
  .cm-card-note { padding: 12px 14px 14px; }
  .cm-foot { font-size: 13px; }
  .cm-pick { margin-top: 48px; }
  .cm-pick-title { font-size: 26px; }
  .cm-pick-seats { gap: 2px; }
  .cm-pick .cm-seatpick { padding: 12px 2px 14px; }
  .cm-seatpick-glyph { width: 50px; height: 44px; margin-bottom: 6px; }
  .cm-seatpick-price { font-size: 18px; }
  .cm-pick .pricing-proceed-title { font-size: 22px; text-align: center; }
}
@media (max-width: 359px) {
  .cm-stub { padding: 0 9px 12px; }
  .cm-stub::before { margin: 0 -9px 10px; }
  .cm-stub-price b { font-size: 19px; }
  .cm-choose { padding: 10px 6px 9px; font-size: 13px; }
  .cm-seatpick-price { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm *, .cm *::before, .cm *::after, .cm-pick * { animation: none !important; transition: none !important; }
}