/* turboffer.com, COM home only (front matter `stylesheet: laptop`): the opening of the approved prototype
   P-LAPTOP (D158, D165, D167, D168; docs/design/prototypes/opening-laptop). Hero of the prototype A+B (D136, D140)
   in the page's graphite tokens and the app panel in «Графит» (D138, com.css .panel); font set 1 (D139, com.css).
   The camera dives into ⌘↵ on «Suggest», the owner's video plays once, the silver MacBook Pro drawn here (CSS and
   SVG, no raster, no Apple logo, D165) takes the loop on the left, «How it works» comes step by step on the right
   (under the laptop on a phone), the lid shuts, the plans rise (one card at a time), then the FAQ.
   Classes on <html>: .lt-js (laptop-boot.js: the pinned stage and the scroll zones), .lt-intro / .lt-replay (the
   intro, CSS from the first frame), .lt-ready (laptop.js runs), .lt-video (the first scroll: posters), .lt-laptop
   (the drawn laptop), .lt-desc-on, .lt-flying, .lt-atmo-off, .lt-over / .lt-graphite / .lt-top-hidden (the header),
   .lt-rm (reduced motion), .lt-save (Save-Data, slow network). Motion: transform and opacity; filter only during
   the dive. Inside .lt-rig every size is in pixels of the video's 1920×1080 frame: laptop.js sets one transform.
   Without JS (no .lt-js) the page stands: the hero, «How it works», the plans and the FAQ; no laptop, no video. */

:root { --lt-vh: 100vh; }
@supports (height: 100svh) { :root { --lt-vh: 100svh; } }

.market-com section.lt {
  --lt-black: #040507;        /* the black of the video's frame: the hero and the video stand on it */
  --lt-graphite: #14171D;     /* the page graphite after the video (S9-3) */
  --ease-io: cubic-bezier(.65,0,.35,1);
  --lt-off: 0ms;
  /* The intro (desktop ≈ 3.8 s to the answer). --lt-end and --lt-replay are read by laptop.js (ms). */
  --t-eyebrow: 150ms; --t-line: 100ms; --d-line: 2.35s; --d-word: .7s;
  --t-w1: 350ms; --t-w2: 560ms; --t-w3: 1000ms; --t-w4: 1210ms;
  --t-key: 1950ms; --d-key: 1s; --t-press: 2500ms; --t-ring: 2520ms;
  --t-unfold: 2640ms; --d-unfold: .6s; --t-think: 2980ms; --d-think: .55s;
  --t-chrome: 3050ms; --t-aw: 3180ms; --s-aw: 11ms; --t-meta: 3420ms; --t-foot: 3500ms; --t-cue: 3900ms;
  --lt-end: 4500; --lt-replay: 1950;
  position: relative;
  background: var(--lt-black);
}
/* The skip link stays where it is shown: Tab in the middle of the page never scrolls it back to the top (that
   would reset the video's cycle). */
.lt-js .market-com .skip { position: fixed; }

/* ---------- The header over the opening (laptop.js) ----------
   On the picture: a soft black fade on a desktop (the header is fixed), the hero's black on a phone (in the flow);
   graphite once the laptop is there; hidden while the video plays. Below the opening com.css takes over. */
body.market-com .nav { transition: opacity .35s ease, visibility .35s, border-color .4s var(--ease); }
/* border-box: the gradient spans the transparent bottom border too, else its repeat draws a dark line under the header. */
html.lt-over body.market-com .nav { color: #F4F6FC; background: linear-gradient(180deg, rgba(4,5,7,.82), rgba(4,5,7,0)) border-box; border-bottom-color: transparent; }
html.lt-over body.market-com .nav .wordmark { color: #F4F6FC; }
html.lt-over.lt-graphite body.market-com .nav { background: linear-gradient(180deg, rgba(20,23,29,.94), rgba(20,23,29,0)) border-box; }
html.lt-top-hidden body.market-com .nav { opacity: 0; visibility: hidden; }
@media (max-width: 900px) {
  html.lt-over body.market-com .nav { background: #040507; }
}

/* =====================================================================================================
   The section: a pinned stage (the hero and the background), the laptop's layer over it, the scroll over both.
   ===================================================================================================== */
.market-com .lt-stage { position: relative; z-index: 1; min-height: var(--lt-vh); overflow: clip; background: var(--lt-black); }
.lt-js .market-com .lt-stage { position: sticky; top: 0; margin-top: calc(-1 * var(--lt-vh)); }
.lt-js .market-com .lt-flow { position: relative; z-index: 2; margin-top: calc(-1 * var(--lt-stage-h, 100vh)); pointer-events: none; }
.market-com .lt-z-fly,
.market-com .lt-z-lid { display: none; }
.lt-js .market-com .lt-z-fly { display: block; height: var(--lt-z-fly, 100vh); }
.lt-js .market-com .lt-z-desc { height: calc(var(--lt-vh) + var(--lt-z3, 140vh)); }
.lt-js .market-com .lt-z-lid { display: block; height: var(--lt-z4, 90vh); }

/* The laptop's layer is pinned for the whole section. The stage gives the room back (margin-top: −100vh), not the
   layer: a negative bottom margin on a sticky box would carry it a screen past the section, over the plans. */
.market-com .lt-layer { display: none; }
/* overflow: clip, not hidden: a box with hidden overflow is a scroll container, and focusing its buttons (or a
   click that scrolls them into view) would scroll it and move the laptop off its place. */
.lt-js .market-com .lt-layer { display: block; position: sticky; z-index: 3; top: 0; height: var(--lt-vh); overflow: hidden; overflow: clip; pointer-events: none; }

/* ---------- The background after the video: (a) graphite, a slow blue glow and a static grain of 1.5 % (D145) ----------
   (b) — the darker gradient with a moving grain — stays switchable: class lt-atmo-grain on <section class="lt">. */
.market-com .lt-atmo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; background: var(--lt-graphite); }
html:not(.lt-js) .market-com .lt-atmo { display: none; }
.market-com .lt-aurora { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.market-com .lt-aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.market-com .lt-aurora i:nth-child(1) { width: 110vmax; height: 46vmax; left: -34vmax; top: -14vmax; background: radial-gradient(closest-side, rgba(49,95,213,.26), rgba(49,95,213,.07) 55%, rgba(49,95,213,0)); transform: rotate(-14deg); animation: lt-au1 48s ease-in-out infinite alternate; }
.market-com .lt-aurora i:nth-child(2) { width: 90vmax; height: 32vmax; right: -36vmax; top: 24vh; background: radial-gradient(closest-side, rgba(168,194,240,.10), rgba(168,194,240,.03) 60%, rgba(168,194,240,0)); transform: rotate(18deg); animation: lt-au2 62s ease-in-out infinite alternate; }
.market-com .lt-aurora i:nth-child(3) { width: 120vmax; height: 40vmax; left: -12vmax; bottom: -28vmax; background: radial-gradient(closest-side, rgba(36,79,191,.18), rgba(36,79,191,0) 72%); transform: rotate(8deg); animation: lt-au3 55s ease-in-out infinite alternate; }
@keyframes lt-au1 { to { transform: translate3d(22vmax, 8vmax, 0) rotate(4deg) scale(1.12); } }
@keyframes lt-au2 { to { transform: translate3d(-18vmax, 12vh, 0) rotate(-6deg) scale(.9); } }
@keyframes lt-au3 { to { transform: translate3d(14vmax, -10vh, 0) rotate(-10deg) scale(1.15); } }
/* The static grain: white noise with a stretched alpha shifts graphite about one level of 255 both ways — dithering
   against banding in the glow, not a texture; drawn once, never moves. */
.market-com .lt-grain { position: absolute; inset: 0; opacity: .015; background: url("/assets/grain-static.svg") 0 0 / 220px 220px; }
.market-com .lt.lt-atmo-grain .lt-atmo { background: radial-gradient(120% 90% at 18% 0%, #1B2740 0%, #10151E 46%, #0A0D12 100%); }
.market-com .lt.lt-atmo-grain .lt-aurora { display: none; }
.market-com .lt.lt-atmo-grain .lt-grain { inset: -80px; opacity: .075; background-image: url("/assets/grain.svg"); will-change: transform; animation: lt-grain 1.4s steps(6) infinite; }
@keyframes lt-grain {
  0% { transform: translate3d(0, 0, 0); } 17% { transform: translate3d(-30px, 18px, 0); } 33% { transform: translate3d(22px, -26px, 0); }
  50% { transform: translate3d(-14px, -8px, 0); } 67% { transform: translate3d(28px, 14px, 0); } 83% { transform: translate3d(-8px, 30px, 0); } 100% { transform: translate3d(0, 0, 0); }
}
.lt-atmo-off .market-com .lt-aurora i,
.lt-atmo-off .market-com .lt-grain { animation-play-state: paused; }

/* =====================================================================================================
   Hero — the prototype A+B (D136, D140), as on the opening before (S-OPEN), on the video's black.
   Reading and focus order: the heading, the text and the buttons, then the demo region.
   ===================================================================================================== */
.market-com .lt-hero {
  position: relative; z-index: 1; min-height: var(--lt-vh); max-width: 1280px; margin: 0 auto;
  padding: 112px var(--gutter) 80px;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,min(540px,46%)); grid-template-areas: "head rig" "foot rig";
  column-gap: clamp(40px,6vw,96px); row-gap: 30px; align-content: center; align-items: center;
}
.market-com .lt-head { grid-area: head; align-self: end; position: relative; }
.market-com .lt-foot { grid-area: foot; align-self: start; }
.market-com .lt .eyebrow { margin: 0 0 20px; font: 500 12px/16px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.market-com .lt .lt-title { max-width: none; font-size: clamp(40px,4.5vw,74px); line-height: 1.04; letter-spacing: -.035em; }
.market-com .lt-title .lt-ln { display: block; }
.market-com .lt-title .lt-accent { color: var(--accent); }
.market-com .lt-title .lt-w { display: inline-block; }
.market-com .lt-line { position: absolute; left: 0; top: calc(100% + 15px); width: 100%; height: 1px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgba(169,189,242,0), rgba(169,189,242,.8) 28%, rgba(244,246,252,.95)); transform-origin: 0 50%; }
@media (min-width: 960px) {
  .market-com .lt-line { width: calc(100% + clamp(40px,6vw,96px) + min(540px, (min(1280px, 100vw) - 2 * var(--gutter)) * .46) / 2); }
}
.market-com .lt .lede { max-width: 31em; margin: 0 0 28px; font-size: clamp(17px,1.3vw,19px); line-height: 1.55; color: var(--fg-2); }
.market-com .lt .micro { margin: 18px 0 0; font-size: 12.5px; color: var(--fg-2); }
.market-com .lt-foot kbd,
.market-com .lt-desc kbd,
.market-com .lt-faq kbd { font: 500 .86em/1 var(--mono); padding: .24em .45em; border: 1px solid var(--hair); background: rgba(255,255,255,.05); color: var(--fg); }

/* The demo region: the app panel (com.css .panel, «Графит») and the key of the intro over it. */
.market-com .lt-hrig { grid-area: rig; position: relative; width: 100%; max-width: 540px; justify-self: end; transform-origin: 50% 50%; }
.market-com .lt-hrig:focus { outline: none; }
.market-com .lt-hrig > .panel { z-index: 2; margin: 0; transform-origin: 50% 50%; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.5); }
.market-com .lt-hrig > .panel .bar .drag { flex: 1 1 auto; min-width: 0; }
.market-com .lt-hrig > .panel .body { padding-bottom: 18px; }
.market-com .lt-hrig > .panel .heard { margin-bottom: 10px; }
.market-com .lt-hrig > .panel .lead .lt-aw { display: inline-block; }
/* The panel's column is at most 540 px, so its header gives way as the app's narrow header does: the mode goes where
   the column is under 520 px (media queries, not container queries: those cost the first paint a second layout). */
@media (min-width: 960px) and (max-width: 1229px), (max-width: 600px) {
  .market-com .lt-hrig > .panel .bar .mode { display: none; }
}
.market-com .lt-key { position: absolute; z-index: 3; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.market-com .lt-glow { position: absolute; left: -230px; top: -170px; width: 460px; height: 340px; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(168,194,240,.34), rgba(49,95,213,.14) 55%, rgba(49,95,213,0)); }
.market-com .lt-caps { position: absolute; left: -91px; top: -42px; display: flex; gap: 14px; }
.market-com .lt-cap { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 20px; color: #ECEDEF; background: linear-gradient(180deg, #3A3C41, #2F3135); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px -16px rgba(0,0,0,.9), 0 0 0 1px rgba(168,194,240,.18); }
/* The glyphs are drawn, not set: a system-font fallback for ⌘ and ↵ at this size cost the first layout about 90 ms
   on a slow phone CPU (S-OPEN). */
.market-com .lt-cap svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.market-com .lt-ring { position: absolute; inset: -10px; border-radius: 28px; border: 1px solid rgba(168,194,240,.7); opacity: 0; }

/* The scroll cue (only with JS). */
.market-com .lt-cue { display: none; }
.lt-js .market-com .lt-cue { position: absolute; z-index: 2; left: 50%; bottom: 18px; margin: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); pointer-events: none; }
.market-com .lt-cue i { width: 1px; height: 30px; background: linear-gradient(#B8C1D4, rgba(184,193,212,0)); transform-origin: 50% 0; animation: lt-cue 2.4s var(--ease-io) var(--t-cue) 3 backwards; }
@keyframes lt-cue { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* The intro. Its texts start at opacity .01, not 0: loaded and painted in the first frame, so the reveal does not
   postpone the largest paint. */
@keyframes lt-i-fade { from { opacity: .01; } }
@keyframes lt-i-rise { from { opacity: .01; transform: translateY(10px); } }
@keyframes lt-i-word { from { opacity: .01; transform: translateY(.28em); } }
@keyframes lt-i-line {
  0% { opacity: 1; transform: translateX(0) scaleX(0); }
  38% { opacity: 1; transform: translateX(0) scaleX(1); }
  78% { opacity: 1; transform: translateX(0) scaleX(1); }
  100% { opacity: .2; transform: translateX(100%) scaleX(0); }
}
@keyframes lt-i-key { 0% { opacity: 0; visibility: visible; } 35% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes lt-i-caps { from { transform: scale(.9); } }
@keyframes lt-i-press { 50% { transform: translateY(3px) scale(.93); } }
@keyframes lt-i-glow { 0% { opacity: 0; transform: scale(.7); } 45% { opacity: .75; transform: scale(1); } 58% { opacity: 1; transform: scale(1.12); } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes lt-i-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes lt-i-unfold { 0% { opacity: .01; transform: scale(.34, .22); } 25% { opacity: 1; } 45% { transform: scale(1, .22); } 100% { opacity: 1; transform: none; } }
@keyframes lt-i-think { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lt-i-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.lt-intro:not(.lt-replay) .market-com .lt .eyebrow { animation: lt-i-fade .7s ease both var(--t-eyebrow); }
.lt-intro:not(.lt-replay) .market-com .lt-line { animation: lt-i-line var(--d-line) var(--ease-io) both var(--t-line); }
.lt-intro:not(.lt-replay) .market-com .lt-title .lt-w { animation: lt-i-word var(--d-word) var(--ease) both var(--t-w1); }
.lt-intro:not(.lt-replay) .market-com .lt-title .lt-ln:first-child .lt-w + .lt-w { animation-delay: var(--t-w2); }
.lt-intro:not(.lt-replay) .market-com .lt-title .lt-accent .lt-w { animation-delay: var(--t-w3); }
.lt-intro:not(.lt-replay) .market-com .lt-title .lt-accent .lt-w + .lt-w { animation-delay: var(--t-w4); }
.lt-intro .market-com .lt-key { animation: lt-i-key var(--d-key) linear both calc(var(--t-key) - var(--lt-off)); }
.lt-intro .market-com .lt-caps { animation: lt-i-caps .45s var(--ease) both calc(var(--t-key) - var(--lt-off)); }
.lt-intro .market-com .lt-glow { animation: lt-i-glow var(--d-key) ease both calc(var(--t-key) - var(--lt-off)); }
.lt-intro .market-com .lt-cap { animation: lt-i-press .2s ease-in-out both calc(var(--t-press) - var(--lt-off)); }
.lt-intro .market-com .lt-ring { animation: lt-i-ring .55s var(--ease) both calc(var(--t-ring) - var(--lt-off)); }
.lt-intro .market-com .lt-hrig > .panel { animation: lt-i-unfold var(--d-unfold) var(--ease-io) both calc(var(--t-unfold) - var(--lt-off)); }
.lt-intro .market-com .lt-hrig > .panel .thinkbar { animation: lt-i-think var(--d-think) linear both calc(var(--t-think) - var(--lt-off)); }
.lt-intro .market-com .lt-hrig > .panel .thinkbar::after { animation: lt-i-sweep var(--d-think) linear both calc(var(--t-think) - var(--lt-off)); }
.lt-intro .market-com .lt-hrig > .panel .bar,
.lt-intro .market-com .lt-hrig > .panel .foot { animation: lt-i-fade .3s ease both calc(var(--t-chrome) - var(--lt-off)); }
.lt-intro .market-com .lt-hrig > .panel .heard { animation: lt-i-rise .4s var(--ease) both calc(var(--t-chrome) - var(--lt-off)); }
.lt-intro .market-com .lt-hrig > .panel .lt-aw { animation: lt-i-fade .3s var(--ease) both calc(var(--t-aw) + var(--i, 0) * var(--s-aw) - var(--lt-off) - var(--lt-aw-late, 0ms)); }
.lt-intro .market-com .lt-hrig > .panel .meta { animation: lt-i-rise .4s var(--ease) both calc(var(--t-meta) - var(--lt-off)); }
.lt-intro:not(.lt-replay) .market-com .lt-foot { animation: lt-i-rise .6s var(--ease) both var(--t-foot); }
.lt-intro:not(.lt-replay) .market-com .lt-cue { animation: lt-i-fade .6s ease both var(--t-cue); }

/* =====================================================================================================
   The dive into ⌘↵ (P-LAPTOP round 2). The layers of the hero (text, heading, panel) scale around the centre of
   the key on «Suggest» (laptop.js sets their transform-origin) while the key moves to the centre of the frame.
   Over them the portal key: dark, with a light rim; its place and size come from laptop.js (not scale: the rim
   and the glow stay thin), its inside darkens (.lt-dive-void), the rim leaves the screen.
   ===================================================================================================== */
.lt-js .market-com .lt-head,
.lt-js .market-com .lt-foot,
.lt-js .market-com .lt-hrig { transform-style: flat; backface-visibility: hidden; }
.market-com .lt-dive { display: none; }
.lt-js .market-com .lt-dive { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; overflow: hidden; contain: layout paint; }
.market-com .lt-dive-halo { position: absolute; left: 0; top: 0; width: 460px; height: 340px; margin: -170px 0 0 -230px; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(168,194,240,.34), rgba(49,95,213,.14) 55%, rgba(49,95,213,0)); }
.market-com .lt-dive-key { position: absolute; left: 0; top: 0; display: grid; place-items: center; overflow: hidden; opacity: 0; background: linear-gradient(180deg, #3A3C41, #2F3135); }
.market-com .lt-dive-glyph { position: absolute; left: 0; top: 0; font: 500 12px/1 var(--app-font); color: #ECEDEF; white-space: nowrap; text-shadow: 0 0 6px rgba(168,194,240,.85); }
.market-com .lt-dive-void { position: absolute; inset: 0; background: var(--lt-black); opacity: 0; }
.market-com .lt-dive-rim { position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid rgba(195,214,250,.95); }
/* The ring of the intro: the key lights up and a ring spreads from it (by the scroll, p 0…0.16). */
.market-com .lt-dive-ring { position: absolute; left: 0; top: 0; opacity: 0; border: 1.5px solid rgba(195,214,250,.9); box-shadow: 0 0 14px rgba(168,194,240,.55); }
.market-com .lt-dive-fx { position: absolute; inset: 0; perspective: 1000px; }
.market-com .lt-fly-grain { position: absolute; z-index: 0; left: 50%; top: var(--lt-po-y, 50%); width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; pointer-events: none; opacity: 0; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 70%); mask-image: radial-gradient(closest-side, #000 30%, transparent 70%); background: url("/assets/grain-static.svg") 0 0 / 220px 220px; }
/* Specks at three depths: one element per layer, the specks are radial gradients (laptop.js), no edges. */
.market-com .lt-fly-p { position: absolute; z-index: 0; left: 50%; top: var(--lt-po-y, 50%); width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; pointer-events: none; opacity: 0; background-repeat: no-repeat; }
.lt-flying .market-com .lt-head,
.lt-flying .market-com .lt-foot,
.lt-flying .market-com .lt-hrig,
.lt-flying .market-com .lt-fly-grain,
.lt-flying .market-com .lt-fly-p,
.lt-flying .market-com .lt-dive-halo { will-change: transform, opacity; }

/* =====================================================================================================
   The laptop. .lt-rig is the video's 1920×1080 frame in its own pixels; laptop.js sets one transform: translate + scale.
   ===================================================================================================== */
.market-com .lt-rig { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; visibility: hidden; }
.lt-video .market-com .lt-rig,
.lt-laptop .market-com .lt-rig { visibility: visible; }
.market-com .lt-rig > * { position: absolute; }

/* The lid: from the frame's outer edge (x=71, y=21) to the hinge (y=1023). Its bottom corners and the deck's back
   corners are square: one width at the hinge (1778), a silhouette without steps. */
.market-com .lt-lid { left: 71px; top: 21px; width: 1778px; height: 1002px; border-radius: 30px 30px 0 0; transform-origin: 50% 100%; }
/* The silver frame of the MacBook Pro: a 7 px aluminium rim — a slightly darker outer edge, the bevel's highlight, a
   cool light grey; inside the black glass with the camera notch (display and notch as in the video's frame). */
.market-com .lt-bezel {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background:
    linear-gradient(90deg, rgba(70,76,86,.22), rgba(70,76,86,0) .9%, rgba(70,76,86,0) 99.1%, rgba(70,76,86,.22)),
    linear-gradient(180deg, #f2f3f5 0%, #e1e3e6 1.2%, #d2d5d9 30%, #c6c9ce 75%, #b4b7bc 100%);
  box-shadow: inset 0 0 0 1.5px #868a90, inset 0 0 0 3.2px rgba(255,255,255,.62);
}
/* The glass: even margins around the display — 14 px top and sides, 13 px at the bottom (the glass goes into the
   hinge without an aluminium rim, as on a real MacBook); its rounding is concentric with the outer one (30 − 7). */
.market-com .lt-bezel::before { content: ""; position: absolute; inset: 7px 7px 0; border-radius: 23px 23px 0 0; background: linear-gradient(170deg, #0e0f11, #07080a 22%, #07080a 78%, #0c0d0f); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
/* The frame of the video's MacBook: it matches the main video's last frame, lies over the silver at the switch and
   fades while the laptop moves left (laptop.js). */
.market-com .lt-bezel-v {
  position: absolute; inset: 0; border-radius: 30px 30px 22px 22px; opacity: 0;
  background:
    linear-gradient(#55585f, #55585f) 0 0 / 100% 9px no-repeat,
    linear-gradient(180deg, #55585f 0%, #4b4e55 8%, #3d4047 18%, #30333a 28%, #24242a 38%, #313137 52%, #43464b 68%, #54575c 83%, #616469 93%, #686b70 100%);
  box-shadow: inset 0 0 0 2px #5d5f65;
}
.market-com .lt-bezel-v::before { content: ""; position: absolute; inset: 9px 9px 0; border-radius: 21px 21px 14px 14px; background: #07080a; }
/* The back of the lid: smooth silver aluminium with a soft highlight and a thin bevel. Past 90° it is seen from the
   back, flipped vertically like a real shut lid. */
.market-com .lt-lid-back { position: absolute; inset: 0; display: none; border-radius: inherit;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(255,255,255,.16), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #a9acb2 0%, #bdc0c5 35%, #c9ccd0 70%, #c0c3c8 100%);
  box-shadow: inset 0 0 0 1.5px #80838a, inset 0 0 0 4px rgba(255,255,255,.42), inset 0 0 80px rgba(70,76,86,.22); }
/* A hook for a mark on the back of the lid (D165: no Apple logo, none drawn). A mark would take one rule:
   background: url(<mark>.svg) center / contain no-repeat. In the lid's pixels; on the shut lid it is flipped. */
.market-com .lt-lid-mark { position: absolute; left: 50%; top: 50%; width: 150px; height: 180px; margin: -90px 0 0 -75px; }
.market-com .lt-lid.lt-back .lt-lid-back { display: block; }
/* opacity, not visibility: the video inside keeps its own visibility: visible. */
.market-com .lt-lid.lt-back .lt-bezel,
.market-com .lt-lid.lt-back .lt-bezel-v,
.market-com .lt-lid.lt-back .lt-display { opacity: 0 !important; }

/* The display: x=92 y=42 w=1736 h=968 in the frame. During the video uncropped (the whole frame), in the laptop cropped. */
.market-com .lt-display { position: absolute; left: 21px; top: 21px; width: 1736px; height: 968px; border-radius: 12px 12px 10px 10px; background: #000; }
.lt-video:not(.lt-laptop) .market-com .lt-display { background: transparent; }
.lt-laptop .market-com .lt-display { overflow: hidden; }
.market-com .lt-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; visibility: hidden; }
.lt-laptop .market-com .lt-loop { visibility: visible; }
.market-com .lt-main-wrap { position: absolute; left: -92px; top: -42px; width: 1920px; height: 1080px; overflow: hidden; }
.market-com .lt-main { display: block; width: 100%; height: 100%; object-fit: fill; background: var(--lt-black); }
.market-com .lt-shade { position: absolute; inset: 0; background: var(--lt-black); opacity: 0; }
/* The vignette dissolves the frame's edges into the black while the camera flies; laptop.js scales it. */
.market-com .lt-vignette { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: radial-gradient(closest-side, rgba(4,5,7,0) 0%, rgba(4,5,7,0) 13%, rgba(4,5,7,.22) 21%, rgba(4,5,7,.55) 29%, rgba(4,5,7,.85) 36%, var(--lt-black) 44%); transform-origin: 50% 50%; }
.market-com .lt-feather { position: absolute; inset: 0; box-shadow: inset 0 0 28px 14px var(--lt-black); }
.market-com .lt-notch { position: absolute; left: 779px; top: 0; width: 177px; height: 26px; border-radius: 0 0 10px 10px; background: #07080a; opacity: 0; }
.market-com .lt-notch b { position: absolute; left: 50%; top: 5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #2b3242, #161a22 70%); }
.lt-laptop .market-com .lt-notch { opacity: 1; }
.market-com .lt-glare { position: absolute; left: 0; right: 0; top: -100%; height: 300%; opacity: 0; background: linear-gradient(170deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.34) 46%, rgba(255,255,255,.1) 53%, rgba(255,255,255,0) 62%); }
.market-com .lt-dim { position: absolute; inset: 0; background: #000; opacity: 0; }
/* The AI note (D147): in the corner of the video, under the menu bar; laptop.js keeps its size on screen. */
.market-com .lt-ai-note { position: absolute; right: 0; top: 34px; margin: 0; padding: 5px 8px; border-radius: 6px; background: rgba(4,5,7,.66); color: rgba(244,246,252,.9); font: 500 11px/1 var(--mono); letter-spacing: .01em; white-space: nowrap; opacity: 0; transform-origin: 100% 0; }

/* The base. The deck is as wide as the lid (1778) and as deep as it is high (1010): the shut lid lies on it whole.
   The front edge is the SVG .lt-base (laptop.js draws it in the deck's perspective): the deck's bottom edge with its
   rounded corners, one thickness all along, rounded bottom corners, the finger scoop in the middle. At the switch
   (the deck «on edge», 90°) the edge is 1876 × 42 at x=22, y=1023, as the base in the video's frame. */
.market-com .lt-base { left: 0; top: 0; width: 1920px; height: 1080px; max-width: none; overflow: visible; opacity: 0; }
.lt-laptop .market-com .lt-base { opacity: 1; }
.market-com .lt-base-v { opacity: 0; }
/* The deck of the MacBook Pro: silver aluminium, a light cool grey with a soft highlight, a light bevel at the front;
   the dark cylinder of the hinge; the keyboard (laptop-keys.svg): black keys with thin gaps in a black well, US
   captions, no Apple marks; dark speaker grilles at the sides; a light trackpad with a faint bevel. laptop.js turns
   the deck (perspective + rotateX). */
.market-com .lt-deck { left: 71px; top: 1023px; width: 1778px; height: 1010px; transform-origin: 50% 0; visibility: hidden; border-radius: 0 0 30px 30px;
  background:
    radial-gradient(70% 50% at 50% 40%, rgba(255,255,255,.26), rgba(255,255,255,0) 72%),
    linear-gradient(90deg, rgba(120,126,136,.16), rgba(120,126,136,0) 6%, rgba(120,126,136,0) 94%, rgba(120,126,136,.16)),
    linear-gradient(180deg, #bfc2c7 0%, #cdd0d4 14%, #d7dadd 55%, #dee0e3 100%);
  box-shadow: inset 0 -4px 0 rgba(255,255,255,.9), inset 0 -12px 16px -12px rgba(60,66,76,.25), inset 3px 0 0 rgba(255,255,255,.55), inset -3px 0 0 rgba(255,255,255,.55); }
.market-com .lt-deck > i { position: absolute; }
/* The hinge: an even dark band as wide as the display (1736), right under the lid. */
.market-com .lt-hinge { left: 21px; right: 21px; top: 0; height: 44px; border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #0b0c0e 0%, #1f2124 24%, #44474c 48%, #56595e 56%, #2e3034 78%, #121315 100%);
  box-shadow: 0 7px 12px -6px rgba(30,34,40,.55), inset 10px 0 12px -8px rgba(0,0,0,.6), inset -10px 0 12px -8px rgba(0,0,0,.6); }
/* The keyboard is fetched with the first scroll, not with the hero. */
.market-com .lt-keys { left: 112px; right: 112px; top: 54px; height: 492px; border-radius: 14px; background: #050506 no-repeat 0 0 / 100% 100%; box-shadow: 0 0 0 2px rgba(150,156,166,.35), 0 2px 3px rgba(40,44,50,.25); }
.lt-video .market-com .lt-keys,
.lt-laptop .market-com .lt-keys { background-image: url("/assets/laptop-keys.svg"); }
.market-com .lt-spk { top: 54px; height: 492px; width: 52px; border-radius: 9px; opacity: .95; background: radial-gradient(circle, rgba(38,41,46,.92) 0 2.2px, rgba(38,41,46,0) 3px) 3px 3px / 10px 10px; }
.market-com .lt-spk-l { left: 40px; }
.market-com .lt-spk-r { right: 40px; }
.market-com .lt-pad { left: 50%; width: 720px; margin-left: -360px; top: 580px; height: 398px; border-radius: 24px;
  background: radial-gradient(80% 70% at 50% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%), linear-gradient(180deg, #d3d6da, #cfd2d6);
  box-shadow: inset 0 0 0 1.5px rgba(112,118,128,.26), inset 0 3px 0 rgba(255,255,255,.55), 0 1.5px 0 rgba(255,255,255,.7); }
.market-com .lt-deck-shade { inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.55) 60%, rgba(0,0,0,.3)); opacity: 0; }
/* The shadow under the body: a dense contact band at the front edge and a wide soft shadow. */
.market-com .lt-ground { left: 0; width: 1920px; top: 888px; height: 900px; opacity: 0; transform-origin: 50% 0;
  background: radial-gradient(47% 4.5% at 50% 3%, rgba(0,0,0,.62), rgba(0,0,0,0) 100%), radial-gradient(56% 24% at 50% 10%, rgba(0,0,0,.5), rgba(0,0,0,0) 72%); }
.lt-laptop .market-com .lt-bezel { opacity: 1; }
/* Exactly at the switch (the video's frame opaque) the silver under it is hidden, else its edge would shine through. */
.market-com .lt-v-match .lt-bezel,
.market-com .lt-v-match .lt-base-s { visibility: hidden; }
.lt-laptop .market-com .lt-deck { visibility: visible; }
.market-com .lt-deck.lt-flat { visibility: hidden !important; }

/* The phone: a band on top for the laptop; «How it works» scrolls under it. */
.market-com .lt-band { position: absolute; left: 0; right: 0; top: 0; height: var(--lt-band-h, 0px); display: none; opacity: 0; background: linear-gradient(180deg, var(--lt-graphite) 0%, var(--lt-graphite) calc(100% - 28px), rgba(20,23,29,0) 100%); }
.market-com .lt-band-dim { position: absolute; inset: 0; background: linear-gradient(180deg, #050608 0%, #050608 calc(100% - 28px), rgba(5,6,8,0) 100%); opacity: 0; }

/* Pause (WCAG 2.2.2): a small round button in the bottom right corner of the laptop's screen (laptop.js places it).
   Mouse: it shows when the pointer is over the laptop (.lt-hot), brighter under the pointer; keyboard: on focus;
   touch screens: always, a little smaller. */
.market-com .lt-pause { position: absolute; left: 0; top: 0; z-index: 5; width: 36px; height: 36px; margin: -36px 0 0 -36px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.26); background: rgba(14,16,20,.5); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); color: #fff; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .3s ease, background-color .2s ease; }
.market-com .lt-pause[hidden] { display: none; }
.market-com .lt-pause svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.market-com .lt-pause .lt-i-play { stroke: none; display: none; }
.market-com .lt-pause.lt-paused .lt-i-play { display: block; }
.market-com .lt-pause.lt-paused .lt-i-pause { display: none; }
.market-com .lt-pause.lt-hot { opacity: .72; }
.market-com .lt-pause:hover { opacity: 1; background: rgba(28,31,38,.78); }
.market-com .lt-pause:focus-visible { opacity: 1; outline: 2px solid #A9BDF2; outline-offset: 3px; border-radius: 50%; }
@media (hover: none) { .market-com .lt-pause { opacity: .66; } }
.market-com .lt-play { position: absolute; z-index: 5; left: 0; top: 0; transform: translate3d(var(--lt-play-x, 50vw), var(--lt-play-y, 50vh), 0) translate(-50%, -50%); pointer-events: auto; box-shadow: 0 10px 30px -10px rgba(0,0,0,.8); }
.market-com .lt-play[hidden] { display: none; }
.market-com .lt-play:active { transform: translate3d(var(--lt-play-x, 50vw), var(--lt-play-y, 50vh), 0) translate(-50%, -50%) scale(.97); } /* else the .btn :active scale drops the centring and the click misses */
.market-com .lt-play svg { width: 14px; height: 14px; fill: currentColor; }
.market-com .lt-play .lt-play-size { font-weight: 400; opacity: .8; }

/* =====================================================================================================
   «How it works»: on the right (desktop) / under the laptop (phone), the page's graphite tokens and font set 1.
   ===================================================================================================== */
.market-com .lt-desc { color: var(--fg); }
.lt-js .market-com .lt-desc { position: sticky; top: 0; height: var(--lt-vh); display: flex; align-items: center; visibility: hidden; opacity: 0; }
.lt-desc-on .market-com .lt-desc { visibility: visible; pointer-events: auto; }
.market-com .lt-desc-in { width: min(760px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(48px,8vh,88px) 0; }
.lt-js .market-com .lt-desc-in { width: min(500px, var(--lt-desc-w, 40vw)); margin: 0 0 0 var(--lt-desc-x, 56vw); padding: 72px 0 24px; }
.market-com .lt-desc .h2 { margin: 16px 0 0; font-size: clamp(32px,3.4vw,50px); line-height: 1.06; letter-spacing: -.035em; color: var(--fg); }
.market-com .lt-desc-lede { margin: 18px 0 0; max-width: 26em; font-size: clamp(17px,1.3vw,19px); line-height: 1.5; color: var(--fg-2); }
.market-com .lt-steps { margin: clamp(18px,3.4vh,34px) 0 0; padding: 0; list-style: none; }
.market-com .lt-step { position: relative; padding: clamp(14px,2.4vh,22px) 0; border-top: 1px solid var(--hair); }
.market-com .lt-step::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.market-com .lt-step.lt-cur::before { transform: none; transition-delay: .2s; }
.market-com .lt-num { margin: 0 0 8px; font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--fg-2); transition: color .4s ease; }
.market-com .lt-step.lt-cur .lt-num { color: var(--accent); }
.market-com .lt-step .h3 { margin: 0; font-size: clamp(24px,2.2vw,32px); line-height: 1.15; letter-spacing: -.025em; color: var(--fg); }
.market-com .lt-step p:last-child { margin: 8px 0 0; max-width: 28em; font-size: 16px; line-height: 1.5; color: var(--fg-2); }
/* The heading comes first, with the laptop (time, not scroll). */
.lt-js .market-com .lt-desc .lt-rv { opacity: 0; transform: translate3d(0,14px,0); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.lt-desc-on .market-com .lt-desc .lt-rv { opacity: 1; transform: none; }
.lt-desc-on .market-com .lt-desc .lt-rv:nth-child(2) { transition-delay: .08s; }
.lt-desc-on .market-com .lt-desc .lt-rv:nth-child(3) { transition-delay: .16s; }
/* The steps one at a time, each in its own stretch of the scroll (laptop.js: .lt-cur the current one, .lt-past the
   ones passed): the next one rises and shows, a passed one dims (desktop, the owner's wish) or moves up (.lt-slot —
   phone and a low window: all steps in one grid cell, the block's height never jumps). Reversible. */
.lt-js .market-com .lt-step { opacity: 0; transform: translate3d(0,18px,0); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.lt-js .market-com .lt-step.lt-cur { opacity: 1; transform: none; transition-delay: .1s; }
.lt-js .market-com .lt-step.lt-past { opacity: .36; transform: none; }
.lt-js .market-com .lt-steps.lt-slot { display: grid; }
.lt-js .market-com .lt-steps.lt-slot .lt-step { grid-area: 1 / 1; }
.lt-js .market-com .lt-steps.lt-slot .lt-step.lt-past { opacity: 0; transform: translate3d(0,-18px,0); }

/* =====================================================================================================
   The plans and the FAQ in graphite (D149: support of development). The plans slide over the end of the laptop:
   while the shut laptop fades, «For your next meetings.» rises from below (--lt-price-pull, laptop.js), the edge
   is soft. On a desktop the section is pinned (.lt-pin, if it fits the window): the heading first, then the cards
   one at a time, each in its own stretch of the scroll, as the steps; on a phone and in a low window the cards
   come one at a time as they enter. Passed cards do not dim: they are compared. Reversible.
   ===================================================================================================== */
.market-com section.lt-pricing,
.market-com section.lt-faq { position: relative; z-index: 4; background: var(--lt-graphite, #14171D); color: var(--fg); }
.market-com section.lt-pricing { --lt-graphite: #14171D; }
.market-com section.lt-faq { --lt-graphite: #14171D; padding: clamp(40px,7vh,72px) 0 clamp(64px,10vh,120px); }
.lt-js .market-com section.lt-pricing { margin-top: calc(-1 * var(--lt-price-pull, 0px)); }
.lt-js .market-com section.lt-pricing::before { content: ""; position: absolute; left: 0; right: 0; top: -140px; height: 140px; background: linear-gradient(rgba(20,23,29,0), #14171D); pointer-events: none; }
.market-com .lt-pricing-in { padding: clamp(56px,8vh,96px) 0 clamp(56px,9vh,96px); }
.market-com .lt-pricing.lt-pin { height: calc(var(--lt-vh) + var(--lt-z5, 110vh)); }
.market-com .lt-pricing.lt-pin .lt-pricing-in { position: sticky; top: 0; height: var(--lt-vh); display: flex; align-items: center; padding: 72px 0 32px; }
.market-com .lt-pricing-in .wrap { width: min(1120px, 100% - 2 * var(--gutter)); }
.market-com .lt-pricing-head .h2 { margin-top: 12px; }
.market-com .lt-pricing-head .lede { margin: 14px 0 0; max-width: 32em; font-size: clamp(17px,1.3vw,19px); line-height: 1.5; color: var(--fg-2); }
.market-com .lt-pricing .access-plans { margin-top: clamp(22px,4vh,40px); gap: 20px; }
.market-com .lt-pricing .access-plan { padding: clamp(20px,3vh,30px) 26px; border: 1px solid var(--hair); border-radius: 22px; background: rgba(255,255,255,.035); color: var(--fg); }
.market-com .lt-pricing .access-plan.featured { border-color: rgba(169,189,242,.55); background: linear-gradient(180deg, rgba(49,95,213,.17), rgba(49,95,213,.05)); box-shadow: 0 18px 40px -24px rgba(49,95,213,.55); }
.market-com .lt-pricing .access-plan { padding: 22px 20px; }
.market-com .lt-pricing .access-plan .plan-purpose { min-height: 3em; }
.market-com .lt-pricing .plan-shared-help,.market-com .lt-pricing .plan-footnote { color: var(--fg-2); }
.market-com .lt-pricing .plan-offscreen { color: #A9BDF2; }
.market-com .lt-pricing .access-plan .plan-purpose { margin: 6px 0 clamp(12px,2.2vh,22px); color: var(--fg-2); font-size: 14px; }
.market-com .lt-pricing .access-plan .plan-price { color: var(--fg); font-size: clamp(30px,3vw,42px); }
.market-com .lt-pricing .access-plan .plan-period { margin: 10px 0 clamp(12px,2.2vh,22px); color: var(--fg-2); font-size: 14px; }
.market-com .lt-pricing .access-plan ul { margin: 0 0 clamp(16px,3vh,26px); }
.market-com .lt-pricing .access-plan li { margin: clamp(6px,1.1vh,11px) 0; color: var(--fg-2); }
.market-com .lt-pricing .access-plan li::before { color: var(--accent); }
.market-com .lt-pricing .access-plan .btn { width: 100%; }
.market-com .lt-pricing .access-plan .plan-soon,
.market-com .lt-pricing .access-plan.featured .plan-soon { background: rgba(255,255,255,.05); border-color: var(--hair); color: var(--fg-2); }
.market-com .lt-pricing .access-plan .plan-action:not(.btn-primary) { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--fg); }
/* Every enabled plan has an explicit pointer/keyboard state; Recommended stays primary. */
.market-com .lt-pricing .access-plan .plan-action:not([aria-disabled="true"]):hover,
.market-com .lt-pricing .access-plan .plan-action:not([aria-disabled="true"]):focus-visible {
  background: #426FE2; border-color: #A9BDF2; color: #fff;
  box-shadow: 0 6px 20px rgba(49,95,213,.3);
}
.market-com .lt-pricing .access-plan .plan-action:focus-visible {
  outline: 2px solid #A9BDF2; outline-offset: 4px;
}
.market-com .lt-pricing-note { margin-top: 18px; color: var(--fg-2); }
.market-com .lt-pricing .checkout-terms { background: rgba(255,255,255,.035); border-color: var(--hair); }
.market-com .lt-pricing .checkout-terms-title { color: var(--fg); }
.market-com .lt-pricing .checkout-terms ul { color: var(--fg-2); }
.market-com .lt-pricing .checkout-terms a { color: var(--accent); }
.lt-js .market-com .lt-pricing .access-plan,
.lt-js .market-com .lt-pricing-note { opacity: 0; transform: translate3d(0,22px,0); transition: opacity .55s var(--ease), transform .75s var(--ease); }
.lt-js .market-com .lt-pricing .access-plan.lt-in,
.lt-js .market-com .lt-pricing-note.lt-in { opacity: 1; transform: none; }
.lt-js .market-com .lt-pricing .access-plan:focus-within { opacity: 1; transform: none; }

/* =====================================================================================================
   Tablet and phone. Under 900 px the header is in the flow, so the hero starts right under it.
   ===================================================================================================== */
@media (max-width: 959px) {
  .market-com .lt-hero { grid-template-columns: minmax(0,1fr); grid-template-areas: "head" "rig" "foot"; row-gap: 24px; padding-top: 104px; padding-bottom: 72px; }
  .market-com .lt-head,
  .market-com .lt-foot { align-self: auto; }
  .market-com .lt-hrig { justify-self: center; max-width: 560px; }
}
@media (max-width: 900px) {
  .market-com .lt-hero { padding-top: 32px; }
}
@media (max-width: 767px) {
  /* D140: the phone gets the intro too, short (2.7 s), skippable by any touch or scroll. */
  .market-com section.lt {
    --t-eyebrow: 0ms; --t-line: 50ms; --d-line: 1.5s; --d-word: .5s;
    --t-w1: 150ms; --t-w2: 280ms; --t-w3: 560ms; --t-w4: 690ms;
    --t-key: 1100ms; --d-key: .75s; --t-press: 1450ms; --t-ring: 1460ms;
    --t-unfold: 1560ms; --d-unfold: .45s; --t-think: 1800ms; --d-think: .4s;
    --t-chrome: 1850ms; --t-aw: 1900ms; --s-aw: 8ms; --t-meta: 2150ms; --t-cue: 0ms;
    --lt-end: 2700; --lt-replay: 1100;
  }
  .market-com .lt-hero { padding-bottom: 56px; row-gap: 20px; }
  .market-com .lt .eyebrow { margin-bottom: 12px; font-size: 11px; }
  .market-com .lt .lt-title { font-size: clamp(34px,10.4vw,46px); }
  .market-com .lt .lede { font-size: 16px; margin-bottom: 20px; }
  .market-com .lt .actions .btn { flex: 1 1 100%; }
  .market-com .lt-caps { left: -69px; top: -32px; gap: 10px; }
  .market-com .lt-cap { width: 64px; height: 64px; border-radius: 16px; }
  .market-com .lt-glow { left: -170px; top: -130px; width: 340px; height: 260px; }
  /* A light phone frame: the atmosphere does not breathe. */
  .market-com .lt-aurora i:nth-child(n),
  .market-com .lt.lt-atmo-grain .lt-grain { animation: none; }
  .lt-js .market-com .lt-cue { display: none; }
  /* The text and buttons under the panel stand from the first frame (D140). */
  .lt-intro:not(.lt-replay) .market-com .lt-foot { animation: none; }
  .market-com .lt-pricing .access-plans { grid-template-columns: minmax(0,1fr); max-width: 520px; }
}
/* Phone (≤ 600 px): the laptop on top (pinned), «How it works» scrolls under it. */
@media (max-width: 600px) {
  .lt-js .market-com .lt-desc { align-items: flex-start; }
  .lt-js .market-com .lt-desc-in { width: auto; margin: 0; padding: calc(var(--lt-band-h, 46vh) + 10px) 16px 16px; }
  .lt-js .market-com .lt-band { display: block; }
  .market-com .lt-desc .h2 { font-size: 30px; }
  .market-com .lt-desc-lede { margin-top: 12px; font-size: 16px; }
  .market-com .lt-steps { margin-top: 18px; }
  .market-com .lt-step .h3 { font-size: 24px; }
  .market-com .lt-ai-note { font-size: 10px; padding: 4px 6px; }
  .market-com .lt-pause { width: 28px; height: 28px; margin: -28px 0 0 -28px; }
  .market-com .lt-pause svg { width: 11px; height: 11px; }
}

/* =====================================================================================================
   Reduced motion: the states change by a short change of opacity, no dive and no autoplay (the video by its
   button). site.css stops the transitions and animations elsewhere.
   ===================================================================================================== */
.lt-rm .market-com .lt-aurora i,
.lt-rm .market-com .lt-cue i { animation: none !important; }
.lt-rm .market-com .lt-desc .lt-rv,
.lt-rm .market-com .lt-step,
.lt-rm .market-com .lt-pricing .access-plan,
.lt-rm .market-com .lt-pricing-note { transition: opacity .24s ease !important; transform: none !important; }
.lt-rm .market-com .lt-step::before { transition: none; }
.lt-rm .market-com .lt-layer,
.lt-rm .market-com .lt-hero,
.lt-rm .market-com .lt-atmo,
.lt-rm .market-com .lt-desc { transition: opacity .24s ease; }
@media (prefers-reduced-motion: reduce) {
  .market-com .lt-aurora i,
  .market-com .lt-cue i { animation: none !important; }
  body.market-com .nav { transition: none; }
}
@media print {
  .market-com .lt-layer,
  .market-com .lt-z-fly,
  .market-com .lt-z-lid,
  .market-com .lt-dive,
  .market-com .lt-cue,
  .market-com .lt-atmo,
  .market-com .progress { display: none !important; }
  .lt-js .market-com .lt-stage,
  .lt-js .market-com .lt-desc,
  .lt-js .market-com .lt-pricing-in { position: relative !important; top: 0 !important; margin-top: 0 !important; height: auto !important; }
  .lt-js .market-com .lt-flow { margin-top: 0; }
  .lt-js .market-com .lt-z-desc,
  .market-com .lt-pricing.lt-pin { height: auto !important; }
  .lt-js .market-com .lt-desc-in { width: auto; margin: 0 var(--gutter); }
  .market-com .lt-head,
  .market-com .lt-foot,
  .market-com .lt-hrig,
  .market-com .lt-desc,
  .market-com .lt-desc .lt-rv,
  .market-com .lt-step,
  .market-com .lt-pricing .access-plan,
  .market-com .lt-pricing-note { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; }
  .market-com section.lt,
  .market-com .lt-stage,
  .market-com section.lt-pricing,
  .market-com section.lt-faq { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}