:root{font-family:"DM Sans",Arial,sans-serif;color:#080808;background:#fff;--serif:"Hedvig Letters Serif",Georgia,serif;--accent:#9438c0}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.wrap{width:min(1120px,calc(100% - 96px));margin-inline:auto}
header{min-height:94px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;gap:7px;justify-self:start;font:24px var(--serif);letter-spacing:-.04em}.brand img{display:block}nav{display:flex;gap:36px}nav button{border:0;background:none;padding:10px 0;color:#626262;transition:color .2s}nav button:hover{color:#080808}header>.pill{justify-self:end}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 23px;border-radius:99px;border:1px solid #dedde2;background:white;font-size:14px;font-weight:600;transition:transform .23s cubic-bezier(.2,.75,.25,1),box-shadow .23s,background-color .23s;white-space:nowrap}.pill:not(.primary):hover{transform:translateY(-2px);background-color:#faf7fc;box-shadow:0 5px 15px #48345614}.primary:hover{transform:translateY(-2px)}.pill:active{transform:scale(.97)}.primary{color:white;border-color:#da89d3;background:linear-gradient(105deg,#913abd,#c43a72 56%,#cf286e);box-shadow:inset 0 0 0 1px #ffffff60}.primary:hover{box-shadow:inset 0 0 0 1px #ffffff85,0 5px 20px #ca529b40}
.hero{min-height:calc(100svh - 94px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:22px;padding:36px 0 100px}.copy h1{font:400 clamp(46px,5.25vw,74px)/1.12 var(--serif);letter-spacing:-.04em;margin:0;text-wrap:balance}.copy p{color:#5f5f5f;font-size:17px;line-height:1.45;max-width:385px;margin:22px 0 38px}.actions{display:flex;gap:12px;flex-wrap:wrap}
.visual{position:relative;aspect-ratio:1.06;min-width:0;isolation:isolate}.orb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:breathe 8s ease-in-out infinite alternate}.card{position:absolute;border:1px solid #e7e4eb;border-radius:15px;background:#ffffffef;box-shadow:0 5px 23px #472d6012;text-align:left;padding:13px 16px;font-size:14px;line-height:1.45;transition:transform .25s,box-shadow .25s}.card:hover{transform:translateY(-4px);box-shadow:0 9px 23px #472d6026}.card strong,.inquiry span{display:block}.inquiry{left:2%;top:53%}.inquiry span{color:#666}.reply{right:1%;top:30%}.deposit{right:8%;bottom:14%}.spark{color:#913abd;margin-right:5px}@keyframes breathe{to{transform:translateY(-9px) scale(1.025)}}
dialog{color:inherit;width:min(510px,calc(100% - 32px));border:1px solid #e8e2ec;border-radius:23px;padding:32px;box-shadow:0 25px 80px #34203b30}dialog::backdrop{background:#20112844;backdrop-filter:blur(4px)}dialog h2{font:32px/1.15 var(--serif);margin:0 32px 22px 0}dialog p{color:#56525a;line-height:1.55}.close{position:absolute;right:16px;top:16px;border:0;border-radius:50%;width:36px;height:36px;background:#f6f0f8;font-size:24px}.steps{display:flex;gap:4px;padding:4px;border-radius:99px;background:#f4eff7}.steps button{flex:1;border:0;border-radius:99px;background:none;padding:9px 5px}.steps [aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #35213c19}#example{min-height:148px;padding-top:22px}#example p{margin:8px 0}
@media(max-width:750px){.wrap{width:calc(100% - 40px)}header{min-height:76px;grid-template-columns:1fr auto;gap:12px}nav{display:none}.hero{grid-template-columns:1fr;gap:25px;padding:42px 0 40px;min-height:auto}.copy h1{font-size:clamp(40px,9vw,62px);text-wrap:initial}.copy p{margin:17px 0 24px}.visual{width:min(100%,510px);justify-self:center}.card{font-size:12px;padding:9px 10px}.reply{right:0}.deposit{right:4%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.visual{overflow:clip;overflow-clip-margin:24px}
.orb{scale:1.34}
.inquiry{top:62%}
.reply{top:32%}
.deposit{bottom:16%}
@media(max-width:750px){.visual{overflow-clip-margin:12px}.orb{scale:1.24}.inquiry{top:57%}.deposit{bottom:12%}}

/* Kavi's measured desktop content width and headline rhythm. */
.wrap{width:min(1080px,calc(100% - 80px))}
header{min-height:88px}
.hero{grid-template-columns:minmax(0,482px) minmax(0,1fr);gap:26px;min-height:calc(100svh - 88px)}
.copy h1{font-size:68px;line-height:1.3;letter-spacing:-.02em;text-wrap:initial}
.copy p{margin:24px 0 36px;font-size:16px}
.primary{background:linear-gradient(105deg,#a447cf,#e04c75 62%,#d22a73)}
@media(max-width:1050px){.copy h1{font-size:58px}}
@media(max-width:750px){.wrap{width:calc(100% - 40px)}header{min-height:76px}.hero{grid-template-columns:1fr;min-height:auto}.copy h1{font-size:clamp(36px,10.7vw,48px)}.copy p{margin:20px 0 28px}}

.copy h1{font-optical-sizing:auto;font-synthesis:none}
.copy p{font-size:16px;line-height:1.6;font-weight:400}
.pill,.card{font-weight:500}

.table-photo{position:absolute;inset:5% 7%;width:86%;height:90%;object-fit:contain;mask-image:radial-gradient(circle closest-side,#000 94%,transparent 100%)}

.hero-art{position:absolute;inset:0 0 0 auto;width:96%;height:100%;object-fit:contain;filter:saturate(.84)}
.visual{overflow:visible}
.inquiry{left:1%;top:auto;bottom:14%;z-index:1}
.reply{right:0;top:17%;z-index:1}
.deposit{right:0;bottom:5%;z-index:1}
@media(max-width:750px){.hero-art{width:100%}.inquiry{bottom:17%}.reply{top:14%}.deposit{bottom:4%}}

.hero-proof{display:flex;align-items:center;gap:13px;margin-top:60px;color:#626262;font-size:16px;line-height:1.35}
.hero-proof strong{color:#080808;font-weight:600}
.restaurant-portraits{display:flex;align-items:center;flex-shrink:0}
.restaurant-portraits span{width:40px;height:40px;border:2px solid #efeff1;border-radius:50%;background:url(assets/restaurant-portraits.jpg) 0 0 / 200% 200% no-repeat}
.restaurant-portraits span+span{margin-inline-start:-8px}
.restaurant-portraits span:nth-child(2){background-position:100% 0}
.restaurant-portraits span:nth-child(3){background-position:0 100%}
.restaurant-portraits span:nth-child(4){background-position:100% 100%}
@media(max-width:750px){.hero-proof{margin-top:32px;font-size:14px}.restaurant-portraits span{width:34px;height:34px}}

.hero-art{inset:5% 4% 5% auto;width:87%;height:90%;filter:saturate(.73);z-index:1}
/* Keep dialog geometry stable while visitors explore the example. */
dialog{max-height:calc(100dvh - 32px);overflow:auto}
.steps button,.close{min-height:44px}
.close{width:44px}
#example{min-height:160px}
@media(max-width:360px){
  header .brand{font-size:20px;gap:4px}
  header .brand img{width:28px;height:28px}
  header>.pill{padding-inline:9px}
  .hero-proof{gap:8px}
  .steps button{font-size:12px}
}
@media(max-width:750px){
  .visual{width:100%;max-width:510px}
}

.hero .visual{display:grid;gap:14px;aspect-ratio:auto;width:88%;justify-self:center}
.hero .hero-art{background:#eee9e4;position:static;width:100%;height:auto;aspect-ratio:4/3;display:block;object-fit:cover;border-radius:36px;filter:none;box-shadow:0 12px 32px #49301e12}
.guest-preview{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border:1px solid #e7e0e8;border-radius:20px;background:linear-gradient(125deg,#fff 42%,#fdf2fa)}
.guest-avatar{display:block;border-radius:50%;object-fit:cover}
.guest-preview p{margin:0;color:#292330;font-size:15px;line-height:1.45}
.draft-status{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 9px;border:1px solid #eee0ef;border-radius:99px;background:#fff;color:#79318e;font-size:12px;line-height:1.35}
@media(max-width:750px){.hero .visual{width:96%}.hero .hero-art{border-radius:26px}.guest-preview{padding:12px;gap:9px}.guest-preview p{font-size:14px}}

@media (min-width:751px){
  .hero{align-items:start;grid-template-columns:minmax(0,482px) minmax(0,1fr);gap:clamp(32px,5vw,76px);padding-top:clamp(68px,11vh,104px)}
  .hero .visual{width:100%;justify-self:end;margin-top:14px}
  .guest-preview{width:82%;justify-self:start}
}
@media (min-width:751px) and (max-width:950px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .copy h1{font-size:clamp(38px,5.5vw,52px)}
  .guest-preview{width:100%}
}

/* Keep the hero content-sized so the next section can start naturally. */
.hero{min-height:auto}
.pill{font-weight:500}
@media (min-width:751px){
  .hero{padding-top:clamp(50px,8.3vh,80px);padding-bottom:64px}
  .copy p{margin-top:18px}
  .hero .visual{width:min(100%,480px);margin-top:14px;gap:14px}
  .guest-preview{width:min(100%,370px);justify-self:end}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  .guest-preview{
    transition:transform 220ms ease-out,box-shadow 220ms ease-out;
  }
  .guest-preview:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 18px #39224c12;
  }
}

nav a{padding:10px 0;color:#626262;transition:color .2s}
nav a:hover{color:#080808}
.workflow{background:#f5f5f5;padding:64px 0 72px;scroll-margin-top:16px}
.workflow-intro{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:48px;margin-bottom:64px}
.workflow-intro h2{margin:0;font:400 clamp(38px,4.2vw,52px)/1.2 var(--serif);letter-spacing:-.025em}
.workflow-intro p{margin:0;color:#5f5f5f;font-size:16px;line-height:1.5;max-width:405px}
.workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.workflow-grid li{display:flex;min-width:0}
.workflow-card{width:100%;display:grid;grid-template-rows:140px auto 1fr;gap:9px;text-align:left;padding:24px;border:4px solid transparent;border-radius:17px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#a44de7,#ff796f 55%,#ff478e) border-box;transition:transform .22s ease,box-shadow .22s ease}
.workflow-card:focus-visible{outline-offset:5px}
.workflow-visual{display:grid;place-items:center;min-width:0}
.mini-ui{display:flex;align-items:center;gap:10px;max-width:100%;padding:12px;border:1px solid #dedbe1;border-radius:10px;background:#fff;box-shadow:0 4px 12px #49344c0d}
.mini-ui strong,.mini-ui small{display:block;line-height:1.4}
.mini-ui strong{font-size:13px;font-weight:600}
.mini-ui small{color:#625e65;font-size:11px}
.mini-icon{display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:8px;background:linear-gradient(130deg,#f2e1fc,#ffe3ed);color:#79318e;font-size:17px}
.workflow-title{font:400 25px/1.2 var(--serif);letter-spacing:-.025em}
.workflow-description{color:#5f5f5f;font-size:15px;line-height:1.45}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .workflow-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px #57326318}
}
@media(max-width:850px){.workflow-grid{gap:14px}.workflow-card{padding:16px}}
@media(max-width:680px){
  .workflow{padding:48px 0}
  .workflow-intro{grid-template-columns:1fr;gap:14px;margin-bottom:28px}
  .workflow-grid{grid-template-columns:1fr;gap:14px}
  .workflow-card{grid-template-rows:104px auto auto;padding:18px}
}

.workflow-card{border-width:4px;border-top-width:16px;padding:22px 24px}
.workflow-grid li:nth-child(2) .workflow-card{border-top-width:4px;border-bottom-width:16px}
.diagram{position:relative;display:grid;align-content:center;gap:5px;width:min(100%,230px);min-height:96px;padding:13px 15px;border:1px solid #d8d4da;color:#242025}
.diagram strong{font-size:14px;font-weight:600;line-height:1.25}
.diagram-caption{font-size:11px;color:#625b64}
.diagram-line{display:block;height:4px;border-radius:2px;width:78%;background:#e9e5eb}
.diagram-line.short{width:48%}
.diagram-tag,.diagram-tooltip{position:absolute;padding:4px 8px;border-radius:6px;border:1px solid #ebcce2;background:#fff1f7;color:#852962;font-size:10px}
.diagram-tag{right:8px;bottom:10px}
.diagram-tooltip{right:11px;top:-15px;background:#fff;box-shadow:0 3px 10px #9d517322}
.draft-diagram{border-radius:7px}
.draft-diagram .diagram-line:first-of-type{background:#efb4dc}
.booking-diagram{text-align:center;justify-items:center;background:linear-gradient(90deg,#f6eef8,transparent 40% 60%,#fdf0f4)}
.diagram-confirm{border:1px solid #e8cee0;border-radius:7px;padding:8px;background:#fff;color:#842e70}

/* Shared illustration and text baselines across the workflow cards. */
.workflow-card{grid-template-rows:148px auto 1fr;border-bottom-width:4px}
.workflow-grid li:nth-child(2) .workflow-card{border-top-width:16px;border-bottom-width:4px}
.mail-diagram{outline:1px solid #eee9ef;outline-offset:7px}
.mail-diagram strong{justify-self:start;background:linear-gradient(transparent 52%,#f5c2e7 52%);padding-inline:2px}
.draft-diagram{background:linear-gradient(#faf7fb 0 31px,#fff 31px)}
.draft-diagram .diagram-line{background:#ecd2e9}
.booking-diagram{min-height:90px;border-radius:0;background:#fff;border-color:#dfd8e2}
.diagram-confirm{box-shadow:0 4px 14px #b668a322}
@media(max-width:680px){.workflow-card{grid-template-rows:110px auto auto;padding:18px}}

.pricing {
  background: #fff;
  padding: 72px 0 88px;
  scroll-margin-top: 16px;
}
.pricing .workflow-intro { margin-bottom: 44px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.pricing-card {
  display: flex;
  min-width: 0;
  padding: 9px 3px 3px;
  border-radius: 24px;
  background: #e9e6eb;
}
.pricing-paid {
  background: linear-gradient(115deg, #a44de7, #ff796f 55%, #ff478e);
}
.pricing-offer {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  width: 100%;
  min-width: 0;
  padding: clamp(20px, 3vw, 34px);
  border-radius: 17px 17px 21px 21px;
  background: #fff;
}
.pricing-offer h3 { margin: 0; font-size: 23px; font-weight: 500; }
.pricing-rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 14px 0;
  color: #625d65;
}
.pricing-rate strong { font: 400 62px/1 var(--serif); color: #080808; }
.pricing-offer > p:not(.pricing-rate) { margin: 0 0 24px; color: #625d65; line-height: 1.5; }
.pricing-offer .pill { width: 100%; }
.pricing-features {
  display: grid;
  align-content: start;
  gap: 9px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: #514c55;
  font-size: 14px;
}
.pricing-features li { display: flex; align-items: baseline; }
.pricing-features li::before { content: "✓"; margin-right: 8px; color: #79318e; }
@media (max-width: 680px) {
  .pricing { padding: 48px 0 56px; }
  .pricing .workflow-intro { margin-bottom: 28px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
}

.faq { background:#fff; border-top:1px solid #eee9ef; padding:56px 0 28px; scroll-margin-top:16px; }
.faq-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; }
.faq h2 { margin:0 0 18px; font:400 clamp(38px,4.2vw,52px)/1.2 var(--serif); letter-spacing:-.025em; }
.faq-intro p { margin:0; max-width:425px; color:#5f5f5f; line-height:1.5; }
.faq-intro img { display:block; width:min(100%,360px); aspect-ratio:1; object-fit:contain; margin:16px auto 0; }
.faq-list { display:grid; align-content:start; gap:20px; }
.faq details { border:1px solid #ddd; border-radius:16px; background:#fff; }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:70px; padding:16px 24px; list-style:none; cursor:pointer; font:400 18px/1.3 var(--serif); letter-spacing:-.02px; border-radius:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { background:#fbf9fc; }
.faq summary:focus-visible { outline:2px solid #79318e; outline-offset:3px; }
.faq summary span { position:relative; flex:0 0 17px; height:17px; }
.faq summary span::before,.faq summary span::after { content:""; position:absolute; top:8px; left:0; width:17px; height:1px; background:currentColor; }
.faq summary span::after { transform:rotate(90deg); }
.faq details[open] summary span::after { transform:rotate(0); }
.faq details p { margin:0; padding:0 24px 20px; color:#5f5f5f; font:400 16px/1.55 "DM Sans", sans-serif; }
@media (max-width:680px) {
  .faq { padding:48px 0; }
  .faq-layout { grid-template-columns:1fr; gap:24px; }
  .faq-intro img { width:180px; }
  .faq-list { gap:12px; }
  .faq summary { min-height:62px; padding-inline:16px; font-size:16px; }
  .faq details p { padding-inline:16px; }
}

.faq details[open] summary { background: transparent; }
.faq details p { padding-top: 2px; padding-bottom: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .faq summary span::after { transition: transform 240ms ease; }
  @supports (interpolate-size: allow-keywords) and (selector(details::details-content)) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details::details-content {
      height: 0;
      overflow: clip;
      opacity: 0;
      transition: height 280ms cubic-bezier(.22,.8,.24,1), opacity 200ms ease,
        content-visibility 280ms allow-discrete;
    }
    .faq details[open]::details-content { height: auto; opacity: 1; }
  }
}

.closing {
  background: #f5f5f5;
  padding: 12px 0 64px;
}
.closing-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 40px;
  background: #fff;
}
.closing-copy {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 5.55vw, 60px);
  max-width: min(58%, 620px);
}
.closing-copy h2 {
  margin: 0;
  font: 400 clamp(34px, 4.4vw, 56px)/1.22 var(--serif);
  letter-spacing: -.025em;
}
.closing-copy p {
  margin: 20px 0 28px;
  max-width: 35ch;
  color: #5f5f5f;
  line-height: 1.5;
}
.closing-panel > img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 51%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  background-color: #eee4d8;
  mask-image: linear-gradient(to right, transparent, #000 28%);
}
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding: 32px 0;
}
.footer-brand { display: flex; align-items: baseline; gap: 12px; }
.footer-brand .brand { flex-shrink: 0; font-size: 19px; gap: 5px; }
.footer-brand .brand img { width: 24px; height: 24px; }
.site-footer p { margin: 0; padding-inline-start: 12px; border-inline-start: 1px solid #e4dfe6; color: #5f5f5f; font-size: 13px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 14px; }
.site-footer nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 750px) {
  .closing { padding-bottom: 40px; }
  .closing-panel { border-radius: 26px; }
  .closing-copy { max-width: none; }
  .closing-panel > img { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 16/10; margin: 0; mask-image: none; }
  .site-footer { padding: 26px 0; }
}

.site-footer nav button {
  border: 0;
  padding: 10px 0;
  background: transparent;
  color: #626262;
}
.site-footer nav button:hover,
.legal-dialog a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.legal-dialog { width: min(680px, calc(100% - 32px)); }
.legal-dialog h3 { margin: 22px 0 6px; font-size: 17px; }
.legal-dialog p { margin: 0; }
.legal-meta { font-size: 14px; }

.purchase-layout > div { scroll-margin-top: 20px; }
.pricing-free { background: #fff; box-shadow: inset 0 0 0 1px #e3dfe6; }
.pricing-offer { grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
.pricing-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
.purchase-layout .pricing-grid { column-gap: 24px; row-gap: 0; }

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  gap: clamp(24px, 5vw, 72px);
}
.faq h2 { margin: 0; font-size: clamp(32px, 3.6vw, 44px); }
.faq-list { gap: 0; border-top: 1px solid #e9e6eb; }
.faq details { border: 0; border-bottom: 1px solid #e9e6eb; border-radius: 0; }
.faq summary { min-height: 60px; padding-inline: 0; border-radius: 0; }
.faq details p { padding-inline: 0; max-width: 60ch; }
@media (max-width: 680px) {
  .purchase-layout .pricing-grid { row-gap: 16px; }
  .pricing-card, .pricing-offer { grid-row: auto; grid-template-rows: auto; }
  .faq-layout { grid-template-columns: 1fr; gap: 24px; }
}

html:has(.legal-dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}
.legal-dialog {
  overflow: hidden;
  padding: 0;
}
.legal-dialog .legal-content {
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(20px, 4vw, 32px);
  scrollbar-width: thin;
  scrollbar-color: #c8becd transparent;
}
.legal-dialog .close { z-index: 1; }


/* Reserve space for the tallest answer while keeping native disclosure controls. */
.faq-list {
  min-height: var(--faq-list-height, 0px);
}
.faq details::details-content {
  content-visibility: visible;
  height: 0;
  overflow: clip;
  visibility: hidden;
}
.faq details[open]::details-content {
  height: auto;
  visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content {
    transition: height 280ms cubic-bezier(.22,.8,.24,1), opacity 280ms ease,
      visibility 280ms allow-discrete;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .workflow-grid li.is-visible {
    animation: settle-into-view 240ms cubic-bezier(.22,.8,.24,1) backwards;
  }

  @media (min-width: 681px) {
    .workflow-grid li.is-visible:nth-child(2) { animation-delay: 50ms; }
    .workflow-grid li.is-visible:nth-child(3) { animation-delay: 100ms; }
  }
}

@keyframes settle-into-view {
  from { translate: 0 8px; }
  to { translate: 0 0; }
}