/*
 * The marketing pages (resources/views/site), over public/central/central.css (the app's tokens, light and
 * dark, Sofia Sans, buttons). Phone width first. One bold thing: the display type and the app's own screens
 * drawn in HTML (made-up names, no faces); everything else stays quiet. Sofia Sans Extra Condensed (SIL Open
 * Font License, latin) for the display line and the numbers that matter, as in the app (--ez-num).
 */
@font-face {
  font-family: 'Sofia Sans Extra Condensed Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 1 1000;
  src: url(sofia-sans-extra-condensed.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ez-num: 'Sofia Sans Extra Condensed Variable', 'Sofia Sans Variable', 'Arial Narrow', sans-serif;
  /* The camera: dark in both themes, as in the app */
  --ez-stage: #0d1218;
  --ez-face-ok: #34d399;
  --av-s: 62%;
  --av-l: 86%;
  --av-ink: hsl(250 40% 22%);
}
@media (prefers-color-scheme: dark) {
  :root { --av-s: 36%; --av-l: 30%; --av-ink: hsl(250 60% 93%); }
}

body.site { font-size: 16px; line-height: 1.55; }
.frame { max-width: 1100px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 2; display: inline-flex; align-items: center; min-height: var(--ez-tap); padding: 0 16px; border-radius: var(--ez-r-md); background: var(--ez-primary); color: var(--ez-on-primary); }
.skip:focus { top: 8px; }
.tone-in { color: var(--ez-in); }
.tone-low { color: var(--ez-low); }

/* The top: the name home, the languages; then the pages and the way back into the app */
.bar { display: flex; align-items: center; gap: 8px; min-height: 60px; padding-top: max(4px, env(safe-area-inset-top)); }
.home { display: inline-flex; align-items: center; gap: 10px; min-height: var(--ez-tap); margin-right: auto; color: var(--ez-ink); text-decoration: none; }
.home .brand { margin: 0; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--ez-line); }
.menu a { display: inline-flex; align-items: center; min-height: var(--ez-tap); padding: 0 12px; border-radius: var(--ez-r-md); color: var(--ez-ink); text-decoration: none; font-weight: 650; }
.menu a[aria-current='page'] { background: var(--ez-primary-soft); color: var(--ez-on-primary-soft); }
.menu .signin { margin-left: auto; color: var(--ez-primary); }

/* Type */
.display {
  font-family: var(--ez-num); font-weight: 800; font-size: clamp(46px, 12.5vw, 76px); line-height: 0.94;
  letter-spacing: -0.005em; margin: 28px 0 14px; text-wrap: balance;
}
.hero .display { font-size: clamp(52px, 15vw, 92px); margin-top: 8px; }
.display:lang(zh-CN) { font-family: var(--ez-body); font-size: clamp(34px, 9.5vw, 56px); line-height: 1.15; letter-spacing: 0.02em; }
.hero .display:lang(zh-CN) { font-size: clamp(38px, 11vw, 64px); }
.site .lead { font-size: 17px; line-height: 1.55; color: var(--ez-ink-muted); max-width: 36em; margin: 0 0 18px; }
.site h2 { font-size: 24px; font-weight: 800; line-height: 1.2; margin: 0 0 16px; text-wrap: balance; }
.site h3 { font-size: 18px; font-weight: 800; line-height: 1.3; margin: 0 0 4px; }
.site p { margin: 0 0 12px; }
.small { font-size: 14px; }
.more { display: inline-flex; align-items: center; min-height: var(--ez-tap); font-weight: 750; }

/* The two ways on: sign-up, and back into the app */
.actions-row { display: grid; gap: 8px; margin: 22px 0 10px; }
.actions-row .btn { min-height: 52px; font-size: 16px; }

/* Sections */
.block { margin-top: 56px; }
.hero { display: grid; gap: 28px; padding: 20px 0 0; }

/* The scanner, drawn: a phone's bezel, the camera (no one in it), the card panel */
.phone { margin: 0 auto; width: 100%; max-width: 360px; padding: 9px; border-radius: 38px; background: var(--ez-surface-high); }
.stage { position: relative; height: 158px; border-radius: 30px 30px 0 0; background: var(--ez-stage); color: #fff; }
.corner { position: absolute; width: 26px; height: 26px; border: 0 solid rgb(255 255 255 / 75%); }
.corner.tl { left: calc(50% - 56px); top: 46px; border-width: 3px 0 0 3px; border-top-left-radius: 10px; }
.corner.tr { right: calc(50% - 56px); top: 46px; border-width: 3px 3px 0 0; border-top-right-radius: 10px; }
.corner.bl { left: calc(50% - 56px); top: 102px; border-width: 0 0 3px 3px; border-bottom-left-radius: 10px; }
.corner.br { right: calc(50% - 56px); top: 102px; border-width: 0 3px 3px 0; border-bottom-right-radius: 10px; }
.chip { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / 14%); font-size: 13px; font-weight: 700; }
.chip.live { left: auto; right: 12px; }
.chip.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ez-face-ok); }
.panel { position: relative; margin-top: -22px; padding: 10px; display: grid; gap: 8px; border-radius: 24px 24px 30px 30px; background: var(--ez-page); }

/* A scan card (docs/design/system ScanCard) */
.sc { padding: 12px; border-radius: var(--ez-r-lg); background: var(--ez-surface); }
.sc-1 { display: flex; align-items: center; gap: 12px; }
.av { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--h, 250) var(--av-s) var(--av-l)); color: var(--av-ink); font-weight: 750; font-size: 14px; letter-spacing: 0.02em; }
.av.h1 { --h: 205; } .av.h2 { --h: 150; } .av.h3 { --h: 20; } .av.h4 { --h: 280; } .av.h5 { --h: 45; }
.sc-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-n { font-weight: 700; font-size: 16px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o { font-weight: 500; }
.sc-s { font-size: 13px; color: var(--ez-ink-muted); }
.sc-t { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tm { font-family: var(--ez-num); font-weight: 750; font-size: 22px; line-height: 1; color: var(--ez-ink); font-variant-numeric: tabular-nums; }
.sc-2 { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.dots { display: flex; flex-wrap: wrap; gap: 5px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ez-primary); }
.dots i.u { background: var(--ez-primary); }
.dots i.r { background: var(--ez-red); box-shadow: none; }
.dots-t { font-weight: 700; font-size: 14px; }
.warn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 7px; border-radius: var(--ez-r-sm); background: var(--ez-red-solid); color: var(--ez-on-solid); font-weight: 700; font-size: 13.5px; }

/* Icons (resources/views/site/partials/icon.blade.php) */
.ic { width: 20px; height: 20px; flex: none; }
.warn .ic { width: 16px; height: 16px; }
.ic-check path, .ic-help path { stroke: var(--ez-surface); }
.frag .ic-check path, .frag .ic-help path { stroke: var(--ez-page); }
.ic-warn path + path { stroke: var(--ez-red-solid); }

/* What it does: each feature over a piece of the app's screen */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.features p { color: var(--ez-ink-muted); }
.frag { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 148px; margin-bottom: 14px; padding: 14px; border-radius: var(--ez-r-lg); background: var(--ez-surface); }
.frag .sc, .frag .pkg, .frag .ask, .frag .tile, .frag .roles > div, .frag .line { background: var(--ez-page); }
.frag-stage { position: relative; height: 78px; border-radius: var(--ez-r-md); background: var(--ez-stage); }
.frag-stage .corner { width: 18px; height: 18px; border-width: 0; }
.frag-stage .corner.tl { left: calc(50% - 30px); top: 12px; border-width: 3px 0 0 3px; }
.frag-stage .corner.tr { right: calc(50% - 30px); top: 12px; border-width: 3px 3px 0 0; }
.frag-stage .corner.bl { left: calc(50% - 30px); top: 48px; border-width: 0 0 3px 3px; }
.frag-stage .corner.br { right: calc(50% - 30px); top: 48px; border-width: 0 3px 3px 0; }
.line { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--ez-r-md); }
.line b { flex: 1; color: var(--ez-ink); }
.queued { outline: 2px dashed var(--ez-outline); outline-offset: -2px; }
.soft .ic { color: var(--ez-ink-muted); }
.pkg { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--ez-r-md); }
.pkg .sc-2 { margin: 0; }
.pkg-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pill.red { background: var(--ez-red-soft); color: var(--ez-red); }
.ask { padding: 12px; border-radius: var(--ez-r-lg); outline: 2px solid var(--ez-low); outline-offset: -2px; }
.ask-t { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.ask-t span { color: var(--ez-ink); }
.cands { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cand { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: var(--ez-r-md); background: var(--ez-surface-high); font-size: 14px; }
.cand .av { width: 34px; height: 34px; font-size: 12px; }
.marker { padding: 1px 8px; border-radius: var(--ez-r-sm); background: var(--ez-primary-soft); color: var(--ez-on-primary-soft); font-weight: 700; font-size: 12px; }
.none { display: block; margin-top: 8px; padding: 9px; border-radius: var(--ez-r-md); background: var(--ez-surface-high); text-align: center; font-weight: 700; font-size: 14px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 20px; }
.frag .tile.in { background: var(--ez-in-soft); color: var(--ez-in); }
.tile-n { font-family: var(--ez-num); font-weight: 750; font-size: 44px; line-height: 1; }
.tile-l { font-weight: 700; font-size: 14px; }
.roles { display: grid; gap: 6px; }
.roles > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--ez-r-md); font-weight: 600; font-size: 14px; }

/* How it works: a real sequence, numbered */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; align-content: start; grid-template-columns: 48px 1fr; column-gap: 12px; padding: 16px 0; border-top: 1px solid var(--ez-line); }
.steps li::before { content: counter(step); grid-row: span 2; font-family: var(--ez-num); font-weight: 800; font-size: 54px; line-height: 0.9; color: var(--ez-primary); }
.steps h3 { margin-top: 4px; }
.steps p { color: var(--ez-ink-muted); margin: 0; }

/* Prices: from App\Support\Prices only */
.price { max-width: 560px; padding: 22px 18px 16px; border-radius: var(--ez-r-lg); background: var(--ez-surface); }
.amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.amount .num { font-family: var(--ez-num); font-weight: 800; font-size: 80px; line-height: 0.88; letter-spacing: -0.01em; }
.amount .per { font-weight: 700; font-size: 18px; color: var(--ez-ink-muted); }
.covers { font-weight: 750; font-size: 18px; margin: 14px 0 2px !important; }
.extra { color: var(--ez-ink-muted); }
.costs { width: 100%; border-collapse: collapse; margin-top: 14px; }
.costs caption { text-align: left; font-weight: 800; font-size: 15px; padding-bottom: 2px; }
.costs th { text-align: left; font-weight: 600; padding: 10px 0; }
.costs td { text-align: right; font-family: var(--ez-num); font-weight: 750; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; padding: 10px 0; }
.costs tr + tr > * { border-top: 1px solid var(--ez-line); }
/* The prices page: a month, and a year paid at once beside it */
.costs thead th { text-align: right; font-size: 13px; font-weight: 700; color: var(--ez-ink-muted); padding: 6px 0 4px 12px; }
.costs.both td { padding-left: 12px; }
.costs td.year { font-size: 19px; }
.notes { margin: 16px 0 4px; padding-left: 20px; max-width: 36em; }
.notes li { margin-bottom: 6px; }

/* Privacy, in short */
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.promises p { color: var(--ez-ink-muted); margin: 0; }

/* The longer pages: one readable column */
.text { max-width: 40em; }
.text h2 { font-size: 20px; margin: 30px 0 8px; }
.text ul { padding-left: 20px; margin: 0 0 12px; }
.text li { margin-bottom: 8px; }
.price + .text { margin-top: 8px; }
.legal { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 24px; }
.legal a, .site-foot a, .text p a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ez-tap); min-width: var(--ez-tap); }

/* The last word: try it */
.cta { margin: 56px 0 0; padding: 24px 18px 14px; border-radius: var(--ez-r-lg); background: var(--ez-primary-soft); color: var(--ez-on-primary-soft); }
.cta .soft { color: var(--ez-on-primary-soft); }
.cta .btn.tonal { background: var(--ez-page); color: var(--ez-primary); }

.site-foot { margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--ez-line); font-size: 14px; color: var(--ez-ink-muted); }
.site-foot p { margin: 4px 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 18px; }

/* New scan cards slide in, as in the app (with no script too) */
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } }
.panel .sc { animation: card-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.panel .sc:nth-child(2) { animation-delay: 0.35s; }
.panel .sc:nth-child(3) { animation-delay: 0.7s; }
.panel .sc:nth-child(n+4) { display: none; }
.sc-2 { min-height: 24px; }
@media (prefers-reduced-motion: reduce) { .panel .sc { animation: none; } }

/*
 * Motion (card 52), only with public/site/site.js, which adds .motion to the page unless the phone asks for
 * reduced motion. Transform and opacity only. Whatever keeps moving is in the hero, which .still holds (off
 * screen, a hidden tab); everything else plays once, under 2 seconds.
 */
:root {
  --fx-ring: color-mix(in srgb, var(--ez-primary) 13%, transparent);
  --fx-fill: color-mix(in srgb, var(--ez-primary) 30%, transparent);
  --fx-frame: color-mix(in srgb, var(--ez-primary) 55%, transparent);
  --fx-tick: color-mix(in srgb, var(--ez-in) 42%, transparent);
  --gut: 16px;
}
@media (prefers-color-scheme: dark) {
  :root { --fx-ring: color-mix(in srgb, var(--ez-primary) 17%, transparent); --fx-fill: color-mix(in srgb, var(--ez-primary) 26%, transparent); --fx-tick: color-mix(in srgb, var(--ez-in) 34%, transparent); }
}
@keyframes pop { from { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.15); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes dot-in { from { transform: scale(0.15); } 70% { transform: scale(1.2); } }
@keyframes aim { 35% { transform: scale(0.88); } }
@keyframes aim-in { from { opacity: 0; transform: scale(1.35); } }
@keyframes ok { 25%, 70% { opacity: 1; } }
@keyframes breathe { 50% { opacity: 0.3; } }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes wiggle { 20% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-5deg); } }
@keyframes roll { from { opacity: 0; transform: translateY(70%); } }
@keyframes rise { from { transform: translateY(var(--rise, 900px)); } to { transform: translateY(-60px); } }
@keyframes hunt-ok { 20%, 65% { opacity: 1; } }

/* The hero's field: behind the words and the phone, to the screen's edges */
.hero { position: relative; isolation: isolate; }
.field { position: absolute; z-index: -1; inset: -10px calc(-1 * var(--gut)) -28px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.9s; -webkit-mask-image: linear-gradient(transparent, #000 36px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(transparent, #000 36px, #000 calc(100% - 64px), transparent); }
.motion .field { opacity: 1; }
.motion .hero { touch-action: pan-y pinch-zoom; }
.field .layer { position: absolute; inset: -14px; }

/* dots: the package dots' rings, filled by a finger, a tap or a check-in */
.field.dots .layer { background-image: radial-gradient(circle, transparent 3.4px, var(--fx-ring) 3.9px 5.1px, transparent 5.6px); }
.field.dots i { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--fx-fill); opacity: 0; transform: scale(0.3); }

/* scanner: the camera's frame, and the child it checks in */
.hunt { position: absolute; left: 0; top: 0; }
.hunt b { position: absolute; width: 28px; height: 28px; border: 0 solid var(--fx-frame); }
.hunt b::after { content: ''; position: absolute; inset: -3px; border: inherit; border-color: var(--ez-face-ok); border-radius: inherit; opacity: 0; }
.hunt .tl { left: -46px; top: -46px; border-width: 3px 0 0 3px; border-top-left-radius: 12px; }
.hunt .tr { right: -46px; top: -46px; border-width: 3px 3px 0 0; border-top-right-radius: 12px; }
.hunt .bl { left: -46px; bottom: -46px; border-width: 0 0 3px 3px; border-bottom-left-radius: 12px; }
.hunt .br { right: -46px; bottom: -46px; border-width: 0 3px 3px 0; border-bottom-right-radius: 12px; }
.hunt.locked .tl { animation: lock-tl 0.8s ease-out; } .hunt.locked .tr { animation: lock-tr 0.8s ease-out; }
.hunt.locked .bl { animation: lock-bl 0.8s ease-out; } .hunt.locked .br { animation: lock-br 0.8s ease-out; }
@keyframes lock-tl { 30% { transform: translate(7px, 7px); } }
@keyframes lock-tr { 30% { transform: translate(-7px, 7px); } }
@keyframes lock-bl { 30% { transform: translate(7px, -7px); } }
@keyframes lock-br { 30% { transform: translate(-7px, -7px); } }
.hunt.locked b::after { animation: hunt-ok 1.2s ease-out; }
.got { position: absolute; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border-radius: 999px; background: var(--ez-surface); white-space: nowrap; font-size: 14px; color: var(--ez-ink); }
.got i { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--ez-in); }
.got i::after, .field .tick::after, .sent::after { content: ''; position: absolute; left: 31%; top: 22%; width: 26%; height: 44%; border: solid var(--ez-page); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.got span { font-family: var(--ez-num); font-weight: 750; font-size: 18px; line-height: 1; }

/* drift: pieces of the app, three depths */
.field .drift { inset: 0; }
.field .shape { position: absolute; top: 0; animation: rise linear infinite; }
.field .d0 .shape { scale: 0.7; } .field .d1 .shape { scale: 0.85; }
.field .tick { width: 24px; height: 24px; border-radius: 50%; background: var(--fx-tick); }
.field .tick::after { border-color: var(--ez-page); opacity: 0.9; }
.field .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fx-fill); }
.field .ring { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--fx-fill); }
.field .trio { width: 11px; height: 11px; border-radius: 50%; background: var(--fx-fill); box-shadow: 16px 0 0 var(--fx-fill), 32px 0 0 0 transparent, 32px 0 0 -0.5px var(--fx-ring); }
.sent { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--ez-in); }

/* The drawn phone, checking children in */
.panel.live { overflow: hidden; align-content: start; }
.panel.live .sc:nth-child(n+4) { display: block; opacity: 0; }
.stage .aim { position: absolute; inset: 0; transform-origin: 50% 87px; }
.corner.ok { border-color: var(--ez-face-ok); opacity: 0; }
.stage.lock .aim { animation: aim 0.8s ease-out; }
.stage.lock .corner.ok { animation: ok 1.2s ease-out; }
.motion .chip.live i { animation: breathe 2.4s ease-in-out infinite; }
.ic-check path { transform-box: fill-box; transform-origin: 0 50%; }
.sc.fresh .sc-t .ic-check { animation: pop 0.5s 0.2s both; }
.sc.fresh .sc-t .ic-check path { animation: draw 0.3s 0.5s both; }
.sc.fresh .dots i.n { animation: dot-in 0.45s 0.6s both; }
.hero.still *, .hero.still *::after { animation-play-state: paused !important; }

/* The features' pictures, once each, when they come on screen */
.frag-stage .aim { position: absolute; inset: 0; }
.tile { overflow: hidden; }
.motion .frag:not(.play) :is(.line, .cand, .pill.red, .tile-n) { opacity: 0; }
.motion .frag:not(.play) .frag-stage .aim { opacity: 0; }
.motion .frag:not(.play) .pkg .dots i.u { transform: scale(0.15); }
.motion .frag.play .frag-stage .aim { animation: aim-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.motion .frag.play .line { animation: card-in 0.45s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.motion .frag.play .line .ic-check { animation: pop 0.5s 0.7s both; }
.motion .frag.play .line .ic-check path { animation: draw 0.3s 1s both; }
.motion .frag.play .queued .ic-line { animation: bob 1.1s 0.3s ease-in-out 2; }
.motion .frag.play .pkg .dots i.u { animation: dot-in 0.4s 0.2s both; }
.motion .frag.play .pkg .dots i.u:nth-child(2) { animation-delay: 0.38s; }
.motion .frag.play .pkg .dots i.u:nth-child(3) { animation-delay: 0.56s; }
.motion .frag.play .pill.red { animation: pop 0.45s 0.85s both; }
.motion .frag.play .ask-t .ic-help { animation: wiggle 0.9s 0.25s ease-in-out both; }
.motion .frag.play .cand { animation: card-in 0.45s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.motion .frag.play .cand + .cand { animation-delay: 0.65s; }
.motion .frag.play .tile-n { animation: roll 0.6s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.motion .frag.play .tile + .tile .tile-n { animation-delay: 0.38s; }

@media (min-width: 560px) {
  .actions-row { display: flex; flex-wrap: wrap; }
  .actions-row .btn.main { width: auto; padding: 0 26px; }
  .features { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .promises { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (min-width: 900px) {
  :root { --gut: 32px; }
  .frame { padding-left: 32px; padding-right: 32px; }
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 56px; padding-top: 48px; }
  .block { margin-top: 88px; }
  .site h2 { font-size: 30px; }
  .features { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; }
  .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 20px; }
  .steps li { grid-template-columns: 1fr; padding-top: 18px; }
  .steps li::before { grid-row: auto; margin-bottom: 8px; }
  .promises { grid-template-columns: repeat(4, 1fr); }
  .cta { padding: 36px 36px 22px; }
}