/* ==========================================================================
   GUIDE LAYOUT — editorial
   Deliberately different from the landing pages: light, calm, single narrow
   column with a sticky contents rail. No dark blocks in the reading flow.
   Loads after main.css + page.css.
   ========================================================================== */

@layer components {

  /* ---------- READING PROGRESS ---------- */
  .progress {
    position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px;
    z-index: 200; background: transparent; pointer-events: none;
  }
  .progress i {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--accent), #FF8A3D);
    transition: width .12s linear;
  }

  /* ---------- GUIDE MASTHEAD ---------- */
  /* Light, quiet, editorial. The opposite of the landing hero. */
  .g-head {
    padding-block: clamp(6.5rem, 11vw, 8.5rem) clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  .g-head .kicker {
    font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .18em;
    text-transform: uppercase; color: var(--accent); font-weight: 600;
  }
  .g-head h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    max-width: 20ch; margin-top: 1.2rem; letter-spacing: -.032em;
    line-height: 1.06;
  }
  .g-head .standfirst {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--muted);
    max-width: 62ch; margin-top: 1.4rem; line-height: 1.6;
  }
  .g-head .g-meta {
    display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center;
    margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line-2);
    font-size: var(--t-sm); color: var(--muted);
  }
  .g-head .g-meta b { color: var(--ink); font-weight: 600; }
  .g-head .g-meta time { font-family: var(--f-mono); font-size: var(--t-xs); }
  .g-head .who { display: flex; align-items: center; gap: .6rem; }
  .g-head .who .pic {
    width: 30px; height: 30px; border-radius: 50%; background: var(--ink);
    color: #fff; display: grid; place-items: center; font-size: .7rem; font-weight: 700;
  }

  /* ---------- TWO COLUMN SHELL ---------- */
  .g-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    padding-block: clamp(2.5rem, 5vw, 4rem);
  }
  /* minmax(0, 1fr), never a bare 1fr. A bare 1fr resolves to minmax(auto, 1fr),
     and that auto minimum is the column's min-content width, so any wide child
     stretches the grid past the viewport instead of being clamped by it. This
     is the usual cause of a page which scrolls sideways on a phone. */
  @media (max-width: 1020px) { .g-shell { grid-template-columns: minmax(0, 1fr); } }

  /* ---------- STICKY CONTENTS RAIL ---------- */
  .toc { position: sticky; top: 96px; }
  @media (max-width: 1020px) {
    .toc {
      position: static; background: var(--surface); border: 1px solid var(--line);
      border-radius: var(--r-md); padding: 1.2rem 1.4rem; margin-bottom: 2rem;
    }
  }
  .toc h2 {
    font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted-2); font-weight: 500;
    margin-bottom: 1.1rem;
  }
  .toc ol { display: flex; flex-direction: column; gap: .15rem; }
  /* scoped to the contents list only — must not reach the CTA button below */
  .toc ol a {
    display: block; padding: .45rem 0 .45rem .9rem;
    font-size: var(--t-sm); line-height: 1.4; color: var(--muted);
    border-left: 2px solid var(--line);
    transition: color .2s, border-color .2s;
  }
  .toc ol a:hover { color: var(--ink); border-color: var(--muted-2); }
  .toc ol a.active { color: var(--accent); border-color: var(--accent); font-weight: 550; }

  .toc .toc-cta {
    display: block; margin-top: 1.4rem; padding-top: 1.4rem;
    border-top: 1px solid var(--line-2);
  }
  .toc .toc-cta .btn {
    display: flex; width: 100%; padding: .85rem 1rem;
    font-size: var(--t-sm); border-left: 0; line-height: 1.2;
  }
  .toc .toc-cta .btn-primary { color: #fff; }
  .toc .toc-cta small {
    display: block; font-size: var(--t-xs); color: var(--muted-2);
    margin-top: .8rem; line-height: 1.45; text-align: center;
  }
  .toc .toc-cta small a {
    display: inline; padding: 0; border-left: 0;
    font-size: inherit; font-weight: 600;
  }

  /* ---------- ARTICLE BODY ---------- */
  .g-body { max-width: 68ch; }
  .g-body > section { padding-block: 0; margin-bottom: clamp(2.5rem, 5vw, 3.8rem); }
  .g-body h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.03em;
    margin-bottom: 1.1rem; scroll-margin-top: 100px;
  }
  .g-body h2::before {
    content: ""; display: block; width: 34px; height: 2px;
    background: var(--accent); margin-bottom: 1.1rem;
  }
  .g-body h3 { font-size: var(--t-lg); margin-top: 2rem; margin-bottom: .7rem; }
  .g-body p { color: var(--ink-2); line-height: 1.72; }
  .g-body p + p { margin-top: 1.05rem; }

  /* the guide keeps tables and stats, but styled flat and quiet */
  .g-body .stat-strip { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .g-body .stat-box { box-shadow: none; background: var(--paper-2); border-color: transparent; padding: 1.2rem; }
  .g-body .stat-box .v { font-size: var(--t-xl); }
  .g-body .stat-box .k { font-size: var(--t-xs); }

  .g-body .answer {
    background: transparent; border: 0; border-left: 3px solid var(--accent);
    border-radius: 0; padding: .3rem 0 .3rem 1.4rem; margin-block: 1.6rem;
    font-size: var(--t-lg);
  }

  .g-body .takeaways { border-left-width: 3px; box-shadow: none; }

  /* pull quote */
  .g-pull {
    font-family: var(--f-display); font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    line-height: 1.3; letter-spacing: -.025em; color: var(--ink);
    padding: 1.6rem 0; margin-block: 2rem;
    border-block: 1px solid var(--line);
  }
  .g-pull span { color: var(--accent); }

  /* inline CTA inside the reading flow — quiet, not a billboard */
  .g-inline-cta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.4rem; flex-wrap: wrap;
    background: var(--paper-2); border-radius: var(--r-md);
    padding: 1.4rem 1.6rem; margin-block: 2.4rem;
    border: 1px solid var(--line-2);
  }
  .g-inline-cta b { display: block; font-size: var(--t-base); }
  .g-inline-cta small { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: .25rem; }

  /* footnote-style sources at the end, plain */
  .g-body .sources { background: transparent; border-top: 1px solid var(--line); border-radius: 0; padding: 2rem 0 0; }

  /* ---------- NEUTRALISE LANDING GEOMETRY INSIDE THE COLUMN ----------
     Sections written for full-bleed landing pages are reused here, so the
     wrapper widths and vertical rhythm are flattened to the reading column. */
  .g-body .wrap { width: 100%; margin: 0; padding: 0; max-width: none; }
  .g-body .sect { padding-block: 0; background: none !important; }
  .g-body .sect-head { margin-bottom: 1.4rem; max-width: none; }
  .g-body .sect-head.center { text-align: left; margin-inline: 0; }
  .g-body .sect-head h2 { margin-top: .8rem; }
  .g-body .sect-head p { font-size: var(--t-base); }
  .g-body .g-2, .g-body .g-3, .g-body .g-4 { grid-template-columns: 1fr; }
  .g-body .neck { grid-template-columns: 1fr; }
  .g-body .neck-fix { border-left: 0; border-top: 1px solid var(--line); }
  .g-body .calc { grid-template-columns: 1fr; border-radius: var(--r-lg); }
  .g-body .comp-grid { grid-template-columns: 1fr; }
  .g-body .steps { grid-template-columns: 1fr; }
  .g-body .demo-shell { grid-template-columns: 1fr; }
  .g-body .cta-final { border-radius: var(--r-lg); }
  .g-body .cta-grid { grid-template-columns: 1fr; }
  .g-body .burbs { display: none; }

  /* guide pages suppress the loud landing components if any slip through */
  .g-body .compliance { background: var(--paper-2); color: var(--ink); box-shadow: none; }
  .g-body .compliance::after { display: none; }
  .g-body .compliance h2 { color: var(--ink); }
  .g-body .compliance p { color: var(--muted); }
  .g-body .compliance .comp-item { background: var(--surface); border-color: var(--line-2); }
  .g-body .compliance .comp-item p { color: var(--muted); }
  .g-body .compliance .deadline-chip { background: var(--accent-ink); border-color: rgb(255 77 15 / .25); color: var(--accent-down); /* light ground here, unlike the homepage panel */ }
  .g-body .compliance strong { color: var(--ink) !important; }

  /* ==================================================================
     MOBILE
     A table's minimum width is the sum of its columns' longest words, so
     a 4-column prose table cannot fit a 360px phone at any font size.
     Below 640px each row unstacks into a short labelled block.

     Kept deliberately quiet: hairline rules instead of cards, and labels
     in plain sentence case rather than uppercase mono. A label repeats
     three times per row and thirty times per table, so it has to sit
     under the text, not shout over it.
     ================================================================== */

  /* long tokens — URLs, model numbers, $1,450 – $4,300 — wrap instead of
     pushing the column wider than the screen */
  .g-body p, .g-body li, .g-body td, .g-body th, .g-head .standfirst {
    overflow-wrap: break-word;
  }
  .g-head h1 { overflow-wrap: break-word; hyphens: auto; }

  @media (max-width: 640px) {
    .g-body table.data { display: block; }
    .g-body table.data thead {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .g-body table.data caption { display: block; padding-bottom: .3rem; }
    .g-body table.data tbody { display: block; }

    /* a row is a block of text with a rule under it — no box, no fill */
    .g-body table.data tr {
      display: block; padding-block: 1.15rem;
      border-bottom: 1px solid var(--line-2);
    }
    .g-body table.data tr:last-child { border-bottom: 0; padding-bottom: .4rem; }

    .g-body table.data td,
    .g-body table.data tbody th {
      display: block; width: auto; padding: 0; border: 0; text-align: left;
      font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5;
    }
    .g-body table.data td + td,
    .g-body table.data tbody th + td { margin-top: .7rem; }

    /* the column heading, quiet, above its value */
    .g-body table.data td[data-label]::before,
    .g-body table.data tbody th[data-label]::before {
      content: attr(data-label);
      display: block; margin-bottom: .05rem;
      font-size: .78rem; font-weight: 400; color: var(--muted-2);
    }

    /* first cell is the row's subject, so it reads as a small heading */
    .g-body table.data tbody tr > :first-child {
      font-family: var(--f-display); font-weight: 600; color: var(--ink);
      font-size: var(--t-base); line-height: 1.3; letter-spacing: -.015em;
    }
    .g-body table.data tbody tr > :first-child::before { display: none; }

    /* figures stay in the mono face so ranges line up */
    .g-body table.data td.num { font-family: var(--f-mono); }

    /* comparison table stays a table — it is a matrix and stacking it
       destroys the comparison. It scrolls; say so, quietly. */
    .g-body .cmp-wrap { -webkit-overflow-scrolling: touch; }
    .g-body .cmp-wrap::after {
      content: "Swipe to see every column";
      display: block; position: sticky; left: 0;
      padding: .7rem 1rem .1rem; font-size: var(--t-xs); color: var(--muted-2);
    }
    .g-body table.cmp { min-width: 560px; }
    .g-body table.cmp th, .g-body table.cmp td { padding: .8rem .85rem; }

    /* two cramped stat columns become one readable one — same card, just
       not squeezed to half a phone */
    .g-body .stat-strip { grid-template-columns: 1fr; gap: .6rem; }
    .g-body .stat-box { padding: 1.1rem 1.2rem; }

    /* the ROI calculator is a landing component reused inside the column.
       Its landing padding eats a third of a 360px screen. */
    .g-body .calc { padding: 1.4rem 1.25rem; }
    .g-body .calc-out { padding: 1.25rem 1.1rem; }
    .g-body .calc-row { gap: 1rem; }
    .g-body .calc-row span { min-width: 0; }
    .g-body .calc-row b { white-space: nowrap; }

    /* reading column breathes */
    .g-shell { padding-block: 1.75rem 2.5rem; }
    .g-body > section { margin-bottom: 2.4rem; }
    .g-head .g-meta { gap: .5rem 1.1rem; margin-top: 1.6rem; padding-top: 1.1rem; }
    .g-pull { padding: 1.2rem 0; margin-block: 1.6rem; }
    .g-inline-cta { padding: 1.2rem 1.2rem; }
    .g-inline-cta .btn { width: 100%; justify-content: center; }
    .toc { padding: 1rem 1.1rem; margin-bottom: 1.5rem; }
    .toc ol a { padding-block: .6rem; }   /* 44px touch target */
    .g-body .sources li { gap: .6rem; }
  }

  /* the sticky bottom call bar must never sit on top of the last section */
  @media (max-width: 720px) {
    .g-body .sources { padding-bottom: 1rem; }
  }
}