/* ==========================================================================
   harbileads.org — marketing homepage + account page. Ported from the design that used to
   live on seoharbi.com's WordPress site (custom-site.css + the Home page's embedded Hero
   <style> block) — same structure/classes, colors unified to the TRUE brand amber (#fda602,
   sampled from the desktop app) rather than the WordPress site's independently-chosen
   #ffb347. Checkout-specific widget styling was dropped (not needed here — this site only
   covers Login/Create Account/Forgot Password, not payments).
   ========================================================================== */

:root {
  --sh-bg: #06070a;
  --sh-ink: #f5f6f8;
  --sh-muted: #9a9ea8;
  --sh-amber: #fda602;
  --sh-amber-2: #e39400;
  --sh-line: rgba(255, 255, 255, 0.10);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--sh-bg); font-family: 'Inter', system-ui, -apple-system, sans-serif; }
a { color: inherit; }

/* --------------------------------------------------------------------------
   Site-wide header — sticky, white, consistent across every root-site page (was previously
   dark/fixed-overlay by default and only made light on the homepage via body.sh-home scoping;
   now that every page wants the same light header, the light styling below IS the default, no
   scoping needed). Logo | nav | actions laid out as a 3-column grid (1fr auto 1fr) so the nav is
   always mathematically centered no matter how many links it has or how wide the actions column
   is -- a future nav item just drops into the loop in header.php and re-centers itself.
   -------------------------------------------------------------------------- */
#sh-header { position: sticky; top: 0; z-index: 500; background: #fff; border-bottom: 1px solid rgba(20,21,26,0.06); font-family: 'Inter', system-ui, -apple-system, sans-serif; }
#sh-header .sh-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 32px; max-width: 1280px; margin: 0 auto; }
/* Logo file itself bakes in white "Leads" text (visible against a dark pill) -- keeping that
   dark pill backdrop behind just the logo (per "use the existing logo file as-is") is what keeps
   it legible against the light header. */
#sh-header .sh-header-logo { display: inline-flex; align-items: center; background: #0a0a0a; border: 1px solid var(--sh-line); border-radius: 12px; padding: 9px 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.35); text-decoration: none; justify-self: start; }
#sh-header .sh-header-logo img { display: block; height: 22px; width: auto; }
/* .sh-header-nav-group wraps [.sh-header-nav links] + [.sh-header-actions login/profile] --
   display:contents unwraps it so both halves become direct grid children of .sh-header-inner
   (independently positioned via justify-self below), rather than one flush flex row. */
#sh-header .sh-header-nav-group { display: contents; }
#sh-header .sh-header-nav { display: flex; align-items: center; gap: 28px; justify-self: center; }
#sh-header .sh-header-actions { display: flex; align-items: center; gap: 12px; justify-self: end; }
#sh-header .sh-header-nav a, #sh-header .sh-header-actions .sh-header-login-link { color: #26272d; font-size: 14.5px; font-weight: 600; text-decoration: none; opacity: 1; transition: opacity 0.2s ease, color 0.2s ease; white-space: nowrap; }
#sh-header .sh-header-nav a:hover, #sh-header .sh-header-actions .sh-header-login-link:hover { color: #e08e0b; opacity: 1; }
#sh-header .sh-header-actions .sh-header-login-link {
  border: 1.5px solid rgba(20,21,26,0.18); border-radius: 8px; padding: 9px 16px; font-weight: 700;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
#sh-header .sh-header-actions .sh-header-login-link:hover { border-color: #e08e0b; color: #14151a; transform: translateY(-1px); }
#sh-header .sh-header-download-btn {
  display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(150deg, #ffc873, #e08e0b);
  color: #1a1206; border-radius: 8px; padding: 9px 16px; text-decoration: none; font-size: 13.5px;
  font-weight: 700; box-shadow: 0 6px 16px rgba(224,142,11,0.22); transition: transform 0.2s ease;
}
#sh-header .sh-header-download-btn:hover { transform: translateY(-1px); }
#sh-header .sh-header-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; border: none; background: transparent; cursor: pointer; padding: 0; }
#sh-header .sh-header-hamburger span { display: block; width: 100%; height: 2px; background: #14151a; border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
#sh-header .sh-header-hamburger.sh-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#sh-header .sh-header-hamburger.sh-open span:nth-child(2) { opacity: 0; }
#sh-header .sh-header-hamburger.sh-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sh-mobile-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 498; opacity: 0; transition: opacity 0.25s ease; }
.sh-mobile-scrim.sh-open { display: block; opacity: 1; }
.sh-mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(280px, 80vw); background: #fff; border-left: 1px solid rgba(20,21,26,0.08); z-index: 499; display: flex; flex-direction: column; gap: 4px; padding: 90px 28px 28px; transform: translateX(100%); transition: transform 0.3s ease; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.sh-mobile-menu.sh-open { transform: translateX(0); }
.sh-mobile-menu a { color: #14151a; font-size: 16px; font-weight: 500; text-decoration: none; padding: 14px 0; border-bottom: 1px solid rgba(20,21,26,0.08); }
.sh-mobile-menu a:hover { color: #e08e0b; }

@media (max-width: 860px) {
  #sh-header .sh-header-inner { display: flex; justify-content: space-between; padding: 16px 20px; }
  #sh-header .sh-header-nav-group { display: none; }
  #sh-header .sh-header-hamburger { display: flex; }
}

/* Header logged-in state — profile button (initials avatar + email + chevron) + dropdown. */
.sh-header-profile { position: relative; display: inline-flex; align-items: center; }
.sh-header-profile-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(20,21,26,0.04); border: 1px solid rgba(20,21,26,0.12); border-radius: 999px; padding: 5px 12px 5px 5px; cursor: pointer; font-family: inherit; transition: background 0.2s ease; }
.sh-header-profile-btn:hover { background: rgba(20,21,26,0.08); }
.sh-header-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--sh-amber), var(--sh-amber-2)); color: #1a1206; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.sh-header-profile-email { font-size: 13px; font-weight: 500; color: #14151a; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-header-chevron { color: #676b76; transition: transform 0.2s ease; flex-shrink: 0; }
.sh-header-profile.sh-open .sh-header-chevron { transform: rotate(180deg); }
.sh-header-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; background: #fff; border: 1px solid rgba(20,21,26,0.1); border-radius: 10px; padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 600; box-shadow: 0 14px 32px rgba(20,21,26,0.12); }
.sh-header-profile.sh-open .sh-header-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.sh-header-dropdown a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #14151a; text-decoration: none; border-bottom: none; }
.sh-header-dropdown a:hover { background: rgba(20,21,26,0.05); color: #e08e0b; }

.sh-mobile-menu .sh-header-profile { display: flex; width: 100%; }
.sh-mobile-menu .sh-header-profile-btn { width: 100%; justify-content: flex-start; padding: 8px 12px 8px 6px; background: rgba(20,21,26,0.04); border-color: rgba(20,21,26,0.12); }
.sh-mobile-menu .sh-header-profile-email { max-width: none; flex: 1; color: #14151a; }
.sh-mobile-menu .sh-header-dropdown { position: static; opacity: 1; visibility: visible; transform: none; display: none; width: 100%; margin-top: 6px; background: rgba(20,21,26,0.03); box-sizing: border-box; }
.sh-mobile-menu .sh-header-profile.sh-open .sh-header-dropdown { display: block; }
.sh-mobile-menu .sh-header-dropdown a { border-bottom: none; padding: 9px 12px; font-size: 14px; color: #14151a; }

/* --------------------------------------------------------------------------
   Hero (Homepage)
   -------------------------------------------------------------------------- */
.seoh-hero * { box-sizing: border-box; }
.seoh-hero {
  position: relative; background: var(--sh-bg); color: var(--sh-ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  padding: 130px 24px 90px; overflow: hidden; text-align: center; isolation: isolate;
}
.seoh-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255,150,50,0.16), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,120,30,0.08), transparent 70%);
  z-index: 0;
}
.seoh-stars {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 25% 80%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 40% 15%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 70% 55%, rgba(255,255,255,0.4), transparent);
  background-repeat: repeat; background-size: 100% 100%; opacity: 0.7;
  animation: seoh-twinkle 6s ease-in-out infinite alternate;
}
@keyframes seoh-twinkle { from { opacity: 0.35; } to { opacity: 0.8; } }
.seoh-inner { position: relative; z-index: 2; max-width: 960px; margin: 0 auto; }
.seoh-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border: 1px solid var(--sh-line); border-radius: 999px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.6px; color: var(--sh-muted); background: rgba(255,255,255,0.03); backdrop-filter: blur(6px); margin-bottom: 36px; }
.seoh-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sh-amber); box-shadow: 0 0 10px 2px rgba(255,170,60,0.8); flex-shrink: 0; }
.seoh-hero h1 { font-weight: 800; letter-spacing: -1px; margin: 0 0 28px; color: var(--sh-ink); }
.seoh-hero h1 .row { display: block; white-space: nowrap; font-size: clamp(26px, 5.2vw, 64px); line-height: 1.15; }
.seoh-hero h1 .row2 { background: linear-gradient(90deg, #ffe9c7, var(--sh-amber) 45%, var(--sh-amber-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.seoh-hero p.sub { font-size: clamp(15px, 1.7vw, 18px); font-weight: 400; line-height: 1.65; color: var(--sh-muted); max-width: 620px; margin: 0 auto 46px; }
.seoh-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin-bottom: 18px; }
.seoh-btn-wrap { position: relative; border-radius: 999px; }
.seoh-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-size: 15.5px; font-weight: 700; padding: 15px 28px; border-radius: 999px; cursor: pointer; text-decoration: none; border: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.seoh-btn svg { width: 16px; height: 16px; transition: transform 0.25s ease; flex-shrink: 0; }
.seoh-btn--primary { color: #1a1206; background: linear-gradient(180deg, #fff6e8, #ffdfa8); }
.seoh-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255,170,60,0.25); filter: brightness(1.05); }
.seoh-btn--primary:hover svg { transform: translateX(3px); }
.seoh-btn--secondary { color: var(--sh-ink); background: rgba(255,255,255,0.04); border: 1px solid var(--sh-line); }
.seoh-btn--secondary:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.25); transform: translateY(-2px); }
.seoh-btn--secondary:hover svg { transform: translateY(2px); }
.seoh-caption { font-size: 13px; font-weight: 400; color: #6d7178; margin-bottom: 54px; }
.seoh-os-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.seoh-os { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 13.5px; font-weight: 600; color: var(--sh-muted); border: 1px solid var(--sh-line); border-radius: 999px; background: rgba(255,255,255,0.02); transition: border-color 0.25s ease, color 0.25s ease; }
.seoh-os:hover { border-color: rgba(255,170,60,0.5); color: var(--sh-ink); }
.seoh-os svg { width: 15px; height: 15px; opacity: 0.85; }

@media (max-width: 600px) {
  .seoh-hero { padding: 100px 18px 60px; }
  .seoh-hero h1 .row { white-space: normal; font-size: clamp(28px, 8vw, 40px); }
  .seoh-btn { width: 100%; justify-content: center; }
  .seoh-cta-row { flex-direction: column; }
  .seoh-btn-wrap { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .seoh-stars { animation: none; } }

/* --------------------------------------------------------------------------
   Homepage-only light theme. Everything below is scoped under body.sh-home (set only on
   root-site/index.php's <body> tag) so Pricing/Checkout/Account -- which share this same
   header/button/hero CSS and stay on the dark theme -- are completely unaffected. Same shared
   markup/classes throughout (including the logged-in/out header-auth.php partial and its JS in
   initHeaderAuth), just recolored + relaid-out for this one page.
   -------------------------------------------------------------------------- */
body.sh-home { background: #fff; }

/* Hero -- flat WHITE background (no starfield/glow), min-height:100vh so the dashboard
   screenshot's top edge lands near the bottom of the first viewport (see .seoh-hero-top below
   for the peek-calibration). Typography below follows exact Figma specs the user provided
   (family/weight/size/line-height per element) -- these are deliberately NOT the same as the
   "compact" sizing from an earlier pass; generous, professional spacing between elements is the
   priority now, not tightness. */
body.sh-home .seoh-hero { background: #fff; color: #14151a; min-height: 100vh; box-sizing: border-box; padding: 32px 24px 48px; display: flex; flex-direction: column; }
body.sh-home .seoh-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Natural content height -- no forced min-height here. An earlier pass tried reserving a fixed
   75vh-based height for this block so the image would land near a precise "75% of viewport"
   mark, but with the larger Figma-spec typography that reservation left a large dead gap between
   the OS row and the image whenever the (now taller, properly-spaced) content didn't fill it.
   Clean, natural spacing wins over that precision -- see .seoh-shot-wrap's margin-top instead. */
body.sh-home .seoh-hero-top { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; }
body.sh-home .seoh-hero::before { display: none; }
body.sh-home .seoh-stars { display: none; }
/* Minimal "3D" chip: a soft top highlight + two stacked drop shadows read as gently raised/
   embossed rather than flat -- same small-raised-shadow language as the rest of the site's
   buttons (.seoh-btn, .sh-header-download-btn), just subtler since this is a passive badge. */
body.sh-home .seoh-eyebrow {
  color: #26272d; border-color: rgba(20,21,26,0.08);
  background: linear-gradient(180deg, #ffffff, #f7f5f0);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(20,21,26,0.04), 0 3px 8px rgba(20,21,26,0.07);
  padding: 2px 12px; font-size: 12px; font-weight: 400; line-height: 26px; margin-bottom: 28px; margin-top: 50px;
}
body.sh-home .seoh-hero h1 { color: #14151a; margin-bottom: 24px; font-weight: 700; }
body.sh-home .seoh-hero h1 .row { font-size: clamp(28px, 4.4vw, 48px); line-height: 1.15; }
body.sh-home .seoh-hero h1 .row2 { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #e08e0b; color: #e08e0b; }
body.sh-home .seoh-hero p.sub { color: #676b76; font-size: 18px; font-weight: 500; line-height: 27px; margin: 0 auto 32px; max-width: 560px; }
body.sh-home .seoh-caption { color: #8a8e98; font-size: 13px; margin-bottom: 16px; }

body.sh-home .seoh-cta-row { margin-bottom: 32px; }
body.sh-home .seoh-btn { border-radius: 9px; padding: 13px 22px; font-size: 16px; font-weight: 600; line-height: 16px; }
body.sh-home .seoh-btn--primary { color: #1a1206; background: linear-gradient(150deg, #ffc873, #e08e0b); box-shadow: 0 6px 16px rgba(224,142,11,0.22); }
body.sh-home .seoh-btn--primary:hover { box-shadow: 0 8px 20px rgba(224,142,11,0.3); filter: none; }
body.sh-home .seoh-btn--secondary { color: #14151a; background: #fff; border: 1.5px solid rgba(20,21,26,0.18); }
body.sh-home .seoh-btn--secondary:hover { background: #fff; border-color: #e08e0b; }

/* Reusable "brand solid" button style -- the site's standard color combination for a solid
   button: #ffa900 background + black (#14151a, this theme's standard "black") border normally,
   inverting to a black background + #ffa900 border/text on hover. Text color is intentionally
   NOT set here in the base (non-hover) rule -- it's left exactly as whatever the underlying
   button class already defines, per the request that only background+border change in the
   normal state. Add class="btn-brand-solid" alongside any button's existing classes to apply
   this -- currently used on the homepage hero's "Unlock All Features" button and the header's
   "Download" button, not applied anywhere else ("Download For Windows" in the hero was an
   earlier misapplication, reverted). The body.sh-home prefix here exists only to out-specificity
   THIS page's existing .seoh-btn--primary gradient rule (also body.sh-home-scoped) -- a future
   button without a similar competing rule could likely just use .btn-brand-solid directly with
   no extra scoping needed. */
body.sh-home .btn-brand-solid { background: #ffa900; border: 1px solid #14151a; }
body.sh-home .btn-brand-solid:hover { background: #14151a; border-color: #ffa900; color: #ffa900; }

/* The header's Download button has its own #sh-header-scoped (ID-based, higher-specificity)
   background/color rule above -- this compound selector is needed to actually win against it. */
#sh-header .sh-header-download-btn.btn-brand-solid { background: #ffa900; border: 1px solid #14151a; }
#sh-header .sh-header-download-btn.btn-brand-solid:hover { background: #14151a; border-color: #ffa900; color: #ffa900; }

/* Trust row -- sits between the CTA buttons and the fine-print/OS row. New classes (not reused
   elsewhere), so no body.sh-home scoping is strictly required, but kept consistent with the rest
   of this section for clarity. */
.seoh-trust-row { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin: 0 auto 1px; position: relative; z-index: 2; }
.seoh-trust-row .t { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; line-height: 16px; color: #26272d; }
.seoh-trust-row .t svg { width: 15px; height: 15px; color: #e08e0b; flex-shrink: 0; }

/* Dashboard screenshot + floating sample-email chips only (no user card -- kept to email chips
   per explicit feedback), ported from the design reference's .shot-wrap/.email-chip pattern.
   Chips are absolutely positioned relative to .seoh-shot-wrap and hidden below 900px (same
   breakpoint the reference itself uses) since there's no room for them to float without
   overlapping the screenshot awkwardly. */
.seoh-shot-wrap { position: relative; max-width: 1100px; width: 100%; margin: 48px auto 0; padding: 0 20px; z-index: 2; box-sizing: border-box; }

/* Chips: clean white pill, soft two-layer shadow (a tight contact shadow + a broader ambient
   one) for a more polished, less "flat" look than a single blunt box-shadow. */
.seoh-email-chip {
  position: absolute; background: #fff; border: 1px solid rgba(20,21,26,0.07); border-radius: 999px;
  padding: 8px 14px; font-size: 11.5px; font-weight: 600; color: #26272d;
  box-shadow: 0 2px 6px rgba(20,21,26,0.05), 0 10px 24px rgba(20,21,26,0.09);
  display: flex; align-items: center; gap: 7px; z-index: 3; white-space: nowrap;
}
.seoh-email-chip .d { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.seoh-ec1 { top: -4%; right: 2%; }
.seoh-ec2 { bottom: 28%; left: -2%; }
.seoh-ec3 { bottom: 10%; right: -2%; }

/* Image "frame": an outer rounded card with its own subtle background + padding (the matting),
   with the full-resolution screenshot sitting inside that padding rather than touching the outer
   rounded border directly -- matches the requested container-then-inner-padding-then-image
   structure instead of a bare bordered image. */
.seoh-product-shot {
  border-radius: 20px; border: 1px solid rgba(20,21,26,0.08); background: #f5f4f1;
  padding: 14px; box-sizing: border-box; box-shadow: 0 40px 90px -10px rgba(20,21,26,0.18);
  position: relative; z-index: 2;
}
.seoh-product-shot img { width: 100%; height: auto; display: block; border-radius: 10px; }

@media (max-width: 900px) {
  .seoh-email-chip { display: none; }
}

.seoh-live-stats { text-align: center; font-size: 13px; color: #676b76; margin: 20px auto 0; position: relative; z-index: 2; }
.seoh-live-stats b { color: #14151a; font-weight: 800; }

/* Hero mesh background -- confined to a ~90px band around the dashboard screenshot only (NOT the
   whole hero) -- roughly 3-4 inches, generous enough to genuinely notice, not a tiny sliver.
   Large-spaced grid lines (72px), very low opacity, purely decorative. Positioned relative to
   #seohShotWrap (inset:-90px = that band). .seoh-mesh is the always-visible faint gray layer;
   .seoh-mesh-glow is an identical amber-tinted copy masked down to a soft circle that follows the
   cursor within that same band (see initHeroMeshGlow in site.js, which keeps --mx/--my in sync,
   in pixels re-based onto this element's own -90px-inset coordinate space) and only fades in on
   hover. A soft radial mask on the base layer too, so the grid fades at its own edges instead of
   ending in a hard rectangle. */
.seoh-mesh {
  position: absolute; inset: -90px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(20,21,26,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,21,26,0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}
.seoh-mesh-glow {
  position: absolute; inset: -90px; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(224,142,11,0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(224,142,11,0.55) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0;
  transition: opacity 0.4s ease;
  -webkit-mask-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), black 0%, transparent 75%);
  mask-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), black 0%, transparent 75%);
}
/* .seoh-hover-zone is a fully transparent layer matching the mesh's own -90px extent exactly
   (not just .seoh-shot-wrap's tight image-sized box) and sits ABOVE everything (z-index:4, even
   the image) purely for hit-testing -- without it, :hover on .seoh-shot-wrap only fires when the
   cursor is directly over the image/chips (since that's the actual size of that element's own
   box), never in the surrounding mesh band where the glow is actually visible, since the mesh's
   visual overflow doesn't extend its parent's real hoverable area. This is invisible and has no
   content, so it never visually blocks the image or chips underneath it. */
.seoh-hover-zone { position: absolute; inset: -90px; z-index: 4; background: transparent; }
.seoh-hover-zone:hover ~ .seoh-mesh-glow { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .seoh-mesh-glow { transition: none; } }

body.sh-home .seoh-os { color: #26272d; border-color: rgba(20,21,26,0.12); background: #fff; }
body.sh-home .seoh-os:hover { border-color: #e08e0b; color: #14151a; }
body.sh-home .seoh-os-row { margin-top: 20px; }

/* --------------------------------------------------------------------------
   Shared dark/amber page wrapper — Account page.
   -------------------------------------------------------------------------- */
/* padding-top was 150px, sized to clear the OLD fixed-overlay header. The header is now sticky
   (in normal document flow, occupying its own ~75px rather than floating over content), so that
   much reserved space would leave an oversized gap -- reduced to match. */
.sh-page-dark { background: var(--sh-bg); color: var(--sh-ink); font-family: 'Inter', system-ui, -apple-system, sans-serif; min-height: 100vh; padding: 56px 24px 100px; box-sizing: border-box; }
.sh-page-dark .sh-container { max-width: 480px; margin: 0 auto; }
.sh-page-dark .sh-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border: 1px solid var(--sh-line); border-radius: 999px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.6px; color: var(--sh-muted); background: rgba(255,255,255,0.03); margin-bottom: 24px; }
.sh-page-dark h1 { font-weight: 800; letter-spacing: -0.5px; font-size: clamp(28px, 4.5vw, 42px); margin: 0 0 16px; color: var(--sh-ink); }
.sh-page-dark .sh-lede { font-size: 15.5px; line-height: 1.65; color: var(--sh-muted); margin: 0 0 36px; }
.sh-page-dark .sh-card { background: rgba(255,255,255,0.03); border: 1px solid var(--sh-line); border-radius: 16px; padding: 32px; backdrop-filter: blur(6px); }

/* --------------------------------------------------------------------------
   Account page v2 — Login / Create Account / OTP / Account Created / Forgot / Reset panels.
   Own light-theme namespace (sh-account2-*), redesigned 2026-09-06 from a user-supplied
   HTML/CSS reference — same reason the Pricing page's own light conversion got sh-pricing-*
   rather than touching the shared dark .sh-page-dark/.sh-card classes Checkout still uses.
   Functional panel/form classes inside #sh-account-widget (sh-account-login-form, etc.) are
   unrelated to this namespace and driven entirely by assets/site.js's initAccountWidget(),
   untouched by this redesign.
   -------------------------------------------------------------------------- */
.sh-account2-page {
  position: relative; overflow: hidden; background: #fdfcfa;
  min-height: calc(100vh - 75px); /* 75px ~= the sticky header's own height, see the comment above .sh-page-dark */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px 64px; box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #14151a;
}
.sh-account2-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; z-index: 0; pointer-events: none; }
.sh-account2-blob.b1 { width: 480px; height: 480px; background: #ffa900; top: -140px; left: -140px; }
.sh-account2-blob.b2 { width: 420px; height: 420px; background: #60a5fa; bottom: -120px; right: -100px; opacity: 0.28; }
.sh-account2-blob.b3 { width: 320px; height: 320px; background: #34d399; top: 40%; right: 8%; opacity: 0.18; }

.sh-account2-logo-row { position: relative; z-index: 1; display: inline-flex; align-items: center; background: #0a0a0a; border-radius: 12px; padding: 10px 18px; margin-bottom: 30px; box-shadow: 0 8px 18px rgba(255,169,0,0.18); }
.sh-account2-logo-row img { display: block; height: 24px; width: auto; }

.sh-account2-card-wrap { position: relative; z-index: 1; width: 400px; max-width: 92vw; }
.sh-account2-card {
  background: #fff; border-radius: 22px; padding: 34px 32px; text-align: center;
  box-shadow: 0 1px 2px rgba(20,21,26,0.04), 0 30px 60px -14px rgba(20,21,26,0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sh-account2-card.sh-shake { animation: shShake 0.45s ease; }
@keyframes shShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}
.sh-account2-card.sh-err-glow { box-shadow: 0 0 0 3px rgba(220,38,38,0.18), 0 30px 60px -14px rgba(20,21,26,0.14); }

.sh-account2-card h1 { font-size: 21px; font-weight: 800; margin-bottom: 6px; }
.sh-account2-sub { font-size: 12.5px; color: #6b6f79; margin-bottom: 26px; }

.sh-account2-field { text-align: left; margin-bottom: 14px; }
.sh-account2-field label { display: block; font-size: 11.5px; font-weight: 700; color: #6b6f79; margin-bottom: 6px; }
.sh-account2-field input, .sh-account2-field select {
  width: 100%; padding: 13px 16px; border-radius: 999px; border: 1.5px solid rgba(20,21,26,0.1);
  font-family: inherit; font-size: 13.5px; outline: none; background: #fff; color: #14151a;
  box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sh-account2-field input:focus, .sh-account2-field select:focus { border-color: #ffa900; box-shadow: 0 0 0 3px rgba(255,169,0,0.12); }
.sh-account2-field-row { display: flex; gap: 10px; }
.sh-account2-field-row .sh-account2-field { flex: 1; min-width: 0; }
.sh-account2-help { font-size: 10.5px; color: #9a9ea8; margin-top: 6px; line-height: 1.5; }

.sh-account2-phone-row { display: flex; gap: 8px; }
.sh-account2-phone-code { flex: 0 0 122px; padding-left: 12px !important; padding-right: 6px !important; }
.sh-account2-phone-input { flex: 1; min-width: 0; }

/* color/background are set inline by site.js per case (red for errors, green for the one success
   message — password-reset confirmation) — no !important on color on purpose, same reasoning the
   pre-redesign CSS had: this box must be able to show either color, never locked to one. */
.sh-account2-error {
  display: flex !important; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; padding: 9px 13px; border-radius: 10px; margin-bottom: 14px;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.25s ease, transform 0.25s ease; text-align: left;
}
.sh-account2-error.sh-show { opacity: 1; transform: translateY(0); }

.sh-account2-forgot-row { text-align: right; margin-bottom: 20px; margin-top: -4px; }
.sh-account2-forgot-row a { font-size: 12px; color: #e69500; font-weight: 600; text-decoration: none; }
.sh-account2-forgot-row a:hover { text-decoration: underline; }

.sh-account2-btn {
  width: 100%; padding: 14px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(150deg, #ffc873, #ffa900); color: #1a1206;
  font-family: inherit; font-weight: 800; font-size: 14px;
  box-shadow: 0 10px 22px rgba(255,169,0,0.28); transition: transform 0.2s ease, filter 0.2s ease;
}
.sh-account2-btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
.sh-account2-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.sh-account2-switch-row { font-size: 12.5px; color: #6b6f79; margin-top: 22px; }
.sh-account2-switch-row a { color: #e69500; font-weight: 700; text-decoration: none; cursor: pointer; }
.sh-account2-switch-row a:hover { text-decoration: underline; }
.sh-account2-status { font-size: 12px; color: #16a34a; font-weight: 600; margin-top: 10px; }

/* ---- Full-screen success overlay (login) ---- */
.sh-account2-success-overlay {
  position: fixed; inset: 0; background: #fff; z-index: 900;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.sh-account2-success-overlay.sh-show { opacity: 1; pointer-events: auto; }
.sh-account2-success-ring {
  width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(150deg, #4ade80, #16a34a);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0); margin-bottom: 22px;
}
.sh-account2-success-overlay.sh-show .sh-account2-success-ring { animation: shPopIn 0.5s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes shPopIn { to { transform: scale(1); } }
.sh-account2-success-ring svg { width: 42px; height: 42px; color: #fff; stroke-dasharray: 30; stroke-dashoffset: 30; }
.sh-account2-success-overlay.sh-show .sh-account2-success-ring svg { animation: shDraw 0.4s ease 0.35s forwards; }
@keyframes shDraw { to { stroke-dashoffset: 0; } }
.sh-account2-success-overlay h2 { font-size: 20px; font-weight: 800; opacity: 0; transform: translateY(8px); font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.sh-account2-success-overlay.sh-show h2 { animation: shFadeUp 0.4s ease 0.5s forwards; }
.sh-account2-success-overlay p { font-size: 13px; color: #6b6f79; margin-top: 6px; opacity: 0; transform: translateY(8px); font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.sh-account2-success-overlay.sh-show p { animation: shFadeUp 0.4s ease 0.65s forwards; }
@keyframes shFadeUp { to { opacity: 1; transform: translateY(0); } }
.sh-account2-success-dots { display: flex; gap: 6px; margin-top: 20px; opacity: 0; }
.sh-account2-success-overlay.sh-show .sh-account2-success-dots { animation: shFadeUp 0.4s ease 0.8s forwards; }
.sh-account2-success-dots span { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: shBounce 1.2s ease-in-out infinite; }
.sh-account2-success-dots span:nth-child(2) { animation-delay: 0.15s; }
.sh-account2-success-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes shBounce { 0%,100%{transform:translateY(0); opacity:0.4;} 50%{transform:translateY(-6px); opacity:1;} }

/* ---- OTP boxes ---- */
.sh-account2-otp-row { display: flex; justify-content: center; gap: 10px; margin: 22px 0 8px; }
.sh-account2-otp-box {
  width: 46px !important; height: 54px; border-radius: 12px !important; text-align: center;
  font-size: 20px; font-weight: 800; padding: 0 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.4s ease, opacity 0.4s ease;
}
.sh-account2-otp-box.sh-merge { animation: shMergeSpin 0.7s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes shMergeSpin {
  0% { transform: translateX(var(--dx,0)) rotate(0deg) scale(1); opacity: 1; }
  70% { transform: translateX(calc(var(--dx,0) * 0.15)) rotate(360deg) scale(0.4); opacity: 0.7; }
  100% { transform: translateX(0) rotate(540deg) scale(0); opacity: 0; }
}
.sh-account2-otp-resend { font-size: 12px; color: #6b6f79; margin-top: 8px; }
.sh-account2-otp-resend a { color: #e69500; font-weight: 700; text-decoration: none; }

/* ---- Account-created avatar (initials, same gradient recipe as .sh-header-avatar) ---- */
.sh-account2-avatar-ring {
  width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--sh-amber), var(--sh-amber-2));
  color: #1a1206; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; flex-shrink: 0;
}

@media (max-width: 480px) {
  .sh-account2-field-row { flex-direction: column; gap: 0; }
  .sh-account2-phone-code { flex-basis: 108px; }
}

/* --------------------------------------------------------------------------
   Pricing page — Free / Pro (4-tier selector) / Custom Plan cards + FAQ. Redesigned 2026-09-04
   (Phase 1 of 5, see pricing/index.php's top comment) from a user-supplied light-theme reference:
   amber (#ffa900) replaces the reference's purple everywhere (buttons, radio dots, accent text,
   feature icons); green is kept exactly as the reference had it on the Pro card's border/badge.
   Own class namespace (sh-pricing-*, sh-billing-*, sh-plan-*), NOT the shared dark
   .sh-page-dark/.sh-eyebrow/.sh-lede classes Checkout/Account still use — same reason the
   homepage got its own .seoh-* namespace during its own light-theme conversion.
   -------------------------------------------------------------------------- */
.sh-pricing-page { background: #fff; min-height: 100vh; padding: 56px 24px 90px; box-sizing: border-box; font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #14151a; }
.sh-pricing-wrap { max-width: 1080px; margin: 0 auto; text-align: center; }

/* Same minimal "3D" chip treatment as the homepage's eyebrow badge. */
.sh-pricing-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: #26272d;
  background: linear-gradient(180deg, #ffffff, #f7f5f0); border: 1px solid rgba(20,21,26,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(20,21,26,0.04), 0 3px 8px rgba(20,21,26,0.07);
  margin-bottom: 20px;
}
.sh-pricing-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #e08e0b; flex-shrink: 0; }

.sh-pricing-h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.8px; line-height: 1.2; margin: 0 0 14px; }
.sh-pricing-h1 .accent { color: #e08e0b; }
.sh-pricing-lede { font-size: 15px; color: #676b76; max-width: 560px; margin: 0 auto 34px; line-height: 1.6; }

/* ---- billing-cycle toggle (Monthly/3-Month/6-Month/Annual) ---- */
.sh-billing-row { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin-bottom: 44px; }
.sh-billing-opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #6b6f79; cursor: pointer; user-select: none; }
.sh-billing-opt.active { color: #14151a; }
.sh-radio-dot { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid #d1d5db; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.15s ease; }
.sh-billing-opt.active .sh-radio-dot { border-color: #e08e0b; }
.sh-radio-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #e08e0b; opacity: 0; transition: opacity 0.15s ease; }
.sh-billing-opt.active .sh-radio-dot::after { opacity: 1; }
.sh-save-tag { font-size: 11px; font-weight: 700; color: #16a34a; background: rgba(22,163,74,0.1); padding: 2px 8px; border-radius: 999px; }

/* ---- pricing grid / cards ---- */
/* align-items:stretch (was start) makes all 3 cards equal height, matching the tallest one --
   each card is itself a column-flex box below so its own .sh-pricing-features list (the part
   that genuinely varies in length between cards) is what absorbs the leftover height via
   flex:1, rather than the card's fixed-content elements (head/desc/price/button) stretching
   oddly or leaving unexplained gaps. */
.sh-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; align-items: stretch; }
.sh-pricing-card {
  position: relative; background: #fff; border: 1.5px solid rgba(20,21,26,0.08); border-radius: 20px;
  padding: 28px; box-shadow: 0 1px 2px rgba(20,21,26,0.03), 0 12px 28px -12px rgba(20,21,26,0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box;
  display: flex; flex-direction: column;
}
/* Green stays exactly the reference's Pro treatment — not switched to amber. */
.sh-pricing-card--pro { border-color: #16a34a; box-shadow: 0 1px 2px rgba(20,21,26,0.03), 0 16px 34px -12px rgba(22,163,74,0.18); }
.sh-pricing-badge-top {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-size: 11px; font-weight: 800;
  padding: 5px 16px; border-radius: 999px; white-space: nowrap;
}
/* Logged-in user's ACTUAL current plan — distinct from the "Most Popular" marketing badge above
   (see initPricingCurrentPlan() in site.js for the plan-detection logic that adds this class). */
.sh-pricing-card.current-plan { border-color: #16a34a; box-shadow: 0 1px 2px rgba(20,21,26,0.03), 0 16px 34px -12px rgba(22,163,74,0.22); }
.sh-current-plan-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 6px 16px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.2px;
  background: linear-gradient(180deg, #34d399, #18b368); color: #fff;
  box-shadow: 0 6px 16px rgba(24,179,104,0.3), 0 0 0 4px #fff;
}
.sh-current-plan-badge svg { width: 12px; height: 12px; }

/* min-height on head/desc reserves consistent space across all 3 cards regardless of whether a
   card has the tier-selector row (Pro only) or how many lines its description wraps to -- this
   is what actually keeps the buttons below aligned across cards, not just the overall
   equal-height stretch above (which alone would still let the button's OWN position drift per
   card based on how tall the content above it happens to be). */
.sh-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; min-height: 32px; }
.sh-plan-name { font-size: 19px; font-weight: 800; }
.sh-plan-desc { font-size: 13px; color: #6b6f79; margin: 8px 0 18px; min-height: 34px; }

/* Pro card's 4-tier selector (Pro/Medium/Large/Ultra). Phase 1: purely visual active-state
   toggle (initPricingTierSelect() in site.js) — does not yet swap the displayed price/credits;
   that data-wiring is Phase 2. */
.sh-tier-select { display: flex; flex-wrap: wrap; gap: 2px; background: #f1f2f4; border-radius: 8px; padding: 2px; flex-shrink: 0; }
.sh-tier-select button { border: none; background: none; font-family: inherit; font-size: 11px; font-weight: 700; color: #8a8d96; padding: 4px 7px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.sh-tier-select button.active { background: #fff; color: #14151a; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.sh-pricing-amount { display: flex; align-items: flex-end; gap: 4px; margin-top: 4px; }
.sh-pricing-amount .n { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; color: #14151a; }
.sh-pricing-amount .p { font-size: 13px; color: #6b6f79; margin-bottom: 5px; }
.sh-pricing-note { font-size: 12px; color: #9a9ea8; margin: 6px 0 20px; }

.sh-plan-btn {
  display: block; width: 100%; text-align: center; padding: 13px; border-radius: 10px;
  font-family: inherit; font-weight: 700; font-size: 14px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; margin-bottom: 22px; box-sizing: border-box;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sh-plan-btn:hover { transform: translateY(-1px); }
/* Same reusable "brand solid" color combination as the homepage's .btn-brand-solid (solid
   #ffa900 + black border normally, black + #ffa900 border/text on hover) — written out directly
   here rather than sharing the class, since .btn-brand-solid's own CSS is scoped to override
   homepage-specific button rules that don't exist on this page. */
.sh-plan-btn--primary { background: #ffa900; border-color: #14151a; color: #1a1206; }
.sh-plan-btn--primary:hover { background: #14151a; border-color: #ffa900; color: #ffa900; }
.sh-plan-btn--outline { background: #fff; border-color: rgba(20,21,26,0.18); color: #14151a; }
.sh-plan-btn--outline:hover { border-color: #e08e0b; color: #14151a; }

.sh-pricing-features { list-style: none; margin: 0; padding: 0; flex: 1; }
.sh-pricing-features li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 13px; color: #26272d; border-bottom: 1px solid rgba(20,21,26,0.06); text-align: left; }
.sh-pricing-features li:last-child { border-bottom: none; }
/* One consistent round tick/cross badge per bullet — tick (included) light-amber, cross
   (not-included) light-red, same shape/size everywhere instead of a different icon per keyword. */
.sh-pricing-features li .fi { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.5px; }
.sh-pricing-features li .fi svg { width: 10px; height: 10px; }
.sh-pricing-features li.yes .fi { background: rgba(255,169,0,0.15); color: #e08e0b; }
.sh-pricing-features li.no .fi { background: rgba(220,38,38,0.1); color: #dc2626; }
.sh-pricing-features li.no .t { color: #9a9ea8; }
/* Thin divider between the included and not-included groups — same subtle border color already
   used for e.g. the checkout modal summary card. */
.sh-pricing-features li.sh-pricing-features-divider { display: block; padding: 5px 0; border-bottom: none; }
.sh-pricing-features li.sh-pricing-features-divider::after { content: ""; display: block; height: 1px; background: rgba(20,21,26,0.08); }

.sh-pricing-footnote { text-align: center; font-size: 12.5px; color: #9a9ea8; margin-top: 30px; }

@media (max-width: 980px) {
  .sh-pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .sh-pricing-grid { grid-template-columns: 1fr; }
}

/* ---- Custom Plan card: credits slider + live price (pre-existing function, restyled only) ---- */
.sh-custom-slider-row { margin-top: 6px; }
.sh-custom-slider-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: #6b6f79; margin-bottom: 8px; }
.sh-custom-slider-label b { color: #14151a; font-size: 15px; }
.sh-custom-slider { width: 100%; accent-color: #ffa900; cursor: pointer; }
.sh-custom-slider-range { display: flex; justify-content: space-between; font-size: 11px; color: #9a9ea8; margin-top: 4px; }
.sh-custom-price { display: block; margin-top: 16px; margin-bottom: 20px; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: #14151a; }
.sh-custom-price .p { font-size: 13px; font-weight: 500; color: #6b6f79; margin-left: 4px; }

/* ---- FAQ ---- */
.sh-pricing-faq { background: #faf9f7; padding: 60px 24px; }
.sh-pricing-faq-h2 { font-size: 26px; font-weight: 800; text-align: center; margin: 0 0 8px; color: #14151a; }
.sh-faq-list { margin-top: 24px; text-align: left; }
.sh-faq-item { border-bottom: 1px solid rgba(20,21,26,0.08); padding: 4px 0; }
.sh-faq-item summary { cursor: pointer; list-style: none; padding: 16px 4px; font-size: 15px; font-weight: 600; color: #14151a; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sh-faq-item summary::-webkit-details-marker { display: none; }
.sh-faq-item summary::after { content: "+"; font-size: 20px; font-weight: 400; color: #e08e0b; transition: transform 0.2s ease; flex-shrink: 0; }
.sh-faq-item[open] summary::after { transform: rotate(45deg); }
.sh-faq-item p { font-size: 14px; line-height: 1.6; color: #676b76; padding: 0 4px 16px; margin: 0; }

/* --------------------------------------------------------------------------
   Checkout — light theme, compact card (redesigned 2026-09-04 from a user-supplied reference).
   Own class namespace for the page chrome (sh-checkout-body/topbar/wrap/card); every class name
   inside #sh-checkout-widget below is UNCHANGED from before this redesign — wireCheckoutPanel()/
   initCheckoutWidget() in site.js needed zero changes, this pass is visual-only.
   -------------------------------------------------------------------------- */
.sh-checkout-body { background: #fff; margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.sh-checkout-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; }
.sh-checkout-logo { display: inline-flex; align-items: center; text-decoration: none; }
.sh-checkout-logo img { display: block; height: 26px; width: auto; }
.sh-checkout-back-link { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid rgba(20,21,26,0.12); color: #6b6f79; padding: 8px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; }
.sh-checkout-back-link:hover { border-color: #e08e0b; color: #14151a; }
.sh-checkout-back-link svg { width: 12px; height: 12px; }

.sh-checkout-wrap { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 10px 20px 50px; }
.sh-checkout-card { width: 520px; max-width: 100%; background: #fff; border: 1px solid rgba(20,21,26,0.09); border-radius: 18px; padding: 26px 28px; box-shadow: 0 1px 2px rgba(20,21,26,0.03), 0 20px 50px -18px rgba(20,21,26,0.12); box-sizing: border-box; }

#sh-checkout-widget { color: #14151a; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.sh-checkout-head { text-align: center; margin-bottom: 18px; }
.sh-checkout-head h1 { font-size: 19px; font-weight: 800; margin: 0; }
.sh-checkout-head p { font-size: 11.5px; color: #9a9ea8; margin-top: 3px; letter-spacing: 0.3px; }

.sh-checkout-summary { display: flex; align-items: center; justify-content: space-between; background: #f7f8fb; border: 1px solid rgba(20,21,26,0.08); border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; }
.sh-checkout-summary .t { font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; color: #9a9ea8; text-transform: uppercase; margin-bottom: 4px; }
.sh-checkout-summary .left { text-align: left; }
.sh-checkout-summary .right { text-align: right; }
.sh-checkout-summary .name { font-size: 14px; font-weight: 800; }
.sh-checkout-summary .name.u { font-size: 13px; font-weight: 700; color: #26272d; }

.sh-checkout-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.sh-checkout-method { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; border: 1px solid rgba(20,21,26,0.09); background: #f7f8fb; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease; }
.sh-checkout-method:hover { transform: translateY(-1px); }
.sh-checkout-method .lbl { font-size: 10.5px; font-weight: 800; color: #6b6f79; text-align: center; letter-spacing: 0.2px; }
.sh-checkout-method.active { border-color: transparent; }
.sh-checkout-method.active[data-method="jazzcash"] { background: rgba(224,57,47,0.07); border-color: rgba(224,57,47,0.3); }
.sh-checkout-method.active[data-method="jazzcash"] .lbl { color: #e0392f; }
.sh-checkout-method.active[data-method="bank_transfer"] { background: rgba(255,169,0,0.08); border-color: rgba(255,169,0,0.35); }
.sh-checkout-method.active[data-method="bank_transfer"] .lbl { color: #e08e0b; }
.sh-checkout-method.active[data-method="crypto"] { background: rgba(38,161,123,0.08); border-color: rgba(38,161,123,0.3); }
.sh-checkout-method.active[data-method="crypto"] .lbl { color: #26a17b; }

/* Distinct colored badge icon per payment method (own fixed brand color, not tied to the
   active/inactive state the way the old plain currentColor-stroke icons were) — bank=amber,
   JazzCash=red/orange, USDT=Tether green. */
.sh-checkout-method .ic { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-checkout-method .ic svg { width: 16px; height: 16px; }
.ic-jazzcash { background: linear-gradient(135deg, #e0392f, #f0b93b); }
.ic-bank { background: linear-gradient(150deg, #ffc873, #e08e0b); }
.ic-crypto { background: #26a17b; }

.sh-checkout-detail { background: #f7f8fb; border: 1px solid rgba(20,21,26,0.08); border-radius: 14px; padding: 16px; }
.sh-checkout-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; }
.sh-checkout-row .field-lbl { font-size: 9.5px; color: #9a9ea8; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; font-weight: 800; }
.sh-checkout-row .field-val { font-size: 13px; font-weight: 800; color: #14151a; }
.sh-checkout-row .field-val.accent { color: #e08e0b; }
.sh-checkout-detail .field-lbl { font-size: 9.5px; color: #9a9ea8; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; font-weight: 800; }
.sh-checkout-network-select { background: #fff; border: 1px solid rgba(20,21,26,0.12); color: #14151a; font-family: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; margin-top: 2px; }
.sh-num-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid rgba(20,21,26,0.09); border-radius: 10px; padding: 10px 12px; margin-bottom: 4px; }
.sh-num-box .n { font-size: 13px; font-weight: 700; color: #14151a; word-break: break-all; }
.sh-checkout-copy-btn { flex-shrink: 0; background: rgba(224,142,11,0.12); border: none; color: #e08e0b; font-family: inherit; font-size: 11px; font-weight: 800; padding: 6px 10px; border-radius: 7px; cursor: pointer; transition: filter 0.15s ease; }
.sh-checkout-copy-btn:hover { filter: brightness(0.95); }
.sh-checkout-instructions { list-style: none; margin: 12px 0 0; padding: 0; }
.sh-checkout-instructions li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #26272d; padding: 4px 0; }
.sh-n-badge { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(224,142,11,0.12); color: #e08e0b; font-size: 9.5px; font-weight: 800; flex-shrink: 0; }

.sh-coupon-row { display: flex; gap: 8px; margin-top: 16px; }
.sh-coupon-input { flex: 1; padding: 10px 14px; border: 1px solid rgba(20,21,26,0.12); border-radius: 8px; background: #fff; color: #14151a; font-family: inherit; font-size: 13px; box-sizing: border-box; text-transform: uppercase; }
.sh-coupon-input:focus { outline: none; border-color: #e08e0b; }
.sh-coupon-input::placeholder { text-transform: none; }
.sh-coupon-apply-btn { flex-shrink: 0; background: #f7f8fb; border: 1px solid rgba(20,21,26,0.12); color: #14151a; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 0 18px; border-radius: 8px; cursor: pointer; transition: background 0.2s ease; }
.sh-coupon-apply-btn:hover { background: #f0f1f4; }
.sh-coupon-apply-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.sh-coupon-message { font-size: 12px; margin: 8px 0 0; display: none; }
.sh-coupon-message.ok { color: #16a34a; display: block; }
.sh-coupon-message.error { color: #dc2626; display: block; }
.sh-checkout-amount .strike { text-decoration: line-through; color: #9a9ea8; font-weight: 500; font-size: 12px; margin-right: 6px; }

.sh-checkout-agree-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; font-size: 12px; color: #6b6f79; cursor: pointer; }
.sh-checkout-agree-row input { margin-top: 2px; flex-shrink: 0; accent-color: #ffa900; }
.sh-checkout-agree-row a { color: #e08e0b; text-decoration: none; font-weight: 600; }
.sh-checkout-agree-row a:hover { text-decoration: underline; }
.sh-checkout-error { color: #dc2626; font-size: 12.5px; margin-top: 10px; display: none; }

/* Same reusable "brand solid" combination as elsewhere (solid #ffa900 + black border normally,
   black + #ffa900 border/text on hover), written out directly rather than sharing
   .btn-brand-solid since this page has no competing higher-specificity rule to out-duel here. */
.sh-checkout-confirm-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 16px; padding: 13px; border: 1px solid #14151a; border-radius: 12px; cursor: pointer; font-size: 13.5px; font-weight: 800; font-family: inherit; background: #ffa900; color: #1a1206; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; box-sizing: border-box; }
.sh-checkout-confirm-btn:hover { background: #14151a; border-color: #ffa900; color: #ffa900; transform: translateY(-1px); }
.sh-checkout-confirm-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.sh-checkout-confirm-btn svg { width: 15px; height: 15px; }

.sh-checkout-success { text-align: center; padding: 0; font-size: 13px; color: #16a34a; }
.sh-checkout-success-text { margin: 0; font-weight: 700; }
.sh-checkout-processing-note { margin: 6px 0 0; font-size: 12px; color: #16a34a; opacity: 0.85; }
.sh-checkout-whatsapp-note { margin: 8px 0 0; font-size: 11.5px; color: #6b6f79; }
.sh-checkout-whatsapp-note a { color: #e08e0b; text-decoration: none; }
.sh-checkout-whatsapp-note a:hover { text-decoration: underline; }

/* Confirmation MODAL — fixed-position overlay + centered card holding the 4-step wizard
   (gate -> form -> review -> success), replacing what used to be flat in-page divs. Fixed
   positioning here escapes .sh-checkout-panel's layout regardless of DOM nesting depth since no
   ancestor sets transform/filter/perspective. */
.sh-checkout-modal-overlay { display: none; position: fixed; inset: 0; z-index: 800; background: rgba(15,16,20,0.55); align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.sh-checkout-modal { position: relative; width: 100%; max-width: 380px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 16px; padding: 26px 22px 22px; box-sizing: border-box; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.sh-checkout-modal-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; border: none; background: #f7f8fb; color: #6b6f79; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sh-checkout-modal-close:hover { background: #f0f1f4; color: #14151a; }
.sh-checkout-modal-title { font-size: 13.5px; font-weight: 800; color: #14151a; margin: 0 0 12px; text-align: center; }
.sh-checkout-modal-summary { background: #f7f8fb; border: 1px solid rgba(20,21,26,0.08); border-radius: 10px; padding: 12px 14px; }
.sh-checkout-modal-summary .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.sh-checkout-modal-summary .row + .row { margin-top: 7px; }
.sh-checkout-modal-summary .row span { color: #6b6f79; }
.sh-checkout-modal-summary .row b { color: #14151a; font-weight: 700; text-align: right; }

/* "Have you completed the payment?" gate */
.sh-checkout-proof-question { font-size: 13.5px; font-weight: 700; color: #14151a; margin: 0 0 12px; text-align: center; }
.sh-checkout-yesno-row { display: flex; gap: 8px; }
.sh-checkout-yesno-row .sh-plan-btn { margin-bottom: 0; padding: 11px; font-size: 13px; flex: 1; }
.sh-checkout-not-yet-msg { display: none; margin: 10px 0 0; font-size: 12px; color: #6b6f79; text-align: center; }

/* Payer name + Transaction ID / screenshot form */
.sh-checkout-optional-hint { text-transform: none; font-weight: 400; color: #9a9ea8; }
.sh-checkout-payer-input,
.sh-checkout-txn-input { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid rgba(20,21,26,0.12); border-radius: 8px; background: #fff; color: #14151a; font-family: inherit; font-size: 13px; }
.sh-checkout-payer-input:focus,
.sh-checkout-txn-input:focus { outline: none; border-color: #e08e0b; }
.sh-checkout-screenshot-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.sh-checkout-screenshot-status { font-size: 12px; color: #9a9ea8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-checkout-screenshot-preview { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: #f7f8fb; border: 1px solid rgba(20,21,26,0.08); border-radius: 8px; padding: 8px 10px; }
.sh-checkout-screenshot-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.sh-checkout-screenshot-remove { margin-left: auto; background: none; border: none; color: #9a9ea8; font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.sh-checkout-screenshot-remove:hover { color: #dc2626; }
.sh-checkout-proof-error,
.sh-checkout-review-error { color: #dc2626; font-size: 12.5px; margin-top: 10px; display: none; }
.sh-checkout-loggedout { text-align: center; padding: 40px 24px; }
.sh-checkout-loggedout p { font-size: 14px; color: #6b6f79; margin-bottom: 18px; }
.sh-checkout-loading { text-align: center; padding: 40px 24px; font-size: 13.5px; color: #9a9ea8; }

/* Toast (used for the same visual language as app.harbileads.org) */
.sh-toast-stack { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 700; }

/* --------------------------------------------------------------------------
   Account details modal — opened from the header dropdown, never a page nav.
   -------------------------------------------------------------------------- */
.sh-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sh-modal { position: relative; width: 100%; max-width: 420px; background: #0c0e13; border: 1px solid var(--sh-line); border-radius: 16px; padding: 32px 28px 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.sh-modal h2 { font-size: 19px; font-weight: 800; color: var(--sh-ink); margin: 0 0 20px; }
.sh-modal-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 8px; border: none; background: rgba(255,255,255,0.06); color: var(--sh-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.sh-modal-close:hover { background: rgba(255,255,255,0.12); color: var(--sh-ink); }
.sh-modal-field { margin-bottom: 16px; }
.sh-modal-field label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--sh-muted); margin-bottom: 6px; }
.sh-modal-hint { text-transform: none; font-weight: 500; letter-spacing: 0; }
.sh-modal-value { font-size: 15px; font-weight: 600; color: var(--sh-ink); }
.sh-modal-key-row { display: flex; align-items: center; gap: 8px; }
.sh-modal-key { flex: 1; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; font-weight: 700; letter-spacing: 0.4px; color: var(--sh-amber); background: rgba(253,166,2,0.08); border: 1px solid rgba(253,166,2,0.25); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: nowrap; }
.sh-modal-copy-btn { flex-shrink: 0; padding: 10px 16px; border-radius: 8px; border: none; background: var(--sh-amber); color: #1a1206; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s ease; }
.sh-modal-copy-btn:hover { background: #e39400; }
.sh-toast { background: #1a1a1f; color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,0.35); max-width: 320px; }