/*
 * Income Accelerator — a separate brand on the same Worker.
 *
 * Deliberately shares nothing visually with ApplyVerified: different buyer, different
 * promise, different country. Navy and blue instead of ApplyVerified's chrome.
 *
 * System fonts only. The audience is a mid-range Android on 3G and a webfont is the single
 * most expensive thing a landing page can add for the least return.
 */
:root {
  --navy: #102033;
  --blue: #2563EB;
  --green: #16A34A;
  --ink: #111827;
  --slate: #475569;
  --cloud: #F8FAFC;
  --line: #E2E8F0;
  /* --line is 1.18:1 on --cloud — fine for a decorative card edge, far below the 3:1 that
     WCAG 1.4.11 requires of a control boundary. A form field outdoors on a mid-range Android
     had no visible edge at all. This is 3.02:1 on --paper. */
  --line-strong: #94A3B8;
  --paper: #FFFFFF;
  /* The error palette used to be four raw hex values inline on .err — the one component
     that appears when a payment fails, and the one place a hardcoded colour survives a
     theme change and comes out unreadable. */
  --danger: #B91C1C;
  --danger-ink: #7F1D1D;
  --danger-bg: #FEF2F2;
  --danger-line: #FECACA;
  /* Button text stays light in both themes, so it is not --paper. */
  --on-blue: #FFFFFF;
  --r: 8px;
  --r-sm: 6px;

  color-scheme: light;
}

/*
 * Dark mode, because not having it is not neutral here.
 *
 * Chrome and Samsung Internet on Android ship a force-dark that algorithmically inverts any
 * page which has not declared a preference, and on this device class it is commonly on. That
 * inversion is unpredictable exactly where it matters: the amount on the payment page, the
 * error panel, the card fills. Declaring `color-scheme` is what stops the browser doing it
 * on top of our own theme, and it also themes the native <select> and file picker for free.
 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --navy: #E2E8F0;
    --blue: #60A5FA;
    --green: #4ADE80;
    --ink: #E5E7EB;
    --slate: #94A3B8;
    --cloud: #0B1220;
    --line: #1E293B;
    --line-strong: #64748B;
    --paper: #111A2B;
    --danger: #F87171;
    --danger-ink: #FCA5A5;
    --danger-bg: #2A1416;
    --danger-line: #7F1D1D;
    /* White on the dark-mode blue measures 2.54:1 — the buy button's own label would have
       been unreadable. Dark text on the lighter blue is 7.36:1, and 10.74:1 on the green
       "Copied" state. Measured, not guessed. */
    --on-blue: #0B1220;
  }
  /* The brand rule is a solid blue band; the dark blue is lighter, so keep the band from
     glowing by using the surface colour under it. */
  .bar { background: var(--blue); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cloud);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
.bar { height: 6px; background: var(--blue); }

header.brand { display: flex; align-items: center; gap: 10px; padding: 20px 0 28px; }
header.brand .mark {
  display: block; width: 34px; height: 25px; background: var(--navy);
  -webkit-mask: url(/ia/mark.svg) no-repeat center / contain;
  mask: url(/ia/mark.svg) no-repeat center / contain;
}
header.brand b { font-size: 15px; letter-spacing: -0.01em; color: var(--navy); }

h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--navy); }
h2 { font-size: 20px; line-height: 1.3; margin: 32px 0 10px; color: var(--navy); }
p { margin: 0 0 14px; }
.lede { font-size: 18px; color: var(--slate); }
.eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate); margin: 0 0 8px;
}
small, .fine { font-size: 13px; color: var(--slate); }

ul.ticks { list-style: none; padding: 0; margin: 0 0 20px; }
ul.ticks li { padding-left: 26px; position: relative; margin-bottom: 9px; }
ul.ticks li::before {
  content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 12px;
  border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; padding: 20px; margin: 0 0 16px;
}
.card.focus { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
/* The add-on group is a real <fieldset> so the three checkboxes are announced as one group
   rather than three unrelated boxes. Reset the user-agent chrome; .card supplies the rest. */
fieldset.card { margin: 0 0 16px; min-width: 0; }
fieldset.card > legend { padding: 0; }

.price { font-size: 30px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }

button, .btn {
  display: block; width: 100%; padding: 15px 20px; border: 0; border-radius: 8px;
  background: var(--blue); color: var(--on-blue); font-size: 16px; font-weight: 600;
  cursor: pointer; text-align: center; text-decoration: none; font-family: inherit;
}
button:disabled { opacity: .55; cursor: not-allowed; }
/* An inline action beside a value — the only button here that is not the page's main move.
   The base button rule is display:block/width:100%, so every one of those is overridden. */
.copy {
  display: inline-block; width: auto; flex: 0 0 auto; margin-left: 10px;
  padding: 8px 12px; font-size: 13px; font-weight: 600;
  background: var(--cloud); color: var(--navy); border: 1px solid var(--line);
  border-radius: 6px; min-height: 36px;
}
.copy[data-done="1"] { background: var(--green); border-color: var(--green); color: var(--on-blue); }
.amountRow { display: flex; align-items: center; gap: 4px; }

/* Announced, never shown. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.btn.ghost {
  background: transparent; color: var(--slate); font-weight: 400; font-size: 14px;
  padding: 12px; border: 0; text-decoration: underline;
}

label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px; color: var(--navy); }
input[type=email], input[type=text], select {
  width: 100%; padding: 13px 14px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); color: var(--ink);
}
input[type=email]:focus-visible, input[type=text]:focus-visible, select:focus-visible {
  outline: 2px solid var(--blue); outline-offset: -1px;
}
/* The old rule was `input:focus`, which also matched the add-on checkboxes and replaced the
   user-agent ring with a blue outline drawn INSIDE a box the browser fills blue when checked
   — so a keyboard user could not see where they were. Actions had no focus style at all. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input[type=checkbox]:focus-visible, input[type=file]:focus-visible {
  outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 6px;
}
.opt input { accent-color: var(--blue); }

/* Off-screen until tabbed to. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--navy); color: var(--cloud); padding: 12px 16px; text-decoration: none;
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.opt:first-of-type { border-top: 0; }
.opt input { margin: 3px 0 0; width: 18px; height: 18px; flex: 0 0 auto; }
/* Standalone, not `.opt .t`. library.html builds these inside a plain .card, so scoping
   them to .opt meant the title of every item a paying customer had bought rendered as
   unstyled body text — on the one page the buyer actually keeps. `.p` stays scoped: its
   margin-left:auto only means anything inside the flex row. */
.t { font-weight: 600; color: var(--navy); }
.s { font-size: 13px; color: var(--slate); }
/* .p is for prices, which must never break across lines. A person's name is not a price:
   nowrap was clipping "Muhammad Tehsin Rashad" off the right edge of the payment page. */
.opt .p { margin-left: auto; font-weight: 700; color: var(--navy); white-space: nowrap; }
/* flex-basis:auto makes this column ask for its max-content width, and a wrapping flex
   container wraps BEFORE it shrinks — which put the checkbox alone on the first line. A
   zero basis lets it share the line and take what is left. */
.opt .txt { flex: 1 1 0; min-width: 0; }
@media (max-width: 420px) {
  /* Only the add-on rows: a nowrap price at 16px/700 was taking 40% of a 375px screen and
     squeezing the product name into five lines. Give the price its own line instead. The
     payment page's rows are short and stay as they are. */
  #options .opt { flex-wrap: wrap; }
  #options .opt .p { flex: 0 0 100%; margin-left: 30px; margin-top: 4px; }
}
.opt .v { margin-left: auto; padding-left: 12px; text-align: right; font-weight: 600; color: var(--navy); }

.total { display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 0 4px; border-top: 2px solid var(--navy); margin-top: 8px; }
.total b { font-size: 22px; color: var(--navy); }

.note { background: var(--cloud); border: 1px solid var(--line); border-left: 3px solid var(--blue);
  padding: 12px 14px; font-size: 14px; color: var(--slate); border-radius: 0 6px 6px 0; margin: 0 0 16px; }
.err { border-left-color: var(--danger); color: var(--danger-ink);
  background: var(--danger-bg); border-color: var(--danger-line); }
[hidden] { display: none !important; }

footer { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 16px; font-size: 12px; color: var(--slate); }
footer a { color: var(--slate); }

@media (min-width: 640px) { h1 { font-size: 38px; } .wrap { padding-top: 32px; } }