:root {
  --bg: #000000;
  --bg-alt: #0d0d0d;
  --card: #141414;
  --text: #f2f2f2;
  --muted: #b5b5b5;
  --accent: #22c55e;
  --accent-hover: #16a34a;
  --accent2: #38bdf8;
  --brand: #c7d92c;
  --brand-hover: #b3c227;
  --border: #2a2a2a;
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 17px; }
body {
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  position: relative;
}
h1, h2, h3 { font-family: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif; }
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 700px 500px at 8% 0%, rgba(199,217,44,0.10), transparent 60%),
    radial-gradient(ellipse 700px 550px at 95% 100%, rgba(165,107,255,0.12), transparent 60%);
}
body > * { position: relative; z-index: 1; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Nav */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 48px; width: auto; }
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 0.95rem; transition: color .2s; }
.nav-links a:hover { color: var(--text); }

/* Hamburger toggle — hidden on desktop, only shown at the mobile breakpoint
   below, where it opens .nav-links as a dropdown instead of the links
   simply disappearing with no way to reach them. */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 32px; height: 32px; background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.btn {
  display: inline-block;
  background: var(--brand);
  color: #0d0d0d !important;
  font-weight: 700;
  font-size: 1.08rem;
  padding: 12px 26px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s, transform .1s;
  white-space: nowrap;
}
.btn-chevrons { display: inline-flex; align-items: center; margin-left: 8px; vertical-align: middle; }
.btn-chevrons svg { margin-left: -5px; }
.btn-chevrons svg:first-child { margin-left: 0; }
.btn-chevrons svg:nth-child(1) { opacity: 0.35; }
.btn-chevrons svg:nth-child(2) { opacity: 0.65; }
.btn-chevrons svg:nth-child(3) { opacity: 1; }
.btn:hover { background: var(--brand-hover); transform: translateY(-1px); }
.btn-small { padding: 8px 18px; font-size: 0.9rem; }
.btn-outline {
  background: #0d0914;
  color: #c4a3ff !important;
  border: 1px solid rgba(165,107,255,0.35);
}
.btn-outline:hover { background: #1a1129; }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 64px); /* 64px = nav height, so the hero fills the rest of the viewport */
  display: flex; flex-direction: column;
  /* hero-inner is bottom-aligned and is now the only flex child (the old
     scroll-link element below it used to claim ~100px of this column's
     height); a bigger bottom padding reclaims that space so the text sits
     back where it did instead of sliding down to the very bottom. */
  padding: 96px 0 140px;
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-wall { position: absolute; left: 0; top: 0; bottom: 0; width: 70%; }
.hero-fade-right {
  position: absolute; left: 0; top: 0; bottom: 0; width: 70%;
  background: linear-gradient(90deg, rgba(0,0,0,0) 80%, #000000 98%);
}
.hero-fade-text {
  position: absolute; left: 0; top: 0; bottom: 0; width: 70%;
  background: radial-gradient(ellipse 620px 420px at 30% 46%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 75%);
}
.hero-fade-top {
  position: absolute; top: 0; left: 0; width: 70%; height: 140px;
  background: linear-gradient(#000000, rgba(0,0,0,0));
}
.hero-fade-bottom {
  position: absolute; bottom: 0; left: 0; width: 70%; height: 160px;
  background: linear-gradient(rgba(0,0,0,0), #000000);
}

.hero-inner {
  flex: 1 1 auto;
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap;
  max-width: 1180px; /* wider than the shared .container, so the subhead's
                        3 lines fit without extra wrapping */
  /* .container (used by the nav) centers at 1100px; this box is wider, so
     centering it too would push its left edge further left than the nav's
     left edge, misaligning "No cloud." from the logo above it. Anchor this
     box's left edge to the SAME position .container's would be at, and let
     the extra width go entirely to the right instead. */
  margin-left: max(0px, calc((100% - 1100px) / 2));
  margin-right: auto;
}
.hero-copy { max-width: 620px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(165,107,255,0.35); background: rgba(165,107,255,0.08);
  font-size: 0.88rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #c4a3ff; margin-bottom: 20px;
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #a56bff; }
.hero h1 {
  font-size: clamp(2.6rem, 4.8vw, 3.8rem);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 18px;
}
.hero p.sub { font-size: 1.1rem; color: var(--muted); margin-bottom: 30px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 44px; }
.hero-note { margin-top: 16px; font-size: 0.85rem; color: var(--muted); }
.hero-note a { color: var(--accent2); text-decoration: none; }

/* Decorative platform preview — an illustrative window, not the real interface
   (that's the interactive .mockup demo further down the page). */
.hero-preview { flex: 0 0 auto; width: 440px; max-width: 44vw; }
.hero-preview-caption {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; font-size: 0.85rem; color: var(--muted);
}
.hero-preview-caption a {
  color: #c7d92c; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.hero-preview-caption a:hover { text-decoration: underline; }
.hero-preview-card {
  background: #181825; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 40px 90px rgba(0,0,0,0.6); overflow: hidden;
}
.hero-preview-titlebar {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  background: #11111b; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-preview-titlebar .dot { width: 8px; height: 8px; border-radius: 50%; }
.hero-preview-titlebar .dot.red { background: #f38ba8; }
.hero-preview-titlebar .dot.yellow { background: #f9e2af; }
.hero-preview-titlebar .dot.green { background: #a6e3a1; }
.hero-preview-titlebar .label { margin-left: 6px; font-size: 0.68rem; color: #7f849c; }
.hero-preview-body { display: flex; height: 300px; }
.hero-preview-sidebar {
  width: 54px; background: #11111b; border-right: 1px solid rgba(255,255,255,0.06);
  padding: 12px 8px; display: flex; flex-direction: column; gap: 7px;
}
.hero-preview-sidebar span { display: block; height: 7px; border-radius: 3px; background: #313244; }
.hero-preview-sidebar span:nth-child(2) { width: 70%; }
.hero-preview-sidebar span:nth-child(3) { height: 16px; border-radius: 4px; margin-top: 4px; }
.hero-preview-chart { position: relative; flex: 1; }
.hero-preview-chart-inner { position: absolute; inset: 12px; }

.hero-scroll {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 56px; color: #c7d92c; text-decoration: none; font-size: 1rem; font-weight: 600; letter-spacing: 0.04em;
}
.hero-scroll:hover { color: #b3c227; }
.hero-scroll-chevrons { display: flex; flex-direction: column; align-items: center; }
.hero-scroll-chevrons svg { margin-top: -3px; }
.hero-scroll-chevrons svg:nth-child(1) { opacity: 0.4; }
.hero-scroll-chevrons svg:nth-child(2) { opacity: 0.7; }
.hero-scroll-chevrons svg:nth-child(3) { opacity: 1; }

/* hero-copy (620px) + gap (48px) + hero-preview (440px) needs ~1108px of
   content width, i.e. a ~1156px+ viewport once .container's own padding is
   counted. Below that, hide the preview outright rather than letting it
   flex-wrap onto its own line, which looked broken on common laptop widths
   (1024px, 1152px) that sit between the old 960px cutoff and that point. */
@media (max-width: 1180px) {
  .hero-preview { display: none; }
  .hero-fade-text { display: none; }
  /* This used to be 0.5 — a band-aid for when narrow walls forced a 40-candle
     minimum into too little space (now fixed), which made mobile look faded
     compared to desktop for no real reason. 0.75 keeps a touch of dimming for
     text legibility without washing the wall out. */
  .hero-wall { opacity: 0.75; }
}
@media (max-width: 640px) {
  .hero { padding: 48px 0 60px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { text-align: center; }
}

/* App mockup — the interactive demo of the desktop app, iframed for isolation
   (demo.html ships its own CSS, which would otherwise collide with .btn/.card).
   Wider than the old screenshot: the demo needs 980px to lay out its sidebar
   beside the tabs, and below that it falls back to its own stacked layout. */
/* The demo breaks out of the 1100px .container: a desktop app UI needs the
   room, and the sidebar + tab pane read much better wide. Capped at 1440px so
   it does not sprawl on an ultrawide monitor. The 48px keeps it clear of the
   scrollbar (100vw includes it, the document width does not). */
.mockup {
  scroll-margin-top: 84px; /* so #interface lands clear of the sticky nav */
  width: min(1440px, calc(100vw - 48px));
  max-width: none;
  margin: 0 0 0 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  overflow: hidden;
  position: relative;
}
.mockup img { display: block; width: 100%; height: auto; }
.mockup iframe {
  display: block; width: 100%; border: 0;
  height: 706px;                 /* replaced by the real height on load */
  color-scheme: dark;
  background: var(--card);       /* any transient gap shows the card, not white */
}
.mockup-hint {
  width: min(1440px, calc(100vw - 48px));
  margin: 12px 0 0 50%;
  transform: translateX(-50%);
  color: var(--muted); font-size: 0.85rem; text-align: center;
}
@media (max-width: 640px) {
  .mockup, .mockup-hint { width: calc(100vw - 32px); }
}

/* Mobile fallback for the interactive demo — see the HTML comment above
   .mockup-mobile in index.php for why. Hidden by default (desktop/tablet
   keep the real interactive iframe); swapped in below 760px. */
.mockup-mobile { display: none; }
.mockup-mobile-note { text-align: center; color: #5c5a52; font-size: 0.9rem; margin-bottom: 18px; }
.mockup-mobile-shots { display: flex; flex-direction: column; gap: 16px; }
.mockup-mobile-shot {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 20px 48px rgba(0,0,0,0.4);
}
.mockup-mobile-titlebar {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  background: #11111b; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mockup-mobile-titlebar .dot { width: 8px; height: 8px; border-radius: 50%; }
.mockup-mobile-titlebar .dot.red { background: #f38ba8; }
.mockup-mobile-titlebar .dot.yellow { background: #f9e2af; }
.mockup-mobile-titlebar .dot.green { background: #a6e3a1; }
.mockup-mobile-titlebar .label { margin-left: 6px; font-size: 0.68rem; color: #7f849c; }
.mockup-mobile-shot img { display: block; width: 100%; height: auto; }
.mockup-mobile-placeholder-body {
  display: flex; align-items: center; justify-content: center;
  height: 160px; color: var(--muted); font-size: 0.85rem;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px);
}
@media (max-width: 760px) {
  .mockup, .mockup-hint { display: none; }
  .mockup-mobile { display: block; }
}

/* Sections */
section { padding: 88px 0; }
section.alt { background: var(--bg-alt); }
/* Nav is sticky at 64px tall — without this, jumping to an anchor lands the
   section flush under the viewport top, hidden behind the nav bar. */
section[id] { scroll-margin-top: 64px; }

/* Features background: the AI-generated crack image, recolored from its
   original orange/red/yellow to green at the pixel level (a real hue remap
   preserving all the original shade variation, not a CSS filter) — see
   tools/recolor_lava.py. Faded at its own edges into the section's
   black, with a dark overlay so card text stays readable on top of it. */
#features { position: relative; overflow: hidden; }
#features .container { position: relative; z-index: 1; }
.features-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.features-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0.56;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%);
}
.features-bg-overlay { position: absolute; inset: 0; background: rgba(13,13,13,0.66); }
/* On mobile the 9 feature cards stack into one tall column, so the section
   itself gets very tall and narrow — stretching this wide, horizontal image
   to inset:0 (object-fit:cover) crops it down to a thin, over-zoomed sliver
   instead of the recognizable crack shape. Cap the background to a fixed
   height pinned to the top instead of stretching it the full section height. */
@media (max-width: 760px) {
  .features-bg { height: 520px; bottom: auto; }
  /* The radial fade mask fades out more of the image proportionally now that
     the box is shorter than on desktop — widen it and bump opacity a little
     so the image reads with the same strength as the full-height desktop
     version instead of looking faded out. */
  .features-bg img {
    opacity: 0.68;
    -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, #000 55%, transparent 100%);
  }
}
/* The hero already fills the viewport height, so the section right after it
   needs less added top padding than sections that follow a normal-height one.
   Every other section heading matches this same top spacing and font-size,
   so all four section titles (How it works, Features, Pricing, FAQ) look
   and sit consistently. */
#how, #features, #testimonials, #plans, #faq { padding-top: 32px; }
#features .section-head h2,
#testimonials .section-head h2,
#plans .section-head h2,
#faq .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }

/* Experimental: the how-it-works content sits on an off-white card instead
   of the page's black background — not pure white, to keep the contrast
   from the surrounding black less jarring. Everything inside needs its own
   dark-on-light colors since the rest of the site assumes a dark ground. */
.how-panel {
  background: #eaead4;
  border-radius: 28px;
  padding: 56px 0;
  color: #1a1a17;
}
.how-panel .section-head h2,
.how-panel .section-head h3 { color: #17160f; }
.how-panel .section-head p { color: #5c5a52; }
.how-steps-line {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 56px; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.15rem;
  color: #17160f;
}
.how-steps-line svg { color: #8a8776; flex-shrink: 0; }
.how-steps-note { text-align: center; margin-top: 10px; font-size: 0.9rem; color: #5c5a52; }

/* Quick side-by-side experiment: heading/text on the left (like the hero),
   the Download/Install/Trade line on the right. */
#how .how-head-left h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.steps.how-steps-below {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2.4fr);
  align-items: start; gap: 24px; margin-top: 0; margin-bottom: 40px;
}
.how-right-steps .step { text-align: center; min-width: 0; }
.how-right-steps .step .num {
  width: 56px; height: 56px; margin: 0 auto 10px;
  border-radius: 50%; background: #c7d92c;
  color: #0d0d0d; font-size: 1.4rem; font-weight: 800;
  font-family: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.how-panel .how-right-steps .step h3 { color: #17160f; font-size: 1.15rem; margin-bottom: 4px; }
.how-panel .how-right-steps .step p { color: #5c5a52; font-size: 0.85rem; }

.how-interface-callout { min-width: 0; }
.how-interface-banner {
  position: relative;
  text-align: center;
  padding: 26px 22px 22px;
  border-radius: 14px;
  background: #c7d92c;
  box-shadow: 0 16px 32px rgba(23,22,15,0.22);
}
/* Three bare chevrons (no stem), fading in toward the last one, reading as
   motion pointing down at the demo below — not a single arrow icon. */
.how-interface-chevrons {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 10px; color: #0d0d0d;
}
.how-interface-chevrons svg { margin-top: -3px; }
.how-interface-chevrons svg:nth-child(1) { opacity: 0.4; }
.how-interface-chevrons svg:nth-child(2) { opacity: 0.7; }
.how-interface-chevrons svg:nth-child(3) { opacity: 1; }
.how-interface-banner h3 { color: #0d0d0d; margin: 0 0 5px; font-size: 1.3rem; font-weight: 700; white-space: nowrap; }
.how-interface-banner p { margin: 0; font-size: 0.95rem; color: #2a2a1a; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.section-head h2 { font-size: 2rem; font-weight: 700; margin-bottom: 12px; }
.section-head p { color: var(--muted); }

/* Features */
/* The value prop in numbers, before the feature-by-feature detail below. */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px;
  margin: 0 0 48px; padding: 28px 0;
  border-top: 1px solid rgba(199,217,44,0.2); border-bottom: 1px solid rgba(199,217,44,0.2);
}
.stat { text-align: center; }
.stat-num { display: block; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 2.1rem; color: var(--brand); line-height: 1.1; }
.stat-label { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--muted); line-height: 1.35; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
/* Spans the whole row so an extra card never leaves a lone orphan in the grid. */
.card-wide { grid-column: 1 / -1; }
.card {
  background: rgba(165,107,255,0.08);
  border: 1px solid rgba(165,107,255,0.35);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .2s, border-color .2s, background .2s;
}
.card:hover { transform: translateY(-4px); border-color: #a56bff; background: rgba(165,107,255,0.16); }
.card .icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: #7c3aed;
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.95rem; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; counter-reset: step; }
.step { text-align: center; }
.step .num {
  width: 52px; height: 52px; margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-hover), #0284c7);
  color: #ffffff; font-weight: 800; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.95rem; }

/* Download confirmation page — a real "your download is starting" state
   instead of landing someone who just clicked Download on the Pricing
   section with no indication anything happened. */
.download-confirm { padding-top: 140px; text-align: center; }
.download-confirm-inner { max-width: 520px; margin: 0 auto 64px; }
.download-check {
  width: 56px; height: 56px; margin: 0 auto 20px;
  border-radius: 50%; background: rgba(199,217,44,0.14); border: 1px solid rgba(199,217,44,0.4);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.download-confirm h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom: 14px; }
.download-confirm-sub { color: var(--muted); font-size: 1.05rem; margin-bottom: 10px; }
.download-confirm-sub a { color: var(--accent2); }
.download-confirm .hero-note { margin-top: 0; }
.download-confirm-steps { max-width: 620px; margin: 0 auto; }
.download-confirm-steps .num { background: var(--brand); color: #0d0d0d; }
.download-confirm-pricing { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 32px; }
.download-confirm-pricing a { color: var(--accent2); text-decoration: none; }

/* Testimonials — placeholder cards until there are real quotes to put here. */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.testimonial-card {
  background: #eaead4; border-radius: var(--radius); padding: 28px;
  color: #1a1a17;
}
.testimonial-card p.quote { font-size: 1rem; margin-bottom: 18px; }
.testimonial-card .attribution { display: flex; align-items: center; gap: 12px; }
.testimonial-card .avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(199,217,44,0.25); border: 1px solid rgba(199,217,44,0.5);
  display: flex; align-items: center; justify-content: center;
  color: #17160f; font-weight: 800; font-size: 0.9rem;
}
.testimonial-card .name { font-weight: 700; font-size: 0.92rem; color: #17160f; }
.testimonial-card .role { color: #5c5a52; font-size: 0.85rem; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: stretch; }
.plans-single { display: flex; justify-content: center; }
.plans-single .plan { width: 100%; max-width: 460px; }
.plan {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px 28px;
  display: flex; flex-direction: column; position: relative;
  transition: transform .2s, border-color .2s;
}
.plan:hover { transform: translateY(-4px); border-color: var(--accent); }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 60px rgba(34,197,94,0.12); }
.plan .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent-hover); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.plan h3 { font-size: 1.3rem; margin-bottom: 4px; }
.plan-logo { display: block; align-self: flex-start; height: 60px; width: auto; margin: 0 0 6px; }
.plan-body { display: flex; flex-direction: column; flex: 1; margin-left: 14px; }
.price-toggle { display: inline-flex; align-self: center; gap: 4px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin-bottom: 12px; }
.price-toggle-btn {
  border: 0; background: none; color: var(--muted);
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.price-toggle-btn span { color: var(--brand); margin-left: 4px; }
.price-toggle-btn.active { background: var(--brand); color: #0d0d0d; }
.price-toggle-btn.active span { color: #0d0d0d; }
.plan .price { font-size: 2.6rem; font-weight: 800; margin: 6px 0 2px; font-family: "Archivo", sans-serif; }
.plan .price.quote { font-size: 1.05rem; font-weight: 600; color: var(--muted); }
.plan .price-period { font-size: 1.1rem; font-weight: 600; color: var(--muted); }
.plan .price-billed-as { font-size: 0.9rem; color: var(--muted); margin-bottom: 6px; }
.plan .price-save {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.88rem; color: var(--brand); font-weight: 600; margin-bottom: 20px;
}
.plan .info-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(199,217,44,0.18); color: var(--brand);
  font-size: 0.68rem; font-weight: 700; font-style: italic; font-family: Georgia, serif;
  cursor: help;
}
.plan .info-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 220px; padding: 10px 12px; border-radius: 8px;
  background: #1e1e1e; border: 1px solid var(--border);
  color: var(--text); font-size: 0.78rem; font-weight: 400; font-style: normal;
  line-height: 1.4; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .15s;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  z-index: 5;
}
.plan .info-tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #1e1e1e;
}
.plan .info-icon:hover .info-tooltip,
.plan .info-icon:focus .info-tooltip { opacity: 1; }
.plan .tagline { color: var(--muted); font-size: 0.92rem; margin-bottom: 22px; }
.plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan li { position: relative; padding-left: 26px; font-size: 0.94rem; }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
.plan li strong { font-weight: 700; }
.plan li.no { color: var(--muted); }
.plan li.no::before { content: "—"; color: var(--muted); }
.plan .btn { width: 100%; text-align: center; margin-top: auto; }
.plans-note { text-align: center; color: var(--muted); font-size: 0.88rem; margin-top: 28px; }

/* FAQ */
details {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 12px;
}
details summary { cursor: pointer; font-family: "Archivo", sans-serif; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details summary::after { content: "+"; font-size: 1.4rem; color: var(--accent); }
details[open] summary::after { content: "–"; }
details p { margin-top: 12px; color: var(--muted); }

/* Footer */
footer { border-top: 1px solid var(--border); padding: 40px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
footer p, footer a { color: var(--muted); font-size: 0.9rem; text-decoration: none; }
footer a:hover { color: var(--text); }
.footer-links { display: flex; gap: 24px; }
.footer-legal {
  border-top: 1px solid var(--border); margin-top: 24px; padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.footer-legal-links { display: flex; gap: 20px; }
.footer-legal-links a { color: var(--muted); font-size: 0.82rem; text-decoration: none; }
.footer-legal-links a:hover { color: var(--text); }

/* Legal pages (Privacy / Terms): plain long-form content on the standard
   dark ground, kept narrow for readability. */
.legal-page { padding: 140px 0 100px; }
.legal-page .container { max-width: 760px; }
.legal-page h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-bottom: 8px; }
.legal-page .legal-updated { color: var(--muted); font-size: 0.88rem; margin-bottom: 40px; }
.legal-page h2 { font-size: 1.2rem; margin: 36px 0 12px; }
.legal-page p { color: #d8d8d8; line-height: 1.7; margin-bottom: 14px; }
.legal-page ul { color: #d8d8d8; line-height: 1.7; margin: 0 0 14px; padding-left: 22px; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--accent2); }

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  /* Features/How it works/FAQ move into a dropdown opened by the hamburger
     button instead of just vanishing — Pricing (outside .nav-links) and the
     toggle itself stay inline in the bar. */
  .nav-links {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(0,0,0,0.97); border-bottom: 1px solid var(--border);
    padding: 8px 16px 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 4px; font-size: 1rem; }
  .nav-toggle { display: flex; }
  .nav-right { gap: 14px; }
  .logo { font-size: 1.1rem; }
  .btn-small { padding: 7px 10px; font-size: 0.8rem; }
  .logo { gap: 5px; }
  section { padding: 60px 0; }
}

/* Below this width the 3-narrow-columns-plus-wide-banner row has no room
   left — stack everything into one column instead of squeezing it, and let
   the step captions/heading wrap normally instead of forcing one line. */
@media (max-width: 760px) {
  .steps.how-steps-below { grid-template-columns: 1fr; gap: 28px; }
  .how-panel .how-right-steps .step p { white-space: normal; }
  .how-interface-banner h3 { white-space: normal; }
}