/* ============================================================
   ARTICLE + GUIDES STYLES
   ------------------------------------------------------------
   Layered on top of styles.css, which supplies the palette and
   fonts. Nothing here redefines a colour, articles inherit the
   site so they cannot drift from it.
   ============================================================ */

:root{
  /* One reading measure, used everywhere. 680px at 17px lands around 70
     characters a line. Past roughly 75 the eye loses its place on the
     carriage return, which is why the old 780px column read as tiring
     even though it looked generous. */
  --measure: 680px;

  /* The contents rail hangs in the left margin. It is peripheral, so it
     is smaller and quieter than the article it points into. */
  --rail: 216px;
  --rail-gap: 60px;

  /* A 4px spacing scale. Every margin and padding below is one of these,
     which is what stops a long stylesheet drifting into 13px here and
     18px there. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px;

  --g-radius: 10px;
}

/* ------------------------------------------------------------
   Undo the site chrome first.

   styles.css styles the BARE `header`, `nav`, `section` and `footer`
   elements, because on a marketing page there is exactly one of each and
   they are the navigation: sticky at top:0 with z-index 90, flex row,
   18px/32px padding, capped at 1240px. An article reuses that stylesheet
   for its palette and fonts, and it contains four elements matching those
   selectors: the top bar, the title block, the breadcrumb, and the
   contents rail.

   So the article's own title block inherited position:sticky and stood on
   top of the text as you scrolled, and both navs were laid out as flex
   rows with site padding. Reset all of them once here, then dress each
   one below. Anything that genuinely wants to stick opts back in.
   ------------------------------------------------------------ */
/* styles.css also sets `section{padding:110px 0}` for the marketing page's
   full-height bands. Any <section> inside a guide inherits it and gains
   220px of dead air it never asked for, so neutralise that here and let
   each block set its own rhythm. The scroll offset is kept, because an
   anchored heading landing flush against the top edge reads as broken. */
.guide section, .gi-wrap section{
  padding:0;
  scroll-margin-top:var(--s7);
}

.g-top, .g-head, .g-masthead, .g-crumbs, .g-nav, .g-toc,
.g-foot, .g-sitefoot, .gd{
  position:static;
  display:block;
  max-width:none;
  margin:0;
  padding:0;
  background:none;
  backdrop-filter:none;
  border-bottom:0;
  box-shadow:none;
  z-index:auto;
  /* `section` carries 110px of vertical padding on the marketing pages,
     which is why the directory sat in a pool of dead space. */
  padding-block:0;
}

/* ---- the bar of chrome -------------------------------------------
   Not sticky. The site header is 84px tall, which on a page you are
   trying to read eats a fifth of the screen for the whole scroll.
   But it does have to offer a way out: landing on an article with only
   a breadcrumb makes the guides feel like a dead end you fell into. */
.g-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);
  padding:var(--s4) var(--s7);
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.g-back{
  display:inline-flex;align-items:baseline;gap:.1em;
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:23px;letter-spacing:-.022em;
  color:var(--green-ink);
}
.g-back .g-mark span{color:var(--green);}
.g-back small{
  font-family:'JetBrains Mono',monospace;font-weight:400;
  font-size:9.5px;letter-spacing:.14em;color:var(--mute);
  transform:translateY(-.9em);display:inline-block;
}

.g-nav{display:flex;align-items:center;gap:var(--s5);}
.g-nav a{
  font-size:14px;font-weight:500;color:var(--mute);
  transition:color .2s ease;white-space:nowrap;
}
.g-nav a:hover{color:var(--green-ink);}

/* The way back out, and it looks like one. */
.g-nav-back{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600!important;color:var(--green-deep)!important;
}
.g-nav-back svg{width:15px;height:15px;transition:transform .2s ease;}
.g-nav-back:hover svg{transform:translateX(-3px);}

.g-nav-cta{
  padding:9px 17px;border-radius:999px;
  background:var(--green);color:#fff!important;
  font-weight:600!important;font-size:13.5px;
  transition:background .2s ease, transform .2s ease;
}
.g-nav-cta:hover{background:var(--green-deep);transform:translateY(-1px);}

.g-crumbs{font-size:12.5px;color:var(--mute);white-space:nowrap;}
.g-crumbs a{color:var(--mute);transition:color .2s ease;}
.g-crumbs a:hover{color:var(--green-ink);}
.g-crumbs span{margin:0 var(--s2);opacity:.45;}

/* ------------------------------------------------------------
   Layout.

   Below 1100px it is one centred column. Above, the ARTICLE is centred in
   the viewport and the contents rail hangs in the left margin beside it.

   The previous version centred the rail and article together as one
   block, which pushed the article about 140px right of centre and left a
   400px void on the left. Centring the thing you actually read, and
   letting the rail sit in margin that would otherwise be empty, is what
   makes a wide screen feel composed rather than lopsided.
   ------------------------------------------------------------ */
.guide{
  max-width:var(--measure);
  margin:0 auto;
  padding:var(--s7) var(--s5) var(--s6);
}

@media (min-width:1100px){
  .guide{
    max-width:none;
    display:grid;
    grid-template-columns:1fr min(var(--measure), calc(100% - 2 * var(--s8))) 1fr;
    align-items:start;
    padding-block:var(--s8) var(--s7);
  }
  .g-body, .g-cta, .g-foot{grid-column:2;}

  .g-toc{
    grid-column:1;
    /* Auto-placement only moves forward, so without this the rail lands
       in row 2 and starts below the first paragraph. Spanning every row
       is also what lets a sticky element follow the whole article. */
    grid-row:1 / -1;
    align-self:start;
    justify-self:end;
    width:var(--rail);
    margin-right:var(--rail-gap);
  }

  .g-table-wrap{width:calc(100% + 90px);margin-inline:0;}
}

/* ---- the masthead -------------------------------------------------
   Full width and centred, above the reading grid. A headline squeezed
   into a 680px column reads as timid; given the page, it reads as the
   title of something worth reading. */
.g-masthead{
  padding:var(--s8) var(--s5) 0;
  background:
    radial-gradient(120% 140% at 50% -20%, var(--sage) 0%, transparent 62%),
    var(--paper);
  border-bottom:1px solid var(--line);
}
.g-masthead-in{max-width:920px;margin:0 auto;text-align:center;}

.g-kicker{
  display:block;margin-bottom:var(--s4);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep);
}
.g-masthead h1{
  font-size:clamp(30px, 4.6vw, 58px);
  font-weight:800;line-height:1.04;letter-spacing:-.028em;
  margin:0 auto var(--s5);max-width:19ch;
  text-wrap:balance;
}
.g-dek{
  font-size:clamp(17px, 1.5vw, 21px);
  line-height:1.55;color:var(--text);
  margin:0 auto var(--s5);max-width:62ch;
  text-wrap:pretty;
}
.g-meta{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s2) var(--s3);align-items:center;
  font-size:12.5px;color:var(--mute);margin:0;
  padding-bottom:var(--s6);
}
.g-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.45;}
.g-updated{opacity:.65;}

/* The hero overlaps into the article below, which is what stops the page
   reading as three stacked bands. */
.g-hero{
  max-width:1020px;margin:0 auto;
  transform:translateY(var(--s7));
  margin-bottom:calc(var(--s8) - var(--s7));
}
.g-hero img{
  width:100%;height:auto;display:block;
  border-radius:14px;box-shadow:var(--shadow);
}

/* ---- the article ------------------------------------------------- */
.g-body{
  font-size:17px;line-height:1.7;color:var(--text);
  overflow-wrap:break-word;    /* a long URL must never widen the page */
}
.g-body > * + *{margin-top:1.1em;}

.g-body h2{
  font-size:clamp(21px, 0.8rem + 1.1vw, 28px);
  font-weight:800;line-height:1.22;letter-spacing:-.015em;
  margin-top:2em;text-wrap:balance;
}
.g-body h2 + *{margin-top:.7em;}    /* a heading belongs to what follows */
.g-body h3{
  font-size:18.5px;font-weight:700;line-height:1.35;
  margin-top:1.7em;color:var(--green-ink);
}
.g-body h3 + *{margin-top:.55em;}
.g-body strong{color:var(--green-ink);font-weight:650;}
.g-body a{
  color:var(--green-deep);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;transition:color .2s ease;
}
.g-body a:hover{color:var(--amber-deep);}

.g-body ul, .g-body ol{padding-left:var(--s5);}
.g-body li + li{margin-top:var(--s2);}
.g-body li::marker{color:var(--green);}

/* ---- tables: they carry the numbers, so they get real weight ------ */
.g-body table{
  width:100%;border-collapse:collapse;
  font-size:15px;margin:1.6em 0;
}
.g-body thead th{
  text-align:left;padding:var(--s3);
  background:var(--sage);color:var(--green-ink);
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;
}
.g-body tbody td{padding:var(--s3);border-bottom:1px solid var(--line);}
.g-body tbody tr:last-child td{border-bottom:0;}
.g-body tbody tr:nth-child(odd){background:rgba(38,48,31,.022);}
/* Prices line up on the decimal when they are right-aligned and tabular. */
.g-body thead th:last-child,
.g-body tbody td:last-child{
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* A wide table scrolls itself rather than the page. */
.g-table-wrap{
  overflow-x:auto;margin:1.6em calc(-1 * var(--s5));padding-inline:var(--s5);
  -webkit-overflow-scrolling:touch;
}

/* ---- the honest-limitation block ---------------------------------
   Deliberately distinct. It is the most trustworthy thing on the page
   and should look like it was put there on purpose. */
.g-honest{
  margin:1.8em 0;padding:var(--s4) var(--s5);
  border-radius:var(--g-radius);
  border-left:3px solid var(--amber);
  background:var(--amber-wash);
  font-size:16px;line-height:1.62;
}
.g-honest b{
  display:block;margin-bottom:var(--s1);color:var(--amber-ink);
  font-size:13px;letter-spacing:.02em;
}

blockquote{
  margin:1.7em 0;padding:var(--s1) 0 var(--s1) var(--s5);
  border-left:3px solid var(--green);
  color:var(--mute);font-size:17.5px;line-height:1.6;font-style:italic;
}

figure{margin:1.8em 0;}
figure img{width:100%;height:auto;border-radius:var(--g-radius);display:block;}
figcaption{
  margin-top:var(--s2);font-size:13px;color:var(--mute);line-height:1.5;
}

/* ---- FAQ ---------------------------------------------------------- */
.g-faq{margin-top:2.4em;}
.g-faq h2{margin-bottom:var(--s2);}
.g-faq details{border-bottom:1px solid var(--line);}
.g-faq summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:var(--s4) 0;
  font-weight:600;font-size:16.5px;line-height:1.4;color:var(--green-ink);
  transition:color .2s ease;
}
.g-faq summary:hover{color:var(--green-deep);}
.g-faq summary::-webkit-details-marker{display:none;}
.g-faq summary::after{
  content:"+";color:var(--green);font-weight:400;font-size:18px;
  flex:none;transition:transform .2s ease;
}
.g-faq details[open] summary::after{content:"−";}
.g-faq p{margin:0 0 var(--s4);font-size:16px;line-height:1.65;color:var(--text);}

/* ---- the one CTA -------------------------------------------------- */
.g-cta{
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  margin:var(--s8) 0 0;padding:var(--s5) var(--s6);
  border-radius:var(--g-radius);
  background:linear-gradient(120deg, var(--sage) 0%, rgba(233,237,228,.35) 100%);
  border:1px solid rgba(98,124,88,.26);
}
.g-cta b{font-size:17px;color:var(--green-ink);line-height:1.3;}
.g-cta p{
  margin:var(--s1) 0 0;font-size:14.5px;color:var(--mute);
  line-height:1.55;max-width:46ch;
}
.g-cta .btn{flex:none;margin-left:auto;}

/* ---- byline + site footer ----------------------------------------
   Both were inheriting the site's dark footer background with mute grey
   text on it: unreadable, and it read as two black blobs at the end of
   the article. Both are light now. */
.g-foot{
  margin-top:var(--s6);padding:var(--s5) var(--s6);
  background:var(--sage);
  border:1px solid rgba(98,124,88,.26);
  border-radius:var(--g-radius);
  font-size:14.5px;color:var(--text);line-height:1.65;
}
.g-foot a{
  color:var(--green-deep);text-decoration:underline;text-underline-offset:3px;
}
.g-foot strong{color:var(--green-ink);}

.g-sitefoot{
  display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  max-width:1180px;margin:var(--s8) auto 0;
  padding:var(--s5) var(--s6) var(--s7);
  background:transparent;
  font-size:12.5px;color:var(--mute);
  border-top:1px solid var(--line);
}
.g-sitefoot a{color:var(--green-deep);}

/* ---- contents rail, desktop only ---------------------------------
   Hidden below 1100px, where the article is single-column and a rail
   would just be another thing to scroll past. */
.g-toc{display:none;}

/* The rail needs a gutter wide enough to hold it: 196px of rail plus a
   52px gap plus breathing room, on both sides, since the article stays
   centred. Below roughly 1264px that gutter does not exist, and showing
   the rail anyway pinned it to the page edge and shoved the article
   off-centre. Between 1100 and 1280 the grid still centres the article,
   there is simply no rail. */
@media (min-width:1280px){
  .g-toc{
    display:block;
    grid-column:1;
    /* Span every row. Auto-placement only moves forward, so without this
       the rail lands in row 2 and starts below the headline; and a sticky
       element can only travel inside its own grid area, so spanning the
       full height is also what lets it follow the whole article. */
    grid-row:1 / -1;
    align-self:start;
    justify-self:end;           /* tuck against the article, not the edge */
    width:var(--rail);
    margin-right:var(--rail-gap);
    position:sticky;top:var(--s6);
    /* Left-aligned. Right-aligned navigation puts a ragged edge exactly
       where the eye starts every line, which is the one place it costs
       you something. */
  }
  .g-toc b{
    display:block;margin-bottom:var(--s4);padding-left:var(--s4);
    font-family:'JetBrains Mono',monospace;font-size:9.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  }
  .g-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;}
  .g-toc li{
    counter-increment:toc;
    border-left:2px solid var(--line);
    padding:var(--s2) 0 var(--s2) var(--s4);
    transition:border-color .2s ease;
  }
  .g-toc li:hover{border-left-color:var(--green);}
  .g-toc a{
    display:block;font-size:13px;line-height:1.45;color:var(--mute);
    transition:color .2s ease;
  }
  .g-toc a:hover{color:var(--green-ink);}
  .g-toc a.here{color:var(--green-ink);font-weight:600;}
  .g-toc li:has(a.here){border-left-color:var(--green);}
}

/* ============================================================
   THE GUIDES INDEX
   A front door, not a list. It carries .guide for the shared type,
   but not the article reading grid: its content has no grid-area, so
   it was being auto-placed into the column the rail reserves.
   ============================================================ */
.gi-wrap{
  display:block;
  max-width:1080px;
  grid-template-columns:none;
  padding-inline:var(--s5);
}
@media (min-width:1100px){
  .gi-wrap{display:block;max-width:1080px;margin-inline:auto;}
}

/* ---- the index hero ---- */
.gi-hero{
  text-align:center;
  padding:var(--s8) 0 var(--s7);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s7);
}
.gi-hero h1{
  font-size:clamp(38px, 7vw, 74px);
  font-weight:800;line-height:1;letter-spacing:-.032em;
  margin:0 0 var(--s5);
}
.gi-hero .g-dek{max-width:56ch;}

.gi-stats{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:var(--s3) var(--s7);margin-top:var(--s6);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
.gi-stats b{
  color:var(--green-ink);font-family:'Montserrat',sans-serif;
  font-size:15px;letter-spacing:-.01em;margin-right:.4em;
}

/* ---- section headings ---- */
.gi-secthd{
  display:flex;align-items:center;gap:var(--s5);
  margin-bottom:var(--s5);
}
.gi-secthd h2{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(21px, 2.4vw, 28px);font-weight:800;
  letter-spacing:-.018em;color:var(--green-ink);white-space:nowrap;
}
.gi-rule{flex:1;height:1px;background:var(--line);}

.gi-latest{margin-bottom:var(--s8);}

/* ---- article cards ---- */
.gi-grid{
  display:grid;gap:var(--s4);
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .gi-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  /* The newest guide gets the full width. A blog whose lead story is the
     same size as everything else has no editorial voice. */
  .gi-latest .gi-grid > .gi-card:first-child{grid-column:1 / -1;}
  /* With an even number of guides the last one would otherwise sit alone
     at half width next to a hole. Let it stretch instead. */
  .gi-latest .gi-grid > .gi-card:last-child:nth-child(even){grid-column:1 / -1;}
}
.gi-card{
  display:flex;flex-direction:column;
  padding:var(--s6);border-radius:14px;
  background:var(--white);border:1px solid var(--line);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.gi-card:hover{
  border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow);
}
.gi-date{
  display:block;margin-bottom:var(--s3);
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);
}
.gi-card b{
  display:block;font-family:'Montserrat',sans-serif;
  font-size:21px;line-height:1.22;letter-spacing:-.018em;
  color:var(--green-ink);margin-bottom:var(--s3);text-wrap:balance;
}
.gi-latest .gi-grid > .gi-card:first-child b{font-size:clamp(23px,2.6vw,31px);}
.gi-card p{
  margin:0 0 var(--s5);font-size:15px;line-height:1.6;color:var(--mute);
  flex:1;
}
.gi-go{
  font-size:13.5px;font-weight:600;color:var(--green-deep);
  display:inline-flex;align-items:center;gap:5px;
}
.gi-card:hover .gi-go{color:var(--amber-deep);}

/* ---- browse by topic ----------------------------------------------
   Nine doors. Empty ones stay on the shelf, quieter but present, so the
   shape of what this will become is legible from the first week. */
.gt{margin-bottom:var(--s9);}
.gt-intro{
  margin:0 0 var(--s6);font-size:15.5px;color:var(--mute);max-width:58ch;
}
.gt-grid{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill, minmax(248px, 1fr));
}
.gt-card{
  display:flex;flex-direction:column;position:relative;
  padding:var(--s6) var(--s5) var(--s5);
  border-radius:14px;border:1px solid var(--line);
  background:var(--white);
  transition:border-color .25s ease, transform .25s ease,
             box-shadow .25s ease, background .25s ease;
}
.gt-card:hover{
  border-color:var(--green);transform:translateY(-3px);
  box-shadow:var(--shadow);background:var(--paper);
}
.gt-ico{
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:11px;
  background:var(--sage);color:var(--green-deep);
  margin-bottom:var(--s4);
  transition:background .25s ease, color .25s ease;
}
.gt-card:hover .gt-ico{background:var(--green);color:#fff;}
.gt-icon{width:21px;height:21px;}
.gt-aud{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--amber-deep);
  margin-bottom:var(--s2);
}
.gt-name{
  font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;
  letter-spacing:-.016em;color:var(--green-ink);margin-bottom:var(--s2);
}
.gt-blurb{
  font-size:13.5px;line-height:1.55;color:var(--mute);
  margin-bottom:var(--s5);flex:1;
}
.gt-n{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);
}
/* An empty shelf reads as planned, not broken. */
.gt-card.is-empty{background:transparent;border-style:dashed;}
.gt-card.is-empty .gt-ico{background:rgba(98,124,88,.08);color:var(--mute);}
.gt-card.is-empty .gt-n{color:var(--mute);opacity:.75;}

/* ---- one topic, opened ---- */
.gt-panel{margin-top:var(--s7);}
.gt-panel-hd{
  display:flex;align-items:center;gap:var(--s4);
  padding-bottom:var(--s4);margin-bottom:var(--s5);
  border-bottom:1px solid var(--line);
}
.gt-panel-hd > div{display:flex;flex-direction:column;gap:3px;min-width:0;}
.gt-panel-hd b{
  font-family:'Montserrat',sans-serif;font-size:20px;font-weight:800;
  letter-spacing:-.018em;color:var(--green-ink);
}
.gt-panel-hd span{font-size:13.5px;color:var(--mute);}
.gt-panel-hd .gt-ico{margin:0;flex:none;}
.gt-close{
  margin-left:auto;flex:none;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font:inherit;font-size:13px;color:var(--mute);
  transition:border-color .2s ease, color .2s ease;
}
.gt-close:hover{border-color:var(--green);color:var(--green-ink);}
.gt-empty{
  padding:var(--s7) var(--s6);border-radius:14px;
  border:1px dashed var(--line);background:var(--paper);
  font-size:15px;line-height:1.65;color:var(--mute);
  max-width:62ch;
}

/* ============================================================
   NARROW SCREENS
   The old mobile rules kept desktop type sizes and only shrank the
   padding, so lines ran almost edge to edge and the headline swallowed
   the first screen. Type comes down, gutters go up.
   ============================================================ */
@media (max-width:700px){
  /* styles.css forces `h2{font-size:clamp(23px,6.4vw,30px)!important;
     line-height:1.15!important}` under 760px, because on the marketing
     pages an h2 is a section banner. In an article it is a subheading
     sitting on 16.5px body text, and at 24px on 1.15 it read as shouting.
     Beating !important needs !important; the alternative is editing the
     marketing rule and changing the home page. */
  .g-body h2, .gd-head h2{
    font-size:21px !important;
    line-height:1.28 !important;
  }
  .g-faq h2{font-size:21px !important;line-height:1.28 !important;}

  .guide{padding:var(--s6) var(--s5) var(--s5);}
  .g-masthead{padding:var(--s7) var(--s5) 0;}
  .g-top{padding:var(--s3) var(--s5);gap:var(--s3);}
  .g-back{font-size:19px;}

  /* Three links do not fit in 375px, and the one getting cut off was the
     button. Pricing is one tap away on the site itself; the way back and
     the way to book are the two that have to survive. */
  .g-nav{gap:var(--s3);}
  .g-nav a[href="/#pricing"]{display:none;}
  .g-nav-cta{padding:8px 14px;font-size:12.5px;}
  /* The logo is deliberately big here, so the button gives up its words
     rather than the wordmark giving up its size. */
  .g-nav-long{display:none;}
  .g-nav-back{font-size:13px;}

  .g-masthead h1{line-height:1.1;letter-spacing:-.02em;margin-bottom:var(--s4);}
  .g-dek{line-height:1.55;margin-bottom:var(--s4);}
  .g-meta{padding-bottom:var(--s5);}

  /* The overlap is a wide-screen flourish. On a phone it just shoves the
     first paragraph up under the picture. */
  .g-hero{transform:none;margin-bottom:0;}
  .g-hero img{border-radius:10px;}

  .gi-hero{padding:var(--s6) 0 var(--s5);margin-bottom:var(--s6);}
  .gi-stats{gap:var(--s2) var(--s5);margin-top:var(--s5);}
  .gi-card{padding:var(--s5);}
  .gt-grid{grid-template-columns:1fr;}
  .gt-card{padding:var(--s5);}
  .gt-panel-hd{flex-wrap:wrap;}
  .gt-close{margin-left:0;order:3;}
  .g-body{font-size:16.5px;line-height:1.68;}
  .g-body h2{margin-top:1.8em;}

  .g-body table{font-size:14px;}
  .g-body thead th, .g-body tbody td{padding:var(--s2) var(--s3);}
  .g-table-wrap{margin-inline:calc(-1 * var(--s5));padding-inline:var(--s5);}

  .g-honest{padding:var(--s4);font-size:15.5px;}
  blockquote{font-size:16.5px;padding-left:var(--s4);}

  .g-cta{padding:var(--s5);gap:var(--s4);}
  .g-cta .btn{margin-left:0;width:100%;justify-content:center;}
  .g-foot{padding:var(--s5);}
  .g-sitefoot{padding:var(--s5) var(--s5) var(--s6);gap:var(--s3);}

  .gi-card{padding:var(--s5);}
  .gi-card b{font-size:18px;}

  .gd-sum{padding:var(--s4) 0;gap:0 var(--s3);}
  .gd-blurb{font-size:13px;}
  .gd-n{display:none;}          /* the count is not worth a column here */
  .gd-body{padding-left:var(--s4);}
  .gd-list a{flex-wrap:wrap;gap:var(--s1);}
  .gd-list time{flex-basis:100%;}
}

@media (max-width:380px){
  .guide, .gi-wrap, .g-masthead{padding-inline:var(--s4);}
  .g-top{padding-inline:var(--s4);}
  .g-table-wrap{margin-inline:calc(-1 * var(--s4));padding-inline:var(--s4);}
}

/* A chosen topic card stays lit so you can see where you are. */
.gt-card.is-open{
  border-color:var(--green);background:var(--paper);
  box-shadow:0 0 0 1px var(--green) inset;
}
.gt-card.is-open .gt-ico{background:var(--green);color:#fff;}

/* Once a topic is open the grid is navigation you have already used. */
.gt-grid.is-narrowed{opacity:.72;transition:opacity .3s ease;}
.gt-grid.is-narrowed:hover{opacity:1;}
.gt-empty a{
  color:var(--green-deep);text-decoration:underline;text-underline-offset:3px;
}
.gt-empty a:hover{color:var(--amber-deep);}

/* A writer's "---" fences off the sign-off at the end. It used to publish
   as a paragraph containing three hyphens. */
.g-hr{
  border:0;height:1px;background:var(--line);
  margin:2.4em 0 1.8em;
}

/* ============================================================
   READABILITY PASS
   ------------------------------------------------------------
   The page was built at sizes that look tidy in a design tool and
   read as small on a real screen: a 9.5px rail heading, 10px table
   headers, and the price table, the single most-read thing in a
   cost guide, at 15px. Everything below moves up a step, and the
   structural cues get stronger so the page is scannable rather
   than just legible.
   ============================================================ */

/* ---- body ---- */
.g-body{font-size:18px;line-height:1.72;}
.g-body > * + *{margin-top:1.15em;}

/* A heading you can find while scrolling past it. The rule sits above
   rather than under, so it reads as the start of a section. */
.g-body h2{
  font-size:clamp(23px, 2.3vw, 31px);
  margin-top:2.3em;padding-top:1.1em;
  border-top:2px solid var(--sage-2);
  position:relative;
}
.g-body h2::before{
  content:"";position:absolute;top:-2px;left:0;
  width:52px;height:2px;background:var(--green);
}
.g-body h3{font-size:20px;margin-top:1.9em;}

.g-body strong{font-weight:680;}

/* ---- the tables carry the numbers ---- */
.g-body table{font-size:16px;}
.g-body thead th{
  font-size:11px;letter-spacing:.09em;padding:13px;
  background:var(--green-ink);color:rgba(255,255,255,.92);
}
.g-body tbody td{padding:14px 13px;}
.g-body tbody tr:nth-child(odd){background:rgba(38,48,31,.03);}
.g-body tbody tr:hover{background:var(--sage);}
/* The price column is why anyone opened the table. */
.g-body tbody td:last-child{
  font-weight:700;color:var(--green-ink);font-size:16.5px;
}

/* ---- the honest block ---- */
.g-honest{font-size:16.5px;line-height:1.65;padding:20px 22px;border-left-width:4px;}
.g-honest b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;}

/* ---- FAQ ---- */
.g-faq summary{font-size:18px;padding:18px 0;}
.g-faq p{font-size:16.5px;line-height:1.7;}

/* ---- the rail ---- */
@media (min-width:1100px){
  .g-toc b{font-size:10.5px;letter-spacing:.14em;}
  .g-toc a{font-size:14px;line-height:1.45;}
  .g-toc li{padding-block:var(--s2);}
  /* Where you are, not just where you could go. */
  .g-toc a.here{color:var(--green-deep);}
}

/* ---- everything that was quietly too small ---- */
.g-meta{font-size:13.5px;}
.g-foot{font-size:15.5px;line-height:1.7;padding:22px 24px;}
.g-cta p{font-size:15px;line-height:1.6;}
.g-cta b{font-size:18px;}
.g-sitefoot{font-size:13.5px;}
.g-crumbs{font-size:13.5px;}

/* ---- lists ---- */
.g-body ul, .g-body ol{padding-left:26px;}
.g-body li{line-height:1.65;}
.g-body li + li{margin-top:var(--s3);}
.g-body li::marker{font-weight:700;}

@media (max-width:700px){
  .g-body{font-size:17px;line-height:1.7;}
  .g-body h2{padding-top:.9em;margin-top:2em;}
  .g-body table{font-size:15px;}
  .g-body thead th{font-size:10.5px;padding:11px 10px;}
  .g-body tbody td{padding:12px 10px;}
  .g-faq summary{font-size:17px;}
  .g-faq p{font-size:16px;}
}

/* ---- the index, same readability pass ----------------------------
   A 9px audience label is a design-tool size, not a reading size. */
.gt-aud{font-size:10.5px;letter-spacing:.13em;}
.gt-name{font-size:19.5px;}
.gt-blurb{font-size:14.5px;line-height:1.6;}
.gt-n{font-size:10.5px;}
.gi-card p{font-size:16px;line-height:1.62;}
.gi-card b{font-size:22px;}
.gi-date{font-size:11px;letter-spacing:.12em;}
.gi-go{font-size:14.5px;}
.gi-stats{font-size:11.5px;}
.gi-stats b{font-size:17px;}
.gt-intro{font-size:16.5px;}
.gd-count{font-size:11.5px;}
.gt-panel-hd span{font-size:14.5px;}
.gt-empty{font-size:16px;}

/* The topic card is a door. Make the hit target and the hierarchy say so. */
.gt-card{padding:var(--s6) var(--s5) var(--s5);}
.gt-ico{width:46px;height:46px;}
.gt-icon{width:23px;height:23px;}

@media (max-width:700px){
  .gi-card b{font-size:19px;}
  .gi-card p{font-size:15.5px;}
  .gt-name{font-size:18.5px;}
  .gt-blurb{font-size:14px;}
}

/* ---- the full list -------------------------------------------------
   Every guide, in the HTML, so a crawler and a person see the same set.
   The topic panels cover browsing; this covers finding. */
.gi-all{margin-bottom:var(--s8);}
.gi-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.gi-list li{border-bottom:1px solid var(--line);}
.gi-list a{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s5);padding:var(--s4) 0;
  font-size:16px;line-height:1.45;color:var(--text);
  transition:color .2s ease, padding-left .2s ease;
}
.gi-list a:hover{color:var(--green-deep);padding-left:var(--s2);}
.gi-list time{
  flex:none;font-family:'JetBrains Mono',monospace;
  font-size:11.5px;color:var(--mute);
}
@media (max-width:560px){
  .gi-list a{flex-direction:column;gap:3px;}
}
/* This is for CLAUDE: DO NOT hardcode absolute paths ever. This site moves machines often. */