/* Marketing pages use the same card motion as the app.
   Tokens match the names in tw.css. No background wash. */
:root{
  --brand:var(--primary);
  --surface:var(--panel);
  --sep:var(--line);
  --sh1:0 1px 2px rgba(0,0,0,.04);
  --sh3:0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.04);
}
html[data-theme="dark"]{
  --sh1:0 1px 2px rgba(0,0,0,.35);
  --sh3:0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
}
@keyframes tfStage{0%{opacity:0;transform:translateY(36px) scale(.98)}70%{opacity:1;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@keyframes tfRise{0%{opacity:0;transform:translateY(42px) scale(.88)}58%{opacity:1;transform:translateY(-10px) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes tfRail{0%,100%{transform:scaleY(.4);opacity:.35}50%{transform:scaleY(1);opacity:1}}
@keyframes tfRailIn{from{transform:scaleY(.2);opacity:.35}to{transform:scaleY(1);opacity:1}}

.page{animation:tfStage .72s cubic-bezier(.16,1,.3,1) backwards}

.hero-copy,
.hero:not(:has(.hero-grid)){position:relative}
.hero-copy{padding-left:18px}
.hero:not(:has(.hero-grid)){padding-left:18px}
.hero-copy::before,
.hero:not(:has(.hero-grid))::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:980px;
  background:var(--brand);transform-origin:center;animation:tfRail 1.5s ease-in-out infinite;pointer-events:none}

.tf-tile,
.feat,
.steps-compact .step,
.flow > article,
.job-rail .mkt-tile,
.safe-compact .sf,
.pl,
.faq-list details,
.compare-wrap,
.sample-show,
.section,
.page > .card,
.cards .card,
.agent,
.deliver .box,
.faq-item,
.page .step{
  position:relative;
  animation:tfRise .78s cubic-bezier(.16,1,.3,1) backwards;
}
.feat,
.steps-compact .step,
.flow > article,
.safe-compact .sf{
  background:var(--surface);
  border:1px solid var(--sep);
  border-radius:16px;
  padding:16px 16px 16px 22px;
  box-shadow:var(--sh1);
}
.job-rail .mkt-tile{
  opacity:1;
  background:var(--surface);
  border:1px solid var(--sep);
  border-radius:16px;
  box-shadow:var(--sh1);
  padding:12px 14px 12px 20px;
}
.feat::before,
.steps-compact .step::before,
.flow > article::before,
.job-rail .mkt-tile::before,
.safe-compact .sf::before,
.pl::before,
.section::before,
.page > .card::before,
.cards .card::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:980px;
  background:var(--brand);transform-origin:center;animation:tfRailIn .7s cubic-bezier(.16,1,.3,1) backwards;pointer-events:none}

.feat-spine .feat:nth-child(2){animation-delay:.08s}
.feat-spine .feat:nth-child(3){animation-delay:.16s}
.feat-spine .feat:nth-child(4){animation-delay:.24s}
.steps-compact .step:nth-child(2){animation-delay:.08s}
.steps-compact .step:nth-child(3){animation-delay:.16s}
.steps-compact .step:nth-child(4){animation-delay:.24s}
.flow > article:nth-child(2){animation-delay:.08s}
.flow > article:nth-child(3){animation-delay:.16s}
.job-rail .mkt-tile:nth-child(1){animation-delay:.04s}
.job-rail .mkt-tile:nth-child(2){animation-delay:.08s}
.job-rail .mkt-tile:nth-child(3){animation-delay:.12s}
.job-rail .mkt-tile:nth-child(4){animation-delay:.16s}
.job-rail .mkt-tile:nth-child(5){animation-delay:.2s}
.job-rail .mkt-tile:nth-child(6){animation-delay:.24s}
.job-rail .mkt-tile:nth-child(7){animation-delay:.28s}
.job-rail .mkt-tile:nth-child(8){animation-delay:.32s}
.job-rail .mkt-tile:nth-child(9){animation-delay:.36s}
.safe-compact .sf:nth-child(2){animation-delay:.08s}
.safe-compact .sf:nth-child(3){animation-delay:.16s}
.plans .pl:nth-child(2){animation-delay:.08s}
.plans .pl:nth-child(3){animation-delay:.16s}
.plans .pl:nth-child(4){animation-delay:.24s}
.section:nth-of-type(2){animation-delay:.06s}
.section:nth-of-type(3){animation-delay:.12s}
.section:nth-of-type(4){animation-delay:.18s}
.section:nth-of-type(5){animation-delay:.24s}
.section:nth-of-type(6){animation-delay:.3s}
.section:nth-of-type(7){animation-delay:.36s}

@media (prefers-reduced-motion:no-preference){
  .tf-tile:hover,
  .feat:hover,
  .steps-compact .step:hover,
  .flow > article:hover,
  .job-rail .mkt-tile:hover,
  .safe-compact .sf:hover,
  .pl:hover,
  .faq-list details:hover,
  .section:hover,
  .page > .card:not(.legal):hover,
  .cards .card:hover,
  .agent:hover,
  .faq-item:hover{
    transform:translateY(-0.25rem);
    box-shadow:var(--sh3);
  }
}
@media (prefers-reduced-motion:reduce){
  .page,
  .tf-tile,.feat,.steps-compact .step,.flow > article,.job-rail .mkt-tile,.safe-compact .sf,
  .pl,.faq-list details,.compare-wrap,.sample-show,.section,.page > .card,.cards .card,
  .agent,.deliver .box,.faq-item,.page .step{
    animation:none;opacity:1;transform:none}
  .hero-copy::before,
  .hero:not(:has(.hero-grid))::before,
  .feat::before,.steps-compact .step::before,.flow > article::before,.job-rail .mkt-tile::before,
  .safe-compact .sf::before,.pl::before,.section::before,.page > .card::before,.cards .card::before{
    animation:none;transform:none;opacity:1}
  .tf-tile:hover,.feat:hover,.steps-compact .step:hover,.flow > article:hover,.job-rail .mkt-tile:hover,
  .safe-compact .sf:hover,.pl:hover,.section:hover,.page > .card:hover,.cards .card:hover{
    transform:none}
}