:root {
  --ink: #11131a;
  --night: #0c111b;
  --night-soft: #161d29;
  --muted: #616776;
  --line: #d9dee7;
  --surface: #f3f6f9;
  --blue: #0879ed;
  --blue-dark: #005fc2;
  --green: #2acb72;
  --paper: #ffffff;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: 0; }
img, video { max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #75b9ff; outline-offset: 3px; }
.content-wrap { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }

.site-header { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; min-height: 76px; padding: 0 max(24px, calc((100vw - var(--max)) / 2)); background: rgba(255, 255, 255, .94); border-bottom: 1px solid rgba(217, 222, 231, .9); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 19px; font-weight: 780; white-space: nowrap; }
.brand img { width: 33px; height: 33px; border-radius: 8px; }
nav { display: flex; align-items: center; justify-content: center; gap: 25px; }
nav a, .site-footer a { color: #383e4b; text-decoration: none; font-size: 14px; font-weight: 700; }
nav a:hover, nav a:focus-visible, .site-footer a:hover, .site-footer a:focus-visible, .text-link:hover, .text-link:focus-visible { color: var(--blue-dark); }
.header-cta { display: inline-flex; min-height: 40px; align-items: center; padding: 0 14px; color: var(--night); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 760; }
.header-cta:hover, .header-cta:focus-visible { border-color: var(--ink); }
.menu-toggle { display: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font-weight: 700; }

.hero { overflow: hidden; padding: 84px 0 78px; color: var(--paper); background: var(--night); }
.hero-layout { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 64px; }
.eyebrow { margin: 0 0 14px; color: var(--blue-dark); font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow-light { color: #8ac5ff; }
h1, h2, h3 { margin: 0; letter-spacing: 0; line-height: 1.04; }
h1 { max-width: 620px; font-size: 72px; font-weight: 820; }
h2 { max-width: 710px; font-size: 50px; font-weight: 810; }
h3 { font-size: 24px; font-weight: 780; }
.lede { max-width: 540px; margin: 27px 0 0; color: #c6ceda; font-size: 23px; line-height: 1.33; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 0 20px; border: 1px solid transparent; border-radius: 6px; text-decoration: none; font-weight: 780; }
.button.primary { color: var(--paper); background: var(--blue); }
.button.primary:hover, .button.primary:focus-visible { background: var(--blue-dark); }
.button.ghost { color: var(--paper); border-color: #5d6878; }
.button.ghost:hover, .button.ghost:focus-visible { border-color: var(--paper); }
.button.secondary { color: var(--ink); border-color: var(--line); background: var(--paper); }
.button.secondary:hover, .button.secondary:focus-visible { border-color: var(--ink); }
.hero-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 615px; margin: 52px 0 0; }
.hero-facts div { padding-top: 15px; border-top: 1px solid #3c4655; }
.hero-facts dt { color: var(--paper); font-size: 14px; font-weight: 760; }
.hero-facts dd { margin: 5px 0 0; color: #9da8b8; font-size: 13px; }
.hero-product { position: relative; justify-self: center; width: min(100%, 386px); padding: 34px 0 15px; }
.product-label { position: absolute; z-index: 3; top: 0; left: -18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; color: #dce6f2; background: #212b3a; border: 1px solid #39465a; border-radius: 6px; font-size: 12px; font-weight: 750; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.phone-shell { position: relative; overflow: hidden; padding: 10px; background: #05080d; border: 10px solid #05080d; border-radius: 45px; box-shadow: 18px 24px 0 #202b3a, 0 32px 60px rgba(0, 0, 0, .36); }
.phone-shell::before { content: ""; position: absolute; z-index: 2; top: 0; left: 50%; width: 34%; height: 24px; background: #05080d; border-radius: 0 0 14px 14px; transform: translateX(-50%); }
.phone-shell img { display: block; width: 100%; border-radius: 28px; }
.floating-note { position: absolute; z-index: 3; display: grid; gap: 2px; width: 190px; padding: 12px 13px; color: var(--ink); background: var(--paper); border-radius: 6px; box-shadow: 0 14px 26px rgba(0, 0, 0, .25); }
.floating-note strong { font-size: 13px; }
.floating-note span { color: var(--muted); font-size: 11px; }
.note-one { top: 40%; right: -93px; }
.note-two { bottom: 10%; left: -102px; }

.section { padding: 116px 0; }
.section-heading > p:last-child { max-width: 650px; margin: 25px 0 0; color: var(--muted); font-size: 20px; }
.workflow { background: var(--surface); }
.how-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; padding: 0; margin: 52px 0 0; list-style: none; }
.how-step { position: relative; min-width: 0; padding: 14px 14px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.how-number { display: inline-flex; min-width: 26px; min-height: 26px; align-items: center; justify-content: center; color: var(--blue-dark); background: #e5f1ff; border-radius: 50%; font-size: 12px; font-weight: 800; }
.workflow-shot { overflow: hidden; aspect-ratio: 9 / 19.5; margin: 13px 0 17px; background: #0c111b; border: 3px solid #1d2635; border-radius: 17px; box-shadow: 0 11px 20px rgba(19, 29, 44, .15); }
.workflow-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.how-step h3 { font-size: 19px; }
.how-step p { margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.42; }

.evidence-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 80px; }
.evidence-copy > p:not(.eyebrow) { margin: 25px 0 0; color: var(--muted); font-size: 20px; }
.check-list { display: grid; gap: 12px; padding: 0; margin: 34px 0 0; list-style: none; }
.check-list li { position: relative; padding-left: 26px; font-weight: 680; }
.check-list li::before { content: ""; position: absolute; top: 8px; left: 0; width: 11px; height: 11px; border: 2px solid var(--blue); border-radius: 50%; }
.comparison { position: relative; overflow: hidden; min-height: 500px; background: #d9e0e9; border-radius: 8px; user-select: none; }
.comparison-after, .comparison-before-wrap, .comparison-before-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; }
.comparison-after, .comparison-before-wrap img { object-fit: cover; }
.comparison-before-wrap { width: var(--comparison-position); overflow: hidden; }
.comparison-before-wrap img { max-width: none; width: calc(100vw); min-width: 100%; }
.comparison-divider { position: absolute; top: 0; bottom: 0; left: var(--comparison-position); width: 2px; background: var(--paper); transform: translateX(-50%); pointer-events: none; }
.comparison-divider span { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; background: var(--paper); border: 1px solid #c8d0dc; border-radius: 50%; transform: translate(-50%, -50%); }
.comparison-divider span::before, .comparison-divider span::after { content: ""; position: absolute; top: 18px; width: 7px; height: 7px; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.comparison-divider span::before { left: 11px; transform: rotate(-45deg); }
.comparison-divider span::after { right: 11px; transform: rotate(135deg); }
.comparison-label { position: absolute; top: 15px; padding: 5px 8px; color: var(--paper); background: rgba(12, 17, 27, .78); border-radius: 4px; font-size: 12px; font-weight: 760; pointer-events: none; }
.before-label { left: 15px; }.after-label { right: 15px; }
.comparison-range { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; opacity: 0; }

.record-proof { background: var(--surface); }
.record-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.record-proof-card { display: grid; grid-template-columns: 148px 1fr; align-items: center; gap: 23px; min-height: 276px; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.app-shot { overflow: hidden; aspect-ratio: 9 / 19.5; background: var(--ink); border: 4px solid #1d2635; border-radius: 21px; box-shadow: 0 12px 22px rgba(19, 29, 44, .16); }
.app-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.record-proof-card h3 { margin-top: 28px; font-size: 21px; }
.record-proof-card p { margin: 10px 0 0; color: var(--muted); font-size: 15px; }

.industries { border-top: 1px solid var(--line); }
.split-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: end; }
.split-heading > p { max-width: 360px; margin: 0; color: var(--muted); font-size: 18px; }
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 53px; }
.industry-card { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.industry-card > img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.industry-card-copy { padding: 22px 22px 25px; }
.industry-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 720; text-transform: uppercase; letter-spacing: .06em; }
.industry-number { color: var(--blue-dark); font-size: 13px; font-weight: 800; }
.industry-grid h3 { margin-top: 32px; }
.industry-grid p { margin: 12px 0 0; color: var(--muted); font-size: 16px; }
.industry-disclosure { margin: 20px 0 0; color: var(--muted); font-size: 13px; }

.credits { color: var(--paper); background: var(--night); }
.credits-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.credits h2 { color: var(--paper); }.credits-copy > p:not(.eyebrow) { margin: 25px 0; color: #bdc8d8; font-size: 20px; }
.text-link { display: inline-flex; color: var(--blue-dark); font-weight: 780; }.light-link { color: #82c4ff; }
.credit-table { overflow: hidden; border: 1px solid #475267; border-radius: 8px; }
.credit-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; min-height: 72px; padding: 14px 19px; border-top: 1px solid #475267; color: var(--paper); font-size: 18px; font-weight: 730; }
.credit-row:first-child { border-top: 0; }.credit-head { min-height: 47px; color: #aab6c7; background: #182130; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.credit-row strong { font-size: 22px; }.credit-row.featured { background: #123a66; }.credit-row em { display: block; margin-bottom: 2px; color: #83c5ff; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.fine-print { grid-column: 1 / -1; max-width: 800px; margin: -31px 0 0; color: #9ba8ba; font-size: 13px; }

.privacy { background: #eaf8f0; }.privacy-layout { display: grid; grid-template-columns: 150px 1.35fr .85fr auto; gap: 30px; align-items: center; }.privacy .eyebrow { margin: 0; }.privacy h2 { font-size: 35px; }.privacy p:not(.eyebrow) { margin: 0; color: #465165; font-size: 17px; }
.closing { padding: 88px 0; }.closing-layout { display: flex; align-items: end; justify-content: space-between; gap: 36px; }.closing h2 { max-width: 610px; font-size: 47px; }.closing .eyebrow { margin-bottom: 12px; }

.site-footer { padding: 37px 0; border-top: 1px solid var(--line); }.footer-layout { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; }.footer-layout > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }.site-footer p { margin: 0; color: var(--muted); font-size: 13px; }

.document-main { min-height: calc(100vh - 76px); padding: 68px 0 96px; background: #f7f8fa; }.document { max-width: 840px; padding: 0; }.document h1 { font-size: 64px; color: var(--ink); }.document-intro { max-width: 760px; margin: 26px 0 58px; color: var(--muted); font-size: 22px; line-height: 1.4; }.document section { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }.document h2 { font-size: 28px; }.document section p, .document li, .document dd { max-width: 760px; color: #383b43; font-size: 18px; }.document ul { padding-left: 22px; }details { padding: 20px 0; border-bottom: 1px solid var(--line); }summary { cursor: pointer; font-size: 20px; font-weight: 730; }details p { margin: 12px 0 0; }dl { display: grid; grid-template-columns: 200px 1fr; gap: 14px 28px; margin: 0; }dt { color: var(--muted); font-weight: 650; }dd { margin: 0; }.app-store .metadata > p { margin-bottom: 0; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }.workflow-steps .reveal:nth-child(2), .industry-grid .reveal:nth-child(2) { transition-delay: .08s; }.workflow-steps .reveal:nth-child(3), .industry-grid .reveal:nth-child(3) { transition-delay: .16s; }

@media (max-width: 1100px) { .how-grid { grid-template-columns: repeat(3, 1fr); }.how-step { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto; column-gap: 17px; align-items: start; }.how-number { grid-column: 1 / -1; }.workflow-shot { grid-row: 2 / span 2; margin: 13px 0 0; }.how-step h3 { margin-top: 13px; }.how-step p { margin-top: 7px; }.record-proof-card { grid-template-columns: 112px 1fr; padding: 17px; gap: 17px; }.record-proof-card h3 { margin-top: 21px; font-size: 19px; } }
@media (max-width: 900px) { .site-header { grid-template-columns: auto 1fr auto; gap: 16px; }.hero-layout, .evidence-layout, .credits-layout { grid-template-columns: 1fr; gap: 48px; }.hero { padding: 70px 0 66px; }.hero-product { justify-self: center; }.evidence-layout { align-items: start; }.comparison { min-height: 440px; }.how-grid { grid-template-columns: repeat(2, 1fr); }.record-proof-grid { grid-template-columns: 1fr; }.record-proof-card { grid-template-columns: 130px 1fr; max-width: 620px; }.split-heading, .privacy-layout { grid-template-columns: 1fr 1fr; }.privacy-layout .eyebrow { grid-column: 1 / -1; }.privacy .button { justify-self: start; }.closing h2 { font-size: 42px; } }
@media (max-width: 680px) { .content-wrap { width: min(calc(100% - 32px), var(--max)); }.site-header { display: flex; min-height: 66px; padding: 0 16px; }.menu-toggle { display: block; margin-left: auto; }.header-cta { display: none; }nav { display: none; position: absolute; top: 57px; right: 16px; width: min(280px, calc(100vw - 32px)); padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 16px 30px rgba(16, 23, 35, .14); flex-direction: column; align-items: stretch; gap: 1px; }nav.is-open { display: flex; }nav a { display: flex; align-items: center; min-height: 44px; padding: 0 8px; }h1 { font-size: 48px; }h2 { font-size: 36px; }.lede { font-size: 20px; }.hero { padding: 57px 0 58px; }.hero-layout { gap: 36px; }.hero-product { width: min(76%, 345px); }.product-label { left: -25px; }.phone-shell { box-shadow: 11px 16px 0 #202b3a, 0 25px 43px rgba(0, 0, 0, .34); }.floating-note { display: none; }.hero-facts { gap: 10px; margin-top: 40px; }.hero-facts dt { font-size: 12px; }.hero-facts dd { font-size: 11px; }.section { padding: 76px 0; }.section-heading > p:last-child, .evidence-copy > p:not(.eyebrow), .credits-copy > p:not(.eyebrow) { font-size: 18px; }.how-grid { grid-template-columns: 1fr; margin-top: 36px; gap: 12px; }.how-step { grid-template-columns: 96px 1fr; grid-template-rows: auto auto; min-height: 0; padding: 14px; gap: 0 16px; }.how-number { grid-column: 1 / -1; }.workflow-shot { grid-row: 2 / span 2; margin: 13px 0 0; border-width: 3px; border-radius: 15px; }.how-step h3 { margin-top: 15px; font-size: 20px; }.how-step p { margin-top: 8px; font-size: 14px; }.comparison { min-height: 386px; }.comparison-before-wrap img { width: auto; min-width: 100%; }.record-proof-grid { margin-top: 36px; gap: 16px; }.record-proof-card { grid-template-columns: 96px 1fr; min-height: 0; padding: 14px; gap: 16px; }.record-proof-card h3 { margin-top: 17px; font-size: 19px; }.record-proof-card p { font-size: 14px; }.app-shot { border-width: 3px; border-radius: 16px; }.split-heading, .privacy-layout { grid-template-columns: 1fr; gap: 22px; }.industry-grid { grid-template-columns: 1fr; margin-top: 36px; }.industry-grid h3 { margin-top: 28px; }.credits-layout { gap: 38px; }.fine-print { margin: 0; }.privacy h2, .closing h2 { font-size: 36px; }.closing { padding: 68px 0; }.closing-layout { display: grid; align-items: start; }.footer-layout { grid-template-columns: 1fr; justify-items: start; gap: 18px; }.footer-layout > div { justify-content: flex-start; }.document-main { padding: 52px 0 72px; }.document h1 { font-size: 46px; }.document-intro { margin-bottom: 42px; font-size: 20px; }dl { grid-template-columns: 1fr; gap: 3px; }dd { margin-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; } }
