/* ══ THE PLANS PAGE ON THE SETTINGS CARD ═════════════════════  20 Oct 2026 (rp163) ══
   Sir, 20 Oct: "like the improvements you made. So make the same improvements
   for the entire page ... and just improve any section you feel like could do
   some improvement as well." And, the same hour: the switch that follows the
   reader "become compacted into the header when I scroll down, similar to how
   the search bar works on a homepage."

   One sheet, loaded after hyyryn-plans.css, so every band keeps its own drawing
   and takes the settings card's grammar on top (Mason 62, 64, 66): a corner of
   20px on anything that holds words, solid grounds with the settings depth,
   pills for what is pressed, a state said by a dot or a tint and never by a bar
   of colour down one side. What is evidence keeps its shape: the photographs,
   the chart, the tallies, the register's perforation. Research:
   mason/references/research-plans-round-2026-10.md. */

.pl { --r-card: 20px; --r-tile: 14px;
  --sd-paper: inset 0 0 0 1px rgba(10,22,40,.08), inset 0 1px 0 rgba(255,255,255,.85), 0 2px 4px rgba(10,22,40,.05), 0 30px 60px -32px rgba(10,22,40,.42);
  --sd-paper-hi: inset 0 0 0 1px rgba(10,22,40,.16), inset 0 1px 0 rgba(255,255,255,.9), 0 3px 6px rgba(10,22,40,.07), 0 40px 70px -32px rgba(10,22,40,.52);
  --sd-night: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.22), 0 34px 64px -34px rgba(0,0,0,.85); }

/* the bar's own height below 768px is 64, not 74: everything measured from it (the stage's tuck, every sticky top) */
@media (max-width: 768px) { :root { --bar: 64px; } }

/* ── 0. THE SWITCH THAT FOLLOWS: into the masthead ──
   From 640px up there is room in the middle of the masthead (below 900 it is
   empty; above, the search stands there and steps aside while the switch is
   in), so once the stage's own switch has gone under the bar, the two small
   switches come into the masthead's middle, as the homepage's search does.
   The search is back the moment the stage is. On a phone there is no room
   between the mark and the account: there the switch floats under the bar
   as one rounded pill. */
.topbar .nm-mini { transition: opacity 220ms ease, visibility 0s linear 0s; }
@media (min-width: 640px) {
  .js-plans .pl-follow { top: 0; height: var(--bar); z-index: 131; pointer-events: none;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; box-shadow: none; transform: translateY(-8px); }
  .js-plans .pl-follow.is-on { transform: none; }
  .pl-follow-in { height: 100%; min-height: 0; padding: 0; justify-content: center; gap: 10px; }
  .pl-follow-in > *, .pl-follow-who > * { pointer-events: auto; }
  .pl-follow-who { gap: 10px; }
  .pl-follow-k { display: none; }
  .pl-follow .lg { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .pl-follow .sm { display: inline; }
  .pl-follow .pl-seg.is-mini { box-shadow: inset 0 0 0 1px rgba(10,22,40,.14), 0 1px 2px rgba(10,22,40,.05), 0 10px 22px -16px rgba(10,22,40,.45); background: #fff; }
  .pl-follow .pl-seg.is-mini label { min-height: 32px; padding: 6px 14px; }
  html.pl-following .topbar .nm-mini { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, visibility 0s linear 160ms; }
}
@media (max-width: 639.98px) {
  .js-plans .pl-follow { left: 12px; right: 12px; top: calc(var(--bar) + 8px); border-radius: 999px; border-bottom: 0;
    background: rgba(250,248,243,.9); box-shadow: inset 0 0 0 1px rgba(10,22,40,.10), 0 14px 30px -18px rgba(10,22,40,.55); }
  .pl-follow-in { min-height: 0; padding: 5px 6px; justify-content: space-between; }
}

/* ── 1. WHAT IT COMES TO: the question and the answer, two cards side by side ── */
.pl-calc-ctl { padding: clamp(22px, 2.4vw, 34px); border-radius: 22px; background: #fff; box-shadow: var(--sd-paper); }
.pl-calc-in { margin-top: 14px; padding: 12px 20px 10px; border-bottom: 0; border-radius: 18px; background: #FAF8F3;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.12), inset 0 1px 0 rgba(255,255,255,.9); transition: box-shadow 200ms ease; }
.pl-calc-in:hover { box-shadow: inset 0 0 0 1px rgba(10,22,40,.3), inset 0 1px 0 rgba(255,255,255,.9); }
.pl-calc-in:focus-within { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
/* the worked jobs: rows that light as a whole, a pill to choose one */
.pl-calc-t { border-collapse: separate; border-spacing: 0 4px; margin-top: 8px; }
.pl-calc-t tbody th, .pl-calc-t td { border-bottom: 0; }
.pl-calc-t tbody tr > :first-child { border-radius: 14px 0 0 14px; padding-left: 4px; }
.pl-calc-t tbody tr > :last-child { border-radius: 0 14px 14px 0; padding-right: 14px; }
.pl-calc-t tbody tr > * { background: rgba(10,22,40,.025); }
.pl-calc-t tr.is-on th, .pl-calc-t tr.is-on td { background: var(--gold-tint); box-shadow: none; }
.pl-calc-t thead th { border-bottom: 1px solid rgba(10,22,40,.10); }
.pl-calc-t thead th:last-child { padding-right: 14px; }
.pl-pick { border-radius: 999px; padding: 0 16px; }
/* the answer: the chart on a rounded night card */
.pl-calc-fig { border-radius: 22px; box-shadow: var(--sd-night); }
/* the notes: a tile with its own mark, not a dashed rule down the side */
.pl-calc-note { position: relative; margin-top: 18px; max-width: none; padding: 14px 16px 14px 62px; border-left: 0; border-radius: var(--r-tile); background: #F3EEE3; color: var(--ink); }
.pl-calc-note::before { content: ''; position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 11px;
  background: var(--pn-ico, none) center / 17px no-repeat, linear-gradient(160deg, #1C2A44, #0A1628); box-shadow: 0 6px 12px -8px rgba(10,22,40,.6); }
.pl-calc-b[data-calc="fee"] .pl-calc-note { --pn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.pl-calc-b[data-calc="homes"] .pl-calc-note { --pn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E"); }
.pl-calc-cap { position: relative; max-width: none; padding: 12px 16px 12px 52px; border-left: 0; border-radius: var(--r-tile); background: rgba(250,248,243,.05); box-shadow: inset 0 0 0 1px rgba(250,248,243,.08); }
.pl-calc-cap::before { content: ''; position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(212,169,67,.4);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E") center / 14px no-repeat, rgba(212,169,67,.14); }
.pl-calc-more { border-radius: 0; }

/* ── 2. WHAT PAYING NEVER CHANGES: the three facts on rounded glass ── */
.pl-same-l li { border-radius: var(--r-card); background: rgba(10,22,40,.5);
  box-shadow: inset 0 0 0 1px rgba(250,248,243,.14), inset 0 1px 0 rgba(255,255,255,.09), 0 30px 60px -32px rgba(0,0,0,.85); }

/* ── 3. WHAT EACH PLAN ADDS: the bento on the card ── */
.pl-b { border-radius: var(--r-card); box-shadow: var(--sd-paper); }
.pl-b:has(.pl-rc):hover, .pl-b:has(.pl-rc:focus-visible) { box-shadow: var(--sd-paper-hi); }
.pl-b.is-dark { box-shadow: var(--sd-night); }
.pl-b.is-dark:has(.pl-rc):hover { box-shadow: var(--sd-night), 0 0 0 1px rgba(212,169,67,.45); }
.pl-b.is-cream { box-shadow: inset 0 0 0 1px rgba(10,22,40,.06), inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(10,22,40,.04), 0 26px 50px -32px rgba(10,22,40,.38); }
.pl-b.is-gold { box-shadow: inset 0 0 0 1px rgba(131,99,44,.18), inset 0 1px 0 rgba(255,255,255,.8), 0 2px 4px rgba(10,22,40,.04), 0 30px 60px -32px rgba(10,22,40,.4); }
.pl-b:has(.pl-rc:focus-visible) { outline-offset: 5px; }
.pl-watch { border-radius: var(--r-tile); }
.pl-w-row { border-radius: 10px; }
.pl-w-row.is-flag { box-shadow: inset 0 0 0 1px rgba(212,169,67,.5); }      /* the line that changed: a ring and its gold dot, not a bar down its side */
.pl-site { border-radius: var(--r-tile); }
.pl-badge { border-radius: var(--r-tile); }
.pl-tag { letter-spacing: .14em; }
/* the homes each plan holds: four rounded tiles, the marked one navy with its gold ring */
.pl-homes .col { border-radius: var(--r-tile); box-shadow: inset 0 0 0 1px rgba(10,22,40,.08), inset 0 1px 0 rgba(255,255,255,.7); }
.pl-homes .col.is-mark { box-shadow: inset 0 0 0 1px rgba(212,169,67,.55), 0 14px 28px -18px rgba(10,22,40,.7); }

/* ── 4. LINE BY LINE: the rail and the sheet on the card ── */
.pl-di { border-radius: var(--r-tile); padding-left: 18px; box-shadow: inset 0 0 0 1px rgba(10,22,40,.09), 0 1px 2px rgba(10,22,40,.04); }
.pl-di::before { display: none; }
.pl-di.is-mark { background: linear-gradient(180deg, rgba(212,169,67,.10), rgba(212,169,67,.03)), var(--paper); box-shadow: inset 0 0 0 1px rgba(212,169,67,.45), 0 1px 2px rgba(10,22,40,.04); }
.pl-di:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(10,22,40,.3), 0 14px 26px -18px rgba(10,22,40,.5); }
.pl-di.is-mark:hover { box-shadow: inset 0 0 0 1px var(--gold-soft), 0 14px 26px -18px rgba(10,22,40,.5); }
.pl-di.is-fit { box-shadow: inset 0 0 0 1.5px var(--navy), 0 1px 2px rgba(10,22,40,.04); }
.pl-idx a { border-radius: 12px; }
.pl-idx a::before { display: none; }
.pl-idx a[aria-current="true"] { box-shadow: inset 0 0 0 1px rgba(10,22,40,.14), 0 1px 2px rgba(10,22,40,.05); }
.pl-help { border-radius: var(--r-card); box-shadow: var(--sd-night); }
.pl-tw { border-radius: 22px; box-shadow: var(--sd-paper); padding-left: clamp(14px, 2vw, 28px); padding-right: clamp(14px, 2vw, 28px); }
.js-plans .pl-only { border-radius: 999px; padding: 0 16px 0 12px; }
.pl-only::before { border-radius: 5px; }
.pl-pair select { border-radius: 12px; padding: 0 12px; }
/* the suggested plan's head is a tab, gold-lit, rounded at the top, not a gold bar across it */
.pl-tbl thead th.is-mark { border-top: 0; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, rgba(212,169,67,.30), var(--gold-tint) 70%), var(--paper); }
.pl-tbl tbody tr:not(.grp):hover > :first-child { border-radius: 10px 0 0 10px; }
.pl-tbl tbody tr:not(.grp):hover > :last-child { border-radius: 0 10px 10px 0; }

/* ── 5. BEFORE YOU CHOOSE: the questions on their own rounded glass ── */
.pl-qs { align-self: center; margin: clamp(48px, 6vw, 96px) 0; padding: clamp(24px, 2.4vw, 36px) clamp(22px, 2.4vw, 36px) clamp(18px, 2vw, 28px);
  border-radius: 24px; background: rgba(10,14,22,.36); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(250,248,243,.10), inset 0 1px 0 rgba(255,255,255,.06), 0 34px 64px -34px rgba(0,0,0,.85); }
.pl-q:last-child { border-bottom: 0; }
.pl-q:first-of-type { border-top: 0; }
.pl-q summary { border-radius: 14px; transition: padding-left 200ms ease, background-color 200ms ease; }
@media (prefers-reduced-motion: reduce) { .pl-q summary { transition: none; } }

/* narrower than 900 the photograph stands above and the band's ground turns cream; the questions keep their night,
   on a rounded navy card, so they read the same at every width (Mason 64.3) */
@media (max-width: 900px) {
  .pl-qs { margin: 28px 0 56px; padding: 26px 22px 18px; -webkit-backdrop-filter: none; backdrop-filter: none;
    background: radial-gradient(90% 60% at 100% 0%, rgba(212,169,67,.12), rgba(212,169,67,0) 60%), linear-gradient(160deg, #15243D, #0A1628 62%); box-shadow: var(--sd-night); }
  .pl-qs::before { color: rgba(250,248,243,.74); }
  .pl-q, .pl-q:last-child { border-color: rgba(212,169,67,.26); }
  .pl-q .q { color: #F3EEE3; }
  .pl-q .a1 { color: var(--gold-hi); }
  .pl-q .a p { color: rgba(243,238,227,.8); }
  .pl-q summary:hover { background: rgba(250,248,243,.05); }
  .pl-q summary::after { box-shadow: inset 0 0 0 1px rgba(212,169,67,.55); background-image: linear-gradient(var(--gold-hi), var(--gold-hi)), linear-gradient(var(--gold-hi), var(--gold-hi)); }
  .pl-q summary:hover::after, .pl-q[open] summary::after { box-shadow: inset 0 0 0 1px var(--gold-hi); background-color: rgba(212,169,67,.14); }
  .pl-q summary:focus-visible, .pl-q .a .pl-qt a:focus-visible { outline-color: var(--gold-soft); }
  .pl-q .a .pl-qt a { color: var(--gold-hi); box-shadow: inset 0 -1px 0 rgba(221,182,90,.45); }
}

/* ── 6. WHAT GOES ON SALE, AND WHEN: the board and its stops on the card ── */
.pl-tl { border-radius: 22px; box-shadow: var(--sd-night); }
.pl-stop { border-left: 0; border-radius: var(--r-card); padding: 22px; background: #fff; box-shadow: var(--sd-paper); }
.pl-stop.is-free { background: linear-gradient(180deg, rgba(15,90,79,.07), rgba(15,90,79,0) 60%), #fff; box-shadow: inset 0 0 0 1px rgba(15,90,79,.22), inset 0 1px 0 rgba(255,255,255,.85), 0 2px 4px rgba(10,22,40,.05), 0 30px 60px -32px rgba(10,22,40,.42); }
.pl-stop.is-next { background: linear-gradient(180deg, rgba(212,169,67,.12), rgba(212,169,67,0) 60%), #fff; box-shadow: inset 0 0 0 1px rgba(176,138,62,.32), inset 0 1px 0 rgba(255,255,255,.85), 0 2px 4px rgba(10,22,40,.05), 0 30px 60px -32px rgba(10,22,40,.42); }
.pl-stop.is-later { background: #FAF8F3; box-shadow: none; outline: 1px dashed rgba(10,22,40,.28); outline-offset: -1px; }   /* planned, not fixed: dashed all the way round */
.pl-stop.is-hot { box-shadow: inset 0 0 0 1.5px var(--c), var(--sd-paper-hi); }
.pl-stop .pill { gap: 7px; align-items: center; }
.pl-stop .pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pl-when-note { position: relative; max-width: none; padding: 16px 18px 16px 66px; border-left: 0; border-radius: var(--r-tile); background: #F3EEE3; }
.pl-when-note::before { content: ''; position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E") center / 17px no-repeat, linear-gradient(160deg, #1C2A44, #0A1628);
  box-shadow: 0 6px 12px -8px rgba(10,22,40,.6); }

/* ── 7. WHERE EVERY FIGURE COMES FROM: the register, rounded; its perforation and its stamp kept ── */
.pl-reg { border-radius: 22px; overflow: hidden; }
.pl-reg-strip { border-radius: 0; }

/* ── 8. THE TWO DOORS: two rounded cards on the register's own ground ── */
.pl-doors { gap: clamp(14px, 1.6vw, 24px); padding: 0 var(--gut-r) clamp(56px, 6vw, 96px) var(--gut-l); background: var(--cream-3); }
.pl-half { border-radius: 24px; box-shadow: 0 2px 4px rgba(10,22,40,.08), 0 34px 64px -34px rgba(10,22,40,.6); }
.pl-half + .pl-half { box-shadow: 0 2px 4px rgba(10,22,40,.08), 0 34px 64px -34px rgba(10,22,40,.6); }
.pl-half .in, .pl-half + .pl-half .in { padding: clamp(26px, 3.4vw, 52px); }
.pl-half .go { border-radius: 999px; padding: 0 24px; }
.pl-half:focus-visible { outline-offset: 4px; }
@media (max-width: 720px) {
  .pl-doors { grid-template-columns: minmax(0, 1fr); }
  .pl-half { min-height: 320px; border-radius: 20px; }
}

/* ── narrower ── */
@media (max-width: 700px) {
  .pl-calc-ctl { padding: 20px 16px; border-radius: 18px; }
  .pl-calc-in { padding: 10px 16px 8px; }
  .pl-qs { margin: 0 0 40px; border-radius: 20px; }
  .pl-stop, .pl-b, .pl-help, .pl-tw, .pl-tl, .pl-reg { border-radius: 18px; }
}
@media (forced-colors: active) {
  .pl-calc-ctl, .pl-b, .pl-stop, .pl-tw, .pl-help, .pl-qs, .pl-half, .pl-di { border: 1px solid CanvasText; }
  .pl-calc-note::before, .pl-calc-cap::before, .pl-when-note::before { forced-color-adjust: none; }
}

/* ══ WHAT IT COSTS, WHILE PLANS ARE CLOSED ═══════════════════  21 Oct 2026 (rp182) ══
   The footer pass's sixth page. Sir, 21 Oct: improve each footer page, push it live, then the next. While nothing is
   on sale (live at launch) the page was its night stage and the two doors, and the stage's one button sent the reader
   away to How it works for the sum. The calculator is the page's own answer to its title, so it stands open (the
   trades' half, the one price at launch), under the stage; the stage's button goes to it, a pill as every pressed
   thing on the site is; and the doors keep their distance from what is above them. */
.pl-closed .pl-closed-go .pl-btn { min-height: 50px; padding: 0 26px; border-radius: 999px; font-size: 11.5px; letter-spacing: .16em; }
html:not(.mvp-plans) .pl-calc { padding-top: clamp(56px, 7vw, 104px); }
html:not(.mvp-plans) .pl-doors { margin-top: 0; padding-top: clamp(24px, 3vw, 44px); }