/* About page, Stripe-flavoured.
   Borrowed language: left-aligned oversized headline with a per-word gradient,
   a flowing strand-ribbon as the only hero artwork, generous whitespace,
   alternating light bands rather than heavy bordered cards, a floating offer
   card, and motion that is always eased-out and never bouncy.
   Everything is drawn from scratch; no third-party artwork is used. */

:root {
  /* Stripe's motion feel: fast start, long soft landing. One shared curve keeps
     every transition on the page feeling like the same object. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 200ms;
  --t-mid: 380ms;
  --t-slow: 760ms;
}

.about-body {
  background: #fff;
  color: #0a2540;
}

/* One container for the whole page, so every section shares a left edge. */
.about-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 700px) { .about-wrap { padding: 0 22px; } }

/* ---------- Hero ---------- */

.about-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 92px 0 108px;
}

/* Flowing strand ribbon. Stripe's signature is hundreds of fine filaments
   sweeping across the corner; this is an SVG of ~50 stroked beziers sharing one
   gradient. It animates with transform/opacity only, so the strands rasterize
   once and the GPU just moves them. */
.ribbon {
  position: absolute;
  /* Extends well past the hero on every edge so the strands run off the bottom
     rather than stopping in mid-air. .about-hero has overflow:hidden, so the
     bundle is clipped by the section edge and reads as continuing underneath. */
  top: -18%;
  right: -14%;
  width: 80%;
  height: 168%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: ribbon-drift 18s var(--ease-out-soft) infinite alternate;
}
.ribbon svg { width: 100%; height: 100%; display: block; }
/* Strands are grouped into bands and each BAND animates, not each path: 8
   animated elements instead of 56, so the wave costs a fraction of the paint
   while reading as a continuous ripple travelling across the ribbon. */
.ribbon .band { animation: band-wave 4.6s ease-in-out infinite; transform-origin: 20% 80%; }
@keyframes ribbon-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(-3.5%, 2.6%, 0) rotate(-2.8deg) scale(1.05); }
}
@keyframes band-wave {
  0%, 100% { opacity: .38; transform: translate3d(0, 0, 0); }
  50%      { opacity: 1;   transform: translate3d(-1.1%, .8%, 0); }
}
@media (max-width: 860px) { .ribbon { width: 110%; right: -30%; opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
  .ribbon, .ribbon .band { animation: none; opacity: 1; }
}

.hero-inner { position: relative; z-index: 1; max-width: 720px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #425466;
  background: #f6f9fc;
  border: 1px solid #e6ebf1;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.hero-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cr-success-500);
  box-shadow: 0 0 0 3px rgba(23,178,106,.18);
  position: relative;
}
/* "Live" indicator, so the 750+ LIVE PROMO CODES claim next to it reads as a
   running feed rather than a static number.
   The expanding ring is a PSEUDO-ELEMENT, not an animated box-shadow on the dot
   itself: box-shadow is painted, so animating it repaints every frame, whereas a
   pseudo-element scaling by transform/opacity stays on the compositor and costs
   the main thread nothing. Same look, no jank — which matters on a page that is
   already fighting for main-thread time. */
.hero-eyebrow .dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--cr-success-500);
  animation: dotPulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes dotPulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow .dot::after { animation: none; }
}

/* Solid brand blue. The per-word gradient used background-clip:text with a
   transparent color, which renders a grey block behind the glyphs while an
   opacity transition is mid-flight (the clip and the compositor layer disagree
   for a frame). Solid colour has no such interaction. */
.hero-h1 {
  font-family: var(--cr-font-display);
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.042em;
  font-weight: 800;
  margin: 0 0 26px;
}
.hero-h1 span { color: var(--cr-brand); }

.hero-lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: #425466;
  max-width: 58ch;
  margin: 0 0 34px;
}

.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background var(--t-fast) var(--ease-out-soft),
              transform var(--t-fast) var(--ease-out-soft),
              box-shadow var(--t-fast) var(--ease-out-soft);
}
.btn svg { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease-out-soft); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--cr-brand); color: #fff; box-shadow: 0 2px 10px rgba(36,80,233,.28); }
.btn-primary:hover { background: var(--cr-brand-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(36,80,233,.34); }
.btn-primary:active { transform: translateY(0); }

/* Stripe's secondary action is a plain text link with a chevron, not a button */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--cr-brand);
  text-decoration: none;
}
.link-action svg { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease-out-soft); }
.link-action:hover svg { transform: translateX(4px); }

/* Floating offer card, echoing Stripe's programme card */
.float-card {
  position: relative;
  z-index: 1;
  margin-top: 64px;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(10, 37, 64, .12), 0 2px 6px rgba(10,37,64,.05);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out-expo), box-shadow var(--t-mid) var(--ease-out-expo);
}
.float-card:hover { transform: translateY(-4px); box-shadow: 0 26px 64px rgba(10,37,64,.16), 0 2px 6px rgba(10,37,64,.05); }
/* The multi-stop top rule is the tell of a Stripe card */
.float-card::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #f7900a, #e94a8c 38%, #7c3aed 70%, #2450e9);
}
.float-inner { padding: 26px 26px 24px; }
.float-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #0a2540;
  margin-bottom: 14px;
}
.float-tag img { width: 20px; height: 20px; border-radius: 5px; }
.float-card h3 { font-size: 17.5px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.015em; }
.float-card p { font-size: 15px; line-height: 1.55; color: #425466; margin: 0 0 16px; }

/* ---------- Stat strip ---------- */

.stat-band { border-top: 1px solid #e6ebf1; border-bottom: 1px solid #e6ebf1; background: #f6f9fc; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 34px 24px; text-align: left; }
.stat + .stat { border-left: 1px solid #e6ebf1; }
.stat-num {
  display: block;
  font-family: var(--cr-font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--cr-brand);
}
.stat-label { display: block; font-size: 13.5px; color: #425466; margin-top: 6px; }
@media (max-width: 760px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(n+3) { border-top: 1px solid #e6ebf1; }
}

/* ---------- Sections ---------- */

.sec { padding: 96px 0; }
.sec-tint { background: #f6f9fc; border-top: 1px solid #e6ebf1; border-bottom: 1px solid #e6ebf1; }

.sec-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--cr-brand);
  margin: 0 0 14px;
}
.sec-h2 {
  font-family: var(--cr-font-display);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.038em;
  font-weight: 800;
  margin: 0 0 18px;
  max-width: 20ch;
}
.sec-p {
  font-size: 17px;
  line-height: 1.65;
  color: #425466;
  margin: 0 0 18px;
  max-width: 62ch;
}
.sec-p:last-child { margin-bottom: 0; }
.sec-head { max-width: 720px; margin-bottom: 56px; }

/* Two-column body */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; gap: 34px; } }

.col-item { position: relative; }
.col-num {
  font-family: var(--cr-font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--cr-brand);
  margin-bottom: 14px;
  display: block;
}
.col-rule {
  height: 2px;
  background: linear-gradient(90deg, var(--cr-brand), rgba(36,80,233,0));
  border-radius: 2px;
  margin-bottom: 18px;
  transform-origin: left;
  transform: scaleX(.34);
  transition: transform var(--t-slow) var(--ease-out-expo);
}
.is-revealed .col-rule { transform: scaleX(1); }
.col-item h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.02em; }
.col-item p { font-size: 15.5px; line-height: 1.62; color: #425466; margin: 0; }

/* Checklist */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.checks li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 4px;
  border-top: 1px solid #e6ebf1;
  font-size: 16.5px;
  line-height: 1.58;
  color: #425466;
}
.checks li:last-child { border-bottom: 1px solid #e6ebf1; }
.checks svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--cr-success-500); }
.checks strong { color: #0a2540; font-weight: 650; display: block; margin-bottom: 2px; }

/* Split: copy + visual */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* Receipt visual */
.receipt {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(10,37,64,.12), 0 2px 6px rgba(10,37,64,.05);
  overflow: hidden;
  max-width: 400px;
}
.receipt-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 18px;
  border-bottom: 1px solid #e6ebf1;
  font-size: 13px;
  font-weight: 700;
  color: #0a2540;
}
.receipt-top svg { width: 17px; height: 17px; color: var(--cr-success-500); }
.receipt-row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; font-size: 14.5px; }
.receipt-row + .receipt-row { border-top: 1px solid #f0f4f8; }
.receipt-row .k { color: #6b7c93; }
.receipt-row .v { font-weight: 650; font-variant-numeric: tabular-nums; color: #0a2540; }
.receipt-row .v.good { color: var(--cr-success-600); }

/* Trust chips */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid #e6ebf1;
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: #425466;
  transition: border-color var(--t-fast) var(--ease-out-soft), transform var(--t-fast) var(--ease-out-soft);
}
.chip:hover { border-color: var(--cr-brand); transform: translateY(-1px); }
.chip svg { width: 16px; height: 16px; color: var(--cr-success-500); }

/* ---------- Closing ---------- */

.closing { padding: 104px 0 110px; text-align: center; position: relative; overflow: hidden; }
.closing h2 {
  font-family: var(--cr-font-display);
  font-size: clamp(32px, 4.4vw, 52px);
  letter-spacing: -0.04em;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 auto 18px;
  max-width: 18ch;
}
.closing h2 span { color: var(--cr-brand); }
.closing p { font-size: 18px; color: #425466; margin: 0 auto 32px; max-width: 46ch; line-height: 1.6; }

/* ---------- Motion ---------- */

/* Reveal: opacity plus a short rise on one shared easing curve. The stagger is
   driven by --i so a row of columns cascades instead of snapping in together. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--t-slow) var(--ease-out-expo),
              transform var(--t-slow) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Careers / application form ---------- */
/* Lives in about.css because the careers page reuses this page's entire visual
   language (hero, kickers, section rhythm, motion curves). */

.role-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.role-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #425466;
  background: #f6f9fc;
  border: 1px solid #e6ebf1;
  padding: 7px 14px;
  border-radius: 999px;
}
.role-tag svg { width: 14px; height: 14px; color: var(--cr-brand); }

.duty-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.duty-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 4px;
  border-top: 1px solid #e6ebf1;
  font-size: 16.5px;
  line-height: 1.6;
  color: #425466;
}
.duty-list li:last-child { border-bottom: 1px solid #e6ebf1; }
.duty-list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--cr-brand); }
.duty-list strong { color: #0a2540; font-weight: 650; display: block; margin-bottom: 2px; }

/* Form */
.apply-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(10,37,64,.10), 0 2px 6px rgba(10,37,64,.05);
  overflow: hidden;
  max-width: 720px;
}
.apply-card::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #f7900a, #e94a8c 38%, #7c3aed 70%, #2450e9);
}
.apply-inner { padding: 34px; }
@media (max-width: 700px) { .apply-inner { padding: 24px 20px; } }

.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  color: #0a2540;
  margin-bottom: 7px;
}
.field .hint { display: block; font-weight: 400; font-size: 13.5px; color: #6b7c93; margin-top: 3px; }
.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 15.5px;
  color: #0a2540;
  background: #fff;
  border: 1px solid #d6dee8;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color var(--t-fast) var(--ease-out-soft), box-shadow var(--t-fast) var(--ease-out-soft);
}
.field textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cr-brand);
  box-shadow: 0 0 0 3px rgba(36,80,233,.14);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--cr-error-500);
  box-shadow: 0 0 0 3px rgba(240,68,56,.12);
}

.opt-row { display: flex; gap: 10px; flex-wrap: wrap; }
.opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid #d6dee8;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: #425466;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t-fast) var(--ease-out-soft),
              background var(--t-fast) var(--ease-out-soft),
              color var(--t-fast) var(--ease-out-soft);
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .box {
  width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid #c3cedb;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease-out-soft), border-color var(--t-fast) var(--ease-out-soft);
}
.opt .box svg { width: 11px; height: 11px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--t-fast) var(--ease-out-soft), transform var(--t-fast) var(--ease-out-expo); }
.opt:hover { border-color: #a9bacd; }
.opt input:checked ~ .box { background: var(--cr-brand); border-color: var(--cr-brand); }
.opt input:checked ~ .box svg { opacity: 1; transform: scale(1); }
.opt:has(input:checked) { border-color: var(--cr-brand); color: var(--cr-brand); background: rgba(36,80,233,.05); }
.opt input:focus-visible ~ .box { box-shadow: 0 0 0 3px rgba(36,80,233,.2); }

.form-error {
  font-size: 14px;
  color: var(--cr-error-600);
  margin: 0 0 16px;
  padding: 11px 14px;
  background: var(--cr-error-50);
  border: 1px solid var(--cr-error-100);
  border-radius: 10px;
}
.form-note { font-size: 13.5px; color: #6b7c93; margin: 14px 0 0; line-height: 1.55; }

.apply-success { text-align: center; padding: 46px 30px; }
.apply-success .tick {
  width: 56px; height: 56px; margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--cr-success-50);
  display: flex; align-items: center; justify-content: center;
}
.apply-success .tick svg { width: 28px; height: 28px; color: var(--cr-success-600); }
.apply-success h3 { font-family: var(--cr-font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 10px; }
.apply-success p { font-size: 16px; color: #425466; margin: 0 auto; max-width: 44ch; line-height: 1.6; }

.btn[disabled] { opacity: .6; pointer-events: none; }