/* ============================================================================
   PLATE — chapters 02–05: the collection, the adaptation, setup, the offer, the ending,
   and the detail dialog.

   Continues home.css's tokens and furniture (hairlines, dotted leaders, mono captions,
   registration brackets, one orange ink) across the rest of the page, so nothing here
   reads as a different visual idea bolted onto the opening. The library grid and the
   detail dialog are library.js's own markup and behaviour, shared verbatim with
   library.html -- only their presentation is local to the homepage.
   ============================================================================ */

/* ---------- chapter furniture ---------- */
.plate-home .chapter { position: relative; }
.plate-home .section { padding-block: clamp(64px, 10vh, 120px); }
/* The collection follows the opening's spread directly: no dead travel between them. */
.plate-home .library-all-section { padding-top: 0; margin-top: calc(-1 * var(--library-pull, 0px)); }
.plate-home .library-all-section #collection { margin-top: 0; }
.plate-home .library-all-section .grid { margin-top: 0; }
.collection-foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.collection-foot .chapter-note { margin: 0; max-width: none; }
/* a short window shows a single row of squares in the opening, so the grid carries on from the fourth */
.plate-home.tiles-one-row .grid.is-curated > .creation:nth-child(-n+3) { display: none; }
.plate-home.tiles-one-row .grid.is-curated > .creation:nth-child(n+4):nth-child(-n+6) { display: block; }
/* the toolbar, once moved into the opening's head (home-scroll.js): one quiet row */
.open-tiles-head .toolbar { border-top: 0; border-bottom: 1px solid var(--rule); padding: 6px 0 12px; margin: 0; }
/* the detail dialog's offer: only beside Pro work */
.detail-offer { display: none; }
.detail-wrap:has(#project-access.pro) .detail-offer { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; margin-top: 22px; padding: 22px 24px; border: 1px solid var(--orange); background: linear-gradient(170deg, #2a160a, #170f0a 60%, var(--bg)); box-shadow: 0 30px 80px -40px #ff6a1a80; }
.detail-offer-kicker { font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin: 0 0 8px; }
.detail-offer-title { font-family: var(--display); font-size: 26px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
/* Every preview moves: a muted loop in each square and card while it is on screen
 * (home-scroll.js), the poster underneath until the first frame has painted. */
.plate-home .art .home-loop, .plate-home .tile-media .home-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 1; }
.plate-home .home-loop.is-ready { opacity: 1; }
.plate-home .art .plate-no { z-index: 2; }
/* every card the same: one aspect, title and access only */
.plate-home .library-all-section .card-meta p { display: none; }
@media (prefers-reduced-motion: reduce) { .plate-home .home-loop { display: none; } }
.detail-offer-line { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 46ch; }
/* Was stretch with a 220px floor, so the label sat in the middle of a block far wider
 * than itself and stopped reading as a button. It sizes to its own text now, with the
 * link under it aligned to the same edge. */
.detail-offer-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
/* This rule loads after plate-identity.css and was quietly winning, which is why this one
 * button kept its black label after every other solid surface went white. */
.plate-home .button-solid { background: var(--orange-solid); color: #fff; border-color: var(--orange-solid); min-height: 46px; font: 600 14px/1 var(--sans); letter-spacing: .005em; }
.plate-home .button-solid::before, .plate-home .button-solid::after { border-color: #fff; opacity: .5; }
.plate-home .button-solid:hover { background: var(--orange-solid-hover); border-color: var(--orange-solid-hover); color: #fff; }
.plate-home .button-solid[aria-disabled="true"] { pointer-events: none; opacity: .6; }
.detail-offer-actions .text-link { align-self: flex-end; }
/* Pressable, so it takes the pressable orange and a white bold label, like every other
 * primary action. See the --orange-solid note in plate-identity.css. */
.plate-home .pill#project-action { background: var(--orange-solid); color: #fff; border-color: var(--orange-solid); font: 600 13px/1 var(--sans); letter-spacing: .005em; }
.plate-home .pill#project-action:hover { background: #ff8340; }
@media (max-width: 700px) { .plate-home.tiles-one-row .grid.is-curated > .creation:nth-child(-n+6) { display: block; } .detail-offer-actions { width: 100%; align-items: stretch; } }
.chapter-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 34px; }
.chapter-head-copy { max-width: 620px; }
.chapter-head .chapter-title { font-size: clamp(34px, 4.2vw, 62px); }
.chapter-note { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 16px 0 0; max-width: 46ch; }
.collection-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin: 0 0 4px; }
.collection-head .chapter-note { margin: 0; max-width: none; }
.catalogue-breakdown { font: 400 11.5px/1.6 var(--mono); color: var(--ink-3); margin: 0; }
.catalogue-breakdown:empty { display: none; }
/* The opening's six squares ARE the grid's first six cards; in the default, unfiltered
 * view the grid starts at the seventh so the library is never shown twice. A filter, a
 * search or the free-only toggle drops .is-curated and shows every card. */
.plate-home .grid.is-curated > .creation:nth-child(-n+6) { display: none; }

/* ---------- chapter 02: the library (#collection, shared with library.html) ---------- */
.plate-home #collection { margin-top: 8px; }
.plate-home .toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 0; margin-top: 10px; }
.plate-home .toolbar .filters { display: flex; gap: 2px; margin-right: auto; flex-wrap: wrap; }
.plate-home .toolbar .filters button { background: transparent; color: var(--ink-3); border-radius: 0; padding: 8px 14px; white-space: nowrap; min-height: 34px; font: 400 11.5px/1 var(--mono); letter-spacing: .02em; border-bottom: 1px dotted transparent; transition: color .18s, border-color .18s; }
.plate-home .toolbar .filters button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--orange); }
.plate-home .toolbar .filters button:hover:not([aria-pressed="true"]) { color: var(--ink); background: none; }
.plate-home .toolbar-meta { display: flex; align-items: center; gap: 18px; color: var(--ink-3); font-size: 12px; }
.plate-home #result-count { font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--orange); white-space: nowrap; }
.plate-home .free-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 28px; white-space: nowrap; color: var(--ink-2); font: 400 11.5px/1 var(--mono); }
.plate-home .free-toggle input { accent-color: var(--orange); width: 13px; height: 13px; margin: 0; }
.plate-home .search-wrap { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid var(--rule); border-radius: 0; padding: 0 12px; color: var(--ink-3); }
.plate-home .search-wrap input { background: none; border: 0; color: var(--ink); width: 180px; height: 34px; outline-offset: 6px; font: 400 11.5px/1 var(--mono); }
.plate-home .search-wrap input::placeholder { color: var(--ink-3); }

/* The grid: media dominant, wide, a quiet frame, honest per-entry crops. The opening's
 * spread already featured the lead works broad, so the home grid stays a steady rhythm
 * of equal plates rather than repeating a curated first row. */
.plate-home .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 22px; margin-top: 26px; }
.plate-home .grid.is-curated { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plate-home .grid.is-curated > .creation, .plate-home .grid.is-curated > .creation:nth-child(1), .plate-home .grid.is-curated > .creation:nth-child(2) { grid-column: auto; }
.plate-home .grid.is-curated > .creation .art { aspect-ratio: 16 / 10; }
.plate-home .plate-no { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 5px 8px; background: #0c0c0ec0; backdrop-filter: blur(6px); font: 400 10px/1 var(--mono); letter-spacing: .08em; color: var(--orange); pointer-events: none; }
.plate-home .plate-caption { font: 400 10.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.plate-home .creation { min-width: 0; content-visibility: auto; contain-intrinsic-size: 300px 380px; }
.plate-home .card-open { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 0; border-radius: 0; }
.plate-home .art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0; background: var(--panel); }
.plate-home .art img, .plate-home .art video { width: 100%; height: 100%; object-fit: cover; }
.plate-home .art img { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.plate-home .card-open:hover .art img, .plate-home .card-open:focus-visible .art img { transform: scale(1.03); }
.plate-home .art video { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; pointer-events: none; }
.plate-home .art video.is-ready { opacity: 1; }
.plate-home .art .open-label { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; align-items: center; background: #0c0c0ee0; backdrop-filter: blur(8px); border: 1px solid var(--rule); font: 400 10.5px/1 var(--mono); padding: 8px 12px; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; color: var(--ink); }
.plate-home .card-open:focus-visible .open-label { opacity: 1; transform: none; }
@media (hover: hover) { .plate-home .card-open:hover .open-label { opacity: 1; transform: none; } }
@media (hover: none) { .plate-home .art .open-label { display: none; } }
/* Every card arrives by opening -- the same verb as the scene above, one shot per card,
 * armed by home-scroll.js; never the page-wide fade-up. */
.plate-home .creation .art { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .plate-home .creation .art { transition: clip-path .7s cubic-bezier(.2,.8,.2,1) var(--card-delay, 0ms); }
  .plate-home .creation.is-shut .art { clip-path: inset(0 49.6% 0 49.6%); }
  .plate-home .creation .card-meta { transition: opacity .5s ease calc(var(--card-delay, 0ms) + 200ms); }
  .plate-home .creation.is-shut .card-meta { opacity: 0; }
}
.plate-home .card-meta { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 0 0; gap: 12px; border-top: 1px solid var(--rule); margin-top: 12px; }
.plate-home .card-meta h3 { font-family: var(--display); font-size: 19px; letter-spacing: -.015em; font-weight: 500; line-height: 1.2; color: var(--ink); }
.plate-home .card-meta p { color: var(--ink-3); margin-top: 5px; }
.plate-home .badge { flex: 0 0 auto; font: 400 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-radius: 0; padding: 6px 9px; white-space: nowrap; border: 1px solid var(--rule); color: var(--ink-2); }
/* The one ink, used hard: Pro is solid orange (it is what the page sells), free is orange
 * on the line. A hovered card or square draws its orange edge and its title warms. */
.plate-home .badge.free { color: var(--orange); border-color: var(--orange); background: transparent; }
.plate-home .badge.pro { color: var(--orange-ink); border-color: var(--orange); background: var(--orange); }
.plate-home .card-open:hover .art, .plate-home .card-open:focus-visible .art, .plate-home .tile:hover .tile-media, .plate-home .tile:focus-visible .tile-media { box-shadow: 0 0 0 1px var(--orange), 0 18px 48px -18px #ff6a1a80; }
.plate-home .card-open:hover .card-meta h3, .plate-home .tile:hover .tile-title { color: var(--orange); }
.plate-home .card-meta h3, .plate-home .tile-title { transition: color .2s; }
.plate-home .art, .plate-home .tile-media { transition: box-shadow .25s; }
.plate-home .art.failed:after { content: 'Preview image unavailable'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font: 400 11px var(--mono); }
.plate-home .skeleton { aspect-ratio: 16 / 10; background: var(--panel); }
.plate-home .empty { text-align: center; padding: 70px 24px; }
.plate-home .empty h2 { font-family: var(--display); font-size: 26px; font-weight: 500; }
.plate-home .empty p { color: var(--ink-3); margin: 12px 0 20px; }
@media (max-width: 1000px) { .plate-home .grid, .plate-home .grid.is-curated { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .plate-home .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 12px 0; }
  .plate-home .toolbar .filters { grid-column: 1/-1; justify-content: space-between; gap: 0; }
  .plate-home .toolbar .filters button { padding-inline: 8px; font-size: 10.5px; }
  .plate-home .search-wrap { min-width: 0; order: 2; }
  .plate-home .search-wrap input { width: 100%; min-width: 0; }
  .plate-home .toolbar-meta { order: 3; }
  /* two columns, like the squares above them: one continuous library on a phone too */
  .plate-home .grid, .plate-home .grid.is-curated { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .plate-home .card-meta h3 { font-size: 16px; }
  .plate-home .card-meta p { display: none; }
  .plate-home .art .open-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .plate-home .art video { display: none; } .plate-home .art img { transition: none; } .plate-home .card-open:hover .art img { transform: none; } }

/* ---------- the detail dialog: presented like a piece, on a dark, blurred surround ---------- */
#project-dialog { border: 1px solid #3a3b3f; padding: 0; color: var(--ink); background: var(--bg); border-radius: 0; width: min(1160px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; }
#project-dialog::backdrop { background: #04050690; backdrop-filter: blur(24px); }
.detail-wrap { position: relative; }
.detail-topbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px 26px; padding: 13px 18px 13px 26px; background: #0c0c0eee; backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--orange); }
.detail-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.detail-chip { flex-shrink: 0; font: 400 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); white-space: nowrap; }
.detail-id .badge { flex-shrink: 0; }
#project-title { font-family: var(--display); font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.detail-topbar-actions .pill { min-height: 36px; padding: 9px 15px; font-size: 11.5px; gap: 8px; }
.close { width: 34px; height: 34px; border-radius: 50%; font-size: 20px; line-height: 1; background: #26282be6; border: 1px solid #ffffff30; color: var(--ink); flex-shrink: 0; }
.close:hover { background: #404348; }
.detail-stage { position: relative; background: #070708; padding: 20px 26px; }
.detail-media { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; aspect-ratio: 16/9; max-height: 66dvh; overflow: hidden; background: #0a0a0b; box-shadow: 0 30px 70px -20px #000c; }
.detail-media img, .detail-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-media > p { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--ink-3); font-size: 13px; }
.detail-body { padding: 24px 30px 30px; }
.detail-summary { font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 760px; margin: 0; }
.detail-limitation { font-size: 12px; color: #d9a86a; margin: 8px 0 0; line-height: 1.5; max-width: 760px; }
.detail-limitation:empty { display: none; }
.detail-note { font: 400 11px/1.6 var(--mono); color: var(--ink-3); margin: 10px 0 0; }
.detail-playback-toggle { position: absolute; right: 34px; bottom: 34px; z-index: 2; padding: 9px 14px; background: #0c0c0ee6; border: 1px solid var(--rule); color: var(--ink); font: 400 10.5px/1 var(--mono); letter-spacing: .03em; }
.detail-playback-toggle:hover { background: var(--orange-solid); color: #fff; border-color: var(--orange-solid); }
/* The sound control for a scored preview: the same object as the play/pause, parked on the other
   side of the stage. Declared last so it wins the right/left pair, whichever sheet loads first. */
.detail-playback-toggle.detail-sound-toggle { right: auto; left: 34px; }
.detail-media-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 20px; text-align: center; font-size: 12px; color: var(--ink-3); background: linear-gradient(to top, #070708e6, #07070800); }
.plate-home .pill { display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 0; background: var(--ink); color: var(--bg); font: 400 11.5px/1 var(--mono); letter-spacing: .02em; min-height: 42px; }
.plate-home .pill:hover { background: var(--orange-solid); color: #fff; border-color: var(--orange-solid); }
.plate-home .pill.secondary { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.plate-home .pill.secondary:hover { background: var(--panel-2); }
.plate-home .pill[aria-disabled="true"] { pointer-events: none; opacity: .5; }
.plate-home .text-button { background: none; padding: 10px 0 0; font: 400 11px var(--mono); color: var(--ink-3); border: 0; }
.detail-disclosure { margin-top: 14px; border-top: 1px solid var(--line); }
.detail-disclosure > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 16px 0; font: 400 11.5px var(--mono); color: var(--ink-3); }
.detail-disclosure > summary::-webkit-details-marker { display: none; }
.detail-disclosure > summary > span { font-size: 15px; transition: transform .15s; }
.detail-disclosure[open] > summary > span { transform: rotate(45deg); }
.detail-disclosure-body { padding-bottom: 6px; }
#about-panel, #customize-panel, #detail-status { max-width: 800px; }
.detail-disclosure-body h3 { font-size: 12px; font-weight: 500; margin: 18px 0 14px; }
#deliverables { padding-left: 17px; font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0; }
#deliverables li { margin: 9px 0; }
.plate-home .fine-print { font-size: 11px; color: var(--ink-3); margin: 20px 0; line-height: 1.7; }
.plate-home .fine-print ul { padding-left: 15px; }
.customize-disclosure { font-size: 13px; margin-top: 18px; }
.customize-disclosure > summary { cursor: pointer; color: var(--ink); font-weight: 500; }
.customize-disclosure[open] > summary { margin-bottom: 14px; }
#customize-panel-body p { font-size: 12px; color: var(--ink-3); }
#customize-panel-body label { display: block; font: 400 11px var(--mono); margin: 18px 0 8px; }
#customize-panel-body input, #customize-panel-body textarea { background: var(--panel-2); border: 1px solid var(--line); border-radius: 0; color: var(--ink); padding: 12px; width: 100%; resize: vertical; font: inherit; }
#copy-brief { margin-top: 18px; width: 100%; }
#brief-preview { font: 11px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; color: var(--ink-2); }
#detail-status { font: 400 11px var(--mono); color: var(--orange); min-height: 18px; margin-top: 8px; }
body.modal-open { overflow: hidden; }
@media (max-width: 700px) {
  #project-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; }
  .detail-topbar { position: relative; flex-wrap: wrap; padding: 12px 50px 10px 16px; gap: 8px; }
  .detail-id { order: 1; width: 100%; }
  #project-title { font-size: 18px; }
  .detail-topbar-actions { order: 2; width: 100%; overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; }
  .detail-topbar-actions .pill { flex-shrink: 0; }
  .close { position: absolute; top: 10px; right: 10px; }
  .detail-stage { padding: 14px 16px; }
  .detail-media { max-height: 46dvh; min-height: 170px; }
  .detail-body { padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
  .detail-summary { font-size: 13px; }
}

/* The comparisons/community disclosure keeps its base look from styles.css/community.css;
 * the trigger picks up the hairline-and-mono language. */
.plate-home .home-disclosure { margin-top: 40px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.plate-home .home-disclosure > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; font: 400 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.plate-home .home-disclosure > summary::-webkit-details-marker { display: none; }
.plate-home .home-disclosure > summary > span { font-size: 17px; font-family: var(--sans); transition: transform .15s; }
.plate-home .home-disclosure[open] > summary > span { transform: rotate(45deg); }
.plate-home .home-disclosure[open] { padding-bottom: 24px; }
.plate-home .home-disclosure .catalog-controls { margin-top: 12px; }
.plate-home .home-disclosure .comparison-gallery { margin-top: 24px; }
.plate-home .community-band { border: 1px solid var(--rule); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; background: var(--panel); }
.plate-home .community-band-title { font-size: 14px; font-weight: 500; }
.plate-home .community-band-note { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.plate-home .community-band-actions { display: flex; align-items: center; gap: 14px; }
.plate-home .community-band-status { font-size: 12px; color: var(--ink-3); }

/* ---------- chapter 03b: how it works (#install) ---------- */
.plate-home .install-section { padding-block: 96px; border-top: 1px solid var(--rule); gap: 64px; }
.plate-home .install-intro h2 { font-size: clamp(34px, 3.6vw, 52px); margin: 0 0 26px; }
.setup-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 0; }
.setup-steps li { display: flex; align-items: baseline; gap: 14px; font-size: 14.5px; color: var(--ink-2); padding: 11px 0; border-top: 1px solid var(--rule); }
.setup-steps li:first-child { border-top: 0; padding-top: 0; }
.setup-steps b { font: 400 11px/1 var(--mono); color: var(--orange); flex-shrink: 0; }
.plate-home .install-intro > p:not(.plate-index) { font-size: 13.5px; line-height: 1.7; color: var(--ink-3); max-width: 400px; }
.plate-home .install-panel { border-radius: 0; background: var(--panel); border: 1px solid var(--rule); }
.plate-home .install-panel .setup-label { font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 640px) { .plate-home .install-section { padding-block: 56px; } .plate-home .install-intro h2 { font-size: 34px; } }

/* ---------- chapter 04: the offer (#pricing) ----------
 * The four openings close to hairlines as the offer arrives (--close, home-scroll.js). */
.plate-home .pricing-section { border-top: 1px solid var(--rule); padding-block: 88px 96px; }
.plate-home .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.plate-home .press-run { font: 400 11px/1.6 var(--mono); color: var(--ink-3); margin: 14px 0 0; }
.plate-home .press-run b { color: var(--ink); font-weight: 400; }
.plate-home .pricing-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 30px; margin: 0 0 40px; list-style: none; padding: 0; }
.plate-home .pricing-facts li { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 14px; }
.plate-home .pricing-facts li strong { color: var(--ink); font-weight: 500; }
.plate-home .craft-pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.plate-home .craft-plan { position: relative; border: 1px solid var(--rule); padding: 34px; background: transparent; display: flex; flex-direction: column; }
.plate-home .craft-plan-pro { border-color: var(--orange); background: linear-gradient(170deg, #2a160a, #170f0a 55%, var(--bg)); box-shadow: 0 30px 80px -40px #ff6a1a80, inset 0 1px 0 #ff6a1a55; }
.plate-home .craft-plan-pro .plan-top > span { color: var(--orange); }
.plate-home .craft-plan-pro li:before { color: var(--orange); }
.plate-home .craft-plan-pro::before, .plate-home .craft-plan-pro::after { content: ''; position: absolute; width: 10px; height: 10px; border: 1px solid var(--orange); }
.plate-home .craft-plan-pro::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.plate-home .craft-plan-pro::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.plate-home .plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.plate-home .plan-top h3 { font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.plate-home .craft-plan-pro .plan-top h3 { color: var(--orange); }
.plate-home .plan-top > span { font-family: var(--display); font-size: 44px; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.plate-home .plan-top b { font-weight: 500; }
.plate-home .plan-top small { font: 400 11px var(--mono); color: var(--ink-3); letter-spacing: 0; }
.plate-home .craft-plan > p { font-size: 14.5px; color: var(--ink-2); }
.plate-home .craft-plan ul { list-style: none; padding: 0; margin: 24px 0 28px; flex: 1; }
.plate-home .craft-plan li { font-size: 13.5px; color: var(--ink-2); margin: 0; padding: 9px 0 9px 18px; position: relative; border-top: 1px solid var(--line); }
.plate-home .craft-plan li:first-child { border-top: 0; }
.plate-home .craft-plan li:before { content: '+'; position: absolute; left: 0; color: var(--ink-3); font-family: var(--mono); }
.plate-home .craft-plan > .button { width: 100%; }
.plate-home .craft-plan .plan-fine { font: 400 10.5px/1.6 var(--mono); text-align: center; color: var(--ink-3); margin-top: 12px; }
.plate-home .pricing-footnote { text-align: center; font: 400 11px var(--mono); color: var(--ink-3); margin-top: 22px; }
.plate-home .pricing-footnote span { margin: 0 10px; }
.plate-home .pricing-footnote a { color: var(--ink-2); }
.plate-home .entitlement-oneline { font-size: 13.5px; color: var(--ink); margin: 4px 0 20px; }
.plate-home .entitlement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.plate-home .entitlement-grid h3 { font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.plate-home .entitlement-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.plate-home .entitlement-list li { padding-left: 16px; position: relative; }
.plate-home .entitlement-list li:before { content: '+'; position: absolute; left: 0; color: var(--ink-3); }
@media (max-width: 640px) { .plate-home .entitlement-grid { grid-template-columns: 1fr; gap: 20px; } }
/* ---------- the Free/Pro table ----------
 * Was five sizes of small grey text under a mono heading that repeated the summary
 * directly above it, with nothing to say which of three loose columns you were reading.
 * It now takes its head from the plan cards themselves (mono tier label over a Fraunces
 * figure), fixes the three columns so every row lines up, and carries the Pro card's
 * orange across the Pro column so the paid side is legible from the far edge of the row.
 * The caption is kept for screen readers only; on screen the summary already says it. */
.plate-home .plan-compare-wrap { overflow-x: auto; margin-top: 6px; }
.plate-home .plan-compare { margin-top: 0; width: 100%; min-width: 660px; table-layout: fixed; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.plate-home .plan-compare th, .plate-home .plan-compare td { border-top: 1px solid var(--rule); border-bottom: 0; padding: 15px 18px; text-align: left; vertical-align: top; }
.plate-home .plan-compare th:first-child, .plate-home .plan-compare td:first-child { padding-left: 0; }

/* the head: the same three parts as a plan card, at the size of a heading */
.plate-home .plan-compare thead th { width: 32%; border-top: 1px solid transparent; padding-top: 16px; padding-bottom: 18px; text-transform: none; letter-spacing: 0; }
.plate-home .plan-compare thead .plan-col-free { width: 28%; }
.plate-home .plan-compare thead .plan-col-pro { width: 40%; }
.plate-home .plan-compare-col { display: block; font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.plate-home .plan-compare-figure { display: block; margin-top: 12px; font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -.025em; text-transform: none; color: var(--ink); }
.plate-home .plan-compare-figure span { display: inline; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.plate-home .plan-compare thead small { display: block; margin-top: 8px; font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.plate-home .plan-compare thead .plan-col-pro .plan-compare-col { color: var(--orange); }

/* the Pro column is the thing being sold: it keeps the card's orange edge and wash */
.plate-home .plan-compare .plan-col-pro { background-image: linear-gradient(#ff6a1a12, #ff6a1a12); }
.plate-home .plan-compare thead .plan-col-pro { border-top-color: var(--orange); }

.plate-home .plan-compare tbody th { font: 500 15px/1.6 var(--sans); color: var(--ink); }
.plate-home .plan-compare tbody td { color: var(--ink-2); }
/* counts are data, so they read in the mono face the rest of the page keeps for data */
.plate-home .plan-compare .is-fig { font: 400 16px/1.5 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.plate-home .plan-compare .is-value { color: var(--ink); font-variant-numeric: tabular-nums; }
.plate-home .plan-compare .is-none { font-family: var(--mono); color: var(--ink-3); }
/* one row at a time, across a table far wider than any single cell */
.plate-home .plan-compare tbody tr:hover > * { background-color: #ffffff08; }
.plate-home .plan-compare tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
.plate-home .plan-compare-both td { color: var(--ink-2); }
.plate-home .plan-compare-note { font-size: 13.5px; line-height: 1.75; color: var(--ink-2); margin-top: 22px; max-width: 92ch; }
/* On a phone a three-column table is a sideways scroll that hides the column being sold,
 * so each capability becomes its own block: the name, then the two tiers under their own
 * mono labels. The two prices stay at the top, side by side, where the head used to be. */
@media (max-width: 760px) {
  .plate-home .plan-compare-wrap { overflow-x: visible; }
  .plate-home .plan-compare { display: block; min-width: 0; table-layout: auto; font-size: 14.5px; }
  .plate-home .plan-compare thead, .plate-home .plan-compare tbody, .plate-home .plan-compare tr,
  .plate-home .plan-compare thead th, .plate-home .plan-compare tbody th, .plate-home .plan-compare td { display: block; width: auto; }
  .plate-home .plan-compare thead tr { display: flex; gap: 14px; }
  .plate-home .plan-compare thead th:first-child { display: none; }
  .plate-home .plan-compare thead th { flex: 1 1 0; padding: 14px 14px 16px; }
  .plate-home .plan-compare-figure { margin-top: 9px; font-size: 26px; }
  .plate-home .plan-compare tbody tr { border-top: 1px solid var(--rule); padding: 16px 0 6px; }
  .plate-home .plan-compare tbody th, .plate-home .plan-compare tbody td { border-top: 0; padding: 0; }
  .plate-home .plan-compare tbody th { margin-bottom: 11px; }
  .plate-home .plan-compare tbody td { padding: 9px 14px 10px; margin-bottom: 4px; }
  .plate-home .plan-compare tbody td[data-tier]::before { content: attr(data-tier); display: block; margin-bottom: 5px; font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .plate-home .plan-compare tbody td[colspan] { padding-left: 0; }
  .plate-home .plan-compare .is-fig { font-size: 15px; }
  .plate-home .plan-compare tbody tr:hover > * { background-color: transparent; }
  .plate-home .plan-compare tbody tr:last-child > * { border-bottom: 0; }
  .plate-home .plan-compare tbody { border-bottom: 1px solid var(--rule); }
  .plate-home .plan-compare-note { max-width: none; }
}
.plate-home .home-faq { display: grid; grid-template-columns: 1fr 2fr; gap: 50px; margin-top: 70px; }
.plate-home .home-faq h2 { font-family: var(--display); font-size: 30px; font-weight: 500; }
.plate-home .home-faq .faq summary { font-size: 14px; }
.plate-home .home-faq .faq p { font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) {
  .plate-home .pricing-facts { grid-template-columns: 1fr 1fr; }
  .plate-home .craft-pricing { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .plate-home .pricing-section { padding-block: 24px 56px; }
  .plate-home .section-heading { display: block; }
  .plate-home .section-heading .text-link { margin-top: 14px; display: inline-flex; }
  .plate-home .pricing-facts { grid-template-columns: 1fr; gap: 14px; }
  .plate-home .home-faq { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
}

/* the settling entrance: opacity only, ~400ms, never a gate */
@media (prefers-reduced-motion: no-preference) {
  /* An animation with only a `from` frame, so it settles into whatever opacity the scene's
   * own phase variables compute -- a transition here would lag every scroll-linked change. */
  @keyframes plate-settle { from { opacity: 0; } }
  .hero-intro:not(.hero-intro-ready) .open-stage > * { opacity: 0; }
  .hero-intro.hero-intro-ready .open-stage > * { animation: plate-settle .42s ease backwards; }
  .hero-intro.hero-intro-ready .open-stage > .open-statement { animation-delay: .06s; }
  .hero-intro.hero-intro-ready .open-stage > .open-picks, .hero-intro.hero-intro-ready .open-stage > .open-hint { animation-delay: .14s; }
}

/* ---------- the footer, plain ----------
 * The row itself moved to plate-identity.css: every page ends on it, so one file
 * owns it. Chapter 05's own ending -- the oversized PLATE and its closing slits --
 * stays here, because that is this page's composition and not a band to paste
 * under every page. */


/* ---------- pricing, in the register of the reference: one bold word, two rounded
 * cards, the price big and white, one loud pill to pay once ---------- */
.pricing-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.pricing-pill { display: inline-block; margin: 0 0 22px; padding: 8px 14px; border-radius: 999px; background: #ffffff12; border: 1px solid #ffffff1f; font: 500 12px/1 var(--sans); color: var(--ink); }
.pricing-title { font: 800 clamp(48px, 6vw, 76px)/1 var(--sans); letter-spacing: -.045em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; }
.pricing-sub { font: 400 16px/1.5 var(--sans); color: var(--ink-2); margin: 0; }
.pricing-sub .text-link { font-family: var(--sans); font-size: 14px; border-bottom-color: var(--ink-3); }
.plate-home .craft-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: 24px; }
.plate-home .craft-plan { position: relative; border: 1px solid #ffffff14; border-radius: 22px; padding: 30px 26px 26px; background: #1b1b1e; display: flex; flex-direction: column; }
.plate-home .craft-plan-pro { border-color: var(--orange); background: #1b1b1e; box-shadow: 0 0 0 1px #ff6a1a33, 0 40px 120px -40px #ff6a1acc, 0 0 80px -30px #ff6a1a66; }
.plate-home .craft-plan-pro::before, .plate-home .craft-plan-pro::after { display: none; }
.plan-flag { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); margin: 0; padding: 7px 14px; border-radius: 999px; background: var(--orange); color: var(--orange-ink); font: 600 13px/1 var(--sans); white-space: nowrap; box-shadow: 0 8px 24px -8px #ff6a1acc; }
.plate-home .plan-top { display: block; margin: 0 0 18px; padding: 0; border: 0; }
.plate-home .plan-top h3 { font: 600 22px/1.2 var(--sans); letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.plate-home .craft-plan-pro .plan-top h3 { color: var(--ink); }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 22px; }
.plan-amount { font: 700 52px/1 var(--sans); letter-spacing: -.045em; color: var(--ink); }
.plan-price small { font: 400 15px/1 var(--sans); color: var(--ink-3); }
.plate-home .craft-plan > p:not(.plan-price):not(.plan-fine):not(.plan-flag) { font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); margin: 0; }
.plate-home .plan-cta { width: 100%; min-height: 50px; border-radius: 999px; font: 600 15px/1 var(--sans); letter-spacing: 0; }
.plate-home .plan-cta::before, .plate-home .plan-cta::after { display: none; }
/* The pay button. Deepened so a white bold label clears contrast on it at any point of
 * the gradient: the old top stop (#ff8a4a) gave white 2.4:1, and every stop now
 * clears 4.78:1. */
.plate-home .craft-plan-pro .plan-cta { background: linear-gradient(180deg, #cc4400, #a83600); border-color: transparent; color: #fff; box-shadow: 0 14px 40px -12px #ff6a1acc; }
.plate-home .craft-plan-pro .plan-cta:hover { background: linear-gradient(180deg, #a83600, #8f2e00); color: #fff; }
.plate-home .craft-plan .button-ghost.plan-cta { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.plate-home .craft-plan .button-ghost.plan-cta:hover { background: #fff; color: var(--bg); }
.plate-home .craft-plan ul { list-style: none; padding: 0; margin: 22px 0 0; flex: 1; order: 5; }
.plate-home .craft-plan li { font: 400 15px/1.4 var(--sans); color: var(--ink); margin: 0; padding: 9px 0 9px 28px; position: relative; border: 0; }
.plate-home .craft-plan li:before { content: '' !important; position: absolute; left: 2px; top: 13px; width: 10px; height: 6px; border-left: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); background: none; }
.plate-home .craft-plan-pro li:before { border-color: var(--orange); }
.plate-home .craft-plan > .plan-top { order: 0; }
.plate-home .craft-plan > .plan-price { order: 2; }
.plate-home .craft-plan > .button { order: 3; }
.plate-home .craft-plan .plan-fine { order: 4; font: 400 12px/1.5 var(--sans); text-align: center; color: var(--ink-3); margin: 10px 0 0; }
.plate-home .craft-plan .plan-fine .text-link { font-family: var(--sans); font-size: 12px; }
.plate-home .craft-plan > p[data-pricing$=".description"] { order: 1; margin: 0 0 18px; }
.plate-home .pricing-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 24px; margin: 44px 0 0; }
.plate-home .pricing-facts li { font: 400 12px/1.55 var(--sans); color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 12px; }
.plate-home .pricing-facts li strong { color: var(--ink-2); font-weight: 500; }
@media (max-width: 900px) { .plate-home .craft-pricing { grid-template-columns: minmax(0, 420px); } .plate-home .pricing-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .plate-home .pricing-facts { grid-template-columns: 1fr; } .pricing-title { font-size: 44px; } }

/* An owner must not meet the purchase panel. `hidden` has to beat the :has() rule above,
 * which sets display:flex on the same element. */
.detail-offer[hidden]{display:none!important}