/* =================================================================
   MEDKEPT — STYLES
   =================================================================
   Visual design tokens and layout. You should not need to edit
   this file to add or change a product, service, deal, guide, or
   affiliate link — see /content.js for that.
   ================================================================= */

/* ============================================================
   MEDKEPT — local fonts
   Self-hosted, no external font requests. Only 6 files are
   actually used by this design: Bricolage Grotesque at 600 and
   700, Instrument Sans at 400, 500, 600, and 700. See the "Adding
   the local font files" section in README.md for exactly how to
   get these six .ttf files from Google Fonts and where to put
   them — assets/fonts/.

   Until those files are added, the site still renders correctly:
   it falls back to the visitor's own system font, defined right
   after this block. Nothing breaks either way.
   ============================================================ */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('fonts/bricolage-600.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('fonts/bricolage-700.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('fonts/instrument-400.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('fonts/instrument-500.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('fonts/instrument-600.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('fonts/instrument-700.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   MEDKEPT — design tokens
   Deliberately light-only: a premium consumer health brand reads
   as clean and consistent, not something that flips to a dark
   "developer" palette depending on the visitor's OS setting.
   color-scheme:light keeps native form controls, scrollbars, etc.
   matching this instead of following the OS.
   ============================================================ */
:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --surface:#F7F9F8;
  --surface-2:#EFF4F2;
  --line:#E5EAE8;
  --line-strong:#D3DCD9;
  --ink:#152238;
  --ink-soft:#54637A;
  --ink-faint:#7F8CA0;
  --accent:#0E8E80;
  --accent-hover:#0B6F64;
  --accent-tint:#E3F5F2;
  --on-accent:#FFFFFF;
  /* Primary button color only — kept separate from --accent above,
     which still drives links, the nav "current page" indicator,
     icons, category tiles, filter chips, and everything else on the
     site. Only .btn-primary (the site's main call-to-action buttons:
     "Shop Products", "Sign Up", "View Product", "Read Guide", etc.)
     uses these. */
  --btn-primary:#2563EB;
  --btn-primary-hover:#1D4ED8;
  --btn-primary-active:#1E40AF;
  --red:#B23A42;
  --red-tint:#FBEEEF;
  --focus:#0E8E80;
  --shadow-sm:0 1px 2px rgba(21,34,56,.05);
  --shadow:0 1px 2px rgba(21,34,56,.04), 0 10px 24px -12px rgba(21,34,56,.14);
  --shadow-lg:0 2px 4px rgba(21,34,56,.05), 0 20px 40px -16px rgba(21,34,56,.20);

  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;
  --container:1140px;
}

*{box-sizing:border-box}
/* Every route is now a real URL, and in-page anchors (e.g. /services/#digital-health,
   /#signup) rely on the browser's native fragment scrolling instead of custom JS.
   scroll-padding-top keeps the ~76px sticky header from covering the target section;
   scroll-behavior gives same-document anchor jumps (e.g. clicking a filter-free
   in-page link while already on that page) a smooth motion, matching the feel of
   the site's old custom scroll code. */
html{scroll-padding-top:92px;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.15;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* Gentle section reveal on scroll. The .reveal class is added only by
   initReveal() in app.js at runtime — it is never present in the
   server-rendered markup — so a visitor or crawler with JavaScript
   disabled always sees the full page immediately, nothing is ever
   hidden by default. The prefers-reduced-motion rule above already
   sets transition:none!important site-wide, so with that setting a
   revealed section still appears (in-view still gets added) but jumps
   straight to visible instead of animating. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.22,.68,0,1),transform .65s cubic-bezier(.22,.68,0,1)}
.reveal.in-view{opacity:1;transform:none}

.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:20px}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);
  padding:10px 16px;border-radius:0 0 var(--radius-sm) 0;z-index:100;font-weight:600
}
.skip:focus{left:0}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{display:flex;align-items:center;gap:24px;height:76px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);flex:none}
.brand:hover{color:var(--ink)}
/* Logo sits directly on the page — transparent PNG, no plate or
   boxed background behind it. The wrapper only adds breathing
   room around the mark so it doesn't crowd the nav. */
.brand-plate{
  display:flex;align-items:center;flex:none;padding-block:6px
}
.brand-logo{display:block;height:38px;width:auto}
.footer-col.footer-about .brand-plate{padding-block:4px}
.footer-col.footer-about .brand-logo{height:42px}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{
  color:var(--ink-soft);font-size:15px;font-weight:500;padding:8px 12px;border-radius:var(--radius-pill);
  transition:background .15s,color .15s
}
.nav a:hover{background:var(--surface);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--accent);background:var(--accent-tint)}
.header-cta{margin-left:12px;flex:none}
.menu-btn{
  display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);
  color:var(--ink);border-radius:10px;width:42px;height:42px;cursor:pointer;
  align-items:center;justify-content:center
}
.menu-btn svg{width:20px;height:20px}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--bg);padding:10px 0 18px}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:block;padding:13px 4px;color:var(--ink);font-weight:500;font-size:17px;
  border-bottom:1px solid var(--line)
}
.mobile-nav a[aria-current="page"]{color:var(--accent)}
.mobile-nav .btn{margin-top:16px;width:100%}

/* ---------- Sitewide search ----------
   A compact icon that expands into a small search field + results
   dropdown, rather than a permanent search box — keeps the header
   uncluttered on both desktop and mobile. See buildSearchIndex()/
   searchSite()/initSiteSearch() in assets/app.js. */
.site-search{position:relative;flex:none;margin-right:2px}
.search-toggle{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:10px;border:1px solid var(--line-strong);
  background:none;color:var(--ink);cursor:pointer;flex:none;
  transition:background .15s,border-color .15s,color .15s
}
.search-toggle svg{width:19px;height:19px}
.search-toggle:hover{background:var(--surface);color:var(--ink)}
.site-search.open .search-toggle{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}

.search-panel{
  position:absolute;top:calc(100% + 10px);left:0;
  width:320px;max-width:calc(100vw - 32px);
  /* Caps the WHOLE panel (field + results), not just the results list,
     so a very broad query scrolls inside the panel instead of the
     panel itself growing into an extremely long overlay — and this
     also protects short/zoomed viewports, not only mobile. The field
     stays put (flex-direction:column, field has no flex-shrink) while
     only .search-results below scrolls. */
  max-height:min(440px, calc(100vh - 110px));
  display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .15s,transform .15s,visibility .15s;
  padding:10px;z-index:60
}
.site-search.open .search-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}

.search-form{flex:none}
#searchInput{
  width:100%;padding:11px 14px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);
  font-family:var(--body);font-size:15px;color:var(--ink);background:var(--bg)
}
#searchInput:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
#searchInput::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* flex:1 1 auto + min-height:0 is what lets this area actually shrink
   and scroll inside the panel's max-height above, instead of forcing
   the panel taller than its cap (a common flexbox gotcha otherwise). */
.search-results{margin-top:8px;overflow-y:auto;flex:1 1 auto;min-height:0}
.search-result{
  display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:10px;color:var(--ink);
  touch-action:manipulation
}
.search-result:hover,.search-result:focus-visible{background:var(--surface);color:var(--ink)}
.search-result-type{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.search-result-title{font-size:14.5px;font-weight:600;color:var(--ink);word-break:break-word}
.search-result-title mark{background:var(--accent-tint);color:var(--ink);border-radius:3px;padding:0 1px}
.search-result-desc{font-size:13px;color:var(--ink-soft);line-height:1.35;word-break:break-word}
.search-empty{padding:14px 10px;margin:0;color:var(--ink-soft);font-size:14px}

@media (max-width:920px){
  .nav{display:none}
  .menu-btn{display:flex;margin-left:0}
  .header-cta{margin-left:auto}
  /* Tighter header on narrow phones now that the search icon sits
     alongside the logo, Sign Up button, and menu button. */
  .header-row{gap:10px}
  .brand-logo{height:32px}
  /* Anchoring the results panel to the small search icon (rather than
     to the header) would risk it running off the right edge of a
     narrow phone screen, so on mobile it's pinned to the viewport
     instead — a full-width dropdown just under the sticky header,
     with a comfortable 16px margin on both sides that's part of the
     fixed positioning itself (not just a max-width cap), so it can
     never run wider than the screen at any phone size. The max-height
     is recalculated the same way, against 100vh, so the panel — and
     the same tap-friendly result rows used everywhere — always fits
     above the bottom edge too, even on short-screen phones. */
  .search-panel{
    position:fixed;top:calc(env(safe-area-inset-top,0px) + 78px);
    left:16px;right:16px;width:auto;max-width:none;
    max-height:calc(100vh - env(safe-area-inset-top,0px) - 78px - 16px)
  }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-weight:600;font-size:15px;line-height:1;
  padding:14px 22px;border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s;
  text-align:center
}
.btn-primary{background:var(--btn-primary);color:var(--on-accent);box-shadow:0 1px 2px rgba(37,99,235,.15),0 8px 16px -8px rgba(37,99,235,.45)}
.btn-primary:hover{background:var(--btn-primary-hover);color:var(--on-accent);box-shadow:0 1px 2px rgba(37,99,235,.18),0 10px 20px -8px rgba(37,99,235,.5);transform:translateY(-1px)}
.btn-primary:active{background:var(--btn-primary-active);box-shadow:0 1px 2px rgba(37,99,235,.2);transform:translateY(0)}
.btn-primary:focus-visible{outline:2px solid var(--btn-primary-active);outline-offset:2px}
.btn-secondary{background:var(--bg);color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--surface);color:var(--ink);border-color:var(--ink-faint)}
.btn-sm{padding:11px 16px;font-size:14px}
.btn-sm.btn-primary{box-shadow:0 1px 2px rgba(37,99,235,.12),0 6px 12px -7px rgba(37,99,235,.4)}
.btn-block{width:100%}
.btn[aria-disabled="true"],.btn:disabled{
  background:var(--surface-2);color:var(--ink-faint);border-color:var(--line);
  cursor:not-allowed;pointer-events:none;box-shadow:none
}

/* ---------- Sections ---------- */
.section{padding-block:56px}
.section.tight{padding-block:40px}
.section.alt{background:var(--surface)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.section-head h2{font-size:clamp(24px,3.4vw,30px);font-weight:600}
.section-head p{color:var(--ink-soft);font-size:15px;margin-top:6px}
.section-link{font-weight:600;font-size:15px;white-space:nowrap}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px
}

/* ---------- Hero ---------- */
.hero{padding-block:52px 40px;border-bottom:1px solid var(--line)}
.hero-inner{max-width:720px}
.hero h1{font-size:clamp(32px,5.4vw,50px);font-weight:700;letter-spacing:-.03em}
.hero p{color:var(--ink-soft);font-size:clamp(16px,2.2vw,19px);margin-top:14px;max-width:560px}
.hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.hero-actions .btn{padding:15px 26px;font-size:16px}
.hero-note{
  display:flex;align-items:flex-start;gap:8px;margin-top:22px;
  color:var(--ink-faint);font-size:13.5px
}
.hero-note svg{width:15px;height:15px;flex:none;color:var(--accent);margin-top:3px}

/* ---------- Grids ---------- */
.grid{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
}

/* ---------- Cards ---------- */
.card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .18s,transform .18s
}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.section.alt .card{background:var(--bg)}
.card-media{
  aspect-ratio:3/2;max-width:100%;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border-bottom:1px solid var(--line);color:var(--accent);position:relative
}
.card-media svg{width:32px;height:32px}
/* On narrow screens, cards go to a single, full-width column (see the
   grid-3/grid-4 -> 1fr rule above). A single mobile card is much wider
   than a desktop grid card, so even the SAME aspect ratio as desktop
   renders a visually taller image block — 4/3 (taller than desktop's
   3/2) compounded that and made mobile images feel oversized/dominant.
   Matching desktop's 3/2 ratio exactly keeps the same photo framing/
   crop everywhere (no extra cropping vs. desktop) while meaningfully
   reducing the on-screen height of every card image and the empty
   tinted area behind icon-only placeholder cards. max-height is a
   safety cap for the widest phones so no card image ever grows past a
   comfortable size. */
@media (max-width:560px){
  .card-media{aspect-ratio:3/2;max-height:230px}
}
/* Subtle image zoom on hover — applies to real product photos and to
   the icon placeholder alike, so the interaction already works before
   any real photography is added. */
.card-media img,.card-media svg,.cat-photo img,.cat-photo svg,.choice-media img,
.guide-strip img,.guide-strip svg{
  transition:transform .45s cubic-bezier(.22,.68,0,1)
}
.card:hover .card-media img,.card:hover .card-media svg,
.cat-tile:hover .cat-photo img,.cat-tile:hover .cat-photo svg,
.choice-card:hover .choice-media img,
.guide-card:hover .guide-strip img,.guide-card:hover .guide-strip svg{transform:scale(1.06)}
.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-meta-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card-cat{
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)
}
.card-merchant{font-size:12.5px;color:var(--ink-faint)}
.card-merchant::before{content:'\2022';margin-right:8px;color:var(--line-strong)}
.card-title{font-family:var(--display);font-size:17px;font-weight:600}
.card-desc{color:var(--ink-soft);font-size:14.5px;line-height:1.5}
.card-price{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);margin:0}
.card-actions{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.card-actions .row{display:flex;gap:8px}
.card-actions .row .btn{flex:1}
.card-media-tag{position:absolute;top:12px;left:12px}

/* A tall, narrow product-on-white shot (e.g. a supplement bottle) —
   object-fit:contain keeps the whole bottle visible instead of cover's
   crop, and the padding + solid white background give it a consistent,
   neutral mat within the card-media box (which otherwise has a
   tinted gradient background) so every one of these photos reads the
   same regardless of the bottle's own proportions. Used only where a
   product opts in via imageFit:'contain' (see content.js/app.js's
   affiliateMedia()) — Goli's own wide product photography, and every
   other real photo on the site, keeps the default object-fit:cover
   treatment untouched. */
.card-media-contain-img{
  width:100%;height:100%;object-fit:contain;
  background:#fff;padding:18px;box-sizing:border-box
}

/* Compact placeholder for a live product with a named merchant but no
   real product photo yet (see hasPendingImageBadge() in app.js) — a
   short, clearly-labeled "<Merchant> Pick" strip instead of a large
   empty image area, used until a real, approved image (via that
   merchant's own official tools) replaces it with a normal full-height
   photo. The compound .card-media.card-media-compact selector (two
   classes) is more specific than the plain .card-media rule above and
   the one inside the mobile media query below, so this wins at every
   screen width regardless of where it sits in the file. */
.card-media.card-media-compact{
  aspect-ratio:auto;height:52px;min-height:52px;max-height:52px
}
.amazon-pick-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--bg);border:1px solid var(--line-strong);
  color:var(--ink-soft);font-size:12px;font-weight:700;letter-spacing:.02em
}
.card-media .amazon-pick-badge svg{width:14px;height:14px}

/* Mobile-only vertical rhythm: sections, grid gaps and card padding all
   inherit fairly generous desktop spacing values. On a single narrow
   column those add up to a lot of scroll distance and make the page
   feel loosely spaced rather than tightly composed, so this tightens
   (never removes) the same properties just for small screens. Desktop
   spacing is completely untouched. */
@media (max-width:560px){
  .section{padding-block:36px}
  .section.tight{padding-block:26px}
  .grid{gap:14px}
  .card-body{padding:14px 14px 16px}
  /* .hero (homepage) and .page-head (every inner page's title band)
     sit above the first .section on their respective pages. Tightening
     just the sections and leaving these two at their full desktop
     padding made the very top of the page feel inconsistent with the
     tighter rhythm right below it — this brings them down by the same
     proportion so the whole page reads as one consistent spacing scale. */
  .hero{padding-block:34px 26px}
  .page-head{padding-block:30px 0}
}

/* Category tiles — image area + caption, same pattern as the product/
   guide cards above. Falls back to the category icon on a flat tint
   (categoryTile() in app.js) until a real photo is supplied via an
   `image` field on that category, at which point it renders exactly
   like a product photo — no other markup or CSS changes needed. */
.cat-tile{
  display:flex;flex-direction:column;gap:0;border-radius:var(--radius);
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  box-shadow:var(--shadow-sm);overflow:hidden;
  transition:border-color .15s,box-shadow .18s,transform .18s
}
.cat-tile:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.cat-photo{
  aspect-ratio:4/3;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
.cat-photo svg{width:38px;height:38px;color:var(--accent)}
/* Consistency pass: on the same mobile page (Alternative Lifestyle),
   category tiles sit directly above product cards. Without this, an
   icon-only category tile at 4/3 renders visibly taller than an
   icon-only product card at 3/2 right below it — same "empty tinted
   box" content, two different heights. Matching .card-media's mobile
   ratio/cap here keeps every card type on the page reading as one
   consistent image treatment. */
@media (max-width:560px){
  .cat-photo{aspect-ratio:3/2;max-height:230px}
}
.cat-tile .name{font-family:var(--display);font-weight:600;font-size:15.5px;padding:14px 16px}
/* Guide-category tile count (guideCategoryTile() in app.js) — sits
   right under .name, so it needs the same horizontal padding but pulls
   the top spacing in since .name already has its own bottom padding. */
.cat-tile .cat-count{font-size:12.5px;color:var(--ink-faint);padding:0 16px 14px;margin-top:-8px}

/* Guides hub "Browse by Category" icon upgrade — scoped entirely to
   this one tile type via the extra .guide-cat-photo class added
   alongside .cat-photo in guideCategoryTile() (app.js), so Shop's
   category tiles — which use .cat-photo alone — are completely
   unaffected. Renders the separate, more-detailed guide-cat-icon
   artwork (guideCatIcon() in app.js) at well over double the shared
   default icon size, with a slightly bolder stroke for a premium,
   easily-readable look at normal desktop distance. The selector is
   written with two ancestor classes (.cat-tile .guide-cat-photo svg)
   so it reliably outranks both the base ".cat-photo svg" rule above
   and the later mobile-compacting ".cat-photo svg" override further
   down, regardless of source order or viewport. */
.cat-tile .guide-cat-photo svg{width:64px;height:64px;color:var(--accent);stroke-width:1.5}
@media (max-width:560px){
  .cat-tile .guide-cat-photo svg{width:58px;height:58px}
}

/* Homepage choice cards (Health Insurance / Alternative Lifestyle) — the
   two large, equally-prominent entry points the 2026 homepage leads
   with. Reuses the same card visual language (radius, shadow, hover
   lift, image-zoom-on-hover) as .card/.cat-tile above, at a larger,
   more spacious scale, with a real photo up top and a small icon badge
   overlapping its bottom edge to reinforce which side is which. */
.choice-grid{grid-template-columns:1fr 1fr}
@media (max-width:760px){.choice-grid{grid-template-columns:1fr}}
.choice-card{
  display:flex;flex-direction:column;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .18s
}
.choice-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px);color:var(--ink)}
.choice-media{
  aspect-ratio:16/9;max-width:100%;overflow:hidden;position:relative;
  background:linear-gradient(180deg,var(--surface),var(--surface-2))
}
.choice-icon{
  position:absolute;left:24px;bottom:0;transform:translateY(50%);
  width:52px;height:52px;border-radius:var(--radius-sm);flex:none;
  background:var(--bg);color:var(--accent);box-shadow:var(--shadow);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center
}
.choice-icon svg{width:24px;height:24px}
.choice-body{padding:clamp(30px,4vw,40px) clamp(24px,3.4vw,32px) clamp(24px,3.4vw,32px);display:flex;flex-direction:column;gap:12px;flex:1}
.choice-body h2{font-size:clamp(22px,2.8vw,27px);font-weight:700}
.choice-body p{color:var(--ink-soft);font-size:15.5px;line-height:1.55;max-width:38ch}
.choice-body .btn{margin-top:6px;align-self:flex-start;pointer-events:none}

/* Deal badge (used as an overlay on a product/deal card's media) */
.tag-deal{
  align-self:flex-start;background:var(--red-tint);color:var(--red);
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--radius-pill)
}
.deal-meta{font-size:13px;color:var(--ink-faint);display:flex;align-items:center;gap:6px}
.deal-meta svg{width:14px;height:14px}

/* Service card */
.svc-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:10px;
  transition:box-shadow .18s,transform .18s
}
.svc-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.svc-logo{
  width:52px;height:52px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);flex:none
}
.svc-logo svg{width:24px;height:24px}

/* Guide card */
.guide-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .18s,transform .18s
}
.guide-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
/* Was a fixed 84px icon-only strip. Now matches the same aspect-ratio
   photo pattern already used by .card-media/.cat-photo: falls back to
   the category icon on a flat tint until a real photo is supplied via
   an `image` field on that guide (guideCard() in app.js), at which
   point it renders as a full photo — same behavior, no other markup
   changes needed. Kept at .card-media's 3:2 ratio (the closest layout
   analog — a photo strip above a title/desc/button body) so mixed
   photo and icon-placeholder guide cards read as one consistent
   treatment, same as Shop's category tiles already do. */
.guide-strip{
  aspect-ratio:3/2;background:var(--accent-tint);display:flex;align-items:center;justify-content:center;color:var(--accent);
  border-bottom:1px solid var(--line);overflow:hidden
}
.guide-strip svg{width:26px;height:26px}
@media (max-width:560px){
  .guide-strip{aspect-ratio:3/2;max-height:230px}
}
.guide-related{font-size:13px;font-weight:600;color:var(--accent)}
.guide-related:hover{color:var(--accent-hover)}

/* ---------- Filters ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.chip{
  font-family:var(--body);font-size:14px;font-weight:500;padding:9px 15px;
  border-radius:var(--radius-pill);border:1px solid var(--line-strong);
  background:var(--bg);color:var(--ink-soft);cursor:pointer;transition:all .15s
}
.chip:hover{border-color:var(--ink-faint);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* Shop page's category chip row (#shopFilters) and Guides page's
   category chip row (#guideFilters) — scoped by id (not a shared
   class) so this never accidentally reaches some other, unrelated
   .filters row added later. Lets app.js scroll the selected chip into
   view under the sticky ~76px header without that header covering it. */
#shopFilters,#guideFilters{scroll-margin-top:92px}
@media (max-width:640px){
  /* At phone widths, Shop's 9 chips (All Products + 8 categories) and
     Guides' 11 chips (All Guides + 10 categories) would otherwise wrap
     into several rows, which pushes the active category — and the
     grid below it — well down the page and makes the selected chip
     easy to miss. Keep both in one horizontally scrollable row instead
     so the filter bar stays compact and the active category is
     immediately legible right under the page title. Desktop keeps the
     wrapping layout above, unchanged. */
  #shopFilters,#guideFilters{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    padding-bottom:6px;scrollbar-width:none
  }
  #shopFilters::-webkit-scrollbar,#guideFilters::-webkit-scrollbar{display:none}
  #shopFilters .chip,#guideFilters .chip{flex:none;scroll-snap-align:start}
}

/* ---------- Signup ---------- */
.signup{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(24px,4vw,40px);display:grid;gap:22px;grid-template-columns:1fr 1fr;align-items:center
}
@media (max-width:820px){.signup{grid-template-columns:1fr}}
.signup h2{font-size:clamp(23px,3.2vw,29px);font-weight:600}
.signup p{color:var(--ink-soft);margin-top:10px;font-size:15.5px}
.form-row{display:flex;gap:10px;flex-wrap:wrap}
.field{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.field input{
  font-family:var(--body);font-size:15px;padding:13px 14px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);width:100%
}
.field input:disabled{background:var(--surface-2);color:var(--ink-faint);cursor:not-allowed}
.field select,.field textarea{
  font-family:var(--body);font-size:15px;padding:13px 14px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);width:100%
}
.field textarea{resize:vertical;min-height:88px}
.field select:disabled,.field textarea:disabled{background:var(--surface-2);color:var(--ink-faint);cursor:not-allowed}
.form-note{font-size:13px;color:var(--ink-faint);margin-top:12px}
.consent-row{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13.5px;color:var(--ink-soft)}
.consent-row input[type=checkbox]{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--btn-primary)}
.consent-row input:disabled{cursor:not-allowed}
.consent-row label{cursor:pointer}
.form-status{font-size:13.5px;margin-top:12px;min-height:1.3em;font-weight:600}
.form-status-ok{color:#0B6F44}
.form-status-error{color:var(--red)}
/* Honeypot spam-trap field: fully hidden visually and from assistive
   tech and keyboard tabbing, but still present in the raw HTML/DOM
   where a simple bot's form-filling script would find and fill it. */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Insurance primary actions (Health Insurance page) ----------
   Same real-photo-plus-overlapping-icon-badge treatment as .choice-card
   (see homepage Health Insurance / Alternative Lifestyle cards): a real
   photo across the top, in overflow:hidden so its corners follow the
   card radius, with the action's icon badge overlapping its bottom edge.
   All text/CTA content now lives in .action-body so the padding that
   used to sit directly on .action-card can account for the icon
   overlapping into it, exactly like .choice-body does. */
.insurance-actions{align-items:stretch}
.action-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .18s,transform .18s
}
.action-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.action-media{
  aspect-ratio:16/9;max-width:100%;overflow:hidden;position:relative;
  background:linear-gradient(180deg,var(--surface),var(--surface-2))
}
.action-media img{transition:transform .3s}
.action-card:hover .action-media img{transform:scale(1.06)}
.action-icon{
  position:absolute;left:24px;bottom:0;transform:translateY(50%);
  width:52px;height:52px;border-radius:var(--radius-sm);flex:none;
  background:var(--bg);color:var(--accent);box-shadow:var(--shadow);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center
}
.action-icon svg{width:24px;height:24px}
.action-body{
  padding:clamp(30px,3.6vw,34px) clamp(24px,3.2vw,32px) clamp(24px,3.2vw,32px);
  display:flex;flex-direction:column;gap:14px;flex:1
}
.action-body h2{font-size:clamp(19px,2.4vw,22px);font-weight:600}
.action-body p{color:var(--ink-soft);font-size:15px;line-height:1.55}
.action-list{list-style:none;padding:0;margin:2px 0 4px;display:flex;flex-direction:column;gap:7px}
.action-list li{display:flex;gap:8px;align-items:flex-start;color:var(--ink-soft);font-size:13.5px}
.action-list svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--accent)}
.action-body .btn{margin-top:auto}
.action-note{font-size:12.5px;color:var(--ink-faint)}

/* Mobile-only icon/badge compacting. Every icon badge on the site
   (.choice-icon, .action-icon, .svc-logo, and the plain icon glyph
   used by .card-media/.cat-photo/.guide-strip as an image placeholder)
   is already a small, explicitly-sized badge on desktop — but a real
   mobile check found these reading as oversized and, on the Health
   Insurance page, pushing the "Shop Plans & Get a Quote" CTA down the
   page. This locks every one of them to an explicit, smaller size at
   this width so nothing can render larger than intended, and tightens
   the surrounding card padding so text/CTAs start higher in the
   viewport. Desktop keeps its current (already-compact) sizes.
   NOTE: this block must stay AFTER every base rule it overrides
   (.choice-icon, .action-icon, .svc-logo, .cat-photo, .card-media,
   .guide-strip, .choice-media, .action-media, .action-body, .svc-card,
   .choice-body) — same-specificity CSS rules resolve by source order
   regardless of the @media query, so placing this earlier in the file
   would let the later base rule win and silently cancel every override
   below. */
@media (max-width:560px){
  .choice-icon{width:40px;height:40px}
  .choice-icon svg{width:18px;height:18px}
  .action-icon{width:40px;height:40px}
  .action-icon svg{width:18px;height:18px}
  .svc-logo{width:40px;height:40px}
  .svc-logo svg{width:18px;height:18px}
  .cat-photo svg{width:26px;height:26px}
  .card-media svg{width:24px;height:24px}
  .guide-strip svg{width:20px;height:20px}

  /* Homepage Health Insurance / Alternative Lifestyle photography, and
     the matching Shop Plans / Agent Contact photography on the Health
     Insurance page itself: already a compact 16:9 crop, but that still
     runs close to 240px tall on the widest phones. Capping it keeps the
     photo from dominating the card, and from pushing the CTA below it
     too far down the page, on any mobile width. */
  .choice-media{max-height:170px}
  .action-media{max-height:150px}

  /* Tighter padding on the cards these badges live in, so the badge,
     heading, and CTA all sit closer together instead of being spread
     out by full desktop padding. */
  .action-body{padding:18px;gap:10px}
  .svc-card{padding:14px;gap:8px}
  .choice-body{padding:18px 18px 20px;gap:8px}
}

/* ---------- Agent-contact lead form (Health Insurance page) ---------- */
.lead-form-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(24px,4vw,40px);max-width:760px;margin-inline:auto
}
.lead-form-card > p{color:var(--ink-soft);font-size:15.5px;margin-top:10px;margin-bottom:22px}
.lead-form-card h2{font-size:clamp(21px,2.8vw,25px);font-weight:600}
.lead-form-card form{display:flex;flex-direction:column;gap:16px}
.lead-form-card .form-row{margin-bottom:0}

/* ---------- Kit (ConvertKit) embed — best-effort style match ----------
   Kit's async embed script (see #kit-embed / loadKitEmbed() in app.js)
   injects its OWN form markup and its OWN stylesheet at runtime — it is
   not markup this codebase controls. Kit's docs say the host page's CSS
   is deliberately given priority over Kit's own, so these overrides are
   the supported way to bring it visually in line with the rest of
   MedKept. They target Kit's long-standing "formkit-*" class names.
   These class names could not be confirmed against a live-rendered Kit
   form from this environment (outbound requests to kit.com are blocked
   here) — treat this block as an unverified starting point and check it
   against the real embed in a live browser before relying on it. */
#kit-embed{width:100%}
#kit-embed .formkit-form{
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;
  font-family:var(--body);margin:0;max-width:none
}
#kit-embed .formkit-fields{display:flex;flex-wrap:wrap;gap:10px;flex:1;min-width:0}
#kit-embed .formkit-field{flex:1;min-width:180px}
#kit-embed .formkit-input{
  font-family:var(--body);font-size:15px;padding:13px 14px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);width:100%;
  box-sizing:border-box
}
#kit-embed .formkit-submit{
  font-family:var(--body);font-weight:600;font-size:15px;line-height:1;
  padding:14px 22px;border-radius:var(--radius-pill);border:1px solid transparent;
  background:var(--btn-primary);color:var(--on-accent);cursor:pointer
}
#kit-embed .formkit-submit:hover{background:var(--btn-primary-hover)}
#kit-embed .formkit-alert{font-size:13px;margin-top:10px;border-radius:var(--radius-sm)}

/* ---------- Disclosure ---------- */
.disclosure{
  display:flex;gap:10px;align-items:flex-start;margin-top:22px;
  font-size:13px;color:var(--ink-faint);line-height:1.5
}
.disclosure svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--ink-faint)}
.disclosure a{font-weight:600}

/* Internal cross-links between Shop/Services/Deals/Guides — a short,
   muted text row, not a call to action, so it doesn't compete visually
   with the page's real buttons. */
.cross-links{margin-top:10px;font-size:13px;color:var(--ink-faint)}
.cross-links a{color:var(--accent);font-weight:600}
.cross-links a:hover{color:var(--accent-hover)}

/* Visually hidden but still present for screen readers and search
   engines — used to keep a correct H1 -> H2 -> H3 heading order on
   pages (Shop, Deals, Guides) whose visible design doesn't call for a
   second on-screen heading above the grid. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* ---------- Page header (inner pages) ---------- */
.page-head{padding-block:44px 0}
.page-head h1{font-size:clamp(28px,4.4vw,40px);font-weight:700;letter-spacing:-.025em}
.page-head p{color:var(--ink-soft);font-size:17px;margin-top:12px;max-width:620px}

/* Alternative Lifestyle only: a compact secondary way to jump straight
   to a Shop category, sitting between the intro copy and the large
   "Shop by Category" cards below it. Plain <a href> pills — no chip
   state, no JS, just direct links to the same Shop URLs the cards
   below already use. One row always (nowrap): with only 4 items this
   fits on one line on desktop, and scrolls horizontally on narrow
   phones instead of wrapping into a tall block. */
.lifestyle-quick-nav{
  display:flex;flex-wrap:nowrap;gap:10px;margin-top:20px;
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:none
}
.lifestyle-quick-nav::-webkit-scrollbar{display:none}
.quick-nav-chip{
  flex:none;scroll-snap-align:start;
  font-family:var(--body);font-size:15px;font-weight:600;padding:13px 20px;
  border-radius:var(--radius-pill);border:1px solid var(--line-strong);
  background:var(--bg);color:var(--ink);white-space:nowrap;transition:all .15s
}
.quick-nav-chip:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Prose (legal / about) ---------- */
.prose{max-width:720px;padding-block:32px 8px}
.prose h2{font-size:21px;font-weight:600;margin-top:34px;margin-bottom:10px}
.prose h3{font-size:17px;font-weight:600;color:var(--ink);margin-top:22px;margin-bottom:8px}
.prose p{color:var(--ink-soft);font-size:16px;margin-bottom:14px}
.prose ul,.prose ol{color:var(--ink-soft);font-size:16px;margin:0 0 14px;padding-left:22px}
.prose li{margin-bottom:6px}
.prose table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:14.5px}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.prose th{background:var(--surface);color:var(--ink);font-weight:600}
.prose td{color:var(--ink-soft)}
.prose strong{color:var(--ink);font-weight:600}
.callout{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);padding:18px 20px;margin:22px 0
}
.callout p{margin:0;color:var(--ink)}

/* ---------- Guides articles ---------- */
.breadcrumbs{margin-bottom:14px}
.breadcrumbs ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:13px;color:var(--ink-faint)}
.breadcrumbs li{display:flex;align-items:center}
.breadcrumbs li:not(:last-child)::after{content:'\2192';margin:0 8px;color:var(--ink-faint)}
.breadcrumbs a{color:var(--accent);font-weight:600}
.breadcrumbs li[aria-current="page"]{color:var(--ink-faint);font-weight:500}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;color:var(--ink-faint);font-size:13.5px;margin-top:16px}
.article-meta span{display:inline-flex;align-items:center;gap:6px}
.article-meta svg{width:14px;height:14px;flex:none}
.article-toc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;margin:26px 0 4px;max-width:640px
}
.article-toc h2{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);margin:0 0 10px;font-weight:700}
.article-toc ol{margin:0;padding-left:20px;color:var(--ink-soft)}
.article-toc li{margin-bottom:6px;font-size:14.5px}
.article-toc a{font-weight:600}
.source-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.source-list li{
  display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px
}
.source-list svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--accent)}
.source-list a{font-weight:600;word-break:break-word}

.steps{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin-top:8px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.step .n{
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-size:13px;font-weight:700;margin-bottom:10px
}
.step h3{font-size:16px;font-weight:600;margin-bottom:6px}
.step p{color:var(--ink-soft);font-size:14.5px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--surface);margin-top:8px}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;padding-block:44px 32px
}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-col h3{
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px
}
.footer-col a{display:block;color:var(--ink-soft);font-size:15px;padding:5px 0}
.footer-col a:hover{color:var(--accent)}
.footer-about p{color:var(--ink-soft);font-size:14.5px;margin-top:12px;max-width:290px}
.footer-legal{
  border-top:1px solid var(--line);padding-block:20px 30px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--ink-faint)
}
.footer-legal p{max-width:660px;line-height:1.55}