/* ============================================================================
   Phoenix Trader Funding · public site · VAPOR design system
   Translated from the approved email system: light warm paper, vapor color
   fields, halftone dot grids, dotted orbit rings, huge Albert Sans display
   type with a red orb period, cream cards, ink pill CTAs.
   Palette: ink #191411 · red #e8431f · maroon #9d403e · amber #f2a33c ·
   gold #e8b24a · paper #f2efec · cream #fbf5ef/#f8efe6 · line #f0e6dc
   ========================================================================== */

:root {
  --paper: #f2efec;
  --card: #ffffff;
  --cream: #fbf5ef;
  --cream2: #f8efe6;
  --line: #f0e6dc;
  --line-soft: #e6ddd3;
  --ink: #191411;
  --ink2: #57504a;
  --ink3: #7c7168;
  --mut: #8d817a;
  --faint: #a2968d;
  --red: #e8431f;
  --red-deep: #b93214;
  --maroon: #9d403e;
  --amber: #f2a33c;
  --gold: #e8b24a;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --shadow-card: 0 14px 44px rgba(60, 44, 32, 0.10);
  --shadow-soft: 0 6px 18px rgba(60, 44, 32, 0.07);
  --font: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink2);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--red); text-decoration: none; }
b, strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.wrap--narrow { max-width: 960px; }
section { position: relative; padding: 112px 0; }
section.on-white { background: #fcfbf9; }
.seam { border: 0; border-top: 2px dotted var(--line-soft); margin: 0; }

/* ------------------------------------------------------------- ambient */
.vapor-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vapor-field .v { position: absolute; border-radius: 50%; filter: blur(110px); }
.vapor-field .v1 { width: 880px; height: 640px; left: -220px; top: -260px; background: rgba(242, 163, 60, 0.22); }
.vapor-field .v2 { width: 960px; height: 720px; right: -300px; top: 40px; background: rgba(232, 67, 31, 0.14); }
.vapor-field .v3 { width: 640px; height: 520px; left: 26%; bottom: -280px; background: rgba(157, 64, 62, 0.11); }
.vapor-field .v4 { width: 480px; height: 420px; right: 12%; bottom: -200px; background: rgba(242, 163, 60, 0.15); }
.dots-layer { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(25, 20, 17, 0.16) 1.6px, transparent 1.7px);
  background-size: 19px 19px;
  -webkit-mask-image: linear-gradient(118deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 36%, transparent 62%);
          mask-image: linear-gradient(118deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 36%, transparent 62%);
}
.dots-layer--red {
  background-image: radial-gradient(circle, rgba(232, 67, 31, 0.34) 2.1px, transparent 2.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(closest-side at 85% 80%, rgba(0,0,0,0.8), transparent 72%);
          mask-image: radial-gradient(closest-side at 85% 80%, rgba(0,0,0,0.8), transparent 72%);
}
.dotring { position: absolute; border-radius: 50%; pointer-events: none; }
.dotring--maroon { border: 2.5px dotted rgba(157, 64, 62, 0.30); }
.dotring--amber { border: 2px dotted rgba(242, 163, 60, 0.38); }
.orb { display: inline-block; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff7847, var(--red) 62%, var(--red-deep));
  box-shadow: 0 8px 24px rgba(232, 67, 31, 0.40); }

/* ------------------------------------------------------------ typography */
.kicker { font-size: 13.5px; font-weight: 600; letter-spacing: 7px; text-transform: uppercase; color: var(--maroon); }
.display { font-weight: 800; color: var(--ink); letter-spacing: -0.035em; line-height: 1.02; }
.display .orb { width: 0.16em; height: 0.16em; margin-left: 0.06em; }
h1.display { font-size: clamp(48px, 7.6vw, 106px); line-height: 0.99; letter-spacing: -0.042em; }
h2.display { font-size: clamp(34px, 5vw, 64px); }
h3.display { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; }
.lede { font-size: clamp(17px, 1.6vw, 21px); font-weight: 300; color: var(--ink3); line-height: 1.65; }
.lede b { font-weight: 600; }
.section-head { max-width: 820px; margin-bottom: 64px; }
.section-head .kicker { display: block; margin-bottom: 18px; }
.section-head .lede { margin-top: 18px; }

/* -------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font);
  font-size: 16px; font-weight: 600; letter-spacing: 0.3px; border-radius: 999px; white-space: nowrap;
  padding: 18px 40px; cursor: pointer; border: 0; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.nav__signin { white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; }
.btn--ink { background: var(--ink); color: #fff; box-shadow: 0 10px 26px rgba(25, 20, 17, 0.24); }
.btn--ink:hover { box-shadow: 0 16px 34px rgba(25, 20, 17, 0.3); }
.btn--red { background: var(--red); color: #fff; box-shadow: 0 10px 26px rgba(232, 67, 31, 0.35); }
.btn--red .dot { background: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-soft); box-shadow: none; }
.btn--sm { padding: 12px 24px; font-size: 14.5px; }
.chip-dotted { display: inline-block; border: 1.5px dotted var(--red); border-radius: 999px;
  padding: 9px 20px; font-size: 13px; font-weight: 600; letter-spacing: 3px; color: var(--red); text-transform: uppercase; }

/* ---------------------------------------------------------------- cards */
.card { background: var(--card); border: 1px solid #f5ede5; border-radius: 26px; box-shadow: 0 18px 48px rgba(60, 44, 32, 0.11); }
.cream-card { background: linear-gradient(150deg, #fdf9f4 0%, var(--cream2) 100%);
  border: 1px solid var(--line); border-radius: var(--r-md); }
.stat-card { padding: 26px 28px 22px; }
.stat-card .stat { font-size: 38px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: var(--red); }
.stat-card .stat small { font-size: 22px; font-weight: 300; color: #b3a89f; letter-spacing: 0; }
.stat-card .stat.is-maroon { color: var(--maroon); }
.stat-card .label { font-size: 11px; font-weight: 600; letter-spacing: 3px; color: var(--mut); text-transform: uppercase; padding: 12px 0 6px; }
.stat-card .line { font-size: 14px; font-weight: 300; color: var(--ink3); line-height: 1.55; }
.band { display: flex; align-items: center; gap: 16px; padding: 18px 24px;
  background: linear-gradient(120deg, #fdf9f4 0%, var(--cream2) 100%);
  border: 1px solid var(--line); border-radius: var(--r-md); }
.band img { flex: none; }
.band .orb { width: 12px; height: 12px; margin-left: auto; flex: none; }

/* --------------------------------------------------------------- tables */
.table-vapor { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.table-vapor th { font-size: 11.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--mut); text-align: left; padding: 14px 18px; border-bottom: 2px dotted var(--line-soft); }
.table-vapor td { padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--ink2); }
.table-vapor tr:last-child td { border-bottom: 0; }
.table-vapor .num { font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: #fffdfb; }
.tick { color: var(--red); font-weight: 800; }
.cross { color: #c9beb4; font-weight: 600; }

/* ============================================================= sections */

/* promo bar */
.promo-bar { background: var(--ink); color: #efe4dc; font-size: 14px; position: relative; z-index: 60; }
.promo-bar .wrap { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding-top: 11px; padding-bottom: 11px; }
.promo-bar b { color: #fff; font-weight: 600; }
.promo-bar .chip-dotted { border-color: var(--amber); color: var(--amber); padding: 4px 14px; font-size: 12px; }
.promo-bar .count { font-variant-numeric: tabular-nums; color: var(--amber); font-weight: 600; letter-spacing: 1px; }

/* navbar: NOT sticky (scrolls away); the promo bar below it is the sticky element */
.nav { position: relative; z-index: 80; background: #fcfbf9; border-bottom: 1px solid var(--line); /* above the sticky promo pill so open menus cover it */
  display: flex; align-items: center; gap: 34px; padding: 14px max(28px, calc((100vw - 1200px) / 2)); }
.nav .wrap { display: flex; align-items: center; gap: 34px; flex: 1; padding: 0; }
.nav__logo img, .nav__brand img { height: 40px; display: block; }
/* brand lockup: ink at rest, colored on hover */
.nav__brand { position: relative; display: block; }
.nav__brand .brand-color { position: absolute; inset: 0; opacity: 0; transition: opacity 0.22s ease; }
.nav__brand .brand-ink { transition: opacity 0.22s ease; }
.nav__brand:hover .brand-color, .nav__brand:focus-visible .brand-color { opacity: 1; }
.nav__brand:hover .brand-ink, .nav__brand:focus-visible .brand-ink { opacity: 0; }
.nav__links { display: flex; gap: 26px; margin-left: 8px; }
.nav__links a { color: var(--ink2); font-weight: 500; font-size: 15.5px; }
.nav__links a:hover { color: var(--ink); }
.nav__cta, .nav__actions { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.nav__signin { color: var(--ink); font-weight: 600; font-size: 15px; }

/* navbar mega menus: same elements as the My Account chrome, vapor light skin */
.nav__links { align-items: center; gap: 4px; }
.sn__item { position: relative; }
.sn__link {
  display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 13px; border-radius: 10px;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 15.5px; font-weight: 500;
  color: var(--ink2); transition: background 0.16s ease, color 0.16s ease;
}
.sn__link svg { transition: transform 0.2s ease; }
.sn__item:hover .sn__link, .sn__item.is-open .sn__link { background: var(--cream2); color: var(--ink); }
.sn__item.is-open .sn__link svg { transform: rotate(180deg); }
.sn__menu {
  position: absolute; top: calc(100% + 12px); left: 0; min-width: 320px; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(60, 44, 32, 0.28), 0 4px 14px rgba(60, 44, 32, 0.08);
  opacity: 0; transform: translateY(8px) scale(0.98); transform-origin: top left; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease; z-index: 70;
}
.sn__item.is-open .sn__menu { opacity: 1; transform: none; pointer-events: auto; }
.sn__menu--accounts { display: grid; gap: 10px; width: 360px; }
.snacc-img { display: block; padding: 0; border-radius: 12px; overflow: hidden; line-height: 0; transition: box-shadow 0.18s ease, transform 0.18s ease; }
.snacc-img img { display: block; width: 100%; height: auto; }
.snacc-img--classic { --sn-hover: #ff5b2e; }
.snacc-img--spark { --sn-hover: #9b8cff; }
.snacc-img--merit { --sn-hover: #d9cfc4; }
.snacc-img:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--sn-hover), 0 14px 34px -12px var(--sn-hover); }
.sn__menu--eco { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 30px; width: auto; padding: 16px; }
.sn__sec { display: flex; flex-direction: column; gap: 2px; padding: 0; } /* beat the global section padding */
.sn__grid { display: grid; grid-template-columns: 236px; gap: 2px; }
.sn__coltitle { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--maroon); font-weight: 700; padding: 4px 12px; margin: 0; }
.sn__menu a:not(.snacc-img) { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; transition: background 0.14s ease; }
.sn__menu a:not(.snacc-img):hover { background: var(--cream); }
.sn__menuico { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; border-radius: 8px; background: var(--cream2); padding: 5px; }
.sn__menuico--ink { background: var(--ink); } /* white-on-transparent logos (Press) need the dark chip */
.sn__menu a:not(.snacc-img) span:not(.sn__resico) { display: flex; flex-direction: column; min-width: 0; }
.sn__menu b { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.sn__menu small { display: block; font-size: 11.5px; color: var(--ink3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn__menu--res { width: auto; padding: 8px; }
.sn__resgrid { display: grid; grid-template-columns: repeat(2, minmax(184px, 1fr)); gap: 0 12px; }
.sn__resico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: grid; place-items: center; background: var(--cream2); color: var(--ink2); }
.sn__resico svg { width: 17px; height: 17px; }
.sn__menu--res a:hover .sn__resico { color: var(--red); }
@media (max-width: 720px) { .sn__menu--eco { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sn__resgrid { grid-template-columns: 1fr; } }
/* right-side chrome: language selector + search */
.sn__menu--right { left: auto; right: 0; transform-origin: top right; }
.sn__flag { width: 22px; height: auto; border-radius: 3px; display: block; box-shadow: 0 0 0 1px rgba(25, 20, 17, 0.08); }
.sn__langcode { font-weight: 600; letter-spacing: 0.02em; }
.sn__menu--lang { min-width: 132px; padding: 8px; }
.sn__menu--search { min-width: 330px; padding: 12px; }
.sn__searchform { display: flex; gap: 8px; }
.sn__searchform input { flex: 1; min-width: 0; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 14px; color: var(--ink); }
.sn__searchform input:focus { outline: 2px solid rgba(232, 67, 31, 0.35); outline-offset: 1px; }
/* footer: social icons, provider link, accepted-countries flag card (all pages) */
.footer__social a img { width: 19px; height: 19px; object-fit: contain; display: block; }
.footer small { display: block; margin-top: 10px; }
.footer small a { color: var(--maroon); font-weight: 600; }
.footer__countries { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 46px; padding: 24px 30px; border-radius: 20px; border: 1px dotted #c9beb4; background: linear-gradient(120deg, #fdf9f4, #f8efe6); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.footer__countries:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(60, 44, 32, 0.14); }
.footer__countries .fc-flags { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; flex: 1 1 380px; }
.footer__countries .fc-flags img { height: 21px; width: auto; border-radius: 4px; box-shadow: 0 1px 4px rgba(60, 44, 32, 0.22); }
.footer__countries .fc-text { font-size: 15px; color: var(--ink2); font-weight: 300; white-space: nowrap; }
.footer__countries .fc-text b { color: var(--ink); font-weight: 700; margin-right: 6px; }
.footer__countries .fc-arrow { color: var(--red); font-weight: 800; margin-left: 4px; }

/* footer brand lockup: ink at rest, colored on hover */
.brandswap { position: relative; display: inline-block; }
.brandswap .brand-ink { display: block; transition: opacity 0.22s ease; }
.brandswap .brand-color { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.22s ease; }
.brandswap:hover .brand-color { opacity: 1; }
.brandswap:hover .brand-ink { opacity: 0; }

/* hero */
.hero { padding: 128px 0 104px; overflow: hidden; background: #fcfbf9; }
.hero .kicker { display: block; margin-bottom: 22px; }
.hero .lede { max-width: 640px; margin-top: 26px; }
.hero__cta { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; align-items: center; }
.hero__trust { display: flex; gap: 34px; margin-top: 64px; flex-wrap: wrap; align-items: center; }
.trust-item { font-size: 14px; color: var(--ink3); font-weight: 300; }
.trust-item b { display: block; font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -0.5px; }
.trust-item .stars { color: var(--amber); letter-spacing: 2px; font-size: 15px; }
a.trust-item--link { display: block; color: var(--ink3); transition: transform 0.2s ease; }
a.trust-item--link:hover { transform: translateY(-2px); }
.trust-item .ps-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.trust-item .ps-logo img { height: 23px; width: auto; display: block; }
.marquee__track img.pay { height: 18px; width: auto; display: inline-block; }

/* inline tool logo chip (ecosystem mentions) */
.tool-inline { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px 3px 5px;
  font-weight: 600; color: var(--ink); font-size: 0.82em; box-shadow: var(--shadow-soft); }
.tool-inline img { height: 1.5em; width: auto; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; counter-reset: step; }
.step-card p { padding-right: 72px; } /* keep copy clear of the ghost numeral */
.step-card { position: relative; padding: 38px 36px 34px; overflow: hidden;
  background: linear-gradient(150deg, #fdf9f4 0%, var(--cream2) 100%); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.step-card .step-n { font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: -4px;
  color: transparent; -webkit-text-stroke: 1.5px rgba(157, 64, 62, 0.35); position: absolute; top: 22px; right: 26px; }
.step-card h3 { margin-bottom: 12px; }
.step-card p { font-size: 15.5px; color: var(--ink3); font-weight: 300; }
.step-card p + p { margin-top: 10px; }

/* pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.price-card { position: relative; padding: 34px 30px 30px; }
.price-card.is-featured { border: 1.5px dotted var(--red); box-shadow: 0 22px 60px rgba(157, 64, 62, 0.16); }
.price-card .badge { position: absolute; top: -13px; left: 30px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px; padding: 5px 14px; border-radius: 999px; }
.price-card .tier { font-size: 13px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--maroon); }
.price-card .amount { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 2px; }
.price-card .amount b { font-size: 46px; font-weight: 800; letter-spacing: -2px; color: var(--ink); }
.price-card .amount span { font-size: 15px; font-weight: 300; color: var(--mut); }
.price-card .balance { font-size: 14.5px; color: var(--ink3); margin-bottom: 20px; }
.spec { list-style: none; font-size: 14.5px; }
.spec li { display: flex; justify-content: space-between; gap: 14px; padding: 8.5px 0; border-bottom: 1px solid var(--line); }
.spec li:last-child { border-bottom: 0; }
.spec .k { color: var(--ink3); font-weight: 300; }
.spec .v { color: var(--ink); font-weight: 600; text-align: right; white-space: nowrap; }
.spec .v.num { font-variant-numeric: tabular-nums; }
.price-card .btn { width: 100%; justify-content: center; margin-top: 22px; }
.spec-group { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mut); padding: 16px 0 6px; }

/* segmented control (account categories) */
.segments { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px; gap: 4px; position: relative; }
.segments .seg-glider { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--ink);
  box-shadow: 0 6px 16px rgba(25, 20, 17, 0.22); transition: left 0.42s cubic-bezier(0.3, 0.72, 0.2, 1), width 0.42s cubic-bezier(0.3, 0.72, 0.2, 1); }
.segments button, .segments a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); border: 0; background: transparent; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; color: var(--ink3); padding: 10px 22px; cursor: pointer; position: relative; z-index: 1;
  transition: color 0.25s ease; }
.segments button:hover, .segments a:hover { color: var(--ink); }
.segments button.is-active, .segments a.is-active { color: #fff; }
/* no-JS fallback: without the glider element, the active pill still reads */
.segments:not(:has(.seg-glider)) .is-active { background: var(--ink); }
.segments .seg-ico { height: 15px; width: auto; display: block; }
.segments .seg-ico--ink { filter: brightness(0.2); } /* merit mark ships white; darken it on the light tab */
.segments .is-active .seg-ico--ink { filter: none; }

/* ecosystem strip */
.eco-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.eco-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 26px 14px 20px; }
.eco-tile img { height: 46px; width: auto; }
.eco-tile.is-dark-art img { background: var(--ink); border-radius: 12px; padding: 8px; height: 48px; }
.eco-tile span { font-size: 11.5px; font-weight: 700; letter-spacing: 2.5px; color: var(--ink2); text-transform: uppercase; }

/* tool feature cards: chip + cat + title in the head row, everything else full width.
   Placement is explicit so flat child order (chip, cat, h3, p, ul, a) always lays out right. */
.tool-card { display: grid; grid-template-columns: 84px 1fr; grid-auto-rows: auto;
  column-gap: 24px; row-gap: 6px; padding: 34px; align-items: center; align-content: start; }
.tool-card .logo-chip { grid-column: 1; grid-row: 1 / span 2; width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); }
.tool-card .logo-chip img { height: 52px; width: auto; }
.tool-card .logo-chip.is-dark { background: var(--ink); }
.tool-card .cat { grid-column: 2; align-self: end; font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--red); text-transform: uppercase; }
.tool-card h3 { grid-column: 2; align-self: start; margin: 2px 0 0; }
.tool-card p { grid-column: 1 / -1; font-size: 15px; font-weight: 300; color: var(--ink3); margin-top: 14px; }
.tool-card ul { grid-column: 1 / -1; list-style: none; margin-top: 8px; font-size: 14.5px; color: var(--ink2); }
.tool-card ul li { padding: 5px 0 5px 22px; position: relative; }
.tool-card ul li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff7847, var(--red) 62%, var(--red-deep)); }
.tool-card .btn { grid-column: 1 / -1; justify-self: start; margin-top: 16px; }

/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote-card { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.quote-card .who { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.quote-card .who b { font-size: 16px; }
.quote-card .who span { font-size: 13px; font-weight: 600; color: var(--red); font-variant-numeric: tabular-nums; }
.quote-card p { font-size: 14.5px; font-weight: 300; color: var(--ink3); line-height: 1.65; }
.quote-card .stars { color: var(--amber); letter-spacing: 2px; font-size: 14px; }

/* community tiles */
.community { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.community .stat-card .stat { font-size: 46px; }

/* newsletter + final cta */
.newsletter-card { padding: 46px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.newsletter-card form { display: flex; gap: 10px; }
.newsletter-card input[type="email"] { flex: 1; font-family: var(--font); font-size: 15px; padding: 15px 20px;
  border: 1.5px solid var(--line-soft); border-radius: 999px; background: #fff; color: var(--ink); outline: none; }
.newsletter-card input[type="email"]:focus { border-color: var(--amber); }
.newsletter-card .consent { font-size: 11.5px; color: var(--faint); font-weight: 300; line-height: 1.5; margin-top: 14px; display: flex; gap: 8px; }
.final-cta { text-align: center; padding: 120px 0; overflow: hidden; }
.final-cta .lede { margin: 22px auto 36px; max-width: 560px; }

/* footer */
.footer { background: #fcfbf9; border-top: 2px dotted var(--line-soft); padding: 70px 0 40px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 46px; }
.footer h4 { font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--maroon); margin-bottom: 16px; }
.footer ul { list-style: none; }
.footer ul li { padding: 4px 0; }
.footer ul a { color: var(--ink3); font-weight: 300; font-size: 14.5px; }
.footer ul a:hover { color: var(--red); }
.footer__social { display: flex; gap: 12px; flex-wrap: wrap; }
.footer__social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center; color: var(--ink2); font-size: 13px; font-weight: 700; }
.footer__social a:hover { border-color: var(--red); color: var(--red); }
.disclaimers { border-top: 1px solid var(--line); padding-top: 30px; }
.disclaimers h5 { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--mut); margin: 18px 0 6px; }
.disclaimers p { font-size: 11.5px; font-weight: 300; color: var(--faint); line-height: 1.65; }
.copyright { text-align: center; font-size: 12.5px; color: var(--faint); padding-top: 34px; font-weight: 300; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1020px) {
  .steps, .quotes, .community { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .eco-strip { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .newsletter-card { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  section { padding: 64px 0; }
  .steps, .quotes, .community { grid-template-columns: 1fr; }
  .eco-strip { grid-template-columns: repeat(2, 1fr); }
  .nav__links { display: none; }
  .tool-card { grid-template-columns: 1fr; }
  .hero { padding: 70px 0 60px; }
  .hero__trust { gap: 22px; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================== modernity layer ============================== */

/* ambient motion */
@keyframes vdrift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(44px,-28px) scale(1.06); } 100% { transform: translate(-30px,22px) scale(0.97); } }
.vapor-field .v { animation: vdrift 24s ease-in-out infinite alternate; }
.vapor-field .v2 { animation-duration: 30s; animation-delay: -8s; }
.vapor-field .v3 { animation-duration: 36s; animation-delay: -16s; }
@keyframes ofloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.orb--float { animation: ofloat 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .vapor-field .v, .orb--float, .marquee__track { animation: none !important; } }

/* gradient highlight word */
.grad { background: linear-gradient(100deg, var(--red), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }

/* floating promo pill: below the navbar, sticky, NO band of its own.
   The wrapper is fully transparent and the hero is pulled up behind it (via
   the inline script), so only the orange pill is visible, floating on the
   hero background at rest and over the content when stuck. */
.promo-pill { padding: 0 16px; position: sticky; top: 10px; z-index: 60;
  background: transparent; pointer-events: none; }
.promo-pill__inner { pointer-events: auto; }
.promo-pill__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(115deg, #f2591f 0%, var(--red) 45%, #c73414 100%); color: #fff;
  border-radius: 18px; padding: 15px 24px; box-shadow: 0 16px 40px rgba(232, 67, 31, 0.33); }
.promo-pill__inner b { color: #fff; font-size: 17px; font-weight: 700; letter-spacing: 0.1px; }
.promo-pill__inner .chip-dotted { border-color: rgba(255, 255, 255, 0.9); color: #fff; padding: 6px 16px; }
.promo-pill__inner .pp-note { font-size: 13.5px; font-weight: 400; color: rgba(255, 245, 238, 0.9); }
.promo-pill__inner .count { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: #ffe1b0; letter-spacing: 1px; }
.promo-pill__inner .x { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; opacity: 0.85; }
.promo-pill__inner .x:hover { opacity: 1; }

/* marquee strip */
.marquee { overflow: hidden; border-top: 2px dotted var(--line-soft); border-bottom: 2px dotted var(--line-soft); background: #fcfbf9; padding: 20px 0; }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: marq 34s linear infinite;
  font-weight: 600; color: var(--ink2); font-size: 15.5px; letter-spacing: 0.4px; }
.marquee__track span { display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; }
.marquee__track .orb { width: 8px; height: 8px; flex: none; }
@keyframes marq { to { transform: translateX(-50%); } }

/* stepper rail: auto-advances 1-4, the line fills, the live card lights up */
.flow-rail { display: flex; align-items: center; margin: 0 0 48px; max-width: 760px; }
.flow-rail .fdot { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px dotted var(--maroon);
  color: var(--maroon); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex: none;
  cursor: pointer; font-family: var(--font); padding: 0;
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, transform 0.25s ease; }
.flow-rail .fdot:hover { transform: scale(1.15); box-shadow: 0 8px 20px rgba(157, 64, 62, 0.28); }
.flow-rail .fdot:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.flow-rail .fdot.is-hot { background: radial-gradient(circle at 34% 30%, #ff7847, var(--red) 66%, var(--red-deep));
  border-color: transparent; color: #fff; box-shadow: 0 10px 24px rgba(232, 67, 31, 0.4); }
.flow-rail .fdot.is-done { border-style: solid; border-color: var(--red); color: var(--red); }
.flow-rail .fline { flex: 1; border-top: 2px dotted var(--line-soft); margin: 0 10px; position: relative; }
.flow-rail .fline::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--amber)); transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.flow-rail .fline.is-fill::before { transform: scaleX(1); }
#how .step-card { transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; }
#how .step-card.is-live { border-color: rgba(232, 67, 31, 0.5); transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(157, 64, 62, 0.18); }

/* ecosystem constellation treatment */
.eco-strip { position: relative; padding: 30px 0 44px; }
.eco-strip::before { content: ""; position: absolute; inset: -30px -30px;
  background-image: radial-gradient(circle, rgba(157, 64, 62, 0.14) 1.4px, transparent 1.5px);
  background-size: 23px 23px; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side at 50% 46%, rgba(0,0,0,0.9), transparent 96%);
          mask-image: radial-gradient(closest-side at 50% 46%, rgba(0,0,0,0.9), transparent 96%); }
.eco-tile { position: relative; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; }
.eco-tile:nth-child(even) { transform: translateY(30px); }
.eco-tile img { height: 54px; }
.eco-tile::after { content: ""; position: absolute; inset: 7px; border-radius: 18px; border: 1.5px dotted transparent; transition: border-color 0.28s ease; pointer-events: none; }
.eco-tile:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0 26px 56px rgba(157, 64, 62, 0.22); border-color: rgba(232, 67, 31, 0.35); }
.eco-tile:nth-child(even):hover { transform: translateY(20px) scale(1.05); }
.eco-tile:hover::after { border-color: rgba(232, 67, 31, 0.45); }
@media (max-width: 680px) { .eco-tile:nth-child(even), .eco-tile:nth-child(even):hover { transform: none; } }

/* benefits bento: Live funding as a full-width banner, three cards under it */
#eco-benefits { grid-template-columns: repeat(3, 1fr) !important; }
#eco-benefits .stat-card:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 30px;
  background: linear-gradient(150deg, #fdf9f4 0%, #f8efe6 100%); padding: 30px 34px; }
#eco-benefits .stat-card:first-child .stat { font-size: 56px; flex: none; }
#eco-benefits .stat-card:first-child .label { padding: 0; flex: none; }
#eco-benefits .stat-card:first-child .line { font-size: 15.5px; margin-left: auto; text-align: right; max-width: 46%; }
@media (max-width: 680px) { #eco-benefits { grid-template-columns: 1fr !important; }
  #eco-benefits .stat-card:first-child { flex-direction: column; align-items: flex-start; gap: 8px; }
  #eco-benefits .stat-card:first-child .line { margin-left: 0; text-align: left; max-width: none; } }

/* dark reels band */
.dark-band { background: #171210; color: #efe4dc; position: relative; overflow: hidden; }
.dark-band .kicker { color: var(--amber); }
.dark-band .display { color: #fff; }
.dark-band .lede { color: #b7a99e; }
.dark-band .vapor-field .v1 { background: rgba(232, 67, 31, 0.16); }
.dark-band .vapor-field .v2 { background: rgba(242, 163, 60, 0.12); }
.dark-band .vapor-field .v3 { background: rgba(157, 64, 62, 0.18); }
.dark-band .dots-layer { background-image: radial-gradient(circle, rgba(242, 163, 60, 0.2) 1.5px, transparent 1.6px); }
.reels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 56px; }
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden;
  background: linear-gradient(165deg, #2c211b 0%, #1d1512 55%, #26100a 100%);
  border: 1px solid rgba(242, 163, 60, 0.16); display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px; cursor: pointer; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; }
.reel:hover { transform: translateY(-10px); box-shadow: 0 28px 60px rgba(232, 67, 31, 0.28); border-color: rgba(232, 67, 31, 0.4); }
.reel .ghost { position: absolute; top: 2px; left: 10px; font-weight: 800; font-size: 110px; letter-spacing: -6px; line-height: 1; color: rgba(255, 255, 255, 0.05); }
.reel .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff7847, var(--red) 66%, var(--red-deep));
  box-shadow: 0 14px 32px rgba(232, 67, 31, 0.5); display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease; }
.reel:hover .play { transform: translate(-50%, -50%) scale(1.12); }
.reel .play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.reel b { color: #fff; font-size: 15px; position: relative; z-index: 1; }
.reel .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; position: relative; z-index: 1; }
.reel .paid { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; color: var(--amber); text-transform: uppercase; }
.reel .cc { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; background: rgba(255, 255, 255, 0.13); color: #fff; border-radius: 6px; padding: 3px 8px; }
@media (max-width: 1020px) { .reels { grid-template-columns: repeat(3, 1fr); } .reels .reel:nth-child(n+4) { display: none; } }
@media (max-width: 680px) { .reels { grid-template-columns: repeat(2, 1fr); } .reels .reel:nth-child(3) { display: flex; } .reels .reel:nth-child(n+4) { display: none; } }

/* ---- pricing section (shared: home.html + evaluations.html) ---- */
#pricing{position:relative;overflow:hidden}
#pricing .pricing-hook b{color:#191411;font-weight:700}
#pricing .pricing-hook a{color:#9d403e;font-weight:700;text-decoration:underline;text-underline-offset:3px}
#pricing .seg-sub{margin:20px 0 0;font-size:15.5px;color:#57504a;font-weight:300;max-width:720px;min-height:24px}
#pricing .pricing-grid{margin-top:48px}
#pricing .acct-panes{transition:height .45s cubic-bezier(.33,.75,.25,1)}
#pricing .acct-pane{opacity:0;transform:translateY(18px) scale(.992);transition:opacity .34s cubic-bezier(.33,.75,.25,1),transform .34s cubic-bezier(.33,.75,.25,1)}
#pricing .acct-pane.is-live{opacity:1;transform:none}
#pricing .acct-pane[hidden]{display:none}
#pricing .pricing-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:830px;margin-left:auto;margin-right:auto}
#pricing .pricing-grid--1{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
@media (max-width:1020px){#pricing .pricing-grid{margin:48px auto 0}}
@media (max-width:860px){#pricing .pricing-grid--2{grid-template-columns:1fr;max-width:560px}}
#pricing .price-card .btn{width:100%;justify-content:center;margin-top:18px}
#pricing .price-card .deal{display:flex;align-items:center;gap:9px;margin:2px 0 10px}
#pricing .price-card .deal .off{background:#e8431f;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:8px}
#pricing .price-card .deal .code{font-size:12px;font-weight:700;letter-spacing:.14em;color:#9d403e;border:1px dotted #9d403e;border-radius:999px;padding:3px 11px}
#pricing .price-card .amount .was{font-size:19px;font-weight:600;color:#a2968d;text-decoration-color:#e8431f;margin-right:9px}
#pricing .price-card details{margin-top:14px;padding-top:12px;border-top:1px dotted rgba(25,20,17,.25)}
#pricing .price-card details summary{cursor:pointer;font-size:13px;font-weight:700;color:#9d403e;letter-spacing:.02em;list-style:none;display:flex;align-items:center;gap:8px}
#pricing .price-card details summary::-webkit-details-marker{display:none}
#pricing .price-card details summary::before{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;transition:transform .25s ease;flex:none}
#pricing .price-card details.is-open summary::before{transform:rotate(90deg)}
#pricing .price-card details .spec{overflow:hidden;transition:height .3s ease,opacity .3s ease}