/* The masthead as Stripe sets a solution page's: the claim on the left, and on
   the right two screens at two scales standing on one slanted band. Behind,
   wide and short, PostLever's list of what has been sent from ACCESS; in
   front, small and tall, the Campaign in OPTIZMO ACCESS as a single card,
   overlapping the list's lower left. The band turns from ACCESS's warm to
   PostLever's blue along its length, rising behind both from lower left to
   upper right and running off the screen, on the same slope the masthead's
   grey ends on.

   The screens are drawn at one size on a stage 740 units wide and scaled as a
   whole to their column, so each keeps its proportions at any width. Each
   screen wears its own product's colours, held here as literals: PostLever's
   light theme (optizmo-app src/index.css) behind, ACCESS's MUI theme in front.
   They are the products', not the site's. */

.hero {
  /* The stage's scale, which the script sets from the column's width, and the most it may be. */
  --s: 0.85;
  --max-s: 1;
  /* How far in from its column the stage starts. */
  --stage-x: 0px;
  /* The gap between the words and the screens, and where the page's content starts. */
  --hero-gap: var(--space-12);
  --content-left: calc(max(0px, (100% - var(--container-lg)) / 2) + var(--space-6));
  /* How far the slope falls across the whole width of the screen. Its angle follows from that, so
     a wider screen has a gentler slope rather than a taller masthead, and it always runs from the
     masthead's bottom left corner out through its right edge. */
  --drop: 160px;
  /* Extra room under the screens for their shadows where the masthead is stacked, with the slope
     and the band raised by as much, so they keep their place against the screens. */
  --foot: 0px;
  --slope: -8deg;
  --band-depth: calc(90px * var(--s));
  position: relative;
  overflow: hidden;
  padding-block: 4.5rem 5rem;
  /* Light grey above the slope; the ground below it is white, meeting the band that follows. */
  background: color-mix(in srgb, var(--paper-band) 60%, var(--paper-ground));
}
@supports (rotate: atan2(1px, 1px)) {
  .hero { --slope: calc(atan2(var(--drop), 100vw) * -1); }
}
/* The app's workflow canvas behind the masthead: its dot grid (optizmo-app brand-canvas-page,
   dots 24px apart in the muted foreground), far fainter, strongest round the screens and gone by
   the words and the edges. The stage's white ground covers it below the slope. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, hsl(220 8% 40% / 0.22) 1px, transparent 1.4px);
  background-size: 24px 24px;
  background-position: center 0;
  -webkit-mask-image: radial-gradient(48% 62% at 72% 42%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  mask-image: radial-gradient(48% 62% at 72% 42%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
}
@media (max-width: 1079px) {
  .hero::before {
    -webkit-mask-image: radial-gradient(60% 40% at 50% 72%, #000 0%, transparent 100%);
    mask-image: radial-gradient(60% 40% at 50% 72%, #000 0%, transparent 100%);
  }
}
.hero-grid {
  position: relative;
  display: grid;
  gap: var(--space-12);
}
@media (min-width: 1080px) {
  /* A fixed distance under the nav, whatever the window's height: the masthead is as tall as what
     it holds, and a tall window shows the next section under it. Its foot leaves the slope room
     to pass just under the front card, where the band's left end stands. */
  .hero {
    --hero-gap: 3.5rem;
    --stage-x: 40px;
    --max-s: 0.98;
    --drop: clamp(200px, 17vw, 250px);
    --band-depth: calc(200px * var(--s));
    padding-block: 7.5rem calc(var(--drop) * 0.48 - 28px * var(--s));
  }
  /* The slope's white wedge already parts the masthead from what follows it. */
  .hero + .band { padding-top: var(--space-16); }
  .hero-grid {
    grid-template-columns: minmax(0, 29rem) minmax(0, 1fr);
    gap: var(--hero-gap);
    align-items: start;
  }
  /* On a wide screen the stage grows a little into the page's right margin, always stopping well
     short of the screen's edge so the band has room to run out past the back screen. It starts in
     from its column and is held a little under full size, so the screens keep clear gutters from
     the words as Stripe's do. */
  .hero-shot { width: calc(100% + clamp(0px, (100vw - var(--container-lg)) / 2 - 60px, 200px)); }
}

/* Stacked, the words take the full column, so the headline's first sentence sets on one line
   wherever it fits; the lead is held to a reading width. */
.hero-words { position: relative; z-index: 1; min-width: 0; }
@media (min-width: 1080px) {
  /* The headline runs wider than the column the lead and asks keep, out over the room above the
     front card, as Stripe sets its solution pages, wide enough for its first sentence on one line.
     It stops short of the back screen, and the script sets the front card just under its last line. */
  .hero-words { max-width: none; }
  .hero-title { width: 44rem; }
}
/* The two heroes (the page's own, and ACCESS users', set on <html> before the first paint): one shown,
   the other gone, out of reach of a screen reader and the tab key. Without script, the page's own. */
.hero-words .hero-access,
.v-access .hero-words .hero-default { display: none; }
.v-access .hero-words .hero-access { display: block; }

/* Its scale is the homepage hero's, from type.css; here only its place. */
.hero-title {
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.hero-title span {
  background: linear-gradient(135deg, #1D4ED8, #2563EB 55%, #3B82F6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lead {
  max-width: 40rem;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* ---- the stage ---- */

.hero-shot {
  /* The stage's drawn width, which the script scales to the column. Narrower layouts below draw
     less of it at a smaller scale. */
  --drawn-w: 740px;
  /* How much of the stage's width is fitted to the column; the rest may run off the screen. */
  --fit-w: var(--drawn-w);
  /* Where the front card's top sits, which the script sets just under the headline on a wide
     screen, and the stage's height, down to the card's foot. */
  --front-top: 186px;
  --front-h: 354px;
  --drawn-h: calc(var(--front-top) + var(--front-h));
  position: relative;
  height: calc(var(--drawn-h) * var(--s));
}
.hero-stage {
  position: absolute;
  top: 0;
  left: var(--stage-x);
  width: var(--drawn-w);
  height: var(--drawn-h);
  transform-origin: 0 0;
  transform: scale(var(--s));
}

/* ---- the band and the slope ----
   One line runs through the masthead: the grey ground ends on it into white,
   from the masthead's bottom left corner out through its right edge, and the
   band stands on it behind both screens, from behind the front card out past
   the right of the screen, well clear of the words. Both are skewed about the
   same point, where the line leaves the masthead's right edge, by the same
   angle, so they stay on one line at any width. Skewing (rather than rotating)
   keeps the band's left end upright. */

.hero-slope {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-ground,
.hero-band {
  position: absolute;
  right: 0;
  transform-origin: 100% 100%;
  transform: skewY(var(--slope));
}
/* White from the line down. */
.hero-ground {
  left: 0;
  top: calc(100% - var(--foot) - var(--drop));
  height: calc(var(--drop) * 2 + var(--foot));
  transform-origin: 100% 0;
  background: var(--paper-ground);
}
/* Its left end comes out from behind the ACCESS card, a little left of the card's own edge, so
   the warm it starts in is seen; the words keep their distance from it. */
.hero-band {
  left: calc(var(--content-left) + 29rem + var(--hero-gap) + var(--stage-x) - 30px * var(--s));
  top: calc(100% - var(--foot) - var(--drop) - var(--band-depth));
  height: var(--band-depth);
  overflow: hidden;
}
/* The band turns from ACCESS's warm to PostLever's blue along its length, as the ribbon in
   Switching turns a brand's mail from today's warm to PostLever's colours. Scaled from its left
   end to draw it in, which the compositor does alone. */
.hero-band-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 0 0;
  /* Today's warm, as the ribbon draws a brand still sending as today, into a violet halfway to PostLever. */
  background: linear-gradient(90deg, #FB8C5A 0%, #F7748F 30%, #8B8FF6 70%, #6D7CF2 100%);
}
/* PostLever's blue over it, from a soft leading edge to the band's right end. It waits off the
   band's right end until the Campaign is Added in ACCESS, then slides in: a transform, so the
   gradients are painted once and the compositor runs the turn. */
.hero-band-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0) 0, #2563EB 380px);
  transform: translateX(210px);
}

/* ---- behind: PostLever ----
   The Add from ACCESS drawer in the app's light theme, carrying its brand in a
   thin white header: the wordmark and the account, a hairline under them, and
   the app's rail beside it drawn light, as Stripe keeps its screens' chrome. */

.hero-pl,
.hero-ax {
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
}

.hero-pl {
  --app-canvas: hsl(220 16% 96%);
  --app-card: #FFFFFF;
  --app-ink: hsl(221 39% 11%);
  --app-muted: hsl(220 8% 40%);
  --app-border: hsl(220 13% 91%);
  --app-table-header: hsl(220 16% 96.5%);
  left: 240px;
  top: 0;
  width: 500px;
  height: 404px;
  background: var(--app-card);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.05),
    0 22px 48px -20px rgba(30, 41, 80, 0.26);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--app-ink);
}
.hero-pl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px 0 20px;
  border-bottom: 1px solid var(--app-border);
}
.hero-pl-mark { display: block; height: 12px; width: auto; }
.hero-pl-account {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid hsl(220 13% 84%);
  color: var(--app-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hero-pl-main { display: grid; grid-template-columns: 52px 1fr; height: calc(100% - 44px); }
/* The rail in PostLever's blue, icons only, Offers lit on a pale tile: brighter than the app's
   navy, which reads too heavy beside the words. The screen's own rounding clips its foot. */
.hero-pl-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 14px;
  background: var(--app-rail);
}
.hero-rail-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 30px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.8);
}
.hero-rail-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-rail-icon.is-active {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}
.hero-pl-body { min-width: 0; padding: 18px 22px 0 26px; }
.hero-pl-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-muted);
}
.hero-pl-title { display: block; margin-top: 3px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.hero-pl-desc { margin: 4px 0 14px; font-size: 13px; line-height: 1.45; color: var(--app-muted); }

.hero-pl-table {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  overflow: hidden;
}
.hero-row {
  display: grid;
  grid-template-columns: 15px 1fr 76px 74px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--app-border);
}
.hero-row-head {
  border-top: 0;
  padding-block: 9px;
  background: var(--app-table-header);
  font-size: 12.5px;
  font-weight: 600;
}
.hero-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid hsl(220 13% 62%);
  background: var(--app-card);
}
.hero-name {
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-date { font-size: 13px; white-space: nowrap; }

/* The app's badges: slate for not added, green once it is an offer. */
.hero-status { display: flex; }
.hero-badge {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid;
  white-space: nowrap;
}
.hero-badge-slate {
  color: hsl(215 19% 35%);
  background: hsl(210 40% 98%);
  border-color: hsl(213 27% 84%);
}
.hero-badge-green {
  color: hsl(163 94% 24%);
  background: hsl(152 81% 96%);
  border-color: hsl(152 76% 80%);
}

/* The new row opens its own room at the top, pushing the ones before it down, and the oldest
   gives up its room at the foot, so the list keeps its four rows. */
.hero-arrival { display: grid; grid-template-rows: 1fr; }
.hero-departure { display: grid; grid-template-rows: 0fr; }
.hero-arrival > .hero-row,
.hero-departure > .hero-row { min-height: 0; overflow: hidden; }
.hero-departure > .hero-row { border-top-width: 0; padding-block: 0; }

/* ---- in front: OPTIZMO ACCESS ---- */

.hero-ax {
  --ax-primary: #40A0D6;
  --ax-primary-dark: #347CAE;
  --ax-ink: rgba(38, 38, 38, 0.87);
  --ax-ink-medium: rgba(38, 38, 38, 0.6);
  left: 14px;
  top: var(--front-top);
  width: 306px;
  height: var(--front-h);
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 18px 36px -14px rgba(30, 41, 80, 0.3),
    0 30px 56px -22px rgba(30, 41, 80, 0.36);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  color: var(--ax-ink);
  letter-spacing: 0.15px;
}
.hero-ax-bar {
  flex: none;
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(38, 38, 38, 0.1);
}
.hero-ax-logo { display: block; height: 15px; width: auto; }
.hero-ax-info {
  flex: none;
  padding: 16px 22px 15px;
  background: linear-gradient(180deg, var(--ax-primary), var(--ax-primary-dark));
  color: #FFFFFF;
}
.hero-ax-overline {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.9;
}
.hero-ax-name { display: block; font-size: 23px; line-height: 1.25; letter-spacing: 0; }
.hero-ax-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 22px;
}
.hero-ax-label { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.hero-ax-key {
  margin-bottom: 14px;
  padding: 6px 10px;
  border-radius: 4px;
  background: #F1F4F6;
  color: var(--ax-ink-medium);
  font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Roboto Mono', monospace;
  font-size: 13px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The button sits at the card's foot, PostLever's blue in ACCESS; once pressed it says the Campaign is there. */
.hero-ax-button {
  position: relative;
  display: grid;
  margin-top: auto;
  height: 46px;
  border-radius: 6px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.hero-ax-add,
.hero-ax-done {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: inherit;
}
.hero-ax-add { background: #2563EB; color: #FFFFFF; }
.hero-ax-done {
  background: hsl(152 81% 96%);
  box-shadow: inset 0 0 0 1px hsl(152 76% 80%);
  color: #047857;
}
.hero-ax-done svg { width: 20px; height: 20px; fill: currentColor; }

/* ---- the motion ----
   Default is how it ends: added in ACCESS, arrived in PostLever and made an
   offer. The script arms the start only where it will play. It runs as the
   story does, ACCESS first: the card rises and its Add to PostLever is pressed
   and done; then PostLever's screen rises behind it with the Campaign in its
   list, the band drawing in under both, the Campaign turns Added, and the band
   turns PostLever's blue. A page script holds both screens back from the first
   paint (hero-pending), so neither is seen before the other. */

.hero-pending .hero:not(.is-armed) .hero-pl,
.hero-pending .hero:not(.is-armed) .hero-ax { opacity: 0; }
.hero-pending .hero:not(.is-armed) .hero-band-fill { transform: scaleX(0); }

.hero.is-armed .hero-pl,
.hero.is-armed .hero-ax { opacity: 0; translate: 0 18px; }
.hero.is-armed .hero-band-fill {
  transform: scaleX(0);
  will-change: transform;
}
.hero.is-card .hero-ax,
.hero.is-list .hero-pl {
  opacity: 1;
  translate: 0 0;
  transition: opacity 420ms ease, translate 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero.is-drawn .hero-band-fill {
  transform: none;
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* The band draws in warm to violet, and turns PostLever's blue once the Campaign is Added there. */
.hero.is-armed .hero-band-fill::after {
  transform: translateX(100%);
  will-change: transform;
}
.hero.is-turned .hero-band-fill::after {
  transform: translateX(210px);
  transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-ax-add,
.hero-not-added { display: none; }

.hero.is-armed .hero-ax-add { display: flex; }
.hero.is-armed .hero-ax-done { opacity: 0; }
.hero.is-armed .hero-arrival { grid-template-rows: 0fr; }
.hero.is-armed .hero-arrival > .hero-row { border-top-width: 0; padding-block: 0; }
.hero.is-armed .hero-departure { grid-template-rows: 1fr; }
.hero.is-armed .hero-departure > .hero-row { border-top-width: 1px; padding-block: 10px; }
.hero.is-armed .hero-added { display: none; }
.hero.is-armed .hero-not-added { display: inline-block; }

/* Pressed, then the button gives way to its done state. */
.hero-ax-add { transition: transform 120ms ease, background-color 120ms ease, opacity 260ms ease; }
.hero.is-pressing .hero-ax-add { transform: scale(0.97); background: #1D4ED8; }
.hero.is-sent .hero-ax-add { opacity: 0; }
.hero.is-sent .hero-ax-done { opacity: 1; transition: opacity 260ms ease; }
.hero.is-sent .hero-ax-done svg { animation: hero-pop 380ms cubic-bezier(0.3, 1.5, 0.5, 1) both; }

/* It is at the top of PostLever's list as the screen arrives, lit, and is then made an offer. */
.hero.is-arrived .hero-arrival {
  grid-template-rows: 1fr;
  transition: grid-template-rows 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero.is-arrived .hero-arrival > .hero-row {
  border-top-width: 1px;
  padding-block: 10px;
  transition: padding 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
  animation: hero-lit 2000ms ease both;
}
.hero.is-arrived .hero-departure {
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero.is-arrived .hero-departure > .hero-row {
  border-top-width: 0;
  padding-block: 0;
  transition: padding 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero.is-offer .hero-not-added { display: none; }
.hero.is-offer .hero-added { display: inline-block; animation: hero-pop 360ms ease both; }

@keyframes hero-pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes hero-lit {
  0% { background: hsl(214 100% 95%); opacity: 0; }
  15% { background: hsl(214 100% 95%); opacity: 1; }
  70% { background: hsl(214 100% 96.5%); }
  100% { background: transparent; opacity: 1; }
}

/* ---- as space runs out ----
   The wide layout simplifies as Stripe's do: first the screens give the words
   a wider gutter; stacked under the words they keep a modest fixed size,
   centred, with the band a thin strip behind them; and on a phone the whole
   composition is scaled as one to the column. */

@media (min-width: 1080px) and (max-width: 1299px) {
  .hero { --hero-gap: 4rem; }
}

@media (max-width: 1079px) {
  .hero-grid { gap: 3.5rem; }
  .hero {
    --max-s: 0.72;
    --foot: 3rem;
    padding-bottom: calc(var(--drop) * 0.2 + var(--foot));
  }
  .hero-stage { left: calc((100% - var(--drawn-w) * var(--s)) / 2); }
  /* Under the centred stage, a little left of the front card. */
  .hero-band {
    left: calc(var(--content-left) + (min(100%, var(--container-lg)) - 2 * var(--space-6) - 740px * var(--s)) / 2 - 30px * var(--s));
  }
}

/* On a phone the whole composition is kept, scaled as one to the column: it is fitted to the
   stage's left 720 units, so only the edge of PostLever's list runs off the screen's right, past
   its last column, and it starts at the column's edge rather than centred. */
@media (max-width: 599px) {
  .hero { --max-s: 1; }
  .hero-shot { --fit-w: 720px; }
  .hero-stage { left: 0; }
  .hero-band { left: calc(var(--content-left) - 30px * var(--s)); }
}