/* ══ THE HOMEPAGE'S PLANS BAND ═════════════════════════════  8 Oct 2026 (rp77) ══
   rebuilt 11 Oct 2026 (rp89). Sir: the band sat last, above the footer, and
   did not fit there; it belongs "beneath the category section, right above
   the Hyyryn Records section ... because of the colour of the section and what
   it's discussing", and it should "use the same cards used on the plans page".
   Then, the same day: "the structure and the design matches the rest of the
   page". So it follows Browse by trade, its cards and switch are plans.html's
   own component (hyyryn-plan-cards.css, hyyryn-plan-cards.js), and it is laid
   out in How it works' grammar, measured from that band (index.html, .mp-*):
     the tracked label (.band-h), left, in the muted ink
     the sentence on the left, what to do on the right, on one baseline
     numbered headings (sans 10.5px gold numerals over serif 700 capitals at
       .13em), here the two audiences, with a gold rule under the chosen one
     square, flat boxes with a strip across the top carrying the mark and a
       label, here the cards, the strip being each card's "who it suits"
     the foot: a note on a dashed gold rule, and the way to the longer version
   on the page's own gutters (left 2.4vw, right 3vw), as How it works and For
   tradespeople run. Research: mason/references/research-50-home-plans-band.

   THE GROUND. Browse by trade is cream; two light bands in a row read as one
   unless the meeting shows (h16). This band takes the deeper cream with a
   hairline above and below.

   THE TOKENS. The cards are written in the company pages' tokens. The
   homepage declares only some of them, and two under the same names mean
   other things here (--lift is a paper texture, --green-2 a darker green),
   so the band declares the company values it needs on itself, scoped to it. */
.hp-plans {
  --paper: #FFFDF8; --muted-2: #4A5160; --gold-hi: #DDB65A; --gold-ink: #5B4318; --gold-tint: rgba(212,169,67,.14);
  --on-navy: #FAF8F3; --on-navy-2: rgba(250,248,243,.78); --on-navy-3: rgba(250,248,243,.62);
  --ease-quick: cubic-bezier(.4, 0, .2, 1); --ease-stone: cubic-bezier(.16, 1, .3, 1);
  position: relative; background: var(--cream-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 104px 0 96px;                                   /* How it works' own */
}
/* rp96: A GROUND OF ITS OWN. Sir, 11 Oct: "a little background ... to
   differentiate a little bit more from the category section", and the title
   centred. Browse by trade and this band met at 1.08:1 between two creams
   (research-50-switch-band a26). The band now stands in a light room (the
   site's own photograph of a finished home: a white wall with the sun on it,
   a sideboard, an armchair, a herringbone floor; no people, no brand), under
   a cream glaze that is lightest behind the heading, where the wall is bare,
   and all but solid by the foot, so the note there reads on cream. Light, not
   dark, because the Records band below is the dark photograph (a28). The
   glaze is in the same background list as the photograph, so forced colours
   drop both together (a35). */
.hp-plans { background:
    linear-gradient(180deg, rgba(243,239,228,.46) 0%, rgba(243,239,228,.48) 22%, rgba(243,239,228,.82) 44%, rgba(243,239,228,.97) 64%, #F3EFE4 100%),
    url('photos/home-plans-room-1280.webp') 50% 22% / cover no-repeat,
    var(--cream-2); }
.hp-plans-in { padding: 0 clamp(24px, 3vw, 48px) 0 clamp(20px, 2.4vw, 40px); }

/* ── THE HEAD: How it works' .mp-head, on paper ── */
/* rp96: the head centred as a whole (label, sentence, lede and the two audiences), as Sir asked; on the new ground
   it no longer reads as Browse by trade's twin (a38, a39). Its inks are a step darker, for the photograph (a30). */
.hp-plans-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hp-plans .band-h { margin-bottom: 22px; color: var(--muted-2); }
.hp-plans-say { margin: 0; max-width: 28ch; font-family: var(--serif-display); font-weight: 400; font-size: clamp(30px, 2.7vw, 40px); line-height: 1.24; color: var(--navy); text-wrap: balance; }
.hp-plans-lede { margin: 18px auto 0; max-width: 64ch; font-family: var(--serif); font-size: 15px; line-height: 1.8; color: var(--muted-2); text-wrap: pretty; }

/* ── THE TWO AUDIENCES: a switch that looks like one (rp161) ──
   Sir, 20 Oct 2026: "improve the whole look and layout of the subscription
   section". The two audiences were numbered headings over a gold rule, How it
   works' grammar, and read as two headings rather than one choice between two
   (Mason 13: a choice must look like a choice). They are the shared switch now,
   drawn on paper: a cream track, a navy pill that slides to the chosen one. */
.pl-seg.hp-plans-tabs { display: flex; width: max-content; max-width: 100%; margin: 40px auto 0; padding: 5px;
  background: rgba(250,248,243,.72); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.12), 0 1px 2px rgba(10,22,40,.06), 0 14px 28px -20px rgba(10,22,40,.45); }
.hp-plans-tabs button { min-height: 46px; padding: 0 26px; color: var(--muted-2); }
.hp-plans-tabs .n { display: none; }
.hp-plans-tabs .t { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; text-align: center; color: inherit; transition: color 200ms; }
.pl-seg.hp-plans-tabs button:not([aria-selected="true"]):hover { color: var(--navy); }
.pl-seg.hp-plans-tabs [aria-selected="true"] { background: var(--navy); color: var(--cream); }
.pl-seg.hp-plans-tabs.is-sliding [aria-selected="true"] { background: transparent; color: var(--cream); }
.pl-seg.hp-plans-tabs button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.hp-plans-tabs .pl-ind { background: var(--navy); box-shadow: 0 1px 2px rgba(10,22,40,.2), 0 8px 16px -10px rgba(10,22,40,.6); }

/* ── THE CARDS: the site's one plan card (hyyryn-plan-cards.css, rp92), on
   paper. Since rp92 the card itself (square, flat, the strip with the mark,
   the two trade plans wide) is drawn there and nowhere else; this band only
   places it. ── */
.hp-plans .pl-panels { margin-top: 36px; }
.hp-plans .pl-panel { outline: none; }
.hp-plans .pl-panel + .pl-panel { margin-top: 56px; }      /* with no script, both audiences, one after the other */
.hp-plans .pl-panel:focus-visible { outline: 2px solid var(--navy); outline-offset: 8px; }
.hp-plans .pl-cards { --pc-gap: clamp(20px, 2vw, 32px); }

/* ── THE FOOT: what every plan shares, as the settings page says it (rp161) ──
   The note stood on a dashed gold rule down its left side, a bar of colour
   down one side of a block (Mason 62.1). It is a card now, the settings
   page's own: three facts, each on its own tile with its own mark, then the
   line on what is on sale and the way to the longer version. */
.hp-plans-foot { margin-top: 28px; padding: 26px clamp(20px, 2.4vw, 34px) 24px; border-radius: 20px; background: #FAF8F3;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.07), inset 0 1px 0 rgba(255,255,255,.8), 0 2px 4px rgba(10,22,40,.05), 0 30px 60px -34px rgba(10,22,40,.42); }
.hp-plans-k { margin: 0 0 16px; padding-bottom: 14px; position: relative; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.hp-plans-k::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)); }
.hp-plans-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hp-plans-facts > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 3px 16px; align-items: start; padding: 16px 18px; border-radius: 16px; background: #F3EEE3; }
.hp-plans-facts > div::before { content: ''; grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 13px;
  background: var(--hp-ico) center / 20px no-repeat, linear-gradient(160deg, #1C2A44, #0A1628); box-shadow: 0 6px 14px -8px rgba(10,22,40,.6); }
.hp-plans-facts dt { grid-column: 2; padding-top: 2px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted, #636976); }
.hp-plans-facts dd { grid-column: 2; margin: 0; font-family: var(--serif); font-size: 14px; line-height: 1.6; color: var(--ink); }
.hp-plans-facts .is-fee { --hp-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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' x2='5' y1='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); }
.hp-plans-facts .is-rank { --hp-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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }
.hp-plans-facts .is-vat { --hp-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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E"); }
.hp-plans-end { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; }
.hp-plans-if { margin: 0; max-width: 78ch; font-family: var(--serif); font-size: 14px; line-height: 1.7; color: var(--muted-2); }
.hp-plans .band-go { margin-top: 0; }

@media (max-width: 980px) {
  .hp-plans-lede { padding-bottom: 0; }
}
/* ── rp111 (Sir, 12 Oct: "when I'm scrolling, each section can be seen fully ...
   the plan section, I can't see the link at the bottom"). Two things hid it.
   The round Back to top button sits over the band's last 72px on the right,
   where the link is; the link now stops short of it. And on a window about
   937px tall (Sir's) the band was 130px taller than the room between the bar
   and the foot, so the wheel needed two stops; on a desktop window up to
   1000px tall the band's own spacing is drawn tighter, so one stop shows the
   heading, both cards and the link together. Nothing is removed. ── */
@media (min-width: 701px) {
  .hp-plans .band-go { margin-right: 44px; }
}
@media (min-width: 981px) and (max-height: 1000px) {
  .hp-plans .band-h { margin-bottom: 12px; }
  .hp-plans-lede { margin-top: 10px; line-height: 1.62; }
  .pl-seg.hp-plans-tabs { margin-top: 24px; }
  .hp-plans-tabs button { min-height: 42px; }
  .hp-plans .pl-panels { margin-top: 22px; }
  .hp-plans .pl-for { margin-bottom: 14px; }
  .hp-plans .pl-price { margin-top: 12px; }
  .hp-plans .pl-fee { margin-top: 12px; padding-top: 12px; }
  .hp-plans .pl-cond { margin-top: 12px; }
  .hp-plans .pl-act { margin-top: 10px; }
  .hp-plans-foot { margin-top: 20px; padding-top: 20px; padding-bottom: 18px; }
  .hp-plans-k { margin-bottom: 12px; padding-bottom: 10px; }
  .hp-plans-facts > div { padding: 12px 16px; }
  .hp-plans-end { margin-top: 14px; }
  .hp-plans-if { max-width: 96ch; line-height: 1.6; }
  .hp-plans-lede { max-width: 80ch; text-wrap: balance; }
  .hp-plans-say { font-size: clamp(30px, 2.4vw, 36px); }
}

/* on a phone the room is a picture above the head that fades into the cream, the cue a tint cannot give there (a36) */
@media (max-width: 700px) {
  .hp-plans { background:
      linear-gradient(180deg, rgba(243,239,228,.3) 0, rgba(243,239,228,.55) 120px, rgba(243,239,228,.92) 200px, #F3EFE4 290px),
      url('photos/home-plans-room-800.webp') 50% 0 / 100% auto no-repeat,
      var(--cream-2); }
}
@media (max-width: 700px) {
  .hp-plans { padding: 68px 0 72px; }
  .hp-plans-say { font-size: 26px; }
  .pl-seg.hp-plans-tabs { width: 100%; margin-top: 32px; }
  .hp-plans-tabs button { flex: 1 1 0; justify-content: center; padding: 6px 10px; }
  .hp-plans-tabs .t { letter-spacing: .12em; line-height: 1.35; }
  .hp-plans-foot { padding: 22px 16px 20px; border-radius: 18px; }
  .hp-plans-facts > div { grid-template-columns: 36px minmax(0, 1fr); gap: 3px 14px; padding: 14px; }
  .hp-plans-facts > div::before { width: 36px; height: 36px; border-radius: 11px; background-size: 18px, auto; }
}
@media (max-width: 980px) {
  .hp-plans-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-plans-tabs .t { transition: none; }
}

/* ══ THE BOARD ON THE HOMEPAGE ═════════════════════════════  20 Oct 2026 (rp161, rp162) ══
   The card itself is the settings card, drawn once in hyyryn-plan-cards.css
   since rp162 (Sir, 20 Oct: the plans page's cards too). This band only
   places it: the board held under its centred head, and the cards rising in
   once as they arrive. */
.hp-plans .pl-panels, .hp-plans-foot { max-width: 1480px; margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: no-preference) {
  .hp-plans.sr .pl-card { opacity: 0; transform: translateY(22px); transition: opacity 560ms cubic-bezier(.2,.7,.2,1), transform 720ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease, translate 320ms cubic-bezier(.16,1,.3,1); }
  .hp-plans.sr .pl-card:nth-child(2) { transition-delay: 90ms, 90ms, 0s, 0s; }
  .hp-plans.sr .pl-card:nth-child(3) { transition-delay: 180ms, 180ms, 0s, 0s; }
  .hp-plans.sr .pl-card:nth-child(4) { transition-delay: 270ms, 270ms, 0s, 0s; }
  .hp-plans.sr.visible .pl-card, .hp-plans.sr .pl-card:focus-within { opacity: 1; transform: none; }
}