/* Styles for the /guides/ "best <position> cards" pages.

   Colour is doing a job here, not decorating, and it keeps the meanings it has
   everywhere else on the site: violet = locked behind a program, market blue =
   a live price, mint = the card we are telling you to buy, gold = the most
   expensive thing money can reach. The Pulse bars reuse the card pages' own
   quality ladder (cp-t5..cp-t0) so "how good is 103.3, really" reads at a
   glance instead of being a bare number. */

/* The hero is the site's, tuned the way every other page tunes its own
   (.rankings-page .pr-hero and friends). Only the spacing moves: the shared
   hero is padded for pages that put a figure or a card triad beside the copy,
   and this one is three lines of text. That padding was costing the buy
   recommendation its place above the fold, which is the whole reason the
   podium was rebuilt. Colour, type and the panel itself are untouched. */
/* Padding only. A margin here does nothing -- the 72px between the header and
   the hero is the header's own, identical on every page, and overriding the
   hero's margin left the top edge exactly where it was. */
.guides-page .guides-hero { padding-top: clamp(18px, 2.4vw, 26px); padding-bottom: 18px; }
.guides-page .guides-hero h1 { margin: 6px 0 10px; }
.guides-page .guides-hero .g-lede { font-size: 1rem; line-height: 1.55; }

/* ---------- head ----------
   The chrome here is the site's, not this page's. These pages used to carry
   their own shell, eyebrow and h1 -- a grey eyebrow where the site's is cyan,
   an h1 two-thirds the size, and no hero panel at all -- so the section read
   as a different site to the one it links into. They now use .shell
   .tool-page, .tool-hero, .eyebrow and .hero-accent like every other page,
   and only what is genuinely new to the guides is styled below. */
.g-lede { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.62; color: var(--ink); margin: 0; max-width: 68ch; }
.g-lede b { font-weight: 650; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Four facts on one line, in place of the paragraph that used to restate what
   the rows already say. */
.g-strip { display: flex; flex-wrap: wrap; gap: 0; margin: 18px 0 22px; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; background: var(--panel); }
.g-stat { flex: 1 1 150px; padding: 11px 16px; border-right: 1px solid var(--line); }
.g-stat:last-child { border-right: 0; }
.g-stat b { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.3rem;
  font-weight: 600; line-height: 1.1; color: var(--ink); }
.g-stat span { font-family: var(--font-display); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.g-stat.mkt b { color: var(--dp-market); }
.g-stat.lock b { color: var(--violet); }

/* ---------- podium: roles, not ranks ----------
   The three tiles are "the best", "the ceiling" and "the one to buy". At some
   positions those are three different cards and at others only two, so the
   grid has to read correctly with either. */
.pod { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 13px;
  perspective: 1400px; }
.tile { position: relative; border-radius: 13px; padding: 16px 17px 15px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); display: flex; flex-direction: column;
  overflow: hidden; padding-right: 100px; }

/* --- card art, right column ---------------------------------------------
   Placement is settled by one measured fact: --dim (the meta line) is the
   site's contrast floor at 5.22:1 on flat panel, and over a white home jersey
   -- which every one of these cards has -- it holds AA only at about 6%
   visible art. A strip of its own is the one place the photo can be bold
   without any text on it: measured 0% of both floor-colour text AND the name
   sitting over the image. The alternatives cost either the name's background
   or a change to the type system. */
.tile .art { position: absolute; top: 0; bottom: 0; right: 0; width: 92px;
  z-index: -1; pointer-events: none; overflow: hidden; }
.tile .art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
  display: block; opacity: .58; }
.tile .art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--panel) 0%, rgba(18,27,36,.35) 40%, rgba(18,27,36,.12) 100%); }
/* Keeps the photo inside the tile's own colour rather than dropping full-colour
   imagery into a colour-coded system. */
.tile .art::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--tone); opacity: .18; mix-blend-mode: color; }

/* --- coin spin ------------------------------------------------------------
   Nothing here runs until script adds .reveal, so the podium is complete and
   readable with JS off -- which matters on a page whose job is being crawled.
   Reduced motion opts out entirely. */
.pod.reveal .tile { animation: dp-coin .9s cubic-bezier(.22,.9,.24,1) both; }
.pod.reveal .tile:nth-child(2) { animation-delay: .12s; }
.pod.reveal .tile:nth-child(3) { animation-delay: .24s; }
@keyframes dp-coin {
  from { transform: rotateY(-92deg) scale(.94); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pod.reveal .tile { animation: none !important; }
}
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 13px 13px 0 0; background: var(--tone); }
.tile .rk { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; color: var(--tone); line-height: 1; opacity: .9; }
.tile .nm { font-family: var(--font-body); font-weight: 650; font-size: 1.05rem; color: var(--ink); margin: 8px 0 2px; }
.tile .mt { font-family: var(--font-display); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.tile .bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: 12px 0 9px; }
.tile .bar i { display: block; height: 100%; border-radius: 999px; background: var(--tone); }
.tile .fig { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.tile .fig div span { display: block; font-family: var(--font-display); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-top: 1px; }
.tile .pv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.tile .cost { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.2rem; font-weight: 600; color: var(--dp-market); }
.tile .cost.lk { font-family: var(--font-display); font-size: .95rem; letter-spacing: .09em; text-transform: uppercase; color: var(--violet); }
/* The line that turns three cards into an argument. */
.tile .say { font-family: var(--font-body); font-size: .8125rem; line-height: 1.5; color: var(--muted);
  margin: 11px 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.075); }
.tile .say b { color: var(--ink); font-weight: 620; }
.badge { position: absolute; top: 13px; right: 13px; font-family: var(--font-display); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 2px 8px; border-radius: 999px; }

/* Rank 1 is usually a program reward, so it is violet rather than gold -- the
   colour has to keep meaning what it means everywhere else. */
.t-lock { --tone: var(--violet); border-color: rgba(169,139,255,.34); }
.t-lock .badge { color: var(--violet); border: 1px solid rgba(169,139,255,.5); background: rgba(169,139,255,.1); }
.t-ceil { --tone: #f1b84b; border-color: rgba(241,184,75,.3); }
.t-ceil .badge { color: var(--gold); border: 1px solid rgba(241,184,75,.45); background: rgba(241,184,75,.09); }
/* The buy is rarely first by rank but always first by importance, so it carries
   the only filled background and the only glow. */
.t-buy { --tone: #3fe3a4; border-color: rgba(63,227,164,.55);
  background: linear-gradient(180deg, rgba(63,227,164,.14), rgba(63,227,164,.025));
  box-shadow: 0 0 0 1px rgba(63,227,164,.18), 0 14px 34px rgba(63,227,164,.09); }
.t-buy .badge { color: #04231a; background: #3fe3a4; }
.t-buy .cost { color: #6ff0c0; }

/* ---------- the one line of reasoning ---------- */
.why { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 13px 0 0;
  background: rgba(63,227,164,.07); border: 1px solid rgba(63,227,164,.26); border-radius: 11px; padding: 14px 17px; }
.why p { font-family: var(--font-body); font-size: .9375rem; line-height: 1.55; color: var(--ink); margin: 0; flex: 1 1 340px; }
.why p b { font-weight: 650; }
.why .alt { font-family: var(--font-body); font-size: .8125rem; line-height: 1.5; color: var(--muted);
  margin: 0; flex: 0 1 auto; border-left: 1px solid rgba(63,227,164,.28); padding-left: 20px; }
.why .alt b { color: var(--ink); font-weight: 620; }
@media (max-width: 700px) { .why .alt { border-left: 0; padding-left: 0; } }

/* ---------- the rest of the list ---------- */
.secttl { font-family: var(--font-display); font-size: var(--t-small); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 30px 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.secttl small { font-family: var(--font-body); font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--dim); }
.r { display: grid; grid-template-columns: 26px minmax(0,1fr) 132px 96px; gap: 12px; align-items: center;
  padding: 8px 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.r + .r { margin-top: 5px; }
.r.earn { border-left: 3px solid var(--violet); }
.r.mkt { border-left: 3px solid var(--dp-market); }
.r-rank { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--dim); text-align: right; }
.r-name { font-family: var(--font-body); font-weight: 620; font-size: .9rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-meta { font-family: var(--font-display); font-size: var(--t-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--dim); margin-top: 1px; }
.r-pulse { display: flex; align-items: center; gap: 9px; }
.r-bar { flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.r-bar i { display: block; height: 100%; border-radius: 999px; background: var(--tone); }
.r-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .8125rem; font-weight: 600; color: var(--tone); min-width: 42px; text-align: right; }
.r-cost { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .875rem; font-weight: 600; text-align: right; color: var(--dp-market); }
.r-cost.locked { font-family: var(--font-display); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
/* Quality ladder borrowed from the card pages rather than invented. */
.t5 { --tone: #6ff0c0; } .t4 { --tone: #3fe3a4; } .t3 { --tone: #9df1ff; } .t2 { --tone: #a8bac9; } .t1 { --tone: #ff9bac; }

.skipnote { font-family: var(--font-body); font-size: .8125rem; line-height: 1.6; color: var(--dim); margin: 12px 0 0; max-width: 66ch; }

.more { margin: 26px 0 0; border-top: 1px solid var(--line); padding-top: 18px; }
.more summary { font-family: var(--font-display); font-size: var(--t-small); letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan); cursor: pointer; }
.more p { font-family: var(--font-body); font-size: .875rem; line-height: 1.65; color: var(--muted); margin: 12px 0 0; max-width: 66ch; }
.more a { color: var(--cyan); }
.next { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 0; }
.next a { font-family: var(--font-display); font-size: var(--t-small); letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(13,21,29,.7); color: var(--ink); text-decoration: none; }
.next a.primary { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(95,199,223,.28); }

/* ---------- /guides/ index ---------- */
.idx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 26px 0 0; }
.idx { display: block; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: 10px; padding: 15px 17px; text-decoration: none; }
.idx-pos { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; color: var(--ink); margin-bottom: 6px; }
.idx-line { display: block; font-family: var(--font-body); font-size: .8125rem; line-height: 1.55; color: var(--muted); }
.idx-line b { color: var(--ink); font-weight: 620; }
.idx-line .mk { color: var(--dp-market); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.idx-line .lk { color: var(--violet); }

@media (max-width: 780px) {
  .pod { grid-template-columns: 1fr; gap: 10px; }
  /* Stacked, the card we recommend should not be last. */
  .t-buy { order: -1; }
  /* padding-right has to survive this reset or the reflowed text runs under
     the art strip. The strip narrows too -- 92px is a lot of a 375px screen. */
  .tile { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 12px; padding: 14px 15px; padding-right: 88px; }
  .tile .art { width: 78px; }
  .tile .rk { font-size: 1.2rem; }
  .tile .nm { margin: 0; flex: 1 1 auto; }
  .tile .mt, .tile .bar { flex: 1 1 100%; }
  .tile .bar { margin: 9px 0 8px; }
  .tile .fig { flex: 1 1 100%; }
  .r { grid-template-columns: 24px minmax(0,1fr) 88px; }
  .r-pulse { display: none; }
}

/* Card names link to their card pages.
   Until now nothing on the site linked into /cards/ from server-rendered
   markup -- the only route in was the sitemap, and Search Console showed
   2,927 URLs discovered and never fetched. Ten guides listing fifteen cards
   each is 150 crawlable ways in, from pages that sit in the nav.
   Styled to stay legible rather than announce themselves: the name already
   looks like the subject of its row, so it takes the underline only on
   hover and keeps the same colour it had. */
.tile .nm a,
.r-name a { color: inherit; text-decoration: none; }
.tile .nm a:hover,
.tile .nm a:focus-visible,
.r-name a:hover,
.r-name a:focus-visible { text-decoration: underline; text-underline-offset: 2px; color: var(--cyan); }
.r-name a:focus-visible,
.tile .nm a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 3px; }