/* ⛔ D456 · THE FEATURES AND PRICING PAGES' ONE STYLESHEET (/features, /pricing; built as
   previews under /preview/, moved to their real paths by D508 — this file kept its path).
   ⭐ THE COLOURS ARE THE LIVE PAGE'S COMPUTED VALUES, NOT ITS TOKEN NAMES.
   Two wrong golds already reached Eric, both carrying a provenance claim, so
   each value below was MEASURED with getComputedStyle on the live Home page
   (https://www.feltshark.com/, live commit 0fa71f03) on 14 Oct, 00:35:
     background ........ body backgroundColor            rgb(10, 10, 10)
     body text ......... body color, and the colour of 44 of the 87 visible
                         paragraphs and list items (the most common)
                                                          rgb(242, 244, 245)
     gold .............. span.gold color                 rgb(201, 168, 76)
     the green button .. a.btn.btn-primary background    rgb(46, 230, 138)
                         and its text                     rgb(5, 46, 27)
   The measurement is recorded in docs/v9/000-REPORTS-13oct-evening.md
   ("PREVIEW PAGES").
   ⛔ NEVER A FIXED rem WIDTH ON A GRID COLUMN THAT SHARES A ROW: at 200% text
   zoom a 30rem column resolves to 960px and the page scrolls sideways. Every
   shared column below is minmax(0, ...) or a percentage. */
@font-face{
  font-family:'Space Grotesk';
  src:url('/assets/fonts/SpaceGrotesk[wght].woff2') format('woff2-variations');
  font-weight:300 700; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/Inter[wght].woff2') format('woff2-variations');
  font-weight:400 700; font-display:swap;
}
:root{
  --pv-bg:rgb(10,10,10);
  --pv-text:rgb(242,244,245);
  --pv-gold:rgb(201,168,76);
  --pv-green:rgb(46,230,138);
  --pv-green-ink:rgb(5,46,27);
  --pv-rule:rgba(255,255,255,.14);
  --pv-display:'Space Grotesk','Segoe UI',sans-serif;
  --pv-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
/* ⛔ D522: these panels live INSIDE Home now, beside the hero's own stylesheet, so
   no rule here may reach outside `.pv` -- `body`, `img` and `*` were page-wide when
   this file styled pages of its own, and `img{display:block}` alone would change
   the hero. */
.pv, .pv *{box-sizing:border-box}
.pv{background:var(--pv-bg); color:var(--pv-text);
  font-family:var(--pv-body); font-size:1.125rem; line-height:1.6}
.pv img{max-width:100%; height:auto; display:block}
/* 19 Oct: the card art is wrapped in <picture> for its WebP variants, and the
   <picture> takes the <img>'s place as the grid cell; the img fills it.
   ⛔ NOT display:contents, tried first: the <source> then became a grid cell of
   its own and pushed the cap image into the copy column (224 -> 798px at 1440,
   pixel-diffed by the before/after shots). */
.pv picture{display:block; min-width:0}
.pv{max-width:72rem; margin:0 auto; padding:3rem 1.25rem 4rem}
.pv h1,.pv h2,.pv h3{font-family:var(--pv-display); line-height:1.2; margin:0 0 .75rem;
  overflow-wrap:anywhere}
.pv h1,.pv .pv-h1{font-size:2.5rem}
.pv h2,.pv h3{font-size:1.5rem}
/* D522: on Home each panel is a section; its title is the old page h1, as an h2 */
.pv-panel{padding:3.5rem 0 1rem; border-top:1px solid var(--pv-rule)}
.pv-panel:first-child{border-top:0}
.pv-panel{scroll-margin-top:var(--hdr-h, 72px)}
.pv p{margin:0 0 .75rem}
.pv-lede{font-size:1.25rem; max-width:44rem}
.pv-head{margin-bottom:2.5rem}

/* ---- the five cards: one column, stacked -------------------------------- */
.pv-cards{list-style:none; margin:0; padding:0; display:grid; gap:2rem}
.pv-card{display:grid; gap:1.5rem 2rem; align-items:start;
  padding:1.75rem; border:1px solid var(--pv-rule); border-radius:12px}
/* ⭐ D514: "FEATURE 05" is a small gold label, not a large numeral. 1.125rem is
   the 18px floor (Eric, 5 Sep: "18 px minimum ... Period"; check_heading_floor):
   the relay's 15px label floor is a MINIMUM, and 18 meets both. */
.pv-num{font-family:var(--pv-display); font-weight:700; color:var(--pv-gold);
  font-size:1.125rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 .35rem}
/* cards 01 and 03 (cap, Tiger): image column minmax(0, 14rem), copy beside */
.pv-narrow{grid-template-columns:minmax(0,14rem) minmax(0,1fr)}
/* card 02 (scene): image column minmax(0, 45%), copy beside */
.pv-wide{grid-template-columns:minmax(0,45%) minmax(0,1fr)}
/* cards 04 and 05 (the two trademarks): lockup above the copy, max 20rem */
.pv-stack{grid-template-columns:minmax(0,1fr)}
/* ⭐ D510 (Eric, 17 Oct): "the word SHARK [in SharkSense] is the same size as
   SHARK in SHARKBAIT". MEASURED by tools/_lockup_letter_height.py: the H of
   "SHARK" is 11.73% of SharkBait's image width and 7.23% of SharkSense's, so
   SharkSense renders 1.622x SharkBait's width. Both are sized off ONE number:
   SharkBait keeps its 20rem where the card allows it, and on a narrow card it
   shrinks so that SharkSense (capped at 100%) still matches it. */
/* ⭐ D517 (Eric, 18 Oct): "these two logos need to 30% bigger" -- x1.3 on the
   one width both derive from, so D510's equal "SHARK" holds. */
.pv-lockup{--sense:1.622; --lock-w:calc(1.9375rem * 0.71 / 0.1173 * 1.3);
  width:min(var(--lock-w), calc(100% / var(--sense))); max-width:none}
.pv-lockup--sense{width:min(calc(var(--lock-w) * var(--sense)), 100%)}
.pv-img{width:100%; border-radius:8px}
.pv-copy{min-width:0; overflow-wrap:anywhere}

/* ---- D514 · THE FEATURE CARDS' HIERARCHY (graphical only, no copy) ----------
   A card title is 1.9375rem (31px), the "30-32px text title" the ruling sizes
   the lockups against. On 04 and 05 the LOCKUP is the title; their <h2> is
   visually hidden (.pv-vh), kept for screen readers and search.
   ⭐ THE LOCKUP'S SIZE IS DERIVED: its "SHARK" cap height matches the cap height
   of a 31px Space Grotesk title (0.71 em, MEASURED by tools/_features_measure.mjs
   with canvas measureText at 1440 and 1280; first assumed 0.70), using the H's share
   of each image's width from tools/_lockup_letter_height.py (D510: 11.73% of
   SharkBait's width). So SharkBait renders 1.9375rem x 0.71 / 0.1173 wide, and
   SharkSense 1.622x that (D510), capped at the card's width. */
.pv-card h2, .pv .pv-card-h{font-size:1.9375rem; margin:0 0 1rem}
.pv-vh{position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.pv-copy .pv-lockup{display:block; margin:.25rem 0 1.25rem}
/* ROWS: two columns, the gold label left and the text right, BASELINE-aligned.
   ⛔ EVERY COLUMN IS minmax(0, ...). The text column's 40rem cap is what holds a
   line to ~65-75 characters (measured in D514), not a separate max-width. */
.pv-rows{margin:0; display:grid; gap:.85rem}
.pv-rows > div{display:grid; grid-template-columns:minmax(0,10.5rem) minmax(0,40rem);
  gap:.25rem 1.5rem; align-items:baseline}
.pv-rows dt, .pv-inset-label{font-family:var(--pv-display); font-weight:700;
  color:var(--pv-gold); font-size:1.125rem; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.4}
.pv-rows dd{margin:0}
/* CARD 05: Play It Out as an inset; the availability line at the foot */
.pv-inset{margin:1.25rem 0 0; padding:1rem 1.25rem; border-radius:10px;
  background:rgba(255,255,255,.06); max-width:52rem}
.pv-inset-label{margin:0 0 .35rem}
.pv-inset p:last-child{margin:0}
.pv-avail{display:flex; align-items:center; gap:.6rem; margin:1.25rem 0 0 !important;
  padding-top:1rem; border-top:1px solid var(--pv-rule)}
.pv-avail svg{flex:none; color:var(--pv-green)}
@media (max-width:40rem){
  .pv-rows > div{grid-template-columns:minmax(0,1fr)}
  .pv-card h2, .pv .pv-card-h{font-size:1.625rem}
}

/* ---- D507: the site bar (logo home + the three pages) and the drawer door ---- */
.pv-top{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin:0 0 2rem}
.pv-top img{display:block; height:44px; width:auto}
.pv-top nav{display:flex; gap:1.25rem; flex-wrap:wrap}
.pv-top nav a{color:var(--pv-text); text-decoration:none; font-family:var(--pv-display);
  font-weight:600; font-size:1.125rem}   /* the 18px floor; was 1rem (16px), D507's own slip, measured D514 */
.pv-top nav a:hover,.pv-top nav a:focus-visible{color:var(--pv-gold)}
.pv-door{margin:2.5rem 0 0; padding-top:1.5rem; border-top:1px solid var(--pv-rule)}
.pv-door h2{margin:0 0 .5rem}
.pv-door h2 a{color:var(--pv-gold); text-decoration:none}
.pv-door h2 a:hover,.pv-door h2 a:focus-visible{text-decoration:underline; text-underline-offset:4px}
.pv-door p{margin:0}

/* ---- the closing block, gold left border -------------------------------- */
.pv-closing-h{margin:1.5rem 0 .5rem}   /* D511: "When Ready" */
.pv-closing{margin:3rem 0 0; padding:1.25rem 0 1.25rem 1.5rem;
  border-left:4px solid var(--pv-gold); max-width:48rem}

/* ---- pricing ------------------------------------------------------------ */
.pv-tier{padding:1.75rem; border-radius:12px; margin:0 0 2rem; overflow-wrap:anywhere}
.pv-free{border:1px solid var(--pv-rule); border-top:4px solid var(--pv-green)}
.pv-later{border:2px dashed var(--pv-rule)}
.pv-price{font-size:1.125rem}
.pv-amount{font-family:var(--pv-display); font-weight:700; font-size:2.5rem}
.pv-kicker{font-weight:700}
/* ⭐ D493: one row per tier, each with its own price and its own note.
   ⛔ EVERY COLUMN IS minmax(0, ...): a fixed rem column resolved past the
   viewport at 200% zoom twice from this chat (see the header). */
.pv-ladder-tiers{list-style:none; margin:0 0 1.25rem; padding:0; display:grid; gap:1rem}
.pv-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,max-content) minmax(0,max-content);
  gap:.5rem 1.5rem; align-items:baseline; padding:1rem 0; border-top:1px solid var(--pv-rule)}
.pv-row-name{min-width:0; overflow-wrap:anywhere}
.pv-row-levels{white-space:normal; margin-left:.35rem}
.pv-ladder-box{border:1px solid var(--pv-rule)}
.pv-row-what{display:block; margin-top:.35rem}
.pv-row-price{font-family:var(--pv-display); font-weight:700; font-size:1.75rem}
.pv-row-note{color:var(--pv-gold); font-weight:700; white-space:nowrap}
@media (max-width:40rem){
  .pv-row{grid-template-columns:minmax(0,1fr) minmax(0,max-content)}
  .pv-row-name{grid-column:1 / -1}
}
.pv-list{margin:0 0 1rem; padding-left:1.25rem}
.pv-list li{margin:0 0 .6rem}
.pv-badge{display:inline-block; font-family:var(--pv-display); font-weight:700;
  font-size:1.125rem; letter-spacing:.06em; padding:.25rem .75rem;
  border:1px solid var(--pv-rule); border-radius:999px; max-width:100%}
.pv-foot{margin:0}

/* ---- D513 · PRICING, FROM CHATTY'S CRITIQUE (Eric, 17 Oct) ----------------
   FOUR TEXT LEVELS, and no fifth: the page headline (.pv h1, 2.5rem, unchanged);
   card headings (.pr-h2, 1.625rem / 700); names and prices (.pr-name,
   .pr-price, 1.25rem / 600); descriptions (.pr-sub, 1.125rem / 400).
   ⛔ THE FLOOR IS 18px, NOT CHATTY'S 16: "that is what the current pages measure
   and the audience is 25-85" (D513). 1.125rem IS the floor; nothing goes under.
   ⛔ Every shared grid column is minmax(0, ...): see the header. */
.pr-head{margin-bottom:1.25rem}
.pr-answer{font-family:var(--pv-display); font-weight:600; font-size:1.25rem;
  margin:0 0 1.75rem}
.pr-card{border:1px solid var(--pv-rule); border-radius:12px; padding:1.5rem 1.75rem;
  margin:0 0 1.5rem; overflow-wrap:anywhere}
.pr-card--free{border-color:rgba(46,230,138,.45)}
.pr-card--later{border-style:dashed}
.pv .pr-h2{font-size:1.625rem; font-weight:700; margin:0 0 1rem}
.pv .pr-name{font-family:var(--pv-display); font-weight:600; font-size:1.25rem;
  line-height:1.3; margin:0}
.pv .pr-sub{font-size:1.125rem; line-height:1.5; color:rgba(242,244,245,.74); margin:.15rem 0 0}
.pr-grid{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.25rem 2rem}
.pr-assure{display:flex; align-items:center; gap:.6rem; margin:1.5rem 0 0;
  padding-top:1.25rem; border-top:1px solid var(--pv-rule)}
.pr-assure svg{flex:none; color:var(--pv-green)}
.pr-ladder{list-style:none; margin:0; padding:0}
/* ⭐ ROW HEIGHT IS MEASURED IN D513 (old vs new, and what drives it), not taken
   as "35-40% less" from the critique. Here a row is its content: name (1.25rem
   x 1.3) + one sub line (1.125rem x 1.5) + .85rem padding each side. */
.pr-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,max-content);
  gap:.5rem 1.5rem; align-items:center; padding:.85rem 0;
  border-top:1px solid var(--pv-rule)}
.pr-row:first-child{border-top:0; padding-top:0}
.pv .pr-price{font-family:var(--pv-display); font-weight:600; font-size:1.25rem;
  margin:0; color:rgba(242,244,245,.74); white-space:nowrap}
.pv .pr-row--free .pr-price{color:var(--pv-text)}
.pr-later-foot{margin:1.25rem 0 .35rem !important}
.pr-intro{margin:0 0 .75rem}
.pv .pr-kicker{font-weight:700; margin:0 0 1rem}
/* ⭐ D520 · THE FREE CARD IN CHATTY'S STYLE (Eric: "only the style"). Larger,
   roomier type than the rest of the page -- the free offer is the page's job --
   with the 18px floor untouched everywhere (descriptions 1.375rem = 22px). */
.pr-card--free{padding:1.75rem 2rem}
.pr-free-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,max-content);
  gap:1rem 2rem; align-items:start; padding-bottom:1.5rem; margin-bottom:1.75rem;
  border-bottom:1px solid rgba(46,230,138,.35)}
.pr-card--free .pr-h2{font-size:1.75rem; margin:0 0 .6rem}
.pr-card--free .pr-intro{font-size:1.375rem; line-height:1.5; margin:0; color:rgba(242,244,245,.82)}
.pr-zero{font-family:var(--pv-display); font-weight:700; font-size:2.25rem; line-height:1;
  color:var(--pv-green); margin:0}
.pv .pr-card--free .pr-kicker{font-family:var(--pv-display); font-size:1.5rem; margin:0 0 1.5rem}
/* ⭐ D565 (Eric, 23 Oct): "some subtle grey behind the titles so we see them
   easier and not so far apart". Each feature is its own panel, the columns
   close up; words and type sizes unchanged (the 18px floor untouched). */
.pr-card--free .pr-grid{gap:1rem; max-width:none}
.pr-card--free .pr-grid > li{background:rgba(255,255,255,.05); border-radius:10px;
  padding:1.1rem 1.25rem}
.pv .pr-card--free .pr-name{font-size:1.5rem}
.pv .pr-card--free .pr-sub{font-size:1.375rem; margin-top:.35rem}
.pr-card--free .pr-assure{font-size:1.375rem; margin-top:1.75rem; padding-top:1.5rem;
  border-top-color:rgba(46,230,138,.35)}
.pr-card--free .pr-assure svg{width:24px; height:24px}
/* ⭐ D520: the ruled cost line as a bar, its first sentence the green one */
.pr-answer{background:rgba(255,255,255,.04); border-radius:10px; padding:1rem 1.25rem}
.pr-answer b{color:var(--pv-green); text-transform:uppercase; letter-spacing:.02em}
.pr-grid--one{grid-template-columns:minmax(0,1fr)}
.pr-grid--one .pr-sub{max-width:44rem}
/* the per-row construction note (D493), set apart from the levels it follows */
/* inline, not inline-block: an inline-block wraps as ONE unit and stranded
   "Being built" alone on a line at 390 (check_line_words, D509) */
.pr-note{color:var(--pv-gold); font-weight:700; margin-left:.4rem}
.pr-note:first-child{margin-left:0}   /* the Upgrade row has no levels before it */
.pr-card--later .pv-badge{margin:0 0 1rem}
@media (max-width:40rem){
  .pr-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---- the CTA ------------------------------------------------------------ */
.pv-cta-row{margin:2.5rem 0 .75rem}
.pv-cta{display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:.5rem 1.875rem; border-radius:10px;
  background:var(--pv-green); color:var(--pv-green-ink);
  font-family:var(--pv-display); font-weight:700; font-size:1.125rem;
  text-decoration:none; max-width:100%; text-align:center}
.pv-cta:focus-visible{outline:3px solid var(--pv-text); outline-offset:3px}
.pv-cta-note{font-size:1.125rem}

/* below 760px every card collapses to one column, image above copy */
@media (max-width:759.98px){
  .pv-narrow,.pv-wide{grid-template-columns:minmax(0,1fr)}
  .pv h1, .pv .pv-h1{font-size:2rem}
  .pv-card,.pv-tier{padding:1.25rem}
}