/*
 * ─── THE FEATURE PAGES (round 8, 8a; round 8.3, 8): earnit.ng/data and the seven beside it ───
 *
 * One stylesheet for the eight pages, hand written, no framework, in today's
 * landing page's design (landing/index.html): the soft green ground with a
 * glow at the top and a faint dot grid, the glass bar, a pill above every
 * heading with the heading's last words in EarnIT green (solid, never a
 * gradient on text), the website's one header and footer (the shared block), glass cards on green hairlines, green fill buttons,
 * black store badges, numbered step tiles in green, blue and amber, and the
 * glass call to action at the foot. One look (round 8's Clean and Signature
 * are gone), light and dark (html.dark, from the app's earnit_theme cookie or
 * the device). The landing page's own greys for small words read below
 * 4.5:1, so these use its stronger ink (70%) and the deeper greens for small
 * green words and white-on-green fills: every pair here reads at 4.5:1 or
 * better (3:1 only for text 24px and up), measured from pixels by
 * e2e/feature-pages.mjs.
 */

/* Inter and its fallback (sized to Inter, so the swap when the font lands does not move the page) are the faces in
   the shared block at the end: from our own server, not Google (round 8.1, 16). */

:root {
  --font: 'Inter', 'Inter Fallback', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --page: #f9faf8;
  --alt: linear-gradient(180deg, #ffffff 0%, #f3f6f3 50%, #ffffff 100%);
  --ink: #0d1f15;
  --soft: rgba(13, 31, 21, 0.7);
  --hair: rgba(2, 159, 73, 0.15);
  --hair-strong: rgba(2, 159, 73, 0.45);
  --green: #029f49;
  --green-text: #017a38;
  --accent: #02944a;
  --glass: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.85));
  --glass-shadow: 0 2px 14px rgba(13, 31, 21, 0.04);
  --glass-lift: 0 16px 40px rgba(2, 159, 73, 0.14), 0 0 0 1px rgba(2, 159, 73, 0.18);
  --chip: rgba(255, 255, 255, 0.92);
  --chip-line: rgba(2, 159, 73, 0.18);
  --chip-shadow: 0 12px 30px rgba(13, 31, 21, 0.08);
  --ghost: rgba(2, 159, 73, 0.05);
  --ghost-line: rgba(2, 159, 73, 0.2);
  --tint: rgba(2, 159, 73, 0.06);
  --dots: rgba(13, 31, 21, 0.07);
  --hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(2, 159, 73, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 40%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 15% 60%, rgba(0, 163, 125, 0.05) 0%, transparent 55%), #f9faf8;
  --halo: radial-gradient(closest-side, rgba(2, 159, 73, 0.22), rgba(2, 159, 73, 0));
  --n-green: #016b31; --n-green-bg: rgba(2, 159, 73, 0.14); --n-green-line: rgba(2, 159, 73, 0.3);
  --n-blue: #1d4ed8; --n-blue-bg: rgba(59, 130, 246, 0.14); --n-blue-line: rgba(59, 130, 246, 0.3);
  --n-amber: #92400e; --n-amber-bg: rgba(245, 158, 11, 0.16); --n-amber-line: rgba(245, 158, 11, 0.34);
  --shadow-phone: 0 30px 60px -20px rgba(2, 30, 18, 0.35), 0 12px 24px -12px rgba(2, 30, 18, 0.25);
}

/* Dark: the landing page's near black, its glass, never pure white words. */
html.dark {
  --page: #0d0d0d;
  --alt: linear-gradient(180deg, #0e0e0f 0%, #131314 50%, #0e0e0f 100%);
  --ink: #f3f6f4;
  --soft: rgba(243, 246, 244, 0.7);
  --hair: rgba(255, 255, 255, 0.09);
  --hair-strong: rgba(2, 159, 73, 0.5);
  --green-text: #2fbf6b;
  --accent: #2fbf6b;
  --glass: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-lift: 0 16px 40px rgba(2, 159, 73, 0.16), 0 0 0 1px rgba(2, 159, 73, 0.2);
  --chip: rgba(20, 22, 26, 0.82);
  --chip-line: rgba(255, 255, 255, 0.1);
  --chip-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  --ghost: rgba(255, 255, 255, 0.05);
  --ghost-line: rgba(255, 255, 255, 0.14);
  --tint: rgba(255, 255, 255, 0.04);
  --dots: rgba(255, 255, 255, 0.06);
  --hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(2, 159, 73, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 40%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 15% 60%, rgba(0, 212, 160, 0.06) 0%, transparent 55%), #0a0a0b;
  --halo: radial-gradient(closest-side, rgba(2, 159, 73, 0.32), rgba(2, 159, 73, 0));
  --n-green: #3fcf7f; --n-green-bg: rgba(2, 159, 73, 0.2);
  --n-blue: #7cb3fb; --n-blue-bg: rgba(59, 130, 246, 0.2);
  --n-amber: #fbbf24; --n-amber-bg: rgba(245, 158, 11, 0.18);
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid #029f49; outline-offset: 3px; border-radius: 8px; }

.fp-wrap { width: 100%; max-width: 1376px; margin: 0 auto; padding: 0 24px; }
.fp-wrap--narrow { max-width: 944px; }
@media (min-width: 1024px) { .fp-wrap { padding: 0 48px; } }

.fp-skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: #027a38; color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.fp-skip:focus { top: 12px; }

.fp-ico { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ─── Icon tiles: the app's coloured tiles, white glyph ─── */
.fp-tile {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--t1), var(--t2));
  color: #fff; font-size: 21px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.fp-tile--vault {
  background: radial-gradient(60% 55% at 15% 20%, rgba(206, 174, 64, 0.32) 0%, transparent 60%), radial-gradient(55% 55% at 85% 80%, rgba(206, 174, 64, 0.2) 0%, transparent 62%), linear-gradient(#0b1210, #16211c);
  color: #e3c25a; box-shadow: inset 0 0 0 1px rgba(206, 174, 64, 0.3);
}
.fp-tile--sm { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
.fp-tile--xs { width: 28px; height: 28px; border-radius: 9px; font-size: 13px; }

/* ─── Buttons: the landing page's green fill (deep enough for white words) and its ghost ─── */
.fp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 12px;
  font: 600 16px/1.2 var(--font); text-decoration: none; white-space: nowrap;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.fp-btn:active { transform: scale(0.98); }
.fp-btn--primary {
  color: #fff; border: 1px solid rgba(2, 159, 73, 0.5);
  background: linear-gradient(135deg, #027f3b 0%, #027a38 50%, #016b31 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px rgba(2, 159, 73, 0.25);
}
.fp-btn--primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 32px rgba(2, 159, 73, 0.4); }
.fp-btn--ghost { color: var(--ink); background: var(--ghost); border: 1px solid var(--ghost-line); }
.fp-btn--ghost:hover { transform: translateY(-2px); border-color: var(--hair-strong); }
.fp-btn--small { min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 15px; gap: 8px; }
.fp-ico--btn { font-size: 13px; }

/* ─── Store badges: black, as on the landing page ─── */
.fp-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.fp-store {
  display: inline-flex; align-items: center; gap: 11px; min-height: 52px; padding: 0 18px 0 15px; border-radius: 14px;
  background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), border-color 250ms var(--ease);
}
.fp-store:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
.fp-store__logo { width: 24px; height: 24px; fill: #fff; flex: none; }
.fp-store__words { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.fp-store__small { font-size: 11px; font-weight: 500; }
.fp-store__big { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-top: 1px; }

/* ─── Hero ─── */
.fp-hero { position: relative; background: var(--hero); color: var(--ink); overflow: hidden; overflow: clip; }
/* The landing page's faint dot grid, fading out from the middle. */
.fp-hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
}
/* The shared header floats over the hero (fixed, 72px tall): the hero starts under it. */
.fp-hero__grid { position: relative; display: grid; gap: 32px; padding-top: 120px; padding-bottom: 56px; }
.fp-hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--n-green-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-text);
}
html.dark .fp-eyebrow { border-color: rgba(2, 159, 73, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.fp-eyebrow .fp-tile--sm { width: 26px; height: 26px; border-radius: 999px; font-size: 12px; }
.fp-h1 {
  margin-top: 22px; font-size: 41.6px; line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: var(--ink);
  overflow-wrap: break-word; text-wrap: balance;
}
/* The headline's last words on their own line, in EarnIT green, as the landing page draws "real money." */
.fp-h1 .fp-accent { display: block; }
.fp-accent { color: var(--accent); }
.fp-lead { margin-top: 20px; max-width: 34em; font-size: 16px; line-height: 1.65; color: var(--soft); }
.fp-badges--hero { margin-top: 28px; justify-content: center; }
/* On a phone the badges (and the band's button) fill the column, as the landing page's do. */
@media (max-width: 639px) {
  .fp-badges--hero, .fp-badges--band { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .fp-badges--hero .fp-store, .fp-badges--band .fp-store { justify-content: center; }
  .fp-band__actions .fp-btn--band { width: 100%; max-width: 320px; }
}
.fp-web { margin-top: 14px; }
.fp-web a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--soft); font-size: 15px; font-weight: 500; text-decoration: none; }
.fp-web a:hover { color: var(--green-text); }
.fp-web__ico { color: var(--green-text); font-size: 13px; }

.fp-hero__art { position: relative; }
.fp-fan { --pw: 200px; --side: 170px; --spread: 108px; position: relative; height: 448px; margin: 0 auto; max-width: 560px; }
/* The landing page's green halo behind the phones (a soft ground, no blur filter to paint). */
.fp-fan__halo { position: absolute; left: 50%; top: 52%; width: 118%; height: 78%; transform: translate(-50%, -50%); background: var(--halo); border-radius: 50%; pointer-events: none; }
/* The screenshots arrive in their phone (landing:screens draws the frame, island and shadow on a 645 by 1309 canvas, the
   phone's body 601 wide and centred), so no second frame is drawn here. --pw is the phone's width; the picture is wider by
   its shadow room. */
.fp-phone { position: absolute; left: 50%; top: 10px; width: calc(var(--pw) * 1.0732); margin-left: calc(var(--pw) * -0.5366); }
.fp-phone img { width: 100%; height: auto; }
.fp-phone--centre { z-index: 2; }
.fp-phone--left, .fp-phone--right { --pw: var(--side); top: 44px; z-index: 1; }
.fp-phone--left { transform: translateX(calc(var(--spread) * -1)) translateY(24px) rotate(-10deg); }
.fp-phone--right { transform: translateX(var(--spread)) translateY(24px) rotate(10deg); }

/* The landing page's floating glass cards. */
.fp-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: none;
  padding: 8px 16px 8px 8px; border-radius: 16px; background: var(--chip); color: var(--ink);
  border: 1px solid var(--chip-line); box-shadow: var(--chip-shadow);
  font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.fp-chip--1 { left: 0; top: 34px; }
.fp-chip--2 { right: 0; bottom: 36px; }
/* The drift starts once the visitor is here (feature.js sets fp-drift on the first scroll, touch, pointer move or key): a picture still moving while the page loads reads to a speed test as a page still loading. */
@media (prefers-reduced-motion: no-preference) {
  html.fp-drift .fp-chip { animation: fp-drift 7s ease-in-out infinite; }
  html.fp-drift .fp-chip--2 { animation-delay: -3.5s; }
}
@keyframes fp-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Below the wide layout there is no room beside the phones: the chips stack as a centred column above them,
   so they never cover a screen's title or figure (round 8.1; e2e/hero-chips.mjs holds them to it). */
@media (max-width: 1023.98px) {
  .fp-fan { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 544px; }
  .fp-chip { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .fp-phone { top: 106px; }
  .fp-phone--left, .fp-phone--right { top: 140px; }
}
@media (min-width: 640px) {
  .fp-h1 { font-size: 48px; }
  .fp-lead { font-size: 18px; }
}
@media (min-width: 1024px) {
  .fp-hero__grid { grid-template-columns: minmax(0, 1fr) 600px; align-items: center; gap: 48px; padding-top: 144px; padding-bottom: 88px; min-height: min(100vh, 932px); }
  .fp-hero__copy { align-items: flex-start; text-align: left; }
  .fp-h1 { font-size: 60px; line-height: 1.05; }
  .fp-badges--hero { justify-content: flex-start; }
  .fp-fan { --pw: 260px; --side: 230px; --spread: 172px; height: 580px; max-width: 600px; }
  .fp-phone--left, .fp-phone--right { top: 56px; }
  .fp-chip { font-size: 15px; }
  /* Over parts of the screens with no title or figure on them, on every page's three screens. */
  .fp-chip--1 { left: -8px; top: 400px; }
  .fp-chip--2 { right: -8px; top: 492px; bottom: auto; }
  .fp-chip--2.fp-chip--high { top: 190px; }
}
@media (min-width: 1280px) { .fp-h1 { font-size: 72px; } }

/* ─── Sections: the landing page's rhythm, a centred head with its pill, then the content ─── */
.fp-sec { position: relative; padding: 64px 0; }
.fp-sec--plain { background: var(--page); }
.fp-sec--tint { background: var(--alt); }
.fp-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 40px; }
.fp-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--hair); box-shadow: var(--glass-shadow);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-text);
}
.fp-kicker__ico { font-size: 12px; }
.fp-h2 { margin-top: 20px; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.fp-sec__lead { margin-top: 16px; max-width: 36em; color: var(--soft); font-size: 16px; }
.fp-h3 { margin-top: 16px; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.fp-text { margin-top: 8px; color: var(--soft); font-size: 15px; line-height: 1.65; }
@media (min-width: 768px) {
  .fp-head { margin-bottom: 56px; }
  .fp-h2 { font-size: 48px; line-height: 1.1; }
}

/* Glass cards, as the landing page's: hairline, a soft corner glow, a lift on hover. */
.fp-card, .fp-step, .fp-more__card, .fp-prices, .fp-faq details {
  position: relative; background: var(--glass); border: 1px solid var(--hair); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.fp-card, .fp-step { border-radius: 16px; padding: 24px; overflow: hidden; transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease), transform 300ms var(--ease); }
.fp-card::before, .fp-step::before { content: ''; position: absolute; top: -24px; right: -24px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, var(--n-green-bg), transparent); opacity: 0.4; pointer-events: none; }
.fp-card:hover, .fp-step:hover { border-color: var(--hair-strong); box-shadow: var(--glass-lift); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .fp-card:hover, .fp-step:hover, .fp-more__card:hover, .fp-btn:hover, .fp-store:hover { transform: none; } }

.fp-benefits { display: grid; gap: 16px; }
@media (max-width: 767px) {
  .fp-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .fp-card .fp-tile { grid-row: span 2; }
  .fp-card .fp-h3 { margin-top: 0; align-self: center; }
  .fp-card .fp-text { margin-top: 4px; }
}
@media (min-width: 768px) { .fp-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* Steps: the landing page's numbered tiles, green, blue and amber. */
.fp-steps { display: grid; gap: 16px; }
.fp-step { --n: var(--n-green); --n-bg: var(--n-green-bg); --n-line: var(--n-green-line); }
.fp-step--blue { --n: var(--n-blue); --n-bg: var(--n-blue-bg); --n-line: var(--n-blue-line); }
.fp-step--amber { --n: var(--n-amber); --n-bg: var(--n-amber-bg); --n-line: var(--n-amber-line); }
.fp-step::before { background: radial-gradient(closest-side, var(--n-bg), transparent); }
.fp-step__n {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--n-bg); border: 1px solid var(--n-line); color: var(--n); font-size: 14px; font-weight: 700; letter-spacing: 0;
}
.fp-steps__go { margin-top: 40px; text-align: center; }
@media (max-width: 767px) {
  .fp-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .fp-step__n { grid-row: span 2; }
  .fp-step .fp-h3 { margin-top: 0; align-self: center; }
  .fp-step .fp-text { margin-top: 4px; }
  .fp-steps__go .fp-btn { width: 100%; }
}
@media (min-width: 768px) { .fp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* ─── Today's prices (/data) ─── */
.fp-split { display: grid; gap: 32px; }
.fp-split .fp-split__copy { display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 1024px) { .fp-split { grid-template-columns: minmax(0, 1fr) 640px; gap: 64px; align-items: start; } .fp-split__copy { position: sticky; top: 120px; } }
.fp-prices { border-radius: 24px; padding: 8px; }
.fp-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--tint); border: 1px solid var(--hair); }
.fp-tab {
  min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink);
  font: 600 15px/1.2 var(--font); cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.fp-tab[aria-selected='true'] { background: linear-gradient(135deg, #027f3b 0%, #027a38 50%, #016b31 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px -8px rgba(1, 122, 56, 0.7); }
.fp-table { padding: 4px 8px 0; }
.fp-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fp-table th { padding: 14px 8px 8px; text-align: left; font-size: 13px; font-weight: 600; color: var(--soft); }
.fp-table td { padding: 14px 8px; border-top: 1px solid var(--hair); font-size: 16px; color: var(--ink); vertical-align: middle; }
.fp-table .fp-num { text-align: right; }
.fp-plan { font-weight: 700; }
.fp-tag { display: inline-block; margin: 4px 0 0; padding: 2px 9px; border-radius: 999px; background: var(--n-green-bg); border: 1px solid var(--n-green-line); color: var(--n-green); font-size: 12px; font-weight: 700; white-space: nowrap; }
.fp-plan .fp-tag { margin-left: 8px; }
.fp-price { font-weight: 700; white-space: nowrap; }
.fp-lasts { color: var(--soft); }
.fp-prices__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 8px 8px; border-top: 1px solid var(--hair); margin-top: 4px; }
.fp-note { color: var(--soft); font-size: 14px; }
@media (max-width: 479px) { .fp-plan .fp-tag { display: table; margin: 6px 0 0; } .fp-prices__foot .fp-btn { width: 100%; } }
@media (min-width: 768px) { .fp-prices { padding: 12px; } .fp-table { padding: 8px 16px 0; } .fp-prices__foot { padding: 20px 16px 12px; } }

/* ─── Questions: the landing page's glass rows, the open one on a green line ─── */
.fp-faq { display: grid; gap: 16px; }
.fp-faq details { border-radius: 16px; transition: border-color 300ms var(--ease); }
.fp-faq details[open] { border-color: var(--hair-strong); }
.fp-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 18px 24px;
  font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); cursor: pointer; list-style: none;
}
.fp-faq summary::-webkit-details-marker { display: none; }
.fp-faq summary::after {
  content: ''; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(45deg) translateY(-3px); transition: transform 300ms var(--ease);
}
.fp-faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.fp-faq p { padding: 0 24px 22px; color: var(--soft); font-size: 15px; }
.fp-faq p[data-faq-answer] { padding-bottom: 8px; }
.fp-faq a, .fp-faq__more a { color: var(--green-text); font-weight: 600; }
.fp-faq__more { margin-top: 24px; text-align: center; }
.fp-faq__more a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }

/* ─── Get the app: the landing page's glass call to action, glowing green on the hero's ground ─── */
.fp-band {
  position: relative; padding: 64px 0; overflow: hidden; overflow: clip;
  background: radial-gradient(ellipse 45% 60% at 50% 50%, rgba(2, 159, 73, 0.14) 0%, transparent 70%), var(--page);
}
.fp-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 0%, transparent 75%);
}
.fp-band__inner {
  position: relative; max-width: 1024px; margin: 0 auto; padding: 40px 24px; border-radius: 24px; text-align: center;
  background: var(--glass); border: 1px solid rgba(2, 159, 73, 0.3);
  box-shadow: 0 0 40px rgba(2, 159, 73, 0.22), var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.fp-band__title { margin-top: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; }
.fp-band__text { margin: 16px auto 0; max-width: 32em; color: var(--soft); font-size: 18px; }
.fp-band__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; }
.fp-badges--band { justify-content: center; }
.fp-btn--band { min-height: 52px; }
.fp-band__web { margin-top: 16px; }
.fp-band__web a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--green-text); font-weight: 600; text-decoration: none; }
@media (min-width: 768px) {
  .fp-band__inner { padding: 48px; }
  .fp-band__title { font-size: 60px; line-height: 1.05; }
  .fp-band__actions { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}

/* ─── More on EarnIT ─── */
/* Round 8.2 (11): the cards share each row, so a short last row (seven of eight, or fewer with a service off) is
   filled by its cards growing, never one card beside an empty half. */
.fp-more { display: flex; flex-wrap: wrap; gap: 12px; }
.fp-more > li { flex: 1 1 calc(50% - 6px); min-width: 0; display: flex; }
.fp-more > li > .fp-more__card { flex: 1; min-width: 0; }
.fp-more__card {
  display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px; border-radius: 16px;
  text-decoration: none; color: var(--ink);
  transition: transform 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.fp-more__card:hover { transform: translateY(-3px); border-color: var(--hair-strong); box-shadow: var(--glass-lift); }
.fp-more__card .fp-tile { width: 44px; height: 44px; border-radius: 12px; font-size: 19px; }
.fp-more__name { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; line-height: 1.25; }
.fp-more__go { font-size: 13px; color: var(--green-text); }
@media (max-width: 479px) { .fp-more__go { display: none; } }
@media (max-width: 339px) { .fp-more > li { flex-basis: 100%; } }
@media (min-width: 900px) { .fp-more { gap: 16px; } .fp-more > li { flex-basis: calc(25% - 12px); } .fp-more__name { font-size: 16px; } }

/* ─── Scroll reveals: only once feature.js has set fp-anim (never with reduce motion), so the page reads without it ─── */
html.fp-anim .fp-reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1); }
html.fp-anim .fp-reveal.fp-in { opacity: 1; transform: none; }

/* ─── The share picture (scripts/feature-og.mjs): the hero alone, 1200 by 630 ─── */
html.fp-og, html.fp-og body { width: 1200px; height: 630px; overflow: hidden; }
html.fp-og .fp-skip, html.fp-og main > :not(.fp-hero), html.fp-og .sf, html.fp-og .fp-badges--hero, html.fp-og .fp-web, html.fp-og .sh nav, html.fp-og .sh-end { display: none !important; }
html.fp-og .sh { position: absolute; top: 24px; left: 72px; right: auto; z-index: 5; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.fp-og .sh-in { padding: 0; }
html.fp-og .sh-logo img { height: 34px; }
html.fp-og .fp-hero { height: 630px; }
html.fp-og .fp-hero__grid { max-width: none; min-height: 0; height: 630px; grid-template-columns: 520px 1fr; gap: 0; padding: 40px 0 0 72px; align-items: center; }
html.fp-og .fp-hero__copy { align-items: flex-start; text-align: left; }
html.fp-og .fp-h1 { font-size: 64px; }
html.fp-og .fp-lead { font-size: 21px; }
html.fp-og .fp-hero__copy::after { content: attr(data-og-url); display: block; margin-top: 26px; font-size: 20px; font-weight: 700; color: var(--green-text); }
html.fp-og .fp-fan { --pw: 240px; --side: 215px; --spread: 150px; height: 630px; max-width: 600px; margin-top: 30px; }
html.fp-og .fp-chip { animation: none; }
html.fp-og .fp-chip--1 { left: 10px; top: 92px; }
html.fp-og .fp-chip--2 { right: 24px; bottom: 96px; top: auto; }

/* ─── The website's shared parts (round 8.1, 12): the theme control, the one footer and the service tiles,
   written from frontend/src/utils (siteTheme.js, siteFooter.js, siteServices.js) by npm run build:feature-pages. ─── */
/* shared:css */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/landing/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A5, U+20A7-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/landing/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A5, U+20A7-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/landing/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A5, U+20A7-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/landing/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A5, U+20A7-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/landing/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A5, U+20A7-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/landing/fonts/inter-naira-wght-normal.woff2') format('woff2');unicode-range:U+20A6}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/landing/fonts/inter-naira-wght-normal.woff2') format('woff2');unicode-range:U+20A6}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/landing/fonts/inter-naira-wght-normal.woff2') format('woff2');unicode-range:U+20A6}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/landing/fonts/inter-naira-wght-normal.woff2') format('woff2');unicode-range:U+20A6}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/landing/fonts/inter-naira-wght-normal.woff2') format('woff2');unicode-range:U+20A6}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/landing/fonts/inter-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/landing/fonts/inter-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/landing/fonts/inter-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/landing/fonts/inter-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/landing/fonts/inter-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107.1%;ascent-override:90.4%;descent-override:22.5%;line-gap-override:0%}
.sh{--sh-ink:#0d1f15;--sh-link:rgba(13,31,21,.72);--sh-ghost-bg:rgba(2,159,73,.05);--sh-ghost-line:rgba(2,159,73,.22);position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;background:transparent;transition:background-color .28s ease,border-color .28s ease,box-shadow .28s ease}
html.dark .sh{--sh-ink:#f9f9f8;--sh-link:rgba(249,249,248,.7);--sh-ghost-bg:rgba(255,255,255,.05);--sh-ghost-line:rgba(255,255,255,.14)}
.sh.is-scrolled{background:rgba(249,250,248,.92);border-bottom-color:rgba(2,159,73,.14);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 4px 22px rgba(13,31,21,.06)}
html.dark .sh.is-scrolled{background:rgba(13,13,13,.88);border-bottom-color:rgba(255,255,255,.06);box-shadow:0 4px 22px rgba(0,0,0,.32)}
.sh-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding:12px 16px;box-sizing:border-box}
@media (min-width:640px){.sh-in{padding:12px 24px}}
@media (min-width:1024px){.sh-in{padding:12px 48px}}
.sh-logo{display:inline-flex;align-items:center;min-height:44px;flex:none}
.sh-logo img{display:block;height:32px;width:auto}
.sh-logo [data-tone="dark"]{display:none}
html.dark .sh-logo [data-tone="light"]{display:none}
html.dark .sh-logo [data-tone="dark"]{display:block}
.sh-nav{display:none;align-items:center;gap:24px;margin:0;padding:0;list-style:none}
@media (min-width:1024px){.sh-nav{display:flex}}
@media (min-width:1280px){.sh-nav{gap:32px}}
.sh-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;white-space:nowrap;color:var(--sh-link);text-decoration:none;transition:color .2s ease}
.sh-nav a:hover{color:var(--sh-ink)}
.sh-end{display:flex;align-items:center;gap:12px;flex:none}
.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;font-size:14px;line-height:1;text-decoration:none;white-space:nowrap;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,border-color .25s ease}
.sh-btn--ghost{display:none;font-weight:500;color:var(--sh-ink);background:var(--sh-ghost-bg);border:1px solid var(--sh-ghost-line)}
@media (min-width:768px){.sh-btn--ghost{display:inline-flex}}
.sh-btn--ghost:hover{border-color:rgba(2,159,73,.45);transform:translateY(-1px)}
.sh-btn--app{font-weight:600;color:#fff;padding:0 18px;background:linear-gradient(135deg,#027a38 0%,#026a31 55%,#015a29 100%);border:1px solid rgba(2,122,56,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px rgba(2,122,56,.25)}
.sh-btn--app:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 26px rgba(2,122,56,.38)}
.sh-btn--app svg{width:13px;height:13px;fill:currentColor}
.sh a:focus-visible{outline:2px solid #029f49;outline-offset:3px;border-radius:12px}
@media (max-width:359px){.sh-in{gap:8px}.sh-logo img{height:28px}.sh-btn--app{gap:6px;padding:0 10px}.sh-end{gap:8px}}
@media (prefers-reduced-motion:reduce){.sh,.sh-btn,.sh-nav a{transition:none}}
.site-theme{--st-ink:#0d1f15;--st-bg:rgba(2,159,73,.05);--st-line:rgba(2,159,73,.22);display:inline-flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border-radius:12px;border:1px solid var(--st-line);background:var(--st-bg);color:var(--st-ink);cursor:pointer;transition:background-color .25s ease,border-color .25s ease,transform .2s ease}
html.dark .site-theme{--st-ink:#f9f9f8;--st-bg:rgba(255,255,255,.05);--st-line:rgba(255,255,255,.14)}
.site-theme:hover{border-color:rgba(2,159,73,.45);transform:translateY(-1px)}
.site-theme:focus-visible{outline:2px solid #029f49;outline-offset:3px}
.site-theme svg{display:block;width:18px;height:18px}
.site-theme .site-theme__sun{display:none}
html.dark .site-theme .site-theme__sun{display:block}
html.dark .site-theme .site-theme__moon{display:none}
@media (prefers-reduced-motion:reduce){.site-theme{transition:none}}
.sf{--sf-ground:#f3f6f3;--sf-ink:#0d1f15;--sf-soft:rgba(13,31,21,.7);--sf-mute:rgba(13,31,21,.62);--sf-line:rgba(2,159,73,.18);--sf-accent:#017a38;background:linear-gradient(to bottom,rgba(2,159,73,.07) 0%,var(--sf-ground) 42%);color:var(--sf-soft);border-top:1px solid rgba(2,159,73,.2);font-size:15px;line-height:1.55}
html.dark .sf{--sf-ground:#0d0d0d;--sf-ink:#f9f9f8;--sf-soft:rgba(249,249,248,.68);--sf-mute:rgba(249,249,248,.58);--sf-line:rgba(255,255,255,.1);--sf-accent:#3ccf80;background:linear-gradient(to bottom,rgba(2,159,73,.09) 0%,var(--sf-ground) 42%)}
.sf-in{width:100%;max-width:1280px;margin:0 auto;padding:0 24px;box-sizing:border-box}
@media (min-width:1024px){.sf-in{padding:0 48px}}
.sf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px;padding:64px 0 40px}
.sf-brand{grid-column:1/-1}
@media (min-width:900px){.sf-grid{grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:40px 32px;padding-top:72px}.sf-brand{grid-column:auto}}
.sf-logo{display:inline-flex;align-items:center;min-height:44px}
.sf-logo img{display:block;height:32px;width:auto}
.sf-logo .sf-logo__dark{display:none}
html.dark .sf-logo .sf-logo__light{display:none}
html.dark .sf-logo .sf-logo__dark{display:block}
.sf-brand p{margin:14px 0 0;max-width:24em;font-size:14px;color:var(--sf-soft)}
.sf-brand .sf-small{margin-top:12px;font-size:13px;color:var(--sf-mute)}
.sf-socials{display:flex;gap:4px;margin:14px 0 0 -12px;padding:0;list-style:none}
.sf-socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:var(--sf-soft);transition:color .2s ease,background-color .2s ease}
.sf-socials a:hover{color:var(--sf-accent);background:rgba(2,159,73,.08)}
.sf-socials svg{width:18px;height:18px;fill:currentColor}
.sf-h{margin:0;font-family:'Sora','Manrope',system-ui,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;color:var(--sf-ink)}
.sf-col ul{margin:10px 0 0;padding:0;list-style:none}
.sf-col a{display:inline-flex;align-items:center;min-height:36px;font-size:14px;color:var(--sf-soft);text-decoration:none;overflow-wrap:anywhere;transition:color .2s ease}
.sf-col a:hover,.sf-col a[aria-current="page"]{color:var(--sf-accent)}
.sf-col a[aria-current="page"]{font-weight:600}
.sf a:focus-visible{outline:2px solid var(--sf-accent);outline-offset:2px;border-radius:8px}
.sf-base{margin:0;padding:24px 0 32px;border-top:1px solid var(--sf-line);font-size:14px;text-align:center;color:var(--sf-mute)}
[data-feature-pages][hidden]{display:none}
.svc-earn{background:linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);color:#ffffff}
.svc-data{background:linear-gradient(135deg, #d97706 0%, #fbbf24 100%);color:#ffffff}
.svc-airtime{background:linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);color:#ffffff}
.svc-bills{background:linear-gradient(135deg, #dc2626 0%, #f97316 100%);color:#ffffff}
.svc-electricity{background:linear-gradient(135deg, #dc2626 0%, #f97316 100%);color:#ffffff}
.svc-cable_tv{background:linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);color:#ffffff}
.svc-epin{background:linear-gradient(135deg, #0c1e4a 0%, #1e3a8a 100%);color:#ffffff}
.svc-internet{background:linear-gradient(135deg, #6d28d9 0%, #a855f7 100%);color:#ffffff}
.svc-betting{background:linear-gradient(135deg, #dc2626 0%, #f97316 100%);color:#ffffff}
.svc-giftcards{background:linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);color:#ffffff}
.svc-esim{background:linear-gradient(135deg, #dc2626 0%, #f97316 100%);color:#ffffff}
.svc-send{background:radial-gradient(60% 55% at 15% 20%, rgba(206, 174, 64, 0.32) 0%, transparent 60%), radial-gradient(55% 55% at 85% 80%, rgba(206, 174, 64, 0.2) 0%, transparent 62%), linear-gradient(#0b1210, #16211c);color:#e3c25a;box-shadow:inset 0 0 0 1px rgba(206, 174, 64, 0.3)}
.svc-escrow{background:linear-gradient(135deg, #017a38 0%, #015c2b 100%);color:#f5dc9e;box-shadow:inset 0 0 0 1.5px rgba(240, 206, 130, 0.95)}
.svc-services{background:radial-gradient(60% 55% at 15% 20%, rgba(206, 174, 64, 0.32) 0%, transparent 60%), radial-gradient(55% 55% at 85% 80%, rgba(206, 174, 64, 0.2) 0%, transparent 62%), linear-gradient(#0b1210, #16211c);color:#e3c25a;box-shadow:inset 0 0 0 1px rgba(206, 174, 64, 0.3)}
.svc-marketplace{background:linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);color:#ffffff}
.svc-withdraw{background:linear-gradient(135deg, #02913f 0%, #027a38 50%, #016b31 100%);color:#ffffff}
.svc-virtual_card{background:linear-gradient(135deg, #6d28d9 0%, #a855f7 100%);color:#ffffff}
.svc-flights{background:linear-gradient(135deg, #0c1e4a 0%, #1e3a8a 100%);color:#ffffff}
.send-flags{display:inline-flex;align-items:center;vertical-align:middle}.send-flags__flag{position:relative;display:block;flex:none;overflow:hidden;border-radius:9999px;background:#fff}.send-flags__flag svg{display:block;width:100%;height:100%}.send-flags--xs .send-flags__flag{width:11px;height:11px;box-shadow:0 0 0 1.5px var(--send-flags-ring,var(--polish-white,#fff))}.send-flags--xs .send-flags__flag+.send-flags__flag{margin-left:-4px}.send-flags--sm .send-flags__flag{width:14px;height:14px;box-shadow:0 0 0 1.5px var(--send-flags-ring,var(--polish-white,#fff))}.send-flags--sm .send-flags__flag+.send-flags__flag{margin-left:-5px}.send-flags--md .send-flags__flag{width:18px;height:18px;box-shadow:0 0 0 2px var(--send-flags-ring,var(--polish-white,#fff))}.send-flags--md .send-flags__flag+.send-flags__flag{margin-left:-6px}.send-flags--lg .send-flags__flag{width:22px;height:22px;box-shadow:0 0 0 2px var(--send-flags-ring,var(--polish-white,#fff))}.send-flags--lg .send-flags__flag+.send-flags__flag{margin-left:-7px}
/* /shared:css */