/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Epilogue Fallback";src:local("Arial");font-weight:400;size-adjust:113.02%;ascent-override:69.90%;descent-override:20.79%;line-gap-override:0.00%}
@font-face{font-family:"Epilogue Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:108.66%;ascent-override:72.70%;descent-override:21.63%;line-gap-override:0.00%}
@font-face{font-family:"Rubik Fallback";src:local("Arial");font-weight:400;size-adjust:106.08%;ascent-override:88.14%;descent-override:23.57%;line-gap-override:0.00%}
@font-face{font-family:"Rubik Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:104.74%;ascent-override:89.27%;descent-override:23.87%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   Erecpowerdaily - erecpowerdaily.com
   Component system taken from the UI reference at sugarresiet.com: centred
   section heads, flat cards in a
   2/3-up grid, numbered steps, a <details> FAQ, a three-tier plan row and a
   quiet two-paragraph answer block under the H1.

   Colour is NOT taken from that reference (its palette is aubergine and
   spring green). It is derived from the product bottle in assets/: a gloss
   black body, an oxblood-crimson label band sampled at #8B1F31 / #7A222E, and
   a white wordmark. Steel is the second ramp, taken from the silver type on
   the label rather than invented.

   Type: Epilogue (display) + Rubik (body).

   Chrome for this site, all of it deliberately unlike row 3 of the ledger
   (alphaerecdaily.com, which shares this reference):
     - NO utility strip; a scroll-progress rail across the top of the bar
     - the masthead is MIRRORED: CTA and menu left, wordmark RIGHT. No other
       site on the estate puts the wordmark on the right
     - a deep graphite WEDGE behind the product side only, warm off-white
       everywhere else, so the dark is behind the bottle rather than the page
     - PRODUCT LEFT, copy right, free-standing bottle over a cast shadow
     - hard 2px corners, offset block shadows instead of blur
     - single wide footer column, oversized wordmark, links in horizontal rows
     - motion is a left-to-right clip wipe plus a drawn rule, never a fade-up
   ========================================================================== */

/* ---- DESIGN TOKENS -------------------------------------------------------- */
:root{
  /* ---- ground: warm off-white ---- */
  --paper:#fbf8f4;
  --paper-tint:#f2ece3;
  --paper-card:#ffffff;
  --paper-deep:#e7ded2;

  /* ---- graphite, from the gloss black bottle body ---- */
  --graphite:#16181c;
  --graphite-2:#212429;
  --graphite-3:#2d3238;
  --graphite-line:#3a4048;

  /* ---- ink ---- */
  --ink:#191513;
  --ink-dk:#100d0c;
  --ink-soft:#332c28;
  --muted:#4a423d;
  --faint:#5d534c;
  --line:#ded3c5;
  --line-soft:#ece4d9;

  /* ---- accent, from the oxblood band on the bottle ---- */
  --accent:#a01f35;
  --accent-deep:#6e1526;
  --accent-bright:#c22a42;
  --accent-tint:#fbeff1;
  --accent-line:#e9d3d8;
  --accent-glow:rgba(160,31,53,.2);

  /* ---- secondary: steel, from the silver wordmark ---- */
  --gold:#5c6773;
  --gold-deep:#3a434e;
  --gold-soft:#eef1f4;
  --gold-line:#c3cbd4;

  /* ---- type ---- */
  --display:'Epilogue','Epilogue Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Epilogue','Epilogue Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Rubik','Rubik Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --wrap:1150px;
  --measure:760px;
  --measure-wide:980px;
  --r:2px;
  --r-s:2px;
  --r-l:3px;
  --radius:2px;
  --shadow:5px 5px 0 var(--accent-line);
  --shadow-sm:3px 3px 0 var(--paper-deep);
  --shadow-lg:7px 7px 0 var(--graphite);
}

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:120px}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--muted);
  line-height:1.72;-webkit-font-smoothing:antialiased;font-size:1.0625rem}
img,svg,table,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--ink);line-height:1.16;
  font-weight:700;letter-spacing:-.018em}
b,strong{color:var(--ink-soft);font-weight:600}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:10px 16px;z-index:9999}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}

/* ---- 1. SCROLL-PROGRESS RAIL: across the TOP of the masthead ------------ */
/* There is deliberately no utility strip on this site. The role, lot,
   guarantee and order-support number are carried by the hero pill, the hero
   fact pills, the lot tag beside the bottle and the footer NAP block. */
.nav__prog{height:3px;background:var(--paper-deep);width:100%}
.nav__prog__f{display:block;height:100%;width:0;background:var(--accent);
  transition:width .08s linear}

/* ---- 2. MASTHEAD, MIRRORED: CTA and menu LEFT, wordmark RIGHT ----------- */
.nav{position:sticky;top:0;z-index:900;background:var(--paper);
  border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;justify-content:flex-start;gap:22px;
  padding-block:12px;position:relative;flex-wrap:nowrap}
.nav.slim .nav__row{padding-block:7px}
.brand{display:inline-flex;align-items:flex-end;gap:0;flex-direction:column;
  text-align:right;position:relative;padding-inline:14px;margin-left:auto;
  flex:none}
.brand:hover{text-decoration:none}
.brand::before,.brand::after{content:'';position:absolute;top:2px;bottom:2px;
  width:8px;border:2px solid var(--accent)}
.brand::before{left:0;border-right:0}
.brand::after{right:0;border-left:0}
.brand__firm{display:block;font-family:var(--sans);font-size:.625rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.brand__prod{display:flex;align-items:center;gap:7px;font-family:var(--display);
  font-size:1.5rem;font-weight:800;color:var(--ink);line-height:1.05;
  letter-spacing:-.03em;white-space:nowrap;text-transform:uppercase}
.brand__prod span{color:var(--accent)}
.nav.slim .brand__prod{font-size:1.25rem}
/* the bolt: the mark's glyph, drawn rather than placed, so the bracket
   construction keeps its icon without an <svg> inside .brand */
.brand__bolt{width:13px;height:20px;flex:none;background:var(--accent);
  clip-path:polygon(58% 0,20% 54%,44% 54%,36% 100%,78% 42%,52% 42%)}

.navmenus{flex:0 1 auto;min-width:0}
.menu{display:flex;align-items:center;justify-content:flex-start;gap:0;
  flex-wrap:nowrap}
.menu li{display:flex}
.menu a{display:inline-flex;align-items:center;font-family:var(--sans);
  font-size:.875rem;font-weight:500;color:var(--ink-soft);white-space:nowrap;
  padding:8px 14px;position:relative}
.menu a::after{content:"";position:absolute;left:14px;right:100%;bottom:2px;
  height:2px;background:var(--accent);transition:right .22s ease}
.menu a:hover{color:var(--accent-deep);text-decoration:none}
.menu a:hover::after,.menu a[aria-current]::after{right:14px}
.nav__cta{flex:none;order:-1}
.nav__cta .btn{padding:9px 20px;font-size:.875rem}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;
  padding:10px 7px;flex:none}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0}

/* ---- 3. BUTTONS: hard corners, an offset block instead of a blur --------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:.9375rem;line-height:1.2;
  padding:14px 26px;border-radius:2px;border:1px solid transparent;
  cursor:pointer;text-align:center;letter-spacing:.01em;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{text-decoration:none;transform:translate(-2px,-2px)}
.btn--cta{background:var(--accent);color:#fff;box-shadow:4px 4px 0 var(--graphite)}
.btn--cta:hover{background:var(--accent-deep);box-shadow:6px 6px 0 var(--graphite)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink-soft);
  box-shadow:4px 4px 0 var(--paper-deep)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-deep);
  box-shadow:6px 6px 0 var(--accent-line)}
.btn--gold{background:var(--gold-deep);color:#fff;box-shadow:4px 4px 0 var(--gold-line)}
.btn--gold:hover{background:var(--graphite)}
.btn--lg{padding:17px 32px;font-size:1.0625rem}
.btn--block{display:flex;width:100%}

/* ---- 4. HERO: a graphite WEDGE on the product side, product LEFT --------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible;padding-block:0}
/* The wedge. It bleeds off the left edge of the screen and stops just short of
   the copy column, which stays on the warm off-white ground: the dark is behind
   the PRODUCT only, not behind the page. Its right edge is computed from the
   same numbers the grid uses, so it tracks the media column at every width
   instead of being a guessed percentage:
       gutter to grid  = (100% - wrap)/2 + 22px
       media column    = (wrap - 44px - 52px gap) * 0.86/2
   and it stops 28px short of that, leaving a clean strip before the copy.
   The rotating vein-trace the motif draws on .hero__media::before sits at
   z-index 1 and therefore paints ON the wedge, which is where it belongs.

   It is written as one calc rather than three locally-scoped custom
   properties, because validate.py only knows about variables declared in the
   root token block and reads a local --name as undefined. The word for that
   block is spelled out here on purpose: brand_marks.palette() and
   hero_motifs.palette() both split this file on that selector, so a second
   literal occurrence anywhere in the file truncates what they parse and they
   fall back to a default accent with no error at all. */
.hero__ground{position:absolute;top:0;bottom:0;left:0;
  width:calc((100% - min(1150px,100%))/2 + 22px
             + (min(1150px,100%) - 96px) * 0.43 + 28px);
  background:linear-gradient(196deg,var(--graphite-2),var(--graphite) 72%);
  clip-path:polygon(0 0,100% 0,calc(100% - 128px) 100%,0 100%);
  z-index:0;pointer-events:none}
.hero__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:52px;align-items:start;padding-block:56px 74px;position:relative;z-index:2}
/* The copy column must sit above the vein trace. .hero__media::before is
   z-index:1 and 150% as wide as its column, so it reaches ~100px into the gap;
   a non-positioned copy column would be painted UNDER it. */
.hero__copy{position:relative;z-index:3}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--paper-card);
  border:1px solid var(--line);color:var(--ink-soft);font-weight:500;
  font-size:.8438rem;padding:7px 15px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:var(--shadow-sm)}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin:20px 0 0;font-weight:800;
  line-height:1.06;color:var(--ink);letter-spacing:-.03em}
.hero h1 span{color:var(--accent);display:block}
.hero h1 small{display:block;font-family:var(--sans);font-size:.9375rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:14px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.hero__sub{margin:20px 0 0;font-size:1.0625rem;max-width:58ch;color:var(--muted)}

.ticks{margin:22px 0 0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;
  color:var(--ink-soft)}
.ck{flex:none;width:21px;height:21px;background:var(--accent);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:.6875rem;font-weight:700;margin-top:3px}

.pay{display:flex;align-items:center;gap:13px;margin:20px 0 0;
  font-size:.9062rem;color:var(--faint)}
.pay img{width:210px;height:37px;object-fit:contain}

.factpills{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.factpills li{border:1px solid var(--line);background:var(--paper-card);
  padding:7px 14px;font-size:.9062rem;color:var(--faint)}
.factpills li b{color:var(--ink)}

.figures{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0 0;
  border:1px solid var(--line);background:var(--paper-card);
  box-shadow:var(--shadow-sm)}
.figures div{padding:16px 18px}
.figures div+div{border-left:1px solid var(--line-soft)}
.figures b{display:block;font-family:var(--display);font-size:1.85rem;line-height:1;
  color:var(--accent-deep);font-weight:800}
.figures span{display:block;margin-top:6px;font-size:.9062rem;
  color:var(--faint);line-height:1.45}

/* the product: free-standing, over a cast shadow, no card */
.hero__media{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.hero__shot{position:relative;z-index:2;width:100%;display:flex;
  justify-content:center}
.hero__shot img{width:auto;max-width:100%;max-height:440px;object-fit:contain;
  filter:drop-shadow(0 26px 26px rgba(0,0,0,.6))}
.hero__shot::after{content:'';position:absolute;left:50%;bottom:-16px;
  width:62%;height:26px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0) 78%);
  z-index:-1}
.hero__tag{margin-top:30px;background:var(--accent);color:#fff;font-size:.9062rem;
  font-weight:600;letter-spacing:.1em;padding:7px 16px;white-space:nowrap;
  position:relative;z-index:2}
.floaty{position:absolute;background:var(--paper);border:1px solid var(--line);
  padding:11px 15px;box-shadow:var(--shadow-lg);font-size:.9375rem;font-weight:600;
  color:var(--ink);z-index:3;line-height:1.25}
.floaty small{display:block;color:var(--accent);font-size:.9062rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;margin-top:4px}
.floaty--tl{top:6px;left:-8px}
.floaty--br{bottom:70px;right:-8px}

/* The copy column runs past 1,250px, so a vertically centred bottle ends up
   more than half a screen down and the visitor never sees the product in the
   first screenful. The grid is top-aligned and the bottle sits at the top of
   the wedge, where the wedge is widest.

   No sticky rail here on purpose. The wedge is anchored to .hero, and a sticky
   media column would slide the bottle down the page while the wedge stayed
   put, which looks like a bug rather than an effect. The image is capped by
   viewport height so it still scales down on a short laptop screen rather than
   being switched off by a min-height query (pitfalls 4 and 15). */
@media(min-width:1025px){
  .hero__media{justify-content:flex-start;padding-top:6px}
  .hero__shot img{max-height:min(440px,calc(100vh - 300px));min-height:200px}
}

.hero__rating{display:flex;align-items:center;gap:9px;margin:18px 0 0;
  font-size:.9375rem;color:var(--faint);flex-wrap:wrap}
.hero__rating b{color:var(--ink)}
.rev__stars{color:var(--accent-bright);letter-spacing:1px}

/* ---- 5. QUICK ANSWER (AEO) ---------------------------------------------- */
.answer{background:var(--paper-card);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);padding:21px 24px;margin:22px 0 0}
/* In the hero the answer is not a card: the reference runs it as two flowing
   paragraphs under the H1, and this hero sits on a dark ground where a white
   card would read as a second product shot. */
.hero .answer{background:none;border:0;box-shadow:none;padding:0 0 0 18px;
  margin:20px 0 0;border-left:3px solid var(--accent)}
.hero .answer .qtag{display:none}
.hero .answer p{font-size:1.0625rem;color:var(--muted);margin:0 0 .85em;
  max-width:58ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink);font-weight:600}
.answer .qtag{display:block;font-family:var(--sans);font-weight:600;font-size:.8438rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.55em}
.answer p{margin:0;font-size:1.0625rem}
.answer p+p{margin-top:.8em}

/* ---- 6. TRUST ROW -------------------------------------------------------- */
.trust{background:var(--paper-tint);border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  gap:24px 38px;padding-block:22px}
.trust__row figure{text-align:center;max-width:132px}
.trust__row img{margin-inline:auto}
.trust__row figcaption{font-size:.9062rem;color:var(--faint);margin-top:8px;
  letter-spacing:.05em;font-weight:500;line-height:1.4}

/* ---- ABOVE-THE-FOLD RESPONSIVE -------------------------------------------
   The masthead collapse and the hero's phone ordering decide what the first
   paint looks like, so they sit ABOVE the critical marker and are inlined into
   every page head. Everything else responsive is at the foot of this file. */
@media(max-width:1180px){.menu a{padding-inline:11px;font-size:.84rem}}
@media(max-width:1040px){
  /* The menu moves into a slide-out panel that opens from the LEFT, because
     that is the side it occupies in this masthead. The wordmark stays on the
     right, where a thumb is, and the burger sits beside the CTA on the left. */
  .navmenus{position:fixed;inset:0 auto 0 0;width:min(330px,88vw);
    background:var(--paper);padding:88px 24px 26px;transform:translateX(-102%);
    transition:transform .28s ease;z-index:940;box-shadow:var(--shadow-lg);
    overflow-y:auto}
  .navmenus.open{transform:translateX(0)}
  .menu{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .menu li{display:block}
  .menu a{font-size:1rem;padding:13px 4px;width:100%;
    border-bottom:1px solid var(--line-soft)}
  .menu a::after{display:none}
  .burger{display:block;order:-2}
  .nav__row{gap:12px}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:26px;padding-block:34px 54px}
  /* display:contents promotes the copy column's children to grid items so the
     phone order can be set individually. DOM order is untouched: the Quick
     Answer still follows the H1 for parsers and for the speakable selector. */
  .hero__copy{display:contents}
  /* display:contents removes the copy column's own box, and with it the
     z-index that keeps it above the vein trace. Promote the children instead. */
  .hero__copy>*{position:relative;z-index:3}
  .hero__copy>.pill{order:1;justify-self:start}
  .hero__copy>h1{order:2}
  .hero__media{order:3}
  .hero__copy>.answer{order:4}
  .hero__copy>.hero__cta{order:5}
  .hero__copy>.hero__rating{order:6}
  .hero__copy>.pay{order:7}
  .hero__copy>.hero__sub{order:8}
  .hero__copy>.ticks{order:9}
  .hero__copy>.factpills{order:10}
  .hero__copy>.figures{order:11}
  .hero__shot img{max-height:300px}
  .hero__tag{margin-top:22px}
  .floaty{display:none}
  /* One column, so a left-hand wedge has nothing to be beside. The graphite
     moves onto the product itself as a full-bleed panel, which keeps the
     bottle on the dark ground the design slot asks for and keeps the copy on
     the warm ground where it is legible. */
  .hero__ground{display:none}
  .hero__media{background:linear-gradient(196deg,var(--graphite-2),var(--graphite) 72%);
    margin-inline:-22px;padding:30px 22px 34px;width:calc(100% + 44px)}
}
@media(max-width:700px){
  .hero h1{font-size:2.05rem}
  .figures{grid-template-columns:1fr}
  .figures div+div{border-left:0;border-top:1px solid var(--line-soft)}
}
/* At the smallest widths the masthead still has to hold three things in one
   row: burger, CTA and wordmark. Measured at 390px the wordmark ran 25px past
   the gutter, so both ends shrink rather than either being dropped. The button
   is the primary action on the page and the wordmark is the brand; neither is
   a good candidate for hiding. */
@media(max-width:430px){
  .nav__row{gap:10px}
  .nav__cta .btn{padding-inline:14px;font-size:.78rem}
  /* .nav__row .brand, not .brand: brand_marks.py appends its own
     `.brand{padding-inline:14px}` to the END of this stylesheet, after this
     media query, and at equal specificity source order would win. Two classes
     beat one wherever the rule sits. */
  .nav__row .brand{padding-inline:9px}
  .brand__firm{display:none}
  .brand__prod{font-size:1rem;gap:5px}
  .brand__bolt{width:10px;height:15px}
  /* Pull the fold up: at 390 the product panel plus a two-paragraph Quick
     Answer pushed the hero CTA to y=1226. Trimming the shot and the panel
     padding brings it back toward the ~1,100 target in hero.md. */
  .hero__shot img{max-height:250px}
  .hero__media{padding:22px 22px 24px}
  .hero__tag{margin-top:16px}
  .hero .answer{margin-top:14px}
}


/* ---- hero motif -- vein-trace ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:linear-gradient(168deg,#e9b6bb,#fbf8f4 54%,#f1d3d4)}.hero__media::before{content:'';position:absolute;left:50%;top:0;width:150%;aspect-ratio:1;translate:-50% -22%;border-radius:50%;background:repeating-conic-gradient(from 18deg,rgba(194,42,66,0.55) 0 1.6deg,transparent 1.6deg 24deg);filter:blur(10px);opacity:.5;animation:epVein 30s linear infinite;z-index:1}@keyframes epVein{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}









/*!SITE-HOME-CRIT-START*/
/* ---- HOME PAGE, FIRST SCREEN --------------------------------------------
   Design slot for this site: orbit motif, 20px cards, 14px controls, and a
   single very diffuse ambient shadow (0 22px 60px) instead of the flat
   offset block this stylesheet shipped with.

   Scope. Every selector below either starts `.hero ` -- a class that exists
   on index.html and on no other page of this site -- or is wrapped in
   body:has(.hero). Nothing here can reach the legal pages, pricing.html or
   the blog.

   Why it is ABOVE the marker even though it is paint. Not one declaration
   here moves a box: radius, shadow, background, colour, transition and one
   pseudo-element. It sits above the marker because it dresses the FIRST
   SCREEN, and the inlined critical block is what the browser paints before
   style.css arrives; below the marker the fold would paint in the old 2px
   offset-block style and then swap. Because these are paint, the inlined
   copy and the external sheet cannot disagree about layout even if one is
   momentarily stale.

   Tokens are declared on html:root -- (0,1,1) -- and not on :root, because
   modern_surface.py re-appends a plain :root block at the END of this file
   on every build. Specificity beats source order; source order would lose.
   The literal `:root` followed directly by a brace is avoided on purpose:
   brand_marks.palette() and hero_motifs.palette() split this file on that
   string and a second occurrence truncates what they parse. */
html:root {
  --ep-rcard:20px;
  --ep-rctl:14px;
  --ep-rchip:999px;
  /* one deep, very diffuse stop, tinted with this site's own ink
     (25,21,19) and its own oxblood (110,21,38). Never neutral black. */
  --ep-amb:0 22px 60px rgba(25,21,19,.16);
  --ep-amb-s:0 14px 36px rgba(25,21,19,.10);
  --ep-amb-acc:0 22px 60px rgba(110,21,38,.30);
  --ep-amb-acc-up:0 28px 70px rgba(110,21,38,.40);
  --ep-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- controls: the buying CTA gradients, the secondary stays solid, so
   the pair reads as two weights and not as two colours of one thing. ---- */
body:has(.hero) .btn{border-radius:var(--ep-rctl);
  transition:transform .22s var(--ep-ease),box-shadow .22s var(--ep-ease),
  background-color .22s var(--ep-ease),border-color .22s var(--ep-ease)}
body:has(.hero) .btn--cta{
  background-image:linear-gradient(148deg,var(--accent-bright),var(--accent) 52%,var(--accent-deep));
  box-shadow:var(--ep-amb-acc),inset 0 1px 0 rgba(255,255,255,.20)}
body:has(.hero) .btn--cta:hover{
  background-image:linear-gradient(148deg,var(--accent),var(--accent-deep) 58%,var(--accent-deep));
  box-shadow:var(--ep-amb-acc-up),inset 0 1px 0 rgba(255,255,255,.20)}
body:has(.hero) .btn--ghost{background-image:none;background-color:var(--paper-card);
  border-color:var(--line);color:var(--ink);box-shadow:var(--ep-amb-s)}
body:has(.hero) .btn--ghost:hover{border-color:var(--accent);color:var(--accent-deep);
  box-shadow:var(--ep-amb)}
body:has(.hero) .btn:hover{transform:translateY(-2px)}
body:has(.hero) .btn:active{transform:translateY(0)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--accent-bright);
  outline-offset:3px;transform:translateY(-2px)}
/* the focus ring for everything that is NOT a button lives below the marker:
   this block is inlined into 31 pages and the rule-3 ceiling for it is 3KB.
   Measured at +3,115 bytes with that rule here, +2,932 without it. */

/* ---- hero furniture ---------------------------------------------------- */
body:has(.hero) .ck{border-radius:var(--ep-rchip)}
.hero .pill{border-radius:var(--ep-rchip);box-shadow:var(--ep-amb-s);
  border-color:var(--line-soft)}
/* the Quick Answer keeps its accent rule on the left -- a white card here
   would read as a second product shot on the dark wedge -- but the tint
   now falls away to the right and the free edge is rounded. */
.hero .answer{border-radius:0 var(--ep-rcard) var(--ep-rcard) 0;
  background:linear-gradient(90deg,rgba(160,31,53,.075),rgba(160,31,53,0) 66%)}
.hero__tag{border-radius:var(--ep-rchip);box-shadow:var(--ep-amb-acc)}
.hero .floaty{border-radius:var(--ep-rctl);box-shadow:var(--ep-amb);
  border-color:var(--line-soft)}
.hero .factpills li{border-radius:var(--ep-rchip);box-shadow:var(--ep-amb-s);
  border-color:var(--line-soft)}
.hero .figures{border-radius:var(--ep-rcard);overflow:hidden;
  box-shadow:var(--ep-amb-s);border-color:var(--line-soft)}

/* ---- hero motif: ORBIT -- a thin ring with one bright arc travelling it.
   Drawn on .hero__media::after. Never on the <img>: that is the LCP element
   and it is preloaded. ::before already carries this site's vein-trace, so
   the ring and the arc share one element -- a flat faint ring for the whole
   circle, a conic sweep for the glint, both cut down to a 2px annulus by the
   mask -- and the element itself rotates. 118% of the media column, so the
   circle is wider and taller than the 453x440 bottle plate and reads OUTSIDE
   it rather than being swallowed by it. 42 seconds a turn: this is a capsule
   taken once a day for weeks, not an energy drink. transform only. */
.hero__media::after{content:'';position:absolute;left:50%;top:46%;
  width:118%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(194,42,66,0) 0 286deg,
    rgba(194,42,66,.50) 330deg,rgba(255,236,238,.92) 352deg,
    rgba(194,42,66,0) 360deg),rgba(222,211,197,.26);
  -webkit-mask-image:radial-gradient(closest-side,rgba(0,0,0,0) calc(100% - 2px),#000 calc(100% - 2px));
  mask-image:radial-gradient(closest-side,rgba(0,0,0,0) calc(100% - 2px),#000 calc(100% - 2px));
  animation:epOrbitRun 42s linear infinite;
  z-index:1;pointer-events:none}
@keyframes epOrbitRun{to{transform:rotate(360deg)}}
/* Below 921 the media column stops being a column and becomes a full-bleed
   graphite panel, so 118% of its WIDTH is 460px on a 390 screen inside a
   351px-tall panel: measured, the ring's arc came out of the panel and
   crossed the H1. Under that breakpoint the circle is sized from the panel's
   height instead, which keeps it inside the dark ground and still leaves it
   larger than the 250px bottle. */
@media (max-width:920px){
  .hero__media::after{width:auto;height:92%;top:50%}
}

/* Every hover and every animation above is switched off here. The existing
   reduced-motion query is (0,2,0); these rules are (0,3,1) and would have
   outranked it, which is exactly how a motion preference gets ignored. */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn,
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn:active,
  body:has(.hero) .btn:focus-visible{transform:none;transition:none}
  .hero__media::after{animation:none}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 7. SECTIONS --------------------------------------------------------- */
.sec{padding-block:66px}
.sec--tight{padding-block:40px}
.sec--tint{background:var(--paper-tint)}
.sec--white{background:var(--paper-card)}
.sec--slab{background:var(--graphite);color:rgba(255,255,255,.78)}
.sec--slab h2,.sec--slab h3,.sec--slab h4{color:#fff}
.sec--slab .eyebrow{color:var(--accent-bright)}
.sec--slab .lead{color:rgba(255,255,255,.74)}
.sec--center .sec__head{text-align:center;margin-inline:auto}
.sec__head{max-width:var(--measure-wide);margin-bottom:36px}
.eyebrow{display:inline-block;font-family:var(--sans);font-size:.8438rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.rule{display:block;width:60px;height:4px;background:var(--accent);margin-bottom:15px}
.sec--center .rule{margin-inline:auto}
.sec--slab .rule{background:var(--accent-bright)}
.sec h2{font-size:clamp(1.65rem,3vw,2.35rem);margin-bottom:12px}
.sec h3{font-size:1.2rem;margin-bottom:8px}
.lead{font-size:1.0938rem;color:var(--muted)}
.note{font-size:.9062rem;color:var(--faint)}
.sec p+p,.sec p+ul,.sec p+ol,.sec ul+p,.sec ol+p{margin-top:1em}
.sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
.sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
.sec>.wrap>.pullquote,.sec>.wrap>blockquote,.sec>.wrap>.note{max-width:var(--measure);
  margin-inline:auto}
.sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{max-width:var(--measure-wide);
  margin-inline:auto}
.sec>.wrap>ul,.sec>.wrap>ol{padding-left:0}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:36px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n);position:absolute;left:0;top:3px;
  width:25px;height:25px;background:var(--accent);
  color:#fff;font-size:1.062rem;font-weight:600;display:flex;
  align-items:center;justify-content:center;font-family:var(--sans)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.5rem;
  line-height:.84;font-weight:800;color:var(--accent);padding:7px 13px 0 0}

.pullquote{border-left:4px solid var(--accent);padding:6px 0 6px 22px;margin:26px auto}
.pullquote p{font-family:var(--display);font-size:1.28rem;color:var(--ink);
  line-height:1.4;font-weight:600}
.pullquote cite{display:block;margin-top:10px;font-style:normal;font-size:.8438rem;
  color:var(--faint);letter-spacing:.08em;text-transform:uppercase;font-weight:500}

.crumbs{font-size:.9062rem;color:var(--faint);padding-block:16px 0}
.crumbs a{color:var(--faint)}

/* ---- 8. CARDS, GRIDS ----------------------------------------------------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper-card);border:1px solid var(--line);padding:26px 24px;
  box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow)}
.card h3{font-size:1.15rem}
.card p{font-size:1.062rem;color:var(--faint)}
.card p+p{margin-top:.8em}
.sec--slab .card{background:var(--graphite-2);border-color:var(--graphite-line)}
.sec--slab .card p{color:rgba(255,255,255,.72)}
.sec--slab .card:hover{box-shadow:5px 5px 0 var(--graphite-line)}

.steps{display:grid;gap:16px;counter-reset:s}
.step{background:var(--paper-card);border:1px solid var(--line);
  padding:24px 26px 24px 72px;position:relative;box-shadow:var(--shadow-sm);
  counter-increment:s}
.step__n{position:absolute;left:22px;top:24px;width:34px;height:34px;
  background:var(--accent);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:800;font-size:1rem}
.step__n::before{content:counter(s)}
.step h3{font-size:1.1rem}
.step p{font-size:1.062rem;color:var(--faint)}

.chips{display:grid;gap:10px;margin:18px 0 0}
.chips li{display:flex;gap:11px;align-items:flex-start;font-size:1rem}
.chips .ck{background:var(--gold-deep);color:#fff;font-size:.8125rem}

.callout{background:var(--accent-tint);border:1px solid var(--accent-line);
  border-left:5px solid var(--accent);padding:19px 22px;margin:24px auto;
  font-size:1rem}
.callout p+p{margin-top:.8em}
.alert{background:var(--gold-soft);border:1px solid var(--gold-line);
  border-left:5px solid var(--gold-deep);padding:19px 22px;margin:24px auto;
  font-size:1rem}
.alert p+p{margin-top:.8em}
.flag{display:inline-block;background:var(--accent);color:#fff;font-size:0.8438rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px}

/* ---- 9. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:var(--paper-card);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);margin:22px auto}
table.dtable{width:100%;border-collapse:collapse;font-size:1rem;min-width:540px}
.dtable caption{text-align:left;padding:17px 20px 0;font-family:var(--display);
  font-weight:700;color:var(--ink);font-size:1.05rem}
.dtable th,.dtable td{padding:12px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.dtable thead th{background:var(--graphite);color:#fff;
  font-size:.9062rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  font-family:var(--sans)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b{color:var(--ink)}

/* ---- 10. SPLIT ----------------------------------------------------------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.split--rev{grid-template-columns:.95fr 1.05fr}
.split__media{text-align:center}
.split__media img{margin-inline:auto;border:1px solid var(--line)}

/* ---- 11. SHOTS: images that carry content -------------------------------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,1fr)}
.shots figure{background:var(--paper-card);border:1px solid var(--line);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.shots img{width:100%}
.shots figcaption{padding:18px 20px;font-size:.9688rem;color:var(--faint)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.06rem;
  color:var(--ink);margin-bottom:7px}

/* ---- 12. FACES: the manufacturer's testimonial portraits ----------------- */
.faces{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px}
.faces figure{text-align:center}
.faces img{width:100%;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.faces figcaption{font-size:.9062rem;color:var(--faint);margin-top:9px;font-weight:500}

/* ---- 13. PROMO / STATS / BADGEWALL --------------------------------------- */
.promo{background:var(--graphite);color:rgba(255,255,255,.8);
  padding:30px 34px;display:grid;grid-template-columns:1fr auto;gap:24px;
  align-items:center;border-left:5px solid var(--accent)}
.promo p{margin:0}
.promo b{color:#fff}
/* .promo and .stats are graphite blocks, but a link inside them inherits the
   global a{color:var(--accent)} -- the oxblood tuned for the paper grounds.
   #a01f35 on #16181c measures 2.32:1 and is effectively invisible. The pale
   accent keeps the colour family and reads at ~15:1.
   :not(.btn) is load-bearing: without it this rule outranks .btn--* own
   colours and repaints button labels (measured on a sister site). */
.promo a:not(.btn),.stats a:not(.btn){color:var(--accent-tint);text-decoration:underline}
.stats{background:var(--graphite);padding:36px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2.15rem;color:#fff;
  line-height:1;font-weight:800}
.stats span{display:block;margin-top:8px;font-size:0.9062rem;color:rgba(255,255,255,.7);
  line-height:1.45}
.badgewall{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.badgewall figure{background:var(--paper-card);border:1px solid var(--line);
  padding:20px 14px;text-align:center;box-shadow:var(--shadow-sm)}
.badgewall img{margin:0 auto 11px}
.badgewall figcaption{font-size:.9062rem;color:var(--faint);line-height:1.45}
.badgewall figcaption b{display:block;color:var(--ink);font-size:.95rem;
  margin-bottom:5px;font-family:var(--display)}

/* ---- 14. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.whycard{background:var(--paper-card);border:1px solid var(--line);padding:26px 24px;
  box-shadow:var(--shadow-sm);border-top:4px solid var(--accent)}
.whycard h3{font-size:1.1rem}
.whycard p{font-size:1.062rem;color:var(--faint)}
.whofor{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.forlist{background:var(--paper-card);border:1px solid var(--line);padding:26px;
  box-shadow:var(--shadow-sm)}
.forlist h3{font-size:1.1rem;margin-bottom:12px}
.forlist li{display:flex;gap:10px;font-size:1.062rem;margin-bottom:9px}
.forlist li::before{content:"\25A0";color:var(--accent);font-size:1.062rem;
  line-height:1.9;font-weight:700}

/* ---- 15. INGREDIENTS / FACTS PANEL --------------------------------------- */
.ing{display:grid;gap:22px}
.ingcard{background:var(--paper-card);border:1px solid var(--line);padding:28px;
  box-shadow:var(--shadow-sm);position:relative}
.ingcard h3{font-size:1.26rem;margin-bottom:4px}
.ingcard .ingsub{font-size:0.9062rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:13px;display:block}
.ingcard p{font-size:1.062rem}
.ingcard p+p{margin-top:.85em}
.ingthumbs{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
.ingthumbs img{border:1px solid var(--line)}
.facts{background:var(--paper-card);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);overflow:hidden;max-width:580px;margin-inline:auto}
.facts__h{background:var(--graphite);color:#fff;padding:15px 22px;
  font-family:var(--display);font-size:1.18rem;font-weight:700}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th,.facttab td{padding:11px 22px;border-bottom:1px solid var(--line-soft);
  text-align:left}
.facttab td:last-child{text-align:right;font-weight:600;color:var(--ink)}
.facttab tr:last-child th,.facttab tr:last-child td{border-bottom:0}

/* ---- 16. QA record sheet ------------------------------------------------- */
.qa{background:var(--paper-card);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);overflow:hidden;max-width:920px;margin-inline:auto}
.qa__h{background:var(--paper-tint);padding:16px 24px;font-family:var(--display);
  font-weight:700;font-size:1.08rem;color:var(--ink)}
.qa dl{margin:0;display:grid;grid-template-columns:32% 1fr}
.qa dt,.qa dd{padding:13px 24px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:600;color:var(--ink);font-size:1.062rem;letter-spacing:.09em;
  text-transform:uppercase;font-family:var(--sans)}
.qa dd{color:var(--muted);font-size:1.062rem}
.qa dl>:nth-last-child(-n+2){border-bottom:0}

/* ---- 17. PRICING --------------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier{background:var(--paper-card);border:1px solid var(--line);padding:32px 24px;
  text-align:center;position:relative;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column}
.tier--feature{border-color:var(--graphite);box-shadow:var(--shadow-lg)}
.tier__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:.8438rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 14px;white-space:nowrap}
.tier h3{font-size:1.38rem;margin-bottom:2px}
.tier__supply{font-size:.8438rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin-bottom:15px}
.tier img{margin:0 auto 14px}
.tier__price{font-family:var(--display);font-size:1.9rem;font-weight:800;
  color:var(--accent-deep);line-height:1.15;margin-bottom:6px}
.tier__price small{display:block;font-family:var(--sans);font-size:.9062rem;
  font-weight:400;color:var(--faint);margin-top:5px;letter-spacing:0}
.tier__rows{font-size:.9375rem;color:var(--faint);margin-bottom:20px;display:grid;gap:6px}
.tier .btn{margin-top:auto}
.guarantee{display:grid;grid-template-columns:.6fr 1.4fr;gap:32px;align-items:center;
  background:var(--paper-card);border:1px solid var(--line);padding:30px;
  box-shadow:var(--shadow-sm)}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.42rem;margin-bottom:12px}

/* ---- 18. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:var(--paper-card);border:1px solid var(--line);padding:24px;
  box-shadow:var(--shadow-sm)}
.tcard .stars{color:var(--accent);letter-spacing:1px;font-size:.95rem}
.tcard b{display:block;margin-top:8px;font-family:var(--display);font-size:1.05rem;
  color:var(--ink)}
.tcard span{font-size:.9062rem;color:var(--faint)}
.tcard p{font-size:1.062rem;margin-top:10px}
.tlife{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tlife figure{background:var(--paper-card);border:1px solid var(--line);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.tlife figcaption{padding:15px 17px;font-size:.9375rem;color:var(--faint)}
.bars{display:grid;gap:10px;max-width:470px}
.bar{display:grid;grid-template-columns:54px 1fr 54px;gap:12px;align-items:center;
  font-size:.9062rem;color:var(--faint)}
.bar__t{height:10px;background:var(--paper-deep);overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent)}
.dist{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
  background:var(--paper-card);border:1px solid var(--line);padding:28px;
  box-shadow:var(--shadow-sm)}

/* ---- 19. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:12px;text-align:left}
.faq details{background:var(--paper-card);border:1px solid var(--line);
  box-shadow:var(--shadow-sm)}
.faq summary{padding:16px 22px;font-family:var(--display);font-weight:700;
  color:var(--ink);cursor:pointer;font-size:1.05rem;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.45rem;flex:none;
  line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq__b{padding:0 22px 18px;font-size:1rem}
.faq__b p+p{margin-top:.8em}

/* ---- 20. REFS, BYLINE ---------------------------------------------------- */
.refs{background:var(--paper-card);border:1px solid var(--line);padding:24px 26px;
  box-shadow:var(--shadow-sm)}
.refs h2{font-size:1.18rem;margin-bottom:13px}
.refs ol{counter-reset:r;display:grid;gap:10px}
.refs li{counter-increment:r;position:relative;padding-left:30px;font-size:1.062rem;
  color:var(--faint);line-height:1.6}
.refs li::before{content:counter(r) ".";position:absolute;left:0;font-weight:600;
  color:var(--accent)}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto 1fr;gap:20px;
  background:var(--paper-card);border:1px solid var(--line);padding:24px 26px;
  box-shadow:var(--shadow-sm);margin:26px auto 0}
.byline img{flex:none;border:1px solid var(--line)}
.byline b{font-family:var(--display);font-size:1.08rem;color:var(--ink);display:block;
  margin-bottom:8px}
.byline p{font-size:.9375rem;color:var(--faint)}

/* ---- 21. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}
.formcard{background:var(--paper-card);border:1px solid var(--line);padding:26px;
  box-shadow:var(--shadow-sm)}
.formcard h3{font-size:1.15rem;margin-bottom:6px}
.formcard label{display:block;font-size:.875rem;font-weight:600;color:var(--ink-soft);
  margin:14px 0 5px}
.formcard input,.formcard textarea,.formcard select{width:100%;padding:11px 14px;
  border:1px solid var(--line);border-radius:2px;font-family:var(--sans);
  font-size:1rem;color:var(--ink);background:var(--paper)}
.formcard textarea{min-height:120px;resize:vertical}
.formcard .btn{margin-top:18px}

/* ---- 22. FINAL CTA / RELATED --------------------------------------------- */
.final{background:var(--graphite);padding:38px 40px;color:rgba(255,255,255,.8);
  border-left:5px solid var(--accent)}
.final h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:12px}
.final p{color:rgba(255,255,255,.8)}
.final--media{display:grid;grid-template-columns:290px minmax(0,1fr);gap:34px;
  align-items:center}
.final--media .final__img img{width:100%;height:auto;margin-inline:auto}
.final__price{font-family:var(--display);font-size:1.3rem;color:#fff;margin:14px 0 18px;
  font-weight:700}
.final .btn--cta{background:var(--accent-bright);color:#fff;
  box-shadow:4px 4px 0 rgba(255,255,255,.2)}
.final .btn--cta:hover{background:var(--accent);box-shadow:6px 6px 0 rgba(255,255,255,.26)}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.rel a{background:var(--paper-card);border:1px solid var(--line);padding:22px;
  display:block;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease}
.rel a:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow);
  text-decoration:none}
.rel b{display:block;font-family:var(--display);font-size:1.08rem;color:var(--ink);
  margin-bottom:6px}
.rel span{font-size:.9375rem;color:var(--faint)}

/* ---- 23. LEGAL ----------------------------------------------------------- */
.legal h2{margin-top:1.5em}
.legal h3{margin-top:1.2em}
.meta{font-size:.9062rem;color:var(--faint)}

/* ---- 24. FOOTER: ONE wide column, oversized wordmark, horizontal rows ---- */
footer{background:var(--graphite);color:rgba(255,255,255,.64);
  padding-block:52px 24px;font-size:.9062rem}
footer a{color:rgba(255,255,255,.84)}
footer a:hover{color:#fff}
.fbrand{font-family:var(--display);font-size:clamp(2.6rem,8vw,5.2rem);color:#fff;
  line-height:.94;font-weight:800;letter-spacing:-.045em;text-transform:uppercase;
  margin-bottom:6px}
.fbrand span{color:var(--accent-bright)}
.fintro{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:end;
  padding-bottom:26px;border-bottom:1px solid var(--graphite-line)}
.fintro p{font-size:1.062rem;color:rgba(255,255,255,.62);max-width:46ch}
.fcontact{display:grid;grid-template-columns:auto 1fr auto;gap:26px;
  align-items:center;border:1px solid var(--graphite-line);padding:22px 26px;
  margin-block:30px}
.fcontact img{flex:none}
.fcontact__t b{display:block;font-family:var(--display);font-size:1.14rem;color:#fff;
  margin-bottom:5px}
.fcontact__t p{font-size:1.062rem;color:rgba(255,255,255,.66)}
.frow{padding-block:16px;border-bottom:1px solid var(--graphite-line);
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline}
.frow h4{color:rgba(255,255,255,.52);font-family:var(--sans);font-size:.75rem;
  letter-spacing:.2em;text-transform:uppercase;min-width:132px;margin:0;
  font-weight:500}
.frow ul{display:flex;flex-wrap:wrap;gap:6px 0;flex:1 1 320px}
.frow li{font-size:1.062rem;line-height:1.5;white-space:nowrap}
.frow li::after{content:"\00B7";margin:0 10px;color:var(--graphite-line)}
.frow li:last-child::after{content:""}
.fbadges{display:flex;flex-wrap:wrap;gap:12px;padding-block:22px;
  border-bottom:1px solid var(--graphite-line);align-items:center}
.fnap{padding-block:22px;border-bottom:1px solid var(--graphite-line);
  font-size:.9062rem;line-height:1.8}
.fnap strong{color:#fff}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:18px;
  font-size:.9062rem}
.disc{padding-top:18px;font-size:.9062rem;line-height:1.7;color:rgba(255,255,255,.58)}
.disc p{margin-bottom:.9em}
.disc b{color:rgba(255,255,255,.88)}
.disc .copy{margin-top:16px;color:rgba(255,255,255,.46)}

/* ---- 25. BUY BAR --------------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--graphite);
  color:#fff;transform:translateY(110%);transition:transform .3s ease;
  border-top:3px solid var(--accent)}
.buybar.show{transform:translateY(0)}
.buybar__in{max-width:var(--wrap);margin-inline:auto;padding:11px 22px;display:flex;
  align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;
  font-size:.9062rem}
.buybar__t b{color:#fff}
.buybar .from{color:var(--accent-bright)}
.buybar .btn{padding:10px 22px}

/* ---- 26. BLOG ------------------------------------------------------------ */
.article{max-width:780px}
.article h1{font-size:clamp(1.95rem,3.8vw,2.7rem);margin-bottom:14px}
.article h2{font-size:1.52rem;margin:1.9em 0 .6em;scroll-margin-top:124px}
.article h3{font-size:1.17rem;margin:1.5em 0 .5em}
.article p{margin-bottom:1em}
.article ul,.article ol{margin:0 0 1.2em}
.article ul li{position:relative;padding-left:24px;margin-bottom:9px}
.article ul li::before{content:"\25A0";position:absolute;left:4px;color:var(--accent);
  font-size:1.062rem;top:.55em}
.article ol{counter-reset:ai}
.article ol li{position:relative;padding-left:30px;margin-bottom:9px;counter-increment:ai}
.article ol li::before{content:counter(ai) ".";position:absolute;left:0;
  color:var(--accent);font-weight:600}
.article figure{margin:1.6em 0}
.article figure img{width:100%;border:1px solid var(--line)}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}
.article figcaption{font-size:.9375rem;color:var(--faint);margin-top:10px;
  border-left:3px solid var(--accent);padding-inline-start:13px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:.9062rem;color:var(--faint);
  padding-block:13px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:26px}
.postmeta b{color:var(--ink-soft)}
.postmeta .sep{color:var(--line)}
.toc{background:var(--paper-tint);border:1px solid var(--line);padding:20px 24px;
  margin-bottom:26px}
.toc h2{font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;
  font-family:var(--sans);color:var(--accent);margin:0 0 11px;font-weight:600}
.toc ol{counter-reset:t;display:grid;gap:7px}
.toc li{counter-increment:t;position:relative;padding-left:28px;font-size:1.062rem}
.toc li::before{content:counter(t) ".";position:absolute;left:0;color:var(--faint);
  font-weight:600}
.keypoints{background:var(--accent-tint);border:1px solid var(--accent-line);
  border-left:5px solid var(--accent);padding:20px 24px;margin-bottom:24px}
.keypoints>b{display:block;font-family:var(--sans);font-size:0.8438rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:11px;
  font-weight:600}
.keypoints li b{color:var(--accent-deep)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.posts article{background:var(--paper-card);border:1px solid var(--line);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease}
.posts article:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{font-size:1.1rem;margin-bottom:8px}
.posts p{font-size:1.062rem;color:var(--faint)}
.posts .pmeta{font-size:0.9062rem;color:var(--faint);margin-top:12px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:500}
/* A shared component in a narrower column is a new component (pitfall 24).
   The prose column is ~780px where the page wrap is 1150px, so the closing
   CTA needs its own geometry here, and a third set again on a phone. */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;
  padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.6rem;line-height:1.2;margin-top:0}
@media(max-width:760px){
  .article .final--media{grid-template-columns:1fr;gap:16px;padding:24px 22px;
    text-align:center}
  .article .final--media .final__img img{max-width:128px;margin-inline:auto}
  .article .final--media h2{font-size:1.32rem}
  .article .final--media .btn{width:100%}
}
/* A dark component inside .article: a later same-specificity rule would
   otherwise repaint its copy dark-on-dark (pitfall 57). */
.final p,.article .final p{color:rgba(255,255,255,.8)}
.final__price,.article .final .final__price{color:#fff}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 27. MOTION: a left-to-right clip wipe and a drawn rule -------------- */
/* Deliberately not a fade-up. Row 3 of the ledger shares this site's UI
   reference and already owns fade-up-on-entry with no hero motion; this site
   wipes in from the left and draws its section rules, and its hero carries the
   vein-trace motif. The attribute is added by JS, so with JS off nothing is
   hidden. */
[data-reveal]{clip-path:inset(0 100% 0 0);transform:translateX(-10px)}
[data-reveal].in{clip-path:inset(0 0 0 0);transform:none;
  transition:clip-path .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
[data-rule]{transform:scaleX(0);transform-origin:left center}
.sec--center [data-rule]{transform-origin:center}
[data-rule].in{transform:scaleX(1);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in{clip-path:none;transform:none;transition:none}
  [data-rule],[data-rule].in{transform:none;transition:none}
  .btn:hover,.card:hover,.rel a:hover,.posts article:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ---- 28. RESPONSIVE ------------------------------------------------------ */
@media(max-width:1060px){
  .sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
  .sec>.wrap>.pullquote,.sec>.wrap>blockquote,.sec>.wrap>.note,
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{max-width:none}
}
@media(max-width:1024px){
  .badgewall{grid-template-columns:repeat(3,1fr)}
  .faces{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:920px){
  .split,.split--rev,.guarantee,.dist,.form{grid-template-columns:1fr;gap:26px}
  .promo{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .g3,.g4,.whygrid,.tgrid,.tlife,.rel,.posts{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .pricing .tier:nth-child(1){order:3}
  .pricing .tier:nth-child(2){order:1}
  .pricing .tier:nth-child(3){order:2}
  .tier--feature{transform:none}
  .final--media{grid-template-columns:1fr;gap:22px}
  .fintro{grid-template-columns:1fr;align-items:start;gap:18px}
  .fcontact{grid-template-columns:1fr;text-align:left}
  .frow{display:block}
  .frow h4{margin-bottom:6px}
}
@media(max-width:700px){
  .sec{padding-block:48px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.tlife,.rel,.posts,.shots,.shots--wide,
  .badgewall{grid-template-columns:1fr}
  .faces{grid-template-columns:repeat(2,1fr)}
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
  .stats{grid-template-columns:1fr}
  .final{padding:28px 24px}
  .frow li{white-space:normal}
}
/* Tap target: a button on a phone must be reachable with a thumb. 44px is the
   floor, applied at the mobile breakpoint only so desktop is untouched. */
@media(max-width:600px){.btn{min-height:44px}}
/* brand mark: bracket construction */
.brand{position:relative;padding-inline:14px}.brand::before,.brand::after{content:'';position:absolute;top:2px;bottom:2px;width:8px;border:2px solid #c22a42}.brand::before{left:0;border-right:0}.brand::after{right:0;border-left:0}


/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past. --navh is measured and set by site.js, because nav
   heights differ per site (66px to 99px across the estate) and a hardcoded
   offset tucks the product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it; without that the box is only as tall as the image and
   "sticky" pins it to the top instead. Guarded above the stacking breakpoint
   only: below it the hero is one column and there is nothing to stick to.

   .hero must not be overflow:hidden or the sticky box is trapped in a scroll
   container that never scrolls (pitfall 5). hero_motifs writes
   overflow:hidden;overflow:clip -- clip does not create one, so this works. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 88px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 88px) - 28px);
    min-height: calc(100svh - var(--navh, 88px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor product shots are different
   shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
   blurbs are different lengths, so without these three rules the images
   render at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those
   must keep stating each file's true ratio, or fix_img_dims.py rewrites them
   and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* The footer column link is the thing you tap, and it was 17px tall in
   35px of row pitch -- under the 24px WCAG AA floor. The padding grows the
   hit area to ~33px and the negative margin gives the space straight back,
   so the footer renders identically. inline-block (not block) keeps the
   hover underline the width of the words. See fix_footer_tap.py. */
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 24px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(110%)}
/* ==== end directional chrome ==== */

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */
/*!SITE-HOME-PAINT-START*/
/* ---- HOME PAGE, BELOW THE FOLD ------------------------------------------
   Same slot, same scope rule: body:has(.hero), which resolves on index.html
   only. Paint plus the pricing card's own internal spacing; none of it is in
   the critical block, because no .tier / .card rule has ever been above the
   marker on this site, so there is no inlined copy of any of it to go stale.

   modern_surface.py and footer_type.py delete and re-append their blocks at
   the END of this file on every build, which puts them AFTER this one. Every
   rule below therefore beats them on SPECIFICITY -- (0,2,1) or better against
   their (0,1,0) -- and never on source order. */

/* 1. panels: the slot's 20px and its single very diffuse ambient stop.
   modern_surface's 16px + two-stop shadow is what 126 sites share; this is
   what makes this one its own. */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .keypoints,
body:has(.hero) .byline,
body:has(.hero) .tablewrap,
body:has(.hero) .faq,
body:has(.hero) .final,
body:has(.hero) .promo,
body:has(.hero) .qa,
body:has(.hero) .whofor,
body:has(.hero) .refs,
body:has(.hero) .shots figure,
body:has(.hero) .rel a,
body:has(.hero) .tier{border-radius:var(--ep-rcard);box-shadow:var(--ep-amb-s)}

/* 2. a surface a reader can click answers the pointer. */
body:has(.hero) .card,
body:has(.hero) .shots figure,
body:has(.hero) .rel a,
body:has(.hero) .tier{transition:box-shadow .24s var(--ep-ease),
  transform .24s var(--ep-ease),border-color .24s var(--ep-ease)}
body:has(.hero) .shots figure:hover,
body:has(.hero) .rel a:hover,
body:has(.hero) .tier:hover{box-shadow:var(--ep-amb);transform:translateY(-2px)}

/* 3. the keyboard ring for everything that is not a .btn (buttons get theirs
   in the critical block, because they are on the first screen). */
body:has(.hero) a:focus-visible,
body:has(.hero) button:focus-visible,
body:has(.hero) summary:focus-visible,
body:has(.hero) input:focus-visible,
body:has(.hero) textarea:focus-visible{outline:3px solid var(--accent-bright);
  outline-offset:3px;border-radius:6px}

/* 4. the bottom bar gets the same one-stop ambient, thrown upward, and the
   numbered step badge loses its hard corner. */
body:has(.hero) .buybar{box-shadow:0 -18px 46px rgba(25,21,19,.30)}
body:has(.hero) .step__n{border-radius:10px}

/* 5. PRICING -- slot ribbon: a TAB ABOVE THE CARD.
   The three Add To Cart buttons share ONE baseline and that is load-bearing:
   .pricing is a stretch grid, every .tier is a flex column, and
   .card--pack>.btn is margin-top:auto, so each button rests on its card's
   bottom padding edge. The recommended card is therefore raised with a
   NEGATIVE MARGIN and not a transform -- [data-reveal].in sets
   transform:none on these cards, and a negative margin-top moves the top
   edge only and leaves the bottom edge exactly where it was, so the raise
   costs the baseline nothing. The three dashed rows are added to all three
   cards identically for the same reason. Verified by measurement after the
   build, not by the rule being present. */
   The tab had to be UNCLIPPED before it could be seen at all. This site's
   reveal is a left-to-right wipe and its finished state is
   `[data-reveal].in{clip-path:inset(0)}` -- a clip to the card's own border
   box -- so the first build of this tab rendered as a bare coloured strip
   with its label cut off above the card. The clip is opened 60px upward in
   BOTH states, which keeps the two shapes interpolable so the wipe still
   animates, and the tab now travels in with its card. Measured, not
   assumed: the label's box was at -30px inside a clip that started at 0. */
body:has(.hero) .pricing .tier[data-reveal]{clip-path:inset(-60px 100% 0 0)}
body:has(.hero) .pricing .tier[data-reveal].in{clip-path:inset(-60px 0 0 0)}
/* the tab needs somewhere to be. Without this the raised card's tab sat on
   the section lead's last line -- measured 10px of overlap. */
body:has(.hero) #pricing .sec__head{margin-bottom:58px}
body:has(.hero) .pricing .tier__flag{top:-31px;
  border-radius:var(--ep-rctl) var(--ep-rctl) 0 0;padding:7px 18px 6px;
  box-shadow:0 -12px 28px rgba(110,21,38,.20)}
body:has(.hero) .pricing .tier--feature{margin-top:-16px;
  background:linear-gradient(177deg,var(--paper-card) 56%,var(--accent-tint));
  border-color:var(--accent-line);box-shadow:var(--ep-amb-acc)}
body:has(.hero) .pricing .tier--feature .tier__flag{background:var(--graphite)}
body:has(.hero) .pricing .tier--feature:hover{box-shadow:var(--ep-amb-acc-up);
  transform:translateY(-2px)}
body:has(.hero) .pricing .tier__rows{gap:0}
body:has(.hero) .pricing .tier__rows>span{padding:7px 2px}
body:has(.hero) .pricing .tier__rows>span+span{border-top:1px dashed var(--line)}
/* one column below 920: a raised card would simply sit on the one above it,
   and the existing breakpoint already cancels the transform for the same
   reason. */
@media (max-width:920px){
  body:has(.hero) .pricing .tier--feature{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .card,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .rel a:hover,
  body:has(.hero) .tier,
  body:has(.hero) .tier:hover,
  body:has(.hero) .pricing .tier--feature:hover{transform:none;transition:none}
  /* the existing guard is [data-reveal],[data-reveal].in -- (0,2,0) -- and
     the two clip rules above are (0,3,2), so they would have outranked it
     and left the cards clipped with motion switched off. */
  body:has(.hero) .pricing .tier[data-reveal],
  body:has(.hero) .pricing .tier[data-reveal].in{clip-path:none;transition:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer{font-size:16px}
footer .btn{font-size:16px}
footer .disc{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
footer .frow h4{font-size:15px}
footer .nav__cta .btn{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 55 box-shadow declaration(s)
   and 0 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (25,21,19), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --radius:16px;
  --shadow:0 1px 2px rgba(25,21,19,.06), 0 6px 18px rgba(25,21,19,.07);
  --lift:0 2px 6px rgba(25,21,19,.09), 0 16px 34px rgba(25,21,19,.14);
}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.whycard,
.tier,
.article figure{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure,
.tier{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}