/* Shared redesign components (same look as the home, Nov 2026). Load after /assets/pages.css.
   rx-* = page layout pieces, hx-* = the home's building blocks (eyebrow, buttons, cream band). */
:root { --red:#e3350d; --red-2:#ff5a36; --cream:#f7f0e3; --brown:#3b2a14; --brown-2:#6f5a3c; --ink-dark:#20160a; --bad:#ff6b5a; --warn:#f4b740; }

/* layout */
html { overflow-x:hidden; } body { overflow-x:clip; } /* no sideways wobble on phones: nothing may stick out past the screen */
.rx { max-width:1180px; margin:0 auto; padding:24px 16px 32px; }
.rx > .crumbs { margin-bottom:0; }
.rx-narrow { max-width:60rem; margin-inline:auto; }
.rx-sec { margin-top:88px; }
.rx-sec > .hx-sub, .rx-head .hx-sub { margin-inline:0; }
.rx-head { max-width:40rem; }
.rx-head.c { margin-inline:auto; text-align:center; }
.rx-head.c .hx-sub { margin-inline:auto; }

/* type + buttons */
.hx-eb { font:600 12px/1.4 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.hx-h2 { font-size:clamp(28px,4vw,40px); font-weight:800; line-height:1.08; letter-spacing:-.02em; margin:8px 0 0; }
.hx-sub { color:var(--soft); font-size:18px; margin-top:10px; max-width:34em; }
.hx-btn { display:inline-flex; align-items:center; gap:10px; border-radius:999px; font:700 16px var(--sans); padding:15px 26px; transition:transform .15s; cursor:pointer; text-decoration:none; border:0; }
.hx-btn:hover { transform:translateY(-2px); }
.hx-btn.gold { background:var(--accent); color:var(--on-text); }
.hx-btn.ghost { background:none; border:2px solid var(--line-2); color:var(--text); }
.hx-btn.red { background:var(--red); color:#fff; }

/* hero: text left, visual right */
.rx-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding-block:28px 40px; }
.rx-hero h1 { font-size:clamp(38px,5.4vw,60px); font-weight:800; line-height:1.04; letter-spacing:-.03em; margin:14px 0 18px; }
.rx-hero h1 .hx-eb { display:block; margin-bottom:14px; }
.rx-hero h1 em { font-style:normal; color:var(--accent-2); }
.rx-lead { font-size:19px; color:var(--soft); max-width:30em; margin:0; }
.rx-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.rx-trust { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; font-size:14px; color:var(--muted); }
.rx-trust span::before { content:"✓"; color:var(--pass); font-weight:800; margin-right:7px; }
.rx-stage { position:relative; justify-self:center; width:min(400px,100%); margin:20px 0; }
.rx-glow { position:absolute; inset:-12% -6%; background:radial-gradient(closest-side,rgba(232,185,49,.26),transparent); filter:blur(10px); pointer-events:none; }
.rx-chip { position:absolute; z-index:3; background:rgba(7,13,31,.92); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:16px; padding:10px 14px; box-shadow:0 20px 40px -18px rgba(0,0,0,.8); pointer-events:none; }
.rx-chip small { display:block; font:600 11px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.rx-chip strong { font:700 20px var(--sans); letter-spacing:-.02em; }
.rx-chip.pill { left:50%; bottom:-22px; transform:translateX(-50%); background:var(--accent); color:var(--on-text); border:0; white-space:nowrap; font:800 15px var(--sans); padding:10px 20px; border-radius:999px; }
@media (max-width:860px) { .rx-hero { grid-template-columns:1fr; gap:34px; padding-top:12px; } }
@media (max-width:560px) { .rx-hero h1 { font-size:36px; margin:10px 0 12px; } .rx-lead { font-size:17px; } .rx-cta { margin-top:20px; } .rx-cta .hx-btn { padding:13px 18px; font-size:15px; } .rx-trust { display:none; } .rx-stage { width:80%; } }

/* before / after slider: <div class="rx-ba" style="--p:50%"><img><img class="after"><input type=range></div> */
.rx-ba { --p:50%; position:relative; border-radius:22px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06); line-height:0; user-select:none; }
.rx-ba img { display:block; width:100%; height:auto; }
.rx-ba img.after { position:absolute; inset:0; height:100%; clip-path:inset(0 0 0 var(--p)); }
.rx-ba::after { content:""; position:absolute; top:0; bottom:0; left:var(--p); width:3px; margin-left:-1.5px; background:var(--accent); box-shadow:0 0 0 1px rgba(0,0,0,.35); pointer-events:none; }
.rx-ba .knob { position:absolute; top:50%; left:var(--p); width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:var(--accent); color:var(--on-text); display:grid; place-items:center; font:800 16px var(--sans); box-shadow:0 8px 20px rgba(0,0,0,.5); pointer-events:none; z-index:2; line-height:1; }
.rx-ba input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4; }
.rx-ba .lab { position:absolute; top:12px; z-index:2; font:700 11px var(--sans); letter-spacing:.08em; text-transform:uppercase; background:rgba(7,13,31,.85); color:var(--text); padding:5px 10px; border-radius:999px; line-height:1.3; pointer-events:none; }
.rx-ba .lab.l { left:12px; } .rx-ba .lab.r { right:12px; background:var(--accent); color:var(--on-text); }
.rx-ba input:focus-visible ~ .knob { outline:3px solid var(--inner); outline-offset:3px; }

/* tool box heading (above an existing tool) */
.rx-toolhead { text-align:center; margin-bottom:18px; }
.rx-toolhead h2 { font-size:clamp(26px,3.4vw,34px); font-weight:800; margin:6px 0 0; letter-spacing:-.02em; }

/* photo cards grid (dark) */
.rx-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
.rx-cards.five { grid-template-columns:repeat(6,1fr); }
.rx-cards.five > * { grid-column:span 2; }
.rx-cards.five > :nth-child(4) { grid-column:2 / span 2; }
.rx-card { background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden; display:flex; flex-direction:column; }
.rx-card .ph { position:relative; aspect-ratio:4/3; background:#091127; overflow:hidden; }
.rx-card .ph img, .rx-card .ph svg { width:100%; height:100%; object-fit:cover; display:block; }
.rx-card .ph .tag { position:absolute; left:12px; top:12px; font:700 11px var(--sans); letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--accent); color:var(--on-text); }
.rx-card .ph .tag.ill { left:auto; top:auto; bottom:12px; right:12px; background:rgba(7,13,31,.85); color:var(--soft); }
.rx-card .bd { padding:18px 20px 22px; }
.rx-card h3 { font-size:20px; margin:0; }
.rx-card p { color:var(--muted); font-size:15px; margin:6px 0 0; }
.rx-card p b { color:var(--soft); font-weight:600; }
@media (max-width:960px) { .rx-cards, .rx-cards.five { grid-template-columns:repeat(2,1fr); } .rx-cards.five > *, .rx-cards.five > :nth-child(4) { grid-column:auto; } }
@media (max-width:560px) { .rx-cards { gap:12px; } .rx-cards.five { grid-template-columns:1fr 1fr; } .rx-card .bd { padding:12px 14px 16px; } .rx-card h3 { font-size:16px; } .rx-card p { font-size:13px; } }

/* cream band */
.hx-cream { background:var(--cream); color:var(--brown); border-radius:40px; padding:80px 0 90px; margin:88px 0 0; }
.hx-cream .hx-eb { color:var(--red); }
.hx-cream .hx-h2, .hx-cream h3 { color:var(--ink-dark); }
.hx-cream .hx-sub { color:var(--brown-2); }
.hx-cream a:not(.hx-btn) { color:var(--red); }
.rx-band { max-width:1180px; margin:0 auto; padding-inline:clamp(16px,4vw,48px); }
@media (max-width:560px) { .hx-cream { border-radius:28px; padding:56px 0 64px; margin-top:64px; } }

/* numbered steps (light, inside cream) */
.rx-split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:34px; }
.rx-ol { list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:rx; }
.rx-ol li { counter-increment:rx; display:grid; grid-template-columns:44px 1fr; gap:2px 14px; background:#fff; border-radius:18px; padding:14px 16px; box-shadow:0 14px 30px -24px rgba(59,42,20,.6); }
.rx-ol li::before { content:counter(rx); grid-row:span 2; width:44px; height:44px; border-radius:14px; background:var(--red); color:#fff; display:grid; place-items:center; font:800 18px var(--sans); }
.rx-ol strong { color:var(--ink-dark); font-size:17px; }
.rx-ol span { color:var(--brown-2); font-size:15px; }
.rx-fig { background:#fff; border-radius:28px; padding:18px; box-shadow:0 14px 30px -24px rgba(59,42,20,.6); }
.rx-fig svg { display:block; width:100%; height:auto; }
@media (max-width:860px) { .rx-split { grid-template-columns:1fr; gap:24px; } }

/* expandable extra tips */
.rx-more { margin-top:22px; background:#fff; border-radius:18px; box-shadow:0 14px 30px -24px rgba(59,42,20,.6); }
.rx-more > summary { list-style:none; cursor:pointer; padding:16px 20px; font-weight:700; color:var(--ink-dark); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.rx-more > summary::-webkit-details-marker { display:none; }
.rx-more > summary::after { content:"+"; font:800 22px var(--sans); color:var(--red); }
.rx-more[open] > summary::after { content:"–"; }
.rx-more ul { margin:0; padding:0 20px 18px 40px; color:var(--brown-2); }
.rx-more li { margin:6px 0; }
.rx-more li strong { color:var(--ink-dark); }

/* next steps path */
.rx-path { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.rx-path a, .rx-path div { position:relative; display:block; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:20px; color:var(--text); text-decoration:none; transition:transform .15s,border-color .15s; }
.rx-path a:hover { transform:translateY(-3px); border-color:var(--accent); }
.rx-path .n { font:600 12px var(--mono); color:var(--accent); letter-spacing:.06em; }
.rx-path strong { display:block; font-size:19px; margin-top:6px; }
.rx-path span { display:block; color:var(--muted); font-size:14px; margin-top:4px; }
.rx-path .here { border-color:var(--accent); background:linear-gradient(160deg,rgba(232,185,49,.14),var(--surface)); }
.rx-path .here::after { content:"You are here"; position:absolute; top:16px; right:16px; font:700 10px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
@media (max-width:760px) { .rx-path { grid-template-columns:1fr; gap:10px; } }

/* verdict stamps */
.rx-stamp { display:inline-block; font:900 15px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; padding:10px 14px; border:3px solid currentColor; border-radius:10px; transform:rotate(-4deg); white-space:nowrap; }
.rx-stamp.go { color:var(--pass); } .rx-stamp.maybe { color:var(--warn); } .rx-stamp.no { color:var(--bad); }
.hx-cream .rx-stamp.go { color:#138a55; } .hx-cream .rx-stamp.maybe { color:#b7790a; } .hx-cream .rx-stamp.no { color:#c4321f; }

/* callout + FAQ polish inside rx pages */
.rx .callout { border-radius:18px; }
.rx-faq { max-width:46rem; margin-inline:auto; }
.rx-faq h2 { text-align:center; }
.rx .faq { display:grid; gap:10px; margin-top:24px; }
.rx .faq details { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 20px; }
.rx .faq summary { font-size:16px; }
.rx .faq summary::after { color:var(--accent); font-weight:700; }
.rx .faq details p { color:var(--soft); font-size:15px; }
.rx .callout p, .rx .callout strong { color:var(--text); }
@media (prefers-reduced-motion:reduce) { .hx-btn, .rx-path a { transition:none; } }
@media (max-width:560px) { .rx-glow { inset:-8% 0; } }
/* Small phones: keep the logo and the header button on one line (2026-11-08) */
@media (max-width:400px) { header .brand { gap:7px; font-size:15px; } header .brand div { white-space:nowrap; } header .cta-mini { white-space:nowrap; padding:8px 11px; font-size:13px; } }
@media (max-width:350px) { header .cta-mini { display:none; } }