/* ══ THE PLAN CARDS AND THE SWITCH ABOVE THEM ═════════════════  11 Oct 2026 (rp89) ══
   One component, two places. Sir, 11 Oct, on the homepage's plans band: "use
   the same cards used on the plans page ... the subscription cards, so they
   use the same cards as well." So the cards, the audience switch with its
   sliding pill and the billing switch live here, once, and plans.html (on the
   night photograph) and index.html (on paper) both link this sheet. Each
   page's own sheet only PLACES them.
   One component, two grounds (research-50-home-plans-band h14, h46): on the
   photograph the marked card is navy glass and the shadows are deep; on paper
   (.on-paper) the marked card is solid navy, since glass over cream composites
   to a grey, and the shadows are the paper lift. Tokens are the company
   sheet's; a page without them (the homepage) declares them on its band. */

/* ── THE SWITCHES ── */
.pl-seg { display: inline-flex; margin: 0; padding: 4px; border: 0; border-radius: 999px; min-width: 0;
  background: rgba(250,248,243,.12); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(250,248,243,.30), inset 0 1px 0 rgba(255,255,255,.16); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pl-seg { background: var(--navy-2); } }
.pl-seg button, .pl-seg label { appearance: none; border: 0; background: none; margin: 0; padding: 10px 18px; min-height: 40px; border-radius: 999px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--on-navy-2); cursor: pointer;
  display: inline-flex; align-items: center; transition: background .22s ease, color .22s ease; }
.pl-seg button:not([aria-selected="true"]):hover, .pl-seg input:not(:checked) + label:hover { color: var(--cream); }   /* rp88: the chosen one keeps its ink on hover (it went cream on cream) */
.pl-seg [aria-selected="true"], .pl-seg input:checked + label { background: var(--cream); color: var(--navy); }
.pl-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pl-seg input:focus-visible + label, .pl-seg button:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.pl-sv { margin-left: 8px; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--gold-hi); }
.pl-seg input:checked + label .pl-sv { color: var(--gold); }

/* ── THE SLIDING PILL (rp88; Sir: "it should be a smooth slide") ──
   One cream pill under both choices, moved by the script to the chosen one:
   250ms on the quick curve (research-50-plans-motion p12, at the top of the
   toggle range so the slide is seen). With no script the chosen button keeps
   its own cream ground, as before. */
.pl-seg { position: relative; }
.pl-seg button, .pl-seg label { position: relative; z-index: 1; }
.pl-ind { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 999px; pointer-events: none; opacity: 0;
  background: var(--cream); box-shadow: 0 1px 2px rgba(5,11,22,.35), 0 8px 16px -10px rgba(5,11,22,.8);
  transition: transform 250ms var(--ease-quick), width 250ms var(--ease-quick), height 250ms var(--ease-quick); }
.pl-ind.is-still { transition: none; }
.pl-seg.has-ind .pl-ind { opacity: 1; }
/* while the pill moves, the chosen option's own cream steps aside; once it
   lands, the option takes its cream back (the same colour, the same box), so
   the words are on cream even if a measurement is ever off */
.pl-seg.is-sliding [aria-selected="true"], .pl-seg.is-sliding input:checked + label { background: transparent; }

/* ── THE PANELS: with the script, both share one cell so one can slide out
   over the other while the cell eases to the new height (rp88). The plans
   page's script marks the page (.js-plans); the shared one marks its block. */
.js-plans .pl-panels, [data-plan-switch].is-live .pl-panels { display: grid; }
.js-plans .pl-panels > .pl-panel, [data-plan-switch].is-live .pl-panels > .pl-panel { grid-area: 1 / 1; min-width: 0; margin-top: 0; }
.pl-panels.is-swapping > [inert] { pointer-events: none; }
.pl-panels > .pl-panel[hidden] { display: none !important; }
/* with no script both audiences are on the page, one after the other, so each
   says whose it is; with the script the tabs say it */
.pl-aud-k { grid-column: 1 / -1; margin: 0 0 4px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.js-plans .pl-aud-k, [data-plan-switch].is-live .pl-aud-k { display: none; }

/* ══ THE CARD: the site's one plan card ═══════════════════════  11 Oct 2026 (rp92) ══
   Sir, 11 Oct: "make sure the subscription cards are the same as the one on
   the homepage ... I do, however, want you to improve the subscription cards
   first before you make the rest of the site's subscription like that." So the
   homepage's card (square, flat, a strip across the top with the mark and who
   the plan suits), the one he likes, is the reference; it is improved here and
   every page draws it from this sheet alone. A page's own sheet only places it.
     the plan's name comes first in the reading order; the strip stays above
       it on the screen (research-50-plans-revamp r2)
     every card has the same eight rows in the same order, held level across
       the row by subgrid, an empty row kept rather than closed up (r3, r4):
       strip, name, price, the yearly saving, the second figure (the fee on a
       trade plan, the homes on a landlord's), the conditions, the action,
       what the plan holds
     the second figure is set near the price's size, not under it in grey, and
       the cap is said per job (r7, r8)
     the conditions sit directly above the action they belong to (r6)
     the card answers the hand only where something on it can be pressed (r39)
     the two trade plans are wide, cost on the left and contents on the right,
       when the ROW is wide, not the window, so the card fits any column (r50)
   Two grounds, one card: on a photograph (plans.html) the cards carry a deep
   drop and the marked one is navy glass; on paper (.on-paper, the homepage)
   they are flat and the marked one is solid navy, since glass over cream
   composites to grey (research-50-home-plans-band h14). */
.pl-cards { --pc-gap: clamp(16px, 1.6vw, 28px); display: grid; gap: var(--pc-gap); align-items: stretch; container: plcards / inline-size; }
.pl-cards.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-cards.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pl-card { --pad: clamp(20px, 1.9vw, 28px); --pc-ring: rgba(10,22,40,.16); --pc-drop: 0 1px 2px rgba(0,0,0,.25), 0 30px 60px -30px rgba(0,0,0,.75);
  position: relative; display: flex; flex-direction: column; padding: 0 var(--pad) var(--pad); border-radius: 0;
  background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--pc-ring), var(--pc-drop); transition: box-shadow 220ms var(--ease-quick, ease); }
.pl-cards.on-paper .pl-card { --pc-ring: var(--line-2); --pc-drop: 0 0 0 transparent; }
.pl-card.is-mark { --pc-ring: rgba(212,169,67,.55); color: var(--cream);
  background: rgba(10,22,40,.66); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.pl-card.is-mark::before { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pl-card.is-mark { background: var(--navy); } }
.pl-cards.on-paper .pl-card.is-mark { background: var(--navy); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pl-cards.on-paper .pl-card.is-mark::before { display: none; }
/* the hand: the edge darkens only while something on the card can be pressed (r39) */
.pl-card:has(.pl-btn:hover), .pl-card:has(.pl-mine a:hover), .pl-card:focus-within { --pc-ring: var(--navy); }
.pl-card.is-mark:has(.pl-btn:hover), .pl-card.is-mark:has(.pl-mine a:hover), .pl-card.is-mark:focus-within { --pc-ring: var(--gold-soft); }
/* rp97. Sir, 12 Oct: "the subscription cards should interact when the cursor
   hovers over". A ruling over r39, scoped to the plan card (Mason 59.4): the
   card under the hand is the one being read, so it rises 4px, its shadow
   deepens, its edge takes its colour, the strip's mark turns gold, and its
   button shows the way (the arrow steps forward). The press stays on the
   button: the card keeps the ordinary cursor, so the hover never promises a
   click the card cannot keep. The keyboard gets the same as the hand
   (focus-within). Only where a pointer can hover; under reduced motion the
   card does not travel. `translate`, not `transform`, so the audience swap's
   own transform animation never fights it (Mason 08). */
.pl-card { transition: box-shadow 260ms var(--ease-quick, ease), translate 320ms var(--ease-stone, cubic-bezier(.16,1,.3,1)); }
.pl-for::before { transition: background-color 220ms ease, opacity 220ms ease; }
@media (hover: hover) and (pointer: fine) {
  .pl-card:hover { --pc-ring: var(--navy); translate: 0 -4px; }
  .pl-card.is-mark:hover { --pc-ring: var(--gold-soft); }
  .pl-card:hover, .pl-card:focus-within { --pc-drop: 0 2px 4px rgba(0,0,0,.18), 0 40px 70px -32px rgba(0,0,0,.8); }
  .pl-cards.on-paper .pl-card:hover, .pl-cards.on-paper .pl-card:focus-within { --pc-drop: 0 2px 4px rgba(10,22,40,.08), 0 30px 50px -30px rgba(10,22,40,.55); }
  .pl-card:hover .pl-for::before { background: var(--gold-soft); opacity: 1; }
  .pl-card:hover .pl-btn::after { transform: translateX(3px); }
}
.pl-card:focus-within { translate: 0 -4px; }
.pl-card:focus-within .pl-for::before { background: var(--gold-soft); opacity: 1; }
.pl-card.is-mine { --pc-ring: var(--green-2); box-shadow: inset 0 0 0 2px var(--pc-ring), var(--pc-drop); }

/* 1. the strip: the mark, and who the plan suits (first on the screen, second to a screen reader) */
.pl-for { order: -1; display: flex; align-items: center; gap: 9px; min-height: 34px; margin: 0 calc(-1 * var(--pad)) 22px; padding: 8px 14px;
  background: rgba(10,22,40,.035); border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: 9.5px; font-weight: 600; line-height: 1.35; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.pl-for::before { content: ''; flex: none; width: 12px; height: 11px; background: currentColor; opacity: .6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 73'%3E%3Cpath d='M10 63 L10 21 Q10 17 14 17 L25 17 L25 63 Z'/%3E%3Cpath d='M55 63 L55 17 L66 17 Q70 17 70 21 L70 63 Z'/%3E%3Cpath d='M2 16 L2 6 Q2 1 7 1 L73 1 Q78 1 78 6 L78 16 Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 73'%3E%3Cpath d='M10 63 L10 21 Q10 17 14 17 L25 17 L25 63 Z'/%3E%3Cpath d='M55 63 L55 17 L66 17 Q70 17 70 21 L70 63 Z'/%3E%3Cpath d='M2 16 L2 6 Q2 1 7 1 L73 1 Q78 1 78 6 L78 16 Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pl-card.is-mark .pl-for { background: rgba(250,248,243,.06); border-bottom-color: rgba(250,248,243,.12); color: var(--gold-soft); }
.pl-card.is-mark .pl-for::before { background: var(--on-navy-2); opacity: 1; }
.pl-why::before { display: none; }

/* 2. the name */
.pl-name { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--navy); }
.pl-card.is-mark .pl-name { color: var(--cream); }

/* 3. the price */
.pl-price { margin: 18px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pl-fig { font-family: var(--serif-display); font-size: 48px; line-height: 1; color: var(--navy); font-variant-numeric: lining-nums tabular-nums; }
.pl-fig-words { font-size: 34px; line-height: 1.05; }
.pl-card.is-mark .pl-fig { color: var(--cream); }
.pl-per { font-family: var(--serif); font-size: 14px; line-height: 1.45; color: var(--muted-2); }
.pl-card.is-mark .pl-per { color: var(--on-navy-2); }

/* 4. the yearly saving, drawn: twelve months paid for as ten (r11: the basis is said) */
.pl-yr { margin: 12px 0 0; display: flex; align-items: center; gap: 12px; }
.pl-yr:has(.pl-save:empty) { display: none; }
.pl-months { flex: none; display: inline-grid; grid-auto-flow: column; gap: 2px; }
.pl-months i { width: 5px; height: 15px; background: var(--navy); opacity: .82; }
.pl-months i:nth-child(n+11) { background: var(--gold-soft); opacity: 1; }
.pl-card.is-mark .pl-months i { background: var(--on-navy-2); }
.pl-card.is-mark .pl-months i:nth-child(n+11) { background: var(--gold-soft); }
.pl-months i { animation: pcTick 420ms var(--ease-stone, ease) both; animation-delay: calc(var(--k, 0) * 22ms); }
@keyframes pcTick { from { opacity: 0; transform: scaleY(.2); } }
.pl-save { margin: 0; font-family: var(--serif); font-size: 13px; line-height: 1.4; color: var(--gold); }
.pl-save:empty { display: none; }
.pl-card.is-mark .pl-save { color: var(--gold-hi); }

/* 5. the second figure: the fee on a trade plan, the homes on a landlord's (r7) */
.pl-fee { margin: 18px 0 0; padding-top: 16px; border-top: 1px dashed var(--line-2); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline;
  font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--muted-2); }
.pl-fee-fig { font-family: var(--serif-display); font-size: 32px; line-height: 1; color: var(--navy); font-variant-numeric: lining-nums; white-space: nowrap; }
.pl-card.is-mark .pl-fee { border-top-color: rgba(250,248,243,.2); color: var(--on-navy-2); }
.pl-card.is-mark .pl-fee-fig { color: var(--cream); }

/* 6. the conditions, said before the action, as a note pinned to it (r6) */
.pl-cond { margin: 18px 0 0; padding: 10px 12px; border-left: 2px solid var(--gold-soft); background: rgba(10,22,40,.035);
  font-family: var(--serif); font-size: 13px; line-height: 1.5; color: var(--ink); }
.pl-card.is-mark .pl-cond { background: rgba(250,248,243,.07); color: var(--on-navy); }

/* 7. the action */
.pl-act { margin-top: 12px; }
.pl-mine { display: block; margin-top: 10px; text-align: center; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.pl-mine a { color: inherit; text-underline-offset: 3px; }
.pl-card.is-mark .pl-mine { color: var(--on-navy-3); }

/* 8. what the plan holds */
.pl-inc { margin: 24px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--ink); }
.pl-card.is-mark .pl-inc { border-top-color: rgba(250,248,243,.18); color: var(--on-navy); }
.pl-inc li { position: relative; padding-left: 18px; margin-bottom: 9px; }
.pl-inc li:last-child { margin-bottom: 0; }
.pl-inc li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--gold-soft); }

/* ── THE CARD'S BUTTONS: the plans flow's one shape, square like the card ──
   Two kinds, by what they do, and every one answers the hand the same way:
   it rises 1px and its arrow steps forward on hover, it presses to 98%, and
   its focus ring is navy on paper and gold on navy (r18: gold on cream is 2:1).
     glass   the one action on the marked card: white glass, cream on hover
     quiet   an action on a paper card: a navy hairline, white with a full
             navy edge on hover
   What cannot be pressed yet (Expected January 2027) is a dashed box with
   no hover at all, so it never looks like a button. */
.pl-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 18px; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s var(--ease-quick, ease); }
.pl-btn::after { content: ''; flex: none; width: 14px; height: 14px; background: currentColor; transition: transform .22s var(--ease-quick, ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.pl-btn:hover { transform: translateY(-1px); }
.pl-btn:hover::after { transform: translateX(3px); }
.pl-btn:active { transform: translateY(0) scale(.98); }
.pl-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.pl-card.is-mark .pl-btn:focus-visible { outline-color: var(--gold-soft); }
.pl-btn.is-quiet { color: var(--navy); background: rgba(255,255,255,.4); box-shadow: inset 0 0 0 1px rgba(10,22,40,.38); }
.pl-btn.is-quiet:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--navy), 0 12px 22px -14px rgba(10,22,40,.5); }
.pl-btn.is-glass { color: var(--navy); background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF8 58%, #F4F1E8 100%);
  box-shadow: inset 0 0 0 1px var(--cream), inset 0 1px 0 rgba(255,255,255,.92), 0 12px 24px -12px rgba(0,0,0,.6); }
.pl-btn.is-glass:hover { background: var(--cream); box-shadow: inset 0 0 0 1px var(--gold-soft), 0 16px 28px -12px rgba(0,0,0,.7); }
.pl-soon { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 14px; text-align: center; text-wrap: balance; border: 1px dashed var(--line-2);
  font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.pl-card.is-mark .pl-soon { color: var(--on-navy-2); border-color: rgba(250,248,243,.32); }
.pl-card.is-mine .pl-soon { border-style: solid; border-color: var(--green-2); color: var(--green); }

/* ── ROWS HELD LEVEL ACROSS THE ROW (r4): each card takes eight rows of the
   row's own grid. A missing part leaves its row empty, so every price, every
   second figure and every action sits on one line. Cards that wrap to a
   second row are kept apart by their own margin, which the grid folds into
   their last row; the row as a whole takes it back below. ── */
@supports (grid-template-rows: subgrid) {
  .pl-cards { row-gap: 0; margin-bottom: calc(-1 * var(--pc-gap)); }
  .pl-cards.n2 { grid-template-rows: repeat(7, auto) 1fr; }
  .pl-cards > .pl-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; align-content: start; margin-bottom: var(--pc-gap); }
  .pl-card > .pl-for { grid-row: 1; } .pl-card > .pl-name { grid-row: 2; } .pl-card > .pl-price { grid-row: 3; } .pl-card > .pl-yr { grid-row: 4; }
  .pl-card > .pl-fee { grid-row: 5; } .pl-card > .pl-cond { grid-row: 6; } .pl-card > .pl-act { grid-row: 7; } .pl-card > .pl-inc { grid-row: 8; }
  .pl-card > .pl-act { align-self: end; }
  .pl-card > .pl-cond { align-self: start; }
  /* two plans in a wide row: what each costs on the left, what it holds on the
     right (the homepage's layout since rp89, now by the row's width, r50) */
  @container plcards (min-width: 940px) {
    .pl-cards.n2 > .pl-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 3vw, 48px); }
    .pl-cards.n2 > .pl-card > * { grid-column: 1; }
    .pl-cards.n2 > .pl-card > .pl-for { grid-column: 1 / -1; }
    .pl-cards.n2 > .pl-card > .pl-inc { grid-column: 2; grid-row: 2 / span 7; align-self: start; margin: 0; padding: 0 0 0 clamp(20px, 2.4vw, 32px); border-top: 0; border-left: 1px solid var(--line); }
    .pl-cards.n2 > .pl-card.is-mark > .pl-inc { border-left-color: rgba(250,248,243,.18); }
  }
}

/* ── ON PAPER: the switch on a light ground ── */
.pl-seg.on-paper { background: rgba(10,22,40,.05); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(10,22,40,.16); }
.pl-seg.on-paper button, .pl-seg.on-paper label { color: var(--muted-2); }
.pl-seg.on-paper button:not([aria-selected="true"]):hover, .pl-seg.on-paper input:not(:checked) + label:hover { color: var(--navy); }
.pl-seg.on-paper [aria-selected="true"], .pl-seg.on-paper input:checked + label { background: var(--navy); color: var(--cream); }
.pl-seg.on-paper.is-sliding [aria-selected="true"], .pl-seg.on-paper.is-sliding input:checked + label { background: transparent; }
.pl-seg.on-paper .pl-ind { background: var(--navy); box-shadow: 0 1px 2px rgba(10,22,40,.2), 0 8px 16px -10px rgba(10,22,40,.6); }
.pl-seg.on-paper input:focus-visible + label, .pl-seg.on-paper button:focus-visible { outline-color: var(--navy); }

@media (max-width: 1180px) {
  .pl-cards.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pl-seg { display: flex; }
  .pl-seg button, .pl-seg label { flex: 1 1 0; justify-content: center; padding: 10px 10px; letter-spacing: .12em; text-align: center; }
  .pl-sv { display: none; }
  .pl-cards.n2, .pl-cards.n4 { grid-template-columns: minmax(0, 1fr); }
  .pl-cards.n2 { grid-template-rows: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-btn, .pl-btn::after, .pl-seg button, .pl-seg label, .pl-ind, .pl-card { transition: none; }
  .pl-card:hover, .pl-card:focus-within { translate: none; }
  .pl-btn:hover, .pl-btn:active { transform: none; }
  .pl-btn:hover::after { transform: none; }
  .pl-months i { animation: none; }
}

/* rp95: in forced colours the pill and the chosen option's ground are dropped,
   so the choice was not shown at all; the chosen option is outlined instead,
   in the system's own highlight (chapter 59.8, rule 5) */
@media (forced-colors: active) {
  .pl-seg { border: 1px solid CanvasText; }
  .pl-ind { display: none; }
  .pl-seg [aria-selected="true"], .pl-seg input:checked + label { outline: 2px solid Highlight; outline-offset: -3px; }
}

/* ══ THE CARD, AS THE SETTINGS PAGE DRAWS ITS OWN ══════════  20 Oct 2026 (rp161, shared since rp162) ══
   Sir, 20 Oct: "make the subscription price cards the same as the settings
   like cards"; the homepage had it first (rp161), and the same day: "on the
   plans for trades page ... Make the cards the same cards as the cards in the
   settings ... round the corners". So the card is drawn here, once, for both
   pages. The settings card (assets/hyyryn-settings-ground.css, rp158; Mason 62,
   64): solid cream, a 20px corner, a white edge lit from above and a long soft
   shadow; its head a navy disc in the cover's gold over a gold hairline that
   fades out; facts on tiles, each with its own mark; pill buttons; nothing
   coloured down one side. Two grounds, as before: on the plans page's night
   the shadow is the settings page's own night shadow and the marked plan is
   solid navy (cards over a photograph are solid, Mason 62.4: the glass went);
   on paper (the homepage) the shadow is lighter. */
.pl-cards .pl-card { --pad: clamp(22px, 2vw, 32px); border-radius: 20px; background: #FAF8F3;
  --pc-ring: rgba(255,255,255,.55); --pc-drop: 0 2px 4px rgba(4,9,15,.16), 0 30px 60px -30px rgba(4,9,15,.68);
  box-shadow: inset 0 0 0 1px var(--pc-ring), inset 0 1px 0 rgba(255,255,255,.85), var(--pc-drop); }
.pl-cards.on-paper .pl-card { --pc-ring: rgba(10,22,40,.08); --pc-drop: 0 2px 4px rgba(10,22,40,.05), 0 30px 60px -32px rgba(10,22,40,.45); }
.pl-cards .pl-card.is-mark, .pl-cards.on-paper .pl-card.is-mark { --pc-ring: rgba(212,169,67,.42);
  background: radial-gradient(120% 80% at 0% 0%, rgba(212,169,67,.10), rgba(212,169,67,0) 55%), linear-gradient(160deg, #15243D, #0A1628 62%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 0 0 1px var(--pc-ring), inset 0 1px 0 rgba(255,255,255,.10), var(--pc-drop); }
.pl-cards .pl-card.is-mark::before { display: none; }
.pl-cards .pl-card.is-mine { --pc-ring: var(--green-2, #0B4A41); box-shadow: inset 0 0 0 2px var(--pc-ring), var(--pc-drop); }
@media (hover: hover) and (pointer: fine) {
  .pl-cards .pl-card:hover, .pl-cards .pl-card:focus-within { --pc-ring: rgba(255,255,255,.9); --pc-drop: 0 3px 6px rgba(4,9,15,.2), 0 40px 70px -30px rgba(4,9,15,.8); }
  .pl-cards.on-paper .pl-card:hover, .pl-cards.on-paper .pl-card:focus-within {
    --pc-ring: rgba(10,22,40,.22); --pc-drop: 0 3px 6px rgba(10,22,40,.07), 0 40px 70px -32px rgba(10,22,40,.55); }
  .pl-cards .pl-card.is-mark:hover, .pl-cards .pl-card.is-mark:focus-within { --pc-ring: rgba(212,169,67,.75); }
}

/* the head: the mark on a navy disc, who the plan suits, a gold hairline that fades out */
.pl-cards .pl-card .pl-for { position: relative; margin: 0 0 22px; padding: var(--pad) 0 16px; min-height: 0; gap: 12px; background: none; border-bottom: 0;
  font-size: 10px; letter-spacing: .18em; color: var(--muted-2); }
.pl-cards .pl-card .pl-for::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(212,169,67,.65), rgba(212,169,67,.18) 55%, rgba(212,169,67,0)); }
.pl-cards .pl-card .pl-for::before, .pl-cards .pl-card:hover .pl-for::before, .pl-cards .pl-card:focus-within .pl-for::before {
  width: 34px; height: 34px; border-radius: 50%; opacity: 1; -webkit-mask: none; mask: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 73'%3E%3Cg fill='%23E2BE6A'%3E%3Cpath d='M10 63 L10 21 Q10 17 14 17 L25 17 L25 63 Z'/%3E%3Cpath d='M55 63 L55 17 L66 17 Q70 17 70 21 L70 63 Z'/%3E%3Cpath d='M2 16 L2 6 Q2 1 7 1 L73 1 Q78 1 78 6 L78 16 Z'/%3E%3C/g%3E%3C/svg%3E") 50% 54% / 15px no-repeat,
              radial-gradient(circle at 35% 30%, #1C2A44, #0A1628 70%);
  box-shadow: 0 0 0 4px rgba(212,169,67,.13), 0 6px 14px -8px rgba(10,22,40,.6); transition: box-shadow 260ms ease; }
.pl-cards .pl-card:hover .pl-for::before, .pl-cards .pl-card:focus-within .pl-for::before { box-shadow: 0 0 0 4px rgba(212,169,67,.32), 0 6px 14px -8px rgba(10,22,40,.6); }
.pl-cards .pl-card.is-mark .pl-for { color: var(--gold-hi); background: none; }
.pl-cards .pl-card.is-mark .pl-for::before, .pl-cards .pl-card.is-mark:hover .pl-for::before, .pl-cards .pl-card.is-mark:focus-within .pl-for::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 73'%3E%3Cg fill='%23E2BE6A'%3E%3Cpath d='M10 63 L10 21 Q10 17 14 17 L25 17 L25 63 Z'/%3E%3Cpath d='M55 63 L55 17 L66 17 Q70 17 70 21 L70 63 Z'/%3E%3Cpath d='M2 16 L2 6 Q2 1 7 1 L73 1 Q78 1 78 6 L78 16 Z'/%3E%3C/g%3E%3C/svg%3E") 50% 54% / 15px no-repeat,
              radial-gradient(circle at 35% 30%, #23365A, #0A1628 72%);
  box-shadow: inset 0 0 0 1px rgba(226,190,106,.55), 0 0 0 4px rgba(212,169,67,.16), 0 6px 14px -8px rgba(0,0,0,.7); }
.pl-cards .pl-card.is-mark .pl-for::after { background: linear-gradient(90deg, rgba(226,190,106,.7), rgba(226,190,106,.2) 55%, rgba(226,190,106,0)); }

/* the price, the figure that matters most, a step larger */
.pl-cards .pl-card .pl-name { font-size: 30px; }
.pl-cards .pl-card .pl-fig { font-size: 54px; }
.pl-cards .pl-card .pl-fig-words { font-size: 34px; }

/* the second figure on a plain hairline, not a dashed one */
.pl-cards .pl-card .pl-fee { border-top: 1px solid rgba(10,22,40,.10); }
.pl-cards .pl-card.is-mark .pl-fee { border-top-color: rgba(250,248,243,.16); }

/* the conditions: a tile with its own mark, not a gold bar down the side */
.pl-cards .pl-card .pl-cond { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 11px 14px 11px 12px; border-left: 0; border-radius: 14px; background: #F3EEE3; font-size: 13.5px; line-height: 1.5; }
.pl-cards .pl-card .pl-cond::before { content: ''; width: 30px; height: 30px; border-radius: 10px;
  background: var(--pc-ico) center / 16px no-repeat, linear-gradient(160deg, #1C2A44, #0A1628); box-shadow: 0 6px 12px -8px rgba(10,22,40,.6); }
.pl-cards .pl-card.is-mark .pl-cond { background: rgba(250,248,243,.07); box-shadow: inset 0 0 0 1px rgba(250,248,243,.08); }
.pl-cards .pl-card.is-mark .pl-cond::before { background: var(--pc-ico) center / 16px no-repeat, rgba(212,169,67,.16); box-shadow: inset 0 0 0 1px rgba(212,169,67,.35); }
/* no card asked for (a shield with a tick); a free month, then a monthly payment (a calendar with a tick); agreed in writing (a pen on a line) */
.pl-cards .pl-card { --pc-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='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.pl-cards .pl-card[data-trial] { --pc-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%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E"); }
.pl-cards .pl-card[data-plan="org_enterprise"] { --pc-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='M12 20h9'/%3E%3Cpath d='M16.38 3.62a1 1 0 0 1 3 3L7.37 18.64a2 2 0 0 1-.86.5l-2.87.84a.5.5 0 0 1-.62-.62l.84-2.87a2 2 0 0 1 .5-.86z'/%3E%3C/svg%3E"); }

/* the action: the settings page's own button, a pill */
.pl-cards .pl-card .pl-act { margin-top: 14px; }
.pl-cards .pl-card .pl-btn { min-height: 48px; border-radius: 999px; }
.pl-cards .pl-card .pl-btn.is-quiet { background: #fff; box-shadow: inset 0 0 0 1px rgba(10,22,40,.22), 0 1px 2px rgba(10,22,40,.06); }
.pl-cards .pl-card .pl-btn.is-quiet:hover { background: var(--navy); color: var(--cream); box-shadow: inset 0 0 0 1px var(--navy), 0 12px 24px -12px rgba(10,22,40,.45); }
.pl-cards .pl-card .pl-btn:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 2px; }
/* what cannot be pressed yet stays a dashed outline, in the same shape */
.pl-cards .pl-card .pl-soon { border-radius: 999px; }

/* what the plan holds: a tick on a gold disc, not a square */
.pl-cards .pl-card .pl-inc li { padding-left: 28px; margin-bottom: 11px; }
.pl-cards .pl-card .pl-inc li::before { left: 0; top: .15em; width: 18px; height: 18px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4318' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat, rgba(212,169,67,.22); }
.pl-cards .pl-card.is-mark .pl-inc li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat, #D9B45C; }
/* the yearly saving's months: rounded ends, as everything else on the card */
.pl-cards .pl-card .pl-months i { border-radius: 2px; }
@supports (grid-template-rows: subgrid) {
  @container plcards (min-width: 940px) {
    .pl-cards.n2 > .pl-card > .pl-inc { border-left-color: rgba(10,22,40,.10); }
    .pl-cards.n2 > .pl-card.is-mark > .pl-inc { border-left-color: rgba(250,248,243,.14); }
  }
}
@media (max-width: 700px) {
  .pl-cards .pl-card { --pad: 20px; border-radius: 18px; }
  .pl-cards .pl-card .pl-fig { font-size: 48px; }
}
@media (forced-colors: active) {
  .pl-cards .pl-card { border: 1px solid CanvasText; }
  .pl-cards .pl-card .pl-for::before, .pl-cards .pl-card .pl-cond::before, .pl-cards .pl-card .pl-inc li::before { forced-color-adjust: none; }
}