/* ============ axl · design 4 "Nightshift" · dark broadsheet, 3D dashboard ============ */
:root {
  --bg: #0A0A0E; --surface: #111118; --surface-2: #16161F; --line: #232330; --line-2: #34344A;
  --text: #EDEDF4; --muted: #9C9CB0; --faint: #82829B;
  --brand: #7B74FF; --brand-deep: #574FE6; --green: #4ADE80; --amber: #FBBF24; --red: #F87171;
  --disp: "Archivo", "Inter", sans-serif; --sans: "Inter", -apple-system, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
}
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--brand); color: #0A0A0E; }
a { color: inherit; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--brand); color: #000; padding: 8px 16px; z-index: 999; }
.skip:focus { left: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.kick { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); }

/* scroll progress beam */
.beam { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--brand-deep), var(--brand)); z-index: 200; }

/* nav */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(10,10,14,.8); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav-in { max-width: 1240px; margin: 0 auto; padding: 0 32px; height: 68px; display: flex; align-items: center; gap: 34px; }
.logo { font-family: var(--disp); font-weight: 900; font-size: 25px; letter-spacing: -.05em; text-decoration: none; display: inline-flex; align-items: baseline; line-height: 1; }
.logo .sq { width: .18em; height: .18em; background: var(--brand); display: inline-block; margin-left: .1em; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-weight: 550; font-size: 14.5px; text-decoration: none; color: var(--muted); transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); }
.nav-links a .soon { font-family: var(--mono); font-size: 9px; color: var(--brand); vertical-align: super; margin-left: 3px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav-phone { font-family: var(--mono); font-size: 13px; text-decoration: none; color: var(--muted); }
.nav-phone:hover { color: var(--text); }
/* Quiet next to "Get started": somebody already paying knows where they are going, and a second
   filled button beside the primary one makes neither read as the primary. */
.nav-login { font-weight: 550; font-size: 14.5px; text-decoration: none; color: var(--muted); white-space: nowrap; transition: color .2s; }
.nav-login:hover { color: var(--text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--disp); font-weight: 800; font-size: 15px; padding: 14px 26px; text-decoration: none; border: 1px solid var(--brand-deep); background: var(--brand-deep); color: #fff; cursor: pointer; border-radius: 10px; position: relative; overflow: hidden; transition: border-color .25s, background .25s, transform .15s; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s ease; }
.btn:hover::after { transform: translateX(120%); }
.btn:hover { background: var(--brand); border-color: var(--brand); color: #0A0A0E; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--text); background: transparent; color: var(--text); }
.btn.sm { padding: 10px 18px; font-size: 13.5px; }

/* hero */
.hero { padding: 92px 0 0; position: relative; }
.hero::before { content: ""; position: absolute; inset: -20% 0 auto 0; height: 620px; background: radial-gradient(ellipse 55% 60% at 50% 0%, rgba(87,79,230,.16), transparent 70%); pointer-events: none; }
.hero-top { text-align: center; max-width: 900px; margin: 0 auto; position: relative; container-type: inline-size; }
h1 { font-family: var(--disp); font-weight: 850; font-size: clamp(48px, 7.4vw, 104px); line-height: .98; letter-spacing: -.045em; margin: 24px 0 28px; text-wrap: balance; }
.slot { display: inline-grid; max-width: 100%; overflow: hidden; vertical-align: bottom; color: var(--brand); text-shadow: 0 0 42px rgba(123,116,255,.34);  padding-bottom: .16em; margin-bottom: -.16em; }
.slot > span { grid-area: 1/1; }
.slot > span:not(.cur) { opacity: 0; pointer-events: none; }
.slot .cur { animation: slotin .55s cubic-bezier(.22,1,.36,1); }
.slot .out { opacity: 1; animation: slotout .45s cubic-bezier(.55,0,.55,.2) forwards; }
@keyframes slotin { from { transform: translateY(125%); } to { transform: none; } }
@keyframes slotout { from { transform: none; opacity: 1; } to { transform: translateY(-125%); opacity: 1; } }
/* Recover's rotator sits on a line of its own and its longest phrase — "return that never came back." —
   measures 13.5x the font size. Sized off the viewport it overran the 900px heading measure at every
   width above about 740px and was cut off mid-word by the slot's own overflow, worst on the widest
   screens where the type is largest. So this heading is sized off the measure it has to fit inside
   (cqw, against .hero-top) rather than off the viewport, with the vw term still capping it on the
   narrow screens where the container tracks the viewport anyway. 7.2 against the 7.4 the phrase needs
   leaves room for a longer one later. */
/* text-wrap: balance off, and this is the other half of the bug rather than a tidy-up: balance narrows
   the measure the block lays its lines out in, and the rotator is an inline-grid that shrink-to-fits
   against that narrowed measure — so the slot came out ~150px inside the heading and clipped even at a
   font size that fit. Both lines here are hard-broken by the <br>, so there was never anything for it
   to balance. */
.h1-fit { font-size: min(7.4vw, 7.2cqw); text-wrap: wrap; }
.hero-sub { font-size: 18.5px; line-height: 1.65; color: var(--muted); max-width: 640px; margin: 0 auto 32px; }
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 22px; font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* 3D dashboard stage */
.stage { perspective: 1700px; margin-top: 64px; padding-bottom: 40px; }
.tilt { transform: rotateX(var(--rx, 16deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, .97)); transform-style: preserve-3d; transition: transform .12s linear; will-change: transform; }

/* dashboard mock */
.dm { background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 110px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(123,116,255,.06), 0 -1px 0 rgba(255,255,255,.06) inset; font-family: var(--sans); text-align: left; }
.dm-chrome { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.dm-chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.dm-chrome i:nth-child(1) { background: #FF5F57; } .dm-chrome i:nth-child(2) { background: #FEBC2E; } .dm-chrome i:nth-child(3) { background: #28C840; }
.dm-url { margin-left: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 4px 12px; }
.dm-body { display: grid; grid-template-columns: 200px 1fr; min-height: 460px; }
.dm-side { border-right: 1px solid var(--line); padding: 18px 14px; background: rgba(0,0,0,.25); }
.dm-logo { font-family: var(--disp); font-weight: 900; font-size: 19px; letter-spacing: -.05em; margin: 2px 6px 18px; display: inline-flex; align-items: baseline; }
.dm-logo .sq { width: .18em; height: .18em; background: var(--brand); display: inline-block; margin-left: .1em; }
.dm-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin: 16px 6px 6px; }
.dm-side a { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--muted); text-decoration: none; }
.dm-side a.on { background: rgba(123,116,255,.14); color: var(--text); }
.dm-side a b { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--brand); background: rgba(123,116,255,.12); padding: 1px 7px; border-radius: 20px; }
.dm-main { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.dm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dm-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; }
.dm-card .t { font-size: 11.5px; color: var(--muted); }
.dm-card .v { font-family: var(--disp); font-weight: 800; font-size: 24px; letter-spacing: -.03em; margin-top: 3px; }
.dm-card .s { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 3px; }
.dm-card.warn .v { color: var(--amber); }
.dm-card.ok .v { color: var(--green); }
.dm-mid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.dm-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.dm-panel .t { font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between; }
.dm-rev { font-family: var(--disp); font-weight: 800; font-size: 26px; letter-spacing: -.03em; margin: 4px 0 2px; }
.dm-rev .up { font-family: var(--mono); font-size: 11px; color: var(--green); font-weight: 500; margin-left: 8px; }
.dm-chart-svg { width: 100%; height: 74px; display: block; }
.dm-chart-svg .area { fill: url(#nsgrad); opacity: .5; }
.dm-chart-svg .ln { fill: none; stroke: var(--brand); stroke-width: 2; stroke-dasharray: 600; stroke-dashoffset: 600; }
.in-view .dm-chart-svg .ln { animation: draw 1.8s cubic-bezier(.4,0,.2,1) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* SLA ring */
.sla { display: flex; gap: 14px; align-items: center; }
.ring { --p: 0; width: 74px; height: 74px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--amber) calc(var(--p) * 1%), var(--line) 0); position: relative; }
.in-view .ring { animation: fill-ring 1.6s cubic-bezier(.4,0,.2,1) .4s forwards; }
@keyframes fill-ring { to { --p: 76; } }
.ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface-2); }
.ring b { position: relative; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--amber); }
.sla .t2 { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.sla .t2 b { display: block; font-family: var(--disp); font-size: 16px; color: var(--text); letter-spacing: -.02em; }
.dm-table { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 12.5px; }
.dm-tr { display: grid; grid-template-columns: 110px 1fr 110px 100px; gap: 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.dm-tr:last-child { border-bottom: none; }
.dm-tr.head { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); background: rgba(0,0,0,.2); }
.dm-tr b { color: var(--text); font-weight: 550; font-family: var(--mono); font-size: 12px; }
.dm-tr .ch { display: flex; align-items: center; gap: 8px; }
.dm-tr .ch img { height: 13px; width: auto; }
.dm-st { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; justify-self: start; }
.dm-st.new { color: var(--brand); background: rgba(123,116,255,.12); }
.dm-st.pick { color: var(--muted); background: rgba(255,255,255,.06); }
.dm-st.ship { color: var(--green); background: rgba(74,222,128,.1); }
.dm-st.warn { color: var(--amber); background: rgba(251,191,36,.1); }

/* logo marquee */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; background: rgba(255,255,255,.014); }
.trust-label { text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-bottom: 20px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marq 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.marquee-track img { height: 32px; width: auto; opacity: .85; filter: grayscale(.15); transition: opacity .2s, filter .2s; }
.marquee-track img:hover { opacity: 1; filter: none; }

/* sections */
section { padding: 104px 0; position: relative; }
section.tight { padding: 72px 0; }
.chapter { display: flex; align-items: baseline; gap: 26px; margin-bottom: 50px; }
.chapter .num { font-family: var(--disp); font-weight: 850; font-size: clamp(58px, 6.4vw, 96px); line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--brand-deep); flex: none; }
h2 { font-family: var(--disp); font-weight: 850; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.sec-sub { font-size: 16.5px; color: var(--muted); max-width: 640px; margin-top: 16px; }

/* feature cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; position: relative; overflow: hidden; transition: transform .25s ease, border-color .25s; }
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(123,116,255,.12), transparent 65%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.card:hover::before { opacity: 1; }
.card .idx { font-family: var(--mono); font-size: 11.5px; color: var(--brand); display: block; margin-bottom: 26px; }
.card h3 { font-family: var(--disp); font-weight: 800; font-size: 18.5px; letter-spacing: -.02em; margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--muted); }

/* stats band */
.stats-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(rgba(87,79,230,.07), transparent); padding: 84px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; }
.stat .big { font-family: var(--disp); font-weight: 850; font-size: clamp(46px, 5.2vw, 72px); line-height: 1; letter-spacing: -.045em; color: var(--brand); }
.stat p { margin-top: 12px; font-size: 14px; color: var(--muted); max-width: 210px; }
.stats-note { margin-top: 46px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: st; }
.step { counter-increment: st; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.step::before { content: "STEP 0" counter(st); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--brand); }
.step h3 { font-family: var(--disp); font-weight: 800; font-size: 20px; letter-spacing: -.02em; margin: 12px 0 8px; }
.step p { font-size: 14.5px; color: var(--muted); }

/* split spotlights */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 54px 0; border-top: 1px solid var(--line); }
.split:first-of-type { border-top: none; }
.split.flip > .split-copy { order: 2; }
.split h3 { font-family: var(--disp); font-weight: 850; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.035em; line-height: 1.05; margin: 14px 0; }
.split .lede { color: var(--muted); font-size: 15.5px; margin-bottom: 18px; }
.split ul { list-style: none; }
.split li { padding: 10px 0 10px 30px; position: relative; font-size: 14.5px; border-top: 1px solid var(--line); color: var(--text); }
.split li::before { content: "→"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.shot { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7); font-family: var(--mono); font-size: 12.5px; }
.shot-head { display: flex; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; background: var(--surface-2); }
.shot-body { padding: 14px 18px; }
.shot-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); align-items: center; }
.shot-row:last-child { border-bottom: none; }
.shot-row b { color: var(--text); font-weight: 500; }
.shot-row .ch img { height: 13px; width: auto; vertical-align: middle; margin-right: 7px; }
.tag { font-size: 10px; letter-spacing: .08em; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; }
.tag.br { color: var(--brand); background: rgba(123,116,255,.12); }
.tag.gr { color: var(--green); background: rgba(74,222,128,.1); }
.tag.am { color: var(--amber); background: rgba(251,191,36,.1); }
.tag.rd { color: var(--red); background: rgba(248,113,113,.1); }
.shot-foot { display: flex; justify-content: space-between; padding: 11px 18px; border-top: 1px solid var(--line); color: var(--faint); font-size: 10.5px; background: var(--surface-2); }

/* capabilities */
.cap-flow { display: flex; flex-wrap: wrap; gap: 10px; }
.cap-flow span { font-size: 13.5px; font-weight: 500; border: 1px solid var(--line); border-radius: 24px; padding: 8px 16px; background: var(--surface); color: var(--muted); transition: color .2s, border-color .2s, background .2s; }
.cap-flow span:hover { color: var(--text); border-color: var(--brand-deep); background: rgba(123,116,255,.08); }
.cap-note { margin-top: 28px; font-size: 15.5px; color: var(--muted); font-style: italic; max-width: 640px; }

/* quote */
.quote { text-align: center; border-top: 1px solid var(--line); }
.quote blockquote { font-family: var(--disp); font-weight: 800; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.16; letter-spacing: -.035em; max-width: 960px; margin: 0 auto 26px; text-wrap: balance; }
.quote blockquote em { font-style: normal; color: var(--brand); }
.quote cite { font-style: normal; font-family: var(--mono); font-size: 12.5px; color: var(--faint); }

/* integrations */
.int-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.int-col { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.int-col h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); display: flex; justify-content: space-between; margin-bottom: 14px; }
.int-col h3 b { color: var(--brand); }
.int-col ul { list-style: none; }
.int-col li { font-size: 14px; color: var(--muted); padding: 4px 0; }
.int-logos { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 12px; }
.int-logos img { height: 20px; width: auto; opacity: .9; }
.int-note { margin-top: 28px; font-size: 15px; color: var(--muted); }
.int-note a { color: var(--brand); }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; display: flex; flex-direction: column; position: relative; }
.price-card.hot { border-color: var(--brand-deep); background: linear-gradient(180deg, rgba(87,79,230,.14), var(--surface) 45%); box-shadow: 0 0 60px -22px rgba(87,79,230,.55); }
.p-flag { position: absolute; top: -13px; left: 24px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; background: var(--brand-deep); color: #fff; padding: 5px 12px; border-radius: 20px; }
.p-name { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.p-price { font-family: var(--disp); font-weight: 850; font-size: 48px; letter-spacing: -.045em; line-height: 1; }
.p-per { font-family: var(--mono); font-size: 12px; color: var(--faint); font-weight: 400; }
.was { font-size: 19px; color: var(--faint); text-decoration: line-through; font-weight: 500; margin-left: 8px; }
.p-desc { font-size: 14px; color: var(--muted); margin: 14px 0 18px; min-height: 44px; }
.p-tiers { display: flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.p-tiers button { flex: 1; font-family: var(--mono); font-size: 11.5px; padding: 9px 0; background: none; border: none; border-right: 1px solid var(--line-2); cursor: pointer; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.p-tiers button:last-child { border-right: none; }
.p-tiers button.on { background: var(--brand-deep); color: #fff; font-weight: 600; }
.price-card ul { list-style: none; margin-bottom: 24px; flex: 1; }
.price-card li { font-size: 14px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--muted); }
.price-card li b { color: var(--text); font-weight: 600; }
.p-note { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 12px; }
.p-note a { color: var(--muted); }
.price-foot { margin-top: 32px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--muted); }
.price-foot a { color: var(--brand); }
.tbl-wrap { overflow-x: auto; margin-top: 48px; border: 1px solid var(--line); border-radius: 14px; }
table.compare { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 780px; }
.compare th, .compare td { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: center; color: var(--muted); }
.compare th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); background: var(--surface-2); }
.compare td:first-child, .compare th:first-child { text-align: left; }
.compare .grp td { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); background: var(--surface-2); }
.compare .y { color: var(--green); }
.compare .n { color: var(--faint); }
.compare .add { font-family: var(--mono); font-size: 11.5px; color: var(--brand); }

/* origin */
.origin { border-top: 1px solid var(--line); background: var(--surface); }
.origin-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; }
.origin-lede { font-size: 16.5px; color: var(--muted); line-height: 1.7; }
.origin-lede strong { color: var(--text); }
.principles { list-style: none; }
.principles li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.principles h3 { font-family: var(--disp); font-weight: 800; font-size: 17px; letter-spacing: -.02em; margin-bottom: 5px; }
.principles p { font-size: 14px; color: var(--muted); }

/* faq */
.faq-list { max-width: 820px; margin: 0 auto; }
details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 10px; }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; font-family: var(--disp); font-weight: 700; font-size: 16.5px; letter-spacing: -.015em; }
summary::-webkit-details-marker { display: none; }
summary .ind { font-family: var(--mono); color: var(--brand); font-size: 19px; transition: transform .3s; flex: none; }
details[open] .ind { transform: rotate(45deg); }
details .a { padding: 0 24px 22px; color: var(--muted); font-size: 14.5px; max-width: 700px; }
.faq-foot { text-align: center; margin-top: 30px; font-size: 14.5px; color: var(--muted); }
.faq-foot a { color: var(--brand); }

/* register */
.register { border-top: 1px solid var(--line); background: radial-gradient(ellipse 60% 90% at 50% 100%, rgba(87,79,230,.2), transparent 70%); padding: 110px 0; text-align: center; }
.register .sec-sub { margin: 16px auto 0; }
.reg-form { display: flex; gap: 12px; margin: 34px auto 0; max-width: 540px; }
.reg-form input { flex: 1; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); font-family: var(--mono); font-size: 13.5px; padding: 14px 16px; border-radius: 10px; outline: none; }
.reg-form input:focus { border-color: var(--brand); }
.reg-form input::placeholder { color: var(--faint); }
.reg-ok { display: none; margin-top: 34px; font-family: var(--mono); font-size: 13.5px; color: var(--green); }
.reg-small { margin-top: 16px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* footer */
footer { padding: 64px 0 40px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 44px; }
.foot-grid h3.foot-h { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.foot-grid ul { list-style: none; }
.foot-grid li a { display: block; padding: 4px 0; font-size: 14px; color: var(--muted); text-decoration: none; }
.foot-grid li a:hover { color: var(--text); }
.foot-brand p { color: var(--muted); font-size: 14px; max-width: 270px; margin: 14px 0; }
.legal { border-top: 1px solid var(--line); padding-top: 24px; font-size: 12px; color: var(--faint); line-height: 1.7; }

/* recover extras */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vs-col { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.vs-col.good { border-color: rgba(74,222,128,.35); }
.vs-col.bad { border-color: rgba(248,113,113,.28); }
.vs-col h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.vs-col.bad h3 { color: var(--red); }
.vs-col.good h3 { color: var(--green); }
.vs-col ul { list-style: none; }
.vs-col li { padding: 10px 0 10px 28px; border-top: 1px solid var(--line); font-size: 14.5px; position: relative; color: var(--muted); }
.vs-col.good li { color: var(--text); }
.vs-col li::before { position: absolute; left: 0; font-family: var(--mono); font-size: 12px; }
.vs-col.bad li::before { content: "✕"; color: var(--red); }
.vs-col.good li::before { content: "✓"; color: var(--green); }
.g-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.g-fig { background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 44px; text-align: center; box-shadow: 0 0 70px -30px rgba(74,222,128,.4); }
.g-fig .amt { font-family: var(--disp); font-weight: 850; font-size: clamp(50px, 5.4vw, 76px); letter-spacing: -.045em; color: var(--green); line-height: 1; }
.g-fig .cap { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 12px; }
.stack { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: start; }
.stack-steps .s-step { padding: 24px 0 24px 26px; border-left: 2px solid var(--line); transition: border-color .3s; cursor: pointer; }
.stack-steps .s-step h3 { color: #A9A9BE; transition: color .3s; }
.stack-steps .s-step p, .stack-steps .s-step .k { color: #8B8BA1; transition: color .3s; }
.stack-steps .s-step.on { border-left-color: var(--brand); }
.stack-steps .s-step.on h3 { color: var(--text); }
.stack-steps .s-step.on p { color: var(--muted); }
.stack-steps .s-step.on .k { color: var(--brand); }
.s-step h3 { font-family: var(--disp); font-weight: 800; font-size: 19px; letter-spacing: -.02em; margin: 6px 0; }
.s-step p { font-size: 14px; color: var(--muted); }
.s-step .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--brand); text-transform: uppercase; }
.stack-screen { position: sticky; top: 104px; }

.center { text-align: center; }
.mt-30 { margin-top: 30px; }

/* reveal */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }
/* CSS scroll-driven reveal where supported */
@supports (animation-timeline: view()) {
  .rv { opacity: 1; transform: none; transition: none; animation: rise both cubic-bezier(.22,1,.36,1); animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 1000px) {
  .cards, .steps, .int-cols, .price-grid { grid-template-columns: 1fr 1fr; }
  .split, .origin-grid, .g-grid, .stack, .vs-grid { grid-template-columns: 1fr; }
  .split.flip > .split-copy { order: 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stack-screen { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-links, .nav-phone, .nav-login { display: none; }
  .dm-body { grid-template-columns: 1fr; }
  .dm-side { display: none; }
  .dm-cards, .dm-mid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .cards, .steps, .int-cols, .price-grid, .dm-cards, .dm-mid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .rv { opacity: 1 !important; transform: none !important; animation: none !important; }
  .tilt { transform: none !important; }
  .ring { --p: 76; }
  html { scroll-behavior: auto; }
}

/* ===== logo: Outfit wordmark (matches the live site + app) ===== */
.logo, .dm-logo { font-family: "Outfit", var(--disp); font-weight: 900; letter-spacing: -.06em; text-transform: lowercase; }
.logo .sq, .dm-logo .sq { width: .16em; height: .16em; margin-left: .12em; }

/* ===== dispatch lanes (ported from axl.co.uk) ===== */
.lanes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 18px 6px; }
.lane { border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; transition: border-color .4s ease, background .4s ease; }
.lane.active { border-color: var(--brand-deep); background: rgba(110,139,255,.08); }
.lane-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.lane-h span { font-family: var(--sans); font-size: 11px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-h b { font-size: 10.5px; color: var(--faint); transition: color .3s; }
.lane.active .lane-h b { color: var(--brand); }
.lane-n { font-family: var(--sans); font-size: 9.5px; color: var(--faint); margin: 1px 0 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-card { font-size: 10px; font-weight: 600; border-radius: 7px; padding: 6px 8px; border: 1px dashed var(--line-2); color: var(--faint); opacity: .18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .45s cubic-bezier(.16,1,.3,1); }
.lane.active .lane-card { background: var(--brand-deep); border-color: transparent; color: #fff; opacity: 1; }
.lane.done .lane-card { opacity: .35; }
.lane-chip { font-family: var(--sans); font-size: 9.5px; color: var(--faint); background: rgba(255,255,255,.04); border-radius: 7px; padding: 6px 8px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-foot { padding: 4px 18px 14px; }
.lane-progress { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 9px; }
.lane-progress i { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); border-radius: 3px; transition: width .6s cubic-bezier(.16,1,.3,1); }
.lane-foot p { font-family: var(--sans); font-size: 11.5px; color: var(--muted); min-height: 17px; }

/* ===== listing builder (ported from axl.co.uk) ===== */
.lb-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 16px 18px 4px; }
.lb-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.lb-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; font-family: var(--sans); color: var(--faint); background: var(--surface-2); transition: all .35s cubic-bezier(.16,1,.3,1); }
.lb-col.active .lb-num { background: var(--brand-deep); color: #fff; transform: scale(1.12); }
.lb-col.done .lb-num { background: rgba(110,139,255,.2); color: var(--brand); }
.lb-lab { font-family: var(--sans); font-size: 8.5px; font-weight: 600; color: var(--faint); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: color .3s; }
.lb-col.active .lb-lab { color: var(--brand); }
.lb-body { padding: 12px 18px 16px; }
.lb-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.lb-title { font-family: var(--sans); font-size: 14px; font-weight: 550; line-height: 1.5; color: var(--text); min-height: 63px; }
.lb-caret { display: inline-block; width: 7px; height: 13px; background: var(--brand); margin-left: 2px; vertical-align: -1px; animation: caretblink 1s steps(1) infinite; }
@keyframes caretblink { 50% { opacity: 0; } }
.lb-meta { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; color: var(--faint); margin: 8px 0 12px; }
.lb-meta b { color: var(--brand); font-weight: 600; }

/* ===== stock movements (ported from axl.co.uk) ===== */
.moves { min-height: 300px; }
.mv-row { display: grid; grid-template-columns: 1.5fr .9fr .9fr; gap: 10px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line); transition: opacity .45s ease, transform .45s ease, background .9s ease; }
.mv-row .sku b { display: block; font-size: 12px; font-weight: 600; color: var(--text); }
.mv-row .sku span { display: block; font-family: var(--sans); font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-row .qty { text-align: right; }
.mv-row .qty b { font-size: 13px; font-weight: 700; }
.mv-row .qty b.up { color: var(--green); } .mv-row .qty b.dn { color: var(--red); }
.mv-row .qty span { display: block; font-size: 10px; color: var(--faint); margin-top: 2px; }
.mv-row .rsn { text-align: right; }
@keyframes pulseTag { 50% { opacity: .45; } }
@media (max-width: 640px) { .lanes { grid-template-columns: 1fr 1fr; } .lb-steps { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .lb-caret { animation: none; } }

/* ===== bridge tokens: the sign-up, preview and cookie-banner styles from the live site read these ===== */
:root { --surface-2: var(--surface-2); --border: var(--line); --border-2: var(--line); --text-2: var(--muted); --accent: var(--brand-deep); --accent-strong: var(--brand); --accent-ink: #fff; --accent-soft: rgba(110,139,255,.14); --accent-2: var(--green); --danger: var(--red); --danger-bg: rgba(248,113,113,.12); --warn: var(--amber); --warn-bg: rgba(251,191,36,.12); --r-sm: 10px; --r-md: 14px; --r-lg: 16px; --r-xl: 18px; --r-pill: 999px; --shadow-sm: 0 8px 24px -12px rgba(0,0,0,.6); --shadow-md: 0 20px 50px -24px rgba(0,0,0,.7); --shadow-lg: 0 30px 70px -30px rgba(0,0,0,.8); }
body { --surface: #111118; }

/* ===== nav: mobile menu ===== */
.mnav-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); border-radius: 10px; cursor: pointer; place-items: center; }
.mnav-btn svg { display: block; }
.mnav-btn .ico-close, .mnav-btn[aria-expanded="true"] .ico-open { display: none; }
.mnav-btn[aria-expanded="true"] .ico-close { display: block; }
.mnav { display: none; border-top: 1px solid var(--line); background: var(--bg); padding: 12px 24px 20px; }
.mnav a { display: block; padding: 12px 4px; font-weight: 550; font-size: 16px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line); }
.mnav a .soon { font-family: var(--mono); font-size: 9px; color: var(--brand); vertical-align: super; margin-left: 3px; }
.mnav.open { display: block; }
@media (max-width: 1000px) { .mnav-btn { display: grid; } }

/* ===== trust marquee: logo tiles with names ===== */
.marquee-track { gap: 14px; }
.lt { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font-weight: 550; font-size: 14px; white-space: nowrap; transition: border-color .2s, color .2s; }
.lt img { height: 30px; width: 30px; object-fit: contain; filter: none; opacity: 1; }
.lt:hover { border-color: var(--line-2); color: var(--text); }

/* ===== stats band: facts, not forecasts ===== */
.stat .big small { font-size: .42em; letter-spacing: -.02em; color: var(--muted); font-weight: 700; margin-left: 6px; }

/* ===== hub orbit ===== */
.hub { border-top: 1px solid var(--line); text-align: center; overflow: hidden; }
.hub .sec-sub { margin: 16px auto 0; }
.orbit { position: relative; width: min(680px, 92vw); aspect-ratio: 1; margin: 52px auto 0; }
.orbit::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(110,139,255,.22), transparent 62%); pointer-events: none; }
.orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit .ring { fill: none; stroke: var(--line-2); stroke-width: 1; }
.orbit .ring-dash { fill: none; stroke: var(--brand-deep); stroke-width: 1; stroke-dasharray: 2 14; opacity: .7; transform-origin: 50% 50%; animation: ringspin 90s linear infinite; }
@keyframes ringspin { to { transform: rotate(360deg); } }
.orbit .spoke { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 4 6; }
.orbit .pulse { fill: var(--brand); }
.orbit .pulse.out { fill: var(--green); }
.orbit .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22%; aspect-ratio: 1.55; border-radius: 22%; background: linear-gradient(160deg, var(--brand), var(--brand-deep)); display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 30px 70px -20px rgba(87,79,230,.8); }
.orbit .core .dm-logo { font-size: clamp(26px, 4.6vw, 44px); margin: 0; color: #fff; }
.orbit .core .dm-logo .sq { background: #fff; }
.orbit .node { position: absolute; width: 12.5%; aspect-ratio: 1; border-radius: 22%; background: var(--surface-2); border: 1px solid var(--line-2); display: grid; place-items: center; transform: translate(-50%, -50%); box-shadow: 0 16px 40px -18px rgba(0,0,0,.9); transition: transform .25s, border-color .25s; }
.orbit .node img { width: 62%; height: 62%; object-fit: contain; }
.orbit .node:hover { transform: translate(-50%, -50%) scale(1.08); border-color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .orbit .ring-dash { animation: none; } .orbit .pulse { display: none; } }

/* ===== integrations: logo / lettermark chips ===== */
.int-list { display: flex; flex-direction: column; gap: 8px; }
.int-item { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--text); }
.int-item .mk { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.int-item .mk img { width: 20px; height: 20px; object-fit: contain; }
.int-item .mk b { font-family: var(--disp); font-weight: 800; font-size: 10.5px; letter-spacing: -.02em; color: var(--muted); }
.int-item.more { color: var(--muted); font-size: 13px; }
.int-item.more .mk { border-style: dashed; }

/* ===== content pages ===== */
.page { max-width: 820px; margin: 0 auto; padding: 84px 32px 96px; }
.page.wide { max-width: 1040px; }
.page h1 { font-family: var(--disp); font-weight: 850; font-size: clamp(36px, 5vw, 58px); line-height: 1.02; letter-spacing: -.04em; margin: 14px 0 18px; text-wrap: balance; }
.page .lede { font-size: 18px; color: var(--muted); line-height: 1.65; max-width: 640px; }
.page .updated { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: -4px 0 26px; }
.page h2 { font-family: var(--disp); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.03em; line-height: 1.15; margin: 44px 0 12px; text-transform: none; }
.page h3 { font-family: var(--disp); font-weight: 700; font-size: 18px; letter-spacing: -.02em; margin: 26px 0 8px; }
.page p, .page li { font-size: 16px; line-height: 1.7; color: var(--muted); }
.page p strong, .page li strong { color: var(--text); }
.page ul, .page ol { padding-left: 22px; margin: 12px 0; }
.page li { margin: 8px 0; }
.page a { color: var(--brand); text-decoration: underline; text-decoration-color: rgba(110,139,255,.35); text-underline-offset: 3px; }
.page a:hover { text-decoration-color: var(--brand); }
.page table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14.5px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* A cookie name like ph_<id>_posthog has nowhere to break, so on a phone these tables are wider than
   the screen and the whole page scrolled sideways with them. The table scrolls inside its own column
   instead, which is the one place the sideways scroll belongs. */
.table-scroll { overflow-x: auto; margin: 22px 0; }
.table-scroll table { margin: 0; }
.page th, .page td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.page th { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); background: var(--surface-2); }
.page td:first-child { color: var(--text); font-weight: 600; }
.page tr:last-child td { border-bottom: none; }
.page .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.page hr { border: none; border-top: 1px solid var(--line); margin: 36px 0; }
.page .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; }
.page .cg { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; text-decoration: none; color: inherit; display: block; transition: border-color .2s, transform .2s; }
.page .cg:hover { border-color: var(--brand-deep); transform: translateY(-2px); }
.page .cg h3 { margin: 0 0 6px; font-size: 16px; }
.page .cg p { margin: 0; font-size: 14px; }
.page .cg .big { font-family: var(--disp); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--text); display: block; margin: 4px 0 6px; }
.page .company { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; font-size: 14.5px; color: var(--muted); }
@media (max-width: 800px) { .page .card-grid { grid-template-columns: 1fr; } }
#my-cal-inline { min-height: 640px; }
.cal-frame { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); margin-top: 30px; }

/* the live forms (signup / preview) carry their own class furniture; these keep the page shell consistent */
.su-wrap, .pv-page { padding-top: 56px; }
.page .btn { text-decoration: none; }
.page .cg .cg-t { display: block; font-family: var(--disp); font-weight: 700; font-size: 16px; letter-spacing: -.02em; margin-bottom: 6px; color: var(--text); }

/* ===== hub: compact integrations strip under the orbit ===== */
.hub-list { margin: 40px auto 0; max-width: 1100px; text-align: left; border-top: 1px solid var(--line); }
.hub-row { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: start; }
.hub-row h3 { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); padding-top: 6px; }
.hub-row h3 b { color: var(--brand); margin-left: 6px; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.hub-chips .int-item { font-size: 12.5px; color: var(--muted); gap: 7px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); transition: color .2s, border-color .2s; }
.hub-chips .int-item:hover { color: var(--text); border-color: var(--line-2); }
.hub-chips .int-item .mk { width: 20px; height: 20px; border-radius: 6px; border: none; }
.hub-chips .int-item .mk img { width: 16px; height: 16px; }
.hub-chips .int-item .mk b { font-size: 8.5px; }
.hub-chips .int-item.more { border-style: dashed; }
.hub .int-note { text-align: left; margin-top: 18px; font-size: 14px; max-width: 1100px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .hub-row { grid-template-columns: 1fr; gap: 8px; } }

/* ===== pricing: four platform tiers, then Recover on its own ===== */
.price-grid.tiers { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.price-grid.tiers .price-card { padding: 26px 22px; }
.price-grid.tiers .p-price { font-size: 42px; }
.or-divider { display: flex; align-items: center; gap: 18px; margin: 34px 0 22px; color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.price-card.mini { flex-direction: row; align-items: center; gap: 28px; padding: 22px 26px; }
.price-card.mini .p-name { margin-bottom: 6px; }
.price-card.mini .p-price { font-size: 34px; }
.price-card.mini .p-desc { margin: 0; min-height: 0; flex: 1; }
.price-card.mini .p-desc b { color: var(--text); font-weight: 600; }
.price-card.mini .p-cta { flex: none; text-align: right; }
.price-card.mini .p-note { margin-top: 8px; }
@media (max-width: 1000px) { .price-grid.tiers { grid-template-columns: 1fr 1fr; } .price-card.mini { flex-direction: column; align-items: stretch; } .price-card.mini .p-cta { text-align: left; } }
@media (max-width: 640px) { .price-grid.tiers { grid-template-columns: 1fr; } }
.price-card.mini .p-mid { flex: 1; }
.guarantee-line { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 7px 14px 7px 8px; border: 1px solid rgba(74,222,128,.35); border-radius: 24px; background: rgba(74,222,128,.08); font-size: 13.5px; color: var(--text); }
.guarantee-line .gmark { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #052e16; display: grid; place-items: center; flex: none; }
.guarantee-line .gmark svg { width: 13px; height: 13px; }
.guarantee-line b { color: var(--green); font-weight: 600; }
.was.pre { margin-left: 0; margin-right: 10px; font-size: 22px; }
.price-card.mini .p-price .val { color: var(--text); }

/* ===== pricing comparison v2: plan-card headers, tinted group bands, icon checks ===== */
.tbl-wrap.v2 { margin-top: 56px; border: none; border-radius: 0; }
.tbl-wrap.v2 .tbl-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tbl-wrap.v2 .tbl-title h3 { font-family: var(--disp); font-weight: 800; font-size: 24px; letter-spacing: -.03em; }
.tbl-wrap.v2 .tbl-title p { font-size: 14px; color: var(--muted); }
table.compare.v2 { min-width: 920px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg); }
.compare.v2 th, .compare.v2 td { border-bottom: 1px solid var(--line); padding: 13px 16px; text-align: center; font-size: 14px; color: var(--muted); }
.compare.v2 th { background: var(--surface); vertical-align: bottom; text-transform: none; letter-spacing: 0; padding: 18px 14px 16px; }
.compare.v2 th:first-child, .compare.v2 td:first-child { text-align: left; }
.compare.v2 th:first-child { vertical-align: bottom; }
.compare.v2 td:first-child { color: var(--text); font-weight: 500; position: sticky; left: 0; background: var(--bg); }
.compare.v2 tbody tr:hover td { background: rgba(255,255,255,.025); }
.compare.v2 tbody tr:hover td:first-child { background: #0f0f15; }
.compare.v2 .grp td { padding: 10px 16px; font-family: var(--sans); font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--text); background: rgba(110,139,255,.07); border-bottom: 1px solid var(--line); }
.compare.v2 .grp td span { font-weight: 400; color: var(--muted); margin-left: 8px; }
.plan-h { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.plan-h .pe { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.plan-h .pn { font-family: var(--disp); font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--text); }
.plan-h .pp { font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--text); }
.plan-h .pp small { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--faint); letter-spacing: 0; margin-left: 2px; }
.plan-h .pp s { color: var(--faint); font-weight: 500; font-size: 15px; margin-right: 6px; }
.plan-h .btn.sm { margin-top: 8px; padding: 8px 14px; font-size: 12.5px; }
.plan-h .flag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; background: var(--brand-deep); color: #fff; padding: 3px 9px; border-radius: 20px; margin-bottom: 2px; }
.compare.v2 .hot-col { background: rgba(110,139,255,.06); }
.compare.v2 th.hot-col { background: rgba(110,139,255,.12); box-shadow: inset 0 3px 0 var(--brand-deep); }
.compare.v2 .mod-col { border-left: 1px solid var(--line-2); }
.compare.v2 .ck { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(74,222,128,.14); color: var(--green); vertical-align: middle; }
.compare.v2 .ck svg { width: 11px; height: 11px; }
.compare.v2 .no { color: var(--faint); }
.compare.v2 .addon { display: inline-block; font-family: var(--mono); font-size: 11.5px; color: var(--brand); background: rgba(110,139,255,.12); border-radius: 20px; padding: 3px 9px; white-space: nowrap; }
.compare.v2 .soon { display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); background: rgba(251,191,36,.12); border-radius: 20px; padding: 2px 8px; margin-left: 8px; vertical-align: middle; }
.compare.v2 .num { font-variant-numeric: tabular-nums; color: var(--text); }

/* ===== hero trust row + guarantee badges ===== */
.hero-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.hero-badges .guarantee-line { margin-top: 0; }
.hero-badges .guarantee-line.neutral { border-color: var(--line-2); background: rgba(255,255,255,.03); }
.hero-badges .guarantee-line.neutral .gmark { background: var(--brand-deep); color: #fff; }
.hero-badges .guarantee-line.neutral b { color: var(--text); }
.trust-row { display: flex; gap: 8px 26px; justify-content: center; flex-wrap: wrap; margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row > span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.trust-row a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.trust-row a:hover { color: var(--text); }
.ax { text-transform: none !important; display: contents; }

/* ===== app-faithful dashboard (matches recover.axl.co.uk) ===== */
.dm { font-family: "Outfit", var(--sans); background: #0C0C0F; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; box-shadow: 0 40px 110px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(125,117,255,.05); }
.dm-chrome { background: #0C0C0F; border-bottom: 1px solid rgba(255,255,255,.08); }
.dm-body { grid-template-columns: 200px 1fr; }
.dm-side { background: #0C0C0F; border-right: 1px solid rgba(255,255,255,.08); padding: 16px 12px; }
.dm-wm { display: flex; align-items: baseline; gap: 6px; margin: 4px 8px 18px; font-family: "Outfit", var(--sans); font-weight: 800; font-size: 19px; letter-spacing: -.04em; color: #F4F4F6; }
.dm-wm em { font-style: normal; font-weight: 600; color: #7D75FF; letter-spacing: -.02em; }
.dm-h { font-family: "Outfit", var(--sans); font-size: 10.5px; letter-spacing: .14em; color: #9A9AAD; margin: 16px 12px 6px; }
.dm-side a { font-family: "Outfit", var(--sans); font-size: 13.5px; font-weight: 500; color: #C9C9D4; padding: 9px 14px; border-radius: 10px; }
.dm-side a.on { background: rgba(125,117,255,.14); color: #F4F4F6; }
.dm-side a b { font-family: "Outfit", var(--sans); font-size: 11px; color: #B8B4FF; background: rgba(125,117,255,.16); }
.dm-side a .sn { font-family: "Outfit", var(--sans); font-size: 10px; font-weight: 600; color: #9A9AAD; background: rgba(255,255,255,.06); padding: 1px 7px; border-radius: 20px; }
.dm-side hr { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 12px 4px; }
.dm-top { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.dm-search { flex: 1; max-width: 420px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: #17171D; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px 12px; font-size: 12.5px; color: #8A8A9A; }
.dm-search .k { margin-left: auto; font-size: 10.5px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 1px 6px; }
.dm-user { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: #F4F4F6; }
.dm-user i { width: 26px; height: 26px; border-radius: 50%; background: #7D75FF; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.dm-main { padding: 18px 22px 22px; gap: 14px; }
.dm-title { font-family: "Outfit", var(--sans); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: #F4F4F6; line-height: 1.1; }
.dm-title + p { font-size: 12.5px; color: #9A9AAD; margin-top: 3px; }
.dm-lbl { font-family: "Outfit", var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #7D75FF; text-transform: uppercase; }
.dm-card, .dm-panel, .dm-table { background: #17171D; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; }
.dm-card .t { font-family: "Outfit", var(--sans); font-size: 12px; color: #9A9AAD; }
.dm-card .v { font-family: "Outfit", var(--sans); font-weight: 800; font-size: 24px; color: #F4F4F6; }
.dm-card .s { font-family: "Outfit", var(--sans); font-size: 11px; color: #8A8A9A; }
.dm-card.warn .v { color: #FBBF24; } .dm-card.ok .v { color: #4ADE80; }
.dm-panel .t { font-family: "Outfit", var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #C9C9D4; }
.dm-panel .t span:last-child { font-weight: 500; letter-spacing: 0; text-transform: none; color: #8A8A9A; }
.dm-rev { font-family: "Outfit", var(--sans); }
.sweeps { list-style: none; margin-top: 10px; }
.sweeps li { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #C9C9D4; padding: 5px 0; }
.sweeps li i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; flex: none; }
.sweeps li i.idle { background: #3A3A46; } .sweeps li i.warn { background: #FBBF24; }
.sweeps li span:last-child { margin-left: auto; color: #8A8A9A; font-size: 11px; }
.dm-tr { font-family: "Outfit", var(--sans); border-bottom: 1px solid rgba(255,255,255,.07); }
.dm-tr.head { font-family: "Outfit", var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: #8A8A9A; background: transparent; }
.dm-tr b { font-family: "Outfit", var(--sans); font-weight: 600; color: #F4F4F6; }
.dm-st { font-family: "Outfit", var(--sans); font-weight: 600; letter-spacing: .02em; text-transform: none; }
.dm-st.new { color: #B8B4FF; background: rgba(125,117,255,.16); } .dm-st.pick { color: #C9C9D4; background: rgba(255,255,255,.07); } .dm-st.ship { color: #4ADE80; background: rgba(74,222,128,.12); } .dm-st.warn { color: #FBBF24; background: rgba(251,191,36,.12); }
.sla .t2 b { font-family: "Outfit", var(--sans); }
.ring::before { background: #17171D; }
@media (max-width: 1000px) { .dm-top .dm-search { display: none; } }

/* ===== hero floor: warehouse grid + routes, lit by the cursor ===== */
.hero { position: relative; overflow: hidden; }
.hero::before { display: none; }
.floor { position: absolute; inset: 0; pointer-events: none; --mx: 50%; --my: 30%; }
.floor .grid, .floor .lit { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(rgba(125,117,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(125,117,255,.10) 1px, transparent 1px); background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px; background-position: -1px -1px; }
.floor .grid { opacity: .18; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 20%, transparent 70%); }
.floor .lit { background-image: linear-gradient(rgba(125,117,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(125,117,255,.35) 1px, transparent 1px), linear-gradient(rgba(125,117,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(125,117,255,.5) 1px, transparent 1px); -webkit-mask-image: radial-gradient(240px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.6) 35%, transparent 72%); mask-image: radial-gradient(240px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.6) 35%, transparent 72%); transition: opacity .4s; }
.floor svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.floor .route { fill: none; stroke: rgba(125,117,255,.11); stroke-width: 1.5; stroke-dasharray: 6 10; animation: routeflow 3.2s linear infinite; }
.floor .route.lit-r { stroke: rgba(125,117,255,.9); }
.floor .routes-lit { -webkit-mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000 0%, transparent 70%); mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000 0%, transparent 70%); transition: opacity .4s; }
.floor .pk { fill: rgba(125,117,255,.3); } .floor .routes-lit .pk { fill: #B8B4FF; }
.floor .bc { stroke: rgba(255,255,255,.12); stroke-width: 1; } .floor .routes-lit .bc { stroke: #fff; }
@keyframes routeflow { to { stroke-dashoffset: -32; } }
.floor .torch { position: absolute; inset: 0; background: radial-gradient(300px circle at var(--mx) var(--my), rgba(125,117,255,.16), transparent 70%); transition: opacity .4s; }
.hero:not(.pointer) .floor .lit, .hero:not(.pointer) .floor .routes-lit, .hero:not(.pointer) .floor .torch { opacity: 0; }
.hero .wrap { position: relative; }
@media (prefers-reduced-motion: reduce) { .floor .route { animation: none; } .floor .lit, .floor .routes-lit, .floor .torch { display: none; } }
.dm-wm .sq { width: .2em; height: .2em; background: var(--brand); display: inline-block; margin-left: .06em; }
.dm-wm b { font-weight: inherit; display: inline-flex; align-items: baseline; }

/* ===== logo strip, restyled: no boxes, breathing room, wide edge fades ===== */
.trust { padding: 34px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; }
.trust-label { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 1240px; margin: 0 auto 26px; padding: 0 32px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.trust-label::before, .trust-label::after { content: ""; flex: 1; max-width: 220px; height: 1px; background: var(--line); }
.trust .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.trust .marquee-track { gap: 0; animation-duration: 48s; }
.lt { padding: 0 34px; border: none; background: transparent; border-radius: 0; gap: 12px; font-family: var(--sans); font-weight: 550; font-size: 15.5px; color: var(--muted); position: relative; opacity: .85; transition: opacity .2s, color .2s; }
.lt::after { content: ""; position: absolute; right: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); transform: translateY(-50%); }
.lt img { height: 26px; width: 26px; }
.lt:hover { opacity: 1; color: var(--text); }
.chapter { gap: 0; }
.chapter .num { display: none; }

/* ===== real logos: wordmarks vs marks ===== */
.lt.wm { gap: 0; }
.lt.wm img { height: 22px; width: auto; max-width: 118px; }
.lt img { height: 26px; width: auto; max-width: 30px; object-fit: contain; }
.int-item .mk img { width: 18px; height: 18px; object-fit: contain; }
.int-item .mk.wide { width: auto; min-width: 28px; padding: 0 7px; }
.int-item .mk.wide img { width: auto; height: 12px; max-width: 64px; }
.hub-chips .int-item .mk.wide { height: 20px; padding: 0 6px; }
.hub-chips .int-item .mk.wide img { height: 10px; max-width: 54px; }
.hub-chips .int-item .mk img { width: 14px; height: 14px; }
.orbit .node img { width: 64%; height: 64%; object-fit: contain; }
.orbit .node.wm img { width: 76%; height: 50%; }
.dm-tr .ch img, .shot-row .ch img { height: 13px; width: auto; max-width: 40px; object-fit: contain; }
.int-item .mk.wide img { height: 14px; max-width: 72px; }
.hub-chips .int-item .mk.wide { height: 22px; padding: 0 8px; }
.hub-chips .int-item .mk.wide img { height: 13px; max-width: 74px; }
.lt.wm img { height: 24px; max-width: 128px; }
.hub-chips .int-item .mk.wide img, .int-item .mk.wide img { width: auto; }
.hub-chips .int-item.wm { padding: 3px 12px; }
.hub-chips .int-item.wm .mk.wide { height: 22px; padding: 0; background: transparent; }
.hub-chips .int-item.wm .mk.wide img { height: 15px; max-width: 92px; }

/* ===== logo strip: logos only ===== */
.trust .lt { padding: 0 30px; gap: 0; opacity: .92; }
.trust .lt img { height: 24px; width: auto; max-width: 118px; object-fit: contain; }
.trust .lt.mark img { height: 28px; max-width: 34px; }
.trust .lt::after { display: none; }

/* ===== hub v2: two counter-rotating rings, curved beams, pulsing core ===== */
.orbit.v2 { width: min(720px, 92vw); }
.orbit.v2::before { inset: 30%; }
.ring-g { position: absolute; inset: 0; animation: ringspin var(--dur, 140s) linear infinite; transform-origin: 50% 50%; }
.ring-g.inner { --dur: 110s; animation-direction: reverse; }
.ring-g.outer { --dur: 170s; }
.ring-g svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit.v2 .ring { stroke: var(--line); stroke-width: .6; }
.orbit.v2 .ring-dash { stroke-dasharray: 1.5 9; opacity: .5; animation: none; }
.orbit.v2 .beam { fill: none; stroke: rgba(110,139,255,.16); stroke-width: .5; }
.orbit.v2 .beam.out { stroke: rgba(74,222,128,.14); }
.orbit.v2 .pulse { fill: var(--brand); filter: drop-shadow(0 0 2px var(--brand)); }
.orbit.v2 .pulse.out { fill: var(--green); filter: drop-shadow(0 0 2px var(--green)); }
.orbit.v2 .node { width: 11%; animation: ringspin var(--dur, 140s) linear infinite reverse; }
.ring-g.inner .node { --dur: 110s; animation-direction: normal; width: 10%; }
.orbit.v2 .node:hover { transform: translate(-50%, -50%) scale(1.1); animation-play-state: paused; }
.orbit.v2 .core { width: 20%; z-index: 2; }
.orbit.v2 .core .halo { position: absolute; inset: -14%; border-radius: 28%; border: 1px solid rgba(110,139,255,.5); animation: halo 3.2s ease-out infinite; }
@keyframes halo { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ringspin { to { transform: rotate(360deg); } }
.hub-counts { display: flex; gap: 34px; justify-content: center; flex-wrap: wrap; margin-top: 44px; font-size: 14.5px; color: var(--muted); }
.hub-counts b { font-family: var(--disp); font-weight: 800; font-size: 20px; color: var(--text); letter-spacing: -.02em; margin-right: 6px; }
.hub-all { max-width: 1100px; margin: 22px auto 0; border: none; background: transparent; text-align: left; }
.hub-all summary { justify-content: center; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 14px; }
.hub-all summary:hover { color: var(--text); }
.hub-dir { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 18px 0 6px; border-top: 1px solid var(--line); }
.hub-dir h3 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.hub-dir p { font-size: 14px; line-height: 1.8; color: var(--muted); }
.hub-all .int-note { margin-top: 18px; text-align: center; }
@media (max-width: 900px) { .hub-dir { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hub-dir { grid-template-columns: 1fr; } .orbit.v2 .node { width: 13%; } }
@media (prefers-reduced-motion: reduce) { .ring-g, .orbit.v2 .node, .orbit.v2 .core .halo { animation: none; } }
.trust { padding: 38px 0 34px; }
@keyframes nodespin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.orbit.v2 .node { animation: nodespin var(--dur, 140s) linear infinite reverse; }
.ring-g.inner .node { animation-direction: normal; }
.orbit.v2 .node:hover { transform: translate(-50%, -50%) scale(1.1); }
.trust-label { margin-top: 10px; margin-bottom: 30px; }
.hub .int-note { text-align: center; margin: 18px auto 0; }

/* ===== how it works: scroll stepper with a progress rail and per-step live screens ===== */
.steps-story { display: grid; grid-template-columns: 440px 1fr; gap: 72px; align-items: start; }
.steps-rail { position: relative; padding-left: 0; }
.rail-line { position: absolute; left: 17px; top: 28px; bottom: 28px; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(var(--brand-deep), var(--brand)); transition: height .6s cubic-bezier(.22,1,.36,1); }
.steps-rail .s-step { display: flex; gap: 22px; padding: 22px 0; border: none; cursor: pointer; }
.steps-rail .s-step .s-n { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--faint); background: var(--bg); border: 2px solid var(--line); position: relative; z-index: 1; transition: all .35s; }
.steps-rail .s-step.on .s-n { color: #fff; background: var(--brand-deep); border-color: var(--brand-deep); box-shadow: 0 0 0 6px rgba(110,139,255,.15); }
.steps-rail .s-step.done .s-n { color: var(--brand); border-color: var(--brand-deep); }
.steps-rail .s-step h3 { color: #A9A9BE; transition: color .3s; margin: 4px 0 6px; }
.steps-rail .s-step p { color: #8B8BA1; transition: color .3s; }
.steps-rail .s-step.on h3 { color: var(--text); } .steps-rail .s-step.on p { color: var(--muted); }
.steps-screen { position: sticky; top: 104px; }
.how-shot .shot-body { min-height: 300px; }
.how-shot .ch img { height: 14px; width: auto; max-width: 40px; margin-right: 8px; vertical-align: middle; }
/* step 1: channels connect one by one */
.cx-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: 13px; opacity: 0; transform: translateX(-8px); animation: cxin .5s ease var(--d) forwards; }
.cx-st { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--faint); }
.cx-st i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--brand); animation: spin .8s linear infinite; }
.cx-st b { font-weight: 500; opacity: 0; }
.cx-row::after { content: ""; }
.cx-row .cx-st { animation: cxdone .01s linear calc(var(--d) + .7s) forwards; }
@keyframes cxin { to { opacity: 1; transform: none; } }
@keyframes cxdone { to { color: var(--green); } }
.cx-row .cx-st i { animation: spin .8s linear infinite, cxtick .01s linear calc(var(--d) + .7s) forwards; }
@keyframes cxtick { to { border: none; background: var(--green); animation: none; } }
.cx-row .cx-st b { animation: fadein .3s ease calc(var(--d) + .7s) forwards; }
@keyframes fadein { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
/* step 2: the queue fills, a message gets answered, stock ticks */
.wk-row, .wk-msg, .wk-stock { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; opacity: 0; transform: translateY(-6px); animation: cxin .45s ease var(--d) forwards; }
.wk-row b { color: var(--text); font-weight: 500; }
.wk-msg { grid-template-columns: auto 1fr auto; background: rgba(110,139,255,.06); margin: 6px -18px 0; padding: 10px 18px; border-radius: 8px; border: none; }
.wk-msg b { color: var(--text); }
.wk-stock { grid-template-columns: 1fr auto auto; border: none; margin-top: 4px; }
.wk-num { font-family: var(--disp); font-weight: 800; font-size: 20px; color: var(--text); letter-spacing: -.02em; }
/* step 3: pick → label prints → shipped */
.ship-body { display: grid; grid-template-columns: 1fr 190px; gap: 18px; align-items: start; }
.sh-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; opacity: 0; animation: cxin .45s ease var(--d) forwards; }
.sh-row b { color: var(--text); font-weight: 500; }
.sh-row .tag.st-a { color: var(--amber); background: rgba(251,191,36,.1); animation: shipped .01s linear calc(var(--d) + 1.6s) forwards; }
@keyframes shipped { to { color: var(--green); background: rgba(74,222,128,.12); } }
.sh-row .tag.st-a::before { content: "Picked"; animation: shiptxt .01s linear calc(var(--d) + 1.6s) forwards; }
@keyframes shiptxt { to { content: "Shipped"; } }
.sh-row .tag.st-a { font-size: 0; }
.sh-row .tag.st-a::before { font-size: 10px; }
.sh-sync { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--green); padding-top: 12px; opacity: 0; animation: cxin .4s ease var(--d) forwards; }
.sh-sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.mini-printer { position: relative; }
.mp-body { background: linear-gradient(#20202b, #15151d); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px 0; position: relative; z-index: 2; }
.mp-led { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-bottom: 8px; animation: ledblink 1.2s ease infinite; }
@keyframes ledblink { 50% { opacity: .3; } }
.mp-slot { height: 7px; background: #050508; border-radius: 3px 3px 0 0; margin: 0 -4px; }
.mp-label { background: #F7F5EE; color: #17130C; font-family: var(--mono); font-size: 9.5px; padding: 10px 11px; margin: 0 6px; border-radius: 0 0 4px 4px; clip-path: inset(0 0 100% 0); animation: mpprint 1.8s cubic-bezier(.3,.7,.3,1) 1.9s forwards; }
@keyframes mpprint { to { clip-path: inset(0 0 -4% 0); } }
.mp-top { display: flex; justify-content: space-between; font-weight: 700; font-size: 12px; border-bottom: 2px solid #17130C; padding-bottom: 5px; margin-bottom: 6px; }
.mp-top span { border: 1.5px solid #17130C; padding: 0 5px; }
.mp-line { color: #4A4438; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-bars { height: 26px; margin-top: 7px; background: repeating-linear-gradient(90deg, #17130C 0 2px, transparent 2px 4px, #17130C 4px 7px, transparent 7px 9px, #17130C 9px 10px, transparent 10px 14px); }
@media (max-width: 1000px) { .steps-story { grid-template-columns: 1fr; gap: 28px; } .steps-screen { position: static; } .ship-body { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cx-row, .wk-row, .wk-msg, .wk-stock, .sh-row, .sh-sync { opacity: 1; transform: none; animation: none; } .cx-st i { animation: none; border: none; background: var(--green); } .cx-st b { opacity: 1; } .mp-label { clip-path: none; animation: none; } }
.steps-rail .s-step { min-height: 36vh; align-items: center; padding: 28px 0; }
.steps-rail .s-step:first-child { min-height: 30vh; align-items: flex-start; padding-top: 12px; }
.steps-rail .s-step:last-child { min-height: 30vh; align-items: flex-end; padding-bottom: 12px; }
.rail-line { top: 30px; bottom: 30px; }
@media (max-width: 1000px) { .steps-rail .s-step, .steps-rail .s-step:first-child, .steps-rail .s-step:last-child { min-height: 0; align-items: flex-start; padding: 18px 0; } }

/* ===== how it works, horizontal: rail across the top, one compact screen below ===== */
.steps-story.horizontal { display: block; }
.steps-story.horizontal .steps-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; margin-bottom: 26px; }
.steps-story.horizontal .rail-line { left: 18px; right: 18px; top: 17px; bottom: auto; width: auto; height: 2px; }
.steps-story.horizontal .rail-fill { height: 100%; width: 0; transition: width .6s cubic-bezier(.22,1,.36,1); }
.steps-story.horizontal .s-step, .steps-story.horizontal .s-step:first-child, .steps-story.horizontal .s-step:last-child { min-height: 0; align-items: flex-start; flex-direction: column; gap: 14px; padding: 0; }
.steps-story.horizontal .s-step h3 { font-size: 17px; margin: 0 0 4px; }
.steps-story.horizontal .s-step p { font-size: 13.5px; line-height: 1.5; }
.steps-story.horizontal .s-step .s-n::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; transform: scale(1.4); }
.steps-story.horizontal .s-step.on .s-n::after { animation: nring .6s ease-out; }
@keyframes nring { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.steps-story.horizontal .steps-screen { position: static; }
.steps-story.horizontal .how-shot .shot-body { min-height: 0; padding: 12px 18px; }
.steps-story.horizontal .hs-work .shot-body, .steps-story.horizontal .hs-connect .shot-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.steps-story.horizontal .cx-row, .steps-story.horizontal .wk-row { padding: 7px 0; font-size: 12.5px; }
.steps-story.horizontal .wk-msg, .steps-story.horizontal .wk-stock { grid-column: 1 / -1; }
.steps-story.horizontal .ship-body { grid-template-columns: 1fr 170px; }
.steps-story.horizontal .sh-row { padding: 7px 0; }
.steps-story.horizontal .mp-label { font-size: 9px; }
.steps-story.horizontal .autobar { height: 2px; background: var(--line); }
.steps-story.horizontal .autobar i { display: block; height: 100%; width: 0; background: var(--brand); }
.steps-story.horizontal.playing .autobar i { animation: autobar var(--auto, 5200ms) linear forwards; }
@keyframes autobar { to { width: 100%; } }
@media (max-width: 900px) { .steps-story.horizontal .steps-rail { grid-template-columns: 1fr; gap: 14px; } .steps-story.horizontal .rail-line { display: none; } .steps-story.horizontal .s-step { flex-direction: row; gap: 16px; } .steps-story.horizontal .hs-work .shot-body, .steps-story.horizontal .hs-connect .shot-body { grid-template-columns: 1fr; } }
.floor .pt { fill: #0A0A0E; stroke: rgba(125,117,255,.35); stroke-width: 1.5; }
.floor .pt.end { stroke: rgba(74,222,128,.35); }
.floor .routes-lit .pt { stroke: var(--brand); fill: rgba(125,117,255,.25); }
.floor .routes-lit .pt.end { stroke: var(--green); fill: rgba(74,222,128,.25); }
/* route endpoints: barely-there in the dim layer, only the torch brings them up */
.floor .pt { r: 3; fill: rgba(125,117,255,.08); stroke: rgba(125,117,255,.16); stroke-width: 1; }
.floor .pt.end { fill: rgba(74,222,128,.06); stroke: rgba(74,222,128,.14); }
.floor .routes-lit .pt { fill: rgba(125,117,255,.35); stroke: rgba(125,117,255,.7); }
.floor .routes-lit .pt.end { fill: rgba(74,222,128,.3); stroke: rgba(74,222,128,.6); }

/* ===== product screens take the app's own skin (matches the hero dashboard) ===== */
.shot, .shot * { font-family: "Outfit", var(--sans); }
.shot .mp-label, .shot .mp-label * { font-family: var(--mono); }
.shot { background: #0C0C0F; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); font-size: 13px; }
.shot-head { background: transparent; border-bottom: 1px solid rgba(255,255,255,.08); padding: 14px 20px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: #F4F4F6; }
.shot-head > span:last-child { font-weight: 500; font-size: 12px; color: #9A9AAD; letter-spacing: 0; text-transform: none; }
.shot-body { padding: 14px 20px; }
.shot-row, .sc-row, .wk-row, .cx-row, .sh-row, .mv-row, .dm-tr { border-color: rgba(255,255,255,.07); color: #C9C9D4; font-size: 13px; }
.shot-row b, .wk-row b, .sh-row b, .mv-row .sku b { font-weight: 600; color: #F4F4F6; letter-spacing: 0; }
.shot-foot { background: transparent; border-top: 1px solid rgba(255,255,255,.08); padding: 12px 20px; font-size: 12px; color: #8A8A9A; letter-spacing: 0; text-transform: none; }
.tag { font-size: 11px; font-weight: 600; letter-spacing: .01em; text-transform: none; padding: 4px 10px; border-radius: 20px; }
.tag.br { color: #B8B4FF; background: rgba(125,117,255,.16); } .tag.gr { color: #4ADE80; background: rgba(74,222,128,.12); } .tag.am { color: #FBBF24; background: rgba(251,191,36,.12); } .tag.rd { color: #F87171; background: rgba(248,113,113,.12); }
.tag:not(.br):not(.gr):not(.am):not(.rd) { color: #C9C9D4; background: rgba(255,255,255,.07); }
.sh-row .tag.st-a::before { font-size: 11px; }
.cx-st { font-size: 12px; } .cx-st b { font-weight: 600; }
.wk-msg { background: rgba(125,117,255,.08); border-radius: 10px; }
.wk-num, .lb-title, .lane-h span { font-family: "Outfit", var(--sans); }
/* lanes / listing builder / movements inside the app skin */
.lane { background: #17171D; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.lane.active { border-color: rgba(125,117,255,.6); background: rgba(125,117,255,.10); }
.lane-h span { font-size: 12.5px; font-weight: 600; color: #F4F4F6; }
.lane-n { color: #8A8A9A; font-size: 11px; }
.lane-card { border-radius: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0; }
.lane.active .lane-card { background: #7D75FF; }
.lane-chip { background: rgba(255,255,255,.05); color: #9A9AAD; border-radius: 8px; font-size: 11px; }
.lane-progress i { background: #7D75FF; }
.lane-foot p { color: #9A9AAD; font-size: 12.5px; }
.lb-num { background: rgba(255,255,255,.07); color: #9A9AAD; } .lb-col.active .lb-num { background: #7D75FF; } .lb-col.done .lb-num { background: rgba(125,117,255,.2); color: #B8B4FF; }
.lb-lab { font-size: 10px; color: #8A8A9A; } .lb-col.active .lb-lab { color: #B8B4FF; }
.lb-k { font-family: "Outfit", var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #7D75FF; }
.lb-title { font-size: 14px; color: #F4F4F6; }
.lb-meta { font-family: "Outfit", var(--sans); color: #8A8A9A; font-size: 11.5px; letter-spacing: 0; } .lb-meta b { color: #B8B4FF; }
.mv-row .sku span, .mv-row .qty span { color: #8A8A9A; }
.mv-row .qty b { font-size: 14px; }

/* ===== compare table aligned under the four plan cards ===== */
table.compare.aligned { table-layout: fixed; border-collapse: separate; border-spacing: 14px 0; min-width: 0; border: none; background: transparent; border-radius: 0; overflow: visible; }
.compare.aligned th, .compare.aligned td { padding: 12px 14px; border-bottom: 1px solid var(--line); background: transparent; text-align: center; }
.compare.aligned thead th { background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 0 0; border-bottom: none; padding: 18px 12px 16px; }
.compare.aligned thead th.hot-col { background: rgba(110,139,255,.12); border-color: var(--brand-deep); box-shadow: none; }
.compare.aligned .grp td { padding: 26px 0 8px; text-align: left; background: transparent; border-bottom: 1px solid var(--line-2); font-size: 13px; font-weight: 650; color: var(--text); }
.compare.aligned .grp td span { color: var(--muted); font-weight: 400; margin-left: 8px; }
.compare.aligned tr.lbl th { text-align: left; padding: 12px 0 4px; border-bottom: none; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.compare.aligned tr.vals td { padding: 8px 14px 14px; border-bottom: 1px solid var(--line); }
.compare.aligned tr.vals td.hot-col { background: rgba(110,139,255,.06); }
.compare.aligned tbody tr:hover td { background: transparent; }
.compare.aligned tbody tr.vals:hover td { background: rgba(255,255,255,.025); }
.compare.aligned tbody tr.vals:hover td.hot-col { background: rgba(110,139,255,.1); }
.compare.aligned td:first-child { position: static; font-weight: normal; color: inherit; }
.tbl-wrap.v2.aligned { overflow: visible; }
.price-card.mini > div:first-child { flex: 0 0 auto; }
.price-card.mini .p-mid { max-width: none; }
@media (max-width: 900px) { table.compare.aligned { border-spacing: 6px 0; } .compare.aligned th, .compare.aligned td { padding: 10px 6px; font-size: 12.5px; } .plan-h .btn.sm { display: none; } }
.compare.aligned tr.lbl th { font-family: var(--sans); letter-spacing: 0; text-transform: none; }
.compare.aligned .num { font-family: var(--sans); font-weight: 600; font-size: 14.5px; }
.compare.aligned tr.vals td:first-child, .compare.aligned thead th:first-child { text-align: center; }
/* recover stepper: four steps, status flip Submitted → Recovered */
.steps-story.horizontal.four .steps-rail { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sh-row .tag.st-b { color: #B8B4FF; background: rgba(125,117,255,.16); font-size: 0; animation: shippedb .01s linear calc(var(--d) + 1.7s) forwards; }
.sh-row .tag.st-b::before { content: "Submitted"; font-size: 11px; animation: shiptxtb .01s linear calc(var(--d) + 1.7s) forwards; }
@keyframes shippedb { to { color: #4ADE80; background: rgba(74,222,128,.12); } }
@keyframes shiptxtb { to { content: "Recovered"; } }
.hs-sheet .cx-st b { color: #F4F4F6; }
.hs-sheet .cx-row .cx-st { animation: none; }
@media (max-width: 900px) { .steps-story.horizontal.four .steps-rail { grid-template-columns: 1fr; } }

/* ===== recover: feature bento with app-skinned minis ===== */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bento-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 14px; transition: border-color .25s, transform .25s; }
.bento-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.bento-card h3 { font-family: var(--disp); font-weight: 800; font-size: 18.5px; letter-spacing: -.02em; margin: 6px 6px 0; }
.bento-card p { font-size: 14px; color: var(--muted); margin: 0 6px; }
.mini, .mini * { font-family: "Outfit", var(--sans); }
.mini { background: #0C0C0F; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 16px; min-height: 236px; }
.mini.center { text-align: center; }
.mini-k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7D75FF; margin-bottom: 12px; }
.mini-sub { font-size: 12px; color: #9A9AAD; margin-top: 10px; } .mini-sub b { color: #F4F4F6; font-weight: 600; }
.buckets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 30px; }
.bucket { background: #17171D; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 12px 8px; text-align: center; }
.bucket span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9A9AAD; }
.bucket b { display: block; font-size: 24px; font-weight: 800; color: #F4F4F6; margin: 6px 0 4px; letter-spacing: -.02em; }
.bucket em { font-style: normal; font-size: 10.5px; color: #B8B4FF; }
.bucket.on { border-color: #7D75FF; box-shadow: 0 0 0 3px rgba(125,117,255,.15); } .bucket.on b { color: #4ADE80; }
.bucket.dim b { color: #9A9AAD; } .bucket.dim em { color: #8A8A9A; }
.tl { list-style: none; position: relative; padding-left: 18px; }
.tl::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: rgba(255,255,255,.1); }
.tl li { position: relative; padding: 5px 0; }
.tl li::before { content: ""; position: absolute; left: -18px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: #3A3A46; }
.tl li.am::before { background: #FBBF24; } .tl li.br::before { background: #7D75FF; } .tl li.gr::before { background: #4ADE80; }
.tl b { display: block; font-size: 12.5px; font-weight: 600; color: #F4F4F6; }
.tl span { display: block; font-size: 11px; color: #9A9AAD; }
.pill-gr, .pill-am { display: inline-block !important; margin-top: 4px; font-size: 11px !important; font-weight: 600; border-radius: 20px; padding: 3px 9px; }
.pill-gr { color: #4ADE80 !important; background: rgba(74,222,128,.12); } .pill-am { color: #FBBF24 !important; background: rgba(251,191,36,.12); }
.conf { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; }
.conf-ring { width: 118px; height: 118px; border-radius: 50%; border: 7px solid #4ADE80; display: grid; place-content: center; box-shadow: 0 0 30px -8px rgba(74,222,128,.6); }
.conf-ring b { font-size: 20px; font-weight: 800; color: #4ADE80; } .conf-ring span { color: #4ADE80; font-size: 13px; }
.conf-bars { display: flex; gap: 6px; } .conf-bars i { width: 34px; height: 6px; border-radius: 6px; background: #4ADE80; transform-origin: left; animation: barfill .5s ease both; }
.conf-bars i:nth-child(2) { animation-delay: .25s; } .conf-bars i:nth-child(3) { animation-delay: .5s; }
@keyframes barfill { from { transform: scaleX(0); } }
.chk { list-style: none; }
.chk li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.chk li:last-child { border-bottom: none; }
.chk i { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.2); margin-top: 2px; }
.chk li.done i { background: rgba(74,222,128,.15); border-color: #4ADE80; position: relative; }
.chk li.done i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #4ADE80; font-size: 11px; font-weight: 800; }
.chk li.now i { border-color: #7D75FF; box-shadow: 0 0 0 3px rgba(125,117,255,.18); }
.chk b { display: block; font-size: 12.5px; font-weight: 600; color: #F4F4F6; } .chk span { display: block; font-size: 11px; color: #9A9AAD; }
.sheet div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 12px; }
.sheet span { color: #9A9AAD; flex: none; } .sheet b { color: #F4F4F6; font-weight: 500; text-align: right; }
.deadline { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: #FBBF24; background: rgba(251,191,36,.1); border-radius: 8px; padding: 8px 10px; }
.deadline i { width: 7px; height: 7px; border-radius: 50%; background: #FBBF24; animation: ledblink 1.4s ease infinite; } .deadline b { font-weight: 700; }
.money { font-size: 30px; font-weight: 800; color: #F4F4F6; letter-spacing: -.03em; line-height: 1; } .money span { display: block; font-size: 11.5px; font-weight: 400; color: #9A9AAD; margin-top: 4px; letter-spacing: 0; }
.spark { width: 100%; height: 44px; margin: 10px 0 8px; display: block; }
.sp-area { fill: rgba(74,222,128,.12); } .sp-line { fill: none; stroke: #4ADE80; stroke-width: 2; }
.opps { list-style: none; }
.opps li { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #17171D; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 8px 12px; margin-top: 6px; font-size: 11px; color: #9A9AAD; }
.opps b { display: block; font-size: 12.5px; font-weight: 600; color: #F4F4F6; } .opps em { font-style: normal; font-weight: 700; color: #4ADE80; font-size: 13px; }
@media (max-width: 1000px) { .bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } }
/* bento minis: keep the card's body type from bleeding into the app-skinned mock */
.bento-card .mini p { font-size: inherit; color: inherit; margin: 0; }
.bento-card .mini .mini-k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: #7D75FF; margin-bottom: 12px; }
.bento-card .mini .mini-sub { font-size: 12px; color: #9A9AAD; margin-top: 10px; }
.bento-card .mini .money { font-size: 30px; font-weight: 800; color: #F4F4F6; letter-spacing: -.03em; line-height: 1; }
.bento-card .mini .money span { font-size: 11.5px; font-weight: 400; color: #9A9AAD; }
/* checklist: label and detail both belong in the second column */
.chk li b, .chk li span { grid-column: 2; }
.mini { display: flex; flex-direction: column; }
.bento-card { justify-content: flex-start; }
.bento-card .mini { flex: 1; }
/* bento rows: mock, heading and body share row tracks so every mock in a row is the same height */
@supports (grid-template-rows: subgrid) {
  .bento { grid-auto-rows: auto; }
  .bento-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; }
  .bento-card .mini { flex: none; height: 100%; }
}
/* rotator: each word sizes to its own text so the slot can measure it (grid cells otherwise
   stretch every span to the widest word, leaving a gap after "Every") */
.slot > span { justify-self: start; width: max-content; }
.dm-user i { background: #4B45C6; color: #fff; }
.compare.aligned .addon s { color: var(--faint); text-decoration-thickness: 1px; margin-right: 3px; }

/* ============================================================
   Responsive pass. Two bugs first, then the size-down.
   ============================================================ */

/* 1. The app-faithful dashboard block later in this file re-declared
   .dm-body's columns, which silently beat the mobile rule above it: the
   200px sidebar stayed, main was squeezed to ~124px, and every card inside
   spilled out of the frame. Re-assert it, and drop the perspective tilt —
   with perspective the near edge renders wider than its container, so on a
   narrow screen the mock hangs over both edges. */
@media (max-width: 1000px) {
  .dm-body { grid-template-columns: 1fr; }
  .dm-side { display: none; }
  .tilt { transform: none !important; }
  .stage { perspective: none; padding-bottom: 0; }
  .dm { border-radius: 14px; }
}

/* 2. .s-step:last-child from the vertical stepper outranked the horizontal
   media rule, so the final step alone kept flex-direction: column and its
   number orphaned above the heading. */
@media (max-width: 900px) {
  .steps-story.horizontal .s-step:first-child,
  .steps-story.horizontal .s-step:last-child { flex-direction: row; align-items: flex-start; }
}

/* ---- tablet ---- */
@media (max-width: 900px) {
  section { padding: 72px 0; }
  section.tight { padding: 56px 0; }
  .wrap { padding: 0 24px; }
  .chapter { margin-bottom: 36px; }
  .sec-sub { font-size: 15.5px; }
  .split { gap: 36px; }
  .orbit.v2 { width: min(560px, 92vw); }
  .hub-counts { gap: 20px 28px; margin-top: 34px; }
}

/* ---- the comparison table stops fitting four columns well before phone
   width; let it scroll rather than crushing every column illegible ---- */
@media (max-width: 780px) {
  .tbl-wrap.v2 .tbl-title { flex-direction: column; gap: 6px; }
  .tbl-wrap.v2 .tbl-title p { font-size: 13.5px; }
}

/* ---- phone ---- */
@media (max-width: 640px) {
  section { padding: 60px 0; }
  section.tight { padding: 48px 0; }
  .wrap { padding: 0 20px; }
  .hero { padding-top: 64px; }
  h1 { font-size: clamp(34px, 10.4vw, 54px); }
  .hero-sub { font-size: 16.5px; }
  .kick { font-size: 11px; letter-spacing: .14em; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas .btn { width: 100%; }
  .btn { padding: 13px 20px; }
  .btn.sm { padding: 9px 14px; font-size: 13px; }
  .nav-in { height: 60px; gap: 12px; }
  .logo { font-size: 22px; }

  /* the dot belongs beside the first line, not centred against a wrapped block */
  /* stacked items share a left edge so the dots line up, block stays centred */
  .trust-row { flex-direction: column; align-items: flex-start; gap: 9px; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
  .trust-row > span { align-items: flex-start; text-align: left; }
  .trust-row > span::before { margin-top: 7px; }
  .hero-badges { flex-direction: column; align-items: stretch; }
  .hero-badges .guarantee-line { justify-content: flex-start; }

  /* dashboard mock */
  .dm-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dm-card { padding: 11px 12px; }
  .dm-card .v { font-size: 20px; }
  .dm-mid { grid-template-columns: 1fr; }
  .dm-main { padding: 14px; gap: 12px; }
  .dm-title { font-size: 19px; }
  .dm-tr { grid-template-columns: 84px 1fr auto; gap: 8px; padding: 9px 12px; font-size: 12px; }
  .dm-tr > span:nth-child(3), .dm-tr.head > span:nth-child(3) { display: none; }
  .dm-tr .ch { font-size: 0; } .dm-tr .ch img { margin: 0; }
  .dm-chrome { padding: 10px 12px; } .dm-url { font-size: 10px; }
  .dm-top { padding: 10px 12px; }

  /* product screens */
  .shot-head, .shot-foot { padding: 11px 14px; font-size: 12px; }
  .shot-body { padding: 12px 14px; }
  .shot-row, .sc-row { grid-template-columns: 1fr auto; gap: 8px; font-size: 12.5px; }
  .lanes { grid-template-columns: 1fr 1fr; }
  .lb-steps { grid-template-columns: repeat(3, 1fr); }
  .ship-body { grid-template-columns: 1fr; }
  .hs-work .shot-body, .hs-connect .shot-body { grid-template-columns: 1fr !important; }
  .cx-row, .wk-row { grid-template-columns: 1fr auto; font-size: 12px; }

  /* recover bento */
  .buckets { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bento-card { padding: 14px 14px 20px; }
  .mini { padding: 12px 13px; min-height: 0; }
  .conf-ring { width: 96px; height: 96px; border-width: 6px; }

  /* pricing */
  .price-card { padding: 24px 20px; }
  .price-card.mini { padding: 20px; }
  .or-divider { margin: 24px 0 18px; }
  .p-price { font-size: 40px; }

  /* footer + register */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .register { padding: 72px 0; }
  .reg-form { flex-direction: column; }
  .reg-form .btn { width: 100%; }
  .quote blockquote { font-size: 21px; }
  .page { padding: 60px 20px 72px; }
  .page .card-grid { gap: 12px; }
}

/* ---- small phone: the longest rotator phrase ("return that never came
   back.") is wider than a 360px screen at the base heading size ---- */
@media (max-width: 640px) {
  /* Below this there is no size that both fits the longest phrase on one line and still reads as a
     heading — 305px of measure on a 360px screen would mean a 22px h1 — so it wraps. Every phrase
     then shares the taller row, centred in it, rather than the short ones sitting against its top. */
  .h1-fit { font-size: clamp(29px, 8.8vw, 44px); }
  /* The width animation has to stop here, and !important is the honest way to say so: site.js sets the
     slot's width inline from the current phrase's own width, and once a phrase wraps that is circular —
     the width decides the wrap and the wrap decides the width, so the long phrase settled on three
     lines inside a box sized for a short one. Full measure instead, and the phrase wraps as wide as the
     screen allows. */
  .h1-fit .slot { width: 100% !important; align-items: center; }
  .h1-fit .slot > span { width: auto; max-width: 100%; justify-self: stretch; }
}
@media (max-width: 480px) {
  h1 { font-size: clamp(29px, 8.8vw, 44px); }
  .slot { max-width: 100%; }
  .hub-counts { gap: 14px 20px; font-size: 13.5px; }
  .hub-counts b { font-size: 17px; }
  .lanes { grid-template-columns: 1fr; }
  .dm-cards { grid-template-columns: 1fr; }
}

/* Two polish items from the mobile pass.
   The guarantee badge is an inline-flex row, so "Savings guarantee" and the
   sentence after it were separate flex items wrapping independently. Below
   phone width let them flow as one block of text with the tick floated. */
@media (max-width: 640px) {
  .guarantee-line { display: block; text-align: left; line-height: 1.5; padding: 10px 15px; }
  .guarantee-line .gmark { float: left; margin: 2px 10px 0 0; }
  .guarantee-line b { display: inline; }
}
/* The comparison table scrolls sideways on a phone; say so, or nobody finds
   the two columns off-screen. */


/* Fonts load without blocking first paint, so the fallback stack is on screen
   briefly. Match its metrics roughly to keep the swap from shifting layout. */
:root {
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --disp: "Archivo", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
   Compare plans on a phone. Four columns cannot be read at 390px
   and sideways scrolling hides half the table, so the row breaks
   into a 2x2 grid of labelled values under each feature name.
   Every plan stays on screen; nothing scrolls.
   ============================================================ */
@media (max-width: 780px) {
  table.compare.aligned { display: block; table-layout: auto; border-spacing: 0; min-width: 0; }
  .compare.aligned thead, .compare.aligned tbody, .compare.aligned tr, .compare.aligned th, .compare.aligned td { display: block; }

  /* the four plan cards become a 2x2 header block */
  .compare.aligned thead tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
  .compare.aligned thead th { border-radius: 12px; padding: 14px 10px; border: 1px solid var(--line); }
  .compare.aligned thead th.hot-col { border-color: var(--brand-deep); }
  .plan-h { gap: 2px; } .plan-h .pe { font-size: 9px; } .plan-h .pn { font-size: 15px; } .plan-h .pp { font-size: 20px; }
  .plan-h .btn.sm { display: none; }
  .plan-h .flag { font-size: 8.5px; padding: 2px 7px; }

  /* group headings keep their full-width band */
  .compare.aligned .grp td { padding: 24px 0 8px; font-size: 13px; }

  /* feature name, then its four values as labelled cells */
  .compare.aligned tr.lbl th { padding: 14px 0 6px; font-size: 14px; color: var(--text); font-weight: 550; border-bottom: none; }
  .compare.aligned tr.vals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .compare.aligned tr.vals td { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: right; font-size: 13.5px; }
  .compare.aligned tr.vals td.hot-col { border-color: var(--brand-deep); background: rgba(110,139,255,.08); }
  .compare.aligned tr.vals td::before { content: attr(data-plan); font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--faint); text-align: left; flex: none; }
  .compare.aligned tr.vals td.hot-col::before { color: var(--brand); }
  .compare.aligned tbody tr.vals:hover td { background: var(--surface); }
  .compare.aligned tbody tr.vals:hover td.hot-col { background: rgba(110,139,255,.08); }
  .compare.aligned .addon { font-size: 11.5px; padding: 3px 8px; }
  .compare.aligned .addon s { display: none; }   /* the list price is on the card above; keep the cell readable */
}
@media (max-width: 400px) {
  .compare.aligned tr.vals td { padding: 8px 10px; font-size: 13px; }
  .compare.aligned tr.vals td::before { font-size: 10px; }
}
/* 320px: the 2x2 value grid runs out of room, so give the cells the full width */
@media (max-width: 360px) {
  .compare.aligned thead tr { gap: 8px; }
  .compare.aligned thead th { padding: 12px 8px; }
  .plan-h .pp { font-size: 18px; }
  .compare.aligned tr.vals { grid-template-columns: 1fr; gap: 6px; }
  .compare.aligned tr.lbl th { font-size: 13.5px; }
}