/* ==========================================================================
   sm-content.css — the ShirtMath content-page design system.

   MASTER THEME (BIBLE B20), re-extracted 2026-08-25 from the LIVE rendered
   homepage (the "home-v2" navy template) rather than from the superseded
   :root block. Every value below was sampled from a real rendered element.

   Two rules make this file safe to load on ANY page, including the app:
     1. Every selector is either an .sm-* class or scoped inside .sm-doc.
        It cannot collide with, or be collided with by, application CSS.
     2. It carries its own typography and surfaces, so a content page does
        NOT need the 126KB application stylesheet. That import is what put
        four numbered steps into four unreadable columns.
   ========================================================================== */

:root{
  /* surfaces */
  --sm-page:#FAFAF7;        /* page background */
  --sm-tint:#F5F8FC;        /* section tint */
  --sm-card:#FFFFFF;
  --sm-line:#D9E3EC;        /* borders + rules */
  --sm-line-soft:#EDF2F7;
  --sm-deep:#061B30;        /* deep navy: wordmark, hero, footer */

  /* ink */
  --sm-ink:#102A43;         /* headings + primary text */
  --sm-ink-2:#4B5D71;       /* body text */
  --sm-ink-3:#617386;       /* muted / captions */

  /* accents */
  --sm-coral:#FF624F;       /* primary CTA */
  --sm-coral-ink:#E14A38;
  --sm-blue:#2F65F5;
  --sm-blue-ink:#2354D8;    /* links */
  --sm-blue-tint:#EAF2FF;
  --sm-green:#18765A;       /* match / confirmed */
  --sm-amber:#B07A12;       /* caution */

  /* type */
  --sm-serif:"Fraunces",Georgia,serif;
  --sm-body:"Karla",system-ui,-apple-system,sans-serif;
  --sm-mono:"DM Mono",ui-monospace,Menlo,monospace;

  /* geometry */
  --sm-r:16px;              /* cards */
  --sm-r-sm:10px;           /* buttons, inputs */
  --sm-wrap:1180px;
  --sm-measure:70ch;
}

/* ---------------------------------------------------------------- shell -- */
body.sm-body{
  margin:0;background:var(--sm-page);color:var(--sm-ink-2);
  font-family:var(--sm-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.sm-wrap{max-width:var(--sm-wrap);margin:0 auto;padding:0 24px}
@media(max-width:640px){.sm-wrap{padding:0 18px}}

/* --------------------------------------------------------------- header -- */
/* Content-box is the file's default, and `.sm-nav-item{width:100%}` in the
   mobile block then means 100% PLUS padding — items rendered 402px wide inside
   a 354px nav and the caret was clipped by .sm-nav's overflow:hidden. Scoped to
   the header: a global reset this late would re-size every padded element on
   every page. */
.sm-header,.sm-header *{box-sizing:border-box}
.sm-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--sm-line);
}
.sm-header-in{
  max-width:var(--sm-wrap);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:22px;min-height:64px;
}
.sm-mark{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--sm-serif);font-weight:600;font-size:20px;color:var(--sm-deep);
  letter-spacing:-.01em;white-space:nowrap;
}
.sm-mark-icon{
  width:22px;height:14px;border:1.5px solid var(--sm-blue);border-bottom-width:3px;
  border-radius:2px;display:inline-block;position:relative;flex:none;
}
.sm-mark-icon::before,.sm-mark-icon::after{
  content:"";position:absolute;top:2px;width:1.5px;height:5px;background:var(--sm-blue);
}
.sm-mark-icon::before{left:5px}.sm-mark-icon::after{right:5px}

.sm-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;flex:1}
.sm-nav-item{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 12px;border-radius:var(--sm-r-sm);border:0;background:none;
  font-family:var(--sm-body);font-size:14.5px;font-weight:600;color:var(--sm-ink);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .14s ease,color .14s ease;
}
.sm-nav-item:hover{background:var(--sm-tint);color:var(--sm-blue-ink)}
.sm-nav-item[aria-current="page"]{color:var(--sm-blue-ink)}
.sm-nav-item.is-b2b{color:var(--sm-coral-ink)}
.sm-caret{font-size:9px;opacity:.6;transform:translateY(1px)}

.sm-navgroup{position:relative}
.sm-navdrop{
  position:absolute;top:calc(100% + 8px);left:0;min-width:262px;
  background:var(--sm-card);border:1px solid var(--sm-line);border-radius:14px;
  padding:8px;box-shadow:0 18px 44px rgba(6,27,48,.13);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:70;
}
.sm-navgroup:hover .sm-navdrop,
.sm-navgroup:focus-within .sm-navdrop,
.sm-navgroup.is-open .sm-navdrop{opacity:1;visibility:visible;transform:translateY(0)}
.sm-navdrop a{
  display:block;padding:9px 12px;border-radius:9px;text-decoration:none;
  color:var(--sm-ink);font-size:14.5px;font-weight:500;line-height:1.35;
}
.sm-navdrop a:hover,.sm-navdrop a:focus{background:var(--sm-tint);color:var(--sm-blue-ink)}
.sm-dd-note{
  display:block;margin-top:2px;font-family:var(--sm-mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sm-ink-3);font-weight:400;
}
.sm-header-act{margin-left:auto;display:flex;align-items:center;gap:14px}
/* Quiet account link beside the CTA. 44px min-height is the touch floor from
   MASTER_THEME §5; it is a link and not a button so it survives JS being off. */
.sm-acct{
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  font-family:var(--sm-body);font-size:14.5px;font-weight:600;
  color:var(--sm-ink-2);text-decoration:none;white-space:nowrap;
}
.sm-acct:hover{color:var(--sm-deep);text-decoration:underline}
.sm-acct:focus-visible{outline:2px solid var(--sm-blue);outline-offset:2px;border-radius:6px}
@media(max-width:400px){.sm-header-act{gap:10px}}
.sm-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 20px;border-radius:var(--sm-r-sm);border:1px solid transparent;
  font-family:var(--sm-body);font-size:14.5px;font-weight:700;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:filter .14s ease,background .14s ease;
}
.sm-btn-primary{background:var(--sm-coral);color:#fff}
.sm-btn-primary:hover{filter:brightness(.94)}
.sm-btn-ghost{background:transparent;color:var(--sm-ink);border-color:var(--sm-line)}
.sm-btn-ghost:hover{background:var(--sm-tint)}
.sm-btn-sm{padding:8px 14px;font-size:13.5px}
/* WCAG 2.1 AA target size: every button reaches 44px on touch viewports. */
@media(max-width:1040px),(hover:none){
  .sm-btn,.sm-btn-sm{min-height:44px}
}

/* Declared BEFORE the max-width:1040px block that flips it to
   inline-flex. Same specificity, so source order decides: with this
   rule after the media query the button is display:none at every
   width and the mobile menu cannot be opened at all. */
.sm-burger{
  display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--sm-line);border-radius:var(--sm-r-sm);background:var(--sm-card);
  cursor:pointer;font-size:17px;color:var(--sm-ink);margin-left:auto;
}

@media(max-width:1040px){
  .sm-header-in{flex-wrap:wrap;gap:10px;padding:10px 18px}
  /* flex:0 0 100% — NOT width:100%. The base rule sets flex:1, whose
     flex-basis:0% beats width, so the nav shared a row with the header
     controls and opened as a narrow column beside them. */
  .sm-nav{order:3;flex:0 0 100%;gap:0;flex-direction:column;align-items:stretch;
    max-height:0;overflow:hidden;transition:max-height .2s ease}
  /* mark -> controls -> burger, so the menu button is at the outside edge.
     Only header-act keeps margin-left:auto; two auto margins would split the
     free space between the burger and the controls instead of grouping them. */
  .sm-header-act{order:1}
  .sm-burger{order:2;margin-left:0}
  .sm-nav.is-open{max-height:1400px;padding-bottom:8px}
  .sm-nav-item{width:100%;justify-content:space-between;min-height:46px}
  .sm-navdrop{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--sm-line);border-radius:0;
    padding:0 0 6px 12px;margin:0 0 4px 12px;display:none;min-width:0}
  .sm-navgroup.is-open .sm-navdrop{display:block}
  .sm-navdrop a{min-height:44px;display:flex;flex-direction:column;justify-content:center}
  .sm-burger{display:inline-flex}
}

/* ---------------------------------------------------------- breadcrumbs -- */
.sm-crumbs{
  max-width:var(--sm-wrap);margin:0 auto;padding:18px 24px 0;
  font-family:var(--sm-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sm-ink-3);
}
.sm-crumbs a{color:var(--sm-ink-3);text-decoration:none}
.sm-crumbs a:hover{color:var(--sm-blue-ink);text-decoration:underline}
.sm-crumbs .sm-sep{margin:0 8px;opacity:.6}
.sm-crumbs .sm-here{color:var(--sm-ink-2)}

/* -------------------------------------------------------------- article -- */
.sm-article{max-width:var(--sm-wrap);margin:0 auto;padding:22px 24px 72px}
@media(max-width:640px){.sm-article{padding:18px 18px 56px}}
/* One row at phone widths. Measured at 390: 354px usable, the row wanted 358.
   Recovered ~12px from gaps and button padding — nothing hidden, no label
   shortened, 44px touch targets intact, page padding left at 18px so the
   header stays aligned with the article. */
@media(max-width:480px){
  .sm-header-in{gap:8px}
  .sm-header-act{gap:10px}
  .sm-header-act .sm-btn-sm{padding:8px 12px;font-size:13px}
  .sm-acct{padding:0 2px}
}
.sm-eyebrow{
  display:inline-block;font-family:var(--sm-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sm-blue-ink);margin-bottom:10px;
}
.sm-doc h1{
  font-family:var(--sm-serif);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(32px,4.6vw,46px);line-height:1.1;color:var(--sm-ink);
  margin:0 0 16px;max-width:22ch;
}
.sm-lede{
  font-size:19px;line-height:1.55;color:var(--sm-ink-3);
  max-width:62ch;margin:0 0 30px;
}
.sm-lede a{color:var(--sm-blue-ink)}
.sm-verified{
  font-family:var(--sm-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sm-ink-3);margin:0 0 26px;padding-bottom:22px;
  border-bottom:1px solid var(--sm-line);
}

/* body copy — legacy class names from the authored bodies, scoped to .sm-doc
   so they are ours alone and nothing in the app can reach them. */
.sm-doc .prose{max-width:var(--sm-measure);font-size:16.5px;line-height:1.68;color:var(--sm-ink-2)}
/* Long unbreakable tokens (endpoint paths, headers, URLs) wrap instead of
   widening the document. `anywhere` on the inline bits so min-content shrinks
   too, which is what keeps table cells from being sized by one long word. */
.sm-doc .prose,.sm-doc .prose p,.sm-doc .prose li,.sm-doc .prose dd,
.sm-doc .prose td,.sm-doc .prose th{overflow-wrap:break-word}
.sm-doc .prose code,.sm-doc .prose b,.sm-doc .prose kbd,
.sm-doc .prose samp,.sm-doc .prose tt{overflow-wrap:anywhere}
.sm-doc .prose>*:first-child{margin-top:0}
.sm-doc .prose h2,.sm-doc h2{
  font-family:var(--sm-serif);font-weight:500;letter-spacing:-.015em;
  font-size:clamp(23px,2.7vw,29px);line-height:1.22;color:var(--sm-ink);
  margin:44px 0 12px;max-width:30ch;
}
.sm-doc .prose h3,.sm-doc h3{
  font-family:var(--sm-serif);font-weight:600;font-size:19px;color:var(--sm-ink);
  margin:30px 0 8px;
}
.sm-doc p{margin:0 0 16px}
.sm-doc .prose ul,.sm-doc .prose ol{margin:0 0 16px;padding-left:22px}
.sm-doc .prose li{margin:0 0 8px}
.sm-doc a{color:var(--sm-blue-ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(35,84,216,.32)}
.sm-doc a:hover{text-decoration-color:currentColor}
.sm-doc strong,.sm-doc b{color:var(--sm-ink);font-weight:700}
.sm-doc .mono,.sm-doc .val{font-family:var(--sm-mono)}
.sm-doc hr{border:0;border-top:1px solid var(--sm-line);margin:36px 0}

/* --------------------------------------------------------------- tables -- */
.sm-doc .tablewrap{
  overflow-x:auto;margin:22px 0;border:1px solid var(--sm-line);
  border-radius:var(--sm-r);background:var(--sm-card);
}
.sm-doc table,.sm-doc table.pom{
  width:100%;border-collapse:collapse;min-width:520px;font-size:15px;
}
.sm-doc table.pom th,.sm-doc th{
  font-family:var(--sm-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sm-ink-3);text-align:left;font-weight:500;
  padding:13px 16px;background:var(--sm-tint);border-bottom:1px solid var(--sm-line);
  white-space:nowrap;
}
.sm-doc table.pom td,.sm-doc td{
  padding:12px 16px;border-bottom:1px solid var(--sm-line-soft);color:var(--sm-ink-2);
  vertical-align:top;
}
.sm-doc td.num,.sm-doc th.num{text-align:right;font-family:var(--sm-mono);color:var(--sm-ink)}
.sm-doc tr:last-child td{border-bottom:0}
.sm-doc tbody tr:hover td{background:#FBFDFF}

/* --------------------------------------------------------------- notes --- */
.sm-doc .banner{
  background:var(--sm-tint);border:1px solid var(--sm-line);
  border-radius:var(--sm-r);padding:16px 18px;margin:22px 0;
  font-size:14.5px;line-height:1.6;color:var(--sm-ink-2);max-width:var(--sm-measure);
}
.sm-doc .banner b{color:var(--sm-ink)}
.sm-doc .banner.prov{
  background:var(--sm-blue-tint);border-color:#CFE0FF;
}
.sm-doc .banner.prov::before{
  content:"PROVENANCE";display:block;font-family:var(--sm-mono);font-size:10px;
  letter-spacing:.14em;color:var(--sm-blue-ink);margin-bottom:6px;
}
.sm-doc .banner.warn{background:#FFF8E8;border-color:#F0DFB4}
.sm-doc .banner.warn::before{
  content:"NOTE";display:block;font-family:var(--sm-mono);font-size:10px;
  letter-spacing:.14em;color:var(--sm-amber);margin-bottom:6px;
}

/* ---------------------------------------------------------------- steps -- */
/* One per row, always. The previous build inherited an application grid rule
   and rendered four steps as four 90px columns. */
.sm-doc ol.steps,.sm-doc .steps{
  list-style:none;counter-reset:sm-step;margin:24px 0;padding:0;
  display:block;max-width:var(--sm-measure);
}
.sm-doc ol.steps>li,.sm-doc .steps>li{
  counter-increment:sm-step;position:relative;
  display:block;width:auto;float:none;clear:both;
  padding:0 0 20px 58px;margin:0;
}
.sm-doc ol.steps>li::before,.sm-doc .steps>li::before{
  content:counter(sm-step);position:absolute;left:0;top:-2px;
  width:38px;height:38px;border-radius:50%;
  background:var(--sm-blue-tint);border:1px solid #CFE0FF;color:var(--sm-blue-ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sm-mono);font-size:14px;
}
.sm-doc ol.steps>li b,.sm-doc .steps>li b{
  display:block;margin-bottom:4px;color:var(--sm-ink);font-size:16.5px;
}

/* ------------------------------------------------------------------ faq -- */
.sm-doc .faq{margin:22px 0;max-width:var(--sm-measure)}
.sm-doc .faq details{
  border:1px solid var(--sm-line);border-radius:var(--sm-r);
  background:var(--sm-card);margin:0 0 10px;overflow:hidden;
}
.sm-doc .faq details[open]{border-color:#CFE0FF}
.sm-doc .faq summary{
  cursor:pointer;padding:16px 18px;font-weight:700;color:var(--sm-ink);
  font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:14px;
}
.sm-doc .faq summary::-webkit-details-marker{display:none}
.sm-doc .faq summary::after{content:"+";font-family:var(--sm-mono);color:var(--sm-blue-ink);flex:none}
.sm-doc .faq details[open] summary::after{content:"−"}
.sm-doc .faq .faq-a{padding:0 18px 16px;color:var(--sm-ink-2);font-size:15.5px;line-height:1.65}

/* ---------------------------------------------------------------- cards -- */
.sm-doc .hubgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:16px;margin:26px 0;max-width:100%;
}
.sm-doc .hubgrid .card{
  display:block;background:var(--sm-card);border:1px solid var(--sm-line);
  border-radius:var(--sm-r);text-decoration:none;color:inherit;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.sm-doc .hubgrid .card:hover{
  border-color:#BFD4FF;box-shadow:0 12px 30px rgba(6,27,48,.08);transform:translateY(-2px);
}
.sm-doc .hubgrid .card .pad{display:block;padding:20px 22px}
.sm-doc .hubgrid .card b{
  display:block;font-family:var(--sm-serif);font-size:19px;font-weight:600;
  color:var(--sm-ink);margin-bottom:7px;
}
.sm-doc .hubgrid .card span{display:block;font-size:14.5px;line-height:1.55;color:var(--sm-ink-3)}
.sm-doc .hubgrid .card .kw{
  margin-top:12px;font-family:var(--sm-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sm-blue-ink);
}

/* ----------------------------------------------------------------- tool -- */
.sm-doc .tool{
  background:var(--sm-card);border:1px solid var(--sm-line);border-radius:var(--sm-r);
  padding:24px;margin:24px 0;max-width:var(--sm-measure);
}
.sm-doc .tool label{
  display:block;font-family:var(--sm-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sm-ink-3);margin:14px 0 6px;
}
.sm-doc .tool input,.sm-doc .tool select{
  width:100%;max-width:240px;padding:11px 13px;border:1px solid var(--sm-line);
  border-radius:var(--sm-r-sm);background:var(--sm-page);font-family:var(--sm-mono);
  font-size:16px;color:var(--sm-ink);
}
.sm-doc .tool input:focus,.sm-doc .tool select:focus{
  outline:2px solid var(--sm-blue);outline-offset:1px;border-color:var(--sm-blue);
}
.sm-doc .tool button{
  margin-top:16px;padding:11px 20px;border-radius:var(--sm-r-sm);border:0;
  background:var(--sm-coral);color:#fff;font-family:var(--sm-body);font-weight:700;
  font-size:14.5px;cursor:pointer;min-height:44px;
}
.sm-doc .tool .tool-out{
  margin-top:20px;padding:18px;border-radius:var(--sm-r-sm);
  background:var(--sm-tint);border:1px solid var(--sm-line);font-size:15px;line-height:1.6;
}
.sm-doc .tool .tool-out .val{font-family:var(--sm-mono);color:var(--sm-ink);font-weight:500}
.sm-doc .conf{
  display:inline-block;font-family:var(--sm-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;padding:4px 9px;border-radius:6px;margin-left:8px;
  background:var(--sm-blue-tint);color:var(--sm-blue-ink);border:1px solid #CFE0FF;
}

/* ------------------------------------------------------------- diagrams -- */
.sm-doc .diagram{
  max-width:600px;margin:24px 0;padding:18px;background:var(--sm-card);
  border:1px solid var(--sm-line);border-radius:var(--sm-r);
}
.sm-doc .diagram svg{width:100%;height:auto;display:block}

/* ------------------------------------------------------------------ cta -- */
.sm-doc .scan-cta{
  margin:52px 0 0;padding:28px 30px;border-radius:var(--sm-r);
  background:var(--sm-deep);color:#fff;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between;
  max-width:var(--sm-measure);
}
.sm-doc .scan-cta p{margin:0;font-size:16.5px;line-height:1.5;max-width:46ch;color:rgba(255,255,255,.86)}
.sm-doc .scan-cta b{color:#fff}
.sm-doc .scan-cta a{
  background:var(--sm-coral);color:#fff;text-decoration:none;
  padding:13px 22px;border-radius:var(--sm-r-sm);font-weight:700;font-size:15px;
  white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;
}
.sm-doc .scan-cta a:hover{filter:brightness(.94)}

/* --------------------------------------------------------------- footer -- */
.sm-footer{background:var(--sm-deep);color:rgba(255,255,255,.72);margin-top:72px;
  padding:52px 0 34px;font-size:14.5px}
.sm-footer-top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.13);
}
@media(max-width:860px){.sm-footer-top{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){.sm-footer-top{grid-template-columns:1fr}}
.sm-footer-mark{font-family:var(--sm-serif);font-size:21px;font-weight:600;color:#fff;margin-bottom:10px}
.sm-footer-blurb{margin:0;max-width:38ch;line-height:1.6}
.sm-footer h3{
  font-family:var(--sm-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 12px;font-weight:400;
}
.sm-footer ul{list-style:none;margin:0;padding:0}
.sm-footer li{margin:0 0 9px}
.sm-footer a{color:rgba(255,255,255,.82);text-decoration:none}
.sm-footer a:hover{color:#fff;text-decoration:underline}
.sm-footer-note{margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.55);line-height:1.55}
.sm-footer-bottom{padding-top:26px}
.sm-footer-legal{margin:0 0 12px;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.55);max-width:96ch}
.sm-footer-copy{margin:0 0 6px;font-size:12.5px;color:rgba(255,255,255,.55)}
.sm-footer-copy a{color:rgba(255,255,255,.72)}

/* ----------------------------------------------------------- a11y/print -- */
.sm-skip{
  position:absolute;left:-9999px;top:0;background:var(--sm-card);color:var(--sm-ink);
  padding:12px 18px;border-radius:0 0 var(--sm-r-sm) 0;z-index:200;
}
.sm-skip:focus{left:0}
.sm-doc a:focus-visible,.sm-nav-item:focus-visible,.sm-navdrop a:focus-visible,
.sm-btn:focus-visible,.sm-burger:focus-visible{
  outline:2px solid var(--sm-blue);outline-offset:2px;border-radius:4px;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  .sm-header,.sm-footer,.sm-doc .scan-cta{display:none}
  .sm-doc{max-width:none}
}

/* ==========================================================================
   SEO REBUILD 2026-08 — hero band, point-of-measure grid, explore cards,
   calculator card. Tokens only; no new colour is introduced.
   ========================================================================== */

/* The navy hero. This IS the page's visual anchor: on both rebuilt pages it
   is the one block that contrasts with everything around it. It carries the
   h1, so those pages set hero_in_body. */
.sm-doc .sm-hero{
  background:var(--sm-deep);border-radius:var(--sm-r);
  padding:34px 26px;margin:0 0 30px;
  display:grid;grid-template-columns:1fr;gap:26px;align-items:center;
}
@media(min-width:880px){
  .sm-doc .sm-hero{grid-template-columns:1.02fr .98fr;padding:44px 42px;gap:38px}
}
.sm-doc .sm-hero h1{color:#FFFFFF;margin:0 0 14px}
.sm-doc .sm-hero-eyebrow{
  display:block;font-family:var(--sm-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#9FB6CD;margin:0 0 12px;
}
.sm-doc .sm-hero-lede{
  color:#D4E0EC;font-size:16.5px;line-height:1.6;margin:0;max-width:52ch;
}
.sm-doc .sm-hero-lede b{color:#FFFFFF}
.sm-doc .sm-hero-fig{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:12px;
}
.sm-doc .sm-hero-fig svg{display:block;width:100%;height:auto}
.sm-doc .sm-hero + .sm-verified{margin:0 0 26px}

/* Eight measurement sections, 2-up on desktop. Layout only: every cell still
   carries a real h2 and full body copy. */
.sm-doc .sm-pom-grid{
  display:grid;grid-template-columns:1fr;gap:24px;margin:26px 0 34px;
}
@media(min-width:768px){
  .sm-doc .sm-pom-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 26px}
}
.sm-doc .sm-pom-cell{
  border:1px solid var(--sm-line);border-radius:var(--sm-r);
  background:var(--sm-card);padding:18px 20px 6px;min-width:0;
}
.sm-doc .sm-pom-cell img{
  display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--sm-line-soft);background:#FFFFFF;margin:0 0 16px;
}
.sm-doc .sm-pom-cell h2{margin:0 0 12px;font-size:1.16rem}
.sm-doc .sm-pom-cell .prose{max-width:none;font-size:15.6px}

/* Explore-more row. Typographic by design: no image slot. */
.sm-doc .sm-explore{
  display:grid;grid-template-columns:1fr;gap:16px;margin:22px 0 34px;
}
@media(min-width:768px){
  .sm-doc .sm-explore{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.sm-doc .sm-explore a{
  display:block;border:1px solid var(--sm-line);border-radius:var(--sm-r);
  background:var(--sm-card);padding:20px 22px;text-decoration:none;min-width:0;
}
.sm-doc .sm-explore a:hover{border-color:var(--sm-blue);background:var(--sm-blue-tint)}
.sm-doc .sm-explore .t{
  display:block;font-family:var(--sm-serif);font-size:1.08rem;
  color:var(--sm-ink);margin:0 0 8px;line-height:1.3;
}
.sm-doc .sm-explore .d{
  display:block;color:var(--sm-ink-2);font-size:14.6px;line-height:1.55;margin:0 0 12px;
}
.sm-doc .sm-explore .r{
  display:block;font-family:var(--sm-mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sm-ink-3);
}

/* The calculator, as a discrete instrument rather than a full-width form. */
.sm-doc .sm-calc{
  max-width:420px;margin:26px auto 30px;border:1px solid var(--sm-line);
  border-radius:var(--sm-r);background:var(--sm-card);padding:20px 20px 22px;
  box-shadow:0 2px 10px rgba(16,42,67,.06);
}
.sm-doc .sm-calc-units{display:flex;gap:6px;justify-content:flex-end;margin:0 0 16px}
.sm-doc .sm-calc-units button{
  font-family:var(--sm-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border:1px solid var(--sm-line);background:var(--sm-page);
  color:var(--sm-ink-2);border-radius:var(--sm-r-sm);cursor:pointer;
}
.sm-doc .sm-calc-units button[aria-pressed="true"]{
  background:var(--sm-ink);border-color:var(--sm-ink);color:#FFFFFF;
}
.sm-doc .sm-calc-tabs{display:flex;gap:6px;margin:0 0 18px}
.sm-doc .sm-calc-tabs button{
  flex:1;min-width:0;font-family:var(--sm-body);font-size:13.4px;line-height:1.3;
  padding:10px 10px;border:1px solid var(--sm-line);background:var(--sm-page);
  color:var(--sm-ink-2);border-radius:var(--sm-r-sm);cursor:pointer;
}
.sm-doc .sm-calc-tabs button[aria-selected="true"]{
  background:var(--sm-blue-tint);border-color:var(--sm-blue);color:var(--sm-ink);font-weight:700;
}
.sm-doc .sm-calc label{
  display:block;font-family:var(--sm-mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sm-ink-3);margin:0 0 6px;
}
.sm-doc .sm-calc input{
  width:100%;box-sizing:border-box;font-family:var(--sm-mono);font-size:16px;
  padding:10px 12px;border:1px solid var(--sm-line);border-radius:var(--sm-r-sm);
  background:var(--sm-page);color:var(--sm-ink);margin:0 0 14px;
}
.sm-doc .sm-calc input:focus{outline:2px solid var(--sm-blue);outline-offset:1px}
.sm-doc .sm-calc-out{
  border-top:1px solid var(--sm-line);margin:4px 0 0;padding:16px 0 0;
  font-size:15px;line-height:1.6;color:var(--sm-ink-2);
}
.sm-doc .sm-calc-out .prose{max-width:none;font-size:15px}
.sm-doc .sm-calc-out p{margin:0 0 10px}
.sm-doc .sm-calc-out .val{color:var(--sm-ink);font-weight:700}
.sm-doc .sm-calc-out .conf{
  display:inline-block;font-family:var(--sm-mono);font-size:10.5px;letter-spacing:.1em;
  padding:2px 7px;border-radius:4px;background:var(--sm-blue-tint);color:var(--sm-blue-ink);
}
.sm-doc .sm-calc-hint{font-size:13.4px;color:var(--sm-ink-3);margin:0 0 14px;line-height:1.5}