/* Shared design system for OnlyFunds subpages
   (product/* and compare/* pages link to this; index.html keeps its
   own inline copy of the equivalent rules for now). */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:          #161616;
  --bg-alt:      #161616;
  --bg-card:     #1f1f1f;
  --bg-elev:     #242424;
  --border:      rgba(76, 76, 76, .5);
  --border-soft: rgba(255, 255, 255, .08);
  --text:        #f7f7f7;
  --text-muted:  #969696;
  --text-dim:    #5e5e5e;
  --accent:      #ad00b8;
  --accent-hi:   #d903fa;
  --accent-hov:  #dd00eb;
  --accent-soft: #dac2e6;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: 'Fjalla One', arial, sans-serif;
  letter-spacing: .03em;
  line-height: 1.15;
}
h1 { font-size: 2.6rem; margin-bottom: 18px; }
h2 { font-size: 1.85rem; margin-bottom: 14px; }
h3 { font-size: 1.25rem; margin-bottom: 10px; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.accent { color: var(--accent-hi); }
.muted  { color: var(--text-muted); }
.small  { font-size: .9rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 4px;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .18s ease, background .18s ease;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent-hi);
  color: #fff !important;
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--accent-hov);
  box-shadow: 0 0 24px rgba(217, 3, 250, .55);
}
.btn-secondary {
  background: transparent;
  color: #fff !important;
  border: 1px solid var(--accent-hi);
}
.btn-secondary:hover {
  background: rgba(217, 3, 250, .1);
  transform: translateY(-2px);
}
.btn-large { padding: 16px 34px; font-size: 1rem; }

/* ---- Header / Nav ---- */
.site-header {
  background: rgb(173, 0, 184);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
}
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.nav-links a {
  color: #ffffff;
  font-weight: 500;
  font-size: .87rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .18s ease, text-shadow .18s ease, transform .12s ease;
}
.nav-links a:not(.nav-cta):hover {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(255, 255, 255, .85);
  transform: translateY(-1px);
}
.nav-cta {
  background: hsl(207, 100%, 70%);
  color: #0a1830 !important;
  padding: 4px 9px;
  border-radius: 3px;
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.nav-cta:hover {
  background: hsl(207, 100%, 80%);
  color: #0a1830 !important;
  transform: translateY(-2px);
  box-shadow: 0 0 24px hsla(207, 100%, 70%, .85);
}

/* Dropdown menus (Product, Compare) */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger {
  color: #ffffff;
  font-weight: 500;
  font-size: .87rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .18s ease, text-shadow .18s ease, transform .12s ease;
}
.nav-dropdown-trigger:hover,
.nav-dropdown:hover .nav-dropdown-trigger {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(255, 255, 255, .85);
  transform: translateY(-1px);
}
.nav-caret { font-size: .7em; line-height: 1; transition: transform .15s ease; }
.nav-dropdown:hover .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  padding: 8px 0;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(2px);
}
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-links .nav-dropdown-menu a {
  display: block;
  padding: 9px 18px;
  color: #1f1f1f;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.nav-links .nav-dropdown-menu a:hover {
  background: #f4f4f5;
  color: var(--accent);
  text-shadow: none;
  transform: none;
}
/* ---- Mobile responsive ---- */
/* iPad portrait + smaller laptops — tighten the container padding so
   the content has a little more breathing room from the screen edge. */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }
}

/* Tablet & small laptop — keep nav links visible (no hamburger needed
   at this size), just shrink them so 7-8 links fit comfortably. */
@media (max-width: 900px) {
  .nav { padding: 14px 0; }
  .nav-links { gap: 18px; row-gap: 8px; }
  .nav-links a { font-size: .78rem; letter-spacing: .03em; }
}

/* Phones — wrap the nav, scale the typography, stack the hero CTAs,
   tighten section padding so vertical rhythm doesn't feel cavernous. */
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.55rem; }
  h3 { font-size: 1.1rem; }

  .nav { padding: 10px 0; }
  .nav-links { gap: 10px; row-gap: 6px; }
  .nav-links a { font-size: .72rem; padding: 2px 4px; }
  .nav-cta { padding: 4px 8px; }

  .subpage-hero { padding: 44px 0 28px; }
  .subpage-hero .lede { font-size: 1rem; }
  .subpage-hero .cta-row { flex-direction: column; align-items: stretch; }
  .subpage-hero .cta-row .btn { width: 100%; }

  .block { padding: 38px 0; }
  .section-head { margin-bottom: 24px; }

  /* Compare-nav buttons — smaller + tighter wrap. */
  .compare-nav { padding: 14px 0; }
  .cmp-nav-btn { padding: 6px 10px; font-size: .55rem; }

  /* Comparison table — keep it scrollable horizontally so 3 columns
     stay readable instead of getting squeezed into broken layout. */
  .cmp-table-wrap { -webkit-overflow-scrolling: touch; }
  .cmp-table { font-size: .82rem; min-width: 480px; }
  .cmp-table th, .cmp-table td { padding: 9px 10px; }

  /* Win-point cards — tighter padding. */
  .point-card { padding: 18px 20px; }

  /* Form */
  .form-consent { padding: 18px 16px; }
  .form-check { font-size: .85rem; }
  .form-actions .btn { width: 100%; }

  /* Footer — comfortable on narrow screens. */
  footer { padding: 20px 0; }
  .footer-legal { gap: 12px; }
}

/* Very small phones (e.g., iPhone SE) — final pass for legibility. */
@media (max-width: 380px) {
  h1 { font-size: 1.75rem; }
  .nav-links a { font-size: .68rem; }
  .cmp-nav-btn { padding: 5px 8px; font-size: .5rem; }
}

/* ---- Subpage layout shared bits ---- */
.subpage-hero {
  padding: 70px 0 50px;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(173, 0, 184, .22), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.subpage-hero .eyebrow {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin-bottom: 14px;
}
.subpage-hero .lede {
  max-width: 760px;
  margin: 14px auto 30px;
  font-size: 1.08rem;
  color: var(--text-muted);
}
.subpage-hero .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.subpage-hero .trial-meta {
  margin-top: 14px;
  font-size: .82rem;
  color: var(--text-muted);
  letter-spacing: .04em;
}

.block { padding: 60px 0; }
.block-alt { background: var(--bg-alt); }

.section-head {
  text-align: center;
  margin-bottom: 36px;
}
.section-head .eyebrow {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin-bottom: 10px;
}

.tldr {
  background: rgba(217, 3, 250, .06);
  border: 1px solid rgba(217, 3, 250, .22);
  border-radius: 8px;
  padding: 22px 26px;
  max-width: 920px;
  margin: 0 auto;
  color: var(--text);
}
.tldr-label {
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-hi);
  font-size: .8rem;
  margin-right: 6px;
}

/* Feature section grid (Product pages) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 26px;
}
.feature-card h3 {
  color: var(--text);
  margin-bottom: 14px;
}
.feature-card ul { list-style: none; padding: 0; }
.feature-card li {
  padding: 7px 0 7px 22px;
  position: relative;
  color: #e5e5e5;
  font-size: .94rem;
}
.feature-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--accent-hi);
  font-weight: 700;
}

/* Comparison table (Compare pages) */
.cmp-table-wrap {
  max-width: 940px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}
.cmp-table th, .cmp-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.cmp-table thead th {
  background: rgba(217, 3, 250, .08);
  color: var(--text);
  letter-spacing: .04em;
  font-size: .82rem;
  text-transform: uppercase;
}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table td.center, .cmp-table th.center { text-align: center; }
.cmp-yes  { color: var(--accent-hi); font-weight: 700; }
.cmp-no   { color: var(--text-dim); }
.cmp-soft { color: var(--text-muted); }

/* Top-of-page compare nav: solid-color buttons linking to all 7
   comparison pages. The button matching the current page gets the
   `cmp-nav-btn-active` modifier so the user can see where they are. */
.compare-nav {
  padding: 22px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.compare-nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.cmp-nav-btn {
  display: inline-block;
  padding: 7px 14px;
  background: var(--accent-hi);
  color: #ffffff !important;
  border-radius: 5px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .15s ease, transform .12s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.cmp-nav-btn:hover {
  background: var(--accent-hov);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(217, 3, 250, .55);
}
.cmp-nav-btn-active,
.cmp-nav-btn-active:hover {
  background: #ffffff;
  color: var(--accent-hi) !important;
  cursor: default;
  transform: none;
  box-shadow: 0 0 14px rgba(217, 3, 250, .35);
}

/* Win-points / verdict layout */
.points-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.point-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 26px;
}
.point-card h3 { color: var(--text); }
.point-card p { color: var(--text-muted); }

.verdict {
  max-width: 860px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(217, 3, 250, .12), transparent 70%),
    var(--bg-card);
  border: 1px solid rgba(217, 3, 250, .25);
  border-radius: 8px;
  padding: 28px 32px;
  color: var(--text);
}
.verdict p + p { margin-top: 14px; }

.cross-links {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.cross-links a {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .85rem;
  color: var(--text);
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.cross-links a:hover {
  border-color: var(--accent-hi);
  background: rgba(217, 3, 250, .07);
  transform: translateY(-2px);
}

.final-cta {
  text-align: center;
  padding: 70px 0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(173, 0, 184, .25), transparent 70%),
    var(--bg);
}
.final-cta p { color: var(--text-muted); max-width: 620px; margin: 0 auto 26px; }
.trial-meta { font-size: .82rem; color: var(--text-muted); letter-spacing: .04em; margin-top: 14px; }

/* Contact form (contact-us page). Dark cards w/ magenta-accent focus
   states. Consent block visually separated from the regular fields so
   the double-opt-in language reads as a distinct compliance section. */
.contact-form {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: center;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.form-row label {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
}
.form-row label .optional {
  font-size: .7rem;
  font-weight: 400;
  text-transform: none;
  color: var(--text-dim);
  margin-left: 4px;
  letter-spacing: 0;
}
.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row textarea {
  background: #d1d5db;
  border: 1px solid #a8b0bd;
  color: #111827;
  padding: 12px 14px;
  border-radius: 6px;
  font-family: inherit;
  font-size: .95rem;
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  width: 100%;
  text-align: center;
}
.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--accent-hi);
  background: #e5e7eb;
  box-shadow: 0 0 0 3px rgba(217, 3, 250, .15);
}
.form-row input::placeholder,
.form-row textarea::placeholder {
  text-align: center;
  color: #6b7280;
}
.form-row textarea {
  resize: vertical;
  min-height: 84px;
  font-family: inherit;
  line-height: 1.5;
}
.form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.form-row-split .form-row { width: 100%; }
@media (max-width: 560px) {
  .form-row-split { grid-template-columns: 1fr; }
}

/* Consent fieldset — visually distinct so the double-opt-in language
   reads as a compliance block, not a regular field. The block itself
   is centered on the page, with checkbox rows left-aligned inside so
   each "[checkbox] [statement]" pair stays legible. */
.form-consent {
  background: rgba(217, 3, 250, .05);
  border: 1px solid rgba(217, 3, 250, .22);
  border-radius: 8px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  align-items: center;
}
.form-consent legend {
  padding: 0 10px;
  margin-left: 6px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent-hi);
  font-weight: 700;
  text-align: center;
}
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text);
  text-align: left;
  max-width: 560px;
  width: 100%;
}
.form-check input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent-hi);
  cursor: pointer;
  flex-shrink: 0;
}
.form-check a {
  color: var(--accent-hi);
  text-decoration: underline;
}
.form-check a:hover { color: var(--accent-hov); }
.form-required {
  color: #ff6b8a;
  margin-left: 2px;
}
.form-doi-note,
.form-privacy-note {
  margin-top: 4px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.form-doi-note strong { color: var(--text); }
.form-doi-note a,
.form-privacy-note a {
  color: var(--accent-hi);
  text-decoration: underline;
}

.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.form-note {
  text-align: center;
  margin-top: 6px;
  min-height: 1.4em;
}

/* Back-to-top arrows — one on the left side, one on the right side
   of the viewport. Mirrors the homepage so every subpage gets both
   arrows. They fade in once the user scrolls past 300px and smooth-
   scroll back to the top on click. The JS to wire them up lives in
   each page's <script> block. */
.back-to-top {
  position: fixed;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: hsl(207, 100%, 70%);
  color: #0a1830;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease,
              background .2s ease, box-shadow .2s ease;
  z-index: 200;
  line-height: 1;
}
.back-to-top.left {
  left: 16px;
  right: auto;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: hsl(207, 100%, 80%);
  box-shadow: 0 0 20px hsla(207, 100%, 70%, .85);
}

/* Footer — mirrors the homepage's footer element exactly so compare
   pages and the homepage have a unified visual treatment. */
footer {
  background: rgb(173, 0, 184);
  color: rgba(255, 255, 255, .9);
  padding: 24px 0;
  font-size: .9rem;
}
footer a { color: rgba(255, 255, 255, .9); }
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .82rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .9);
  text-align: center;
}
.footer-legal {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-legal a {
  color: rgba(255, 255, 255, .9);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: .08em;
  transition: color .18s ease, text-shadow .18s ease, transform .12s ease;
}
.footer-legal a:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, .8);
  transform: translateY(-1px);
}