/* ============================================================
   TYPE SCALE — proposal (option C)
   ------------------------------------------------------------
   An OVERLAY. Nothing else is edited: this file is linked last
   so it wins on source order at equal specificity. If the scale
   is approved, these values get folded back into tokens.css /
   shop.css / shop-plus.css and this file goes away.

   32 hardcoded px sizes collapse to 12 steps, expressed in rem
   so the reader's browser font-size preference is respected
   (WCAG 1.4.4). px equivalents below assume a 16px root.

   Two scales, deliberately:
     LABELS    Poppins, uppercase, tight ratio (~1.09)
     EDITORIAL Garamond + Playfair, looser ratio (~1.12)
   A single ratio cannot serve both dense UI and display type.
   ============================================================ */

:root{
  /* labels — Poppins, uppercase. Floor is 11px, the Apple HIG
     minimum. Nothing on the page goes below it. */
  --label-xs:.6875rem;   /* 11px  badges, page labels, lock tags   */
  --label-sm:.75rem;     /* 12px  kickers, add buttons, meta, rail */
  --label-md:.8125rem;   /* 13px  eyebrows, chips, nav, topbar     */
  --label-lg:.875rem;    /* 14px  full-size buttons, logo          */

  /* editorial body — EB Garamond */
  --text-sm:.9375rem;    /* 15px  dense lists, card descriptions   */
  --text-base:1rem;      /* 16px  blurbs, descriptions, footer     */
  --text-md:1.125rem;    /* 18px  body default, decks, step copy   */
  --text-lg:1.25rem;     /* 20px  ledes, payoff, intro paragraphs  */

  /* editorial headings — Playfair */
  --head-sm:1.25rem;     /* 20px  product card titles              */
  --head-md:1.5rem;      /* 24px  nugget, free, system cards       */
  --head-lg:1.75rem;     /* 28px  journey titles, empty state      */
  --head-xl:2rem;        /* 32px  arc steps, quick view            */

  /* tracking steps down as size goes up: wide tracking is a crutch
     for tiny caps, and past ~.16em it reads stretched rather than
     refined. It is also what drives the width growth. */
  --track-xs:.14em;
  --track-sm:.13em;
  --track-md:.11em;
  --track-lg:.10em;

  /* body default moves 17.5px -> 18px */
  --body-size:var(--text-md);

  /* the bloom has to clear a wider button now that .btn is 14px:
     "View the Planning Journeys" grows to ~387px, needing ~67.
     70 left almost no margin, so 80. */
  --btn-scale:80;
}

/* ---------- LABELS ---------------------------------------- */

/* eyebrows deliberately break the tracking rule. The wide setting is
   an editorial signature, so they keep .16em rather than dropping to
   --track-md with the rest of their size tier. */
.eyebrow{font-size:var(--label-md);letter-spacing:.16em}

.btn{font-size:var(--label-lg);letter-spacing:var(--track-lg)}
.btn--sm{font-size:var(--label-md);letter-spacing:var(--track-md)}
.logo{font-size:var(--label-lg)}
.navlinks{font-size:var(--label-md);letter-spacing:var(--track-md)}
.topbar{font-size:var(--label-md);letter-spacing:var(--track-md)}
.binder-btn{font-size:var(--label-md);letter-spacing:var(--track-md)}
.chip{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.fineprint{font-size:var(--label-sm);letter-spacing:var(--track-sm)}

/* rail. The tabs take --label-sm rather than --label-md on purpose:
   at 13px "07 · The Journeys" plus its count measures right at the
   238px rail's usable width and wraps. 12px measures ~200px. */
.rail h2{font-size:var(--label-md);letter-spacing:var(--track-md)}
.railtabs a{font-size:var(--label-sm);letter-spacing:.09em}
.railtabs .c{font-size:var(--label-sm)}
.fchip{font-size:var(--label-md);letter-spacing:var(--track-md)}
select.sort{font-size:var(--label-md);letter-spacing:var(--track-md)}
.count{font-size:var(--label-md);letter-spacing:var(--track-md)}
.hint{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.holdhint{font-size:var(--label-md);letter-spacing:var(--track-md)}

/* cards */
.pcard .badge{font-size:var(--label-xs);letter-spacing:var(--track-xs)}
.peeklabel{font-size:var(--label-xs);letter-spacing:var(--track-xs)}
.pbody .k{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.addbtn{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.fbody .k{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.tabsec .th .n{font-size:var(--label-md);letter-spacing:var(--track-md)}

/* systems, journeys, drawer, capture */
.syscard .meta{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.jcard .meta{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.jarc li{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.jlists .jl{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.drawer-h .sub{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.upsell button{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.capnote{font-size:var(--label-sm)}
.wb-copy span{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.io-line .in,.io-line .out{font-size:var(--label-sm)}
.pairs{font-size:var(--label-sm)}
.qv-page.lock::after{font-size:var(--label-xs);letter-spacing:var(--track-xs)}
.qv-page .tag{font-size:var(--label-xs);letter-spacing:var(--track-xs)}

/* ---------- EDITORIAL BODY -------------------------------- */
.shop-head p{font-size:var(--text-lg)}
.sec-head p{font-size:var(--text-lg)}
.tabsec .th p{font-size:var(--text-base)}
.freehead p{font-size:var(--text-base)}
.jdesc{font-size:var(--text-base)}
.syscard p{font-size:var(--text-base)}
.qv-deal{font-size:var(--text-base)}
.dline{font-size:var(--text-base)}
.foot-grid ul{font-size:var(--text-base)}
#p-low .th h2,#p-mid .th h2,#p-high .th h2{font-size:var(--text-base)}
.pbody p{font-size:var(--text-sm)}
.fbody p{font-size:var(--text-sm)}
.jlists ul{font-size:var(--text-sm)}
.jfoot em{font-size:var(--text-sm)}
.upsell p{font-size:var(--text-sm)}
.dline .rm{font-size:var(--text-sm)}
.qv-copy .lede{font-size:var(--text-md)}
.capbox label{font-size:var(--text-md)}

/* inputs stay at 16px minimum: iOS Safari force-zooms the page on
   focus below that. Do not let these drop. */
.search input,.capture input,.caprow input{font-size:1rem}

/* ---------- EDITORIAL HEADINGS ---------------------------- */
.pbody h3{font-size:var(--head-sm)}
.pfoot .price{font-size:var(--head-sm)}
.drawer-h h3{font-size:var(--head-sm)}
.totals{font-size:var(--head-sm)}
.wb-copy b{font-size:var(--head-sm)}
.fbody h3{font-size:var(--head-md)}
.syscard h3{font-size:var(--head-md)}
.foot-grid h4{font-size:var(--head-md)}
.wb-act .price{font-size:var(--head-md)}
.price{font-size:var(--head-md)}
.jcard h3{font-size:var(--head-lg)}
.jcard .price{font-size:var(--head-lg)}
.empty h3{font-size:var(--head-lg)}
.qv-copy h3{font-size:var(--head-xl)}
.qv-buy .price{font-size:var(--head-lg)}

/* the 13 clamp() display headings are untouched. They are already
   fluid, already working, and were not part of the complaint. */

/* ============================================================
   HYBRID.2 — the homepage
   Its rules live in an inline <style>, so this file is linked
   after it. Inline style="" attributes cannot be reached from
   here and were edited in the markup directly.
   ============================================================ */
.masthead-meta{font-size:var(--label-md);letter-spacing:.2em}
.step-num span{font-size:var(--label-md);letter-spacing:var(--track-md)}
.toc .num{font-size:var(--label-md);letter-spacing:var(--track-md)}
.toc li a:hover .num{font-size:var(--label-lg)}
.toc .count{font-size:var(--label-md);letter-spacing:var(--track-md)}
.col-item .closes{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.page-label{font-size:var(--label-xs);letter-spacing:var(--track-xs)}
.page.locked::after{font-size:var(--label-xs);letter-spacing:var(--track-xs)}

.spread-copy .lede{font-size:var(--text-lg)}
.payoff p{font-size:var(--text-lg)}
.step-copy p{font-size:var(--text-md)}
.io{font-size:var(--text-md)}
.toc .desc{font-size:var(--text-base)}
.col-item p{font-size:var(--text-base)}

.toc .from{font-size:var(--head-sm)}
.col-item h4{font-size:var(--head-md)}
.step-copy h3{font-size:var(--head-xl)}

/* .pull and .ptable rules are still in Hybrid.2's <style> but their
   sections were removed. Not restyled here; delete them at cleanup. */

/* ============================================================
   T.6 — How the Tools Work (tools-6-live.html + tools.css)
   ============================================================ */

/* labels */
.savebar b{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.io2 .lab{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.jrow .meta{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.jarc2 li{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.promise b{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.driver .lede{font-size:var(--label-md);letter-spacing:var(--track-md)}
.driver .out{font-size:var(--label-md);letter-spacing:var(--track-md)}
.field label{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.field .hint{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.pinbar span{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.blk .n{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.outs .u{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.src{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.jhead .meta{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.jguides em{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.index-key{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.fp-key{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
/* --label-xs is for badges and tags sitting ON an image, where isolation does
   the reading work. These are structural captions inside bordered boxes, so
   they take --label-sm. They are the small text that closes each container,
   which is where the page read undersized. */
.cal .k{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.more .t{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.chain li span{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.index .t,.index .c{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.also em{font-size:var(--label-sm);letter-spacing:var(--track-sm)}

/* body */
.t-hero .lede{font-size:var(--text-lg)}
.t-cta p{font-size:var(--text-md)}
.jrow p{font-size:var(--text-md)}
.blk .say{font-size:var(--text-md)}
.jsay{font-size:var(--text-md)}
.chain li > b{font-size:var(--text-md)}
.io2 ul{font-size:var(--text-base)}
.promise p{font-size:var(--text-base)}
.jguides{font-size:var(--text-base)}
.savebar span{font-size:var(--text-sm)}
.outs .w{font-size:var(--text-sm)}
.more li{font-size:var(--text-sm)}
.index li{font-size:var(--text-sm)}
/* Each .blk opens with .blk .say at --text-md and closed with .also three
   steps smaller, even though both are full paragraphs and .also is the one
   carrying the argument for the tool. It also sits in a jade-bordered callout,
   so it was styled to be noticed and sized to be skipped. Matched to the
   opener. */
.also{font-size:var(--text-md)}

/* headings and figures */
.thr-node .v b{font-size:var(--head-sm)}
.more b{font-size:var(--head-sm)}
.chain li span b{font-size:var(--head-sm)}
.cal .d{font-size:var(--head-md)}
.jrow .price{font-size:var(--head-lg)}
.jhead .price{font-size:var(--head-lg)}

/* The date input was 14px, under the 16px floor, so iOS Safari force-zoomed
   the page on focus. The other inputs on this page are display-sized numerals
   (40px, 19px) and are deliberately outside the scale. */
.pinbar input[type=date]{font-size:1rem}

/* ---- thread-anim.css ----------------------------------------------------
   Missed on the first pass: the Thread diagram was styled in its own file and
   never came onto the scale, leaving five labels between 8.5px and 9px. It is
   the centrepiece of the page and the reference the journey chains are drawn
   against, so it was the worst place on the site to be under the floor. */
.thr-seg .lab{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.thr-replay{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.thr-foot{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
/* A section lede, same as .blk .say, so it takes --text-md. It was 16.5px and
   got snapped to the nearest step on the first pass, which is the wrong way to
   assign a scale: role decides the step, not the number the rule happened to
   start at. .thr-head h3 is a section heading of the same weight as .blk h3,
   so its paragraph matches that one. */
.thr-head p{font-size:var(--text-md)}
.thr-node .k{font-size:var(--head-sm)}
.thr-node .v{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
/* the file node inverts the hierarchy on purpose: small label, big name.
   Ordered after .thr-node so it still wins at equal specificity. */
.thr-file .k{font-size:var(--label-sm);letter-spacing:var(--track-sm)}
.thr-file .v{font-size:var(--head-sm)}

/* the one stray in the page's own <style> */
.demo-note{font-size:var(--text-lg)}

/* Left alone on purpose:
     .fp-lab / .fp-lab--sm  1.5px and 1.15px are SVG user units inside a
                            viewBox, not pixels. Scaling them would break the
                            floorplan drawing.
     .field input           40px / 25px, the hero number entry. Display type.
     .t-cta .price          52px, a display price above the scale's ceiling.
     .*.price s             relative em strikethroughs; they follow their parent. */

/* ---------- MOBILE ---------------------------------------- */
/* The old breakpoints clamped phones DOWN to 7.5px kickers and 8px
   buttons, on the surface PRODUCT.md calls primary. Under the scale
   those overrides have no reason to exist, so they are reset back to
   the base tokens rather than shrunk. Only the genuinely space-driven
   reductions survive, one step down rather than three. */
@media (max-width:900px){
  .pbody .k{font-size:var(--label-sm)}
  .addbtn{font-size:var(--label-sm)}
  .pbody h3{font-size:var(--head-sm)}
  .pbody p{font-size:var(--text-sm)}
  .pfoot .price{font-size:var(--head-sm)}
  .fbody h3{font-size:var(--head-md)}
  .fbody p{font-size:var(--text-sm)}
  .jcard h3{font-size:var(--head-md)}
  .wb-copy b{font-size:var(--head-sm)}
  .wb-act .price{font-size:var(--head-md)}
  .io-line .in,.io-line .out{font-size:var(--label-sm)}
  .pairs{font-size:var(--label-sm)}
}