/* ============================================================================
   NC DESKTOP LAYER  —  added 10 Aug 2026
   ----------------------------------------------------------------------------
   Why this file exists: the stylesheet had 31 media queries and 29 of them were
   max-width. There was no desktop layer at all — the site was a mobile layout
   that simply got wider, so on a 1440px screen the article sat as a 780px
   column with ~340px of dead space each side and 90-character lines.

   Everything here is inside a min-width query, so mobile is untouched BY
   CONSTRUCTION. Nothing in this file can affect a phone.

   The pattern is a grid breakout: flowing prose gets a comfortable reading
   measure (~70ch), while structural blocks — comparison tables, hero cards,
   card grids — break out and use the real width. That is what makes a desktop
   page look designed rather than stretched.
   ========================================================================== */

@media (min-width: 1024px) {

  /* --- 1. Give the page room. 1200 was too narrow for a comparison site. --- */
  .container,
  .container.content-wrap {
    max-width: 1320px;
  }

  /* --- 2. Two-column desktop layout ----------------------------------------
     The page template was a single narrow column with nothing in the side
     space, which is why it read as unfinished next to the homepage. Content
     now takes the main column and a sticky rail uses the width that was dead.
     The rail is built by desktop-rail.js from the page's own offer and
     headings, so it cannot drift out of sync with the content.              */
  .container.content-wrap > article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 3rem;
    align-items: start;
  }
  .container.content-wrap > article > .page-header {
    grid-column: 1 / -1;
  }
  .container.content-wrap > article > .entry-content {
    grid-column: 1;
    min-width: 0;                 /* lets wide tables shrink instead of blowing out */
  }

  /* Flowing text still needs a comfortable measure even in a wide column.
     62ch renders as ~66 real characters in this face - measured in the browser
     with a canvas text metric, because 70ch measured 80. Structural blocks are
     deliberately left unconstrained so they use the full column.            */
  .entry-content > p,
  .entry-content > ul,
  .entry-content > ol,
  .entry-content > blockquote {
    max-width: 68ch;
  }

  /* --- The rail ---------------------------------------------------------- */
  .nc-rail {
    grid-column: 2;
    position: sticky;
    top: 88px;                    /* clears the 72px sticky header */
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    font-size: 0.92rem;
  }
  .nc-rail[hidden] { display: none; }

  .nc-rail__offer {
    background: linear-gradient(135deg, #0F6E56, #0a5040);
    color: #fff;
    border-radius: 14px;
    padding: 1.15rem 1.15rem 1rem;
    box-shadow: 0 6px 24px rgba(15, 110, 86, 0.22);
  }
  .nc-rail__label {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
  }
  .nc-rail__brand {
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .nc-rail__offer-text {
    margin: 0 0 0.85rem;
    font-size: 0.86rem;
    line-height: 1.45;
    opacity: 0.92;
  }
  .nc-rail__cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.7rem 1rem;
    background: #f59e0b;
    color: #1A1A1A;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
  }
  .nc-rail__cta:hover,
  .nc-rail__cta:focus-visible { background: #d97706; }
  .nc-rail__legal {
    margin: 0.6rem 0 0;
    font-size: 0.7rem;
    opacity: 0.72;
    text-align: center;
  }

  .nc-rail__toc {
    border: 1px solid #e3e8e6;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    background: #fff;
  }
  .nc-rail__toc .nc-rail__label { color: #4a5a55; opacity: 1; }
  .nc-rail__toc ul { list-style: none; margin: 0; padding: 0; }
  .nc-rail__toc li { margin: 0 0 0.15rem; }
  .nc-rail__toc a {
    display: block;
    padding: 0.32rem 0 0.32rem 0.7rem;
    border-left: 2px solid transparent;
    color: #35443f;
    text-decoration: none;
    line-height: 1.35;
  }
  .nc-rail__toc a:hover { color: #0F6E56; }
  .nc-rail__toc a.is-current {
    border-left-color: #0F6E56;
    color: #0F6E56;
    font-weight: 600;
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    .entry-content h2 { scroll-margin-top: 90px; }
  }

  /* --- 3. Tables were rendering inside the narrow column and cramping.
     Let them use the wide track, and keep long ones scrollable rather than
     letting them force horizontal overflow on the whole page. ------------- */
  .entry-content table {
    width: 100%;
    display: table;
  }
  .entry-content > table {
    font-size: 0.95rem;
  }
  .entry-content > table th,
  .entry-content > table td {
    padding: 0.85rem 0.9rem;
  }
  /* numeric columns line up */
  .entry-content > table td {
    font-variant-numeric: tabular-nums;
  }

  /* --- 4b. The in-content jump nav duplicates the rail on desktop, and the
     bulleted pill row is the most dated element on the page. The rail's
     "On this page" replaces it. Mobile keeps it - there is no rail there. -- */
  .entry-content > nav.nc-toc {
    display: none;
  }

  /* --- 4c. Preamble. Nine blocks stacked before the first heading is what
     makes the page feel like a wall of admin. Tighten the small ones so the
     reader reaches the content sooner. ----------------------------------- */
  .entry-content > .nc-chip-row {
    margin: 0.9rem 0 1.1rem;
  }
  .entry-content > nav.nc-breadcrumbs {
    margin-bottom: 0.9rem;
    font-size: 0.86rem;
  }
  /* the affiliate disclosure is required, but it does not need to shout */
  .entry-content > p > em,
  .entry-content > p em:only-child {
    color: #5a6b65;
  }

  /* --- 5. Typography. 87–91 characters per line was too long to track
     comfortably; the grid caps it, this tunes the rhythm. ----------------- */
  .entry-content > p,
  .entry-content > ul,
  .entry-content > ol {
    line-height: 1.7;
  }
  .entry-content > h2 {
    margin-top: 2.75rem;
    margin-bottom: 0.85rem;
    text-wrap: balance;
  }
  .entry-content > h3 {
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    text-wrap: balance;
  }
  .entry-content > h2:first-child,
  .entry-content > h3:first-child {
    margin-top: 0;
  }

  /* --- 6. The page header was hard against the top of the viewport. ------ */
  .page-header {
    margin-bottom: 1.5rem;
  }
  .page-header h1 {
    text-wrap: balance;
  }
}

/* --- Wide desktop: stop the measure drifting on very large monitors ------- */
@media (min-width: 1600px) {
  .container,
  .container.content-wrap {
    max-width: 1440px;
  }
}

/* --- Safety net: never let a wide table scroll the whole page sideways.
   Applies at every width, including mobile, because a body-level horizontal
   scroll is a bug at any size. -------------------------------------------- */
.entry-content > table {
  max-width: 100%;
}