:root {
  --paper: #f4f1e9;
  --paper-deep: #e9e4d8;
  --white: #fffefa;
  --ink: #17191d;
  --ink-soft: #343941;
  --muted: #6d716f;
  --line: rgba(23, 25, 29, 0.14);
  --blue: #2457ff;
  --blue-dark: #1438b9;
  --mint: #20c997;
  --mint-dark: #11966f;
  --coral: #ff654a;
  --yellow: #ffd84d;
  --dark: #101c19;
  --dark-2: #172824;
  --dark-text: #f4f7f2;
  --radius: 24px;
  --shadow: 0 28px 80px rgba(42, 39, 31, 0.14);
  --maxw: 1220px;
  --display: "Avenir Next", "Helvetica Neue", sans-serif;
  --body: "Avenir Next", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 920px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 12%, rgba(36,87,255,.14), transparent 24%),
    radial-gradient(circle at 13% 31%, rgba(32,201,151,.12), transparent 25%),
    linear-gradient(rgba(23,25,29,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,25,29,.035) 1px, transparent 1px);
  background-size: auto, auto, 52px 52px, 52px 52px;
  mask-image: linear-gradient(#000 0%, rgba(0,0,0,.65) 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0,0,0,.65) 65%, transparent 100%);
}

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, summary { font: inherit; }
.wrap { width: min(var(--maxw), calc(100% - 48px)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(23,25,29,.08);
  background: rgba(244,241,233,.84);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.nav { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 750; font-size: 19px; letter-spacing: -.02em; }
.brand img { width: 35px; height: 35px; border-radius: 10px; box-shadow: 0 8px 20px rgba(21,155,106,.18); }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a { color: var(--ink-soft); font-size: 14px; font-weight: 600; transition: color .2s; }
.nav-links a:hover { color: var(--blue); }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border: 1px solid var(--ink); border-radius: 999px; font-size: 14px; font-weight: 700; transition: .2s; }
.nav-cta:hover { color: white; background: var(--ink); transform: translateY(-1px); }

.hero { min-height: 790px; padding-block: 96px 80px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 74px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,254,250,.58); font-size: 12px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(32,201,151,.14); }
.hero h1 { max-width: 660px; margin: 26px 0 25px; font-family: var(--display); font-size: clamp(52px, 6.4vw, 86px); line-height: .96; letter-spacing: -.065em; font-weight: 750; }
.marked { position: relative; color: var(--blue); white-space: nowrap; }
.marked::after { content: ""; position: absolute; left: 1%; right: 0; bottom: -.07em; height: .12em; border-radius: 50%; background: var(--coral); transform: rotate(-1.5deg); opacity: .9; }
.hero-lead { max-width: 590px; margin: 0 0 32px; color: var(--ink-soft); font-size: clamp(17px, 1.55vw, 20px); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 14px; border: 1px solid transparent; font-weight: 750; font-size: 15px; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--blue); box-shadow: 0 12px 24px rgba(36,87,255,.22); }
.button-primary:hover { background: var(--blue-dark); box-shadow: 0 16px 34px rgba(36,87,255,.28); }
.button-secondary { border-color: var(--line); background: rgba(255,254,250,.68); }
.button-secondary:hover { background: var(--white); box-shadow: 0 12px 26px rgba(42,39,31,.09); }
.button-dark { color: white; background: var(--ink); }
.apple { font-size: 20px; line-height: 1; }
.play { width: 23px; height: 23px; display: inline-grid; place-items: center; padding-left: 2px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 8px; }
.compatibility { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--muted); font-size: 12px; font-weight: 600; }
.compatibility span { display: inline-flex; align-items: center; gap: 7px; }
.compatibility span::before { content: "✓"; color: var(--mint-dark); font-weight: 900; }

.hero-product { position: relative; min-width: 0; animation: product-enter .8s .08s both cubic-bezier(.2,.8,.2,1); }
.desktop-scene { position: relative; aspect-ratio: 1.16; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 25px; background: #c9d3d2; box-shadow: 0 42px 90px rgba(35,41,39,.22), 0 0 0 8px rgba(255,255,255,.35); transform: rotate(1.2deg); }
.desktop-menu { height: 30px; padding: 0 13px; display: flex; align-items: center; gap: 12px; color: #e9eeed; background: #182321; font-size: 9px; }
.apple-mini { color: white; font-size: 7px; }
.desktop-menu-spacer { flex: 1; }
.vikneo-menubar { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 5px; color: var(--mint); background: rgba(255,255,255,.1); font-weight: 900; }
.browser-shell { position: absolute; inset: 42px 30px 28px; overflow: hidden; border-radius: 13px; background: #fff; box-shadow: 0 14px 36px rgba(20,28,26,.24); }
.browser-bar { height: 38px; display: flex; align-items: center; gap: 22px; padding: 0 14px; border-bottom: 1px solid #e3e8e6; background: #f4f5f2; }
.traffic { display: flex; gap: 5px; }
.traffic i { width: 8px; height: 8px; border-radius: 50%; background: #ff6659; }
.traffic i:nth-child(2) { background: #ffc143; }
.traffic i:nth-child(3) { background: #39c856; }
.address { flex: 1; padding: 4px 10px; border-radius: 5px; background: #e6e9e7; color: #7a817e; font-size: 8px; }
.browser-content { height: calc(100% - 38px); display: grid; grid-template-columns: 23% 1fr; }
.mock-sidebar { padding: 20px 14px; display: flex; flex-direction: column; gap: 11px; background: #eef1ee; }
.mock-logo { width: 60%; height: 8px; margin-bottom: 14px; border-radius: 4px; background: #7c8b86; }
.mock-nav { width: 88%; height: 7px; border-radius: 4px; background: #c7ceca; }
.mock-nav.active { height: 25px; background: #d8e3df; }
.mock-nav.short { width: 55%; }
.mock-main { padding: 24px; }
.mock-heading { display: block; width: 39%; height: 13px; margin-bottom: 20px; border-radius: 5px; background: #c5ccc9; }
.mock-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.mock-stats i { height: 54px; border-radius: 6px; background: #edf0ed; border: 1px solid #dde3df; }
.mock-chart { position: relative; height: 45%; margin-top: 16px; overflow: hidden; border-radius: 7px; background: repeating-linear-gradient(0deg,#edf0ee 0 1px,transparent 1px 28px), #fafbf9; border: 1px solid #e2e7e4; }
.chart-line { position: absolute; left: 6%; right: 5%; top: 48%; height: 2px; background: var(--blue); transform: rotate(-7deg); }
.chart-line::before, .chart-line::after { content: ""; position: absolute; height: 2px; background: inherit; }
.chart-line::before { width: 35%; left: 20%; transform: rotate(19deg); }
.chart-line::after { width: 28%; left: 58%; transform: rotate(-17deg); }
.line-two { top: 64%; background: var(--mint); transform: rotate(4deg); }
.chart-alert { position: absolute; right: 19%; top: 57%; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: #fff; font-size: 11px; }
.capture-dim { position: absolute; inset: 30px 0 0; background: rgba(9,16,15,.53); }
.selection-box { position: absolute; left: 20%; right: 11%; top: 28%; bottom: 23%; border: 2px solid var(--mint); background: rgba(255,255,255,.04); box-shadow: 0 0 30px rgba(32,201,151,.2); }
.dimension { position: absolute; top: 8px; left: 9px; padding: 3px 6px; border-radius: 4px; color: #063a2d; background: var(--mint); font-size: 8px; font-weight: 800; }
.handle { position: absolute; width: 10px; height: 10px; border: 2px solid #10211d; border-radius: 50%; background: var(--mint); }
.handle-tl { top: -6px; left: -6px; }.handle-tr { top: -6px; right: -6px; }.handle-bl { bottom: -6px; left: -6px; }.handle-br { bottom: -6px; right: -6px; }
.bug-note { position: absolute; top: 37%; right: 11%; color: #fff; font-size: 10px; font-weight: 800; transform: rotate(-3deg); }
.bug-note span { position: absolute; width: 54px; height: 3px; right: 90%; top: 17px; border-radius: 4px; background: var(--coral); transform: rotate(16deg); }
.bug-note span::after { content: ""; position: absolute; left: -1px; top: -4px; border: 5px solid transparent; border-right-color: var(--coral); transform: rotate(-4deg); }
.editor-toolbar { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; padding: 6px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(19,29,26,.96); box-shadow: 0 13px 30px rgba(0,0,0,.4); }
.tool { width: 27px; height: 27px; padding: 0; border: 0; border-radius: 7px; color: #aebbb7; background: transparent; font-size: 13px; }
.tool.active { color: #082118; background: var(--mint); }
.tool.upload { color: #fff; background: var(--blue); }
.tool-divider { width: 1px; height: 18px; margin-inline: 2px; background: rgba(255,255,255,.14); }
.floating-shortcut { position: absolute; z-index: 4; top: -31px; left: -27px; display: flex; align-items: center; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); box-shadow: 0 16px 36px rgba(42,39,31,.14); transform: rotate(-4deg); }
.floating-shortcut > span { min-width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #d4d2ca; border-bottom-width: 3px; border-radius: 7px; background: #f4f2ec; font-size: 12px; font-weight: 700; }
.floating-shortcut small { margin-left: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.upload-toast { position: absolute; z-index: 4; right: -20px; bottom: 18px; display: flex; align-items: center; gap: 10px; min-width: 178px; padding: 12px; border-radius: 14px; color: white; background: #10221d; box-shadow: 0 18px 38px rgba(15,28,25,.28); transform: rotate(2deg); }
.upload-toast > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #06271d; background: var(--mint); font-weight: 900; }
.upload-toast div { display: grid; }
.upload-toast strong { font-size: 11px; }.upload-toast small { color: #9db0aa; font-size: 9px; }

.proof-strip { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 34px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,254,250,.72); box-shadow: 0 16px 40px rgba(42,39,31,.07); }
.proof-strip > div { position: relative; display: grid; grid-template-columns: 42px 1fr; padding: 24px 28px; }
.proof-strip > div + div { border-left: 1px solid var(--line); }
.proof-strip span { grid-row: span 2; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.proof-strip strong { font-size: 14px; }.proof-strip small { color: var(--muted); font-size: 12px; }

.section { padding-block: 120px; }
.section-heading { margin-bottom: 58px; }
.split-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; align-items: end; }
.centered-heading { max-width: 760px; margin-inline: auto; text-align: center; }
.section-heading h2, .server-copy h2, .privacy-copy h2, .faq-layout h2, .final-cta h2 { margin: 12px 0 0; font-family: var(--display); font-size: clamp(42px, 5vw, 68px); line-height: 1.02; letter-spacing: -.052em; }
.section-heading p, .server-copy > p, .privacy-copy > p, .faq-layout > div > p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.centered-heading p { max-width: 650px; margin: 20px auto 0; }
.kicker { color: var(--blue); font-size: 11px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }

.workflow-section { padding-top: 130px; background: var(--white); border-top: 1px solid rgba(23,25,29,.06); border-bottom: 1px solid rgba(23,25,29,.06); }
.workflow-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.workflow-card { min-height: 470px; position: relative; overflow: hidden; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.workflow-card h3 { margin: 52px 0 9px; font-size: 25px; letter-spacing: -.025em; }.workflow-card p { margin: 0; color: var(--muted); font-size: 15px; }
.step-number { position: absolute; top: 24px; right: 25px; color: var(--blue); font-size: 12px; font-weight: 850; letter-spacing: .1em; }
.mini-capture, .mini-editor, .mini-share { position: absolute; left: 25px; right: 25px; bottom: 26px; height: 190px; border-radius: 16px; }
.mini-capture { overflow: hidden; background: #d9dedb; border: 8px solid #202b28; }
.mini-screen { position: absolute; inset: 17px; padding: 14px; background: #fff; }.mini-screen i { display: block; height: 9px; margin-bottom: 11px; border-radius: 5px; background: #d9dfdc; }.mini-screen i:nth-child(2) { width: 70%; }.mini-screen i:nth-child(3) { width: 84%; height: 70px; }
.mini-selection { position: absolute; inset: 34px 45px 28px 60px; border: 2px solid var(--mint); box-shadow: 0 0 0 999px rgba(10,18,16,.45); }.mini-selection span { position: absolute; top: 5px; left: 5px; padding: 2px 5px; color: #073429; background: var(--mint); font-size: 7px; font-weight: 800; }
.mini-cursor { position: absolute; right: 35px; bottom: 27px; width: 0; height: 0; border-top: 18px solid #fff; border-right: 9px solid transparent; filter: drop-shadow(1px 1px #000); transform: rotate(-22deg); }
.mini-editor { overflow: hidden; background: #e9d98f; border: 1px solid #cfc5a3; }
.mini-editor::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg,rgba(255,255,255,.45),transparent 55%), repeating-linear-gradient(0deg,transparent 0 27px,rgba(46,40,25,.08) 28px); }
.mini-comment { position: absolute; z-index: 2; top: 24px; left: 22px; padding: 8px 10px; border-radius: 5px; color: white; background: var(--coral); font-size: 9px; font-weight: 750; transform: rotate(-2deg); }
.drawn-arrow { position: absolute; z-index: 2; width: 86px; height: 3px; top: 83px; left: 110px; background: var(--coral); transform: rotate(25deg); }.drawn-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--coral); }
.mini-cta { position: absolute; z-index: 1; right: 38px; bottom: 51px; padding: 9px 14px; border-radius: 6px; color: #fff; background: var(--blue); font-size: 9px; font-weight: 800; }
.mini-tools { position: absolute; z-index: 3; left: 50%; bottom: 9px; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: 7px; background: #14211e; }.mini-tools span { width: 24px; height: 24px; display: grid; place-items: center; color: #c3ceca; font-size: 10px; }.mini-tools span:first-child { color: #09271e; border-radius: 4px; background: var(--mint); }
.mini-share { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: 22px; background: #111e1a; }
.share-progress { height: 5px; overflow: hidden; border-radius: 4px; background: #31413c; }.share-progress span { display: block; width: 100%; height: 100%; background: var(--mint); }
.share-url { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: #dde7e3; background: rgba(255,255,255,.04); font-size: 9px; }.share-url strong { color: var(--mint); }
.share-confirm { color: var(--mint); font-size: 10px; font-weight: 750; }

.product-section { background: var(--paper); }
.editor-showcase { display: grid; grid-template-columns: .68fr 1.32fr; gap: 60px; align-items: center; }
.feature-index, .capability-tag { color: var(--blue); font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.editor-copy h3 { margin: 15px 0; font-size: 36px; line-height: 1.1; letter-spacing: -.04em; }.editor-copy > p { color: var(--muted); font-size: 17px; }
.feature-list { display: grid; gap: 13px; margin: 30px 0 0; padding: 0; list-style: none; }.feature-list li { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 650; }.feature-list li span { min-width: 34px; height: 30px; display: grid; place-items: center; padding-inline: 5px; border: 1px solid var(--line); border-radius: 8px; color: var(--blue); background: var(--white); font-size: 11px; font-weight: 850; }
.editor-window { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 19px; background: #07100c; box-shadow: var(--shadow); transform: rotate(.7deg); }
.app-titlebar { height: 43px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.08); color: #9aaca5; background: #101c18; font-size: 9px; }.app-titlebar .traffic { justify-self: start; }.app-titlebar > span:nth-child(2) { justify-self: center; }.editor-dimension { justify-self: end; color: var(--mint); }
.editor-canvas { position: relative; aspect-ratio: 1.42; padding: 26px; background: radial-gradient(circle at 40% 0,rgba(32,201,151,.15),transparent 40%), #09130f; }
.sample-page { height: 100%; display: grid; grid-template-columns: 45% 1fr; gap: 26px; padding: 38px; border-radius: 7px; background: #fff9ed; }
.sample-nav { position: absolute; top: 40px; left: 60px; right: 60px; display: flex; align-items: center; gap: 15px; }.sample-nav .sample-brand { width: 45px; height: 8px; margin-right: auto; border-radius: 5px; background: #27322f; }.sample-nav i { width: 27px; height: 5px; border-radius: 5px; background: #b8b8ad; }
.sample-copy { align-self: center; padding-top: 28px; }.sample-copy > span { display: block; width: 90%; height: 10px; margin-bottom: 10px; border-radius: 5px; background: #bfc2b8; }.sample-copy > span:first-child { width: 76%; height: 24px; background: #39433f; }.sample-copy > span:nth-child(3) { width: 68%; }.sample-copy b { display: inline-block; margin-top: 14px; padding: 10px 14px; border-radius: 7px; color: white; background: var(--blue); font-size: 9px; }
.sample-art { align-self: center; height: 63%; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 16px; border-radius: 12px; background: #d8e2de; }.sample-art i { border-radius: 7px; background: #a8b8b1; }.sample-art i:first-child { grid-row: span 2; background: var(--mint); }
.annotation { position: absolute; z-index: 3; padding: 8px 11px; border-radius: 5px; color: #fff; background: var(--coral); font-size: 8px; font-weight: 800; box-shadow: 0 5px 13px rgba(66,24,17,.22); }.annotation-one { left: 14%; top: 30%; transform: rotate(-2deg); }.annotation-two { right: 12%; bottom: 28%; background: var(--blue); transform: rotate(1deg); }
.annotation-arrow { position: absolute; z-index: 2; height: 3px; background: var(--coral); }.annotation-arrow::after { content: ""; position: absolute; right: -8px; top: -5px; border: 6px solid transparent; border-left-color: inherit; }.arrow-one { left: 32%; top: 41%; width: 72px; transform: rotate(29deg); }.arrow-two { right: 25%; bottom: 34%; width: 48px; background: var(--blue); transform: rotate(-24deg); }
.blur-block { position: absolute; z-index: 2; right: 10%; bottom: 20%; width: 29%; height: 33px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: rgba(223,219,205,.9); }.blur-block::after { content: ""; position: absolute; inset: -7px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: repeating-linear-gradient(90deg,rgba(50,50,50,.1) 0 3px,transparent 3px 7px); }.blur-block span { font-size: 8px; }
.full-toolbar { position: absolute; z-index: 5; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #14211e; box-shadow: 0 10px 25px rgba(0,0,0,.35); }.full-toolbar button { min-width: 25px; height: 25px; padding: 0 6px; border: 0; border-radius: 6px; color: #a9b9b3; background: transparent; font-size: 9px; }.full-toolbar button.active { color: #08251b; background: var(--mint); }.full-toolbar button.upload-tool { margin-left: 3px; color: #fff; background: var(--blue); }.full-toolbar i { width: 1px; height: 17px; background: rgba(255,255,255,.13); }.color-swatch { width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; }.color-swatch.red { background: var(--coral); }.color-swatch.yellow { background: var(--yellow); }.color-swatch.green { background: var(--mint); }

.server-section { position: relative; overflow: hidden; background: var(--paper-deep); }
.server-section::after { content: ""; position: absolute; width: 420px; height: 420px; right: -170px; top: -120px; border: 80px solid rgba(36,87,255,.08); border-radius: 50%; }
.server-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1.18fr .82fr; gap: 78px; align-items: center; }
.settings-window { overflow: hidden; border-radius: 19px; background: #07100c; box-shadow: var(--shadow); transform: rotate(-1deg); }
.light-titlebar { background: #0d1915; }.settings-body { min-height: 470px; display: grid; grid-template-columns: 30% 1fr; color: #eef4f1; }
.settings-sidebar { padding: 24px 14px; display: flex; flex-direction: column; gap: 5px; border-right: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }.settings-brand { display: flex; align-items: center; gap: 9px; margin: 0 8px 22px; }.settings-brand img { width: 30px; height: 30px; border-radius: 8px; }.settings-brand strong { font-size: 14px; }.settings-sidebar > span { padding: 9px 10px; border-radius: 8px; color: #82968e; font-size: 10px; font-weight: 650; }.settings-sidebar > span.active { color: var(--mint); background: rgba(32,201,151,.13); border: 1px solid rgba(32,201,151,.22); }
.settings-content { padding: 34px 30px 24px; }.settings-kicker { color: var(--mint); font-size: 8px; font-weight: 850; letter-spacing: .15em; }.settings-content h3 { margin: 6px 0 2px; font-size: 21px; }.settings-content > p { margin: 0 0 22px; color: #839890; font-size: 10px; }
.settings-form { display: grid; gap: 11px; }.settings-form label { display: grid; grid-template-columns: 30% 1fr; align-items: center; color: #899c95; font-size: 9px; }.settings-form label > span { min-width: 0; overflow: hidden; padding: 9px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: #e5eeeb; background: rgba(255,255,255,.045); white-space: nowrap; text-overflow: ellipsis; }.two-fields { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; }.two-fields label { grid-template-columns: 40% 1fr; }
.settings-footer { margin-top: 22px; padding-top: 17px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.07); }.test-ok { color: var(--mint); font-size: 9px; }.settings-footer button { padding: 8px 18px; border: 0; border-radius: 8px; color: #06271d; background: var(--mint); font-size: 9px; font-weight: 850; }
.server-copy h2 { margin-bottom: 23px; }.server-copy > p { font-size: 17px; }.protocols { display: flex; gap: 8px; margin: 27px 0; }.protocols span { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--blue); background: rgba(255,254,250,.5); font-size: 11px; font-weight: 850; }
.server-facts { display: grid; gap: 16px; }.server-facts > div { display: grid; grid-template-columns: 120px 1fr; padding-top: 15px; border-top: 1px solid var(--line); }.server-facts strong { font-size: 13px; }.server-facts small { color: var(--muted); font-size: 12px; }.server-copy .fine-print { margin-top: 22px; font-size: 10px; }

.more-section { background: var(--white); }
.capability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.capability-card { position: relative; min-height: 480px; overflow: hidden; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }.capability-copy { max-width: 410px; position: relative; z-index: 2; }.capability-copy h3 { margin: 10px 0 8px; font-size: 28px; line-height: 1.1; letter-spacing: -.035em; }.capability-copy p { margin: 0; color: var(--muted); font-size: 14px; }
.long-shot { position: absolute; width: 205px; height: 330px; right: 48px; bottom: -118px; padding: 27px 19px; border: 8px solid #1b2824; border-radius: 15px; background: #fff; box-shadow: 0 22px 42px rgba(24,32,29,.18); transform: rotate(5deg); }.long-shot span { display: block; width: 56%; height: 10px; margin-bottom: 20px; border-radius: 5px; background: #293530; }.long-shot i { display: block; height: 48px; margin-bottom: 10px; border-radius: 6px; background: #e7ebe8; }.long-shot i:nth-of-type(2) { height: 66px; background: #d7e9e3; }.long-shot b { position: absolute; left: -31px; top: 100px; width: 49px; height: 49px; display: grid; place-items: center; border-radius: 50%; color: #072a20; background: var(--mint); font-size: 22px; }
.ocr-card { background: #f0e7c9; }.ocr-demo { position: absolute; left: 34px; right: 34px; bottom: 35px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }.ocr-source, .ocr-result { min-height: 155px; display: flex; flex-direction: column; justify-content: center; padding: 20px; border-radius: 13px; background: #fff; box-shadow: 0 12px 26px rgba(70,57,27,.12); }.ocr-source span { font-size: 9px; color: #79807d; }.ocr-source span:nth-child(2) { margin-top: 7px; color: #1e2925; font-size: 13px; font-weight: 750; }.ocr-source i { width: 92%; height: 35px; margin-top: 16px; border-radius: 6px; background: #e4e8e5; }.ocr-arrow { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 800; }.ocr-result { background: #12211d; }.ocr-result small { color: var(--mint); font-size: 7px; letter-spacing: .1em; }.ocr-result strong { margin: 9px 0 15px; color: #fff; font-size: 11px; }.ocr-result span { color: var(--mint); font-size: 9px; }
.recording-card { color: #fff; background: var(--dark); }.recording-card .capability-tag { color: var(--mint); }.recording-card .capability-copy p { color: #9eb0aa; }.recording-demo { position: absolute; left: 34px; right: 34px; bottom: 34px; height: 208px; }.recording-frame { height: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: linear-gradient(130deg,#22413a,#172621); }.recording-frame::before { content: ""; position: absolute; width: 180px; height: 90px; left: 40px; top: 50px; border-radius: 10px; background: #315b51; box-shadow: 85px 54px 0 #203c35; }.recording-toggle { position: absolute; left: 83px; top: 78px; width: 69px; height: 31px; padding: 4px; border-radius: 999px; background: var(--mint); }.recording-toggle i { display: block; width: 23px; height: 23px; margin-left: auto; border-radius: 50%; background: white; }.recording-cursor { position: absolute; z-index: 2; left: 63%; top: 49%; width: 0; height: 0; border-top: 24px solid #fff; border-right: 12px solid transparent; filter: drop-shadow(1px 2px 1px #000); transform: rotate(-25deg); }.recording-badge { position: absolute; top: 12px; left: 12px; padding: 6px 10px; border-radius: 7px; background: rgba(9,15,13,.82); font-size: 9px; }.recording-badge i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--coral); animation: record-pulse 1.4s infinite; }.format-pill { position: relative; float: right; margin: -33px 11px 0 0; padding: 5px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; color: #b8c6c1; background: rgba(9,15,13,.72); font-size: 8px; font-weight: 750; }.format-pill + .format-pill { margin-right: 47px; }
.history-card { background: #e6edf8; }.history-demo { position: absolute; left: 34px; right: 34px; bottom: 34px; display: grid; overflow: hidden; border: 1px solid #d0d8e2; border-radius: 13px; background: #fff; box-shadow: 0 14px 30px rgba(45,60,82,.12); }.history-demo div { display: grid; grid-template-columns: 1.2fr .8fr .65fr; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid #e6e9ed; font-size: 9px; }.history-demo div:last-child { border: 0; }.history-demo span { color: #7d8388; }.history-demo strong { font-size: 9px; }.history-demo i { justify-self: end; padding: 4px 7px; border-radius: 999px; font-style: normal; font-weight: 750; }.history-demo .success { color: #0b7e5c; background: #def6ed; }.history-demo .retry { color: #bd442e; background: #ffebe6; }

.privacy-section { color: var(--dark-text); background: var(--dark); }
.privacy-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }.privacy-copy h2 { max-width: 600px; margin-bottom: 24px; }.privacy-copy > p { max-width: 560px; color: #9badA7; }.kicker-light { color: var(--mint); }.text-link { display: inline-flex; gap: 8px; margin-top: 30px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 13px; font-weight: 750; }.text-link span { color: var(--mint); }
.privacy-stack { border-top: 1px solid rgba(255,255,255,.14); }.privacy-row { display: flex; justify-content: space-between; gap: 20px; padding: 23px 0; border-bottom: 1px solid rgba(255,255,255,.14); }.privacy-row span { color: #9baca6; font-size: 14px; }.privacy-row strong { color: var(--mint); font-size: 14px; }

.download-section { background: var(--paper); }.edition-grid { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.edition-card { position: relative; padding: 35px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }.edition-top { display: flex; align-items: center; gap: 15px; }.edition-icon { width: 51px; height: 51px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); font-size: 25px; }.direct-icon { color: #06281e; background: var(--mint); border-color: var(--mint); }.edition-top small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; }.edition-top h3 { margin: 1px 0 0; font-size: 22px; }.edition-card > p { min-height: 72px; color: var(--muted); font-size: 14px; }.edition-card ul { min-height: 176px; display: grid; gap: 12px; margin: 24px 0 30px; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; }.edition-card li { position: relative; padding-left: 23px; font-size: 13px; }.edition-card li::before { content: "✓"; position: absolute; left: 0; color: var(--mint-dark); font-weight: 900; }.full-button { width: 100%; }.featured-edition { border-color: var(--blue); box-shadow: 0 22px 54px rgba(36,87,255,.1); }.recommended { position: absolute; top: -12px; right: 25px; padding: 6px 10px; border-radius: 999px; color: #fff; background: var(--blue); font-size: 8px; font-weight: 850; letter-spacing: .1em; }

.faq-section { padding-top: 40px; }.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 100px; }.faq-layout h2 { font-size: 48px; }.faq-layout > div > p { margin-top: 18px; font-size: 15px; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 0; cursor: pointer; list-style: none; font-weight: 700; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--blue); font-size: 23px; font-weight: 400; transition: transform .2s; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { max-width: 660px; margin: -5px 40px 24px 0; color: var(--muted); font-size: 14px; }

.final-cta { padding-block: 35px 110px; }.final-cta-inner { position: relative; overflow: hidden; min-height: 310px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 54px; border-radius: 29px; color: #fff; background: var(--blue); box-shadow: 0 30px 70px rgba(36,87,255,.21); }.final-cta-inner::before { content: ""; position: absolute; width: 280px; height: 280px; right: 11%; top: -140px; border: 55px solid rgba(255,255,255,.12); border-radius: 50%; }.final-cta img { position: relative; width: 94px; height: 94px; border-radius: 24px; box-shadow: 0 20px 34px rgba(11,31,97,.3); transform: rotate(-6deg); }.final-cta-inner > div { position: relative; }.final-cta-inner > div > span { font-size: 9px; font-weight: 850; letter-spacing: .16em; opacity: .75; }.final-cta h2 { margin-top: 8px; font-size: clamp(40px,4vw,58px); }.final-cta .button { position: relative; white-space: nowrap; }

.footer { color: #dbe5e1; background: #0d1714; }.footer-main { min-height: 185px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 40px; }.footer .brand { color: #fff; }.footer-main p { color: #7f948c; font-size: 13px; }.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 28px; }.footer-links a { color: #a7b7b1; font-size: 12px; }.footer-links a:hover { color: var(--mint); }.footer-bottom { min-height: 61px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.1); color: #6f837c; font-size: 10px; }.footer-bottom a { color: #9eb0a9; }

/* Document pages */
body > header:not(.site-header) { border-bottom: 1px solid var(--line); background: rgba(244,241,233,.9); }
body > header:not(.site-header) .nav { width: min(var(--maxw), calc(100% - 48px)); margin-inline: auto; }
.doc { max-width: 820px; padding-block: 72px 100px; }.doc h1 { margin: 0 0 7px; font-size: clamp(42px,6vw,68px); line-height: 1; letter-spacing: -.055em; }.doc .updated { margin-bottom: 40px; color: var(--muted); }.doc h2 { margin: 40px 0 12px; font-size: 24px; letter-spacing: -.025em; }.doc p, .doc li { color: var(--ink-soft); font-size: 15px; }.doc li { margin-bottom: 9px; }.doc a { color: var(--blue); }.doc .callout { margin: 28px 0; padding: 22px 24px; border: 1px solid rgba(36,87,255,.2); border-left: 4px solid var(--blue); border-radius: 14px; background: rgba(255,254,250,.65); }.doc .callout p { margin: 0; }
.footer > .wrap:not(.footer-main):not(.footer-bottom) { min-height: 110px; display: flex; align-items: center; justify-content: space-between; color: #83958e; font-size: 12px; }.footer .flinks { display: flex; gap: 20px; }.footer .flinks a:hover { color: var(--mint); }

@keyframes product-enter { from { opacity: 0; transform: translateY(25px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes record-pulse { 50% { opacity: .35; } }

@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; padding-top: 72px; gap: 70px; }
  .hero-copy { max-width: 820px; text-align: center; margin-inline: auto; }
  .hero h1, .hero-lead { margin-inline: auto; }.hero-actions, .compatibility { justify-content: center; }.hero-product { max-width: 780px; width: 88%; margin-inline: auto; }
  .editor-showcase { grid-template-columns: 1fr; }.editor-copy { max-width: 660px; }.editor-window { max-width: 850px; width: 100%; margin-inline: auto; }
  .server-layout { grid-template-columns: 1fr; }.settings-window { max-width: 770px; }.server-copy { max-width: 690px; }
  .final-cta-inner { grid-template-columns: auto 1fr; }.final-cta .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .section { padding-block: 88px; }
  .split-heading, .privacy-layout, .faq-layout { grid-template-columns: 1fr; gap: 28px; }.split-heading p { max-width: 650px; }
  .workflow-grid { grid-template-columns: 1fr; }.workflow-card { min-height: 390px; }.mini-capture, .mini-editor, .mini-share { max-width: 470px; }
  .capability-grid { grid-template-columns: 1fr; }.capability-card { min-height: 450px; }
  .proof-strip { grid-template-columns: 1fr; }.proof-strip > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .edition-grid { grid-template-columns: 1fr; max-width: 560px; }.edition-card > p, .edition-card ul { min-height: 0; }
  .privacy-layout { gap: 55px; }
  .footer-main { grid-template-columns: 1fr 1fr; padding-block: 45px; }.footer-main p { display: none; }
}

@media (max-width: 600px) {
  .wrap { width: min(100% - 30px, var(--maxw)); }
  .nav { min-height: 64px; }.brand { font-size: 17px; }.brand img { width: 32px; height: 32px; }.nav-cta { padding: 9px 12px; font-size: 12px; }
  .hero { min-height: auto; padding-block: 58px 75px; gap: 62px; }.hero h1 { font-size: clamp(46px,15vw,66px); }.marked { white-space: normal; }.hero-lead { font-size: 16px; }.hero-actions { flex-direction: column; }.hero-actions .button { width: 100%; }.compatibility { gap: 8px 14px; }
  .hero-product { width: 100%; }.desktop-scene { aspect-ratio: .94; border-radius: 18px; }.browser-shell { inset: 37px 14px 18px; }.selection-box { left: 13%; right: 6%; top: 29%; bottom: 25%; }.floating-shortcut { top: -29px; left: -3px; }.floating-shortcut small { display: none; }.upload-toast { right: -2px; bottom: -25px; }.bug-note { right: 5%; }.editor-toolbar { transform: translateX(-50%) scale(.82); }
  .proof-strip { margin-bottom: 0; }.proof-strip > div { padding: 20px; }
  .section-heading h2, .server-copy h2, .privacy-copy h2, .faq-layout h2 { font-size: 42px; }.section-heading { margin-bottom: 40px; }.section-heading p, .server-copy > p, .privacy-copy > p { font-size: 16px; }
  .workflow-card { min-height: 405px; padding: 24px; }.workflow-card h3 { margin-top: 48px; }.mini-capture, .mini-editor, .mini-share { left: 20px; right: 20px; bottom: 20px; height: 175px; }
  .editor-copy h3 { font-size: 32px; }.editor-window { transform: none; }.app-titlebar { grid-template-columns: 1fr 1fr; }.app-titlebar > span:nth-child(2) { justify-self: end; }.editor-dimension { display: none; }.editor-canvas { aspect-ratio: .88; padding: 15px; }.sample-page { grid-template-columns: 1fr; padding: 45px 22px 22px; }.sample-art { display: none; }.sample-nav { left: 34px; right: 34px; }.annotation-one { left: 8%; top: 33%; }.annotation-two { right: 7%; bottom: 28%; }.blur-block { width: 55%; right: 7%; }.full-toolbar { max-width: calc(100% - 20px); overflow: hidden; transform: translateX(-50%) scale(.78); transform-origin: bottom center; }
  .settings-window { transform: none; }.settings-body { min-height: 430px; grid-template-columns: 1fr; }.settings-sidebar { display: none; }.settings-content { padding: 28px 20px 20px; }.settings-form label { grid-template-columns: 28% 1fr; }.two-fields { grid-template-columns: 1fr; }.server-facts > div { grid-template-columns: 105px 1fr; }
  .capability-card { min-height: 440px; padding: 25px; }.long-shot { right: 33px; }.ocr-demo { left: 20px; right: 20px; grid-template-columns: 1fr; }.ocr-source { display: none; }.ocr-arrow { position: absolute; z-index: 2; top: -14px; left: 50%; transform: translateX(-50%) rotate(90deg); }.recording-demo, .history-demo { left: 20px; right: 20px; }
  .privacy-row { flex-direction: column; gap: 5px; }.privacy-row strong { font-size: 15px; }
  .edition-card { padding: 28px 22px; }
  .final-cta { padding-bottom: 70px; }.final-cta-inner { min-height: 420px; grid-template-columns: 1fr; padding: 34px 25px; text-align: center; }.final-cta img { margin-inline: auto; }.final-cta .button { grid-column: auto; justify-self: stretch; }.final-cta h2 { font-size: 40px; }
  .footer-main { grid-template-columns: 1fr; }.footer-links { justify-self: start; }.footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 20px; }
  body > header:not(.site-header) .nav-links { display: flex; gap: 13px; }.doc { padding-block: 50px 75px; }.footer > .wrap:not(.footer-main):not(.footer-bottom) { padding-block: 28px; align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}