/* ============================================================================
   Steadycase storefront — THE stylesheet
   Created 2026-07-27 by unifying the two CSS tiers that had existed since the
   2026-07-21 redesign.

   WHAT THIS REPLACED
     assets/redesign.css        (154 lines) — 10 redesigned pages
     assets/styles.css        (1,007 lines) — 12 older pages
     assets/redesign-chrome.css (102 lines) — a patch that repainted the older
                                              pages' header/footer to imitate
                                              the redesign. Deleted; unnecessary
                                              once both tiers share one sheet.

   HOW THE MERGE WAS DECIDED
     - redesign.css is the base and WINS every conflict. Where both files
       defined a class, the redesign definition survives.
     - From styles.css, only rules actually referenced by the 12 older pages
       were carried over. 154 of its 359 rule blocks were dead and are gone.
     - The announce-print family was deliberately NOT carried over: both tiers
       use identical announcement-bar markup, and redesign.css's .announce-bar
       already renders it correctly. Dropping it is what makes the bar
       consistent site-wide instead of two variants of the same thing.
     - VARIABLE TRAP, worth remembering: styles.css set --paper:#F5F6F7 while
       redesign.css sets --paper:#ECEFF1. They are different colors under one
       name — the old redesign-chrome.css even carried a comment warning not to
       redefine it globally. Since redesign.css already exposes #F5F6F7 as
       --paper-light, every carried-over rule had var(--paper) rewritten to
       var(--paper-light). The older pages keep their exact ground color.
     - --maxw and --measure existed only in styles.css and were added to :root.

   Typography lives separately in steadycase-type.css, which loads AFTER this
   file on every page. Do not put font-family or type-scale rules here.
   ========================================================================= */

/* Steadycase redesign — shared stylesheet
   Source of truth: design_handoff_steadycase_site (2026-07-21).
   Tokens come from the canonical Steadycase Brand Kit; do not invent colors.
   Shared components are defined here; page-specific section styles go in each
   page's own <style> block, prefixed with that page's slug. */

:root{
  --navy:#0B2D4A;
  --teal:#2F6B73;
  --teal-light:#8CB7B9;
  /* 2026-08-08: was #BFDCDA, a near-miss at 4.17:1 on the teal ground in nine
     places (impeccable S3). #CDE4E2 measures 4.55:1 there and 10.61:1 on navy.
     Safe to change as a TOKEN because every decorative use of #BFDCDA on this
     site — the arc watermarks, the article figures — writes the hex literally
     and does not reference the variable; the token itself is only ever a text
     color (plus ::selection, where navy-on-pale improves to 10.61:1). */
  --teal-pale:#CDE4E2;
  --ink:#4B5C6B;
  /* 2026-08-08: was #748494, which failed WCAG AA in nine places across five
     pages — including the UPL fine print (3.84:1) and the attorney byline
     (3.55:1), the two lines that carry the most weight on a Learn page.
     #586877 keeps the same cool, navy-tinted hue and clears 4.5:1 on every
     ground --muted actually sits on: white 5.74, --paper-light 5.30,
     --paper 4.97, --cream 4.74. The impeccable report suggested #5E6E7E; that
     value clears white and --paper-light but still measures 4.33 on --cream,
     where .fieldguide-fineprint sits, so it would have left one of the nine
     failures in place. Darken this token, do not lighten it. */
  --muted:#586877;
  --dark-muted:#8CA3B5;
  --dark-body:#B9C9D2;
  --dark-body-teal:#D7E6E4;
  --cream:#EFE9DD;
  --paper:#ECEFF1;
  --paper-light:#F5F6F7;
  --hairline:#E3E6E8;
  --white:#fff;
  --maxw:1120px;
  /* 2026-08-08: was 720px, which is ~89 characters of Archivo at 16px against a
     65-75ch craft floor. Expressed in ch rather than px on purpose — a px cap is
     not font-size aware, so at 720px the 12px fine print ran 105ch and the
     12.5px footer disclaimer 106ch while the body copy ran 89ch. One ch value
     puts every text size in the same band at once. Measured: for Archivo, one
     CSS ch is within 0.3% of the average glyph width the scoring instrument
     uses, so 68ch measures as 68 characters. */
  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink)}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--navy)}
img{max-width:100%;display:block}

/* ---------- Type ---------- */
.eyebrow{color:var(--teal);font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:12px}
.eyebrow-on-navy{color:var(--teal-light)}
.eyebrow-on-teal{color:var(--teal-pale)}
.h2{font-size:33px;font-weight:800;color:var(--navy);letter-spacing:-.6px;line-height:1.2;margin:0 0 10px}
.h2-on-dark{color:var(--white)}
.lede{font-size:16px;line-height:1.55;color:var(--ink);margin:0 0 38px;max-width:680px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;font-family:inherit;font-weight:700;cursor:pointer;border:0;text-align:center}
.btn:hover{opacity:.93}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{color:var(--white)}
.btn-teal{background:var(--teal);color:var(--white)}
.btn-teal:hover{color:var(--white)}
.btn-light{background:var(--paper-light);color:var(--navy)}
.btn-light:hover{color:var(--navy)}
.btn-outline-teal{background:transparent;color:var(--teal);border:1px solid var(--teal)}
.btn-outline-teal:hover{opacity:1;color:var(--navy);border-color:var(--navy)}
.btn-outline-light{background:transparent;color:var(--teal-light);border:1px solid rgba(140,183,185,.55)}
.btn-outline-light:hover{opacity:1;color:var(--white)}
.btn-lg{min-height:50px;padding:13px 24px;font-size:16px}
.btn-md{min-height:46px;padding:11px 22px;font-size:15px}
.btn-sm{min-height:44px;padding:10px 18px;font-size:14px}
.btn-nav{min-height:40px;padding:9px 22px;font-size:14px;white-space:nowrap}

/* ---------- Announcement bar ---------- */
.announce-bar{background:var(--navy);color:var(--dark-body);font-size:13.5px;font-weight:600;text-align:center;padding:11px 20px}
.announce-bar b{font-weight:800;color:var(--teal-light);letter-spacing:1px}
.announce-bar a{color:var(--teal-light);font-weight:700}
.announce-bar a:hover{color:var(--white)}

/* ---------- Header / nav ---------- */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 48px;min-height:70px;background:var(--paper);border-bottom:1px solid var(--hairline)}
.site-header .brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.site-header .brand-word{font-size:23px;letter-spacing:-.7px}
.site-header .brand-word .b1{font-weight:700;color:var(--navy)}
.site-header .brand-word .b2{font-weight:500;color:var(--ink)}
.site-nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600;color:var(--ink);flex-wrap:wrap}
.site-nav > a:not(.btn){color:var(--ink);padding:4px 0}
.site-nav > a:not(.btn):hover{color:var(--navy)}
.site-nav > a.active{color:var(--navy);border-bottom:2px solid var(--teal);padding-bottom:2px}
.site-nav .btn-navy{color:var(--white)}

/* ---------- Ledger rows (signature layout device) ---------- */
.ledger{display:flex;flex-direction:column}
.ledger-row{display:grid;gap:24px;align-items:baseline;padding:24px 0;border-top:1px solid var(--hairline)}
.ledger-end{border-top:1px solid var(--hairline)}

/* ---------- Cards ---------- */
.card{background:var(--white);border:1px solid var(--hairline);border-radius:10px}
.panel-navy{background:var(--navy);border-radius:10px;position:relative;overflow:hidden}
.panel-teal{background:var(--teal);border-radius:10px;position:relative;overflow:hidden}

/* ---------- Arc motif ---------- */
.arc{position:absolute;pointer-events:none}

/* ---------- Sections ---------- */
.sect{padding:76px 64px}

/* ---------- Field Guide capture (cream card) ---------- */
.fieldguide-sect{background:var(--paper);border-top:1px solid var(--hairline);padding:76px 64px}
.fieldguide-card{max-width:880px;margin:0 auto;background:var(--cream);border-radius:10px;padding:44px 48px}
.fieldguide-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.fieldguide-card h2{font-size:28px;font-weight:800;color:var(--navy);letter-spacing:-.5px;margin:0 0 10px}
.fieldguide-card .fg-copy{font-size:15.5px;line-height:1.55;color:var(--ink);margin:0}
.fieldguide-form{display:flex;flex-direction:column;gap:10px;width:320px;max-width:100%}
.fieldguide-form input[type=email]{min-height:48px;border:1px solid var(--navy);border-radius:7px;padding:12px 16px;font-family:inherit;font-size:15px;background:var(--white);color:var(--navy)}
.fieldguide-form .btn{min-height:48px;font-size:15px}
.fieldguide-fineprint{font-size:12.5px;line-height:1.55;color:var(--muted);margin:26px 0 0;border-top:1px solid rgba(11,45,74,.12);padding-top:18px}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);padding:44px 64px;position:relative;overflow:hidden}
.site-footer .foot-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.site-footer .brand{display:flex;align-items:center;gap:10px}
.site-footer .brand-word{font-size:19px;letter-spacing:-.5px}
.site-footer .brand-word .b1{font-weight:700;color:var(--paper-light)}
.site-footer .brand-word .b2{font-weight:500;color:var(--teal-light)}
.site-footer .foot-links{display:flex;gap:22px;font-size:13.5px;font-weight:600;flex-wrap:wrap}
.site-footer .foot-links span{color:var(--dark-muted)}
.site-footer .foot-links a{color:var(--teal-light)}
.site-footer .foot-links a:hover{color:var(--white)}
/* 760px of 12.5px type is 106 characters — the widest text block on every page
   in the estate. min() with the shared measure caps it at 68ch without changing
   anything else about the footer. */
.site-footer .disclaimer{position:relative;font-size:12.5px;line-height:1.6;color:var(--dark-muted);max-width:min(760px,var(--measure));border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin:0}

/* ---------- Launch-offer note (content injected by app.js) ----------
   Restyled for the redesign: paper + hairline (cream is reserved for the
   Field Guide card per the brand system). */
.offer-note{max-width:800px;margin-top:24px;padding:14px 18px;background:var(--paper);border:1px solid var(--hairline);border-radius:7px;color:var(--navy);font-size:15px}

/* ---------- Checkout message (buy boxes) ---------- */
.checkout-msg{display:none;font-size:13.5px;font-weight:600;color:var(--navy);margin:10px 0 0}
.checkout-msg.show{display:block}

/* ---------- Sample-pages lightbox (markup contract shared with app.js) ---------- */
.lightbox{position:fixed;inset:0;background:rgba(11,45,74,.88);display:none;z-index:50;align-items:center;justify-content:center;padding:18px}
.lightbox.open{display:flex}
.lightbox figure{margin:0;max-width:min(920px,96vw);width:100%}
.lb-stage{position:relative;background:var(--white);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;max-height:78vh}
.lightbox img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain}
.lightbox .wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-weight:700;font-size:44px;color:rgba(11,45,74,.12);letter-spacing:4px;text-transform:uppercase}
.lightbox .lb-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.lightbox .lb-bar button,.lb-close-icon{background:var(--white);color:var(--navy);border:0;border-radius:7px;padding:9px 14px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.lb-close-icon{position:absolute;top:10px;right:10px;z-index:2;box-shadow:0 2px 10px rgba(11,45,74,.25)}
.lightbox .lb-count{color:#fff;font-size:13px}

/* ---------- Responsive (shared) ----------
   Prototypes are desktop-only (1180px). Breakpoints: 1000px (tablet), 640px (mobile).
   Page-specific grids collapse in each page's own style block at the same breakpoints. */
@media (max-width:1000px){
  .sect,.fieldguide-sect{padding:56px 32px}
  .site-header{padding:14px 24px;flex-wrap:wrap}
  .site-nav{gap:16px 20px}
  .site-footer{padding:38px 32px}
  .fieldguide-grid{grid-template-columns:1fr}
  .fieldguide-form{width:100%}
}
@media (max-width:640px){
  .sect,.fieldguide-sect{padding:44px 20px}
  .site-header{padding:12px 16px}
  .site-footer{padding:32px 20px}
  .fieldguide-card{padding:30px 22px}
  .h2{font-size:27px}
  .ledger-row{grid-template-columns:1fr !important;gap:6px}
}

/* ============================================================================
   CARRIED OVER from styles.css — rules the 12 previously-separate pages need.
   Everything below is scoped to classes those pages use; nothing here is
   referenced by the originally-redesigned pages.
   ========================================================================= */

CARRIED OVER from styles.css — rules the 12 previously-separate pages need.
   Everything below is scoped to classes those pages use; nothing here is
   referenced by the originally-redesigned pages.
   ========================================================================= */

html{scroll-behavior:smooth}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.kicker{color:var(--teal);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin-bottom:12px;}

.btn-outline{background:transparent;color:var(--teal);border:1px solid var(--teal)}

.learn-hero{background:var(--paper-light);
  border-bottom:1px solid var(--hairline);
  padding:54px 0 58px;}

.learn-hero .sub{font-size:19px;color:#34495d;margin-top:18px;max-width:800px}

.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:28px;color:var(--muted)}

.breadcrumb a{color:var(--teal);text-decoration:none}

/* 2026-08-08: the 4px teal side tab is gone. The craft floor refuses a colored
   side border above 1px on a callout; the block is now separated from the prose
   by a tinted ground and a hairline instead, which is quieter and reads as part
   of the same page rather than as a widget pasted onto it. Ground is a 4% teal
   tint of white — text at #34495d measures 8.4:1 on it and the teal link color
   5.5:1, so nothing regresses. max-width tracks --measure (+36px of horizontal
   padding) so the callout's TEXT lands in the same character band as the prose
   around it. */
.learn-callout{max-width:calc(var(--measure) + 36px);
  margin-top:24px;
  padding:16px 18px;
  background:#F1F7F7;
  border:1px solid var(--hairline);
  border-left:1px solid var(--teal);
  color:#34495d;}

.learn-meta{margin-top:18px;font-size:13px;color:var(--muted)}

.learn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

.learn-card{background:#fff;border:1px solid var(--hairline);border-top:4px solid var(--teal);padding:28px}
/* Learn hub state index (2026-08-17): compact A-Z list replacing the 20-card grid. */
.learn-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;border-top:1px solid var(--hairline)}
.learn-index li{border-bottom:1px solid var(--hairline)}
.learn-index a{display:block;padding:14px 4px;font-family:"Zilla Slab",serif;font-weight:600;font-size:1.15rem;color:var(--navy);text-decoration:none}
.learn-index a span{color:var(--teal);font-weight:400}
.learn-index a:hover,.learn-index a:focus-visible{color:var(--teal)}
@media (max-width:980px){.learn-index{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.learn-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}}


.learn-card h2{font-size:26px;margin-bottom:12px}

.learn-card a{display:inline-block;margin-top:18px;font-weight:700;text-decoration:none}

.learn-article{max-width:860px}

.learn-article h2{margin-top:46px;margin-bottom:16px}

.learn-article h2:first-child{margin-top:0}

.learn-article h3{margin-top:28px;margin-bottom:12px}

.learn-article p + p{margin-top:14px}

/* +26px covers the 22px list indent and the 4px li padding, so the LIST TEXT
   lands on the same measure as the prose rather than 26px wider. */
.resource-list,.learn-steps{margin:14px 0 0 22px;max-width:calc(var(--measure) + 26px)}

.resource-list li,.learn-steps li{margin-bottom:11px;padding-left:4px}

.not-found{min-height:62vh;padding:90px 0}

.band{padding:78px 0}

.band-paper{background:var(--paper-light)}

.band-cream{background:var(--cream)}

.band-white{background:var(--white)}

.band-navy h2,.band-navy h3,.band-navy .kicker{color:#fff}

.section-heading{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:34px}

.section-heading p{font-size:17px}

.hero-system .sub{margin-top:20px;
  font-size:19px;
  color:#34495d;}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

.trust-row .ti{color:var(--teal);font-size:21px}

.system-card,.product-card,.step,.detail-card,.faq-item{background:var(--white);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:24px;}

.system-card .ti,.product-card .ti,.detail-card .ti{color:var(--teal);
  font-size:26px;
  margin-bottom:12px;}

.system-card p,.product-card p,.step p,.detail-card p,.faq-item p{font-size:15px}

.section-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}

.product-card.compass .muted{color:#b9c9d2}

.muted{color:var(--muted)}

.fineprint{font-size:12px;color:var(--muted);margin-top:12px}

.decision-card ul,.text-list{padding-left:20px;margin-top:12px}

.decision-card li,.text-list li{margin-bottom:8px}

.product-hero{background:var(--paper-light);
  border-bottom:1px solid var(--hairline);
  padding:66px 0;}

.product-hero-grid{display:grid;
  grid-template-columns:1fr 420px;
  gap:48px;
  align-items:center;}

.product-hero h1{font-size:48px}

.product-hero .sub{font-size:18px;margin-top:18px}

.cover-stack{display:grid;
  gap:16px;
  align-items:center;}

.cover-stack img{width:100%;
  background:#fff;
  border:1px solid #d2d8dc;
  border-radius:8px;}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}

.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:step}

.step{position:relative;padding-top:48px}

.step::before{counter-increment:step;
  content:counter(step);
  position:absolute;
  top:18px;
  left:22px;
  width:25px;
  height:25px;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:700;}

.comparison{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--hairline);border-radius:8px;overflow:hidden}

.comparison th,.comparison td{padding:15px 16px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:top}

.comparison th{background:var(--paper-light);color:var(--navy)}

.comparison tr:last-child td{border-bottom:0}

.buybox{background:var(--paper-light);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:24px;}

.buybox label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:7px}

.buybox select{width:100%;
  min-height:44px;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  padding:10px 12px;
  border:1px solid var(--hairline);
  border-radius:7px;
  background:var(--white);
  margin-bottom:14px;}

.companion-addon{margin-top:18px;padding:16px 16px 4px;border:1px solid var(--hairline);border-top:3px solid var(--teal);border-radius:8px;background:#fff}

.companion-offer{font-size:14px;color:var(--ink);margin:0 0 12px}

.price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}

.price-now{font-size:32px;font-weight:700;color:var(--navy)}

.price-note{font-size:13px;color:var(--muted)}

.requirements-note{margin-top:12px;
  padding:12px 13px;
  border:1px solid var(--hairline);
  border-radius:7px;
  background:#fff;
  color:var(--ink);
  font-size:13px;
  line-height:1.45;}

.requirements-note b{color:var(--navy)}

.notice{background:var(--paper-light);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:17px 18px;
  font-size:14px;}

.notice b{color:var(--navy)}

.legal{max-width:800px;margin:0 auto;padding:60px 24px}

.legal h1{font-size:34px;margin-bottom:4px}

.legal .updated{font-size:13px;color:var(--muted);margin-bottom:28px}

.legal h2{font-size:21px;margin:30px 0 8px}

.legal p,.legal li{font-size:15px;margin-bottom:10px}

.legal ul{padding-left:22px}

.learn-hero{position:relative;overflow:hidden}

.learn-hero .wrap{position:relative;z-index:1}

.state-watermark{position:absolute;right:-20px;top:50%;transform:translateY(-50%);height:130%;max-width:38%;opacity:.07;pointer-events:none}

.learn-figure{margin:26px 0 0;max-width:820px}

.learn-figure img{width:100%;border:1px solid var(--hairline);border-radius:8px}

.learn-figure figcaption{font-size:13px;color:var(--muted);margin-top:8px}

/* Learn-page explainer video. Scoped to .learn-video only — must not reach the
   .sc-prose :where() layer or the generic figure/video rules above. */

.learn-video{margin:26px 0 0;max-width:820px;display:grid;grid-template-columns:265px 1fr;gap:26px;align-items:center;background:var(--paper);border:1px solid var(--hairline);border-radius:10px;padding:24px}

.learn-video>*{min-width:0}

.learn-video video{width:100%;height:auto;aspect-ratio:9/16;display:block;border-radius:8px;background:#000;border:1px solid var(--hairline)}

.learn-video figcaption{font-size:14.5px;color:var(--ink);line-height:1.65;margin:0}

.learn-video figcaption b{color:var(--navy)}

.learn-video .lv-kicker{font-size:11.5px;font-weight:700;letter-spacing:2px;color:var(--teal);text-transform:uppercase;margin:0 0 8px}

.learn-transcript{max-width:820px;margin:12px 0 0}

.learn-transcript summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--teal)}

.learn-transcript div{font-size:14px;line-height:1.7;color:var(--ink);margin-top:10px}

@media (max-width:720px){
  .learn-video{grid-template-columns:1fr;gap:18px}
  .learn-video video{max-width:265px}
}

.hero-print .sub{font-size:19px;color:#34495d;margin-top:18px}

.download-note{display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:20px;
  padding:13px 15px;
  max-width:650px;
  border:1px solid #c9d2d7;
  border-left:4px solid var(--teal);
  background:#fff;
  color:#34495d;
  font-size:14px;}

.download-note .ti{font-size:20px;color:var(--teal);margin-top:1px}

.case-head .ti{font-size:27px;color:#76b4b8;margin-bottom:10px}

.included-strip{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);}

.included-item{background:#fff;padding:24px}

.included-item .ti{font-size:25px;color:var(--teal);margin-bottom:10px}

.included-item h3{font-size:19px;margin-bottom:5px}

.included-item p{font-size:14px}

.product-detail-hero{background:var(--paper-light);
  border-bottom:1px solid var(--hairline);
  padding:58px 0 66px;}

.product-detail-grid{display:grid;
  grid-template-columns:390px minmax(0,1fr) 330px;
  gap:36px;
  align-items:start;}

.cover-pair{position:relative;
  min-height:505px;}

.cover-pair img{position:absolute;
  border:1px solid #b8ad9d;
  background:#fff;}

.cover-pair .main-cover{width:300px;left:0;top:0;z-index:2}

.cover-pair .pack-cover{width:225px;right:0;bottom:0;z-index:3}

.cover-pair .included-badge{position:absolute;
  left:24px;
  bottom:26px;
  z-index:4;
  background:var(--navy);
  color:#fff;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:700;}

.product-detail-copy h1{font-size:43px}

.product-detail-copy .sub{font-size:18px;color:#34495d;margin-top:16px}

.product-detail-copy .text-list{margin-top:20px}

.sample-card{border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  cursor:pointer;
  padding:0;
  font-family:inherit;
  text-align:left;}

.sample-card img{width:100%;display:block}

.sample-card span{display:block;padding:12px 14px;color:var(--navy);font-size:13px;font-weight:700}

.reason-card .ti{font-size:26px;color:var(--teal);margin-bottom:12px}

.sample-gallery-five{display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:18px;
  padding:28px;
  background:var(--navy);}

.sample-gallery-five .sample-card{display:flex;
  flex-direction:column;
  min-width:0;
  border-color:#d9e1e5;
  grid-column:span 2;}

.sample-gallery-five .sample-card img{aspect-ratio:8.5 / 11;object-fit:cover;object-position:top}

.sample-gallery-five .sample-card span{background:#fff;min-height:52px}

.sample-gallery-five .sample-card:nth-child(4){grid-column:2 / span 2}

.sample-gallery-five .sample-card:nth-child(5){grid-column:4 / span 2}

.fast-answer-card .ti{font-size:27px;color:var(--teal)}

.table-scroll .comparison{min-width:1050px;border:0;border-radius:0}

.comparison .product-name{font-weight:700;color:var(--navy)}

.comparison .format-label{white-space:nowrap}

.comparison .yes{color:#246b53;font-weight:700}

.comparison .no{color:#8b5d36;font-weight:700}
@media (max-width:980px){
  
  .hero-grid,.product-hero-grid,.inside-layout,.two-col{grid-template-columns:1fr}
  
  .system-grid,.product-grid,.product-grid.grid-4,.detail-grid,.workflow,.learn-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  
  .wrap{padding:0 18px}
  
  .band{padding:54px 0}
  
  .trust-row,.system-grid,.product-grid,.product-grid.grid-4,.detail-grid,.workflow,.decision-grid,.learn-grid{grid-template-columns:1fr}
  
  .section-heading{display:block}
  
  .section-heading p{margin-top:12px}
  
  .product-hero h1{font-size:34px}
  
  .comparison{font-size:14px}
  
  .comparison{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  
  .comparison th,.comparison td{padding:12px}
  
  .comparison th,.comparison td{min-width:126px}
}
@media(max-width:900px){
  
  .state-watermark{display:none}
}
@media (max-width:1100px){
  
  .product-detail-grid{grid-template-columns:340px 1fr}
  
  .product-detail-grid .buybox{grid-column:1 / -1}
}
@media (max-width:980px){
  
  .sample-gallery-five{grid-template-columns:repeat(2,minmax(0,1fr))}
  
  .sample-gallery-five .sample-card,.sample-gallery-five .sample-card:nth-child(4),.sample-gallery-five .sample-card:nth-child(5){grid-column:auto}
  
  .product-detail-grid{grid-template-columns:1fr}
  
  .product-detail-grid .buybox{grid-column:auto}
  
  .cover-pair{max-width:390px}
}
@media (max-width:700px){
  
  .format-grid,.case-grid,.print-product-grid,.included-strip,.reason-grid,.decision-flow,.fast-answer-grid{grid-template-columns:1fr}
  
  .hero-print h1,.product-detail-copy h1{font-size:37px}
  
  .cover-pair{min-height:455px}
  
  .cover-pair .main-cover{width:265px}
  
  .cover-pair .pack-cover{width:190px}
  
  .sample-gallery-five{grid-template-columns:1fr;padding:18px}
}

/* ---------------------------------------------------------------------------
   PROSE LAYER — opt in with <body class="sc-prose">
   The 12 pages carried over from styles.css write their content with bare
   <h1>/<h2>/<h3>/<p>; the originally-redesigned pages use explicit classes
   (.h2, .hm-*, .pe-* …) instead. Unscoped, these rules restyled every heading
   on every page — the first merge attempt did exactly that and the render diff
   caught it.

   WHY :where() AND NOT A PLAIN .sc-prose PREFIX — this is the subtle part.
   In styles.css these were bare element rules, specificity (0,0,1), so any
   scoped rule like .learn-card h3 (0,1,1) beat them. Writing ".sc-prose h3"
   raises them to (0,1,1) — a TIE with those scoped rules — and the tie breaks
   on source order, so the generic size started overriding every card and hero
   heading. :where() contributes zero specificity, so these stay at (0,0,1) and
   lose to scoped rules exactly as they always did, while still only applying
   to pages that opt in. Do not "simplify" this by removing :where().
   ------------------------------------------------------------------------ */
:where(.sc-prose){font-size:16px;line-height:1.62}
:where(.sc-prose) h1,:where(.sc-prose) h2,:where(.sc-prose) h3,:where(.sc-prose) h4{color:var(--navy);font-weight:700;line-height:1.18;letter-spacing:0}
:where(.sc-prose) h1{font-size:54px;max-width:820px}
:where(.sc-prose) h2{font-size:34px}
:where(.sc-prose) h3{font-size:21px}
:where(.sc-prose) h4{font-size:15px}
:where(.sc-prose) p{max-width:var(--measure)}
@media (max-width:900px){
  :where(.sc-prose) h1{font-size:42px}
  :where(.sc-prose) h2{font-size:29px}
}
@media (max-width:560px){
  :where(.sc-prose){font-size:15px}
  :where(.sc-prose) h1{font-size:34px}
  :where(.sc-prose) h2{font-size:26px}
}

/* ---------------------------------------------------------------------------
   PROSE LAYER — two things the carried-over pages silently depended on.
   Both were found by diffing computed styles against the old stylesheets, not
   by reading the CSS; neither is obvious from the source.

   1. THE MARGIN RESET. styles.css opened with *{box-sizing;margin:0;padding:0}.
      redesign.css only resets box-sizing, so moving these pages over handed
      every heading and paragraph its browser-default margin back and the
      Learn hub grew ~14%. Scoped here, at the same (0,0,0) specificity the
      bare * selector had.

   2. BUTTON PADDING. styles.css put padding and size directly on .btn.
      redesign.css keeps .btn structural and expects a size modifier
      (.btn-lg/.btn-md/.btn-sm). The carried pages write class="btn btn-navy"
      with no size, so their buttons collapsed to zero vertical padding.
      This restores the old default for prose pages only; the redesigned pages
      keep using explicit size modifiers.
   ------------------------------------------------------------------------ */
:where(.sc-prose) *{margin:0;padding:0}
/* :where(.btn) too — at (0,0,0) this is a DEFAULT, so any size modifier
   (.btn-nav, .btn-lg, .btn-md, .btn-sm) still wins. Written as ".btn" it was
   (0,1,0), tied with .btn-nav, and beat it on source order — which resized
   every nav button on the carried pages. */
:where(.sc-prose) :where(.btn){min-height:44px;padding:11px 18px;font-size:15px;gap:8px;border-radius:7px}

/* .lede differs between the two systems (18px/720px vs 16px/680px+38px margin).
   redesign.css wins globally, but the carried pages keep their original lede so
   this refactor stays visually neutral. Converging them is a design decision,
   not a side effect of moving stylesheets. */
:where(.sc-prose) .lede{font-size:18px;color:#34495d;max-width:var(--measure);margin:0;line-height:1.62}

/* ---------------------------------------------------------------------------
   IMPECCABLE PASS — 2026-08-08
   Applied from QA/2026-08 Impeccable Site Score/2026-08-07_IMPECCABLE_SCORE_site.md
   and the companion Article 1 report, on David's 2026-07-08 instruction to
   apply the fixes. Two findings were deliberately NOT actioned and are still
   his: the eyebrow/kicker device (13 uses; craft floor vs. house voice) and the
   public "FIVE-PAGE PILOT" framing on learn/index.html.
   ------------------------------------------------------------------------ */

/* 1 · ONE WELL ON A LEARN DOCUMENT ----------------------------------------
   The hero .wrap was 1120px while .learn-article is 860px, both margin:0 auto,
   so at 1440 the H1 sat at 184px and its own first paragraph at 314px — a
   130px step with nothing in the design explaining it. Keyed to .learn-doc,
   which the generator puts on state pages and articles but NOT on the /learn/
   hub: the hub's bands are already one consistent well at the wider size, and
   narrowing it there would create the same defect in reverse. */
.learn-doc .wrap{max-width:860px}

/* 2 · SYMMETRICAL FIGURE BREAKOUT -----------------------------------------
   Figures are 812px against a 68ch prose column, so a flush-left figure
   overhangs the prose on the right only, which reads as misalignment rather
   than as a breakout. Centering the figure on the prose column makes the
   overhang equal on both sides. The pull is computed, not hard-coded, so it
   tracks --measure.

   Why a media query and not a clamp: below ~1040px the .wrap is already at its
   max-width and the surrounding page margin is too small to absorb the pull.
   Under that width the figure stays flush left, exactly as it ships today.
   The figures themselves are NEVER resized — the approved desktop composition
   renders at the same 812px it always has. */
@media (min-width:1040px){
  .learn-doc .learn-article .learn-figure{
    /* width:100% pins the box to the article well (812px at 1440) so the
       approved figure renders at EXACTLY the scale it was signed off at.
       Without it, the negative margins hand the box more room and .learn-figure
       grows to its own 820px max-width — a 1% enlargement of artwork that is
       supposed to be frozen. Equal negative margins then center the box on the
       prose column instead of ranging it left. */
    width:100%;
    max-width:none;
    margin-left:calc((var(--measure) - 100%) / 2);
    margin-right:calc((var(--measure) - 100%) / 2);
  }
}

/* 2b · THE BOUNDARY BAND STACKS ON A LEARN DOCUMENT ------------------------
   .two-col splits the well in half. In the 1120px well that gave the boundary
   paragraph a 519px column; in the 860px well of fix 1 it collapses to 389px,
   which is 43 characters — well under the 65-75 floor and visibly cramped.
   Stacking it gives the paragraph the full well, where --measure caps it at
   68ch like every other paragraph on the page, and keeps one left edge from
   the breadcrumb to the footer. This is what the band already does below
   900px, so it is the same layout the design already ships, applied one
   breakpoint wider. The /learn/ hub keeps its two-column bands: it has no
   .learn-doc class and its well is unchanged. */
.learn-doc .two-col{grid-template-columns:1fr;gap:22px}

/* 3 · SKIP LINK ------------------------------------------------------------
   Fourteen focusable elements preceded the H1 on every page. Off-screen until
   focused, so no visual change. Emitted by generate-learn-pages.py; the
   fifteen non-generated pages still need it (tracked, not done here). */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--navy);color:#fff;padding:12px 18px;
  font-size:14px;font-weight:600;border-radius:0 0 6px 0}
.skip-link:focus{left:0;color:#fff}

/* 4 · NAV HIT BOXES --------------------------------------------------------
   Nav links measured 23px tall at 1440 and 31px at 390, against a 44px
   minimum, in a row where they are adjacent. Vertical padding only — no
   min-height and no display change — so the links stay inline boxes and the
   .active underline keeps hugging its own text instead of dropping to the
   bottom of a taller flex box. 14px Archivo sets a ~20px line box, so 12+12
   lands the hit box at ~44px inside a header that is already 70px tall. */
.site-nav > a:not(.btn){padding:12px 0}
.site-nav > a.active{padding-bottom:10px}

/* 5 · BROWSER SURFACES -----------------------------------------------------
   ::selection, caret, scrollbar, underline offset and reduced-motion were all
   at browser default site-wide. Themed from the existing palette; no new
   color value is introduced. */
::selection{background:var(--teal-pale);color:var(--navy)}
html{caret-color:var(--teal);scrollbar-color:var(--teal-light) var(--paper-light)}
a{text-underline-offset:.18em;text-decoration-thickness:from-font}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---- Notebook + Compass bundle box (inside the notebook buy boxes; 2026-08-16) ---- */
.bundle-box{border:1px solid var(--teal);border-radius:8px;background:var(--paper);padding:16px 18px}
.bundle-box-kicker{font-family:var(--font-label);font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--teal);margin:0 0 6px}
.bundle-box h4{font-family:var(--font-display);font-size:19px;line-height:1.25;font-weight:700;color:var(--navy);margin:0 0 6px}
.bundle-box p{font-size:14px;line-height:1.5;color:var(--ink);margin:0 0 12px}
.bundle-box select{width:100%;min-height:46px;border-radius:7px;border:1px solid var(--hairline);background:#fff;color:var(--navy);font-family:inherit;font-size:15px;font-weight:600;padding:9px 12px;margin-bottom:10px}
.bundle-box .btn{width:100%;justify-content:center;min-height:46px}
.bundle-box .bundle-alt{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* ---- WATCH strip (.ws-*) — the custody explainer series, surfaced on home, custody, print
   custody and the learn state pages. Markup comes only from tools/watch_strip.py. 2026-08-17. */
.ws{background:var(--white);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:72px 64px}
.ws-head{max-width:760px;margin:0 0 30px}
.ws-head h2{font-size:31px;font-weight:700;color:var(--navy);letter-spacing:-.6px;line-height:1.2;margin:0 0 10px}
.ws-lede{font-size:16px;line-height:1.55;color:var(--ink);margin:0}
.ws-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:32px;align-items:start}
.ws-main{min-width:0}
.ws-player{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:6px;border:1px solid var(--hairline);background:var(--navy)}
.ws-note{font-size:13.5px;color:var(--muted);margin-top:12px}
.ws-note b{color:var(--navy);font-weight:700}
.ws-list{list-style:none;margin:0;padding:0;border:1px solid var(--hairline);border-radius:6px;overflow:hidden;background:var(--paper)}
.ws-list li+li{border-top:1px solid var(--hairline)}
.ws-list a{display:grid;grid-template-columns:88px auto 1fr auto;gap:12px;align-items:center;padding:8px 12px 8px 8px;text-decoration:none;color:var(--navy);transition:background .15s}
.ws-list a:hover,.ws-list a:focus-visible{background:var(--white)}
.ws-list img{display:block;width:88px;height:auto;aspect-ratio:16/9;border-radius:3px;border:1px solid var(--hairline);object-fit:cover}
.ws-num{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:12px;font-weight:700;color:var(--teal);letter-spacing:.06em}
.ws-t{font-size:14.5px;font-weight:600;line-height:1.3}
.ws-d{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ws-all{margin-top:26px}
.ws-all .btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 24px;font-size:15px;text-decoration:none;border-radius:6px}
.ws-list a,.ws-list a:hover{text-decoration:none}
.ws-learn{padding:52px 0;border-top:0;border-bottom:0;background:transparent}
.ws-learn .ws-head h2{font-size:26px}
@media (max-width:1000px){.ws{padding:56px 32px}.ws-grid{grid-template-columns:1fr;gap:22px}}
@media (max-width:640px){.ws{padding:44px 20px}.ws-head h2{font-size:25px}.ws-list a{grid-template-columns:72px auto 1fr auto;gap:10px}.ws-list img{width:72px}.ws-t{font-size:13.5px}}