/* ============================================================================
   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 colours 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 colour.
     - --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 live here; page-specific section styles live in each
   page's own <style> block, prefixed with that page's slug. */

:root{
  --navy:#0B2D4A;
  --teal:#2F6B73;
  --teal-light:#8CB7B9;
  --teal-pale:#BFDCDA;
  --ink:#4B5C6B;
  --muted:#748494;
  --dark-muted:#8CA3B5;
  --dark-body:#B9C9D2;
  --dark-body-teal:#D7E6E4;
  --cream:#EFE9DD;
  --paper:#ECEFF1;
  --paper-light:#F5F6F7;
  --hairline:#E3E6E8;
  --white:#fff;
  --maxw:1120px;
  --measure:720px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);font-family:'Inter',-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)}
.site-footer .disclaimer{position:relative;font-size:12.5px;line-height:1.6;color:var(--dark-muted);max-width:760px;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}

.learn-callout{max-width:800px;
  margin-top:24px;
  padding:16px 18px;
  background:#fff;
  border-left:4px solid var(--teal);
  border-top:1px solid var(--hairline);
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  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-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}

.resource-list,.learn-steps{margin:14px 0 0 22px;max-width:760px}

.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}

.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}