/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Gabarito Fallback";src:local("Arial");font-weight:400;size-adjust:99.68%;ascent-override:94.30%;descent-override:26.08%;line-gap-override:0.00%}
@font-face{font-family:"Gabarito Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:94.01%;ascent-override:99.99%;descent-override:27.66%;line-gap-override:0.00%}
@font-face{font-family:"Mukta Fallback";src:local("Arial");font-weight:400;size-adjust:95.36%;ascent-override:118.50%;descent-override:55.79%;line-gap-override:0.00%}
@font-face{font-family:"Mukta Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:92.71%;ascent-override:121.88%;descent-override:57.38%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* getsciaticapro.com — Sciatica PRO+, U.S. authorized retailer desk.
   Design slot 33 (batch6_assignments.py): Gabarito / Mukta, warm putty ground
   with cobalt bands, a slim brand row over a horizontal rail of menu chips, a
   centred hero whose product sits on a full-width cobalt band, and the
   pulse-thread hero motif.

   The ground is WARM deliberately. The product is cobalt and five other sites
   on this estate are already blue-green; a putty page is what keeps this one
   off them and off its own two sisters in this batch.

   THE HERO ORDER IS NOT A PREFERENCE. femipros shipped the one other centred
   stacked hero on the estate with the product ABOVE the headline, and its H1
   began at y=796 at 1440x900 -- below the fold, while the phone layout was
   correct the whole time. Here the eyebrow, H1 and Quick Answer come FIRST and
   the band comes after. See pitfalls.md and responsive.md.

   Everything above CRITICAL-END is inlined into every page head. */

/* ---- tokens */
:root{
  --ink:#1c1a17;            /* warm near-black */
  --ink-2:#55504a;
  --ink-3:#7d766d;
  --cobalt:#1e4fa8;         /* the label's royal blue */
  --cobalt-d:#153874;
  --cobalt-l:#e6edf9;
  --sky:#6aa7e0;            /* the label's lighter blue, the "+" tile */
  --paper:#f4f1ec;          /* warm putty: the page */
  --panel:#ffffff;
  --tint:#eae5dd;           /* a warmer band */
  --line:#ded7cc;
  --line-2:#c6bcad;
  --good:#1a6b45;
  --warn:#8a5a10;
  --wrap:1160px;
  --measure:740px;
  --measure-wide:960px;
  --radius:12px;
  --radius-lg:22px;
  --shadow:0 1px 2px rgba(28,26,23,.05), 0 10px 28px rgba(28,26,23,.07);
  --shadow-lg:0 22px 58px rgba(21,56,116,.20);
  --navh:112px;
  --display:"Gabarito","Gabarito Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Mukta","Mukta Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17.5px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cobalt);text-underline-offset:3px}
a:hover{color:var(--cobalt-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.3rem + 2.3vw,3.15rem);letter-spacing:-.018em}
h2{font-size:clamp(1.5rem,1.18rem + 1.2vw,2.2rem);letter-spacing:-.012em}
h3{font-size:1.21rem;font-weight:600}
h4{font-size:1.04rem;font-weight:600}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--cobalt);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-block;font-family:var(--display);font-size:.8125rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt);
  background:var(--cobalt-l);padding:5px 14px;border-radius:999px;margin:0 0 12px;
}

/* ---- buttons: fully rounded, the label's own soft geometry */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 34px;
  font-family:var(--display);font-size:1.02rem;font-weight:700;letter-spacing:.005em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:var(--cobalt);color:#fff;
  box-shadow:0 8px 20px rgba(30,79,168,.28);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:hover{background:var(--cobalt-d);color:#fff;box-shadow:0 12px 26px rgba(30,79,168,.36)}
.btn:active{transform:translateY(1px)}
.btn--lg{min-height:62px;padding:17px 40px;font-size:1.1rem}
.btn--ghost{background:none;color:var(--cobalt);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--cobalt-l);color:var(--cobalt-d);box-shadow:inset 0 0 0 2px var(--cobalt)}
.btn--wide{width:100%}

/* ---- header: a slim brand row over a rail of menu chips */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--line)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:12px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:18px;padding-block:12px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand__glyph{width:34px;height:34px;flex:0 0 auto}
/* Size the mark by ELEMENT, not only by class. brand_marks.py rewrites the
   <svg> inside .brand and does NOT carry class="brand__glyph" onto the
   replacement, so a rule keyed to that class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size. Measured on
   getprostacyl: the brand row went 74px on blog pages (original markup,
   class intact) to 120px on every root page (rewritten, class gone) -- a
   masthead two different heights on one site, which is pitfall 16.
   Five sites on the estate are in that state. Keying the element as well
   makes this immune to whatever the tool emits. */
.brand>svg{width:34px;height:34px;flex:0 0 auto}

.bw{display:flex;flex-direction:column;line-height:1.08}
.bw b{font-family:var(--display);font-size:1.34rem;font-weight:700;letter-spacing:-.02em}
.bw b em{font-style:normal;color:var(--cobalt)}
.bw small{font-size:.75rem;font-weight:500;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav__buy{min-height:46px;padding:11px 24px;font-size:.96rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:999px;cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px;border-radius:2px}
.burger span:last-child{margin:0}
/* the chip rail */
.nav__strip{border-top:1px solid var(--line);background:var(--paper)}
.menu{
  display:flex;gap:8px;list-style:none;margin:0;padding:9px 0;align-items:center;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.menu::-webkit-scrollbar{display:none}
.menu a{
  display:inline-block;white-space:nowrap;padding:8px 16px;border-radius:999px;
  font-family:var(--display);font-size:.9375rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;background:var(--tint);
  transition:background .16s ease,color .16s ease;
}
.menu a:hover{background:var(--cobalt-l);color:var(--cobalt)}
.menu a[aria-current="page"]{background:var(--cobalt);color:#fff}
.menu__more{display:none}

/* ---- hero: CENTRED. Eyebrow, H1 and Quick Answer FIRST, then the band.
   The order is the whole point -- see the header note. */
.hero{position:relative;background:var(--paper);padding:52px 0 0;text-align:center}
.hero__grid{display:block}
.hero__copy{display:flex;flex-direction:column;align-items:center;max-width:820px;margin-inline:auto}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--cobalt)}
.answer{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;margin:0 0 18px;text-align:left;box-shadow:var(--shadow);
  border-top:4px solid var(--cobalt);
}
.answer p{margin:0 0 .75em;font-size:1.07rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 22px;max-width:60ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin:0 0 18px;font-size:.925rem;font-weight:500;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:700}
/* the product on a full-width cobalt band, fact tiles straddling its top edge */
.hero__media{
  position:relative;margin-top:34px;padding:74px 0 46px;
  background:linear-gradient(168deg,var(--cobalt) 0%,var(--cobalt-d) 100%);
}
.hero__card{position:relative;z-index:2;width:min(360px,74vw);margin-inline:auto}
.hero__card img{width:100%;height:auto}
.hero__cap{margin:18px 0 0;font-size:.8125rem;font-weight:500;color:#b9cdea;text-align:center}
.figures{
  position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  width:min(var(--wrap),calc(100% - 40px));margin:0 auto -46px;
}
.figures div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow)}
.figures b{display:block;font-family:var(--display);font-size:1.62rem;font-weight:700;color:var(--cobalt);line-height:1.08}
.figures span{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-top:3px}
.factpills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.875rem;font-weight:500;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 15px;border-radius:999px;
}
.factpills li b{color:var(--ink);font-weight:700}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin:0;padding:0;list-style:none;font-size:.875rem;font-weight:500;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:700}

/* ---- inner page head */
.phead{padding:34px 0 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:.875rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--cobalt)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five trust facts, above the navigation.
   Role, lot, dose and count, guarantee, order phone. It exists so the NAV does
   not have to carry them -- getexitide shipped without one, pushed the lot into
   the menu as a chip, crowded the navigation and still left the other four
   facts off the page (hero.md). Sits ABOVE CRITICAL-END because it is the first
   thing painted; appended to the end of the stylesheet it would load async and
   flash unstyled at the very top of the page. */
.util{background:var(--cobalt-d);color:#b6c9e6;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:#4a76bd;flex:0 0 auto;margin-right:11px}
.util b{color:#e8f0fb;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat 103px of an 844px screen (hero.md).
     Keep role, guarantee and phone; the lot and the dose are on the pages that
     need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* --- 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 (max-width:760px){
  .hero{padding-top:34px}
  .hero__media{margin-top:26px;padding:56px 0 40px}
}


/* ---- hero motif -- pulse-thread ---------------------------------------- */
.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:radial-gradient(122% 90% at 50% 4%,#cdd4e0,#f4f1ec 60%,#f4f1ec)}.hero__media::before{content:'';position:absolute;left:50%;top:50%;width:126%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:2px solid rgba(30,79,168,0.34);border-left-color:transparent;border-right-color:transparent;animation:spThread 12s linear infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:126%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 90%,rgba(30,79,168,0.72) 95%,transparent 100%);-webkit-mask:radial-gradient(closest-side,transparent 69%,#000 71%);mask:radial-gradient(closest-side,transparent 69%,#000 71%);animation:spPulse 5.5s linear infinite;z-index:1;pointer-events:none}@keyframes spThread{to{transform:rotate(-360deg)}}@keyframes spPulse{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--cobalt-d);color:#dfe8f6}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c4d5ee}
.sec--dark .eyebrow{background:rgba(255,255,255,.14);color:#cfe0f7}
.sec--dark a{color:#a9cbf3}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec--seam{padding-top:90px}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c4d5ee}

/* one measure, centred; multi-column components keep the full wrap */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{
    max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#78d6ab}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--display);font-weight:700;color:#fff;background:var(--cobalt);font-size:.95rem}
tbody tr:nth-child(even){background:#fbfaf8}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--cobalt-d)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 70px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;background:var(--cobalt);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.02rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 24px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#1b4489;border-color:#2a5aa8}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--cobalt-l);border:1px solid #cfdcf3;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--cobalt-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf6ea;border:1px solid #efdcbc;border-left:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.48;color:var(--cobalt-d);border-left:4px solid var(--sky);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--sky);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is, and `1fr` (= minmax(auto,1fr)) reintroduces that
   floor that the desktop minmax(0,1fr) avoids. Measured at 390: the grid box
   was 350px and its single column resolved to 522px, so the right-hand half of
   the block was clipped away by body{overflow-x:clip} with nothing to scroll
   and nothing to report. min-width:0 is the fix, and it belongs on the items at
   every width rather than only in the media query. */
.split__img,.split__body{min-width:0}

.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats div b{display:block;font-family:var(--display);font-size:2.2rem;font-weight:700;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#aac3e6;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem}
.versus>div:nth-child(3n+1){font-weight:600;background:#faf8f5}
.versus__h{background:var(--cobalt)!important;color:#fff;font-family:var(--display);font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix above. .inglist is a grid, .ingcard is a grid
   ITEM, and a grid item's default min-width is auto -- so the card cannot
   shrink below its min-content. `.ing__dose` is white-space:nowrap and one
   of these labels renders 221px wide, which set the floor: measured at 390
   the grid box was 346px and its column resolved to 423px. min-width:0 lets
   the card shrink; .ingcard__top already wraps, so the chip drops onto its
   own line and fits. */
.inglist>*{min-width:0}

.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:700;color:#fff;background:var(--cobalt);padding:4px 13px;border-radius:999px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-lg);overflow:hidden;position:relative}
/* No lift on the featured card. A `margin-top:-12px` raises its box, which
   makes it 12px TALLER than its siblings and trips responsive.md's rule that
   a pricing row shares one height and one button baseline. The card is
   already unmistakable from its accent border, its deeper shadow, its
   coloured head band and its flag, so the lift bought nothing and cost the
   check. (A transform would move it without changing the box, but the reveal
   animation overwrites transform -- that is why the lift was a margin.) */
.card--pack.featured{border-color:var(--cobalt);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:var(--cobalt);border-bottom-color:var(--cobalt)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.14rem;font-weight:700}
.pack__head span{font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--sky);color:#12315f;font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.35rem;font-weight:700;color:var(--ink);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:600;top:-.7em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:600;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:500}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--cobalt-d)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--cobalt-d)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--cobalt))}
.stars{color:#d99a1e;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:600;font-size:1.07rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.36rem;font-weight:400;color:var(--cobalt)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:.9375rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a
   URL is one unbreakable token. At 390 that pushed a single <a> to x=398
   against a 390 viewport on eleven pages -- clipped, unscrollable, and
   invisible to every static check. `anywhere` rather than `break-word`
   because it also lowers the element's MIN-CONTENT, which is what stops the
   ancestor being sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}

.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--cobalt);border-radius:0 0 var(--radius) var(--radius);padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:var(--cobalt);color:#fff;font-family:var(--display);font-weight:700;font-size:1.04rem;border-radius:50%}
.byline b{display:block;margin-bottom:6px;color:var(--cobalt-d)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final__img img{width:200px}
.final h2{margin:0 0 10px}
.final__price{font-weight:600;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--cobalt);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.08rem;color:var(--cobalt-d);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus (pitfall 86). */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:600;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:.875rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--cobalt-d)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: cobalt CTA slab, white list block, putty legal strip */
.fcta{background:linear-gradient(168deg,var(--cobalt) 0%,var(--cobalt-d) 100%);color:#fff;padding:48px 0 52px}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__eye{display:inline-block;font-family:var(--display);font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#cfe0f7;background:rgba(255,255,255,.14);padding:5px 14px;border-radius:999px;margin-bottom:10px}
.fcta__h{font-family:var(--display);font-size:1.68rem;font-weight:700;line-height:1.2;margin:0 0 10px;color:#fff}
.fcta p{color:#c4d5ee}
.fcta__sm{font-size:.9375rem;color:#a6bde0;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#a9cbf3}
.fcta__img img{width:280px}
footer{background:var(--panel)}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:28px;padding:44px 0 30px}
.fbrand{font-family:var(--display);font-size:1.8rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1}
.fbrand span{color:var(--cobalt)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--ink)}
.fh{font-family:var(--display);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--cobalt)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--ink)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--sky)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--cobalt-d);color:#fff;transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 20px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#aac3e6}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- responsive */
@media (max-width:1060px){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:26px}
}
@media (max-width:900px){
  :root{--navh:104px}
  .menu__more{display:block}
  .nav__buy{display:none}
  .burger{display:none}   /* the chip rail scrolls; there is no drawer to open */
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:17px}
  .sec{padding:44px 0}
  .sec--seam{padding-top:70px}
  .hero{padding-top:34px}
  .hero__media{margin-top:26px;padding:56px 0 40px}
  .figures{grid-template-columns:1fr;gap:10px;margin-bottom:-30px}
  .sec--seam{padding-top:56px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it gets pushed to the right of a line that has no room for it and
     overhangs the card edge. On a phone let it sit at the start of its own
     line and wrap its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
}

/* ==== 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(105%)}
/* ==== end directional chrome ==== */

/* --- 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}
/* ==== 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*/
/* =====================================================================
   getsciaticapro.com -- HOME PAGE surface pass. Assigned design slot:
   radius_card 18 / radius_control 12 / depth "one soft stop, no contact
   shadow (0 12px 30px)" / ribbon "corner flag" / motif family "settle".

   SCOPE. Every selector starts at body:has(.hero). class="hero" is on
   index.html and on no other page of this site (checked: grep -c over
   *.html and blog/ returns index.html only), so :has(.hero) IS the home
   page and nothing here can reach a sub-page, the header or the footer
   anywhere else. It also buys specificity: modern_surface.py and
   footer_type.py strip and re-append their blocks on every build and
   land AFTER this one, so these rules beat them at (0,2,x) or better
   rather than on source order.

   PAINT ONLY. Nothing here moves a box -- radius, shadow, background,
   colour, transform, transition, animation. Needs a restamp, not a
   rebuild.

   TOKENS are privately named (--sp-*). modern_surface.py rewrites
   --radius, --radius-sm, --shadow and --lift in a :root of its own on
   every build; naming these differently is what keeps them.
   ===================================================================== */
:root{
  --sp-rc:18px;                                 /* slot radius_card    */
  --sp-rk:12px;                                 /* slot radius_control */
  --sp-lift:0 12px 30px rgba(28,26,23,.11);     /* slot depth, tinted with --ink #1c1a17 */
  --sp-lift-hi:0 18px 40px rgba(28,26,23,.16);
  --sp-blue:0 12px 30px rgba(30,79,168,.30);    /* the same depth over the label's own cobalt */
  --sp-blue-hi:0 18px 38px rgba(21,56,116,.36);
}

/* ---- 1. surfaces -----------------------------------------------------
   One curve and one soft stop. The old --shadow was a hairline contact
   stop plus a wide ambient one on every panel; this slot drops the
   contact stop, which is what stops the page reading as ruled boxes. */
body:has(.hero) .card,
body:has(.hero) .ingcard,
body:has(.hero) .final,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .versus,
body:has(.hero) .callout,
body:has(.hero) .step,
body:has(.hero) .rel a,
body:has(.hero) .badgewall figure,
body:has(.hero) .figures div{border-radius:var(--sp-rc);box-shadow:var(--sp-lift)}

/* These two are deliberately tab-shaped -- a coloured rule along one
   edge with square corners against it. Scale the curve, keep the
   shape. */
body:has(.hero) .alert{border-radius:0 var(--sp-rc) var(--sp-rc) 0;box-shadow:var(--sp-lift)}
body:has(.hero) .byline{border-radius:0 0 var(--sp-rc) var(--sp-rc);box-shadow:var(--sp-lift)}
body:has(.hero) .split__img img{border-radius:var(--sp-rc)}

/* The Quick Answer is the one panel that sits on the warm ground with
   nothing behind it, so its shadow is tinted with the label's cobalt
   rather than with ink -- it reads as lit by the product, not as a
   grey box. */
body:has(.hero) .answer{border-radius:var(--sp-rc);box-shadow:0 12px 30px rgba(21,56,116,.11)}

/* ---- 2. controls -----------------------------------------------------
   Slot radius_control, 12px. A gradient on the BUYING cta only -- every
   one of them carries rel="sponsored nofollow", which is what makes
   this selector exact -- and the secondary left as a solid, so the pair
   in the hero reads as two weights rather than two buttons. */
body:has(.hero) .btn{
  border-radius:var(--sp-rk);
  transition:background-color .2s ease,color .2s ease,
             transform .2s ease,box-shadow .2s ease;
}
body:has(.hero) .btn[rel~="sponsored"]{
  background-image:linear-gradient(135deg,#2c66c9 0%,#1e4fa8 52%,#163d7e 100%);
  box-shadow:var(--sp-blue);
}
body:has(.hero) .btn[rel~="sponsored"]:hover{
  background-image:linear-gradient(135deg,#3873d6 0%,#2459b8 52%,#1a4489 100%);
  box-shadow:var(--sp-blue-hi);
}
body:has(.hero) .btn--ghost{
  background:var(--panel);color:var(--cobalt);
  box-shadow:inset 0 0 0 1px var(--line-2),var(--sp-lift);
}
body:has(.hero) .btn--ghost:hover{
  background:var(--cobalt-l);color:var(--cobalt-d);
  box-shadow:inset 0 0 0 1px var(--cobalt),var(--sp-lift-hi);
}
/* 2px answers the pointer without reflowing the row beside it. */
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(--sky);outline-offset:3px}
/* No input rule here on purpose: the home page carries no .field, and a
   selector that matches nothing is what this whole pass exists to avoid. */

/* A <summary> is a click target too, and this one answered the pointer
   with nothing but a cursor. */
body:has(.hero) .faq summary{transition:background-color .18s ease}
body:has(.hero) .faq summary:hover{background:#faf8f5}
body:has(.hero) .faq summary:focus-visible{outline:3px solid var(--sky);outline-offset:-3px}

/* The sticky bar is the buy button's shelf; give it the same light. */
body:has(.hero) .buybar{
  background:linear-gradient(180deg,#1b4a99 0%,#12305f 100%);
  box-shadow:0 -12px 30px rgba(28,26,23,.22);
}

/* ---- 3. the pricing row ----------------------------------------------
   GEOMETRY IS UNTOUCHED. Those three cards are engineered to share one
   height and one button baseline: fixed image box, pack__body flex:1,
   the cta on margin-top:auto. The featured card is NOT raised with a
   margin here -- this site's own note at .card--pack.featured records
   that a -12px lift made it 12px taller than its siblings and tripped
   the shared-height rule, and a transform is overwritten by the reveal
   pass. It is raised in DEPTH and colour instead: a cobalt-tinted
   shadow twice the size of its neighbours' and a tinted body. */
body:has(.hero) .card--pack{
  border-radius:var(--sp-rc);
  box-shadow:inset 0 0 0 1px var(--line),var(--sp-lift);
}
body:has(.hero) .card--pack:hover{
  box-shadow:inset 0 0 0 1px var(--line-2),var(--sp-lift-hi);
}
body:has(.hero) .card--pack.featured{
  background:linear-gradient(180deg,#f2f7ff 0%,#ffffff 38%);
  box-shadow:0 20px 46px rgba(21,56,116,.26);
}
body:has(.hero) .card--pack.featured:hover{
  box-shadow:0 26px 56px rgba(21,56,116,.32);
}
/* Slot ribbon: corner flag. The card clips it, so the outer corner
   follows the card curve and the inner one is cut. */
body:has(.hero) .pack__flag{
  background:var(--cobalt-l);color:var(--cobalt-d);
  border-radius:0 var(--sp-rc) 0 14px;
  box-shadow:0 6px 16px rgba(21,56,116,.16);
}
body:has(.hero) .card--pack.featured .pack__flag{
  background:linear-gradient(135deg,#2c66c9 0%,#153874 100%);color:#fff;
}
/* Dashed separators between the feature rows. Drawn as a background so
   the row keeps its exact height -- a border-bottom would add 1px per
   perk and the three packs carry 4, 5 and 5 of them. */
body:has(.hero) .pack__perks li{
  background-image:repeating-linear-gradient(to right,
    var(--line-2) 0 5px,transparent 5px 10px);
  background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;
}
body:has(.hero) .pack__perks li:last-child{background-image:none}

/* ---- 4. the hero motif: slot family "settle" -------------------------
   A soft halo that breathes once and settles, then stops. It replaces
   the two rotating rings that shipped here: those were drawn in
   rgba(30,79,168,.34) and .72 ON TOP of a #1e4fa8 -> #153874 band, i.e.
   cobalt on cobalt, and rendered as very nearly nothing.

   It lives on the pseudo-elements of the media column, never on the
   <img> -- that is the LCP element and is preloaded. Both shapes are
   sized LARGER than the 360px product card (600px and 448px) so they
   read outside it. transform and opacity only, one pass, ~5-6s, and
   both are switched off under prefers-reduced-motion. The keyframe
   names are new: this sheet already owns spThread and spPulse. */
body:has(.hero) .hero{
  background:radial-gradient(118% 86% at 50% -4%,
    #e9edf7 0%,#f4f1ec 56%,#f4f1ec 100%);
}
body:has(.hero) .hero__media::before{
  content:'';position:absolute;left:50%;top:50%;
  width:min(600px,96vw);aspect-ratio:1;translate:-50% -50%;
  border:0;border-radius:50%;-webkit-mask:none;mask:none;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.26) 0%,rgba(150,195,238,.21) 44%,rgba(30,79,168,0) 74%);
  opacity:0;transform:scale(.86);
  animation:scpHaloSettle 4.8s cubic-bezier(.22,.7,.28,1) .2s 1 both;
  z-index:0;pointer-events:none;
}
body:has(.hero) .hero__media::after{
  content:'';position:absolute;left:50%;top:50%;
  width:min(448px,84vw);aspect-ratio:1;translate:-50% -50%;
  border:1px solid rgba(255,255,255,.26);border-radius:50%;
  background:none;-webkit-mask:none;mask:none;
  opacity:0;transform:scale(.9);
  animation:scpRingSettle 6.4s cubic-bezier(.16,.78,.3,1) .55s 1 both;
  z-index:1;pointer-events:none;
}
@keyframes scpHaloSettle{
  0%{opacity:0;transform:scale(.86)}
  46%{opacity:1;transform:scale(1.045)}
  100%{opacity:.86;transform:scale(1)}
}
@keyframes scpRingSettle{
  0%{opacity:0;transform:scale(.9)}
  40%{opacity:.85;transform:scale(1.03)}
  100%{opacity:.5;transform:scale(1)}
}

/* ---- 5. motion off ---------------------------------------------------
   The block above the critical marker already carries a reduced-motion
   rule for these two pseudo-elements, and it sets opacity:0!important.
   These are more specific, so the halo stays visible -- it just never
   moves. */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before{
    animation:none!important;opacity:.86!important;transform:none!important;
  }
  body:has(.hero) .hero__media::after{
    animation:none!important;opacity:.5!important;transform:none!important;
  }
  body:has(.hero) .btn{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .card--pack:hover{transform:none!important}
}
/*!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 li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fcard p{font-size:16px}
footer .fh{font-size:15px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 22 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 (28,26,23), 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(28,26,23,.06), 0 6px 18px rgba(28,26,23,.07);
  --lift:0 2px 6px rgba(28,26,23,.09), 0 16px 34px rgba(28,26,23,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.split__img,
.answer{box-shadow:var(--shadow)}

/* 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. */
.keypoints,
.alert,
.byline,
.split__img{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{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure: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{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}

/*!SITE-REFRESH 2026-09-30 (getsciaticapro, gsp): phone menu, credential card, signed-off panel, pre-order check, reading shelf,
   doctor-first cards, reviewer card, policy page, readability floors, motion layer*/
:root{--ink-3:#655f57}.bw small{font-size:13px}@media (max-width:560px){.util .gsp-lg{display:none}.util__row{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}}@media (max-width:900px){.nav .gsp-burger{display:block;flex:0 0 auto;width:46px;height:44px;padding:13px 12px;background:var(--panel)}.menu.open{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:6px;overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px);overscroll-behavior:contain;padding:10px 0 14px}.menu.open a{display:block;white-space:normal;padding:10px 16px;border-radius:12px;font-size:16px;line-height:1.35}}.gsp-burger span{transition:transform .2s ease,opacity .2s ease}.gsp-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.gsp-burger[aria-expanded="true"] span:nth-child(2){opacity:0}.gsp-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.gsp-mono{flex:0 0 auto;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(140deg,#2c66c9,#153874);color:#fff;font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.04em;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28),0 0 0 3px var(--cobalt-l)}.gsp-mono--sm{width:30px;height:30px;font-size:13px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.gsp-mono--lg{width:64px;height:64px;font-size:22px}.gsp-byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:var(--measure-wide);margin:2px 0 18px;font-size:16px;line-height:1.45;color:var(--ink-2)}.gsp-byline>span:last-child{flex:1 1 220px;min-width:0}.gsp-byline a{font-weight:600}
.bw small{font-size:13px!important}
.refs li{font-size:16px!important}
.tnote,.final__sm,.buy__note,.byline p,.postmeta,.pack__perks{font-size:16px!important}
.pack__flag{font-size:13px!important}
.hero__cap{font-size:16px!important}
.fcta__eye{color:#fff!important}
body:has(.hero) .pack__perks li{color:var(--ink)!important}
.gsp-pre{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gsp-pre__col{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 22px 18px;box-shadow:var(--shadow)}
.gsp-pre__col h3{margin:0 0 12px}
.gsp-pre__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gsp-pre__col li{position:relative;padding-left:34px;margin:0;font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.gsp-pre__col li::before{content:"";position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:50%;background:var(--cobalt-l);box-shadow:inset 0 0 0 2px var(--cobalt)}
.gsp-pre__col--go li::before{background:#e3f1ea;box-shadow:inset 0 0 0 2px var(--good)}
.gsp-pre__col--doc{border-top:4px solid var(--cobalt)}
.gsp-pre__col--go{border-top:4px solid var(--good)}
.gsp-pre__urgent{margin:18px 0 0;padding:16px 20px;border-radius:14px;background:var(--cobalt-l);border-left:4px solid var(--cobalt-d);color:var(--ink);font-size:16.5px}
@media (max-width:860px){.gsp-pre{grid-template-columns:1fr}}
.gsp-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gsp-shelf__item{display:grid;gap:6px;align-content:start;min-width:0;padding:20px 20px 18px;background:var(--panel);border:1px solid var(--line);border-radius:18px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow)}
.gsp-shelf__item:hover{color:var(--ink);box-shadow:var(--lift)}
.gsp-shelf__kind{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)}
.gsp-shelf__item strong{font-family:var(--display);font-size:19px;line-height:1.25;color:var(--cobalt-d)}
.gsp-shelf__item span:not(.gsp-shelf__kind){font-size:16px;color:var(--ink-2)}
@media (max-width:900px){.gsp-shelf{grid-template-columns:1fr}}
.gsp-sign{padding:16px 0 64px}
.gsp-sign__card{max-width:960px;margin:0 auto;border-radius:20px;overflow:hidden;background:var(--panel);border:1px solid var(--line);box-shadow:0 14px 34px rgba(21,56,116,.12)}
.gsp-sign__top{display:flex;align-items:center;gap:16px;padding:20px 24px;background:linear-gradient(135deg,#1e4fa8,#153874);color:#fff}
.gsp-sign__top .gsp-mono{background:#fff;color:var(--cobalt-d);box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.gsp-sign__k{margin:0 0 2px;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#d5e4f8}
.gsp-sign__top h2{margin:0;color:#fff;font-size:clamp(1.3rem,1.05rem + 1vw,1.75rem)}
.gsp-sign__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:6px 24px}
.gsp-sign__list>div{padding:14px 0;border-bottom:1px dashed var(--line-2)}
.gsp-sign__list>div:nth-child(odd){padding-right:22px}
.gsp-sign__list dt{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)}
.gsp-sign__list dd{margin:2px 0 0;font-size:16.5px;line-height:1.45;color:var(--ink)}
.gsp-sign__list dd a{font-weight:700;color:var(--cobalt-d)}
.gsp-sign__note{margin:6px 24px 0;padding:14px 16px;border-radius:12px;background:var(--cobalt-l);color:var(--ink);font-size:16.5px}
.gsp-sign__links{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:16px 24px 22px}
.gsp-sign__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--paper);font-family:var(--display);font-weight:700;font-size:15px;color:var(--cobalt-d);text-decoration:none}
.gsp-sign__links a:hover{background:var(--cobalt-l);border-color:var(--cobalt)}
@media (max-width:700px){.gsp-sign__list{grid-template-columns:1fr}.gsp-sign__list>div:nth-child(odd){padding-right:0}.gsp-sign__top{padding:18px}}
.gsp-doc{border-top:4px solid var(--sky)}
.gsp-doc--now{border-top-color:var(--cobalt-d);background:#f3f7fd}
.gsp-doc p:last-child{margin:0}
.gsp-doc-line{margin:20px 0 0;padding:16px 20px;border-radius:14px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--cobalt);font-weight:600;color:var(--ink)}
.gsp-rev{display:flex;gap:18px;align-items:flex-start;max-width:var(--measure-wide);margin-inline:auto;padding:24px;border-radius:20px;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--cobalt);box-shadow:var(--shadow)}
.gsp-rev h2{margin:4px 0 10px}
.gsp-rev p:last-child{margin:0}
@media (max-width:560px){.gsp-rev{flex-direction:column}}
.gsp-toc{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.gsp-toc a{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:15px;color:var(--cobalt-d);text-decoration:none}
.gsp-toc a:hover{border-color:var(--cobalt);background:var(--cobalt-l)}
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:no-preference){
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn[rel~="sponsored"]::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-135%);pointer-events:none}
.hero .btn[rel~="sponsored"]::after,.fcta .btn[rel~="sponsored"]::after{animation:gspSheen 7s ease 2.4s infinite}
.btn[rel~="sponsored"]:hover::after{animation:gspSheen 1s ease}
@keyframes gspSheen{0%,74%{transform:translateX(-135%)}100%{transform:translateX(135%)}}
.gsp-rip{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;z-index:-1;animation:gspRip .6s ease-out forwards}
@keyframes gspRip{from{transform:scale(0);opacity:1}to{transform:scale(13);opacity:0}}
.btn.gsp-mag{translate:var(--gmx,0px) var(--gmy,0px);transition:translate .22s ease,transform .2s ease,box-shadow .2s ease,background .18s ease}
.gsp-tilt{transition:transform .3s ease,box-shadow .3s ease,opacity .5s ease}
.gsp-tilt.is-tilting{transform:perspective(900px) rotateX(var(--grx,0deg)) rotateY(var(--gry,0deg)) translateY(-3px)}
}