/* ==========================================================================
   Slim4Medoc — Design System v2
   Editorial authority. Data-forward. Built for an information product.
   ========================================================================== */

:root{
  /* Brand */
  --brand:#0D7A7A;
  --brand-deep:#095C5C;
  --brand-lift:#12A0A0;
  --brand-wash:#EAF5F5;
  --brand-veil:rgba(13,122,122,.09);

  --accent:#12864F;
  --accent-wash:#E8F4EE;

  /* Ink */
  --ink:#16232B;
  --ink-2:#3B4A55;
  --ink-3:#657481;
  --ink-4:#94A1AC;

  /* Surfaces */
  --paper:#FBFCFC;
  --card:#FFFFFF;
  --rule:#E3E9EB;
  --rule-soft:#EFF3F4;

  /* Signal */
  --gold:#A9761A;
  --gold-wash:#FCF5E8;
  --flag:#A9321F;
  --flag-wash:#FDF2F0;

  /* Type */
  --serif:'Fraunces','Georgia',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Scale */
  --x1:4px;  --x2:8px;  --x3:12px; --x4:16px; --x5:24px;
  --x6:32px; --x7:48px; --x8:72px; --x9:104px; --x10:140px;

  /* Radius */
  --r1:4px; --r2:8px; --r3:12px; --r4:18px; --r5:26px; --rp:999px;

  /* Frame */
  --page:1200px;
  --read:700px;

  /* Depth */
  --d1:0 1px 2px rgba(22,35,43,.05);
  --d2:0 6px 20px -6px rgba(22,35,43,.11), 0 1px 3px rgba(22,35,43,.05);
  --d3:0 24px 56px -16px rgba(22,35,43,.18), 0 2px 10px rgba(22,35,43,.05);

  /* Motion */
  --glide:cubic-bezier(.2,.7,.3,1);
  --spring:cubic-bezier(.34,1.4,.44,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ---------- Layout ---------- */
.page{max-width:var(--page);margin:0 auto;padding:0 var(--x5)}
.read{max-width:var(--read)}
.band{padding:var(--x9) 0}
.band-sm{padding:var(--x8) 0}
@media(max-width:720px){
  .band{padding:var(--x8) 0}
  .band-sm{padding:var(--x7) 0}
}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.13;letter-spacing:-.02em;font-weight:600}
h1{font-size:clamp(36px,5.2vw,62px);letter-spacing:-.032em}
h2{font-size:clamp(27px,3.4vw,40px);letter-spacing:-.026em}
h3{font-size:clamp(20px,2.2vw,25px)}
h4{font-size:19px;letter-spacing:-.012em}
p{margin-bottom:var(--x4);max-width:68ch}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brand-deep)}
ul,ol{margin:0 0 var(--x4) var(--x5);max-width:68ch}
li{margin-bottom:var(--x2)}
strong{font-weight:650}

.kicker{
  font-family:var(--sans);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;color:var(--brand);
  display:block;margin-bottom:var(--x3);
}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.6;color:var(--ink-2);max-width:62ch}
.fine{font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.band-head{max-width:64ch;margin-bottom:var(--x7)}
.band-head p{color:var(--ink-2);font-size:18px;margin-bottom:0}

/* ---------- Motion ----------
   RULE: content is never hidden. Nothing on this site may depend on
   JavaScript, a timer or a scroll event in order to become visible.
   Motion lives on interaction (hover, focus, open/close), never on
   whether a reader has scrolled far enough to earn the text.

   .up and .d1-.d5 are kept as inert hooks so the markup stays stable. */
.up,.d1,.d2,.d3,.d4,.d5{opacity:1;transform:none}

/* Optional entrance, CSS-only and scroll-linked. Browsers without
   view timelines simply render the content normally. Opacity never
   starts below .001% of a frame's worth of hidden, so a screenshot
   or a crawler can never catch it blank. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .up{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 32%;
    }
    @keyframes rise{
      from{opacity:.55;transform:translateY(14px)}
      to{opacity:1;transform:none}
    }
  }
}

@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@keyframes sheen{from{background-position:-200% 0}to{background-position:200% 0}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .up{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--x2);
  padding:13px 22px;border-radius:var(--rp);
  font-size:15.5px;font-weight:600;text-decoration:none;
  transition:transform .2s var(--spring),box-shadow .2s var(--glide),background .2s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-1{background:var(--brand);color:#fff;box-shadow:0 4px 14px -3px rgba(13,122,122,.42)}
.btn-1:hover{background:var(--brand-deep);color:#fff;box-shadow:0 8px 22px -4px rgba(13,122,122,.5)}
.btn-2{background:var(--card);color:var(--ink);border:1px solid var(--rule);box-shadow:var(--d1)}
.btn-2:hover{border-color:var(--brand);color:var(--brand);box-shadow:var(--d2)}
.btn-ghost{color:var(--brand);padding:13px 6px}
.btn-ghost:hover{gap:var(--x3)}
.btn svg{flex-shrink:0;transition:transform .2s var(--glide)}
.btn-ghost:hover svg{transform:translateX(3px)}

/* ---------- Announce ---------- */
.announce{
  background:var(--ink);color:#DCE5E8;
  font-size:13.5px;text-align:center;padding:10px var(--x8) 10px var(--x5);
  position:relative;
}
.announce a{color:#6FD3C4;font-weight:600}
.announce b{color:#fff;font-weight:650}
.announce-x{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:#7A8B94;font-size:18px;line-height:1;padding:5px 9px;border-radius:var(--r1);
}
.announce-x:hover{color:#fff;background:rgba(255,255,255,.09)}

/* ---------- Header ---------- */
.top{
  position:sticky;top:0;z-index:80;
  background:rgba(251,252,252,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.top.pinned{border-bottom-color:var(--rule);box-shadow:0 1px 20px -8px rgba(22,35,43,.16);background:rgba(251,252,252,.95)}
.top-in{
  max-width:var(--page);margin:0 auto;padding:var(--x4) var(--x5);
  display:flex;align-items:center;gap:var(--x6);
  transition:padding .3s var(--glide);
}
.top.pinned .top-in{padding-top:11px;padding-bottom:11px}

.mark{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.mark svg{transition:transform .35s var(--spring)}
.mark:hover svg{transform:rotate(-6deg) scale(1.06)}
.mark-t{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.mark-t .p1{color:var(--brand)}
.mark-t .p2{color:var(--accent);font-size:.66em;vertical-align:.32em;padding:0 .04em;font-weight:700}
.mark-t .p3{color:var(--ink)}

.menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.menu-item{position:relative}
.menu-a{
  display:flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:var(--r2);
  font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;
  transition:color .18s,background .18s;
}
.menu-a:hover,.menu-item.live .menu-a{color:var(--brand-deep);background:var(--brand-wash)}
.caret{
  width:8px;height:8px;opacity:.5;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(45deg) translate(-1px,-2px);
  transition:transform .25s var(--glide);
}
.menu-item.live .caret{transform:rotate(-135deg) translate(-2px,-1px)}

.drop{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(-8px) scale(.98);
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r4);
  box-shadow:var(--d3);padding:var(--x4);min-width:460px;
  opacity:0;visibility:hidden;transition:all .25s var(--glide);z-index:90;
}
.menu-item.live .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1)}
.drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.drop-a{display:block;padding:11px 13px;border-radius:var(--r2);text-decoration:none;transition:background .16s}
.drop-a:hover{background:var(--paper)}
.drop-t{font-weight:600;font-size:14.5px;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.drop-p{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent)}
.drop-d{font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:2px}
.drop-foot{
  margin-top:var(--x3);padding-top:var(--x3);border-top:1px solid var(--rule-soft);
  display:flex;justify-content:space-between;align-items:center;gap:var(--x4);font-size:13.5px;
}

.top-act{display:flex;align-items:center;gap:var(--x2);margin-left:var(--x3)}
.hamb{display:none;flex-direction:column;gap:4.5px;padding:9px}
.hamb span{width:21px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--glide)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:var(--x9) 0 var(--x8);background:var(--card);border-bottom:1px solid var(--rule)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(780px 460px at 88% -10%, var(--brand-veil) 0%, transparent 64%),
    radial-gradient(620px 400px at 4% 104%, rgba(18,134,79,.07) 0%, transparent 62%);
}
.hero-in{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:var(--x8);align-items:center}
.hero h1{margin-bottom:var(--x5)}
.hero .lede{margin-bottom:var(--x6)}
.hero-cta{display:flex;gap:var(--x3);flex-wrap:wrap;margin-bottom:var(--x6)}

.hero-tags{display:flex;gap:var(--x5);flex-wrap:wrap;font-size:13.5px;color:var(--ink-3)}
.hero-tags span{display:flex;align-items:center;gap:7px}
.hero-tags svg{color:var(--accent);flex-shrink:0}

/* Answer block — the AI-overview target */
.answer{
  background:var(--brand-wash);
  border-left:3px solid var(--brand);
  border-radius:0 var(--r3) var(--r3) 0;
  padding:var(--x5) var(--x5) var(--x5) var(--x5);
  margin-bottom:var(--x6);
}
.answer p{margin:0;font-size:17.5px;line-height:1.62;color:var(--ink);max-width:none}
.answer p+p{margin-top:var(--x3)}

/* ---------- Price panel ---------- */
.panel{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r5);
  box-shadow:var(--d3);overflow:hidden;
}
.panel-top{
  padding:var(--x5) var(--x5) var(--x4);
  border-bottom:1px solid var(--rule-soft);
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--x4);
}
.panel-top h4{margin-bottom:3px}
.panel-rows{padding:var(--x2) 0}
.prow{
  display:flex;align-items:center;gap:var(--x4);
  padding:13px var(--x5);text-decoration:none;
  transition:background .16s;position:relative;
}
.prow:hover{background:var(--paper)}
.prow::after{
  content:"";position:absolute;left:var(--x5);right:var(--x5);bottom:0;
  height:1px;background:var(--rule-soft);
}
.prow:last-child::after{display:none}
.prow-n{flex:1;min-width:0}
.prow-t{font-weight:600;font-size:15.5px;color:var(--ink);display:block}
.prow-s{font-size:12.5px;color:var(--ink-3)}
.prow-p{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap}
.prow-p small{display:block;font-family:var(--sans);font-size:11px;font-weight:500;color:var(--ink-4);text-align:right}
.panel-foot{padding:var(--x4) var(--x5);background:var(--paper);border-top:1px solid var(--rule-soft);font-size:13px;color:var(--ink-3)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:var(--x5)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r4);
  padding:var(--x5);transition:transform .3s var(--glide),box-shadow .3s var(--glide),border-color .3s;
}
.card-l{display:block;text-decoration:none}
.card-l:hover{transform:translateY(-4px);box-shadow:var(--d3);border-color:var(--brand-wash)}
.card h3,.card h4{margin-bottom:var(--x2)}
/* Link-card titles and the lead-form title look like headings but are not
   section headings. Keeping them out of h2/h3 stops the same twenty strings
   repeating across the site's heading outline. */
.card-t{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.25;
        color:var(--ink);margin:var(--x4) 0 var(--x2)}
.lead-h{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,31px);
        line-height:1.15;color:#fff;margin:0 0 var(--x3)}
.card p{font-size:15px;color:var(--ink-2);margin-bottom:0}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--rp);
  font-size:12px;font-weight:600;letter-spacing:.01em;
}
.chip-b{background:var(--brand-wash);color:var(--brand-deep)}
.chip-a{background:var(--accent-wash);color:var(--accent)}
.chip-g{background:var(--gold-wash);color:var(--gold)}

.icon-tile{
  width:44px;height:44px;border-radius:var(--r3);
  display:grid;place-items:center;margin-bottom:var(--x4);
  background:var(--brand-wash);color:var(--brand);
}

/* Numbered step */
.step-n{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--brand);color:#fff;
  font-family:var(--mono);font-size:14px;font-weight:600;
}

/* ---------- Data table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r4);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:14px var(--x4);text-align:left;border-bottom:1px solid var(--rule-soft)}
th{
  background:var(--paper);font-weight:650;font-size:12px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
  position:sticky;top:0;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--paper)}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- Callouts ---------- */
.note{border-radius:var(--r3);padding:var(--x4) var(--x5);margin-bottom:var(--x5);font-size:15.5px}
.note p:last-child{margin-bottom:0}
.note-i{background:var(--brand-wash);border:1px solid #CBE4E4;color:var(--ink)}
.note-w{background:var(--gold-wash);border:1px solid #EDD9AE;color:var(--ink)}
.note-f{background:var(--flag-wash);border:1px solid #F0CFC9;color:var(--ink)}

/* ---------- Accordion ---------- */
.acc{border-top:1px solid var(--rule)}
.acc-i{border-bottom:1px solid var(--rule)}
.acc-b{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--x4);
  padding:var(--x5) 0;text-align:left;
  font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);
  transition:color .18s;
}
.acc-b:hover{color:var(--brand)}
.acc-ic{
  width:26px;height:26px;flex-shrink:0;border-radius:50%;
  border:1px solid var(--rule);display:grid;place-items:center;
  transition:transform .3s var(--glide),background .25s,border-color .25s;
  position:relative;
}
.acc-ic::before,.acc-ic::after{
  content:"";position:absolute;background:var(--ink-2);border-radius:2px;transition:.3s var(--glide);
}
.acc-ic::before{width:11px;height:1.7px}
.acc-ic::after{width:1.7px;height:11px}
.acc-i.open .acc-ic{background:var(--brand);border-color:var(--brand);transform:rotate(180deg)}
.acc-i.open .acc-ic::before{background:#fff}
.acc-i.open .acc-ic::after{transform:scaleY(0);background:#fff}
.acc-p{max-height:0;overflow:hidden;transition:max-height .4s var(--glide)}
.acc-c{padding-bottom:var(--x5);color:var(--ink-2);font-size:16px}
.acc-c p:last-child,.acc-c ul:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:#B4C1C8;padding:var(--x8) 0 var(--x5);font-size:14.5px}
.foot h5{
  font-family:var(--sans);font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;color:#fff;margin-bottom:var(--x4);
}
.foot a{color:#B4C1C8;text-decoration:none;transition:color .18s}
.foot a:hover{color:#6FD3C4}
.foot ul{list-style:none;margin:0}
.foot li{margin-bottom:10px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--x6);margin-bottom:var(--x7)}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.11);padding-top:var(--x5);
  display:flex;justify-content:space-between;gap:var(--x5);flex-wrap:wrap;font-size:13px;color:#8595A0;
}
.foot-mark{font-family:var(--serif);font-size:22px;color:#fff;margin-bottom:var(--x3);display:block}

/* ---------- Breadcrumb ---------- */
.crumb{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--ink-3);margin-bottom:var(--x5);flex-wrap:wrap}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--brand)}
.crumb i{opacity:.45;font-style:normal}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:var(--x7)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--x6)}
}
@media(max-width:820px){
  .menu{display:none}
  .hamb{display:flex}
  .g3{grid-template-columns:1fr}
}
@media(max-width:620px){
  body{font-size:16.5px}
  .g2,.g4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero{padding:var(--x7) 0 var(--x7)}
}

/* ==========================================================================
   v2.1 — density additions
   ========================================================================== */

/* ---------- How it works ---------- */
.how{background:var(--brand-wash);border-top:1px solid #CBE4E4;border-bottom:1px solid #CBE4E4}
.how-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--x8);align-items:center}
.how-list{display:grid;gap:var(--x4)}
.how-row{display:flex;gap:var(--x4);align-items:flex-start;background:var(--card);
         border:1px solid #D8EAEA;border-radius:var(--r3);padding:var(--x4) var(--x5);
         transition:transform .3s var(--glide),box-shadow .3s var(--glide)}
.how-row:hover{transform:translateX(5px);box-shadow:var(--d2)}
.how-ic{width:36px;height:36px;border-radius:var(--r2);flex-shrink:0;display:grid;place-items:center;
        background:var(--brand-wash);color:var(--brand)}
.how-row h4{font-size:16.5px;margin-bottom:2px}
.how-row p{font-size:14px;color:var(--ink-3);margin:0}

/* ---------- Category tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--x5)}
.tile{display:block;text-decoration:none;border-radius:var(--r4);overflow:hidden;
      background:var(--card);border:1px solid var(--rule);
      transition:transform .32s var(--glide),box-shadow .32s var(--glide)}
.tile:hover{transform:translateY(-5px);box-shadow:var(--d3)}
.tile-art{height:150px;position:relative;overflow:hidden;display:grid;place-items:center}
.tile-art svg{width:56px;height:56px;opacity:.9;transition:transform .45s var(--spring)}
.tile:hover .tile-art svg{transform:scale(1.12) rotate(-4deg)}
.tile-b{padding:var(--x4) var(--x5) var(--x5)}
.tile-b h4{font-size:17px;margin-bottom:4px}
.tile-b span{font-size:13.5px;color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.tile:hover .tile-b span{gap:9px}
.tile-b span svg{transition:transform .2s var(--glide)}

/* ---------- Blog cards ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x5)}
.post{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r4);overflow:hidden;
      background:var(--card);border:1px solid var(--rule);
      transition:transform .32s var(--glide),box-shadow .32s var(--glide)}
.post:hover{transform:translateY(-5px);box-shadow:var(--d3)}
.post-art{height:172px;display:grid;place-items:center;position:relative;overflow:hidden}
.post-art svg{width:52px;height:52px;opacity:.85;transition:transform .45s var(--spring)}
.post:hover .post-art svg{transform:scale(1.14)}
.post-b{padding:var(--x5);flex:1;display:flex;flex-direction:column}
.post-b h4{font-size:18px;line-height:1.3;margin-bottom:var(--x3)}
.post-b p{font-size:14.5px;color:var(--ink-3);margin-bottom:var(--x4);flex:1}
.post-m{display:flex;align-items:center;gap:var(--x3);font-size:12.5px;color:var(--ink-4)}
.post-m .chip{font-size:11px;padding:4px 9px}

/* ---------- Newsletter ---------- */
.sign{background:var(--ink);color:#fff;border-radius:var(--r5);padding:var(--x8) var(--x7);
      position:relative;overflow:hidden}
.sign::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 320px at 88% -20%, rgba(18,160,160,.26) 0%, transparent 62%),
             radial-gradient(500px 300px at 6% 120%, rgba(18,134,79,.2) 0%, transparent 60%)}
.sign-in{position:relative;max-width:620px;margin:0 auto;text-align:center}
.sign h2{color:#fff;margin-bottom:var(--x4)}
.sign p{color:#B4C1C8;margin:0 auto var(--x6);font-size:16.5px}
.sign-f{display:flex;gap:var(--x3);max-width:470px;margin:0 auto;flex-wrap:wrap}
.sign-f input{flex:1;min-width:220px;padding:14px var(--x4);border-radius:var(--rp);
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;
  font-family:var(--sans);font-size:15.5px;transition:border-color .2s,background .2s}
.sign-f input::placeholder{color:#8595A0}
.sign-f input:focus{outline:none;border-color:var(--brand-lift);background:rgba(255,255,255,.13)}
.sign-f .btn-1{background:var(--brand-lift)}
.sign-f .btn-1:hover{background:#16B4B4}
.sign small{display:block;margin-top:var(--x4);color:#8595A0;font-size:12.5px}

/* ---------- Source quote strip ---------- */
.srcs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x5)}
.src{background:var(--card);border:1px solid var(--rule);border-radius:var(--r4);padding:var(--x5);
     display:flex;flex-direction:column}
.src-q{font-family:var(--serif);font-size:18px;line-height:1.45;color:var(--ink);margin-bottom:var(--x4);flex:1}
.src-a{display:flex;align-items:center;gap:var(--x3);padding-top:var(--x4);border-top:1px solid var(--rule-soft)}
.src-av{width:38px;height:38px;border-radius:var(--r2);flex-shrink:0;display:grid;place-items:center;
        background:var(--brand-wash);color:var(--brand);font-family:var(--mono);font-size:11px;font-weight:600}
.src-n{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.src-s{font-size:12.5px;color:var(--ink-3)}

@media(max-width:1000px){
  .how-in{grid-template-columns:1fr;gap:var(--x6)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .posts,.srcs{grid-template-columns:1fr}
}
@media(max-width:620px){
  .tiles{grid-template-columns:1fr}
  .sign{padding:var(--x7) var(--x5)}
}

/* ---------- Print: show everything, drop chrome ---------- */
@media print{
  .up{opacity:1!important;transform:none!important}
  .announce,.top,.hamb,.sign{display:none!important}
  body{background:#fff;font-size:12pt}
  .band,.band-sm{padding:18pt 0}
  a{color:#000;text-decoration:none}
  .card,.panel,.tile,.post{box-shadow:none;border:1px solid #ccc}
  .acc-p{max-height:none!important}
}

/* ==========================================================================
   v3 — ticker, hero atmosphere, disclaimer band, subscribe module
   ========================================================================== */

/* ---------- Motion ticker (replaces announce bar) ---------- */
.tick{
  background:var(--ink);color:#DCE5E8;
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tick::before,.tick::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.tick::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.tick::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}

.tick-rail{display:flex;width:max-content;animation:rail 38s linear infinite}
.tick:hover .tick-rail{animation-play-state:paused}
.tick-set{display:flex;flex-shrink:0}
.tick-i{
  display:flex;align-items:center;gap:9px;
  padding:11px 0;margin:0 var(--x6);
  font-size:13.5px;font-weight:500;white-space:nowrap;
}
.tick-i svg{color:#6FD3C4;flex-shrink:0}
.tick-i b{color:#fff;font-weight:650}
@keyframes rail{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .tick-rail{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
  .tick-set:nth-child(2){display:none}
}

/* ---------- Hero atmosphere ---------- */
.hero{isolation:isolate}
.hero-glow{
  position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
  filter:blur(46px);opacity:.62;
}
.hero-glow i{
  position:absolute;display:block;border-radius:50%;
  animation:float 22s var(--glide) infinite alternate;
}
.hero-glow i:nth-child(1){
  width:46vw;height:46vw;max-width:640px;max-height:640px;top:-14%;right:-6%;
  background:radial-gradient(circle at 34% 34%, rgba(18,160,160,.42), rgba(18,160,160,0) 66%);
}
.hero-glow i:nth-child(2){
  width:38vw;height:38vw;max-width:520px;max-height:520px;bottom:-22%;left:-8%;
  background:radial-gradient(circle at 62% 40%, rgba(18,134,79,.34), rgba(18,134,79,0) 66%);
  animation-duration:28s;animation-delay:-6s;
}
.hero-glow i:nth-child(3){
  width:30vw;height:30vw;max-width:420px;max-height:420px;top:34%;left:42%;
  background:radial-gradient(circle at 50% 50%, rgba(79,196,196,.26), rgba(79,196,196,0) 68%);
  animation-duration:34s;animation-delay:-14s;
}
@keyframes float{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(3.5%,-5%,0) scale(1.13)}
}
.hero-in{position:relative;z-index:1}

/* Animated highlight behind key words in the H1 */
.hl{position:relative;display:inline-block;white-space:nowrap}
.hl::after{
  content:"";position:absolute;left:-.06em;right:-.06em;bottom:.07em;height:.34em;z-index:-1;
  border-radius:.18em;
  background:linear-gradient(96deg, rgba(18,160,160,.30), rgba(18,134,79,.26) 52%, rgba(79,196,196,.30));
  background-size:220% 100%;
  animation:slide 9s var(--glide) infinite alternate;
  transform-origin:left center;
}
@keyframes slide{from{background-position:0% 0}to{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){
  .hero-glow i,.hl::after{animation:none}
}

/* ---------- Full-bleed disclaimer band ---------- */
.bleed{
  position:relative;overflow:hidden;
  background:var(--ink);color:#C6D2D8;
  padding:var(--x9) 0;
}
.bleed::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 520px at 14% -18%, rgba(18,160,160,.30) 0%, transparent 62%),
    radial-gradient(900px 480px at 88% 118%, rgba(18,134,79,.24) 0%, transparent 60%);
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  from{transform:translate3d(-2.5%,-2%,0) scale(1)}
  to{transform:translate3d(2.5%,3%,0) scale(1.1)}
}
/* fine grid, gives it texture instead of flat AI gradient */
.bleed::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 50%, #000 5%, transparent 78%);
}
.bleed-in{position:relative;z-index:1;max-width:900px;margin:0 auto;text-align:center;padding:0 var(--x5)}
.bleed-mark{
  width:52px;height:52px;margin:0 auto var(--x5);border-radius:var(--r3);
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:#6FD3C4;
}
.bleed-k{
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#6FD3C4;display:block;margin-bottom:var(--x4);
}
.bleed-t{
  font-family:var(--serif);font-weight:500;color:#fff;
  font-size:clamp(20px,2.5vw,27px);line-height:1.5;letter-spacing:-.015em;
  max-width:none;margin:0;
}
.bleed-t b{font-weight:700}
.bleed-rule{
  width:64px;height:2px;margin:var(--x6) auto 0;border-radius:2px;
  background:linear-gradient(90deg, transparent, #6FD3C4, transparent);
}

/* ---------- Subscribe module (editorial, not a SaaS card) ---------- */
.sub{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--card)}
.sub-in{
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--x8);align-items:center;
  padding:var(--x8) 0;
}
.sub-t{
  font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(25px,3.2vw,38px);line-height:1.24;letter-spacing:-.025em;
  max-width:18ch;margin:0;
}
.sub-t em{font-style:normal;color:var(--brand);position:relative;white-space:nowrap}
.sub-t em::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:2px;
  background:var(--brand);transform-origin:left;transform:scaleX(0);
  animation:draw 1.1s var(--glide) .35s forwards;
}
@keyframes draw{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.sub-t em::after{animation:none;transform:none}}

.sub-r{max-width:420px}
.sub-r p{color:var(--ink-2);font-size:16px;margin-bottom:var(--x6)}

/* underline field, no boxes */
.field{position:relative;display:flex;align-items:center;gap:var(--x3);
       border-bottom:1.5px solid var(--rule);padding-bottom:10px;transition:border-color .25s}
.field:focus-within{border-color:var(--brand)}
.field input{
  flex:1;border:0;background:none;outline:none;
  font-family:var(--sans);font-size:17px;color:var(--ink);padding:4px 0;
}
.field input::placeholder{color:var(--ink-4)}
.field button{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--brand);color:#fff;display:grid;place-items:center;
  transition:transform .22s var(--spring),background .2s;
}
.field button:hover{background:var(--brand-deep);transform:translateX(3px)}
.sub-fine{font-size:13px;color:var(--ink-3);margin-top:var(--x4)}
.sub-fine a{color:var(--ink-3);text-decoration:underline}
.sub-done{font-size:16px;color:var(--accent);font-weight:600;margin:0}

@media(max-width:900px){
  .sub-in{grid-template-columns:1fr;gap:var(--x6);padding:var(--x7) 0}
  .sub-t{max-width:none}
}

/* ==========================================================================
   Lead capture — "Find a prescriber"
   Placed at the point of maximum need, not at the top of the page.
   ========================================================================== */

.lead{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r5);
  box-shadow:var(--d3);padding:var(--x7);margin:var(--x7) 0;
}
.lead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 300px at 96% -30%, rgba(13,122,122,.10) 0%, transparent 62%),
    radial-gradient(420px 260px at -8% 120%, rgba(18,134,79,.08) 0%, transparent 60%);
}
.lead-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--x7);align-items:start}

.lead-k{
  display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:var(--rp);
  background:var(--accent-wash);color:var(--accent);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:var(--x4);
}
.lead h3{font-size:clamp(22px,2.6vw,29px);margin-bottom:var(--x3)}
.lead-sub{color:var(--ink-2);font-size:16px;margin-bottom:var(--x5)}

.lead-pts{list-style:none;margin:0}
.lead-pts li{display:flex;gap:var(--x3);font-size:15px;color:var(--ink-2);margin-bottom:var(--x3)}
.lead-pts svg{color:var(--accent);flex-shrink:0;margin-top:4px}

/* form */
.lf{display:grid;gap:var(--x4)}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--x3)}
.lf-f{display:flex;flex-direction:column;gap:6px}
.lf-f label{font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.lf-f input,.lf-f select{
  font-family:var(--sans);font-size:15.5px;color:var(--ink);
  padding:12px 13px;border:1px solid var(--rule);border-radius:var(--r2);
  background:var(--paper);outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
  width:100%;
}
.lf-f select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23657481' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
.lf-f input:focus,.lf-f select:focus{
  border-color:var(--brand);background:var(--card);
  box-shadow:0 0 0 3px var(--brand-veil);
}
.lf-btn{
  width:100%;justify-content:center;margin-top:var(--x2);
}
.lf-fine{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin:0}
.lf-fine a{color:var(--ink-3);text-decoration:underline}

.lf-done{
  text-align:center;padding:var(--x6) var(--x4);
}
.lf-done-ic{
  width:52px;height:52px;margin:0 auto var(--x4);border-radius:50%;
  display:grid;place-items:center;background:var(--accent-wash);color:var(--accent);
}
.lf-done h4{margin-bottom:var(--x2)}
.lf-done p{color:var(--ink-2);font-size:15px;margin:0 auto;max-width:38ch}

@media(max-width:860px){
  .lead{padding:var(--x6) var(--x5)}
  .lead-in{grid-template-columns:1fr;gap:var(--x6)}
  .lf-row{grid-template-columns:1fr}
}

/* ---------- Product hero ---------- */
.phero{background:var(--card);border-bottom:1px solid var(--rule);padding:var(--x7) 0 var(--x8);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(720px 420px at 92% -10%, var(--brand-veil) 0%, transparent 62%)}
.phero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--x8);align-items:center}
.phero-art{position:relative;border-radius:var(--r5);overflow:hidden;background:var(--paper);
  border:1px solid var(--rule);box-shadow:var(--d3)}
.phero-art img{width:100%;height:auto;display:block}
.pfacts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--x3);margin:var(--x5) 0 var(--x6)}
.pfact{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r3);padding:var(--x4)}
.pfact dt{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.pfact dd{font-size:16px;font-weight:600;color:var(--ink)}
.pfact dd .num{font-size:18px}
figure{margin:var(--x6) 0}
figure img{width:100%;height:auto;border-radius:var(--r4);border:1px solid var(--rule)}
figcaption{font-size:13.5px;color:var(--ink-3);margin-top:var(--x3);text-align:center}
@media(max-width:900px){.phero-in{grid-template-columns:1fr;gap:var(--x6)}}

/* ==========================================================================
   Article layout with sidebar — single blog posts
   ========================================================================== */
.artwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--x8);align-items:start}
.art{min-width:0}
.art h2{margin-top:var(--x7)}
.art h3{margin-top:var(--x6)}

.side{position:sticky;top:96px;display:grid;gap:var(--x5)}
.side-box{background:var(--card);border:1px solid var(--rule);border-radius:var(--r4);padding:var(--x5)}
.side-box h4{font-size:13px;font-family:var(--sans);font-weight:700;letter-spacing:.1em;
             text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--x4)}
.side-box ul{list-style:none;margin:0}
.side-box li{margin-bottom:11px;font-size:14.5px;line-height:1.45}
.side-box li:last-child{margin-bottom:0}
.side-box a{text-decoration:none;color:var(--ink-2)}
.side-box a:hover{color:var(--brand)}

/* table of contents */
.toc a{display:block;padding:6px 0 6px 13px;border-left:2px solid var(--rule);
       font-size:14.5px;color:var(--ink-2);text-decoration:none;transition:.18s}
.toc a:hover{border-left-color:var(--brand);color:var(--brand);padding-left:17px}

/* author card */
.au{display:flex;gap:var(--x3);align-items:center}
.au-av{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
       background:var(--brand-wash);color:var(--brand);font-family:var(--serif);font-size:16px;font-weight:600}
.au-n{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.au-r{font-size:13px;color:var(--ink-3)}

/* related product mini-card */
.mini{display:flex;justify-content:space-between;align-items:center;gap:var(--x3);
      padding:10px 0;border-bottom:1px solid var(--rule-soft);text-decoration:none}
.mini:last-child{border-bottom:none}
.mini-n{font-size:14.5px;font-weight:600;color:var(--ink)}
.mini-p{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--accent);white-space:nowrap}

/* article meta strip */
.ameta{display:flex;gap:var(--x5);flex-wrap:wrap;align-items:center;font-size:13.5px;
       color:var(--ink-3);padding:var(--x4) 0;border-top:1px solid var(--rule);
       border-bottom:1px solid var(--rule);margin-bottom:var(--x6)}
.ameta b{color:var(--ink-2);font-weight:600}

/* key takeaways */
.takeaway{background:var(--accent-wash);border-left:3px solid var(--accent);
          border-radius:0 var(--r3) var(--r3) 0;padding:var(--x5);margin:var(--x6) 0}
.takeaway h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;
             text-transform:uppercase;color:var(--accent);margin-bottom:var(--x3)}
.takeaway ul{margin:0 0 0 var(--x4)}
.takeaway li{margin-bottom:8px;font-size:15.5px}
.takeaway li:last-child{margin-bottom:0}

@media(max-width:1000px){
  .artwrap{grid-template-columns:1fr;gap:var(--x6)}
  .side{position:static;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}

/* ---------- Guide cover art ---------- */
.cover{margin:0 0 var(--x6);border-radius:18px;overflow:hidden;box-shadow:var(--d2)}
.cover svg{width:100%;height:auto;display:block}

/* ==========================================================================
   Conversion layer — sticky CTA bar
   Slides up once the reader is invested. Dismissible, remembered per session.
   ========================================================================== */
.stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--ink);color:#fff;
  transform:translateY(110%);
  transition:transform .55s var(--spring);
  box-shadow:0 -8px 32px -8px rgba(22,35,43,.30);
  border-top:1px solid rgba(255,255,255,.10);
}
.stickycta.up{transform:translateY(0)}
.stickycta-in{
  max-width:var(--page);margin:0 auto;padding:14px var(--x5);
  display:flex;align-items:center;gap:var(--x5);
}
.stickycta-t{flex:1;min-width:0}
.stickycta-t b{display:block;font-family:var(--serif);font-size:18px;font-weight:600;color:#fff;line-height:1.25}
.stickycta-t span{font-size:13.5px;color:#A9B6BE}
.stickycta .btn-1{background:var(--brand-lift);flex-shrink:0}
.stickycta .btn-1:hover{background:#16B4B4}
.stickycta-x{
  color:#7A8B94;font-size:22px;line-height:1;padding:6px 10px;border-radius:var(--r1);flex-shrink:0;
}
.stickycta-x:hover{color:#fff;background:rgba(255,255,255,.10)}
@media(max-width:640px){
  .stickycta-t span{display:none}
  .stickycta-in{padding:11px var(--x4);gap:var(--x3)}
  .stickycta-t b{font-size:15.5px}
  .stickycta .btn{padding:11px 16px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.stickycta{transition:none}}

/* inline mid-article prompt */
.nudge{
  display:flex;align-items:center;gap:var(--x5);flex-wrap:wrap;
  background:var(--brand-wash);border:1px solid #CBE4E4;border-radius:var(--r4);
  padding:var(--x5) var(--x6);margin:var(--x7) 0;
}
.nudge-t{flex:1;min-width:240px}
.nudge-t b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink);margin-bottom:5px}
.nudge-t span{font-size:15px;color:var(--ink-2)}

/* ==========================================================================
   Blog archive
   ========================================================================== */
.filters{display:flex;gap:var(--x2);flex-wrap:wrap;margin-bottom:var(--x7)}
.fchip{
  padding:9px 18px;border-radius:var(--rp);border:1px solid var(--rule);
  background:var(--card);font-size:14.5px;font-weight:600;color:var(--ink-2);
  transition:all .22s var(--glide);
}
.fchip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.fchip.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* featured post */
.feat{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r5);
  overflow:hidden;text-decoration:none;margin-bottom:var(--x7);
  transition:transform .35s var(--glide),box-shadow .35s var(--glide);
}
.feat:hover{transform:translateY(-4px);box-shadow:var(--d3)}
.feat-art{background:var(--paper);display:flex;align-items:center;overflow:hidden}
.feat-art svg{width:100%;height:auto;border-radius:0}
.feat-b{padding:var(--x7) var(--x6);display:flex;flex-direction:column;justify-content:center}
.feat-b h2{font-size:clamp(24px,2.8vw,32px);margin:var(--x4) 0 var(--x3)}
.feat-b p{font-size:16px;color:var(--ink-2);margin-bottom:var(--x5)}
.feat-m{font-size:14px;font-weight:600;color:var(--brand)}
.feat:hover .feat-m{color:var(--brand-deep)}

/* post grid */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--x5)}
.pcard{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r4);
  transition:transform .32s var(--glide),box-shadow .32s var(--glide),border-color .3s;
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--d3);border-color:#CBE4E4}
.pcard-art{background:var(--paper);overflow:hidden;border-bottom:1px solid var(--rule-soft)}
.pcard-art svg{width:100%;height:auto;border-radius:0;display:block}
.pcard-b{padding:var(--x5);flex:1;display:flex;flex-direction:column}
.pcard-b h3{font-size:20px;line-height:1.28;margin:var(--x3) 0 var(--x3)}
.pcard-b p{font-size:15px;color:var(--ink-3);flex:1;margin-bottom:var(--x4)}
.pcard-m{font-size:14px;font-weight:600;color:var(--brand)}
.pcard:hover .pcard-m{color:var(--brand-deep)}

@media(max-width:900px){
  .feat{grid-template-columns:1fr}
  .feat-b{padding:var(--x6) var(--x5)}
  .pgrid{grid-template-columns:1fr}
}

/* ==========================================================================
   v4 — motion components (vanilla equivalents of the requested React ones)
   ========================================================================== */

/* ---- Count-up number: value animates, markup untouched ----------------- */
.sn{font-variant-numeric:tabular-nums}

/* ---- Shutter text: lines rise from behind a mask ----------------------- */
.shutter{display:block;overflow:hidden}
.shutter > span{
  display:block;transform:translateY(105%);
  animation:shutterUp .95s cubic-bezier(.22,1,.28,1) forwards;
}
.shutter:nth-of-type(2) > span{animation-delay:.09s}
.shutter:nth-of-type(3) > span{animation-delay:.18s}
@keyframes shutterUp{to{transform:translateY(0)}}

/* ---- Magic text: words illuminate as you scroll through ---------------- */
.magic{display:inline}
/* Default is fully readable. The dim state only applies once JS has
   confirmed it is running and has attached the scroll handler, so the
   disclaimer can never be left faint by a failed script. */
.magic .w{color:#fff;transition:color .45s var(--glide)}
.magic-on .w{color:rgba(255,255,255,.24)}
.magic-on .w.dim{color:rgba(255,255,255,.45)}
.magic-on .w.lit{color:#fff}

/* ---- Slide tabs: nav pill follows the hovered item --------------------- */
.menu{position:relative}
.nav-pill{
  position:absolute;top:50%;left:0;height:38px;width:0;
  transform:translateY(-50%);border-radius:var(--r2);
  background:var(--brand-wash);opacity:0;pointer-events:none;z-index:-1;
  transition:left .34s var(--glide),width .34s var(--glide),opacity .22s;
}
.menu:hover .nav-pill{opacity:1}
.menu-a{position:relative;z-index:1}
.menu-a:hover,.menu-item.live .menu-a{background:transparent}
@media(prefers-reduced-motion:reduce){
  .nav-pill{transition:none}
  .shutter > span{animation:none;transform:none}
  .sn-col{transition:none}
}


/* ---------- Byline ----------
   A named human, a date and an honest statement about clinical review.
   Google's quality guidance for health content asks who is responsible for
   the page; before this block the answer was nobody. */
.byline{display:flex;flex-wrap:wrap;gap:var(--x2) var(--x4);align-items:center;
        margin:var(--x4) 0 var(--x5);padding:var(--x3) 0;
        border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
        font-size:14px;color:var(--ink-3);line-height:1.5}
.byline a{color:var(--brand);text-decoration:none}
.byline a:hover{text-decoration:underline}
.byline b{color:var(--ink);font-weight:600}
.bl-d{white-space:nowrap}
.bl-d::before,.bl-r::before{content:"";display:inline-block;width:4px;height:4px;
        border-radius:50%;background:var(--rule);margin-right:var(--x3);
        vertical-align:middle}
.bl-r{flex-basis:100%;font-size:13px;color:var(--ink-3)}
.bl-r.bl-ok{color:var(--ink-2)}
.bl-r i{font-style:normal;color:var(--ink-3)}
.byline-s{border-top:0;padding-top:0}
@media(max-width:640px){.byline{gap:var(--x2)}.bl-d::before{display:none}}


/* ---------- Brand mark ----------
   The real Slim4Medoc logo, served from the site's own media library so the
   same file works in preview and after deployment. Height is fixed and width
   is auto, so the aspect ratio is whatever the source file is. */
.mark-img{height:38px;width:auto;display:block}
.mark-img-f{height:34px;background:#fff;padding:6px 10px;border-radius:10px}
@media(max-width:640px){.mark-img{height:32px}}


/* ---------- Contact form ----------
   Plain HTML, browser-native validation, no JavaScript dependency. Field
   names match what the Ninja Forms build will use so the two stay in step. */
.cform-wrap{background:var(--paper);border:1px solid var(--rule);
            border-radius:var(--r4);padding:var(--x6);margin:var(--x6) 0 var(--x7)}
.cform-head h2{margin:var(--x3) 0 var(--x3)}
.cform-head .lede{font-size:16.5px;margin-bottom:0}
.cform{margin-top:var(--x5)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--x4);margin-bottom:var(--x4)}
.cf-f{display:flex;flex-direction:column;margin-bottom:var(--x4)}
.cf-row .cf-f{margin-bottom:0}
.cf-f label{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:var(--x2)}
.cf-f label em,.cf-note em,.cf-consent label em{color:#B3261E;font-style:normal}
.cf-opt{font-weight:400;color:var(--ink-3)}
.cf-f input,.cf-f select,.cf-f textarea{
  font:inherit;font-size:15.5px;color:var(--ink);background:#fff;
  border:1px solid var(--rule);border-radius:var(--r2);
  padding:12px 14px;width:100%;transition:border-color .15s,box-shadow .15s}
.cf-f textarea{resize:vertical;min-height:110px}
.cf-f input:focus,.cf-f select:focus,.cf-f textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
.cf-f input:invalid:not(:placeholder-shown){border-color:#D9A5A0}
.cf-help{font-size:13px;color:var(--ink-3);margin-top:var(--x2)}
.cf-consent{display:flex;gap:var(--x3);align-items:flex-start;
            background:#fff;border:1px solid var(--rule);border-radius:var(--r2);
            padding:var(--x4);margin:var(--x4) 0 var(--x5)}
.cf-consent input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--brand)}
.cf-consent label{font-size:14px;line-height:1.6;color:var(--ink-2);font-weight:400}
.cf-submit{width:100%;justify-content:center;font-size:16px;padding:15px 24px}
.cf-note{font-size:13px;color:var(--ink-3);margin-top:var(--x3);line-height:1.6}
@media(max-width:720px){
  .cform-wrap{padding:var(--x5) var(--x4)}
  .cf-row{grid-template-columns:1fr;gap:0}
  .cf-row .cf-f{margin-bottom:var(--x4)}
}


/* ---------- Article tags ----------
   Keyword topics, linked back to the filtered blog index. These are real
   navigation, not decoration, so they are anchors rather than spans. */
.tagrow{display:flex;flex-wrap:wrap;gap:var(--x2);align-items:center;
        margin:var(--x3) 0 var(--x5)}
.tagrow-l{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
          color:var(--ink-3);margin-right:var(--x2)}
.tag{display:inline-block;font-size:13px;font-weight:500;line-height:1;
     padding:7px 12px;border-radius:var(--rp);text-decoration:none;
     color:var(--brand-deep);background:var(--brand-wash);
     border:1px solid transparent;transition:border-color .15s,background .15s}
.tag:hover{background:#fff;border-color:var(--brand);color:var(--brand-deep)}


/* ---------- Topic hub ----------
   Landing targets for the article tags. Every tag anchor on a post resolves
   to one of these, so the tags are navigation rather than ornament. */
.topichub{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
          gap:var(--x4);margin-bottom:var(--x6)}
.topic{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r3);
       padding:var(--x4) var(--x5);scroll-margin-top:110px}
.topic h3{font-size:17px;margin-bottom:var(--x3)}
.topic:target{border-color:var(--brand);background:var(--brand-wash)}
.tlist{list-style:none;padding:0;margin:0}
.tlist li{padding:var(--x2) 0;border-top:1px solid var(--rule-soft)}
.tlist li:first-child{border-top:0}
.tlist a{font-weight:600;text-decoration:none;color:var(--ink)}
.tlist a:hover{color:var(--brand-deep);text-decoration:underline}
.tlist .fine{display:block;margin-top:2px}


/* ---------- Tick lists ----------
   Used throughout the guides. This class was being applied in the markup with
   no rule behind it, so the lists were falling back to default browser bullets
   and looked nothing like the rest of the site. */
.ticks{list-style:none;padding:0;margin:0 0 var(--x5)}
.ticks li{position:relative;padding:0 0 var(--x3) 30px;line-height:1.65}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:16px;height:16px;
  background:var(--brand-wash);border-radius:50%}
.ticks li::after{content:"";position:absolute;left:4.5px;top:.72em;width:7px;height:4px;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(-45deg)}
.ticks li:last-child{padding-bottom:0}
.bl-a{display:inline}

/* ---------- Ruled list ----------
   `.rule` is a modifier on <ul>, used for numbered step lists with a hairline
   between rows. An earlier version of this file styled it as a 1px divider,
   which collapsed the whole list and made its items overlap the section below.
   It is a list container, not a rule. */
ul.rule{list-style:none;padding:0;margin:0 0 var(--x6);height:auto;background:none}
ul.rule > li{display:flex;gap:var(--x4);padding:var(--x4) 0;
             border-bottom:1px solid var(--rule-soft);align-items:flex-start}
ul.rule > li:last-child{border-bottom:0}
hr.rule{height:1px;background:var(--rule);border:0;margin:var(--x5) 0}


/* ---------- WhatsApp ----------
   A plain anchor, not a third-party chat widget. It needs no JavaScript, adds
   no external script, loads nothing, and cannot break. It sits above the
   sticky CTA bar and collapses to a circle on small screens. */
.wa{position:fixed;right:20px;bottom:20px;z-index:60;
    display:inline-flex;align-items:center;gap:10px;
    padding:13px 20px 13px 16px;border-radius:var(--rp);
    background:#25D366;color:#fff;text-decoration:none;
    font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;
    box-shadow:0 6px 22px rgba(37,211,102,.34),0 2px 6px rgba(0,0,0,.12);
    transition:transform .18s var(--glide),box-shadow .18s var(--glide)}
.wa:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(37,211,102,.42),0 3px 8px rgba(0,0,0,.14)}
.wa:focus-visible{outline:3px solid #0D7A7A;outline-offset:3px}
.wa svg{flex:0 0 auto}
body:has(.stickycta.up) .wa{bottom:96px}
@media(max-width:720px){
  .wa{padding:14px;right:14px;bottom:14px}
  .wa-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body:has(.stickycta.up) .wa{bottom:86px}
}
@media(prefers-reduced-motion:reduce){.wa{transition:none}.wa:hover{transform:none}}


/* ---------- Category tiles ----------
   The tiles were gradient blocks with a line icon. A real photograph reads as a
   real business; the icon stays as a small badge so the visual language holds. */
.tile-art{position:relative;overflow:hidden}
.tile-art picture{display:block;width:100%;height:100%}
.tile-art img{width:100%;height:100%;object-fit:cover;display:block}
.tile-ic{position:absolute;left:12px;bottom:12px;width:34px;height:34px;border-radius:10px;
         background:rgba(255,255,255,.94);display:grid;place-items:center;
         box-shadow:0 2px 8px rgba(0,0,0,.16)}
.tile-ic svg{width:19px;height:19px}


/* ---------- Cards with a picture ----------
   A guide card shows the photograph the reader will meet on the page itself,
   so the card and the article are visibly the same thing. */
.card-pic{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card-art{aspect-ratio:16/9;overflow:hidden;background:var(--paper)}
.card-art picture,.card-art img{display:block;width:100%;height:100%;object-fit:cover}
.card-pic > :not(.card-art){padding-left:var(--x5);padding-right:var(--x5)}
.card-pic > .chip{margin:var(--x4) 0 0 var(--x5);align-self:flex-start}
.card-pic > :last-child{padding-bottom:var(--x5)}
.post-art{position:relative;overflow:hidden}
.post-art picture,.post-art img{display:block;width:100%;height:100%;object-fit:cover}

.feat-art,.pcard-art{overflow:hidden;border-radius:18px}
.feat-art picture,.pcard-art picture,.feat-art img,.pcard-art img{display:block;width:100%;height:100%;object-fit:cover}
.feat-art{aspect-ratio:16/9}
.pcard-art{aspect-ratio:16/10}


/* ================= MOBILE NAVIGATION =================
   The build shipped a hamburger button that was permanently display:none and an
   .open state with no styles, so on a phone the nav could not be opened at all.
   Below 900px the inline nav is replaced by a full-width panel. */
@media (max-width: 900px) {
  .hamb{display:flex;align-items:center;justify-content:center;
        width:46px;height:46px;padding:11px;gap:5px;
        background:none;border:0;cursor:pointer;border-radius:12px}
  .hamb:hover{background:var(--brand-wash)}
  .hamb span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);
             transition:transform .22s var(--glide),opacity .18s}
  .hamb.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamb.on span:nth-child(2){opacity:0}
  .hamb.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .menu{position:absolute;left:0;right:0;top:100%;
        display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;
        background:#fff;border-top:1px solid var(--rule);
        box-shadow:0 18px 40px rgba(0,0,0,.10);
        padding:var(--x3) var(--x5) var(--x5);max-height:calc(100dvh - 72px);overflow-y:auto}
  .menu.open{display:flex}
  .top-in{position:relative;flex-wrap:wrap}

  .menu-item{width:100%}
  .menu-a{width:100%;justify-content:space-between;min-height:52px;font-size:17px;
          padding:var(--x3) 0;border-bottom:1px solid var(--rule-soft);border-radius:0}
  .menu > .menu-a{display:flex;align-items:center}

  /* dropdowns expand inline instead of hovering */
  .drop{position:static;opacity:1;visibility:visible;transform:none;
        box-shadow:none;border:0;padding:0;min-width:0;width:100%;
        display:none;background:none}
  .menu-item.live .drop{display:block}
  .drop-grid{grid-template-columns:1fr;gap:0}
  .drop-a{padding:var(--x3) 0 var(--x3) var(--x4);border-bottom:1px solid var(--rule-soft);min-height:52px}
  .drop-foot{flex-direction:column;align-items:flex-start;gap:var(--x3);padding:var(--x4) 0}

  .top-act{margin-left:auto;display:flex;align-items:center;gap:var(--x2)}
  .top-act .btn{min-height:44px}
}

/* Tap targets: 44px is the accessibility floor on touch. */
@media (pointer: coarse) {
  .btn, .menu-a, .drop-a, .tag, .acc-b, .wa, .cf-submit{min-height:44px}
  .acc-b{padding-top:var(--x4);padding-bottom:var(--x4)}
}

/* Nothing should ever scroll sideways on a phone. */
html,body{overflow-x:hidden;max-width:100%}
img,svg,table,pre{max-width:100%}


/* Form handling: honeypot stays out of sight and out of the accessibility tree,
   notices sit directly above the form they belong to. */
.s4m-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.s4m-note{margin:0 0 var(--x4);padding:var(--x4) var(--x5);border-radius:var(--r3);
          font-size:15.5px;line-height:1.6;border:1px solid}
.s4m-ok{background:#EAF7F0;border-color:#9AD3B6;color:#0B5134}
.s4m-err{background:#FDF0EE;border-color:#E4B4AC;color:#7A2E22}