/* Terazul LLC — marketing site styles. * * Tokens follow the BizPilot console (../bizpilot/console/public/tokens.css) so the * site and the product read as one company: same accent, same neutral ramp, same * 4px radius, same system font stack (no webfont, no network request). * * Two deliberate divergences from the console, both because this is a marketing * site and that is an operations console: * 1. Type is larger. The console reads at 14px because a reviewer works a queue * for hours; a visitor reads three paragraphs once, at 17px. * 2. Spacing is generous. "If a screen looks airy, it is wrong" is a console * rule. Here airy is the point. * * Every colour is defined twice — light and dark. A partial dark block is how you * ship text that is legible in one theme only. */ /* ---------------------------------------------------------------- tokens -- */ :root { --bg: #ffffff; --surface: #fafafa; --surface-2: #f3f4f6; --line: #e5e7eb; --line-strong: #d1d5db; --fg: #14171a; --muted: #5b6472; --accent: #1d4ed8; --accent-fg: #ffffff; --accent-weak: #eff6ff; --accent-line: #bfdbfe; --ok: #065f46; --ok-bg: #ecfdf5; --ai-line: #7c3aed; --ai-bg: #faf5ff; --focus: var(--accent); /* spacing — 4px base, the only values */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-8: 48px; --s-10: 64px; --s-12: 96px; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --radius: 4px; --radius-lg: 8px; --shadow-overlay: 0 4px 16px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06); --container: 1120px; --measure: 68ch; } /* Three states, not two. The default OS setting stamps nothing on , so * prefers-color-scheme alone separates light from dark there. An explicit * choice stamps data-theme, and must beat the OS in BOTH directions — hence * the :not() guard on the media query and the second, unguarded block. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --h-bg: #080b11; --h-fg: #e9edf5; --h-muted: #a9b4c7; --h-dim: #6d7a8f; --h-line: rgba(255,255,255,.11); --h-surface: rgba(255,255,255,.05); --h-grid: rgba(255,255,255,.04); --h-title-a: #ffffff; --h-title-b: #a8c2f0; --h-glow-a: rgba(37,99,235,.38); --h-glow-b: rgba(124,58,237,.22); --h-glow-c: rgba(29,78,216,.16); --h-pill-bg: rgba(96,165,250,.1); --h-pill-line: rgba(96,165,250,.28); --h-pill-fg: #93c5fd; --h-accent: #93c5fd; --h-chip-bg: rgba(255,255,255,.045); --h-chip-line: rgba(255,255,255,.1); --h-mock-bg: linear-gradient(#101722, #0b1017); --h-mock-line: rgba(255,255,255,.11); --h-mock-sh: 0 40px 80px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(96,165,250,.07), 0 0 90px -30px rgba(37,99,235,.5); --h-mock-head: rgba(255,255,255,.025); --h-mock-in: rgba(255,255,255,.022); --h-mock-fg: #d6dde9; --h-btn2-bg: rgba(255,255,255,.05); --h-btn2-line: rgba(255,255,255,.16); --h-ai: #c4b5fd; --h-hover: rgba(255,255,255,.1); --bg: #0d1014; --surface: #14181e; --surface-2: #1b2028; --line: #262c35; --line-strong: #39414d; --fg: #e8eaed; --muted: #9aa4b2; --accent: #60a5fa; --accent-fg: #0d1014; --accent-weak: #10203a; --accent-line: #1e3a63; --ok: #6ee7b7; --ok-bg: #0d2620; --ai-line: #c4b5fd; --ai-bg: #1d1630; --shadow-overlay: 0 4px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); } } :root[data-theme="dark"] { --h-bg: #080b11; --h-fg: #e9edf5; --h-muted: #a9b4c7; --h-dim: #6d7a8f; --h-line: rgba(255,255,255,.11); --h-surface: rgba(255,255,255,.05); --h-grid: rgba(255,255,255,.04); --h-title-a: #ffffff; --h-title-b: #a8c2f0; --h-glow-a: rgba(37,99,235,.38); --h-glow-b: rgba(124,58,237,.22); --h-glow-c: rgba(29,78,216,.16); --h-pill-bg: rgba(96,165,250,.1); --h-pill-line: rgba(96,165,250,.28); --h-pill-fg: #93c5fd; --h-accent: #93c5fd; --h-chip-bg: rgba(255,255,255,.045); --h-chip-line: rgba(255,255,255,.1); --h-mock-bg: linear-gradient(#101722, #0b1017); --h-mock-line: rgba(255,255,255,.11); --h-mock-sh: 0 40px 80px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(96,165,250,.07), 0 0 90px -30px rgba(37,99,235,.5); --h-mock-head: rgba(255,255,255,.025); --h-mock-in: rgba(255,255,255,.022); --h-mock-fg: #d6dde9; --h-btn2-bg: rgba(255,255,255,.05); --h-btn2-line: rgba(255,255,255,.16); --h-ai: #c4b5fd; --h-hover: rgba(255,255,255,.1); --bg: #0d1014; --surface: #14181e; --surface-2: #1b2028; --line: #262c35; --line-strong: #39414d; --fg: #e8eaed; --muted: #9aa4b2; --accent: #60a5fa; --accent-fg: #0d1014; --accent-weak: #10203a; --accent-line: #1e3a63; --ok: #6ee7b7; --ok-bg: #0d2620; --ai-line: #c4b5fd; --ai-bg: #1d1630; --shadow-overlay: 0 4px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); } /* ------------------------------------------------------------------ base -- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 600; letter-spacing: -.02em; } h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.03em; } h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); } h3 { font-size: 1.15rem; letter-spacing: -.01em; } p { margin: 0; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); } img, svg { max-width: 100%; } code, .mono { font-family: var(--mono); font-size: .9em; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); } .measure { max-width: var(--measure); } .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--accent); color: var(--accent-fg); padding: var(--s-2) var(--s-4); border-radius: var(--radius); } .skip-link:focus { top: var(--s-4); } /* ---------------------------------------------------------------- header -- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .site-header > .container { display: flex; align-items: center; gap: var(--s-5); min-height: 64px; } .brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; color: var(--fg); text-decoration: none; flex: none; } .brand .mark { display: block; flex: none; } .brand:hover { text-decoration: none; } .site-nav { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; } .site-nav a { color: var(--muted); text-decoration: none; font-size: .95rem; padding: var(--s-2) var(--s-3); border-radius: var(--radius); } .site-nav a:hover { color: var(--fg); background: var(--surface-2); } .site-nav a[aria-current="page"] { color: var(--fg); font-weight: 600; } .header-cta { display: flex; align-items: center; gap: var(--s-2); flex: none; } @media (max-width: 800px) { .site-header > .container { flex-wrap: wrap; gap: var(--s-3); padding-block: var(--s-3); } .site-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; } .header-cta { margin-left: auto; } } /* --------------------------------------------------------------- buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-radius: var(--radius); border: 1px solid transparent; font: inherit; font-size: .98rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .12s ease, border-color .12s ease, transform .12s ease; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-fg); } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--fg)); } .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--line-strong); } .btn-secondary:hover { background: var(--surface-2); border-color: var(--muted); } .btn-sm { padding: var(--s-2) var(--s-3); font-size: .9rem; } .btn .arrow { transition: transform .12s ease; } .btn:hover .arrow { transform: translateX(2px); } .link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-1); } .link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------- sections -- */ .section { padding-block: var(--s-12); } .section + .section { border-top: 1px solid var(--line); } .section-tinted { background: var(--surface); } .eyebrow { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); margin-bottom: var(--s-3); } .section-head { max-width: var(--measure); margin-bottom: var(--s-8); } .section-head p { color: var(--muted); font-size: 1.08rem; margin-top: var(--s-4); } .lede { font-size: 1.15rem; color: var(--muted); } /* ------------------------------------------------------------------ hero -- */ .hero { padding-block: var(--s-12) var(--s-10); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-10); align-items: center; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); } } .hero h1 { margin-bottom: var(--s-5); } .hero .lede { font-size: 1.22rem; max-width: 34em; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); } .hero-note { margin-top: var(--s-5); font-size: .92rem; color: var(--muted); } .pill { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--accent-weak); color: var(--accent); border: 1px solid var(--accent-line); padding: var(--s-1) var(--s-3); border-radius: 999px; font-size: .82rem; font-weight: 600; margin-bottom: var(--s-5); } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } /* ------------------------------------------------------------- flow card -- */ .flow { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-6); } .flow-title { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: var(--s-5); } .flow-steps { display: flex; flex-direction: column; gap: 0; } .flow-step { display: flex; gap: var(--s-4); align-items: flex-start; } .flow-rail { display: flex; flex-direction: column; align-items: center; flex: none; align-self: stretch; } .flow-dot { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-strong); font-size: .72rem; font-weight: 600; color: var(--muted); } .flow-line { width: 1px; flex: 1; min-height: 22px; background: var(--line-strong); } .flow-step:last-child .flow-line { display: none; } .flow-body { padding-bottom: var(--s-5); } .flow-step:last-child .flow-body { padding-bottom: 0; } .flow-body h3 { font-size: .98rem; margin-bottom: 2px; } .flow-body p { font-size: .9rem; color: var(--muted); line-height: 1.5; } /* the human gate is the product's whole argument — it gets the emphasis */ .flow-step.is-gate .flow-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .flow-step.is-gate .flow-body h3 { color: var(--accent); } /* ------------------------------------------------------------------ grid -- */ .grid { display: grid; gap: var(--s-5); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-5); } .section-tinted .card { background: var(--bg); } .card h3 { margin-bottom: var(--s-2); } .card p { color: var(--muted); font-size: .96rem; } .card .icon { color: var(--accent); margin-bottom: var(--s-4); display: block; } /* stat / claim rows */ .claims { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .claim { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); background: var(--bg); } .claim + .claim { border-top: 1px solid var(--line); } .claim dt { font-weight: 600; } .claim dd { margin: 0; color: var(--muted); font-size: .96rem; } @media (max-width: 720px) { .claim { grid-template-columns: 1fr; gap: var(--s-2); } } /* in/out of scope lists */ .scope-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); } .scope-list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: .96rem; } .scope-list .glyph { flex: none; margin-top: 2px; } .scope-in .glyph { color: var(--ok); } .scope-out .glyph { color: var(--muted); } .scope-out li { color: var(--muted); } /* --------------------------------------------------------------- callout -- */ .callout { border: 1px solid var(--accent-line); background: var(--accent-weak); border-radius: var(--radius-lg); padding: var(--s-6); } .callout h3 { margin-bottom: var(--s-3); } .callout p { color: var(--fg); opacity: .85; } .note { border-left: 3px solid var(--ai-line); background: var(--ai-bg); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s-4) var(--s-5); font-size: .95rem; } /* ---------------------------------------------------------------- cta bar -- */ .cta-band { text-align: center; } .cta-band h2 { margin-bottom: var(--s-4); } .cta-band p { color: var(--muted); max-width: 52ch; margin-inline: auto; font-size: 1.08rem; } .cta-band .hero-actions { justify-content: center; } /* ---------------------------------------------------------------- footer -- */ .site-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: var(--s-8); font-size: .93rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-8); } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); } } .site-footer h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: var(--s-3); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--fg); text-decoration: underline; } .site-footer .tagline { color: var(--muted); margin-top: var(--s-3); max-width: 34em; } .footer-legal { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; } /* ----------------------------------------------------------- page header -- */ .page-header { padding-block: var(--s-10) var(--s-8); border-bottom: 1px solid var(--line); } .page-header h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: var(--s-4); } .page-header .lede { max-width: var(--measure); } /* ----------------------------------------------------------------- forms -- */ .field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); } .field label { font-size: .9rem; font-weight: 600; } .field input, .field textarea, .field select { font: inherit; font-size: .98rem; padding: var(--s-3); background: var(--bg); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--radius); } .field textarea { min-height: 130px; resize: vertical; } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--accent); } /* ── hero palette ──────────────────────────────────────────────────────── * The hero used to be dark in both themes. These tokens let it follow the * theme like the rest of the page. Defined here for light, and redefined in * all three dark states below — the same shape as the main palette, because * a colour defined only inside a media query never applies to a viewer whose * OS is set to "system" and who has toggled explicitly. */ :root { --h-bg: #f2f6fb; --h-fg: #0e1b2a; --h-muted: #46566a; --h-dim: #7c8b9c; --h-line: rgba(14,27,42,.10); --h-surface: #ffffff; --h-grid: rgba(14,27,42,.05); --h-title-a: #0e1b2a; --h-title-b: #2b4a7a; --h-glow-a: rgba(37,99,235,.13); --h-glow-b: rgba(124,58,237,.08); --h-glow-c: rgba(29,78,216,.06); --h-pill-bg: #e8effb; --h-pill-line: #bcd2f2; --h-pill-fg: #1d4ed8; --h-accent: #1d4ed8; --h-chip-bg: #ffffff; --h-chip-line: #d6dee8; --h-mock-bg: linear-gradient(#ffffff, #fbfcfe); --h-mock-line: #dbe3ec; --h-mock-sh: 0 30px 60px -24px rgba(14,27,42,.22), 0 0 0 1px rgba(29,78,216,.05); --h-mock-head: #f5f8fc; --h-mock-in: #f8fafc; --h-mock-fg: #24303f; --h-btn2-bg: #ffffff; --h-btn2-line: #cbd5e1; --h-ai: #6d28d9; --h-hover: rgba(14,27,42,.06); } /* ═══════════════════════════════════════════════════════════ dark hero ══ * * The hero is dark in BOTH themes. It is the one place on the site that does * not follow prefers-color-scheme, so every colour in here is literal rather * than a token — a token would flip underneath it and the glow would vanish * against a white page. * * Everything below the hero returns to the themed tokens. */ .hero-dark { position: relative; isolation: isolate; background: var(--h-bg); color: var(--h-fg); overflow: hidden; border-bottom: 1px solid var(--h-line); padding-block: var(--s-12) var(--s-10); } /* the glow — a wide blue bloom behind the headline */ .hero-dark::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 130%; background: radial-gradient(60% 55% at 18% 12%, var(--h-glow-a), transparent 68%), radial-gradient(45% 45% at 78% 8%, var(--h-glow-b), transparent 70%), radial-gradient(70% 60% at 50% 100%, var(--h-glow-c), transparent 70%); z-index: -2; pointer-events: none; } /* a faint grid, faded out toward the edges so it never reads as a table */ .hero-dark::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--h-grid) 1px, transparent 1px), linear-gradient(90deg, var(--h-grid) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 40%, transparent 100%); mask-image: radial-gradient(70% 60% at 50% 35%, #000 40%, transparent 100%); z-index: -1; pointer-events: none; } .hero-dark .container { position: relative; z-index: 1; } .hero-dark h1 { /* Capped so "Customer service" holds one line in a half-width column (~504px at the 1120px container). Above ~3.5rem it breaks after "Customer", which reads as a stutter. */ font-size: clamp(2.3rem, 5vw, 3.5rem); letter-spacing: -.035em; line-height: 1.03; margin-bottom: var(--s-5); background: linear-gradient(168deg, var(--h-title-a) 30%, var(--h-title-b) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* the clause the whole product rests on gets its own colour */ .hero-dark h1 .accent-line { background: linear-gradient(168deg, #7dd3fc 0%, #60a5fa 60%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-dark .lede { color: var(--h-muted); font-size: clamp(1.05rem, 1.6vw, 1.28rem); max-width: 32em; } .hero-dark .hero-note { color: var(--h-dim); } .hero-dark .hero-note strong { color: var(--h-fg); font-weight: 600; } .hero-dark .pill { background: var(--h-pill-bg); border-color: var(--h-pill-line); color: var(--h-pill-fg); backdrop-filter: blur(4px); } .hero-dark .btn-primary { background: #2563eb; color: #fff; box-shadow: 0 6px 28px rgba(37, 99, 235, .42); } .hero-dark .btn-primary:hover { background: #3b82f6; } .hero-dark .btn-secondary { background: var(--h-btn2-bg); color: var(--h-fg); border-color: var(--h-btn2-line); backdrop-filter: blur(6px); } .hero-dark .btn-secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); } /* ---- chips: the kinds of message it handles ---------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-8); } .chips-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--h-dim); width: 100%; margin-bottom: var(--s-1); } .chip { font-size: .84rem; padding: var(--s-1) var(--s-3); border-radius: 999px; background: var(--h-chip-bg); border: 1px solid var(--h-chip-line); color: var(--h-muted); } /* ---- the product mock -------------------------------------------------- */ .mock-wrap { perspective: 1600px; } .mock { background: var(--h-mock-bg); border: 1px solid var(--h-mock-line); border-radius: 12px; box-shadow: var(--h-mock-sh); overflow: hidden; transform: rotateY(-7deg) rotateX(3deg) translateZ(0); transform-origin: left center; } @media (max-width: 900px) { .mock { transform: none; } } .mock-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--h-mock-line); background: var(--h-mock-head); font-size: .78rem; color: var(--h-dim); } .mock-bar .dots { display: flex; gap: 5px; margin-right: var(--s-2); } .mock-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--h-mock-line); display: block; } .mock-bar .queue-count { margin-left: auto; color: var(--h-accent); font-variant-numeric: tabular-nums; } .mock-body { padding: var(--s-4); display: grid; gap: var(--s-3); } .mock-msg { border: 1px solid var(--h-mock-line); border-radius: 8px; padding: var(--s-3) var(--s-4); background: var(--h-mock-in); } .mock-msg .who { font-size: .76rem; color: var(--h-dim); margin-bottom: var(--s-1); } .mock-msg .what { font-size: .93rem; color: var(--h-mock-fg); line-height: 1.5; } /* the AI draft is visually distinct from human content — the console does the same thing, for the same reason (NFR-USA-005) */ .mock-draft { border: 1px solid rgba(167, 139, 250, .3); border-left: 3px solid #a78bfa; border-radius: 8px; padding: var(--s-3) var(--s-4); background: linear-gradient(rgba(124,58,237,.1), rgba(124,58,237,.03)); } .mock-draft .who { color: var(--h-ai); } .mock-steps { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: .74rem; color: var(--h-dim); padding-inline: var(--s-1); } .mock-steps .step { display: inline-flex; align-items: center; gap: 5px; } .mock-steps .step::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #34d399; } .mock-steps .sep { color: var(--h-mock-line); } .mock-source { margin-top: var(--s-2); font-size: .74rem; color: var(--h-dim); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } .mock-source b { color: var(--h-accent); font-weight: 600; } .mock-foot { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--h-mock-line); background: var(--h-mock-head); } .mock-gate { font-size: .78rem; color: #fbbf24; display: inline-flex; align-items: center; gap: 6px; } .mock-gate::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .mock-btns { margin-left: auto; display: flex; gap: var(--s-2); } .mock-btn { font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 5px; } .mock-btn.approve { background: #2563eb; color: #fff; } .mock-btn.edit { background: var(--h-chip-bg); color: var(--h-muted); border: 1px solid var(--h-chip-line); } /* ---- entrance: quiet, once, and skipped for reduced motion ------------- */ @media (prefers-reduced-motion: no-preference) { .rise { animation: rise .7s cubic-bezier(.22,.7,.3,1) backwards; } .rise-1 { animation-delay: .04s; } .rise-2 { animation-delay: .12s; } .rise-3 { animation-delay: .2s; } .rise-4 { animation-delay: .3s; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .mock { animation: mock-in .9s cubic-bezier(.22,.7,.3,1) .18s backwards; } @keyframes mock-in { from { opacity: 0; transform: rotateY(-13deg) rotateX(5deg) translateY(26px); } to { opacity: 1; transform: rotateY(-7deg) rotateX(3deg) translateY(0); } } } /* ---- proof strip under the hero ---------------------------------------- */ .strip { background: var(--surface); border-bottom: 1px solid var(--line); } .strip .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); padding-block: var(--s-6); } @media (max-width: 820px) { .strip .container { grid-template-columns: repeat(2, 1fr); } } .strip-item .k { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: var(--s-1); } .strip-item .v { font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; } /* ---- numbered feature cards -------------------------------------------- */ .card-num { position: relative; overflow: hidden; transition: border-color .16s ease, transform .16s ease; } .card-num:hover { border-color: var(--accent-line); transform: translateY(-2px); } .card-num .n { font-size: .74rem; font-weight: 600; letter-spacing: .1em; color: var(--accent); margin-bottom: var(--s-3); display: block; } /* a heavier pull-quote style band */ .quote-band { text-align: center; } .quote-band blockquote { margin: 0 auto; max-width: 22ch; font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; } .quote-band .attrib { margin-top: var(--s-5); color: var(--muted); font-size: .95rem; } /* A claims list placed in a narrow column cannot afford a 220px term column — the definition ends up four words wide. Stack it there instead. */ .claims-compact .claim { grid-template-columns: 1fr; gap: var(--s-2); } .claims-compact .claim dt { font-size: .96rem; } /* ═════════════════════════════════════════════════ channels & autonomy ══ */ /* channel filter row inside the product mock */ .mock-tabs { display: flex; gap: var(--s-1); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--h-mock-line); flex-wrap: wrap; } .mock-tab { font-size: .74rem; padding: 3px 10px; border-radius: 999px; color: var(--h-dim); border: 1px solid transparent; } .mock-tab.on { background: color-mix(in srgb, var(--h-accent) 16%, transparent); border-color: color-mix(in srgb, var(--h-accent) 40%, transparent); color: var(--h-accent); } .mock-chan { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; padding: 2px 7px; border-radius: 4px; background: color-mix(in srgb, var(--h-accent) 16%, transparent); color: var(--h-accent); margin-right: var(--s-2); } /* the autonomy dial — three segments, one lit */ .dial { display: flex; align-items: center; gap: var(--s-2); } .dial-track { display: flex; border: 1px solid var(--h-chip-line); border-radius: 999px; padding: 2px; background: var(--h-chip-bg); } .dial-seg { font-size: .7rem; padding: 3px 9px; border-radius: 999px; color: var(--h-dim); white-space: nowrap; } .dial-seg.on { background: #16a34a; color: #fff; font-weight: 600; } .mock-auto { font-size: .78rem; color: #4ade80; display: inline-flex; align-items: center; gap: 6px; } .mock-auto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* channel cards on the light sections */ .chan-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); } @media (max-width: 900px) { .chan-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { .chan-grid { grid-template-columns: 1fr; } } .chan { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-5); background: var(--bg); transition: border-color .16s ease, transform .16s ease; } .chan:hover { border-color: var(--accent-line); transform: translateY(-2px); } .chan h3 { font-size: 1rem; margin-bottom: var(--s-1); } .chan p { font-size: .89rem; color: var(--muted); } .chan .how { font-family: var(--mono); font-size: .74rem; color: var(--accent); margin-top: var(--s-2); display: block; } /* the converge diagram — many in, one gate, one out */ .converge { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-6); align-items: center; margin-top: var(--s-8); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-6); background: var(--bg); } @media (max-width: 820px) { .converge { grid-template-columns: 1fr; gap: var(--s-5); } } .converge-in { display: grid; gap: var(--s-2); } .converge-in span { font-size: .84rem; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); } .converge-gate { text-align: center; padding: var(--s-5) var(--s-4); border: 1px solid var(--accent-line); background: var(--accent-weak); border-radius: var(--radius-lg); min-width: 190px; } .converge-gate b { display: block; margin-bottom: var(--s-2); } .converge-gate ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .8rem; color: var(--muted); } .converge-out { display: grid; gap: var(--s-2); align-content: center; } .converge-out .msg { border: 1px solid var(--accent-line); background: var(--accent-weak); border-radius: var(--radius); padding: var(--s-3) var(--s-4); } .converge-out .msg b { font-size: .92rem; } .converge-out .msg p { font-size: .82rem; color: var(--muted); margin-top: 2px; } /* autonomy modes: three columns, the middle one emphasised */ .modes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); } @media (max-width: 860px) { .modes { grid-template-columns: 1fr; } } .mode { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-5); background: var(--bg); position: relative; } .mode.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .mode .tag { position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-5); background: var(--accent); color: var(--accent-fg); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } .mode .lvl { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: var(--s-2); } .mode h3 { margin-bottom: var(--s-3); } .mode p { font-size: .93rem; color: var(--muted); } .mode .who { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); } .mode .who b { color: var(--fg); } /* ═══════════════════════════════════════════ voice, language, reach ══ */ /* A channel that is on the roadmap rather than in the product. Muted, and labelled — a greyed card with no label just looks broken. */ .chan { position: relative; } .chan-badge { display: inline-block; margin-left: var(--s-2); font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; vertical-align: 2px; background: var(--warnbg); color: var(--warn); border: 1px solid var(--warn); } .chan.is-soon { border-style: dashed; } .chan.is-soon h3 { color: var(--muted); } .chan.is-soon:hover { border-style: solid; } /* the three voice phases — a sequence, so it is numbered */ .phases { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); margin-top: var(--s-6); } @media (max-width: 860px) { .phases { grid-template-columns: 1fr; } } .phase { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-5); background: var(--bg); } .phase-n { font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3); display: block; } .phase h3 { font-size: 1rem; margin-bottom: var(--s-2); } .phase p { font-size: .91rem; color: var(--muted); } /* language list — dense, factual, not a flag parade */ .langs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); } .lang { font-size: .85rem; padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); } /* two-column feature rows for the reach section */ .reach { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-5); } @media (max-width: 760px) { .reach { grid-template-columns: 1fr; } } .reach-item { border-left: 2px solid var(--accent-line); padding-left: var(--s-5); } .reach-item h3 { font-size: 1.02rem; margin-bottom: var(--s-2); } .reach-item p { font-size: .95rem; color: var(--muted); } /* A chip for a channel that is coming rather than shipping. The marker is the point — a chip that looks identical to the others is a claim. */ .chip-soon { border-style: dashed; } .chip-soon b { font-size: .64rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #fbbf24; margin-left: 5px; } /* ══════════════════════════════════════════════ natural language ══ */ /* The detection strip inside the mock. It exists to make the point the mock was already proving silently: three separate asks in one casual sentence. */ .mock-detect { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px dashed color-mix(in srgb, var(--h-accent) 45%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--h-accent) 8%, transparent); font-size: .72rem; color: var(--h-accent); } .mock-detect .lead-k { font-weight: 600; letter-spacing: .03em; } .mock-detect .ask { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--h-accent) 16%, transparent); color: var(--h-accent); font-variant-numeric: tabular-nums; } /* natural-language capability rows */ .nl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); } @media (max-width: 900px) { .nl { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 600px) { .nl { grid-template-columns: 1fr; } } .nl-item h3 { font-size: 1rem; margin-bottom: var(--s-2); } .nl-item p { font-size: .93rem; color: var(--muted); } .nl-item .said { display: block; margin-top: var(--s-3); font-family: var(--mono); font-size: .78rem; line-height: 1.5; color: var(--fg); background: var(--surface-2); border-left: 2px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s-2) var(--s-3); } /* the "versus" strip — what they are used to, and what this is instead */ .versus { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--s-8); background: var(--bg); } @media (max-width: 760px) { .versus { grid-template-columns: repeat(2, minmax(0,1fr)); } } .versus-cell { padding: var(--s-4) var(--s-5); border-right: 1px solid var(--line); } .versus-cell:last-child { border-right: 0; } @media (max-width: 760px) { .versus-cell:nth-child(2n) { border-right: 0; } .versus-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } .versus-cell .old { font-size: .84rem; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); display: block; margin-bottom: var(--s-1); } .versus-cell .new { font-size: .95rem; font-weight: 600; } /* teaser band that hands off to a deeper page */ .teaser { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s-6); align-items: center; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-6); background: var(--bg); } @media (max-width: 760px) { .teaser { grid-template-columns: 1fr; gap: var(--s-4); } } .teaser h3 { font-size: 1.25rem; margin-bottom: var(--s-2); } .teaser p { color: var(--muted); font-size: .96rem; } .teaser .steps { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); font-size: .82rem; color: var(--muted); } .teaser .steps span { padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } /* ═════════════════════════════════════════════════ rotating banner ══ */ /* Three messages share the hero. Without JS the first one shows and the rest stay hidden — the fallback is the default, not an afterthought. */ .hero-slides { position: relative; min-height: 126px; } @media (max-width: 900px) { .hero-slides { min-height: 120px; } } @media (max-width: 560px) { .hero-slides { min-height: 190px; } } .slide { display: none; } .slide.is-on { display: block; } @media (prefers-reduced-motion: no-preference) { .slide.is-on { animation: slide-in .55s cubic-bezier(.22,.7,.3,1); } @keyframes slide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } } /* Each message gets its own light. Same dark ground, different temperature, so the three read as a set rather than three unrelated pages. */ .hero-dark { --glow-a: rgba(37,99,235,.38); --glow-b: rgba(124,58,237,.22); --glow-c: rgba(29,78,216,.16); } .hero-dark.t-speed { --glow-a: rgba(14,165,233,.36); --glow-b: rgba(20,184,166,.20); --glow-c: rgba(2,132,199,.16); } .hero-dark.t-relation { --glow-a: rgba(124,58,237,.34); --glow-b: rgba(236,72,153,.18); --glow-c: rgba(91,33,182,.18); } .hero-dark::before { background: radial-gradient(60% 55% at 18% 12%, var(--glow-a), transparent 68%), radial-gradient(45% 45% at 78% 8%, var(--glow-b), transparent 70%), radial-gradient(70% 60% at 50% 100%, var(--glow-c), transparent 70%); transition: background .7s ease; } .hero-dark .accent-line { background-image: linear-gradient(168deg, #7dd3fc 0%, #60a5fa 60%); } .hero-dark.t-speed .accent-line { background-image: linear-gradient(168deg, #7dd3fc 0%, #2dd4bf 70%); } .hero-dark.t-relation .accent-line { background-image: linear-gradient(168deg, #d8b4fe 0%, #f0abfc 70%); } /* controls: a labelled rail, not three anonymous dots */ .slide-nav { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); flex-wrap: wrap; } .slide-dots { display: flex; gap: var(--s-2); } .slide-dot { appearance: none; border: 0; padding: 0; cursor: pointer; width: 34px; height: 3px; border-radius: 2px; background: var(--h-line); transition: background .2s ease; } .slide-dot:hover { background: rgba(255,255,255,.4); } .slide-dot[aria-current="true"] { background: #93c5fd; } .t-speed .slide-dot[aria-current="true"] { background: #5eead4; } .t-relation .slide-dot[aria-current="true"] { background: #f0abfc; } .slide-dot:focus-visible { outline: 2px solid #93c5fd; outline-offset: 4px; } .slide-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--h-dim); font-weight: 600; } /* ══════════════════════════════════════════════════ explainer modal ══ */ /* Triggers are real