/* ============================================================
   OptiPin shared theme — "clinical aurora"
   Full design system for the content pages. Loaded AFTER the
   Tailwind CDN so these rules win. Transforms the existing
   Tailwind markup to match the new homepage (index.html):
   aurora background, Instrument Serif + Hanken Grotesk + Geist
   Mono, glass cards, gradient accents, matching topbar + footer.
   ============================================================ */

:root{
  --op-bg:#070b18; --op-bg2:#0a1024;
  --op-text:#eaeefb; --op-muted:#97a4c9; --op-faint:#5d6788;
  --op-line:rgba(150,178,255,.13); --op-line-strong:rgba(150,178,255,.26);
  --op-paper:rgba(150,178,255,.05); --op-paper-2:rgba(150,178,255,.08);
  --op-teal:#36e6d2; --op-violet:#8d7bff; --op-amber:#ffb454; --op-blue:#5b93f0;
  --op-grad:linear-gradient(100deg,#36e6d2 0%,#6ad0ff 38%,#8d7bff 100%);
  --op-brand-grad:linear-gradient(120deg,#1d4ed8 0%,#2563eb 45%,#60a5fa 100%);
  --op-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------------- base ---------------- */
html{ background:var(--op-bg) !important; scroll-behavior:smooth; }
body{
  background:transparent !important;
  color:var(--op-text) !important;
  font-family:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing:antialiased;
  padding-top:calc(env(safe-area-inset-top) + 58px); /* clear the fixed topbar (incl. notch) */
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(58vw 58vw at 6% -12%, rgba(27,156,154,.20), transparent 60%),
    radial-gradient(55vw 55vw at 104% 8%, rgba(91,70,201,.16), transparent 60%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(150,178,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,178,255,.06) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(130% 80% at 50% 0%, #000 26%, transparent 76%);
          mask-image:radial-gradient(130% 80% at 50% 0%, #000 26%, transparent 76%);
}
/* subtle grain */
body{ position:relative; }

/* ---------------- typography ---------------- */
h1,h2,h3,h4{ font-family:"Hanken Grotesk", sans-serif; letter-spacing:-.03em; }
.op-serif{ font-family:"Instrument Serif", Georgia, serif !important; font-weight:400; font-style:normal; letter-spacing:-.01em; }
.op-serif.it{ font-style:italic; }
.op-grad-text{ background:var(--op-grad); -webkit-background-clip:text; background-clip:text; color:transparent !important; }
.op-mono, code, kbd, pre, .font-mono{ font-family:"Geist Mono", ui-monospace, monospace !important; }

/* ---------------- broad Tailwind palette remap (content adopts the theme) ---------------- */
[class*="text-slate-100"], [class*="text-white"]{ color:var(--op-text) !important; }
[class*="text-slate-200"], [class*="text-slate-300"]{ color:#c3cbe6 !important; }
[class*="text-slate-400"]{ color:var(--op-muted) !important; }
[class*="text-slate-500"]{ color:var(--op-faint) !important; }
[class*="text-brand-200"], [class*="text-brand-300"], [class*="text-brand-400"]{ color:var(--op-blue) !important; }
[class*="border-brand"]{ border-color:var(--op-blue) !important; }
[class*="border-slate-800"], [class*="border-slate-700"]{ border-color:var(--op-line) !important; }
/* glassify the common card pattern (slate bg + border / rounded) */
[class*="bg-slate-900"], [class*="bg-slate-950"][class*="rounded"], [class*="bg-slate-800/"]{
  background:var(--op-paper) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
[class*="from-brand-900"], [class*="to-slate-900"], [class*="bg-gradient"][class*="brand"]{
  background:var(--op-paper-2) !important;
}
/* primary buttons → brand pill; links → teal accent */
[class*="bg-brand-600"], [class*="bg-brand-500"]{ background:var(--op-brand-grad) !important; border-radius:999px !important; color:#fff !important; }
[class*="bg-white"][class*="text-slate-900"]{ background:var(--op-brand-grad) !important; color:#fff !important; border-radius:999px !important; }
a[href*="apps.apple.com"]{ border-radius:999px !important; }
.hub-prose a, .prose a, a[class*="text-brand"]{ color:var(--op-blue) !important; }

/* ---------------- content sections / prose ---------------- */
section[id] > h2, .hub-prose h2{
  font-family:"Hanken Grotesk",sans-serif; font-weight:800; letter-spacing:-.03em;
  border-color:var(--op-line) !important;
}
section[id] > h3{ color:var(--op-blue) !important; }
/* stylized feature icons (homepage line-icon look) */
.op-ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
  color:var(--op-blue); background:color-mix(in srgb,var(--op-blue) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--op-blue) 30%,transparent); }
.op-ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.op-cardicon{ width:30px; height:30px; display:inline-block; fill:none; stroke:var(--op-blue); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.hub-prose p, .hub-prose li{ color:#c3cbe6 !important; }
.hub-prose strong{ color:var(--op-text) !important; }
.hub-prose h3, .hub-prose h4{ color:var(--op-text) !important; font-weight:700; letter-spacing:-.02em; }
.hub-prose hr{ border-color:var(--op-line) !important; }
.hub-prose table th{ color:var(--op-text) !important; }
/* FAQ <details> as glass cards */
details[class*="rounded"]{ background:var(--op-paper) !important; border:1px solid var(--op-line) !important; }

/* ---------------- TOPBAR (matches homepage) ---------------- */
.op-topbar{
  position:fixed; z-index:50; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 12px) clamp(18px,5vw,40px) 12px;
  background:linear-gradient(180deg,rgba(7,11,24,.86),rgba(7,11,24,.4) 70%,transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.op-brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; font-size:18px; color:var(--op-text); text-decoration:none; }
.op-brand img{ width:28px; height:28px; border-radius:8px; box-shadow:0 0 18px rgba(59,130,246,.35); }
.op-nav{ display:flex; align-items:center; gap:24px; }
.op-nav a{ color:var(--op-muted); text-decoration:none; font-size:14px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; transition:color .2s var(--op-ease); }
.op-nav a:hover, .op-nav a[aria-current="page"]{ color:var(--op-text); }
@media (max-width:920px){ .op-nav{ display:none; } }
.op-right{ display:flex; align-items:center; gap:10px; }
.op-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; letter-spacing:-.01em;
  padding:9px 16px; border-radius:999px; color:#fff !important; background:var(--op-brand-grad);
  border:0; cursor:pointer; text-decoration:none; box-shadow:0 10px 30px -10px rgba(37,99,235,.6);
  transition:transform .2s var(--op-ease); }
.op-btn:active{ transform:scale(.96); }
.op-btn svg{ width:16px; height:18px; fill:currentColor; }
.op-menu-btn{ display:none; -webkit-appearance:none; appearance:none; cursor:pointer; width:40px; height:40px;
  border-radius:11px; align-items:center; justify-content:center; background:var(--op-paper-2);
  border:1px solid var(--op-line-strong); color:var(--op-text); }
.op-menu-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
@media (max-width:920px){ .op-menu-btn{ display:inline-flex; } }
@media (max-width:560px){ .op-btn .dlabel{ display:none; } .op-btn{ padding:9px 12px; } }

/* overlay menu */
.op-overlay{ position:fixed; inset:0; z-index:70; background:rgba(5,8,15,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .3s var(--op-ease); }
.op-overlay.open{ opacity:1; pointer-events:auto; }
.op-overlay .panel{ position:absolute; top:0; left:0; right:0;
  background:linear-gradient(180deg,#0b1226,#070b18); border-bottom:1px solid var(--op-line-strong);
  box-shadow:0 30px 80px -30px #000; padding:calc(env(safe-area-inset-top) + 74px) clamp(20px,5vw,40px) 26px;
  transform:translateY(-14px); transition:transform .35s var(--op-ease); }
.op-overlay.open .panel{ transform:none; }
.op-overlay .close{ position:absolute; top:calc(env(safe-area-inset-top) + 16px); right:clamp(20px,5vw,40px);
  background:transparent; border:0; cursor:pointer; color:var(--op-muted); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.op-mgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:1100px; margin-inline:auto; }
@media (max-width:760px){ .op-mgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:430px){ .op-mgrid{ grid-template-columns:1fr; } }
.op-mgrid a{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--op-text);
  background:var(--op-paper); border:1px solid var(--op-line); border-radius:14px; padding:14px 16px; font-weight:600; font-size:.95rem;
  transition:transform .25s var(--op-ease), border-color .25s var(--op-ease); }
.op-mgrid a:hover{ transform:translateY(-2px); border-color:var(--op-line-strong); }

/* ---------------- HERO (injected per page) ---------------- */
.op-hero{ position:relative; padding:44px clamp(20px,6vw,48px) 56px; overflow:hidden;
  width:100vw; margin-inline:calc(50% - 50vw); }  /* full-bleed even when nested in a max-width container */
.op-hero .inner{ max-width:1180px; margin-inline:auto; }
.op-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--op-teal);
  display:inline-flex; align-items:center; gap:10px; }
.op-eyebrow::before{ content:""; width:24px; height:1px; background:var(--op-teal); opacity:.6; }
.op-hero h1{ font-size:clamp(2.4rem,6vw,4.2rem); font-weight:800; letter-spacing:-.035em; line-height:1.03; margin:16px 0 14px; max-width:18ch; }
.op-hero .lead{ font-size:clamp(1.05rem,2.2vw,1.25rem); color:var(--op-muted); max-width:54ch; }
.op-crumb{ font-size:13px; color:var(--op-faint); margin-bottom:4px; }
.op-crumb a{ color:var(--op-muted); text-decoration:none; }
.op-signal{ position:absolute; right:-5%; top:0; width:60%; height:100%; z-index:-1; opacity:.5; pointer-events:none; }

/* ---------------- FOOTER ---------------- */
.op-footer{ border-top:1px solid var(--op-line); margin-top:40px; padding:40px clamp(20px,6vw,48px) calc(env(safe-area-inset-bottom) + 36px); text-align:center; }
.op-footlinks{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; max-width:760px; margin:0 auto 14px; }
.op-footlinks a{ color:var(--op-muted); text-decoration:none; font-size:13px; font-weight:500; }
.op-footlinks a:hover{ color:var(--op-text); }
.op-footer .copy{ color:var(--op-faint); font-size:12.5px; }

/* ---------------- hero CTAs + signal motif ---------------- */
.op-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.op-hero-meta{ margin-top:16px; color:var(--op-faint); font-size:13px; font-weight:600; }
.op-btn-ghost{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px;
  padding:11px 18px; border-radius:999px; color:var(--op-text) !important; text-decoration:none;
  background:transparent; border:1px solid var(--op-line-strong); transition:background .2s var(--op-ease); }
.op-btn-ghost:hover{ background:var(--op-paper-2); }
.op-hero .op-btn{ padding:12px 20px; font-size:15px; }
.op-signal{ position:absolute; right:-4%; top:2%; width:62%; height:96%; z-index:-1; opacity:.55; pointer-events:none; }
@media (max-width:760px){ .op-signal{ opacity:.32; width:100%; right:0; } }
.op-bd{ opacity:0; }

/* ---------------- section "steps" (big headers + gradient hairline) ---------------- */
main section[id] > h2{
  font-size:clamp(1.7rem,4.2vw,2.6rem) !important; font-weight:800 !important;
  letter-spacing:-.035em !important; border:0 !important; padding:0 !important; margin-bottom:18px !important;
}
main section[id] > h2::before{
  content:""; display:block; width:42px; height:3px; border-radius:3px;
  background:var(--op-grad); margin-bottom:20px;
}
main section[id]{ scroll-margin-top:88px; }
/* glassy prose cards + lift on feature/FAQ cards */
[class*="rounded-2xl"], [class*="rounded-xl"]{ border-radius:20px; }
#track-trt-optipin [class*="rounded"], .op-card{ transition:transform .35s var(--op-ease), border-color .35s var(--op-ease); }
#track-trt-optipin [class*="rounded"]:hover{ transform:translateY(-4px); border-color:var(--op-line-strong) !important; }
details[class*="rounded"] summary{ cursor:pointer; }

/* ---------------- scroll reveal + reading progress ---------------- */
.op-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--op-ease), transform .7s var(--op-ease); }
.op-reveal.in{ opacity:1; transform:none; }
.op-progress{ position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
  background:var(--op-grad); box-shadow:0 0 12px var(--op-teal); transition:width .12s linear; }

/* ---------------- best-practice polish (Vercel guidelines + high-end taste) ---------------- */
html{ color-scheme:dark; -webkit-text-size-adjust:100%; scroll-padding-top:76px; }
html, body{ overflow-x:hidden; }
::selection{ background:color-mix(in srgb,var(--op-blue) 32%,transparent); color:#fff; }

/* widows + readability */
h1,h2,h3{ text-wrap:balance; }
p, li, .lead{ text-wrap:pretty; }
.hub-prose p, .hub-prose li{ line-height:1.72; }
.op-mono, code, .font-mono{ font-variant-numeric:tabular-nums; }

/* generous breathing rhythm between content "steps" (taste: massive whitespace) */
main section[id]{ margin-bottom:clamp(3rem,6vw,5rem) !important; }

/* tactile interaction defaults + visible focus (a11y) */
a, button, summary, [role="button"]{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
a{ text-underline-offset:3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.op-btn:focus-visible, .op-btn-ghost:focus-visible{ outline:2px solid var(--op-blue); outline-offset:3px; border-radius:6px; }

/* ultra-light iconography (high-end taste) */
.op-ico svg{ stroke-width:1.4; }
.op-signal path{ stroke-width:2; }

/* skip link (a11y) */
.op-skip{ position:fixed; top:-120px; left:12px; z-index:80; background:var(--op-bg2); color:var(--op-text);
  border:1px solid var(--op-line-strong); border-radius:10px; padding:10px 16px; font-weight:600; font-size:14px; text-decoration:none;
  transition:top .2s var(--op-ease); }
.op-skip:focus{ top:calc(env(safe-area-inset-top) + 10px); }

/* ---------------- desktop QR download popover ---------------- */
.op-qr{ position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:rgba(5,8,15,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--op-ease); }
.op-qr.open{ opacity:1; pointer-events:auto; }
.op-qr-card{ position:relative; width:min(340px,90vw); text-align:center;
  background:linear-gradient(180deg,#0e1530,#0a1024); border:1px solid var(--op-line-strong);
  border-radius:24px; padding:30px 28px; box-shadow:0 40px 100px -30px #000;
  transform:translateY(10px) scale(.98); transition:transform .3s var(--op-ease); }
.op-qr.open .op-qr-card{ transform:none; }
.op-qr-close{ position:absolute; top:12px; right:14px; background:transparent; border:0; cursor:pointer;
  color:var(--op-muted); font-size:16px; line-height:1; padding:6px; }
.op-qr-code{ width:196px; height:196px; margin:4px auto 18px; background:#fff; border-radius:16px; padding:13px; }
.op-qr-code img{ width:100%; height:100%; display:block; image-rendering:pixelated; }
.op-qr-card h3{ font-size:1.2rem; font-weight:800; letter-spacing:-.02em; }
.op-qr-card p{ color:var(--op-muted); font-size:.9rem; margin:6px 0 18px; }
.op-qr-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px;
  padding:11px 18px; border-radius:999px; color:#fff !important; background:var(--op-brand-grad); text-decoration:none;
  box-shadow:0 10px 30px -10px rgba(37,99,235,.6); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; } *{ animation:none !important; }
  .op-reveal{ opacity:1 !important; transform:none !important; }
  .op-bd{ opacity:1 !important; }
  .op-signal path{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
  .op-qr, .op-qr-card{ transition:none !important; }
}