/* Two arms: the home page and every /for/<kind> page, in the selected direction
   (docs/marketing/premium-direction/index.html). Loaded after home.css and scoped to body.ta,
   which only index.html carries. Colours come from home.css; only the incoming bubble is local. */
.ta {
  --ta-bubble:#edf1f7;
  --ta-lift:0 1px 2px rgba(15,37,80,.05),0 6px 18px -10px rgba(15,37,80,.14);
  font-feature-settings:"cv11","ss01";
}

.ta h1,.ta h2,.ta h3,.ta h4 { font-weight:680; color:var(--ink); }
.ta h4 { margin:0; }
.ta main [id] { scroll-margin-top:88px; }

.ta-link {
  color:var(--blue);
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:rgba(31,69,201,.4);
}
.ta-link:hover { color:var(--blue-ink); text-decoration-color:currentColor; }

/* Header */
.ta-top {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(242,245,250,.92);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.ta-top nav>a:not(.button):hover { color:var(--blue); }
.ta .skip { z-index:21; }

/* Hero */
.ta-hero { padding:44px 0 32px; text-align:center; }
.ta-for { font-size:15px; font-weight:600; color:var(--muted); margin-bottom:12px; }
.ta h1 {
  font-size:clamp(40px,4.1vw,60px);
  line-height:1.06;
  letter-spacing:-.042em;
  max-width:none;
}
.ta-two { color:var(--blue); }
.ta-lede { margin:16px auto 0; font-size:19px; line-height:1.5; max-width:44em; }
.ta-invite { margin-top:6px; font-size:16px; }

/* The two jobs */
.ta-split { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ta-arm {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 28px;
  display:flex;
  flex-direction:column;
}
.ta-arm-head {
  padding:0 4px;
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:24px;
  align-items:baseline;
}
.ta-arm h2 { font-size:30px; line-height:1.15; letter-spacing:-.03em; }
.ta-arm-head p { grid-column:1 / -1; margin-top:6px; font-size:18px; line-height:1.45; }
.ta-arm-head .ta-link { grid-row:1; grid-column:2; font-size:16px; padding:10px 0; margin:-10px 0; }
.ta-arm-foot { margin-top:16px; padding:0 4px; font-size:16px; }
.ta-arm-foot .ta-link { display:inline-flex; align-items:center; min-height:44px; }

/* The example frame */
.ta-frame {
  margin-top:18px;
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 12px 12px;
}
.ta-frame-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:48px;
  padding:0 6px;
}
.ta-frame-bar b { font-size:15px; font-weight:600; letter-spacing:-.005em; }
.ta-frame-bar span { font-size:14px; color:var(--muted); white-space:nowrap; }
.ta-panel {
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--ta-lift);
  overflow:hidden;
}
.ta-record { display:flex; align-items:center; gap:14px; padding:14px 22px; }
.ta-av {
  flex:none;
  width:40px;
  height:40px;
  border-radius:8px;
  background:var(--tint);
  color:var(--blue-ink);
  display:grid;
  place-items:center;
  font-size:15px;
  font-weight:650;
  letter-spacing:.01em;
}
.ta-record b { display:block; font-size:17px; font-weight:650; letter-spacing:-.01em; line-height:1.3; }
.ta-record small { display:block; font-size:15px; color:var(--muted); line-height:1.4; }
.ta-rhythm { text-transform:lowercase; }

.ta-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.ta-cell {
  position:relative;
  min-height:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  padding:8px 6px;
  text-align:center;
  font-size:15px;
  font-weight:500;
  color:var(--muted);
  line-height:1.25;
}
.ta-cell + .ta-cell { border-left:1px solid var(--line); }
.ta-cell svg { display:inline-block; margin-right:5px; vertical-align:-1px; }
.ta-cell em { font-style:normal; font-size:14px; font-weight:600; }
.ta-cell.is-on { background:var(--tint); color:var(--blue-ink); font-weight:650; }
.ta-cell.is-on::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--blue); }
.ta-cell.is-on i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--blue); margin-right:7px; vertical-align:1px; }

.ta-thread {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  padding:18px 22px;
}
.ta-msg { max-width:86%; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.ta-msg.is-out { align-self:flex-end; align-items:flex-end; }
.ta-meta { font-size:14px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.ta-meta svg { color:var(--blue); }
.ta .ta-bub {
  font-size:17px;
  line-height:1.45;
  padding:12px 16px;
  border-radius:16px 16px 16px 4px;
  letter-spacing:-.005em;
  background:var(--ta-bubble);
  color:var(--ink);
}
.ta .ta-msg.is-out .ta-bub { background:var(--blue); color:var(--white); border-radius:16px 16px 4px 16px; }

.ta-outcome { border-top:1px solid var(--line); background:var(--surface); padding:14px 22px 16px; }
.ta-res { display:flex; gap:12px; align-items:flex-start; }
.ta-ic {
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--blue);
  color:var(--white);
  display:grid;
  place-items:center;
  margin-top:1px;
}
.ta-res h3 { font-size:20px; line-height:1.3; letter-spacing:-.02em; }
.ta-res p { margin-top:2px; font-size:15px; line-height:1.45; }
.ta-outcome.is-two { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:start; }
.ta-or { align-self:center; font-size:14px; color:var(--muted); }
.ta-res.is-alt .ta-ic { background:var(--white); color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--blue); }

.ta-frame-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 6px 0;
  font-size:14px;
  color:var(--muted);
}
.ta-replay {
  min-height:44px;
  padding:0 4px;
  border:0;
  background:none;
  font-size:15px;
  font-weight:600;
  color:var(--blue);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:rgba(31,69,201,.4);
}
.ta-replay:hover { color:var(--blue-ink); text-decoration-color:currentColor; }

/* One replayed sequence, additive: everything is visible without it. */
@media (prefers-reduced-motion:no-preference) {
  .ta-panel.is-playing [data-s] {
    animation:ta-rise .45s cubic-bezier(.2,.7,.2,1) both;
    animation-delay:calc(var(--d) * 1s);
  }
}
@keyframes ta-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .ta-replay { display:none; } }

/* Every step */
.ta-flow { padding-top:112px; }
.ta-flow h2,.ta-stand h2 { font-size:44px; line-height:1.08; letter-spacing:-.035em; }
.ta-section-lede { margin-top:14px; font-size:19px; max-width:34em; }
.ta-lanes {
  margin-top:40px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:0 40px;
}
.ta-lane { padding:36px 0 40px; }
.ta-lane + .ta-lane { border-top:1px solid var(--line); }
.ta-lane h3 { font-size:22px; letter-spacing:-.02em; line-height:1.2; }
.ta-lane-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px 32px; flex-wrap:wrap; }
.ta-lane-links { display:flex; gap:28px; flex-wrap:wrap; font-size:16px; }
.ta-lane-links .ta-link { display:inline-flex; align-items:center; min-height:44px; margin:-10px 0; }
.ta-track {
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  gap:0 28px;
  position:relative;
}
.ta-track.is-six { grid-template-columns:repeat(5,1fr) 1.25fr; }
.ta-track.is-four { grid-template-columns:1fr 1fr 1.6fr 1.6fr; }
.ta-track::before { content:""; position:absolute; left:0; right:0; top:6px; height:1.5px; background:var(--line); }
.ta-stn { position:relative; padding-top:32px; }
.ta-stn::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--white);
  border:1.5px solid var(--line-strong);
}
.ta-stn.is-key::before { background:var(--blue); border-color:var(--blue); }
.ta-stn h4 { font-size:16px; font-weight:650; line-height:1.35; letter-spacing:-.005em; }
.ta-stn.is-key h4 { color:var(--blue); }
.ta-stn > p { margin-top:6px; font-size:15px; line-height:1.5; }
.ta-fork { margin-top:12px; border-left:1.5px solid var(--line); display:flex; flex-direction:column; gap:14px; }
.ta-fork p { position:relative; padding-left:20px; font-size:15px; line-height:1.5; }
.ta-fork p::before { content:""; position:absolute; left:0; top:11px; width:12px; height:1.5px; background:var(--line); }
.ta-fork b { color:var(--ink); font-weight:650; }
.ta-loop { margin-top:32px; font-size:15px; line-height:1.5; max-width:48em; }

.ta-shot {
  margin:56px 0 0;
  display:grid;
  grid-template-columns:360px 1fr;
  gap:40px;
  align-items:center;
}
.ta-shot figcaption { font-size:16px; line-height:1.55; color:var(--muted); }
.ta-shot figcaption strong {
  display:block;
  margin-bottom:10px;
  font-size:22px;
  line-height:1.25;
  font-weight:680;
  letter-spacing:-.02em;
  color:var(--ink);
}
.ta-shot-frame { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px; }
.ta-shot img { display:block; width:100%; height:auto; border-radius:8px; box-shadow:var(--ta-lift); }

/* Where it stands */
.ta-stand { padding-top:112px; }
.ta-stand .wrap { display:grid; grid-template-columns:360px 1fr; gap:40px; align-items:center; }
.ta-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.ta-facts p { font-size:16px; line-height:1.55; padding-top:20px; border-top:2px solid var(--ink); }
.ta-facts b { display:block; margin-bottom:4px; color:var(--ink); font-weight:650; }

/* The application: the existing two-step form in one white box. */
.ta .waitlist { background:none; padding:112px 0; }
.ta .waitlist-layout {
  display:block;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:72px 40px;
}
.ta .waitlist-heading { text-align:center; }
.ta .waitlist-heading h2 { font-size:52px; line-height:1.08; letter-spacing:-.04em; max-width:none; }
.ta .waitlist-heading>p { margin:16px auto 0; font-size:19px; line-height:1.5; max-width:28em; }
.ta .form-area {
  max-width:680px;
  margin:48px auto 0;
  padding:40px 0 0;
  background:none;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
}
.ta .form-step legend { font-weight:650; letter-spacing:-.015em; }
.ta input,.ta select { border-color:var(--line-strong); border-radius:8px; }
.ta input:hover,.ta select:hover { border-color:var(--muted); }
.ta input[aria-invalid="true"],.ta select[aria-invalid="true"] { border-color:var(--warning); }

.ta footer { border-top:1px solid var(--line); padding:28px 0 32px; }

/* Narrower */
@media (max-width:1180px) {
  .ta-split { grid-template-columns:1fr; gap:20px; }
  .ta-lanes { padding:0 28px; }
  .ta-track.is-six,.ta-track.is-four { grid-template-columns:1fr; gap:28px; }
  .ta-track::before { left:6px; right:auto; top:6px; bottom:6px; width:1.5px; height:auto; }
  .ta-stn { padding:0 0 0 36px; }
  .ta-shot,.ta-stand .wrap { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:900px) {
  .ta-facts { grid-template-columns:1fr; gap:28px; }
  .ta h1 span { display:block; }
}
@media (max-width:640px) {
  .ta main [id] { scroll-margin-top:80px; }
  .ta-long { display:none; }
  .ta-hero { padding:36px 0 28px; }
  .ta-for { font-size:16px; }
  .ta h1 { font-size:40px; letter-spacing:-.04em; }
  .ta-lede { font-size:18px; }
  .ta-arm { padding:20px 12px 12px; border-radius:14px; }
  .ta-arm h2 { font-size:28px; }
  .ta-arm-head p { font-size:17px; }
  .ta-arm-foot { margin-top:8px; }
  .ta-frame { margin-top:16px; padding:0 8px 8px; }
  .ta-frame-bar { min-height:44px; padding:0 4px; }
  .ta-record { padding:16px; }
  .ta-record small { font-size:16px; }
  .ta-cell { padding:8px 4px; font-size:14px; }
  .ta-cell svg { display:none; }
  .ta-thread { padding:18px 16px; }
  .ta-msg { max-width:92%; }
  .ta-res p { font-size:16px; }
  .ta-outcome { padding:16px; }
  .ta-outcome.is-two { grid-template-columns:1fr; gap:14px; }
  .ta-or { align-self:start; padding-left:40px; }
  .ta-frame-foot { padding:4px 4px 0; }
  .ta-flow,.ta-stand { padding-top:88px; }
  .ta-flow h2,.ta-stand h2,.ta .waitlist-heading h2 { font-size:36px; }
  .ta-section-lede,.ta .waitlist-heading>p { font-size:18px; }
  .ta-lanes { padding:0 20px; margin-top:32px; }
  .ta-lane { padding:28px 0 32px; }
  .ta-stn > p,.ta-fork p,.ta-loop { font-size:16px; }
  .ta-shot { margin-top:40px; }
  .ta-shot-frame { padding:8px; border-radius:14px; }
  .ta .waitlist { padding:88px 0; }
  .ta .waitlist-layout { padding:48px 20px; border-radius:14px; }
  .ta .form-area { margin-top:36px; padding-top:32px; }
}