/*
  The firm's website: the home page (index.html), the coming-soon page (coming-soon.html) and the page for an address
  that isn't one (404.html), from the owner's design (Deepfile.html and its coming-soon page). The server sends every
  page with a strict policy (server/static.ts, SITE_CSP): no inline styles or scripts, nothing from other sites. So
  every style the design had inline is a class here, with the design's exact values: one class for each distinct
  style, the main parts named after what they are (the header and its nav, the hero, each section by its id: flow,
  why, who, tools, faq, journal, demo; the footer), the rest after their section and tag. The fonts are the site's
  own files (assets/fonts, with their licences), not Google's.
  The pictures carry their size in the page (nothing jumps while they arrive); a picture the design sizes by its width
  and an aspect ratio has height: auto added, so that size doesn't change it.
  The design's own base rules are inside :where(), which gives them no weight: a class always wins over them, as the
  inline style it came from did (a link with its own colour keeps it on hover, as in the design).
  Where the pages differ from the design (the scroll offset under the header, the reading bar, the cards between 761
  and 1240 px wide, the header and one row of the tools under 375 px, the journal pictures' place in the page), a
  comment beside the rule says how and why.
*/

/* ---------- Fonts: IBM Plex Sans and Mono, and Newsreader (one variable file: every weight, sized to the text) ---------- */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/newsreader-latin-opsz-normal.woff2") format("woff2"); }

/* ---------- Base rules (the design's <style> block, as it was) ---------- */

:where(body) { margin: 0; background: #0e0e10; }
:where(.home a) { color: #111113; text-decoration: none; }
:where(.home a:hover) { color: #0E7490; }
:where(.soon a) { color: #bdbdc4; text-decoration: none; }
:where(.soon a:hover) { color: #f2f2f3; }
:where(h1, h2, h3) { font-family: 'Newsreader', Georgia, serif; font-optical-sizing: auto; }
:where(summary) { cursor: pointer; list-style: none; }
:where(summary)::-webkit-details-marker { display: none; }
details[open] .df-plus { transform: rotate(45deg); }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
/* The design's [id] { scroll-margin-top: 64px } as the page's own scroll padding: an anchor still lands 64 px down,
   below the sticky header, and so does whatever the keyboard's focus scrolls to (Shift+Tab going back up the page),
   which the header would otherwise cover. */
html { scroll-padding-top: 64px; }
.df-tab { background: transparent; color: #bdbdc4; border: 0; border-radius: 999px; padding: 10px 20px; font: inherit; font-size: 14px; font-weight: 500; min-height: 44px; cursor: pointer; transition: background .2s, color .2s; }
.df-tab:hover { color: #f2f2f3; }
.df-tab[aria-pressed="true"] { background: #f2f2f3; color: #0b0b0d; font-weight: 600; }

/* The design's animations: the ink behind the hero, the floating cards, the files flowing in, the voice note, the
   reading bar, the coming-soon page's stack of files and its light. All of them stop for someone who asked for less
   motion (the rule after them). Like the rest of the site's motion they move only transforms and opacity: the
   reading bar, which the design grew by its width (the layout redone on every frame), grows by scaling from its left
   end, from and to the same lengths, and rests at the design's 60 %. */
@keyframes df-ink-a { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(90px,50px) scale(1.18); } 100% { transform: translate(-30px,110px) scale(.94); } }
@keyframes df-ink-b { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-110px,60px) scale(1.1); } 100% { transform: translate(40px,-40px) scale(1.2); } }
@keyframes df-ink-c { 0% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(60px,-70px) scale(.9); } 100% { transform: translate(-80px,30px) scale(1.12); } }
@keyframes df-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes df-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes df-spin { to { transform: rotate(360deg); } }
@keyframes df-ping { 0% { transform: scale(.86); opacity: .75; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes df-appear { 0% { opacity: 0; transform: translateY(10px); } 12% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes df-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes df-progress { 0% { transform: scaleX(0.18); } 60% { transform: scaleX(0.86); } 100% { transform: scaleX(0.18); } }
@keyframes cs-spin3d { from { transform: rotateX(60deg) rotateZ(0deg); } to { transform: rotateX(60deg) rotateZ(360deg); } }
@keyframes cs-scan { 0%, 100% { transform: translateZ(0px); opacity: .25; } 50% { transform: translateZ(150px); opacity: 1; } }
@keyframes cs-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } html { scroll-behavior: auto; } }
@media (max-width: 760px) { .df-float { display: none !important; } }

/* ---------- The home page (index.html): the page ---------- */

.page { font-family: 'IBM Plex Sans', system-ui, sans-serif; background: #0e0e10; color: #111113; font-size: 16px; line-height: 1.6; min-height: 100vh; overflow-x: clip; }
.page-light { background: #ffffff; }

/* ---------- The header and its nav (sticky) ---------- */

.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.74); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(17,17,19,0.07); }
.header-bar { max-width: 1200px; margin: 0 auto; min-height: 60px; padding: 0 24px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: #111113; }
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav-signin { color: #4a4a51; font-size: 14px; padding: 12px 14px; }
.nav-demo { display: inline-flex; align-items: center; background: #111111; color: #ffffff; font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: 999px; }

/* ---------- The hero (#top): the ink, the words, the app with its floating cards ---------- */

.hero { position: relative; overflow: hidden; background: #ffffff; }
.hero-ink { position: absolute; inset: 0; pointer-events: none; }
.hero-ink-1 { position: absolute; width: 720px; height: 720px; left: -180px; top: -260px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(94,196,212,0.55), rgba(94,196,212,0) 62%); filter: blur(30px); animation: df-ink-a 22s ease-in-out infinite alternate; }
.hero-ink-2 { position: absolute; width: 640px; height: 640px; right: -160px; top: -120px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(14,116,144,0.36), rgba(14,116,144,0) 64%); filter: blur(30px); animation: df-ink-b 26s ease-in-out infinite alternate; }
.hero-ink-3 { position: absolute; width: 620px; height: 620px; left: 32%; top: 300px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(165,243,252,0.65), rgba(165,243,252,0) 60%); filter: blur(36px); animation: df-ink-c 30s ease-in-out infinite alternate; }
.hero-ink-4 { position: absolute; width: 540px; height: 540px; left: 6%; top: 620px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(22,78,99,0.22), rgba(22,78,99,0) 62%); filter: blur(40px); animation: df-ink-b 34s ease-in-out infinite alternate-reverse; }
.hero-ink-5 { position: absolute; width: 560px; height: 560px; right: 2%; top: 700px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(94,196,212,0.4), rgba(94,196,212,0) 62%); filter: blur(36px); animation: df-ink-a 28s ease-in-out infinite alternate-reverse; }
.hero-grain { position: absolute; inset: 0; opacity: 0.07; mix-blend-mode: multiply; }
.hero-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 84px 24px 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.72); border: 1px solid rgba(14,116,144,0.25); border-radius: 999px; padding: 6px 6px 6px 14px; font-size: 14px; color: #111113; }
.hero-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #0E7490; }
.hero-badge-cta { display: inline-flex; align-items: center; gap: 2px; background: #111111; color: #ffffff; border-radius: 999px; padding: 4px 8px 4px 12px; font-size: 12px; font-weight: 500; }
.hero-title { margin: 0; font-size: clamp(44px, 6.6vw, 100px); line-height: 0.98; font-weight: 500; letter-spacing: -0.03em; max-width: 1080px; }
.hero-title-accent { display: block; background: linear-gradient(90deg, #0B4F63 0%, #0E7490 50%, #0891B2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { margin: 0; max-width: 640px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: #4a4a51; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.hero-demo { display: inline-flex; align-items: center; background: #111111; color: #ffffff; padding: 14px 26px; border-radius: 999px; font-weight: 500; font-size: 16px; }
.hero-how { display: inline-flex; align-items: center; gap: 4px; color: #0E7490; padding: 14px 12px; font-weight: 500; font-size: 16px; }
.hero-stage { position: relative; width: 100%; max-width: 1120px; margin-top: 18px; padding-bottom: 88px; }
.hero-card-voice { position: absolute; z-index: 3; left: -52px; top: 92px; width: 252px; box-sizing: border-box; background: #ffffff; border: 1px solid rgba(17,17,19,0.08); border-radius: 16px; padding: 14px; text-align: left; box-shadow: 0 24px 48px -16px rgba(17,17,19,0.28); animation: df-float 7s ease-in-out infinite; }
.card-div-1 { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #6c6c74; }
.card-span-1 { display: flex; align-items: center; gap: 6px; }
.card-span-2 { display: flex; color: #0E7490; }
.card-span-3 { font-family: 'IBM Plex Mono', monospace; }
.card-div-2 { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.card-span-4 { flex: 0 0 32px; height: 32px; border-radius: 50%; background: #0E7490; color: #ffffff; display: flex; align-items: center; justify-content: center; }
.card-span-5 { flex-grow: 1; height: 28px; display: flex; align-items: center; gap: 3px; }
.card-span-6 { flex: 1 1 0; height: 10px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.1s infinite; }
.card-span-7 { flex: 1 1 0; height: 18px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.5s infinite; }
.card-span-8 { flex: 1 1 0; height: 26px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.9s infinite; }
.card-span-9 { flex: 1 1 0; height: 14px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.3s infinite; }
.card-span-10 { flex: 1 1 0; height: 22px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.7s infinite; }
.card-span-11 { flex: 1 1 0; height: 28px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.2s infinite; }
.card-span-12 { flex: 1 1 0; height: 12px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -1s infinite; }
.card-span-13 { flex: 1 1 0; height: 20px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.6s infinite; }
.card-span-14 { flex: 1 1 0; height: 26px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.4s infinite; }
.card-span-15 { flex: 1 1 0; height: 16px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.8s infinite; }
.card-span-16 { flex: 1 1 0; height: 24px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.15s infinite; }
.card-span-17 { flex: 1 1 0; height: 10px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.55s infinite; }
.card-span-18 { flex: 1 1 0; height: 18px; background: #0E7490; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.95s infinite; }
.card-span-19 { flex: 1 1 0; height: 26px; background: #a1a1aa; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.35s infinite; }
.card-span-20 { flex: 1 1 0; height: 14px; background: #a1a1aa; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.75s infinite; }
.card-span-21 { flex: 1 1 0; height: 20px; background: #a1a1aa; border-radius: 2px; animation: df-bar 1.2s ease-in-out -0.25s infinite; }
.card-span-22 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #4a4a51; }
.card-div-3 { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: #4a4a51; background: #f4f4f5; border-radius: 8px; padding: 8px 10px; }
.hero-card-notice { position: absolute; z-index: 3; right: -48px; top: 36px; width: 264px; box-sizing: border-box; background: #ffffff; border: 1px solid rgba(17,17,19,0.08); border-radius: 16px; padding: 14px 16px; text-align: left; box-shadow: 0 24px 48px -16px rgba(17,17,19,0.28); animation: df-float 8s ease-in-out -2s infinite; }
.card-div-4 { display: flex; align-items: center; gap: 10px; }
.card-span-23 { flex: 0 0 30px; height: 30px; border-radius: 50%; background: #E6F4F6; color: #0E7490; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.card-span-24 { display: flex; flex-direction: column; line-height: 1.3; }
.card-strong-1 { font-size: 13px; font-weight: 600; }
.card-span-25 { font-size: 12px; color: #6c6c74; }
.card-p-1 { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #4a4a51; }
.card-span-26 { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; font-weight: 500; color: #0E7490; background: #E6F4F6; border-radius: 999px; padding: 3px 10px; }
.hero-card-clause { position: absolute; z-index: 3; left: -40px; bottom: 150px; width: 272px; box-sizing: border-box; background: #ffffff; border: 1px solid rgba(17,17,19,0.08); border-radius: 16px; padding: 16px; text-align: left; box-shadow: 0 24px 48px -16px rgba(17,17,19,0.28); animation: df-float 9s ease-in-out -4s infinite; }
.card-div-5 { display: flex; justify-content: space-between; font-size: 12px; color: #6c6c74; }
.card-div-6 { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.card-span-27 { height: 5px; width: 92%; background: #e4e4e7; border-radius: 3px; }
.card-span-28 { height: 5px; width: 78%; background: #e4e4e7; border-radius: 3px; }
.card-span-29 { font-size: 12px; line-height: 1.45; color: #0b4f63; background: #E6F4F6; border-radius: 6px; padding: 6px 8px; }
.card-span-30 { height: 5px; width: 86%; background: #e4e4e7; border-radius: 3px; }
.hero-card-sealed { position: absolute; z-index: 3; right: -36px; bottom: 56px; width: 236px; box-sizing: border-box; background: #0e0e10; color: #f2f2f3; border-radius: 16px; padding: 14px 16px; text-align: left; box-shadow: 0 24px 48px -16px rgba(17,17,19,0.45); animation: df-float 7.5s ease-in-out -1s infinite; }
.card-div-7 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.card-span-31 { display: flex; color: #5EC4D4; }
.card-div-8 { margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #8d8d96; }
.card-div-9 { margin-top: 6px; font-size: 12px; color: #bdbdc4; }
/* The design's cards hang over the app's sides, and below 1240 px wide (where they show, from 761 px) they would
   hang past the window's edge and be cut off. There each moves in by what the window lacks, up to 36 px, keeping
   the distance from the edge it has at 1240 px (8 px for the voice note); from 1240 px up they are exactly as
   designed. 100cqw is the hero's width (the hero is the container), the window's without its scroll bar. */
.hero { container-type: inline-size; }
.hero-card-voice { left: calc(-52px + clamp(0px, 620px - 50cqw, 36px)); }
.hero-card-clause { left: calc(-40px + clamp(0px, 620px - 50cqw, 36px)); }
.hero-card-notice { right: calc(-48px + clamp(0px, 620px - 50cqw, 36px)); }
.hero-card-sealed { right: calc(-36px + clamp(0px, 620px - 50cqw, 36px)); }
.hero-app { position: relative; z-index: 2; background: #ffffff; border: 1px solid rgba(17,17,19,0.08); border-radius: 20px; overflow: hidden; text-align: left; box-shadow: 0 2px 4px rgba(17,17,19,0.04), 0 32px 64px -24px rgba(14,116,144,0.38), 0 64px 120px -32px rgba(17,17,19,0.32); }
.app-div-1 { height: 44px; background: #f7f7f8; border-bottom: 1px solid #ececef; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.app-span-1 { display: inline-flex; align-items: center; gap: 6px; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 8px; padding: 3px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #4a4a51; }
.app-div-2 { display: flex; flex-wrap: wrap; min-height: 480px; }
.app-div-3 { flex: 1 1 200px; background: #0e0e10; color: #8d8d96; padding: 18px 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.app-div-4 { display: flex; align-items: center; gap: 8px; color: #f2f2f3; font-weight: 600; padding: 2px 8px 16px; }
.app-div-5 { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: #1c1c20; color: #f2f2f3; }
.app-div-6 { display: flex; align-items: center; gap: 10px; padding: 8px; }
.app-div-7 { padding: 18px 8px 6px; font-size: 11.5px; color: #6c6c74; }
.app-div-8 { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: #f2f2f3; }
.app-span-2 { width: 6px; height: 6px; border-radius: 50%; background: #5EC4D4; }
.app-div-9 { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.app-span-3 { width: 6px; height: 6px; border-radius: 50%; background: #3a3a40; }
.app-div-10 { flex: 999 1 460px; min-width: 0; padding: 22px 24px 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.app-div-11 { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.app-strong-1 { font-size: 18px; font-weight: 600; }
.app-span-4 { font-size: 13px; color: #6c6c74; }
.app-span-5 { display: inline-flex; align-items: center; gap: 6px; background: #E6F4F6; color: #0E7490; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; }
.app-div-12 { display: flex; gap: 4px; background: #f4f4f5; border-radius: 10px; padding: 4px; align-self: start; font-size: 13px; flex-wrap: wrap; }
.app-span-6 { background: #ffffff; border-radius: 7px; padding: 5px 12px; font-weight: 600; box-shadow: 0 1px 2px rgba(17,17,19,0.08); }
.app-span-7 { padding: 5px 12px; color: #4a4a51; }
.app-div-13 { display: flex; flex-wrap: wrap; gap: 20px; align-items: start; }
.app-div-14 { flex: 3 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-div-15 { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }
.app-span-8 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #6c6c74; flex: 0 0 50px; }
.app-span-9 { flex: 0 0 28px; height: 28px; border-radius: 8px; background: #f4f4f5; color: #4a4a51; display: flex; align-items: center; justify-content: center; }
.app-span-10 { flex-grow: 1; min-width: 0; }
.app-span-11 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #0E7490; white-space: nowrap; }
.app-div-16 { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; background: #E6F4F6; font-weight: 600; }
.app-span-12 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #0b4f63; flex: 0 0 50px; font-weight: 500; }
.app-span-13 { flex: 0 0 28px; height: 28px; border-radius: 8px; background: #0E7490; color: #ffffff; display: flex; align-items: center; justify-content: center; }
.app-span-14 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #0E7490; white-space: nowrap; font-weight: 500; }
.app-div-17 { flex: 2 1 230px; min-width: 0; background: #f4f4f5; border-radius: 14px; padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.app-span-15 { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #4a4a51; }
.app-span-16 { background: #111113; color: #ffffff; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.app-span-17 { font-size: 15px; font-weight: 600; line-height: 1.4; }
.app-span-18 { display: flex; gap: 8px; align-items: center; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; }
.app-span-19 { display: inline-flex; align-self: start; align-items: center; gap: 4px; background: #111111; color: #ffffff; border-radius: 999px; padding: 6px 12px 6px 14px; font-size: 12.5px; font-weight: 500; }

/* ---------- How it works (#flow): files flowing in, one story out ---------- */

.flow { background: #0b0b0d; color: #f2f2f3; position: relative; overflow: hidden; }
.flow-inner { max-width: 1200px; margin: 0 auto; padding: 96px 24px 88px; box-sizing: border-box; display: flex; flex-direction: column; gap: 48px; }
.head-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.flow-title { margin: 0; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; font-weight: 500; letter-spacing: -0.025em; max-width: 900px; }
.flow-title-accent { color: #5EC4D4; }
.lead-dark { margin: 0; max-width: 580px; color: #bdbdc4; font-size: 18px; }
.flow-diagram { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; }
.flow-files { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 76%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 76%, transparent 100%); }
.flow-marquee-1 { display: flex; width: max-content; animation: df-marquee 26s linear infinite; }
.flow-chip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; margin-right: 12px; background: #16161a; border: 1px solid #2a2a30; border-radius: 999px; padding: 8px 14px; font-size: 13px; color: #d4d4d8; }
.flow-marquee-2 { display: flex; width: max-content; animation: df-marquee 34s linear -9s infinite; }
.flow-marquee-3 { display: flex; width: max-content; animation: df-marquee 30s linear -17s infinite; }
.flow-core { flex: 0 0 168px; height: 168px; position: relative; display: flex; align-items: center; justify-content: center; }
.flow-core-ping { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(94,196,212,0.6); animation: df-ping 2.6s ease-out infinite; }
.flow-core-ring { position: absolute; inset: 10px; border-radius: 50%; border: 1.5px dashed rgba(94,196,212,0.7); animation: df-spin 16s linear infinite; }
.flow-core-mark { width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #0E7490, #0b3b47 70%); border: 1px solid rgba(94,196,212,0.5); box-shadow: 0 0 60px rgba(94,196,212,0.45); display: flex; align-items: center; justify-content: center; }
.flow-events { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.flow-event-1 { display: flex; gap: 12px; align-items: center; background: #131315; border: 1px solid #26262a; border-radius: 12px; padding: 12px 14px; font-size: 14px; animation: df-appear 9s ease-in-out 0.4s infinite both; }
.flow-span-1 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #8d8d96; flex: 0 0 52px; }
.flow-span-2 { flex-grow: 1; min-width: 0; color: #e4e4e7; }
.flow-span-3 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #5EC4D4; white-space: nowrap; }
.flow-event-2 { display: flex; gap: 12px; align-items: center; background: #131315; border: 1px solid #26262a; border-radius: 12px; padding: 12px 14px; font-size: 14px; animation: df-appear 9s ease-in-out 1s infinite both; }
.flow-event-3 { display: flex; gap: 12px; align-items: center; background: rgba(14,116,144,0.18); border: 1px solid #0E7490; border-radius: 12px; padding: 12px 14px; font-size: 14px; animation: df-appear 9s ease-in-out 1.6s infinite both; }
.flow-span-4 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #5EC4D4; flex: 0 0 52px; }
.flow-span-5 { flex-grow: 1; min-width: 0; color: #ffffff; font-weight: 600; }
.flow-span-6 { background: #5EC4D4; color: #0b0b0d; border-radius: 4px; padding: 1px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.flow-event-4 { display: flex; gap: 12px; align-items: center; background: #131315; border: 1px solid #26262a; border-radius: 12px; padding: 12px 14px; font-size: 14px; animation: df-appear 9s ease-in-out 2.2s infinite both; }
.flow-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px; border-top: 1px solid #26262a; padding-top: 36px; }
.flow-step { display: flex; gap: 14px; align-items: start; }
.flow-step-icon { flex: 0 0 40px; height: 40px; border-radius: 12px; background: rgba(94,196,212,0.12); color: #5EC4D4; display: flex; align-items: center; justify-content: center; }
.flow-step-title { font-size: 17px; font-weight: 600; color: #f2f2f3; }
.flow-step-text { margin: 4px 0 0; color: #8d8d96; font-size: 15px; }

/* ---------- Why Deepfile (#why) ---------- */

.why { background: #f4f4f5; }
.why-inner { max-width: 1200px; margin: 0 auto; padding: 96px 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 44px; }
.why-title { margin: 0; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; font-weight: 500; letter-spacing: -0.025em; max-width: 900px; }
.why-title-muted { color: #6c6c74; }
.why-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.why-card-brief { flex: 1.6 1 520px; min-width: 0; background: #0e0e10; color: #f2f2f3; border-radius: 28px; padding: 36px; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; min-height: 340px; position: relative; overflow: hidden; }
.why-card-ink { position: absolute; width: 440px; height: 440px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(14,116,144,0.6), rgba(14,116,144,0) 65%); filter: blur(24px); animation: df-ink-a 24s ease-in-out infinite alternate; }
.why-div-1 { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 470px; }
.why-h3-1 { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 500; }
.why-p-1 { margin: 0; color: #bdbdc4; }
.why-div-2 { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.why-div-3 { display: flex; align-items: center; gap: 12px; background: #16161a; border: 1px solid #2a2a30; border-radius: 16px; padding: 14px 16px; }
.why-span-1 { flex-grow: 1; min-width: 0; color: #6c6c74; font-size: 15px; text-decoration: line-through; text-decoration-color: #5EC4D4; text-decoration-thickness: 2px; }
.why-span-2 { flex: 0 0 34px; height: 34px; border-radius: 50%; background: #26262a; color: #6c6c74; display: flex; align-items: center; justify-content: center; }
.why-div-4 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(14,116,144,0.16); border: 1.5px dashed rgba(94,196,212,0.6); border-radius: 16px; padding: 14px 16px; }
.why-span-3 { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.why-span-4 { font-size: 13px; color: #bdbdc4; }
.why-span-5 { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: #5EC4D4; color: #0b0b0d; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.why-card-pages { flex: 1 1 340px; min-width: 0; background: #ffffff; border-radius: 28px; padding: 36px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; min-height: 340px; }
.why-h3-2 { margin: 0; font-size: 30px; line-height: 1.12; font-weight: 500; }
.why-p-2 { margin: 0; color: #4a4a51; }
.why-div-5 { margin-top: auto; padding-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.why-div-6 { aspect-ratio: 1 / 1; border-radius: 16px; background: #f4f4f5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #0E7490; }
.why-span-6 { font-size: 11.5px; color: #4a4a51; }
.why-card { flex: 1 1 320px; min-width: 0; background: #ffffff; border-radius: 28px; padding: 36px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; min-height: 340px; }
.why-div-7 { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.why-div-8 { background: #f4f4f5; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.why-span-7 { font-size: 14px; font-weight: 600; }
.why-span-8 { display: inline-flex; align-self: start; align-items: center; gap: 6px; background: #ffffff; border: 1px solid #d0d0d5; border-radius: 999px; padding: 4px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #0E7490; }
.why-div-9 { background: #ffffff; border: 1px solid #e4e4e7; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.why-span-9 { height: 5px; width: 90%; background: #e4e4e7; border-radius: 3px; }
.why-span-10 { font-size: 12px; line-height: 1.45; background: #E6F4F6; color: #0b4f63; border-radius: 4px; padding: 4px 6px; }
.why-span-11 { height: 5px; width: 74%; background: #e4e4e7; border-radius: 3px; }
.why-div-10 { margin-top: auto; padding-top: 14px; }
.why-div-11 { border-left: 2px solid #e4e4e7; margin-left: 6px; padding-left: 18px; display: flex; flex-direction: column; }
.why-div-12 { position: relative; padding: 7px 0; font-size: 14px; display: flex; gap: 10px; }
.why-span-12 { position: absolute; left: -25px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: #ffffff; border: 2px solid #a1a1aa; }
.why-span-13 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #6c6c74; flex: 0 0 50px; padding-top: 1px; }
.why-div-13 { position: relative; padding: 7px 0; font-size: 13px; display: flex; gap: 10px; color: #0E7490; }
.why-span-14 { position: absolute; left: -25px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #E6F4F6; border: 2px dashed #0E7490; }
.why-span-15 { flex: 0 0 50px; }
.why-div-14 { position: relative; padding: 7px 0; font-size: 14px; display: flex; gap: 10px; font-weight: 600; }
.why-span-16 { position: absolute; left: -25px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: #111113; border: 2px solid #111113; }
.why-span-17 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #111113; flex: 0 0 50px; padding-top: 1px; font-weight: 500; }
.why-card-private { flex: 1 1 320px; min-width: 0; background: #0E7490; color: #ffffff; border-radius: 28px; padding: 36px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; min-height: 340px; }
.why-p-3 { margin: 0; color: #e0f4f7; }
.why-div-15 { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.why-span-18 { display: flex; justify-content: space-between; gap: 8px; }
.why-span-19 { height: 1px; background: rgba(255,255,255,0.2); }

/* ---------- Who it is for (#who) ---------- */

.who { background: #ffffff; }
.who-inner { max-width: 1200px; margin: 0 auto; padding: 96px 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 40px; }
.who-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.who-title { margin: 0; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; font-weight: 500; letter-spacing: -0.025em; max-width: 760px; }
.who-lead { margin: 0; max-width: 360px; color: #4a4a51; font-size: 17px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.who-card { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 1 / 1.08; background: #111113; }
.who-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.who-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.84) 100%); }
.who-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; color: #ffffff; display: flex; flex-direction: column; gap: 8px; }
.who-tag { display: inline-flex; align-self: start; background: rgba(255,255,255,0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: 4px 12px; font-size: 12px; }
.who-card-title { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 500; }
.who-card-text { margin: 0; font-size: 15px; color: #e4e4e7; }
.who-img-2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 30%; }
.who-img-3 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* ---------- The four tools (#tools), one panel at a time (assets/home.js) ---------- */

.tools { background: #0b0b0d; color: #f2f2f3; }
.tools-inner { max-width: 1200px; margin: 0 auto; padding: 96px 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 32px; }
.tools-title { margin: 0; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; font-weight: 500; letter-spacing: -0.025em; }
.tools-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; align-self: center; background: #16161a; border: 1px solid #2a2a30; border-radius: 999px; padding: 5px; }
.tools-box { background: #131315; border: 1px solid #26262a; border-radius: 32px; padding: clamp(24px, 4vw, 48px); box-sizing: border-box; min-height: 420px; display: flex; flex-direction: column; justify-content: center; }
.tools-panel { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.tools-copy { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tools-icon { width: 48px; height: 48px; border-radius: 14px; background: #0E7490; color: #ffffff; display: flex; align-items: center; justify-content: center; }
.tools-lead { margin: 0; color: #bdbdc4; font-size: 17px; }
.tools-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.tools-item { display: flex; gap: 10px; }
.tools-shot { flex: 1.4 1 420px; min-width: 0; background: #ffffff; color: #111113; border-radius: 22px; padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.7); }
.tools-div-1 { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px; }
.tools-strong-1 { font-size: 15px; font-weight: 600; }
.tools-span-1 { display: inline-flex; align-items: center; gap: 6px; background: #111111; color: #ffffff; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 500; }
.tools-div-2 { display: flex; align-items: center; gap: 12px; background: #E6F4F6; border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.tools-span-2 { flex: 0 0 30px; height: 30px; border-radius: 9px; background: #0E7490; color: #ffffff; display: flex; align-items: center; justify-content: center; }
.tools-span-3 { flex-grow: 1; min-width: 0; font-weight: 600; }
.tools-span-4 { font-size: 12px; color: #0E7490; font-weight: 500; white-space: nowrap; }
.tools-div-3 { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.tools-span-5 { flex: 0 0 30px; height: 30px; border-radius: 9px; background: #f4f4f5; color: #4a4a51; display: flex; align-items: center; justify-content: center; }
.tools-span-6 { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tools-span-7 { height: 4px; background: #e4e4e7; border-radius: 2px; overflow: hidden; display: block; }
.tools-span-8 { display: block; height: 100%; width: 100%; transform: scaleX(0.6); transform-origin: left center; background: #0E7490; border-radius: 2px; animation: df-progress 6s ease-in-out infinite; }
.tools-span-9 { font-size: 12px; color: #6c6c74; white-space: nowrap; }
/* Under 340 px the "Harbor supply dispute" row had no room for its words, which ran over "24 files · ready" (in the
   design too): there the title keeps its words whole and the count wraps instead, as the first row's title does. */
@media (max-width: 339px) { .tools-shot .app-span-10 { min-width: min-content; } .tools-shot .tools-span-9 { white-space: normal; text-align: right; } }
.tools-div-4 { border-top: 1px solid #e4e4e7; margin-top: 4px; padding: 12px 6px 4px; display: flex; flex-direction: column; gap: 4px; }
.tools-span-10 { font-size: 12px; color: #0E7490; font-weight: 600; }
.tools-span-11 { font-size: 14px; }
.tools-span-12 { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #6c6c74; }
.tools-shot-2 { flex: 1.4 1 420px; min-width: 0; background: #ffffff; color: #111113; border-radius: 22px; padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.7); }
.tools-div-5 { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px; gap: 8px; flex-wrap: wrap; }
.tools-strong-2 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.tools-span-13 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #6c6c74; }
.tools-div-6 { display: flex; align-items: center; gap: 12px; background: #E6F4F6; border-radius: 12px; padding: 12px 14px; font-size: 14px; flex-wrap: wrap; }
.tools-span-14 { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.tools-strong-3 { font-weight: 600; }
.tools-span-15 { color: #4a4a51; font-size: 13px; }
.tools-span-16 { display: inline-flex; align-items: center; gap: 6px; background: #0E7490; color: #ffffff; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 500; }
.tools-div-7 { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 12px; border: 1px solid #e4e4e7; border-radius: 12px; font-size: 13px; color: #0E7490; }
.tools-div-8 { padding: 4px 6px 8px; }
.tools-div-9 { display: flex; align-items: center; gap: 12px; background: #E6F4F6; border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.tools-span-17 { flex: 0 0 30px; height: 30px; border-radius: 50%; background: #0E7490; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.tools-span-18 { font-size: 12px; color: #0E7490; font-weight: 500; }
.tools-div-10 { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.tools-span-19 { flex: 0 0 30px; height: 30px; border-radius: 50%; background: #f4f4f5; color: #4a4a51; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.tools-div-11 { border-top: 1px solid #e4e4e7; margin-top: 4px; padding: 12px 6px 2px; display: flex; flex-direction: column; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #4a4a51; }
.tools-span-20 { display: flex; align-items: center; gap: 6px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; color: #0E7490; font-weight: 600; }
.tools-shot-site { flex: 1.4 1 420px; min-width: 0; position: relative; background: #ffffff; color: #111113; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.7); }
.tools-div-12 { background: #f4f4f5; padding: 10px 14px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid #e4e4e7; }
.tools-span-21 { display: flex; gap: 5px; }
.tools-span-22 { width: 8px; height: 8px; border-radius: 50%; background: #d0d0d5; }
.tools-span-23 { flex-grow: 1; background: #ffffff; border-radius: 6px; padding: 3px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #4a4a51; }
.tools-div-13 { padding: 28px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.tools-div-14 { flex: 1 1 200px; display: flex; flex-direction: column; gap: 10px; }
.tools-span-24 { height: 14px; width: 80%; background: #111113; border-radius: 4px; }
.tools-span-25 { height: 14px; width: 55%; background: #111113; border-radius: 4px; }
.tools-span-26 { height: 7px; width: 92%; background: #d0d0d5; border-radius: 3px; margin-top: 6px; }
.tools-span-27 { height: 7px; width: 70%; background: #d0d0d5; border-radius: 3px; }
.tools-span-28 { height: 28px; width: 110px; background: #0E7490; border-radius: 999px; margin-top: 8px; }
.tools-span-29 { flex: 1 1 140px; height: 130px; background: linear-gradient(135deg, #E6F4F6, #a5f3fc); border-radius: 14px; }
.tools-div-15 { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: #111111; color: #ffffff; border-radius: 999px; padding: 6px 6px 6px 14px; font-size: 12.5px; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(0,0,0,0.5); }
.tools-span-30 { background: #5EC4D4; color: #0b0b0d; border-radius: 999px; padding: 4px 12px; font-weight: 600; }

/* ---------- Questions (#faq) ---------- */

.faq { background: #ffffff; }
.faq-inner { max-width: 1200px; margin: 0 auto; padding: 96px 24px; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 48px; }
.faq-side { flex: 1 1 300px; min-width: 0; }
.title-sm { margin: 0; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.05; font-weight: 500; letter-spacing: -0.025em; }
.faq-note { margin: 16px 0 0; color: #4a4a51; }
.faq-note-link { color: #0E7490; font-weight: 500; }
.faq-list { flex: 1.7 1 480px; min-width: 0; border-top: 1px solid #e4e4e7; }
.faq-item { border-bottom: 1px solid #e4e4e7; padding: 20px 0; }
.faq-question { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 18px; font-weight: 600; }
.faq-plus { flex: 0 0 32px; height: 32px; border-radius: 50%; background: #f4f4f5; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
.faq-answer { margin: 12px 0 0; color: #4a4a51; max-width: 640px; }

/* ---------- From the journal (#journal) ---------- */

.journal { background: #f4f4f5; }
.journal-inner { max-width: 1200px; margin: 0 auto; padding: 96px 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 32px; }
.journal-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.journal-all { display: inline-flex; align-items: center; gap: 4px; color: #0E7490; font-weight: 500; }
.journal-card { background: #ffffff; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; color: #111113; }
.journal-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
/* Each card is one link, its picture after its words in the page so that a screen reader says the article (its kind,
   title and summary) before the picture's description; the picture still shows on top, as designed. */
.journal-card > .journal-img { order: -1; }
.journal-text { padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 8px; }
.journal-card-title { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 500; }
.journal-card-text { color: #4a4a51; font-size: 15px; }

/* ---------- The footer: the demo (#demo), the newsletter, the links ---------- */

.footer { background: #0e0e10; color: #bdbdc4; }
.demo { position: relative; overflow: hidden; }
.demo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.demo-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,16,0.5) 0%, rgba(14,14,16,0.72) 60%, #0e0e10 100%); }
.demo-ink { position: absolute; width: 720px; height: 720px; left: 50%; top: -260px; margin-left: -360px; border-radius: 50%; background: radial-gradient(circle, rgba(14,116,144,0.5), rgba(14,116,144,0) 62%); filter: blur(30px); animation: df-ink-c 28s ease-in-out infinite alternate; }
.demo-inner { position: relative; max-width: 1000px; margin: 0 auto; padding: 112px 24px 96px; box-sizing: border-box; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.demo-title { margin: 0; font-size: clamp(40px, 5.4vw, 80px); line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: #ffffff; }
.demo-title-accent { display: block; color: #5EC4D4; }
.demo-lead { margin: 0; max-width: 560px; font-size: 18px; color: #d4d4d8; }
.demo-book { display: inline-flex; align-items: center; background: #ffffff; color: #0e0e10; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 16px; }
.demo-how { display: inline-flex; align-items: center; gap: 4px; color: #5EC4D4; padding: 14px 12px; font-weight: 500; font-size: 16px; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 40px; font-size: 14px; }
.footer-top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: end; border-top: 1px solid #26262a; padding-top: 40px; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 340px; }
.footer-brand-name { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: #f2f2f3; }
.footer-tagline { margin: 0; color: #8d8d96; }
.nl-form { display: flex; flex-direction: column; gap: 8px; flex: 0 1 380px; min-width: 0; }
.footer-head { color: #f2f2f3; font-weight: 500; }
.nl-row { display: flex; gap: 8px; }
.nl-input { flex-grow: 1; min-width: 0; background: #16161a; border: 1px solid #3a3a40; color: #f2f2f3; border-radius: 999px; padding: 11px 16px; font: inherit; }
.nl-button { background: #f2f2f3; color: #0e0e10; border: 0; border-radius: 999px; padding: 0 18px; font: inherit; font-weight: 600; min-height: 44px; cursor: pointer; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-link { color: #bdbdc4; }
.footer-bottom { border-top: 1px solid #26262a; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #8d8d96; font-size: 13px; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal-link { color: #8d8d96; }

/* The narrowest phones (under 375 px), where the design's header would break "Sign in" and "Book a demo" over two
   lines: a little less room around them, in two steps (under 375 px, then under 338 px), so they stay on one line
   down to 320 px wide (narrower still, they wrap as the design's did). From 375 px up the header is exactly as
   designed. */
@media (max-width: 374px) { .header-bar { padding: 0 16px; } .nav-signin { padding: 12px 10px; } .nav-demo { padding: 10px 14px; } }
@media (max-width: 337px) { .header-bar { padding: 0 12px; gap: 8px; } .nav-signin { padding: 12px 8px; } .nav-demo { padding: 10px 12px; } }

/* ---------- The coming-soon page (coming-soon.html): the grid, the words, the countdown, the form, the stack of files ---------- */
/* Its column rises into view with the page's entrance (the motion section at the end), not on its own. */

.soon-page { min-height: 100vh; box-sizing: border-box; background: #0e0e10; color: #f2f2f3; font-family: 'IBM Plex Sans', system-ui, sans-serif; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.soon-grid { position: absolute; inset: 0; background-image: linear-gradient(#1a1a1e 1px, transparent 1px), linear-gradient(90deg, #1a1a1e 1px, transparent 1px); background-size: 48px 48px; opacity: 0.6; }
.soon-head { position: relative; max-width: 1240px; width: 100%; margin: 0 auto; padding: 24px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.soon-brand { display: flex; align-items: center; gap: 11px; color: #f2f2f3; }
.soon-brand-name { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.soon-back { display: flex; gap: 8px; align-items: center; font-size: 14px; min-height: 44px; color: #bdbdc4; }
.soon-main { position: relative; flex-grow: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding: 8px 24px 40px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.soon-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.soon-badge { display: inline-flex; align-self: start; align-items: center; gap: 8px; font-size: 13px; color: #5EC4D4; border: 1px solid #26494f; border-radius: 999px; padding: 6px 14px; }
.soon-dot { width: 8px; height: 8px; border-radius: 50%; background: #5EC4D4; animation: cs-pulse 1.6s ease-in-out infinite; }
.soon-title { margin: 0; font-size: clamp(40px, 5vw, 62px); line-height: 1.02; font-weight: 500; letter-spacing: -0.015em; }
.soon-lead { margin: 0; font-size: 18px; color: #bdbdc4; max-width: 520px; }
.soon-timer { display: flex; gap: 12px; flex-wrap: wrap; }
.count { min-width: 96px; background: #131315; border: 1px solid #26262a; border-radius: 12px; padding: 16px 14px; text-align: center; box-sizing: border-box; }
.count-num { font-family: 'IBM Plex Mono', monospace; font-size: 44px; font-weight: 500; line-height: 1; }
.count-label { margin-top: 8px; font-size: 12px; color: #8d8d96; }
.count-accent { min-width: 96px; background: #0E7490; border: 1px solid #0E7490; border-radius: 12px; padding: 16px 14px; text-align: center; box-sizing: border-box; }
.count-label-accent { margin-top: 8px; font-size: 12px; color: #d6f0f3; }
.soon-form { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.soon-label { font-size: 14px; color: #bdbdc4; }
.soon-row { display: flex; gap: 8px; }
.soon-input { flex-grow: 1; min-width: 0; background: #131315; border: 1px solid #3a3a40; color: #f2f2f3; border-radius: 8px; padding: 12px 14px; font: inherit; font-size: 15px; }
.soon-button { background: #f2f2f3; color: #0e0e10; border: 0; border-radius: 8px; padding: 0 20px; font: inherit; font-weight: 600; min-height: 48px; cursor: pointer; }
.soon-stage { flex: 1 1 420px; min-width: 0; height: 520px; position: relative; display: flex; align-items: center; justify-content: center; perspective: 1100px; }
.soon-stack { position: relative; width: 280px; height: 340px; transform-style: preserve-3d; animation: cs-spin3d 26s linear infinite; }
.soon-layer-1 { position: absolute; inset: 0; border-radius: 14px; background: rgba(19,19,21,0.92); border: 1px solid #3a3a40; transform: translateZ(0px); }
.soon-layer-2 { position: absolute; inset: 0; border-radius: 14px; background: rgba(19,19,21,0.85); border: 1px solid #3a3a40; transform: translateZ(36px); }
.soon-layer-3 { position: absolute; inset: 0; border-radius: 14px; background: rgba(19,19,21,0.8); border: 1px solid #3a3a40; transform: translateZ(72px); }
.soon-layer-4 { position: absolute; inset: 0; border-radius: 14px; background: rgba(19,19,21,0.75); border: 1px solid #3a3a40; transform: translateZ(108px); }
.soon-sheet { position: absolute; inset: 0; border-radius: 14px; background: rgba(242,242,243,0.96); border: 1px solid #f2f2f3; transform: translateZ(144px); padding: 34px 30px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.soon-line-1 { height: 10px; width: 60%; background: #111113; border-radius: 4px; }
.soon-line-2 { height: 6px; width: 100%; background: #c8c8ce; border-radius: 3px; }
.soon-line-3 { height: 6px; width: 92%; background: #c8c8ce; border-radius: 3px; }
.soon-line-mark { height: 14px; width: 84%; background: #0E7490; border-radius: 4px; }
.soon-line-4 { height: 6px; width: 96%; background: #c8c8ce; border-radius: 3px; }
.soon-line-5 { height: 6px; width: 70%; background: #c8c8ce; border-radius: 3px; }
.soon-line-6 { height: 6px; width: 88%; background: #c8c8ce; border-radius: 3px; }
.soon-scan { position: absolute; inset: -14px; border-radius: 18px; border: 2px solid #5EC4D4; box-shadow: 0 0 32px rgba(94,196,212,0.55); animation: cs-scan 4s ease-in-out infinite; }
.soon-chip-1 { position: absolute; top: 56px; left: 6%; display: flex; gap: 8px; align-items: center; background: #131315; border: 1px solid #26262a; border-radius: 10px; padding: 10px 14px; font-size: 13px; animation: df-float 5s ease-in-out infinite; }
.soon-chip-2 { position: absolute; top: 120px; right: 4%; display: flex; gap: 8px; align-items: center; background: #131315; border: 1px solid #26262a; border-radius: 10px; padding: 10px 14px; font-size: 13px; animation: df-float 6s ease-in-out 1s infinite; }
.soon-chip-3 { position: absolute; bottom: 90px; left: 2%; display: flex; gap: 8px; align-items: center; background: #131315; border: 1px solid #26262a; border-radius: 10px; padding: 10px 14px; font-size: 13px; animation: df-float 5.5s ease-in-out 0.5s infinite; }
.soon-chip-4 { position: absolute; bottom: 40px; right: 8%; display: flex; gap: 8px; align-items: center; background: #131315; border: 1px solid #26262a; border-radius: 10px; padding: 10px 14px; font-size: 13px; animation: df-float 6.5s ease-in-out 1.5s infinite; }
.soon-foot { position: relative; max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 24px 24px; box-sizing: border-box; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #8d8d96; }
.soon-back:hover { color: #f2f2f3; }

/* ---------- The page for an address that isn't a page (404.html): the coming-soon page's look, standing still ---------- */

.nf-signin { display: flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 14px; color: #bdbdc4; }
.nf-signin:hover { color: #f2f2f3; }
.nf-main { position: relative; flex-grow: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding: 8px 24px 72px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 26px; }
.nf-dot { width: 8px; height: 8px; border-radius: 50%; background: #5EC4D4; }
.nf-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.nf-home { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; color: #0e0e10; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 16px; }
.nf-demo { display: inline-flex; align-items: center; gap: 4px; color: #5EC4D4; padding: 14px 12px; font-weight: 500; font-size: 16px; }

/* ---------- The two email forms' answers ---------- */
/*
  Each form posts to the server (/api/site/interest, server/siteForms.ts), which sends the browser back to the page:
  with #sent (the coming-soon page) or #subscribed (the home page) when the request arrived, and that box shows in
  place of the form, in the design's "You're on the list" look; with #not-sent or #not-subscribed when it didn't, and
  that box shows under the form, which stays. Neither shows otherwise. No script is needed for any of it.
*/
.sent-box { display: flex; gap: 10px; align-items: center; max-width: 460px; background: #13282b; border: 1px solid #26494f; border-radius: 8px; padding: 14px 16px; color: #d6f0f3; font-size: 15px; }
#sent:not(:target), #subscribed:not(:target), #not-sent:not(:target), #not-subscribed:not(:target) { display: none; }
#sent:target ~ form, #subscribed:target ~ form { display: none; }
.sent-box:focus, .not-sent:focus { outline: none; }
.nl-sent { flex: 0 1 380px; box-sizing: border-box; }
.not-sent { display: flex; gap: 10px; align-items: center; background: #2a2113; border: 1px solid #5a4523; border-radius: 8px; padding: 12px 14px; color: #f3e3c4; font-size: 14px; line-height: 1.45; }
.sent-box svg, .not-sent svg { flex: none; }
/* The field people never see and bots fill in: off the page, out of the form's layout. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Motion (assets/motion.js): the entrance, sections rising into view, the hero's cards following the pointer ---------- */
/*
  Nothing here hides anything by itself: every "before" state needs a class motion.js puts on <html> as the first thing
  it does, so without the script (or before it runs) every page shows as it is. Only for people who haven't asked for
  less motion, and only on screens (a printed page shows everything). Only transform and opacity move; the layout never
  does.
  - .motion-enter: the first screen comes in, once, 1 s each after 0.4 s: on the home page the badge, the headline, the
    words, the buttons, then the app with its cards; on the coming-soon page the words, the countdown and the form,
    then the stack of files. An animation rather than a transition, so it starts from its own first frame whatever the
    browser drew before.
  - .motion .rv / .rv-in: a block further down, hidden until it scrolls into view, then rising (its delay: --rv-delay).
  The cards floating around the app keep their own animation (df-float); the script moves them with the translate
  property, which adds to it.
*/
@keyframes df-enter { from { opacity: 0; transform: translateY(16px); } }
@media screen and (prefers-reduced-motion: no-preference) {
  .motion-enter .hero-inner > *, .motion-enter .soon-copy > *, .motion-enter .soon-stage { animation: df-enter 1s cubic-bezier(0.25, 1, 0.5, 1) 0.4s both; }
  .motion-enter .hero-inner > :nth-child(2), .motion-enter .soon-copy > :nth-child(2) { animation-delay: 0.45s; }
  .motion-enter .hero-inner > :nth-child(3), .motion-enter .soon-copy > :nth-child(3) { animation-delay: 0.5s; }
  .motion-enter .hero-inner > :nth-child(4), .motion-enter .soon-copy > :nth-child(4) { animation-delay: 0.55s; }
  .motion-enter .hero-inner > :nth-child(n+5), .motion-enter .soon-copy > :nth-child(n+5) { animation-delay: 0.6s; }
  .motion-enter .soon-stage { animation-delay: 0.55s; }
  .motion .rv { opacity: 0; transform: translateY(16px); }
  .motion .rv.rv-in { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1) var(--rv-delay, 0s), transform 1s cubic-bezier(0.25, 1, 0.5, 1) var(--rv-delay, 0s); }
}
/* Printed, the cards stand where they rest, whatever the pointer and the scroll had done to them. */
@media print { .df-float { translate: none !important; } }