/* Ambassador landing page.
 *
 * Its own stylesheet, and its own visual world: the scheme was announced on Facebook as
 * a six-slide deck — warm near-black, gold rule, high-contrast Garamond — and somebody
 * arriving from that post should land somewhere that plainly IS the same thing. The rest
 * of the shop is light and busy on purpose; this page is quiet and dark on purpose.
 *
 * Scoped under .amb throughout so none of it can leak into the storefront.
 *
 * Colours read off the deck itself rather than invented: the ground is warm, not neutral
 * black, and the gold is a soft antique one — a bright yellow at these sizes reads cheap
 * against cream.
 */
.amb {
  --amb-ink: #201d18;          /* the ground */
  --amb-ink-2: #262218;        /* a plate lifted off it */
  --amb-cream: #f3f0e9;
  --amb-cream-2: #cdc6b7;      /* body copy */
  --amb-cream-3: #9a9384;      /* captions */
  --amb-gold: #c08b3c;
  --amb-gold-2: #8d6527;       /* hairlines */
  --amb-line: rgba(192, 139, 60, .28);
  background: var(--amb-ink);
  color: var(--amb-cream);
  font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  /* The shop's chrome sits above and below; this stops its stacking context bleeding in. */
  position: relative;
  isolation: isolate;
}
.amb-inner { max-width: 940px; margin: 0 auto; padding: 0 24px; }
.amb-band { padding: 72px 0; border-top: 1px solid var(--amb-line); }
.amb-band:first-of-type { border-top: 0; }

/* Type. The deck's hierarchy is: letter-spaced gold eyebrow, large light serif, thin
   gold rule. Repeated exactly, because that repetition IS the branding. */
.amb-eyebrow {
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--amb-gold); margin: 0 0 18px; font-weight: 500;
}
.amb-eyebrow.center, .amb-h2.center, .amb-lede.center, .amb-fine.center { text-align: center; }
/* Two storefront stylesheets fight this page for its headings, and they are NOT equally
   specific — which is why an earlier fix here half-worked, correcting the colour and
   leaving the font alone:
     style.css     `h1,h2,h3,h4        { font-family: Outfit; color: var(--ink) }`   (0,0,1)
     home-ama.css  `body.ama h1,h2,h3  { font-family: Jost; text-transform: uppercase }` (0,1,2)
   home-ama.css is injected into every page's <head> AFTER this file, so a one-class
   `.amb h2` (0,1,1) loses to it outright. Everything that has to beat it therefore goes
   on a TWO-class selector — `.amb .amb-h2` is (0,2,0), and two classes beat one class
   plus two elements whatever the load order.

   Colours are literal rather than tokens for a related reason: if a variable fails to
   resolve the colour falls back to inherited, which here is the storefront's near-black
   on this page's near-black ground. A heading that cannot be read is worse than an
   unstyled one, so the headline colour does not depend on anything resolving. */
.amb .amb-display, .amb .amb-h2,
.amb .amb-list h3, .amb .amb-card h3, .amb .amb-done h3 {
  font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  text-transform: none;
  letter-spacing: normal;
}
.amb .amb-display {
  font-size: clamp(46px, 11vw, 96px); font-weight: 300; line-height: 1.02;
  letter-spacing: -.01em; margin: 0; color: #f3f0e9; text-wrap: balance;
}
.amb .amb-h2 {
  font-size: clamp(28px, 5vw, 46px); font-weight: 300; line-height: 1.15;
  margin: 0; color: #f3f0e9; text-wrap: balance;
}
.amb-rule { display: block; width: 74px; height: 1px; background: var(--amb-gold); margin: 26px 0; opacity: .85; }
.amb-rule.center { margin-left: auto; margin-right: auto; }
.amb .amb-lede { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.6; color: #cdc6b7; margin: 0 0 8px; }
.amb-fine { font-size: 14px; line-height: 1.65; color: var(--amb-cream-3); margin: 22px 0 0; }

/* The bordered plate the deck opens and closes on. */
.amb-plate { border: 1px solid var(--amb-line); padding: clamp(28px, 6vw, 62px); background: var(--amb-ink-2); }

.amb-hero { padding: 64px 0 72px; }
.amb-hero .amb-plate { text-align: center; }
.amb-hero .amb-rule { margin-left: auto; margin-right: auto; }
.amb-cta {
  display: inline-block; margin-top: 26px; padding: 13px 30px;
  border: 1px solid var(--amb-gold); color: var(--amb-gold);
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: background .18s, color .18s;
}
.amb-cta:hover { background: var(--amb-gold); color: var(--amb-ink); }

/* The 15% + 10% sum. */
.amb-sum { display: flex; align-items: flex-start; justify-content: center; gap: clamp(18px, 5vw, 46px); margin: 40px 0 0; }
.amb-sum-part { text-align: center; }
.amb-pct { display: block; font-size: clamp(44px, 9vw, 78px); font-weight: 300; line-height: 1; font-variant-numeric: lining-nums; }
.amb-sum-part.is-gold .amb-pct { color: var(--amb-gold); }
.amb-sum-lab { display: block; margin-top: 10px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--amb-cream-3); }
.amb-sum-part.is-gold .amb-sum-lab { color: var(--amb-gold); }
.amb-plus { font-size: clamp(26px, 5vw, 44px); color: var(--amb-gold); line-height: 1.5; font-weight: 300; }

.amb-total { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--amb-line); text-align: center; }
.amb-big {
  font-size: clamp(38px, 9vw, 82px); font-weight: 400; line-height: 1.05; margin: 0;
  color: var(--amb-gold); letter-spacing: -.01em;
}
.amb-total-sub { font-size: 15px; color: var(--amb-cream-2); margin: 14px 0 0; }
/* Both headline percentages are the USUAL discount, not a guaranteed one: the shop
   sets its margin per supplier, brand and category, so a handful of lines sit below
   15%. The asterisk goes on every figure quoted as a headline. */
.amb-star { color: var(--amb-gold); font-size: .5em; vertical-align: super; line-height: 0; margin-left: .12em; }
.amb-sum-lab .amb-star { font-size: 1em; vertical-align: baseline; }
.amb-star-note { font-size: 13px; color: var(--amb-cream-3); margin: 10px 0 0; letter-spacing: .02em; }

/* Real prices, in the deck's ledger layout. */
.amb-examples { margin-top: 34px; }
.amb-ex {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--amb-line);
}
.amb-ex:last-child { border-bottom: 0; }
.amb-ex-brand { display: block; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--amb-gold); margin-bottom: 5px; }
.amb-ex-name { display: block; font-size: 19px; color: var(--amb-cream); line-height: 1.3; }
.amb-ex-rrp { display: block; font-size: 13.5px; color: var(--amb-cream-3); margin-top: 5px; }
.amb-ex-now { font-size: clamp(24px, 4vw, 34px); color: var(--amb-gold); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.amb-loading { color: var(--amb-cream-3); font-size: 15px; text-align: center; padding: 20px 0; }

/* Who we're after. */
.amb-list { list-style: none; margin: 34px 0 0; padding: 0; counter-reset: amb; }
.amb-list li { display: flex; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--amb-line); }
.amb-list li:last-child { border-bottom: 0; }
.amb-num { font-size: 30px; color: var(--amb-gold); line-height: 1; flex: none; width: 34px; font-weight: 300; }
.amb .amb-list h3 { font-size: 22px; font-weight: 400; margin: 0 0 5px; color: #f3f0e9; }
.amb-list p { font-size: 15.5px; line-height: 1.6; color: var(--amb-cream-2); margin: 0; }

/* What you'd do. */
.amb-cards { display: grid; gap: 14px; margin-top: 34px; }
.amb-card { border: 1px solid var(--amb-line); padding: 26px 28px; text-align: center; }
.amb-card:nth-child(2) { border-color: rgba(192, 139, 60, .14); }
.amb .amb-card h3 { font-size: clamp(20px, 3vw, 26px); font-weight: 400; margin: 0 0 8px; color: #f3f0e9; }
.amb-card p { font-size: 15px; line-height: 1.6; color: var(--amb-cream-2); margin: 0; }

/* The progression under the three cards: referral code now, sponsorship later. Set on a
   plate so it reads as its own promise rather than a fourth card — it is a different
   kind of statement from "tag us". */
.amb-grow {
  margin-top: 30px; padding: 30px clamp(20px, 5vw, 44px);
  border: 1px solid var(--amb-line); background: var(--amb-ink-2);
}
.amb-grow .amb-lede { margin: 0; max-width: 62ch; margin-left: auto; margin-right: auto; }
.amb-grow strong { color: var(--amb-gold); font-weight: 400; }

/* The form. Dark fields, gold focus — a white input box here would look like a hole. */
.amb-form { margin-top: 30px; }
.amb-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .amb-row { grid-template-columns: 1fr 1fr; } .amb-cards { grid-template-columns: repeat(3, 1fr); } }
/* Field labels sat on --amb-cream-3 (#9a9384), which is the right weight for a caption
   under a photo and much too quiet for the thing you have to read to fill a form in.
   Ben, 21 Sep 2026: plain white. At 13px, uppercase and tracked out this wide, the warm
   off-white the rest of the page uses still read as grey — thin letterforms carry less
   colour than a solid block does, so the label needs the full contrast the headings get
   by being large. */
.amb-fld { display: block; margin-bottom: 16px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.amb-fld input, .amb-fld textarea {
  display: block; width: 100%; margin-top: 8px; box-sizing: border-box;
  background: rgba(0, 0, 0, .22); border: 1px solid var(--amb-line); color: #fff;
  font-family: inherit; font-size: 17px; letter-spacing: 0; text-transform: none;
  padding: 11px 13px; border-radius: 2px;
}
.amb-fld textarea { resize: vertical; line-height: 1.55; }
/* The one thing in the form NOT taken to white, and deliberately: a placeholder as
   bright as the typed value reads as a field somebody has already filled in. Lifted as
   far as it can go while still losing to the white beside it. */
.amb-fld input::placeholder, .amb-fld textarea::placeholder { color: #bdb6a7; }
.amb-fld input:focus, .amb-fld textarea:focus { outline: none; border-color: var(--amb-gold); background: rgba(0, 0, 0, .34); }
.amb-fld.is-err input { border-color: #c2604f; }
.amb-opt, .amb-req { letter-spacing: .06em; text-transform: none; color: #fff; font-size: 12.5px; }
.amb-req { color: var(--amb-gold); }

.amb-social { border: 1px solid var(--amb-line); padding: 20px 20px 6px; margin: 4px 0 20px; }
.amb-social legend { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; padding: 0 8px; }
.amb-at { font-size: 12px; letter-spacing: .14em; }
/* A condition of applying, not a caption — so it sits at body brightness, not the
   quiet grey the other fine print uses. */
.amb-public { margin: 0 8px 14px; font-size: 13.5px; color: #cdc6b7; }
.amb-public strong { color: #fff; font-weight: 400; }

.amb-opt-in { display: flex; gap: 11px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 14.5px; color: #fff; line-height: 1.55; }
.amb-opt-in input { width: 17px; height: 17px; margin: 3px 0 0; flex: none; accent-color: var(--amb-gold); }

.amb-submit {
  display: block; width: 100%; margin-top: 8px; padding: 15px 20px; cursor: pointer;
  background: var(--amb-gold); color: #1a1712; border: 1px solid var(--amb-gold);
  font-family: inherit; font-size: 17px; letter-spacing: .1em; text-transform: uppercase;
  transition: opacity .18s;
}
.amb-submit:hover { opacity: .9; }
.amb-submit:disabled { opacity: .5; cursor: default; }
.amb-msg { margin: 0 0 14px; font-size: 15px; color: var(--amb-gold); line-height: 1.55; }
.amb-msg.is-err { color: #e08a78; }

.amb-done { text-align: center; padding: 20px 0; }
.amb-tick { display: block; font-size: 44px; color: var(--amb-gold); line-height: 1; margin-bottom: 14px; }
.amb .amb-done h3 { font-size: 30px; font-weight: 400; margin: 0 0 10px; color: #f3f0e9; }
.amb-done p { font-size: 16.5px; color: var(--amb-cream-2); line-height: 1.6; margin: 0 auto; max-width: 46ch; }

.amb-terms { padding: 40px 0 64px; }
.amb :focus-visible { outline: 2px solid var(--amb-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .amb * { transition: none !important; } }