:root {
  --ink: #171717;
  --muted: #66645f;
  --paper: #f7f6f2;
  --line: #d8d6cf;
  --orange: #ff633b;
  --lime: #c5e56c;
  --blue: #243a69;
  --forest: #0b453b;
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 10; top: -50px; left: 16px; padding: 10px 14px; background: var(--ink); color: white; border-radius: 8px; }
.skip-link:focus { top: 16px; }
.site-header, main, footer { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; min-height: 78px; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 760; letter-spacing: -.02em; text-decoration: none; }
.wordmark-mark { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: var(--ink); color: var(--lime); font-family: Georgia, serif; font-size: 18px; font-style: italic; }
.wordmark-muted { color: var(--muted); font-weight: 500; }
nav { display: flex; gap: 20px; font-size: 14px; }
nav a { text-decoration: none; }
nav a:hover, footer a:hover { text-decoration: underline; }
.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 72px; padding: 100px 0 78px; }
.eyebrow { margin: 0 0 14px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .105em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.065em; line-height: .98; }
h1 { max-width: 760px; margin-bottom: 24px; font-size: clamp(3.5rem, 7vw, 6.9rem); }
h2 { margin-bottom: 23px; font-size: clamp(2.5rem, 4.5vw, 4.4rem); }
.hero-lede { max-width: 580px; color: #4c4b47; font-size: 20px; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; border: 1px solid var(--ink); border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; }
.button-primary { background: var(--ink); color: #fff; }
.button-primary:hover { background: #3d3d3d; }
.button-secondary:hover { background: #eceae3; }
.repository-link { padding: 10px 2px; font-size: 14px; font-weight: 700; text-decoration: none; }
.repository-link:hover, .closing-repository:hover { text-decoration: underline; }
.install-command { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 17px; color: #595752; font-size: 12px; }
.install-command > span { font-weight: 720; }
.install-command code { padding: 6px 9px; border-radius: 7px; background: #ebe9e2; color: #242421; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.install-command a { color: var(--ink); font-weight: 720; }
.hero-proof { align-self: end; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: #efede7; }
.proof-label { margin-bottom: 16px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.hero-proof ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-weight: 650; }
.hero-proof li { display: flex; align-items: center; gap: 12px; }
.hero-proof li span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--lime); font-size: 11px; }
.case-index { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.case-index a { display: flex; gap: 10px; padding: 17px 10px; border-right: 1px solid var(--line); font-size: 13px; font-weight: 650; text-decoration: none; }
.case-index a:first-child { padding-left: 0; }
.case-index a:last-child { border-right: 0; }
.case-index span { color: var(--muted); font-variant-numeric: tabular-nums; }
.cases { padding: 36px 0 0; }
.case { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(430px, 1.15fr); gap: 72px; align-items: center; min-height: 680px; padding: 100px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.case-copy > p:not(.eyebrow) { max-width: 470px; color: #4e4c47; font-size: 18px; line-height: 1.55; }
.case-reverse .case-copy { grid-column: 2; grid-row: 1; }
.case-reverse .demo-stage { grid-column: 1; grid-row: 1; }
.case-facts { display: grid; gap: 11px; margin: 30px 0; }
.case-facts div { display: grid; grid-template-columns: 118px 1fr; gap: 14px; font-size: 13px; }
.case-facts dt { color: var(--muted); }
.case-facts dd { margin: 0; font-weight: 680; }
.prompt { max-width: 480px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prompt summary { padding: 14px 0; font-size: 13px; font-weight: 700; cursor: pointer; }
.prompt code { display: block; padding: 0 0 16px; color: #4e4c47; font-family: inherit; font-size: 13px; line-height: 1.55; }
.demo-stage { display: grid; place-items: center; min-height: 550px; padding: 38px; border-radius: var(--radius); overflow: hidden; }
.finance-stage { background: #dce4fa; }
.trail-stage { background: #c9d985; }
.checkout-stage { background: #dbd1c7; }
.audit-stage { grid-template-columns: 1fr; position: relative; background: #e4e2df; }
.phone { position: relative; width: 292px; min-height: 545px; overflow: hidden; border: 7px solid #272727; border-radius: 38px; background: #fff; box-shadow: 0 24px 45px rgb(23 23 23 / .2); }
.phone-status { display: flex; justify-content: space-between; padding: 12px 17px 5px; font-size: 9px; font-weight: 750; }
.phone-status span:last-child { letter-spacing: 2px; }
.app-topline { display: flex; justify-content: space-between; align-items: center; padding: 5px 13px 10px; font-size: 12px; font-weight: 700; }
.icon-button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f0f1f5; color: #2b2c31; font-size: 22px; line-height: 1; }
.icon-button:last-child { font-size: 12px; }
.finance-screen { padding: 13px 20px; text-align: center; }
.screen-kicker { margin-bottom: 5px; color: #6b6c74; font-size: 12px; font-weight: 650; }
.money { margin: 0 0 27px; color: #11131d; font-size: 42px; font-weight: 790; letter-spacing: -.06em; }
.recipient { display: flex; align-items: center; gap: 10px; padding: 13px; border-radius: 15px; background: #f1f3f8; text-align: left; }
.recipient strong, .recipient small { display: block; }
.recipient small { color: #74757e; font-size: 10px; }
.avatar { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 13px; font-weight: 800; }
.avatar-maya { background: #f5c9ca; color: #b2334c; }
.verified { margin-left: auto; color: #25836c; font-size: 16px; }
.summary-list { margin-top: 20px; border-top: 1px solid #e5e6ed; }
.summary-list div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #e5e6ed; font-size: 12px; text-align: left; }
.summary-list span { color: #6c6d76; }
.notice { margin: 18px 0 0; color: #696a72; font-size: 10px; line-height: 1.45; text-align: left; }
.phone-bottom { position: absolute; right: 0; bottom: 0; left: 0; padding: 14px 18px 17px; background: #fff; box-shadow: 0 -5px 16px rgb(23 23 23 / .04); text-align: center; }
.primary-action, .secondary-action { min-height: 43px; border: 0; border-radius: 12px; font-size: 12px; font-weight: 750; }
.primary-action { width: 100%; background: #151724; color: white; }
.primary-action:hover { background: #343748; }
.primary-action:disabled { background: #686b79; cursor: wait; }
.phone-bottom small { display: block; margin-top: 8px; color: #72747c; font-size: 9px; }
.finance-pending { padding-top: 110px; }
.finance-pending h3, .finance-success h3 { margin: 5px 0 8px; font-size: 20px; letter-spacing: -.04em; }
.finance-pending > p:last-child, .finance-success > p { color: #676a72; font-size: 12px; }
.pending-orbit { width: 54px; height: 54px; margin: 0 auto 23px; border: 5px solid #dce3fc; border-top-color: #3b61d5; border-radius: 50%; animation: spin 1.1s linear infinite; }
.success-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 84px auto 25px; border-radius: 50%; background: #d9f5e8; color: #228459; font-size: 30px; }
.text-action { color: #2654c5; font-size: 12px; font-weight: 700; }
@keyframes spin { to { transform: rotate(360deg); } }

.phone-trail { background: #f8f8f2; }
.trail-status { position: absolute; z-index: 2; top: 0; right: 0; left: 0; color: #fff; }
.trail-map { position: relative; height: 344px; overflow: hidden; background: radial-gradient(circle at 72% 24%, #b9d5a4 0 8%, transparent 8.5%), linear-gradient(141deg, #d8e8cc 0 42%, #c0dcad 42% 59%, #e3efd4 59%); }
.trail-map::before, .trail-map::after { position: absolute; content: ""; border: 1px solid rgb(65 106 72 / .25); border-radius: 43% 57% 52% 48%; transform: rotate(-21deg); }
.trail-map::before { width: 200px; height: 115px; top: 66px; left: -44px; }
.trail-map::after { width: 190px; height: 95px; top: 162px; right: -65px; }
.trail-map svg { position: absolute; inset: 45px 0 0; width: 100%; height: 270px; }
.trail-map path { fill: none; stroke: #ef5c3a; stroke-width: 7; stroke-linecap: round; }
.trail-map .route-dot { stroke: #ffd7be; stroke-width: 2; stroke-dasharray: 1 9; }
.map-label { position: absolute; top: 48px; left: 18px; z-index: 1; padding: 5px 8px; border-radius: 6px; background: rgb(255 255 255 / .8); font-size: 9px; font-weight: 700; }
.route-start, .route-end { position: absolute; z-index: 1; display: grid; place-items: center; width: 19px; height: 19px; border: 2px solid white; border-radius: 50%; background: #22795d; color: #fff; font-size: 8px; box-shadow: 0 2px 6px rgb(0 0 0 / .16); }
.route-start { left: 32px; bottom: 48px; }
.route-end { top: 75px; right: 30px; background: #ef5c3a; }
.ride-card { position: absolute; right: 9px; bottom: 9px; left: 9px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 6px 20px rgb(37 62 36 / .12); }
.ride-heading, .ride-actions { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 750; }
.recording-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #e14a40; }
.small-control { min-height: 30px; padding: 3px 8px; border: 1px solid #d3d8ca; border-radius: 8px; background: #f6f7f3; color: #315342; font-size: 10px; font-weight: 700; }
.ride-metrics { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; margin: 15px 0 8px; }
.ride-metrics div { padding-right: 6px; border-right: 1px solid #e5e7df; }
.ride-metrics div:last-child { border: 0; }
.ride-metrics strong { display: block; font-size: 23px; letter-spacing: -.07em; }
.ride-metrics span { color: #697166; font-size: 9px; text-transform: uppercase; }
.sync-state { margin: 0 0 12px; color: #55715c; font-size: 9px; font-weight: 650; }
.ride-actions { gap: 8px; }.ride-actions button { width: 50%; }.secondary-action { background: #edf0e9; color: #273a2e; }.phone-trail.is-offline .trail-map { filter: saturate(.65); }.phone-trail.is-offline .sync-state { color: #c34d36; }.phone-trail.is-offline .recording-dot { background: #dc9739; }

.phone-checkout { width: 320px; border-radius: 27px; background: #fdfcf9; transition: width .25s ease; }.phone-checkout.is-wide { width: 430px; }.checkout-controls { display: flex; gap: 5px; padding: 10px; background: #30302e; }.segment, .wide-toggle { min-height: 27px; padding: 4px 9px; border: 1px solid #bdbcb7; border-radius: 999px; background: transparent; color: inherit; font-size: 10px; font-weight: 700; }.checkout-controls .segment, .checkout-controls .wide-toggle { border-color: #767570; color: #eae9e4; }.segment.active, .checkout-controls .segment.active, .checkout-controls .wide-toggle.active { border-color: var(--orange); background: var(--orange); color: #fff; }.wide-toggle { margin-left: auto; }.checkout-content { padding: 24px 19px; }.checkout-title { display: flex; align-items: center; gap: 10px; }.shop-mark { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 50%; background: #34332f; color: #eeeae1; font-family: Georgia, serif; font-size: 19px; font-style: italic; }.checkout-title small { color: #77736e; font-size: 9px; }.checkout-title h3 { margin: 1px 0 0; font-size: 17px; letter-spacing: -.04em; }.step { margin-left: auto; color: #7c7972; font-size: 10px; }.phone-checkout[dir="rtl"] .step { margin-right: auto; margin-left: 0; }.address-form { display: grid; gap: 9px; margin: 24px 0; }.address-form label { color: #625f59; font-size: 9px; font-weight: 700; }.address-form input { display: block; width: 100%; margin-top: 4px; padding: 9px 0 7px; border: 0; border-bottom: 1px solid #d7d4cb; border-radius: 0; outline-color: var(--orange); background: transparent; color: #2e2d2a; font-size: 12px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.order-summary { display: grid; grid-template-columns: 49px 1fr auto; gap: 9px; align-items: center; padding-top: 15px; border-top: 1px solid #ddd9d0; }.coat-thumb { width: 49px; height: 55px; background: linear-gradient(135deg, #b7a298 4%, #716057 5% 42%, #cdb9ad 43% 52%, #7d6960 53%); }.order-summary strong, .order-summary small { display: block; }.order-summary strong { font-size: 11px; }.order-summary small { margin-top: 3px; color: #77736e; font-size: 9px; }.order-summary b { font-size: 11px; }.checkout-bottom { text-align: left; }.phone-checkout[dir="rtl"] .checkout-bottom { text-align: right; }.checkout-bottom small { text-align: inherit; }

.audit-tabs { position: absolute; z-index: 1; top: 36px; left: 28px; display: grid; gap: 5px; }.audit-tabs .segment { padding: 8px 11px; border-color: #bcbab5; text-align: left; }.phone-audit { min-height: 502px; background: #f7f7f7; }.messy-header { display: flex; align-items: center; gap: 11px; padding: 8px 14px; font-size: 12px; font-weight: 800; }.messy-header button { padding: 0; border: 0; background: transparent; font-size: 13px; }.messy-header button:first-of-type { margin-left: auto; }.tiny-title { margin: 13px 14px 5px; color: #636363; font-size: 9px; }.messy-row { display: grid; grid-template-columns: 18px 1fr 10px; gap: 8px; align-items: center; min-height: 52px; padding: 5px 14px; border-bottom: 1px solid #e0e0e0; }.tiny-avatar { width: 15px; height: 15px; border-radius: 3px; background: #87b8e9; }.tiny-avatar.orange { background: #e9a170; }.tiny-avatar.purple { background: #a389d8; }.messy-row b, .messy-row small { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.messy-row small { color: #868686; font-size: 7px; }.swipe-hint { margin: 18px 0; color: #aaa; font-size: 8px; text-align: center; }.support-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 15px; border-bottom: 1px solid #e2e2e2; }.support-header small { color: #777; font-size: 8px; font-weight: 800; letter-spacing: .08em; }.support-header h3 { margin: 2px 0 0; font-size: 19px; letter-spacing: -.05em; }.filter-row { display: flex; gap: 5px; padding: 12px 14px; }.filter { min-height: 29px; padding: 3px 8px; border: 1px solid #dedede; border-radius: 8px; background: white; color: #5c5c5c; font-size: 9px; }.filter b { padding-left: 2px; }.filter.active { border-color: #1e1e1e; background: #1e1e1e; color: #fff; }.ticket { display: grid; grid-template-columns: 9px 1fr auto; gap: 7px; align-items: center; margin: 0 11px; padding: 12px 3px; border-bottom: 1px solid #e4e4e4; }.priority-dot { width: 7px; height: 7px; border-radius: 50%; background: #df5a43; }.priority-dot.quiet { background: #9aa5a0; }.ticket strong, .ticket small { display: block; }.ticket strong { font-size: 10px; }.ticket small { margin-top: 3px; color: #707070; font-size: 8px; }.row-action { min-height: 30px; padding: 3px 8px; border: 1px solid #d5d5d5; border-radius: 7px; background: white; font-size: 9px; font-weight: 700; }.clear-button { width: calc(100% - 28px); min-height: 36px; margin: 16px 14px; border: 0; border-radius: 8px; background: #e9eeea; color: #305440; font-size: 10px; font-weight: 700; }.audit-findings { position: absolute; z-index: 1; bottom: 35px; left: 28px; width: 255px; padding: 14px; border-radius: 12px; background: #faf9f7; color: #4e4e4c; font-size: 10px; line-height: 1.75; }.audit-findings span { color: #cc573c; font-weight: 800; }.audit-findings span:first-child:not(:only-child) ~ span { color: #cc573c; }

.method { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding: 118px 0; }.method h2 { max-width: 500px; font-size: clamp(2.4rem, 4vw, 3.8rem); }.method ol { display: grid; gap: 25px; margin: 0; padding: 0; list-style: none; }.method li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }.method li > span { color: var(--muted); font-size: 12px; }.method strong { font-size: 18px; }.method li p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }.closing { display: flex; flex-direction: column; align-items: center; padding: 92px 24px; border-radius: 26px 26px 0 0; background: var(--ink); color: white; text-align: center; }.closing .eyebrow { color: #bdbbb3; }.closing h2 { max-width: 650px; margin-bottom: 30px; font-size: clamp(2.8rem, 5vw, 5rem); }.closing .button-primary { background: var(--lime); color: var(--ink); border-color: var(--lime); }.closing .button-primary:hover { background: #d6f483; }.closing-repository { margin-top: 16px; color: #d9d8d1; font-size: 13px; font-weight: 650; }footer { display: flex; justify-content: space-between; padding: 22px 0 34px; color: var(--muted); font-size: 12px; }footer a { color: var(--ink); font-weight: 650; text-decoration: none; }

@media (max-width: 820px) { .hero { grid-template-columns: 1fr; gap: 30px; padding: 70px 0 54px; }.hero-proof { max-width: 440px; }.case-index { grid-template-columns: 1fr 1fr; }.case-index a:nth-child(2) { border-right: 0; }.case-index a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.case-index a:nth-child(odd) { padding-left: 0; }.case { grid-template-columns: 1fr; gap: 40px; min-height: auto; padding: 72px 0; }.case-reverse .case-copy, .case-reverse .demo-stage { grid-column: 1; }.case-reverse .case-copy { grid-row: 1; }.case-reverse .demo-stage { grid-row: 2; }.demo-stage { min-height: 520px; }.method { grid-template-columns: 1fr; gap: 35px; padding: 80px 0; } }
@media (max-width: 540px) { .site-header, main, footer { width: min(100% - 28px, 1180px); }.site-header { min-height: 67px; }.wordmark-muted, nav a:not(:last-child) { display: none; }.hero { padding-top: 55px; }.hero-lede { font-size: 17px; }.case-index { display: none; }.case { padding: 62px 0; }.case-copy > p:not(.eyebrow) { font-size: 16px; }.case-facts div { grid-template-columns: 100px 1fr; }.demo-stage { min-height: 500px; padding: 22px 10px; }.phone { transform: scale(.92); }.finance-stage, .trail-stage, .checkout-stage { margin-inline: -14px; }.audit-stage { grid-template-columns: 1fr; gap: 5px; }.audit-tabs { position: static; grid-template-columns: 1fr 1fr; width: 270px; }.audit-tabs .segment { text-align: center; }.audit-findings { position: static; width: min(290px, 100%); }.method { padding: 70px 0; }.closing { margin-inline: -14px; padding: 78px 20px; }.closing h2 { font-size: 42px; }footer { gap: 12px; flex-direction: column; }.phone-checkout.is-wide { width: 320px; }.phone-checkout.is-wide .checkout-content { padding-inline: 19px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }