/* ============================================================
   SMS JournalHub — Design System  (style.css)
   Bootstrap 5.3 override layer + custom components
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --jh-primary: #1e3a5f;
  --jh-primary-700: #16304f;
  --jh-primary-900: #0f2440;
  --jh-accent: #0ea5e9;
  --jh-accent-600: #0284c7;
  --jh-accent-soft: #e0f2fe;
  --jh-success: #10b981;
  --jh-warning: #f59e0b;
  --jh-danger: #ef4444;

  /* ---- Neutrals (cool-toned) ---- */
  --jh-bg: #f8fafc;
  --jh-surface: #ffffff;
  --jh-surface-2: #f1f5f9;
  --jh-dark: #0f172a;
  --jh-dark-2: #16223c;
  --jh-ink: #1e293b;
  --jh-muted: #64748b;
  --jh-faint: #94a3b8;
  --jh-line: #e2e8f0;
  --jh-line-strong: #cbd5e1;

  /* ---- Effects ---- */
  --jh-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --jh-shadow: 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.06);
  --jh-shadow-lg: 0 18px 40px -12px rgba(15,23,42,.18), 0 8px 16px -8px rgba(15,23,42,.10);
  --jh-shadow-glow: 0 18px 50px -16px rgba(14,165,233,.45);
  --jh-radius: 14px;
  --jh-radius-sm: 10px;
  --jh-radius-lg: 22px;
  --jh-grad: linear-gradient(120deg, var(--jh-primary) 0%, var(--jh-accent) 100%);
  --jh-grad-soft: linear-gradient(160deg, #f8fafc 0%, #eef5fb 100%);

  /* ---- Bootstrap variable overrides ---- */
  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-body-color: var(--jh-ink);
  --bs-body-bg: var(--jh-bg);
  --bs-primary: #1e3a5f;
  --bs-border-color: var(--jh-line);
  --bs-link-color: var(--jh-accent-600);
  --bs-link-hover-color: var(--jh-accent);
}

/* ============================================================
   Base
   ============================================================ */
* { scroll-behavior: smooth; }
html { scroll-padding-top: 90px; }
body {
  font-family: var(--bs-body-font-family);
  color: var(--jh-ink);
  background: var(--jh-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}

h1,h2,h3,h4,h5,.display-1,.display-2,.display-3 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--jh-primary);
  line-height: 1.12;
  text-wrap: balance;
}
p { color: var(--jh-ink); }
.lead { color: var(--jh-muted); font-size: 1.18rem; line-height: 1.65; text-wrap: pretty; }
.text-muted-2 { color: var(--jh-muted) !important; }
.text-faint { color: var(--jh-faint) !important; }
a { text-decoration: none; transition: color .2s ease; }

.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section-sm { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.container { max-width: 1180px; }

/* Section eyebrow / kicker */
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Inter', sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--jh-accent-600);
  background: var(--jh-accent-soft);
  padding: .4rem .85rem; border-radius: 100px; margin-bottom: 1.1rem;
}
.section-title { font-size: clamp(1.9rem, 4vw, 2.85rem); margin-bottom: .9rem; }
.section-sub { color: var(--jh-muted); font-size: 1.12rem; max-width: 640px; line-height: 1.6; }
.section-head-center { text-align: center; }
.section-head-center .section-sub { margin-inline: auto; }

/* Skip link */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--jh-primary); color: #fff; padding: .65rem 1.1rem;
  border-radius: 8px; transition: top .2s ease; font-weight: 600;
}
.skip-link:focus { top: 12px; color:#fff; }

/* Focus visibility */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid rgba(14,165,233,.5); outline-offset: 2px; border-radius: 6px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn { font-weight: 600; border-radius: 10px; padding: .65rem 1.3rem; transition: all .25s ease; letter-spacing: -.01em; }
.btn-lg { padding: .9rem 1.7rem; font-size: 1.02rem; border-radius: 12px; }
.btn-jh-primary {
  background: var(--jh-grad); color: #fff; border: none;
  box-shadow: 0 8px 20px -8px rgba(14,165,233,.6);
}
.btn-jh-primary:hover { color:#fff; transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(14,165,233,.65); }
.btn-jh-outline {
  background: transparent; color: var(--jh-primary);
  border: 1.5px solid var(--jh-line-strong);
}
.btn-jh-outline:hover { border-color: var(--jh-accent); color: var(--jh-accent-600); background: var(--jh-accent-soft); transform: translateY(-2px); }
.btn-jh-light { background:#fff; color: var(--jh-primary); border:1px solid var(--jh-line); }
.btn-jh-light:hover { background: var(--jh-surface-2); }
.btn-jh-white { background:#fff; color: var(--jh-primary); border:none; }
.btn-jh-white:hover { color: var(--jh-accent-600); transform: translateY(-2px); }
.btn-jh-ghost-light { background: rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.3); }
.btn-jh-ghost-light:hover { background: rgba(255,255,255,.2); color:#fff; transform: translateY(-2px); }

.btn .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }
.link-arrow { color: var(--jh-accent-600); font-weight: 600; display:inline-flex; align-items:center; gap:.4rem; }
.link-arrow i { transition: transform .2s ease; }
.link-arrow:hover i { transform: translateX(4px); }

/* ============================================================
   Navbar
   ============================================================ */
.jh-navbar {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  padding-top: .65rem; padding-bottom: .65rem;
}
.jh-navbar.scrolled { background: rgba(255,255,255,.95); box-shadow: var(--jh-shadow-sm); border-bottom-color: var(--jh-line); }
.navbar-brand { display:flex; align-items:center; gap:.6rem; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.28rem; color: var(--jh-primary); letter-spacing:-.02em; }
.navbar-brand img { width: 36px; height: 36px; }
.navbar-brand .brand-accent { color: var(--jh-accent); }
.jh-navbar .nav-link { color: var(--jh-ink); font-weight: 500; padding: .5rem .9rem !important; border-radius: 8px; position: relative; }
.jh-navbar .nav-link:hover { color: var(--jh-accent-600); }
.jh-navbar .nav-link.active { color: var(--jh-primary); font-weight: 700; }
.jh-navbar .nav-link.active::after {
  content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:2px;
  width: 18px; height: 3px; border-radius: 3px; background: var(--jh-accent);
}
.theme-toggle {
  width: 40px; height: 40px; border-radius: 10px; border:1px solid var(--jh-line);
  background: var(--jh-surface); color: var(--jh-muted); display:inline-flex; align-items:center; justify-content:center;
  transition: all .2s ease; cursor:pointer;
}
.theme-toggle:hover { color: var(--jh-accent-600); border-color: var(--jh-line-strong); }

/* ---- Nav dropdowns (main menu → sub menu) ---- */
.jh-navbar .dropdown-toggle::after {
  border: 0; content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: .58rem; margin-left: .4rem; vertical-align: 1px; opacity: .55; transition: transform .2s ease;
}
.jh-navbar .nav-item.dropdown.show > .dropdown-toggle::after { transform: rotate(180deg); }
.jh-dropdown {
  border: 1px solid var(--jh-line); border-radius: 14px; padding: .45rem;
  box-shadow: var(--jh-shadow-lg); background: var(--jh-surface); min-width: 286px; margin-top: .5rem;
}
.jh-dropdown .dropdown-item {
  display: flex; align-items: center; gap: .75rem; padding: .55rem .65rem;
  border-radius: 10px; color: var(--jh-ink); font-weight: 500; white-space: normal;
}
.jh-dropdown .dropdown-item > i {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jh-accent-soft); color: var(--jh-accent-600); font-size: .85rem;
}
.jh-dropdown .dropdown-item:hover, .jh-dropdown .dropdown-item:focus { background: var(--jh-surface-2); color: var(--jh-accent-600); }
.jh-dropdown .dropdown-item .dd-t { display: block; font-weight: 600; line-height: 1.2; }
.jh-dropdown .dropdown-item .dd-d { display: block; font-size: .76rem; color: var(--jh-muted); margin-top: 1px; }
.jh-dropdown .dropdown-divider { border-color: var(--jh-line); margin: .35rem .25rem; }
@media (min-width: 992px) {
  .drawer-header { display:none !important; }
  .jh-navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; }
  .jh-navbar .nav-item.dropdown > .dropdown-menu { margin-top: 0; }
  .jh-navbar .nav-item.dropdown > .dropdown-menu::before {
    content: ""; position: absolute; top: -.6rem; left: 0; right: 0; height: .6rem;
  }
}
.navbar-toggler { border:none; padding:.4rem; }
.navbar-toggler:focus { box-shadow:none; }

/* Mobile full-screen drawer */
@media (max-width: 991.98px){
  .jh-navbar.drawer-open { z-index: 1060; }
  .jh-navbar .navbar-collapse {
    position: fixed; top: 0; right: 0; width: 100%; height: 100vh; height: 100dvh;
    background: var(--jh-surface);
    padding: 0; z-index: 2;
    overflow-y: auto;
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  }
  .jh-navbar .navbar-collapse.show { transform: translateX(0); }
  .drawer-header { display:flex; align-items:center; justify-content:space-between; padding: .65rem 1.25rem; border-bottom: 1px solid var(--jh-line); flex-shrink:0; }
  .drawer-header .navbar-brand { font-size:1.15rem; }
  .drawer-close { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:none; background:transparent; border-radius:10px; color:var(--jh-muted); font-size:1.25rem; cursor:pointer; transition: background .15s, color .15s; }
  .drawer-close:hover { background:var(--jh-surface-2); color:var(--jh-ink); }
  .jh-navbar .navbar-collapse .navbar-nav { padding: .5rem 0; flex: 1; width:100%; }
  .jh-navbar .navbar-collapse .nav-item { list-style:none; }
  .jh-navbar .nav-link { display:block; text-align:left; padding: .9rem 1.25rem !important; font-size:1.08rem; font-weight:500; border-bottom:1px solid var(--jh-line); border-radius:0 !important; }
  .jh-navbar .nav-link:hover { background: var(--jh-surface-2); }
  .jh-navbar .nav-link.active { color: var(--jh-accent-600); font-weight:600; }
  .jh-navbar .nav-link.active::after { display:none; }
  .jh-navbar .navbar-collapse .dropdown-menu { box-shadow:none; border:none; border-radius:0; padding:0; margin:0; min-width:unset; background:var(--jh-surface-2); }
  .jh-navbar .navbar-collapse .dropdown-item { padding:.7rem 1.25rem .7rem 2.5rem; border-radius:0; font-size:.95rem; }
  .drawer-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1; opacity:0; visibility:hidden; transition: opacity .3s ease; }
  .drawer-backdrop.show { opacity:1; visibility:visible; }
  .navbar-cta-group { padding: 1rem 1.25rem; border-top: 1px solid var(--jh-line); flex-shrink:0; width:100%; flex-direction:column !important; gap:.6rem !important; }
  .navbar-cta-group .btn { width:100%; border-radius: var(--jh-radius) !important; padding:.75rem 1rem !important; font-size:1.02rem; }
  .navbar-cta-group .theme-toggle { display:none; }
  .navbar-cta-group .nav-link.fw-semibold { display:none; }
  .drawer-header .theme-toggle { display:inline-flex; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; padding: clamp(6.5rem,12vw,9rem) 0 clamp(4rem,8vw,6rem); overflow: hidden; }
.hero::before {
  content:''; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(14,165,233,.16), transparent 60%),
    radial-gradient(700px 520px at 8% 12%, rgba(30,58,95,.10), transparent 55%),
    var(--jh-bg);
}
.hero-grid-bg {
  position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image: linear-gradient(var(--jh-line) 1px, transparent 1px), linear-gradient(90deg, var(--jh-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
.hero .lead { font-size: clamp(1.05rem,2vw,1.3rem); max-width: 560px; }
.hero-accent { background: var(--jh-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent; }

.hero-visual { position: relative; }
.hero-visual .browser-frame { box-shadow: var(--jh-shadow-lg); }
.hero-float {
  position:absolute; background: var(--jh-surface); border:1px solid var(--jh-line);
  border-radius: 12px; padding: .7rem .95rem; box-shadow: var(--jh-shadow-lg); display:flex; align-items:center; gap:.6rem;
  font-size:.85rem; font-weight:600; color: var(--jh-ink); animation: floaty 5s ease-in-out infinite;
}
.hero-float .dot { width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff; }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

/* trust badges row */
.trust-stats { display:flex; flex-wrap:wrap; gap: 1.8rem; }
.trust-stats .num { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.5rem; color: var(--jh-primary); }
.trust-stats .lbl { color: var(--jh-muted); font-size:.85rem; }

/* Activity ticker */
.ticker { overflow:hidden; border:1px solid var(--jh-line); border-radius: 100px; background: var(--jh-surface); padding:.55rem 0; box-shadow: var(--jh-shadow-sm); }
.ticker-track { display:flex; gap:2.5rem; white-space:nowrap; width:max-content; animation: ticker-scroll 32s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display:inline-flex; align-items:center; gap:.5rem; font-size:.88rem; color: var(--jh-muted); font-weight:500; }
.ticker-item i { color: var(--jh-accent); }
@keyframes ticker-scroll { from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ============================================================
   Browser / device mockups
   ============================================================ */
.browser-frame { background: var(--jh-surface); border:1px solid var(--jh-line); border-radius: 14px; overflow:hidden; }
.browser-bar { display:flex; align-items:center; gap:.45rem; padding:.6rem .85rem; background: var(--jh-surface-2); border-bottom:1px solid var(--jh-line); }
.browser-bar .b-dot { width:11px;height:11px;border-radius:50%; }
.browser-bar .b-url { margin-left:.6rem; flex:1; background: var(--jh-surface); border:1px solid var(--jh-line); border-radius:6px; font-size:.72rem; color: var(--jh-faint); padding:.2rem .6rem; font-family: ui-monospace, monospace; }
.browser-frame img { width:100%; display:block; }

/* ============================================================
   Cards
   ============================================================ */
.feature-card {
  background: var(--jh-surface); border:1px solid var(--jh-line); border-radius: var(--jh-radius);
  padding: 1.8rem; height:100%; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--jh-shadow-lg); border-color: transparent; }
.feature-ico {
  width: 54px; height: 54px; border-radius: 14px; display:grid; place-items:center;
  font-size: 1.35rem; margin-bottom: 1.1rem; color:#fff; background: var(--jh-grad);
}
.feature-ico.alt { background: linear-gradient(135deg,#0f172a,#1e3a5f); }
.feature-card h3, .feature-card h4 { font-size:1.22rem; margin-bottom:.55rem; }
.feature-card p { color: var(--jh-muted); font-size:.96rem; line-height:1.6; margin-bottom:1rem; }

.soft-icon { width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem; background: var(--jh-accent-soft); color: var(--jh-accent-600); }

/* ============================================================
   Trust / cert bar
   ============================================================ */
.cert-bar { border-block:1px solid var(--jh-line); background: var(--jh-surface); overflow:hidden; padding: 1.4rem 0; }
.cert-track { display:flex; gap: 3rem; align-items:center; width:max-content; animation: ticker-scroll 38s linear infinite; }
.cert-item { display:inline-flex; align-items:center; gap:.55rem; color: var(--jh-muted); font-weight:600; font-size:.95rem; white-space:nowrap; }
.cert-item i { color: var(--jh-primary); font-size:1.15rem; }

/* ============================================================
   Comparison table
   ============================================================ */
.compare-wrap { border:1px solid var(--jh-line); border-radius: var(--jh-radius); overflow:hidden; box-shadow: var(--jh-shadow); background: var(--jh-surface); }
.compare-table { width:100%; border-collapse:collapse; }
.compare-table th, .compare-table td { padding: 1rem 1.15rem; text-align:center; border-bottom:1px solid var(--jh-line); font-size:.95rem; }
.compare-table thead th { background: var(--jh-surface-2); font-weight:700; color: var(--jh-primary); font-size:1rem; }
.compare-table th:first-child, .compare-table td:first-child { text-align:left; font-weight:600; color: var(--jh-ink); }
.compare-table .col-ours { background: rgba(14,165,233,.07); position:relative; }
.compare-table thead .col-ours { background: var(--jh-primary); color:#fff; }
.compare-table .col-ours.highlight-top { border-radius: 0; }
.compare-yes { color: var(--jh-success); font-size:1.05rem; }
.compare-no { color: var(--jh-line-strong); font-size:1.05rem; }
.compare-partial { color: var(--jh-warning); font-weight:600; font-size:.85rem; }
.badge-ours { display:inline-block; background: var(--jh-accent); color:#fff; font-size:.68rem; font-weight:700; padding:.15rem .5rem; border-radius:6px; letter-spacing:.05em; text-transform:uppercase; margin-top:.3rem; }
.compare-scroll { overflow-x:auto; }
@media (max-width: 767.98px){ .compare-table { min-width: 640px; } }

/* ============================================================
   Stepper (How it works)
   ============================================================ */
.stepper { position:relative; }
.stepper-line { position:absolute; top: 34px; left: 12%; right:12%; height:2px; background: var(--jh-line-strong); z-index:0; }
.step { position:relative; z-index:1; text-align:center; padding: 0 .5rem; }
.step-num {
  width: 68px; height: 68px; border-radius: 20px; margin: 0 auto 1.2rem; display:grid; place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.5rem; color:#fff; background: var(--jh-grad);
  box-shadow: 0 12px 28px -10px rgba(14,165,233,.6); border:4px solid var(--jh-bg);
}
.step h4 { font-size:1.12rem; margin-bottom:.4rem; }
.step p { color: var(--jh-muted); font-size:.92rem; }
@media (max-width:767.98px){ .stepper-line{ display:none; } }

/* ============================================================
   Why choose / icon grid
   ============================================================ */
.why-item { display:flex; gap:1rem; align-items:flex-start; padding:1.4rem; border-radius: var(--jh-radius); transition: background .25s ease; }
.why-item:hover { background: var(--jh-surface); box-shadow: var(--jh-shadow-sm); }
.why-item h4 { font-size:1.08rem; margin-bottom:.3rem; }
.why-item p { color: var(--jh-muted); font-size:.92rem; margin:0; }

/* ============================================================
   Showcase
   ============================================================ */
.showcase-card { transition: transform .3s ease; }
.showcase-card:hover { transform: translateY(-6px); }
.check-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(2,1fr); gap:.7rem 1.4rem; }
.check-list li { display:flex; align-items:center; gap:.6rem; color: var(--jh-ink); font-weight:500; font-size:.96rem; }
.check-list li i { color: var(--jh-success); }
@media (max-width:575.98px){ .check-list{ grid-template-columns:1fr; } }

/* ============================================================
   Testimonials
   ============================================================ */
.testi-viewport { overflow:hidden; }
.testi-track { display:flex; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.testi-slide { min-width:100%; padding: 0 .5rem; }
.testi-card { background: var(--jh-surface); border:1px solid var(--jh-line); border-radius: var(--jh-radius-lg); padding: clamp(1.8rem,4vw,3rem); box-shadow: var(--jh-shadow); max-width: 820px; margin:0 auto; }
.testi-quote { font-size: clamp(1.15rem,2.3vw,1.5rem); line-height:1.55; color: var(--jh-ink); font-weight:500; margin-bottom:1.6rem; }
.testi-stars { color: var(--jh-warning); margin-bottom:1rem; }
.testi-author { display:flex; align-items:center; gap:.9rem; }
.avatar { width:52px;height:52px;border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; flex-shrink:0; }
.testi-dots { display:flex; gap:.5rem; justify-content:center; margin-top:1.8rem; }
.testi-dot { width:9px;height:9px;border-radius:50%; background: var(--jh-line-strong); border:none; cursor:pointer; padding:0; transition: all .25s ease; }
.testi-dot.active { background: var(--jh-accent); width:26px; border-radius:5px; }

/* ============================================================
   Stats (dark)
   ============================================================ */
.section-dark { background: var(--jh-dark); color:#e2e8f0; position:relative; overflow:hidden; }
.section-dark::before { content:''; position:absolute; inset:0; background: radial-gradient(700px 400px at 85% 0%, rgba(14,165,233,.18), transparent 60%); }
.section-dark .container { position:relative; z-index:1; }
.section-dark h2, .section-dark h3, .section-dark h4 { color:#fff; }
.stat-num { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size: clamp(2.4rem,5vw,3.4rem); background: linear-gradient(120deg,#fff,#7dd3fc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.stat-lbl { color:#94a3b8; font-weight:600; margin-top:.5rem; }

/* ============================================================
   Pricing
   ============================================================ */
.price-card { background: var(--jh-surface); border:1px solid var(--jh-line); border-radius: var(--jh-radius-lg); padding: 2rem 1.7rem; height:100%; display:flex; flex-direction:column; transition: transform .28s ease, box-shadow .28s ease; position:relative; }
.price-card:hover { transform: translateY(-6px); box-shadow: var(--jh-shadow-lg); }
.price-card.popular { border:2px solid var(--jh-accent); box-shadow: var(--jh-shadow-glow); }
.price-card.popular::before { content:'Most Popular'; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background: var(--jh-grad); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .9rem; border-radius:100px; white-space:nowrap; }
.price-name { font-size:1.15rem; font-weight:700; color: var(--jh-primary); }
.price-amount { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:2.8rem; color: var(--jh-primary); line-height:1; }
.price-amount .cur { font-size:1.4rem; vertical-align:top; }
.price-per { color: var(--jh-muted); font-size:.9rem; }
.price-feats { list-style:none; padding:0; margin:1.4rem 0; flex:1; }
.price-feats li { display:flex; gap:.65rem; align-items:flex-start; padding:.45rem 0; color: var(--jh-ink); font-size:.93rem; border-bottom:1px solid var(--jh-line); }
.price-feats li:last-child{ border-bottom:none; }
.price-feats li i { color: var(--jh-success); margin-top:.18rem; flex-shrink:0; }
.price-feats li.muted { color: var(--jh-faint); }
.price-feats li.muted i { color: var(--jh-line-strong); }

.currency-toggle { display:inline-flex; background: var(--jh-surface-2); border:1px solid var(--jh-line); border-radius:100px; padding:.25rem; gap:.2rem; }
.currency-toggle button { border:none; background:transparent; padding:.45rem 1.1rem; border-radius:100px; font-weight:600; color: var(--jh-muted); cursor:pointer; transition: all .2s ease; }
.currency-toggle button.active { background: var(--jh-surface); color: var(--jh-primary); box-shadow: var(--jh-shadow-sm); }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-acc .accordion-item { border:1px solid var(--jh-line); border-radius: var(--jh-radius) !important; margin-bottom:.85rem; overflow:hidden; background: var(--jh-surface); }
.faq-acc .accordion-button { font-weight:700; color: var(--jh-primary); font-family:'Plus Jakarta Sans',sans-serif; padding:1.15rem 1.3rem; background: var(--jh-surface); }
.faq-acc .accordion-button:not(.collapsed) { background: var(--jh-accent-soft); color: var(--jh-primary); box-shadow:none; }
.faq-acc .accordion-button:focus { box-shadow:none; border-color: var(--jh-line); }
.faq-acc .accordion-button::after { background-size: 1rem; }
.faq-acc .accordion-body { color: var(--jh-muted); line-height:1.65; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band { background: var(--jh-grad); border-radius: var(--jh-radius-lg); padding: clamp(2.5rem,5vw,4rem); color:#fff; text-align:center; position:relative; overflow:hidden; box-shadow: var(--jh-shadow-lg); }
.cta-band::after { content:''; position:absolute; inset:0; background-image: radial-gradient(circle at 20% 120%, rgba(255,255,255,.18), transparent 40%); }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; font-size: clamp(1.8rem,4vw,2.7rem); }
.cta-band p { color: rgba(255,255,255,.9); font-size:1.15rem; }

/* ============================================================
   Footer
   ============================================================ */
.jh-footer { background: var(--jh-dark); color:#cbd5e1; padding: 4rem 0 0; border-top:1px solid rgba(255,255,255,.08); }
.jh-footer h5 { color:#fff; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.2rem; font-family:'Inter',sans-serif; font-weight:700; }
.jh-footer a { color:#cbd5e1; display:inline-block; padding:.3rem 0; font-size:.94rem; }
.jh-footer a:hover { color:#7dd3fc; }
.jh-footer p { color:#cbd5e1; }
.jh-footer .navbar-brand,
.jh-footer .navbar-brand span { color:#fff; }
.jh-footer .navbar-brand .brand-accent { color: var(--jh-accent); }
.footer-social { display:flex; gap:.7rem; }
.footer-social a { width:40px;height:40px;border-radius:10px; background: rgba(255,255,255,.1); display:grid; place-items:center; color:#e2e8f0; padding:0; }
.footer-social a:hover { background: var(--jh-accent); color:#fff; transform: translateY(-2px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:3rem; padding: 1.5rem 0; font-size:.88rem; color:#94a3b8; }
.footer-newsletter input { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#fff; }
.footer-newsletter input::placeholder { color:#64748b; }
.footer-newsletter input:focus { background: rgba(255,255,255,.1); border-color: var(--jh-accent); color:#fff; box-shadow:none; }

/* ============================================================
   Floating UI: back-to-top, whatsapp, cookie, toasts, spinner
   ============================================================ */
.back-to-top { position:fixed; bottom:24px; right:24px; width:48px;height:48px; border-radius:14px; background: var(--jh-primary); color:#fff; border:none; display:grid; place-items:center; font-size:1.1rem; box-shadow: var(--jh-shadow-lg); opacity:0; visibility:hidden; transform: translateY(12px); transition: all .3s ease; z-index:1030; cursor:pointer; }
.back-to-top.show { opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover { background: var(--jh-accent-600); }

.wa-float { position:fixed; bottom:24px; left:24px; width:54px;height:54px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; font-size:1.6rem; box-shadow: 0 8px 24px -6px rgba(37,211,102,.6); z-index:1030; transition: transform .25s ease; }
.wa-float:hover { transform: scale(1.08); color:#fff; }

.cookie-bar { position:fixed; bottom:0; left:0; right:0; background: var(--jh-surface); border-top:1px solid var(--jh-line); box-shadow: 0 -8px 30px rgba(15,23,42,.1); padding:1rem 0; z-index:1060; transform: translateY(110%); transition: transform .4s cubic-bezier(.4,0,.2,1); }
.cookie-bar.show { transform: translateY(0); }

.toast-stack { position:fixed; top:84px; right:20px; z-index:1080; display:flex; flex-direction:column; gap:.7rem; width:min(92vw,360px); }
.jh-toast { background: var(--jh-surface); border:1px solid var(--jh-line); border-left:4px solid var(--jh-accent); border-radius:12px; padding:.9rem 1.1rem; box-shadow: var(--jh-shadow-lg); display:flex; gap:.75rem; align-items:flex-start; animation: toast-in .35s ease; }
.jh-toast.success { border-left-color: var(--jh-success); }
.jh-toast.error { border-left-color: var(--jh-danger); }
.jh-toast .t-ico { font-size:1.2rem; margin-top:.1rem; }
.jh-toast.success .t-ico { color: var(--jh-success); }
.jh-toast.error .t-ico { color: var(--jh-danger); }
.jh-toast .t-title { font-weight:700; color: var(--jh-primary); font-size:.95rem; }
.jh-toast .t-msg { color: var(--jh-muted); font-size:.86rem; }
.jh-toast.hide { animation: toast-out .3s ease forwards; }
@keyframes toast-in { from{ opacity:0; transform: translateX(30px);} to{ opacity:1; transform: translateX(0);} }
@keyframes toast-out { to{ opacity:0; transform: translateX(30px);} }

.page-hero { padding: clamp(7rem,12vw,9.5rem) 0 clamp(3rem,6vw,4.5rem); background: var(--jh-grad-soft); border-bottom:1px solid var(--jh-line); position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(700px 380px at 80% -10%, rgba(14,165,233,.12), transparent 60%); }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { font-size: clamp(2.1rem,4.5vw,3.3rem); }

/* breadcrumb chip */
.crumbs { font-size:.85rem; color: var(--jh-muted); margin-bottom:1rem; }
.crumbs a { color: var(--jh-accent-600); }

/* ============================================================
   Journal directory cards
   ============================================================ */
.journal-search { position:relative; max-width:520px; margin:0 auto; }
.journal-search i { position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); color: var(--jh-faint); }
.journal-search input { padding-left:2.7rem; height:52px; border-radius:100px; }
.journals-count { font-size:.9rem; color: var(--jh-muted); }
.journals-count strong { color: var(--jh-primary); }

.journal-card { background: var(--jh-surface); border:1px solid var(--jh-line); border-radius: var(--jh-radius-lg); height:100%; display:flex; flex-direction:column; position:relative; overflow:hidden; transition: transform .25s ease, box-shadow .25s ease; }
.journal-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: var(--jh-grad); border-radius: var(--jh-radius-lg) var(--jh-radius-lg) 0 0; }
.journal-card:hover { transform: translateY(-6px); box-shadow: var(--jh-shadow-lg); }
.jc-body { padding:1.6rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.jc-head { display:flex; gap:1rem; align-items:flex-start; }
.jc-logo { width:74px; height:74px; flex:0 0 74px; border-radius:14px; background: var(--jh-surface-2); border:1px solid var(--jh-line); display:grid; place-items:center; overflow:hidden; }
.jc-logo img { width:100%; height:100%; object-fit:contain; padding:8px; }
.jc-logo .jc-acr { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.92rem; color: var(--jh-primary); letter-spacing:-.02em; }
.jc-meta { display:grid; grid-template-columns:auto 1fr; gap:.32rem .7rem; align-items:baseline; padding-right:2.6rem; }
.jc-meta .lbl { color: var(--jh-accent-600); font-weight:700; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.jc-meta .val { color: var(--jh-ink); font-weight:600; font-size:.86rem; line-height:1.35; }
.jc-meta .val .on { color: var(--jh-faint); font-weight:400; font-style:italic; }
.jc-meta .val .print { display:block; }
.jc-code { position:absolute; top:1.05rem; right:1.05rem; background: var(--jh-grad); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.04em; padding:.3rem .6rem; border-radius:8px; box-shadow:0 5px 12px -5px rgba(14,165,233,.7); }
.jc-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.1rem; font-weight:700; color: var(--jh-primary); line-height:1.3; margin:1.2rem 0 1.4rem; text-wrap:pretty; }
.journal-card .btn { margin-top:auto; }

/* alternating feature section */
.feat-section { padding: clamp(3rem,6vw,5rem) 0; }
.feat-section:nth-child(even){ background: var(--jh-surface); }
.feat-list { list-style:none; padding:0; margin:0; }
.feat-list li { display:flex; gap:.8rem; align-items:flex-start; padding:.55rem 0; color: var(--jh-ink); }
.feat-list li i { color: var(--jh-success); margin-top:.25rem; flex-shrink:0; }

/* Tabs (features) */
.jh-tabs { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2.5rem; }
.jh-tabs .nav-link { border:1px solid var(--jh-line); border-radius:100px; color: var(--jh-muted); font-weight:600; padding:.5rem 1.1rem; background: var(--jh-surface); }
.jh-tabs .nav-link.active { background: var(--jh-primary); color:#fff; border-color: var(--jh-primary); }

/* Blog */
.blog-card { background: var(--jh-surface); border:1px solid var(--jh-line); border-radius: var(--jh-radius); overflow:hidden; height:100%; transition: transform .28s ease, box-shadow .28s ease; display:flex; flex-direction:column; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--jh-shadow-lg); }
.blog-card img { width:100%; aspect-ratio: 16/10; object-fit:cover; }
.blog-body { padding:1.3rem; display:flex; flex-direction:column; flex:1; }
.blog-tag { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--jh-accent-600); background: var(--jh-accent-soft); padding:.25rem .6rem; border-radius:6px; margin-bottom:.7rem; align-self:flex-start; }
.blog-card h3 { font-size:1.18rem; margin-bottom:.5rem; }
.blog-card p { color: var(--jh-muted); font-size:.92rem; flex:1; }
.blog-meta { display:flex; align-items:center; gap:.6rem; font-size:.82rem; color: var(--jh-faint); margin-top:1rem; }
.cat-filter { display:flex; flex-wrap:wrap; gap:.5rem; }
.cat-filter button { border:1px solid var(--jh-line); background: var(--jh-surface); color: var(--jh-muted); font-weight:600; border-radius:100px; padding:.45rem 1.1rem; cursor:pointer; transition: all .2s ease; }
.cat-filter button.active, .cat-filter button:hover { background: var(--jh-primary); color:#fff; border-color: var(--jh-primary); }

/* team */
.team-card { background: var(--jh-surface); border:1px solid var(--jh-line); border-radius: var(--jh-radius); padding:1.6rem; text-align:center; transition: transform .25s ease, box-shadow .25s ease; }
.team-card:hover { transform: translateY(-5px); box-shadow: var(--jh-shadow-lg); }
.team-avatar { width:88px;height:88px;border-radius:50%; margin:0 auto 1rem; display:grid; place-items:center; color:#fff; font-size:1.7rem; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; }
.team-card h4 { font-size:1.1rem; margin-bottom:.2rem; }
.team-card .role { color: var(--jh-accent-600); font-weight:600; font-size:.88rem; margin-bottom:.6rem; }

/* value cards */
.value-card { padding:1.7rem; border-radius: var(--jh-radius); border:1px solid var(--jh-line); background: var(--jh-surface); height:100%; transition: transform .25s ease, box-shadow .25s ease; }
.value-card:hover { transform: translateY(-5px); box-shadow: var(--jh-shadow); }

/* contact info */
.contact-info-card { background: var(--jh-surface); border:1px solid var(--jh-line); border-radius: var(--jh-radius); padding:1.3rem; display:flex; gap:1rem; align-items:flex-start; }
.contact-info-card .ci-ico { width:46px;height:46px;border-radius:12px; background: var(--jh-accent-soft); color: var(--jh-accent-600); display:grid; place-items:center; font-size:1.15rem; flex-shrink:0; }
.map-embed { border-radius: var(--jh-radius); overflow:hidden; border:1px solid var(--jh-line); height:280px; }
.map-embed iframe { width:100%; height:100%; border:0; }

/* forms */
.form-control, .form-select { border-radius:10px; border:1.5px solid var(--jh-line); padding:.7rem .9rem; background: var(--jh-surface); color: var(--jh-ink); }
.form-control:focus, .form-select:focus { border-color: var(--jh-accent); box-shadow: 0 0 0 4px rgba(14,165,233,.12); }
.form-label { font-weight:600; color: var(--jh-ink); font-size:.9rem; margin-bottom:.4rem; }
.form-card { background: var(--jh-surface); border:1px solid var(--jh-line); border-radius: var(--jh-radius-lg); padding: clamp(1.6rem,4vw,2.6rem); box-shadow: var(--jh-shadow); }

.guarantee-badge { display:inline-flex; align-items:center; gap:.8rem; background: rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); border-radius:100px; padding:.8rem 1.5rem; color: var(--jh-success); font-weight:700; }

/* ---- Scroll reveal ----
   Robustness first: elements are VISIBLE by default (this also overrides AOS's
   CDN CSS, which otherwise hides [data-aos] until its JS fires). The entrance is
   a keyframe ANIMATION triggered by .aos-animate — if a browser throttles or
   skips the animation, content still shows. AOS (or our IO fallback in
   animations.js) adds .aos-animate when the element scrolls into view. */
[data-aos] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: no-preference) {
  [data-aos].aos-animate                { animation: .65s cubic-bezier(.4,0,.2,1) both aosUp; }
  [data-aos="fade-left"].aos-animate    { animation-name: aosLeft; }
  [data-aos="fade-right"].aos-animate   { animation-name: aosRight; }
  [data-aos="fade-down"].aos-animate    { animation-name: aosDown; }
  [data-aos="zoom-in"].aos-animate      { animation-name: aosZoom; }
}
@keyframes aosUp    { from { opacity:0; transform: translateY(26px); } to { opacity:1; transform:none; } }
@keyframes aosDown  { from { opacity:0; transform: translateY(-26px);} to { opacity:1; transform:none; } }
@keyframes aosLeft  { from { opacity:0; transform: translateX(40px); } to { opacity:1; transform:none; } }
@keyframes aosRight { from { opacity:0; transform: translateX(-40px);} to { opacity:1; transform:none; } }
@keyframes aosZoom  { from { opacity:0; transform: scale(.94); }       to { opacity:1; transform:none; } }

/* benefits list signup */
.benefit-li { display:flex; gap:.8rem; align-items:flex-start; padding:.6rem 0; }
.benefit-li i { color: var(--jh-success); margin-top:.2rem; font-size:1.1rem; }

@media (max-width: 991.98px){
  .hero-float { display:none; }
}
@media (max-width: 575.98px){
  .footer-bottom { padding-bottom: 4.5rem; }
}

/* ============================================================
   Article / Blog post + Legal documents (long-form prose)
   ============================================================ */
.post-hero { padding: clamp(7rem,12vw,9rem) 0 0; background: var(--jh-grad-soft); border-bottom:1px solid var(--jh-line); position:relative; overflow:hidden; }
.post-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(720px 380px at 82% -12%, rgba(14,165,233,.12), transparent 60%); }
.post-hero .container { position:relative; z-index:1; }
.post-hero h1 { font-size: clamp(2rem,4.4vw,3.1rem); margin:.4rem 0 1.1rem; }
.post-cover { border-radius: var(--jh-radius-lg); overflow:hidden; border:1px solid var(--jh-line); box-shadow: var(--jh-shadow-lg); margin-top: clamp(2rem,5vw,3.2rem); }
.post-cover img { width:100%; display:block; aspect-ratio: 16/7; object-fit:cover; }

.article-prose { font-size: 1.075rem; line-height: 1.78; color: var(--jh-ink); }
.article-prose > *:first-child { margin-top: 0; }
.article-prose p { color: var(--jh-ink); margin: 0 0 1.35rem; text-wrap: pretty; }
.article-prose h2 { font-size: clamp(1.5rem,3vw,1.9rem); margin: 2.6rem 0 .9rem; scroll-margin-top: 100px; }
.article-prose h3 { font-size: 1.28rem; margin: 1.9rem 0 .7rem; scroll-margin-top: 100px; }
.article-prose ul, .article-prose ol { margin: 0 0 1.45rem; padding-left: 0; list-style: none; }
.article-prose ul li { position: relative; padding-left: 1.9rem; margin-bottom: .65rem; }
.article-prose ul li::before { content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; color: var(--jh-accent-600); position:absolute; left:0; top:.12rem; font-size:.85rem; }
.article-prose ol { counter-reset: li; }
.article-prose ol li { position: relative; padding-left: 2.4rem; margin-bottom: .8rem; counter-increment: li; }
.article-prose ol li::before { content: counter(li); position:absolute; left:0; top:.05rem; width:1.7rem; height:1.7rem; background: var(--jh-accent-soft); color: var(--jh-accent-600); border-radius:8px; display:grid; place-items:center; font-size:.85rem; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; }
.article-prose a { color: var(--jh-accent-600); font-weight:600; border-bottom:1px solid transparent; }
.article-prose a:hover { border-bottom-color: var(--jh-accent); }
.article-prose strong { color: var(--jh-primary); font-weight:700; }
.article-prose blockquote { margin: 1.8rem 0; padding: 1.1rem 1.6rem; border-left: 4px solid var(--jh-accent); background: var(--jh-surface-2); border-radius: 0 var(--jh-radius) var(--jh-radius) 0; color: var(--jh-ink); font-size: 1.12rem; font-style: italic; }
.article-prose blockquote p:last-child { margin-bottom: 0; }
.article-prose hr { border: none; border-top:1px solid var(--jh-line); margin: 2.4rem 0; }

.callout { display:flex; gap:1rem; align-items:flex-start; padding:1.2rem 1.4rem; border:1px solid var(--jh-line); border-radius: var(--jh-radius); background: var(--jh-accent-soft); margin: 1.8rem 0; }
.callout i { color: var(--jh-accent-600); font-size:1.3rem; margin-top:.15rem; flex-shrink:0; }
.callout p { margin:0; font-size:.98rem; color: var(--jh-ink); }
.callout .ttl { font-weight:700; color: var(--jh-primary); display:block; margin-bottom:.2rem; }

/* sticky TOC */
.toc-card { position: sticky; top: 100px; background: var(--jh-surface); border:1px solid var(--jh-line); border-radius: var(--jh-radius); padding: 1.3rem 1.4rem; box-shadow: var(--jh-shadow-sm); }
.toc-card .toc-head { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--jh-faint); margin-bottom:.9rem; }
.toc-card nav a { display:block; color: var(--jh-muted); font-size:.92rem; padding:.4rem 0 .4rem .9rem; border-left:2px solid var(--jh-line); line-height:1.4; }
.toc-card nav a:hover { color: var(--jh-accent-600); border-left-color: var(--jh-accent); }
.toc-card nav a.active { color: var(--jh-primary); font-weight:600; border-left-color: var(--jh-accent); }

/* author + share */
.author-box { display:flex; gap:1.1rem; align-items:center; background: var(--jh-surface); border:1px solid var(--jh-line); border-radius: var(--jh-radius); padding:1.3rem 1.5rem; }
.author-box .bio { color: var(--jh-muted); font-size:.92rem; margin:.2rem 0 0; }
.share-btns { display:flex; gap:.55rem; }
.share-btns a { width:42px; height:42px; border-radius:11px; border:1px solid var(--jh-line); background: var(--jh-surface); color: var(--jh-muted); display:grid; place-items:center; transition: all .2s ease; }
.share-btns a:hover { background: var(--jh-primary); color:#fff; border-color: var(--jh-primary); transform: translateY(-2px); }

/* Legal documents */
.legal-doc { font-size: 1.02rem; line-height: 1.75; color: var(--jh-ink); }
.legal-doc h2 { font-size: 1.42rem; margin: 2.4rem 0 .8rem; scroll-margin-top: 100px; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 { font-size: 1.12rem; margin: 1.6rem 0 .5rem; }
.legal-doc p { color: var(--jh-ink); margin: 0 0 1.1rem; text-wrap: pretty; }
.legal-doc ul { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.legal-doc ul li { margin-bottom: .5rem; color: var(--jh-ink); }
.legal-doc a { color: var(--jh-accent-600); font-weight:600; }
.legal-doc strong { color: var(--jh-primary); }
.legal-doc table { width:100%; border-collapse:collapse; margin:1.2rem 0 1.6rem; font-size:.94rem; }
.legal-doc table th, .legal-doc table td { border:1px solid var(--jh-line); padding:.7rem .9rem; text-align:left; vertical-align:top; }
.legal-doc table th { background: var(--jh-surface-2); color: var(--jh-primary); font-weight:700; }
.legal-updated { display:inline-flex; align-items:center; gap:.5rem; font-size:.88rem; color: var(--jh-muted); background: var(--jh-surface); border:1px solid var(--jh-line); border-radius:100px; padding:.4rem .95rem; }

/* 404 */
.error-wrap { min-height: 72vh; display:grid; place-items:center; text-align:center; padding: 7rem 0 4rem; position:relative; overflow:hidden; }
.error-wrap::before { content:''; position:absolute; inset:0; z-index:-1; background: radial-gradient(720px 420px at 50% 0%, rgba(14,165,233,.12), transparent 62%), var(--jh-bg); }
.error-code { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size: clamp(6rem,18vw,11rem); line-height:.9; background: var(--jh-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-.04em; }
.error-links { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.error-links a { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--jh-line); background: var(--jh-surface); border-radius:100px; padding:.55rem 1.1rem; color: var(--jh-ink); font-weight:600; font-size:.92rem; transition: all .2s ease; }
.error-links a:hover { border-color: var(--jh-accent); color: var(--jh-accent-600); background: var(--jh-accent-soft); }

/* Password toggle */
.pw-toggle-btn { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--jh-faint); cursor:pointer; padding:0; font-size:.88rem; line-height:1; z-index:2; }
.pw-toggle-btn:hover { color:var(--jh-accent); }