/* Careers (careers.html) and its application (careers-apply.html), inside the AVA site: only what site.css, biz.css and
   ava.css do not have (the bar, the menu and the footer are ava.css's). Link it last.
   White and light gray grounds, black words and buttons, the red #FF3B30 underline under the 1 key word. */

/* The key word: Instrument Serif italic over the red underline, set here too so both pages have it whichever site.css is served. */
h1 em, h2 em { background: linear-gradient(180deg, transparent 84%, #FF3B30 84%, #FF3B30 94%, transparent 94%); padding: 0 0.07em; margin: 0 -0.03em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
h2 em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
h2 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.045em; line-height: 1.02; }

/* No motion on these pages (Chris, 10/24: "just show one image, big"): nothing fades, slides or zooms in (no .rise, no .rv).
   The VSL is the only moving thing. */

/* The sticky top on a computer is the AVA bar and the menu; an anchor lands under them */
body.ava { --chrome: calc(var(--barh, 45px) + 65px); }
body.ava main section { scroll-margin-top: var(--chrome); }
body.ava .ava-phero h1 { max-width: 1040px; margin-left: auto; margin-right: auto; }
body.ava .ava-phero .lead { max-width: 640px; }
body.ava .ava-phero .note { margin-top: 12px; font-size: 14px; color: #5a5a5a; }

/* The VSL: a big 16:9 frame under the hero. Chris's photo and its label until the file is there; then a press plays it in place. */
.vsl { position: relative; max-width: 1040px; margin: 56px auto 0; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--gray); border: 1px solid var(--line); }
.vsl img, .vsl video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vsl video { background: #000; }
.vsl.is-ready { cursor: pointer; }
.vsl-tag {
  position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 20px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-align: left;
}
.vsl-play { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); }
.vsl-play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -5px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.vsl.is-ready:hover .vsl-tag { border-color: var(--ink); }

/* The deck: each section 1 idea, big and still like a slide. On a desktop each fills 1 screen under the AVA bar and menu.
   A picture slide's picture takes the room under its headline, and never less than 540px tall: the picture stays big even
   when that makes the slide a little taller than a laptop's screen. */
@media (min-width: 901px) {
  body.ava .slide { min-height: calc(100vh - var(--chrome)); padding: 64px 0; display: flex; flex-direction: column; justify-content: center; }
  body.ava .slide.fit { padding: 44px 0; }
  .slide.fit .head.center { max-width: 1100px; }
  .slide.fit h2 { font-size: clamp(36px, 3.9vw, 56px); }
  .slide.fit .head .lead { max-width: 1000px; }
  .slide.fit .pic-wide { margin-top: 36px; }
  .slide.fit .pic img { width: auto; height: auto; max-width: 100%; max-height: max(680px, calc(100vh - var(--chrome) - 300px)); margin: 0 auto; }
}
.kicker { display: block; margin-bottom: 18px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #5a5a5a; }
.head.center { max-width: 1000px; }
.statement { font-size: clamp(38px, 5.6vw, 80px); line-height: 1.04; }
.slide .head .lead { max-width: 720px; margin-left: auto; margin-right: auto; text-wrap: pretty; }

/* A picture per slide, up to 1200 wide (wider than the text column). A card (rendered on white) runs edge to edge on a
   phone; a shot (a real screen) keeps the gutters and a border. */
.pic-wide { max-width: 1248px; margin: 56px auto 0; padding: 0 24px; }
.pic { display: block; }
.pic img { display: block; width: 100%; height: auto; border-radius: 28px; background: #fff; }
.pic.shot img { border: 1px solid var(--line); }

/* The problem's last line: the painkiller, leading into What we're building */
.painkiller { max-width: 900px; margin: 32px auto 0; font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); text-align: center; text-wrap: balance; }

/* How we work: the 3 moves big, then the creed in 1 ruled row */
.algo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.algo li { border-radius: 24px; background: var(--gray); padding: 32px 30px; }
.algo-e { display: block; font-size: 40px; line-height: 1; }
.algo b { display: block; margin-top: 24px; font-size: clamp(30px, 3vw, 40px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); }
.algo p { margin-top: 10px; font-size: 17px; line-height: 1.45; color: var(--muted); }
.creed { list-style: none; margin: 40px 0 0; padding: 28px 0 0; border-top: 2px solid var(--ink); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.creed b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); }
.creed p { margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--muted); }

/* What you get: 3 big tiles */
.gets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gets li { border-radius: 24px; background: #fff; padding: 32px 30px; }
.gets-e { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--gray); font-size: 30px; line-height: 1; }
.gets b { display: block; margin-top: 28px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); }
.gets p { margin-top: 10px; font-size: 18px; line-height: 1.45; color: var(--muted); }

/* How to join: 5 steps across */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.flow li { border-radius: 22px; background: var(--gray); padding: 26px 22px; min-width: 0; }
.fe { display: block; font-size: 32px; line-height: 1; }
.fn { display: block; margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--faint); }
.flow b { display: block; margin-top: 2px; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); }
.flow p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* The 2 open seats */
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.role { display: flex; flex-direction: column; border: 2px solid var(--ink); border-radius: 28px; padding: 40px 36px 36px; background: #fff; }
.role-top { display: flex; justify-content: space-between; align-items: center; }
.role-e { width: 64px; height: 64px; border-radius: 18px; background: var(--gray); display: grid; place-items: center; font-size: 32px; line-height: 1; }
.role-n { font-size: 14px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.role h3 { margin-top: 28px; font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.04em; line-height: 1.05; }
.role-line { margin-top: 14px; font-size: 19px; line-height: 1.45; color: var(--text); text-wrap: pretty; }
.role-fit { margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.role-num { margin: 28px 0; padding: 18px 20px; border-radius: 16px; background: var(--gray); }
.role-num span { display: block; font-size: 13px; color: var(--muted); }
.role-num b { display: block; margin-top: 4px; font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; line-height: 1.3; }
.role-cta { margin-top: auto; align-self: stretch; padding: 16px 24px; font-size: 17px; }

/* The close: the call to take a seat */
.close h2 { max-width: 900px; font-size: clamp(44px, 7vw, 96px); }
.close .lead { max-width: 640px; margin: -12px auto 40px; text-wrap: balance; }
.lead b { color: var(--ink); font-weight: 600; }

/* ---- careers-apply.html ---- */
body.ava .ava-phero.apply-hero { padding-bottom: 0; }
body.ava a.ava-tagline { color: var(--text); }
body.ava .apply-wrap { padding: 56px 0 120px; }
.apply { max-width: 720px; margin: 0 auto; }
.f-group { border: 0; margin: 24px 0 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#apply-form > .f-group:first-child { margin-top: 0; }
.f-label { padding: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.f-label span { font-weight: 400; color: var(--muted); }
.f-input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px;
  transition: border-color 0.15s ease;
}
.f-input::placeholder { color: #a8a8a8; }
.f-input:focus { outline: none; border-color: var(--ink); }
.f-input.bad { border-color: var(--ink); border-width: 2px; }
textarea.f-input { resize: vertical; min-height: 120px; line-height: 1.5; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.f-err { display: none; font-size: 14px; font-weight: 600; color: var(--ink); }
.f-err.on { display: block; }
.f-hint { font-size: 14px; color: var(--muted); }
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-send { margin-top: 36px; width: 100%; min-width: 0; }
.f-send:disabled { opacity: 0.6; cursor: default; }
.f-fail { margin-top: 12px; text-align: center; }
.f-small { margin-top: 12px; text-align: center; }

/* The seat pick: 2 tiles side by side, phone too; the picked one turns black */
.pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pick-tile { position: relative; display: flex; cursor: pointer; }
.pick-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-in {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; width: 100%;
  min-height: 150px; padding: 20px; border: 1.5px solid var(--ink); border-radius: 20px; background: #fff; color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease;
}
.pick-e { font-size: 36px; line-height: 1; }
.pick-t { font-size: 20px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.pick-tile:hover .pick-in { background: var(--gray); }
.pick-tile input:checked + .pick-in { background: var(--ink); color: #fff; }
.pick-tile input:focus-visible + .pick-in { outline: 2px solid #000; outline-offset: 3px; }

/* Where you live: 3 pills */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span { display: inline-block; padding: 10px 18px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 15px; color: var(--ink); background: #fff; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.pill:hover span { border-color: var(--ink); }
.pill input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill input:focus-visible + span { outline: 2px solid #000; outline-offset: 3px; }

/* After sending: 1 plain line */
.done { padding: 8px 0; outline: none; text-align: center; }
.done-line { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.45; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.done p + p { margin-top: 20px; }
.nw { white-space: nowrap; }
.done a { color: var(--muted); font-size: 15px; }
.done a:hover { color: var(--ink); }

@media (max-width: 1100px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet and phone */
@media (max-width: 900px) {
  body.ava { --chrome: var(--barh, 45px); } /* the menu scrolls away on a phone; only the bar stays */
  .vsl { margin-top: 36px; border-radius: 16px; }
  .vsl-tag { left: 12px; bottom: 12px; gap: 8px; padding: 5px 14px 5px 5px; font-size: 14px; }
  .vsl-play { width: 32px; height: 32px; }
  .vsl-play::after { margin: -6px 0 0 -4px; border-width: 6px 0 6px 10px; }
  .roles { grid-template-columns: 1fr; gap: 16px; }
  .pic-wide { margin-top: 36px; padding: 0 16px; }
  .pic img { border-radius: 20px; }
  .kicker { margin-bottom: 14px; font-size: 14px; }
  .algo, .creed, .gets { grid-template-columns: 1fr; }
  .algo { gap: 12px; }
  .algo li, .gets li { padding: 24px 22px; border-radius: 20px; }
  .algo-e { font-size: 34px; }
  .algo b { margin-top: 16px; }
  .creed { margin-top: 32px; gap: 20px; }
  .gets b { margin-top: 20px; }
  .flow { grid-template-columns: 1fr; }
  .flow li { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: start; padding: 18px; }
  .flow .fe { grid-row: span 3; font-size: 28px; }
  .flow .fn { margin-top: 0; }
  .role { padding: 28px 22px 22px; border-radius: 24px; }
  .role-e { width: 56px; height: 56px; font-size: 28px; border-radius: 16px; }
  .role h3 { margin-top: 22px; }
  .role-line { font-size: 17px; }
  .role-num { margin: 22px 0; }
  .role-num b { font-size: 17px; }
  .close .lead { margin-top: -16px; }
  body.ava .apply-wrap { padding: 40px 0 96px; }
}

@media (max-width: 640px) {
  .pic-wide:has(.card) { padding: 0; }
  .pic.card img { border-radius: 0; }
  .f-row { grid-template-columns: 1fr; }
  .pick-in { min-height: 128px; padding: 16px; }
  .pick-e { font-size: 30px; }
  .pick-t { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .pick-in, .pill span, .f-input { transition: none; }
}

/* The seat: what the Founding Operator does, 4 steps across, then the number and who fits, then Apply */
.op-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.op-steps li { border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); padding: 28px 26px; min-width: 0; }
.op-e { display: block; font-size: 38px; line-height: 1; }
.op-n { display: block; margin-top: 24px; font-size: 13px; font-weight: 600; color: var(--faint); }
.op-steps b { display: block; margin-top: 2px; font-size: clamp(22px, 2vw, 27px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); }
.op-steps p { margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.op-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.op-fact { border-radius: 20px; background: var(--gray); padding: 22px 26px; }
.op-fact span { display: block; font-size: 14px; color: var(--muted); }
.op-fact b { display: block; margin-top: 6px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; color: var(--ink); text-wrap: pretty; }
.op-cta { margin-top: 36px; text-align: center; }
@media (max-width: 1100px) {
  .op-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .op-steps, .op-facts { grid-template-columns: 1fr; gap: 12px; }
  .op-steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: start; padding: 20px; border-radius: 20px; }
  .op-steps .op-e { grid-row: span 3; font-size: 30px; }
  .op-steps .op-n { margin-top: 0; }
  .op-fact { padding: 18px 20px; }
  .op-fact b { font-size: 17px; }
  .op-cta { margin-top: 28px; }
}

/* The 2nd seat stays out of the picker until it opens (?seat=results shows it) */
.pick-tile[hidden] { display: none; }

/* The seat's number: 1 row */
.op-facts.one { grid-template-columns: 1fr; }
/* Where we start: the 1 line under the 3 tiles */
.own-line { max-width: 820px; margin: 36px auto 0; text-align: center; font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; color: var(--ink); text-wrap: balance; }
/* Who it's for: 3 lines, each a tile */
.fits { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; gap: 14px; }
.fits li { display: flex; align-items: center; gap: 22px; border-radius: 24px; background: var(--gray); padding: 26px 30px; }
.fit-e { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: #fff; font-size: 30px; line-height: 1; }
.fits b { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.3; color: var(--ink); }
.gray .fits li { background: #fff; }
.gray .fit-e { background: var(--gray); }
.statement + .lead { max-width: 820px; }
@media (max-width: 900px) {
  .own-line { margin-top: 28px; }
  .fits li { gap: 16px; padding: 18px 18px; border-radius: 20px; }
  .fit-e { width: 48px; height: 48px; font-size: 24px; border-radius: 14px; }
}

/* The VSL's pill shows only once the film is there (until then the frame is a still of Chris); Apply sits right under the
   frame, where the film's last line points ("Hit Apply, right below this video") */
.vsl:not(.is-ready) .vsl-tag { display: none; }
.vsl-apply { margin-top: 28px; }

/* From 1100px the picture slides let the width govern, so the First 10 and the road read at laptop size */
@media (min-width: 1100px) {
  .slide.fit .pic img { width: 100%; max-height: none; }
}
/* A tablet or a phone on its side gets the tall phone pictures, never wider than 640 */
@media (min-width: 641px) and (max-width: 900px) {
  .pic img { max-width: 640px; margin: 0 auto; }
}
/* How to join's tiles on the gray section turn white, like Who it's for */
.gray .flow li { background: #fff; }
/* While 1 seat is open its tile takes the row */
.pick:has(> #pick-results[hidden]) { grid-template-columns: minmax(0, 1fr); }
/* Tiles keep an edge on either ground: on a gray section they turn white, on a white one they turn gray */
.gray .op-fact { background: #fff; }
section:not(.gray) .gets li { background: var(--gray); }
section:not(.gray) .gets-e { background: #fff; }
/* A picture card on a white section gets a hairline, so its edge shows (a phone shows it edge to edge, no line) */
@media (min-width: 641px) {
  section:not(.gray) .pic.card img { border: 1px solid var(--line); }
}