:root { /* ------------------------------------------------------------------------ Light is the base palette. Dark is redefined twice below: once behind prefers-color-scheme (for the default "system" state, where nothing is stamped on ), and once behind [data-theme="dark"] so the toggle wins in both directions. Every colour on this page comes from a token defined HERE, so nothing is left undefined in the un-stamped state. ------------------------------------------------------------------------ */ /* Ground and structure. The neutrals carry a slight teal bias rather than being pure greys, so they read as chosen. */ --ink: #F2F6F8; --ink-2: #FFFFFF; --panel: #FFFFFF; --panel-2: #F8FBFC; --line: #CFDCE3; --line-soft: #E3EBEF; /* Type */ --fg: #08131D; --fg-2: #33475A; --mut: #5C7183; --faint: #7D93A5; /* Signal. One accent, spent carefully; the warm tone is a counter-signal only. On light ground the teal is darkened until it passes contrast as text. */ --signal: #007C68; --signal-dim: #009B81; --signal-ink: #FFFFFF; --signal-hi: #005F50; --warm: #C0410C; --field-rgb: 0, 124, 104; --signal-rgb: 0, 124, 104; --warm-rgb: 192, 65, 12; /* Semantic, separate from the accent */ --ok: #06795A; --info: #1A66C7; --warn: #9A5B06; --ok-rgb: 6, 121, 90; --info-rgb: 26, 102, 199; --warn-rgb: 154, 91, 6; /* Derived surfaces. Named by role so a theme can move them independently. */ --raise: rgba(8, 19, 29, .028); --raise-2: rgba(8, 19, 29, .05); --nav-bg: rgba(242, 246, 248, .78); --nav-bg-on: rgba(242, 246, 248, .95); --panel-bg: rgba(255, 255, 255, .98); --chip-bg: rgba(255, 255, 255, .94); --shadow: rgba(19, 45, 61, .17); --shadow-2: rgba(19, 45, 61, .28); --dot: #BCCBD5; --dot-warm: #E0C4B6; --hero-wash-1: rgba(15, 61, 219, .1); --hero-wash-2: rgba(0, 124, 104, .11); --field-op: .42; --hero-scrim: linear-gradient(100deg, rgba(242,246,248,.98) 0%, rgba(242,246,248,.93) 38%, rgba(242,246,248,.72) 66%, rgba(242,246,248,.52) 100%); --hero-photo-op: .5; --radius: 14px; --radius-lg: 22px; --shell: 1200px; --gutter: 24px; --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --ease: cubic-bezier(.22, .68, .28, 1); color-scheme: light; } /* The dark palette, written once and applied from both places that can select it. Only tokens are redefined — no component ever gets its colour from inside one of these blocks, which is what keeps the un-stamped "system" state correct. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #060910; --ink-2: #080C15; --panel: #0C111C; --panel-2: #101725; --line: #1F2A3D; --line-soft: #151E2D; --fg: #E8EEF9; --fg-2: #B7C3D6; --mut: #8695AC; --faint: #5C6B82; --signal: #00E0B8; --signal-dim: #0FA98D; --signal-ink: #041713; --signal-hi: #4BF0D2; --warm: #FF7A45; --field-rgb: 0, 224, 184; --signal-rgb: 0, 224, 184; --warm-rgb: 255, 122, 69; --ok: #35D6A4; --info: #56A8FF; --warn: #FFB454; --ok-rgb: 53, 214, 164; --info-rgb: 86, 168, 255; --warn-rgb: 255, 180, 84; --raise: rgba(255, 255, 255, .022); --raise-2: rgba(255, 255, 255, .055); --nav-bg: rgba(6, 9, 16, .72); --nav-bg-on: rgba(6, 9, 16, .92); --panel-bg: rgba(6, 9, 16, .985); --chip-bg: rgba(10, 14, 23, .94); --shadow: rgba(0, 0, 0, .85); --shadow-2: rgba(0, 0, 0, .95); --dot: #263149; --dot-warm: #3A2A34; --hero-wash-1: rgba(15, 61, 219, .28); --hero-wash-2: rgba(0, 224, 184, .13); --field-op: .5; --hero-scrim: linear-gradient(100deg, rgba(6,9,16,.97) 0%, rgba(6,9,16,.9) 38%, rgba(6,9,16,.66) 66%, rgba(6,9,16,.44) 100%); --hero-photo-op: .62; color-scheme: dark; } } :root[data-theme="dark"] { --ink: #060910; --ink-2: #080C15; --panel: #0C111C; --panel-2: #101725; --line: #1F2A3D; --line-soft: #151E2D; --fg: #E8EEF9; --fg-2: #B7C3D6; --mut: #8695AC; --faint: #5C6B82; --signal: #00E0B8; --signal-dim: #0FA98D; --signal-ink: #041713; --signal-hi: #4BF0D2; --warm: #FF7A45; --field-rgb: 0, 224, 184; --signal-rgb: 0, 224, 184; --warm-rgb: 255, 122, 69; --ok: #35D6A4; --info: #56A8FF; --warn: #FFB454; --ok-rgb: 53, 214, 164; --info-rgb: 86, 168, 255; --warn-rgb: 255, 180, 84; --raise: rgba(255, 255, 255, .022); --raise-2: rgba(255, 255, 255, .055); --nav-bg: rgba(6, 9, 16, .72); --nav-bg-on: rgba(6, 9, 16, .92); --panel-bg: rgba(6, 9, 16, .985); --chip-bg: rgba(10, 14, 23, .94); --shadow: rgba(0, 0, 0, .85); --shadow-2: rgba(0, 0, 0, .95); --dot: #263149; --dot-warm: #3A2A34; --hero-wash-1: rgba(15, 61, 219, .28); --hero-wash-2: rgba(0, 224, 184, .13); --field-op: .5; --hero-scrim: linear-gradient(100deg, rgba(6,9,16,.97) 0%, rgba(6,9,16,.9) 38%, rgba(6,9,16,.66) 66%, rgba(6,9,16,.44) 100%); --hero-photo-op: .62; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Anchors land clear of the sticky header rather than under it. */ :target { scroll-margin-top: 96px; } [id] { scroll-margin-top: 96px; } body { margin: 0; background: var(--ink); color: var(--fg-2); font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--fg); margin: 0; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: clamp(2.05rem, 5.4vw, 4.05rem); font-weight: 700; } h2 { font-size: clamp(1.62rem, 3.4vw, 2.85rem); font-weight: 700; } h3 { font-size: 1.16rem; font-weight: 600; letter-spacing: -0.01em; } h4 { font-size: .82rem; font-weight: 600; } p { margin: 0; } a { color: var(--signal); text-decoration: none; } a:hover { color: var(--signal-hi); } /* A control that reads as a link. Used where the action changes the page in place (the KES/USD switch) rather than navigating somewhere — an there announces itself as a link and moves focus to the top of the document. */ .linkish { padding: 0; background: none; border: 0; font: inherit; color: var(--signal); cursor: pointer; } .linkish:hover { color: var(--signal-hi); } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--signal); color: var(--signal-ink); border-radius: 8px; font-weight: 600; transition: top .2s var(--ease); } .skip:focus { top: 16px; color: var(--signal-ink); } .wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .wrap.narrow { max-width: 820px; } /* ========================================================================== Shared type pieces ========================================================================== */ .kicker { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--signal); margin-bottom: 18px; } .section-lead { color: var(--mut); font-size: 1.06rem; max-width: 62ch; margin-top: 18px; } .section-head { margin-bottom: 56px; } .section-foot { margin-top: 40px; color: var(--mut); font-size: .95rem; max-width: 70ch; } .section-foot b { color: var(--fg-2); font-weight: 600; } .note { margin-top: 40px; padding: 18px 22px; border-left: 2px solid var(--line); color: var(--mut); font-size: .93rem; max-width: 78ch; } /* ========================================================================== Buttons ========================================================================== */ .btn { --btn-pad: 11px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: var(--btn-pad); border: 1px solid transparent; border-radius: 10px; font-family: var(--font-body); font-size: .95rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .btn-primary { background: var(--signal); color: var(--signal-ink); box-shadow: 0 0 0 0 rgba(var(--signal-rgb), .5); } .btn-primary:hover { background: var(--signal-hi); color: var(--signal-ink); transform: translateY(-1px); box-shadow: 0 8px 30px -10px rgba(var(--signal-rgb), .55); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--fg); } .btn-ghost:hover { border-color: var(--signal-dim); color: var(--fg); background: rgba(var(--signal-rgb), .07); transform: translateY(-1px); } .btn-lg { --btn-pad: 15px 28px; font-size: 1rem; } .btn-block { display: flex; width: 100%; } /* ========================================================================== Nav ========================================================================== */ .nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background-color .25s var(--ease), border-color .25s var(--ease); } .nav.scrolled { background: var(--nav-bg-on); border-bottom-color: var(--line-soft); } .nav-inner { display: flex; align-items: center; gap: 20px; height: 70px; } .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--fg); font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em; margin-right: auto; } .brand:hover { color: var(--fg); } .brand-mark { color: var(--signal); flex: none; } .brand-sub { font-family: var(--font-mono); font-weight: 400; font-size: .66em; letter-spacing: .12em; color: var(--mut); margin-left: 7px; } /* Wrapper is transparent to layout on desktop, so both children stay flex items of .nav-inner. It becomes a real box only in the mobile block below. */ .nav-menu { display: contents; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { position: relative; padding: 8px 14px; color: var(--fg-2); font-size: .93rem; font-weight: 500; border-radius: 8px; transition: color .2s var(--ease), background-color .2s var(--ease); } .nav-links a:hover { color: var(--fg); background: var(--raise-2); } .nav-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--fg); cursor: pointer; } .bars { display: block; width: 18px; } .bars i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); } .bars i + i { margin-top: 4.5px; } .nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav-progress { position: absolute; left: 0; bottom: -1px; height: 1.5px; width: 0; background: linear-gradient(90deg, var(--signal-dim), var(--signal)); box-shadow: 0 0 12px rgba(var(--signal-rgb), .6); } /* ========================================================================== Section rail — navigation to every section, not just the header's five ========================================================================== */ .rail { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; } .rail a { display: flex; align-items: center; gap: 10px; padding: 5px 2px; color: var(--faint); } .rail a span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity .25s var(--ease), transform .25s var(--ease), color .25s var(--ease); } .rail a i { display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; transition: width .25s var(--ease), background-color .25s var(--ease); } /* The label appears on hover only. Showing it for the active item too meant it sat over the section heading at viewports where the rail's gutter is narrow. */ .rail a:hover span { opacity: 1; transform: none; } .rail a:hover { color: var(--fg-2); } .rail a.on { color: var(--signal); } .rail a.on i { width: 30px; } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; padding: 84px 0 0; overflow: hidden; background: radial-gradient(1100px 620px at 78% -10%, var(--hero-wash-1), transparent 62%), radial-gradient(760px 520px at 6% 4%, var(--hero-wash-2), transparent 60%), var(--ink); } /* The photograph, full-bleed behind everything in the hero. */ .hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; opacity: var(--hero-photo-op); filter: saturate(.85); } .hero-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--field-op); pointer-events: none; } /* Two layers: the angled scrim that gives the copy its contrast over the photograph, and a vertical fade so the hero dissolves into the page rather than ending on a seam. */ .hero-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 62%, var(--ink) 100%), var(--hero-scrim); } .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-bottom: 96px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-bg); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--fg-2); margin-bottom: 26px; } .live { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(var(--signal-rgb), .6); animation: pulse 2.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--signal-rgb), .55); } 70% { box-shadow: 0 0 0 8px rgba(var(--signal-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--signal-rgb), 0); } } /* Deliberately allowed to wrap: at the hero's column width the phrase is wider than the measure, and holding it on one line pushes it out over the console. */ /* The global h1 clamp is tuned for the short headings on platform.html and investors.html. In the hero the headline shares its row with the console, so it only has ~550px to work in — at the global size that is five lines of 65px type and a hero taller than the viewport. */ .hero h1 { font-size: clamp(1.95rem, 4.4vw, 3.4rem); } /* The signal-coloured phrase is the second half of the sentence, so it should read as its own line rather than starting with a stranded word at the end of a black one — which is where it lands if the browser is left to wrap it. */ .hero h1 em { display: block; } h1 em { font-style: normal; color: var(--signal); } .lead { margin-top: 24px; font-size: 1.1rem; color: var(--mut); max-width: 58ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .hero-note { margin-top: 18px; font-size: .87rem; color: var(--faint); } .hero-stats { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 46px 0 0; padding-top: 30px; border-top: 1px solid var(--line-soft); } .hero-stats div { min-width: 0; } .hero-stats dt { margin: 0; } .hero-stats b { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .hero-stats dd { margin: 2px 0 0; font-size: .82rem; color: var(--mut); } /* --- Console ------------------------------------------------------------- */ .console { position: relative; } .console-glow { position: absolute; inset: -14% -10% -20%; background: radial-gradient(closest-side, rgba(var(--signal-rgb), .2), transparent 72%); filter: blur(28px); pointer-events: none; } .console-frame { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 40px 90px -40px var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .04); overflow: hidden; } .console-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: var(--raise); } .cdot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); } .cdot:first-child { background: var(--dot-warm); } .console-title { margin-left: 10px; font-family: var(--font-mono); font-size: .72rem; color: var(--mut); } .console-clock { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--signal); font-variant-numeric: tabular-nums; } .console-body { padding: 18px; display: grid; gap: 16px; } .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tile { padding: 13px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--raise); display: grid; gap: 3px; } .tile .k { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); } .tile .v { font-family: var(--font-display); font-size: 1.42rem; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; } .tile .v.sm { font-size: 1.1rem; } .tile .v i { font-style: normal; font-size: .58em; font-weight: 500; color: var(--mut); margin-left: 2px; } .spark { display: block; height: 18px; margin-top: 2px; } .spark svg { width: 100%; height: 100%; display: block; } .spark polyline { fill: none; stroke: var(--signal); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .spark.down polyline { stroke: var(--warm); } .trace { border: 1px solid var(--line-soft); border-radius: 12px; background: var(--raise); padding: 12px 14px 0; } .trace-label { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); } .trace svg { display: block; width: 100%; height: 92px; } .trace-line { stroke: var(--signal); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(var(--signal-rgb), .45)); } .feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .feed li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); font-size: .8rem; } .feed li:last-child { border-bottom: 0; } .feed-txt { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pip { width: 6px; height: 6px; border-radius: 50%; flex: none; } .pip.ok { background: var(--ok); } .pip.info { background: var(--info); } .pip.warn { background: var(--warn); } .chip { margin-left: auto; flex: none; padding: 3px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: .63rem; letter-spacing: .04em; } .chip-ok { background: rgba(var(--ok-rgb), .13); color: var(--ok); } .chip-info { background: rgba(var(--info-rgb), .13); color: var(--info); } .chip-warn { background: rgba(var(--warn-rgb), .13); color: var(--warn); } .float-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--chip-bg); backdrop-filter: blur(8px); font-size: .76rem; color: var(--fg-2); box-shadow: 0 16px 40px -20px var(--shadow); animation: bob 6s ease-in-out infinite; } .float-chip svg { color: var(--signal); flex: none; } .fc-1 { top: -20px; right: 6%; } .fc-2 { bottom: -18px; left: -4%; animation-delay: -3s; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* --- Ticker -------------------------------------------------------------- */ .ticker { position: relative; z-index: 2; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); overflow: hidden; background: var(--raise); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .ticker-run { display: flex; align-items: center; gap: 26px; padding: 15px 0; width: max-content; animation: marquee 42s linear infinite; } .ticker-run span { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); white-space: nowrap; } .ticker-run i { width: 4px; height: 4px; border-radius: 50%; background: var(--signal-dim); flex: none; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================== Sections ========================================================================== */ .section { padding: 104px 0; position: relative; } .section.ruled { border-top: 1px solid var(--line-soft); } /* Thesis --------------------------------------------------------------- */ .thesis-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); gap: 72px; align-items: center; } .counters-src { margin-top: 40px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; margin: 18px 0 0; } .counters dt { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--signal); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; } .counters dd { margin: 6px 0 0; font-size: .86rem; color: var(--mut); } .counters dd b { display: block; color: var(--fg); font-weight: 600; font-size: .95rem; margin-bottom: 3px; } .orbit { margin: 0; } .orbit svg { display: block; width: 100%; height: auto; } .orbit .ring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 7; } .orbit .spokes line { stroke: var(--line); stroke-width: 1; } .orbit .nodes circle { fill: var(--panel-2); stroke: var(--line); stroke-width: 1; } .orbit .nodes text { fill: var(--fg-2); font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-anchor: middle; text-transform: uppercase; } .orbit .core circle { fill: var(--ink-2); stroke: var(--signal); stroke-width: 1.5; } .orbit .core text { fill: var(--signal); font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-anchor: middle; } .orbit figcaption { margin-top: 18px; text-align: center; font-size: .82rem; color: var(--faint); } /* Cards ----------------------------------------------------------------- */ .card { position: relative; padding: 30px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2), var(--panel)); transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .card:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: 0 26px 60px -34px var(--shadow); } .card h3 { margin-bottom: 8px; } .card p { color: var(--mut); font-size: .93rem; } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 11px; background: rgba(var(--signal-rgb), .07); color: var(--signal); } .card-icon svg { width: 21px; height: 21px; } .area { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); margin-bottom: 7px; } .card-sub { margin-bottom: 18px; } .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .ticks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 26px; } .ticks li { position: relative; padding-left: 24px; font-size: .89rem; color: var(--fg-2); } .ticks li b { color: var(--fg); font-weight: 600; } .ticks li::before { content: ""; position: absolute; left: 3px; top: .52em; width: 9px; height: 5px; border-left: 1.6px solid var(--signal); border-bottom: 1.6px solid var(--signal); transform: rotate(-45deg); } .ticks li.off { color: var(--faint); } .ticks li.off::before { border: 0; top: .62em; left: 4px; width: 8px; height: 1.6px; background: var(--faint); transform: none; } .bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .mechanisms .card { padding-top: 26px; } .mech-no { display: block; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; color: var(--signal); margin-bottom: 14px; } /* Use cases -------------------------------------------------------------- */ .usecases .card { display: flex; flex-direction: column; } .usecases .ticks { margin-top: 18px; } .scale-art { display: block; width: 100%; height: auto; margin-bottom: 20px; } .scale-art .s-b { fill: rgba(var(--signal-rgb), .07); stroke: var(--signal-dim); stroke-width: 1.4; } .scale-art .s-r { fill: none; stroke: var(--signal); stroke-width: 1.6; stroke-linejoin: round; } .scale-art .s-c { stroke: var(--signal); stroke-width: 2; stroke-linecap: round; } .scale-art .s-g { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 6; } .scale-art .s-l { fill: none; stroke: var(--warm); stroke-width: 1.4; stroke-dasharray: 4 5; } .link-arrow { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 600; } .link-arrow::after { content: "→"; transition: transform .2s var(--ease); } .link-arrow:hover::after { transform: translateX(4px); } /* Pricing ---------------------------------------------------------------- */ .billing { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; } .billing span { font-size: .9rem; color: var(--faint); transition: color .2s var(--ease); } .billing span.active { color: var(--fg); } .switch { position: relative; width: 50px; height: 27px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); cursor: pointer; transition: background-color .25s var(--ease), border-color .25s var(--ease); } .switch i { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--mut); transition: transform .25s var(--ease), background-color .25s var(--ease); } .switch.on { background: rgba(var(--signal-rgb), .18); border-color: var(--signal-dim); } .switch.on i { transform: translateX(23px); background: var(--signal); } .save-badge { padding: 4px 11px; border-radius: 999px; background: rgba(var(--warm-rgb), .12); border: 1px solid rgba(var(--warm-rgb), .32); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: var(--warm); } .billing .save-badge { color: var(--warm); } .tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; } .ptier { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2), var(--panel)); transition: border-color .3s var(--ease), transform .3s var(--ease); } .ptier:hover { border-color: var(--line); transform: translateY(-3px); } .ptier.featured { border-color: var(--signal-dim); box-shadow: 0 30px 70px -44px rgba(var(--signal-rgb), .55); } .ribbon { position: absolute; top: -11px; left: 26px; padding: 3px 11px; border-radius: 999px; background: var(--signal); color: var(--signal-ink); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; } .ptier-sub { margin: 8px 0 0; font-size: .86rem; color: var(--mut); min-height: 3.1em; } .price { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .price b { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--fg); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .price b.custom { font-size: 2rem; } .price span { font-size: .84rem; color: var(--mut); } .price b.flash { animation: flash .45s var(--ease); } @keyframes flash { 0% { transform: translateY(-6px); opacity: 0; } 100% { transform: none; opacity: 1; } } .price-note { margin-top: 6px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--faint); } .ptier .ticks { margin: 22px 0 26px; } .ptier .btn { margin-top: auto; } /* Timeline --------------------------------------------------------------- */ .timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: stage; } .timeline > li { position: relative; counter-increment: stage; padding: 30px 24px 26px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2), var(--panel)); } /* The number is the stage's real position in a sequence that must run in order. */ .timeline > li::before { content: counter(stage, decimal-leading-zero); position: absolute; top: 22px; right: 22px; font-family: var(--font-mono); font-size: 1.35rem; color: var(--line); } .tl-week { display: inline-block; margin-bottom: 10px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--signal); } .timeline h3 { margin-bottom: 16px; } /* Quotes ----------------------------------------------------------------- */ .quotes .card { margin: 0; display: flex; flex-direction: column; } .stars { color: var(--warm); letter-spacing: .18em; font-size: .84rem; margin-bottom: 16px; } .quotes blockquote { margin: 0 0 22px; font-family: var(--font-display); font-size: 1.02rem; font-weight: 400; line-height: 1.55; color: var(--fg); letter-spacing: -0.01em; } .quotes blockquote::before { content: "\201C"; } .quotes blockquote::after { content: "\201D"; } .quotes figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line-soft); } .av { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: rgba(var(--signal-rgb), .1); border: 1px solid var(--line); color: var(--signal); font-family: var(--font-mono); font-size: .74rem; } .who { font-size: .8rem; color: var(--mut); line-height: 1.45; } .who b { display: block; color: var(--fg); font-weight: 600; font-size: .88rem; } .fictional { display: inline-block; margin-left: 5px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-style: normal; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); vertical-align: middle; } /* FAQ -------------------------------------------------------------------- */ .faq { border-top: 1px solid var(--line-soft); } .faq-item { border-bottom: 1px solid var(--line-soft); } .faq-item summary { display: flex; align-items: center; gap: 16px; padding: 22px 4px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.04rem; font-weight: 600; color: var(--fg); transition: color .2s var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--signal); } .faq-item summary::after { content: ""; margin-left: auto; flex: none; width: 10px; height: 10px; border-right: 1.6px solid var(--signal); border-bottom: 1.6px solid var(--signal); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); } .faq-item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); } .faq-body { padding: 0 4px 24px; } .faq-body p { color: var(--mut); font-size: .95rem; max-width: 70ch; } /* Demo ------------------------------------------------------------------- */ .demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 64px; align-items: start; } .steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 16px; } .steps li { display: flex; gap: 14px; align-items: flex-start; font-size: .93rem; color: var(--fg-2); } .steps span { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--signal-dim); background: rgba(var(--signal-rgb), .08); color: var(--signal); font-family: var(--font-mono); font-size: .74rem; } .covers-label { margin-top: 38px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .demo-covers { margin-top: 14px; } .form-shell { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 40px 90px -50px var(--shadow-2); } #demo-form { display: grid; gap: 16px; } .f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .field { display: grid; gap: 7px; margin: 0; } .field label { font-size: .8rem; font-weight: 600; color: var(--fg-2); letter-spacing: .01em; } .field label b { color: var(--signal); } .field .opt { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 400; } .field input, .field select, .field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-2); color: var(--fg); font-family: var(--font-body); font-size: .93rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .field textarea { resize: vertical; min-height: 84px; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mut) 50%), linear-gradient(135deg, var(--mut) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--signal-dim); box-shadow: 0 0 0 3px rgba(var(--signal-rgb), .16); } .field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--warm); } .err { font-size: .76rem; color: var(--warm); min-height: 0; } .err:empty { display: none; } .form-status { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: .87rem; display: none; } .form-status.show { display: block; } .form-status.ok { background: rgba(var(--ok-rgb), .1); color: var(--ok); border: 1px solid rgba(var(--ok-rgb), .3); } .form-status.error { background: rgba(var(--warm-rgb), .1); color: var(--warm); border: 1px solid rgba(var(--warm-rgb), .3); } .fineprint { font-size: .76rem; color: var(--faint); text-align: center; } /* ========================================================================== Footer ========================================================================== */ .foot { border-top: 1px solid var(--line-soft); padding: 72px 0 40px; background: var(--ink-2); } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 44px; } .foot-brand p { margin-top: 16px; font-size: .87rem; color: var(--mut); max-width: 34ch; } .foot nav { display: flex; flex-direction: column; gap: 11px; } .foot h4 { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: 3px; } .foot nav a { color: var(--fg-2); font-size: .89rem; } .foot nav a:hover { color: var(--signal); } .foot-base { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--faint); } .foot-tag { font-family: var(--font-mono); } /* ========================================================================== Reveal on scroll ========================================================================== */ /* Social proof section ---------------------------------------------------- */ .proof-section { background: var(--raise); padding: 80px 0; } .proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } .proof-quote { background: var(--panel); padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--line-soft); } .proof-quote p { font-size: 1.05rem; line-height: 1.6; color: var(--fg-2); margin: 0 0 16px; } .proof-quote footer { font-size: .92rem; color: var(--mut); font-style: italic; } /* Committee section ------------------------------------------------------- */ /* Product screenshots ---------------------------------------------------- Two images per shot, one per theme. The page's theme has three states — an explicit data-theme, or neither, in which case prefers-color-scheme decides — so the swap has to answer all three the same way the colour tokens do, or a reader on "system" gets the wrong screenshot against the right background. */ .shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 40px; } .shot { margin: 0; } /* The gallery shows whole screens rather than a consistent card: a dialog capture is often portrait, and a 16:10 crop would cut the half that matters. Heights therefore vary a lot, so these columns pack rather than align — a grid row would be as tall as its tallest shot and leave a hole beside every short one. */ .shots.natural { display: block; columns: 2; column-gap: 40px; } .shots.natural .shot { break-inside: avoid; margin-bottom: 40px; } /* A section with one screenshot in it gets the full width. Half a two-column pack, with the other half empty, reads as an image that failed to load. */ .shots.natural.solo { columns: 1; } .shots.natural .shot-frame { aspect-ratio: auto; } .shots.natural .shot-frame img { height: auto; } /* The frame does the cropping: the captures run to the bottom of the viewport and the last card is often followed by empty canvas. Anchoring to the top keeps the headline figures — the part worth seeing — and drops the slack. */ .shot-frame { position: relative; overflow: hidden; /* It is a button now: strip the control chrome, keep the affordance. */ display: block; width: 100%; padding: 0; cursor: zoom-in; text-align: left; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: 0 18px 40px -28px rgba(8, 19, 29, .5); } .shot-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; } /* Light is the default; the dark plate is the one that gets revealed. */ .shot-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shot-light { display: none; } :root:not([data-theme="light"]) .shot-dark { display: block; } } :root[data-theme="dark"] .shot-light { display: none; } :root[data-theme="dark"] .shot-dark { display: block; } :root[data-theme="light"] .shot-light { display: block; } :root[data-theme="light"] .shot-dark { display: none; } .shot-frame:hover { border-color: var(--signal); } /* The crop is the reason to enlarge, so say so rather than relying on the cursor. */ .shot-zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-bg); color: var(--fg-2); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .2s var(--ease), transform .2s var(--ease); } .shot-frame:hover .shot-zoom, .shot-frame:focus-visible .shot-zoom { opacity: 1; transform: none; } /* Touch has no hover, and a control nobody can see is a control nobody uses. */ @media (hover: none) { .shot-zoom { opacity: 1; transform: none; } } /* Lightbox --------------------------------------------------------------- */ .lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: clamp(16px, 4vw, 56px); border: 0; background: transparent; overflow: auto; /* The dialog fills the viewport so a click that misses the picture lands on the dialog itself, which is what the close handler listens for. */ display: grid; place-items: center; } .lightbox::backdrop { background: rgba(3, 6, 12, .82); backdrop-filter: blur(3px); } .lightbox:not([open]) { display: none; } .lightbox img { display: block; /* Sized against the viewport rather than the dialog: a percentage max-height on a centred grid item resolves against an auto-sized track and lets the picture run off the bottom of the screen. */ max-width: calc(100vw - 2 * clamp(16px, 4vw, 56px)); max-height: calc(100dvh - 2 * clamp(16px, 4vw, 56px)); width: auto; height: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); } .lightbox-close { position: fixed; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-bg); color: var(--fg); cursor: pointer; } .lightbox-close:hover { border-color: var(--signal); color: var(--signal); } /* On a phone, fitting a 1600px-wide dashboard to a 390px screen is not a zoom — it lands within a few pixels of the card it was opened from. Render it big enough to read and let the dialog pan instead. */ @media (max-width: 780px) { .lightbox { place-items: start; padding: 16px; } .lightbox img { max-width: none; max-height: none; width: 240vw; } } .shot figcaption { margin-top: 20px; font-size: .95rem; line-height: 1.65; color: var(--mut); } .shot figcaption b { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); } /* KPI rows --------------------------------------------------------------- The theme the hero console opens with, restated in words at three points down the page: the payoff under the outcomes, the recovered money under the proof quotes, and the cost of switching under the rollout steps. Figure, what it is, then the qualifier that keeps it honest — same three parts every time. */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px 40px; margin: 52px 0 0; padding-top: 36px; border-top: 1px solid var(--line); } .kpi dt { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--signal); font-variant-numeric: tabular-nums; } .kpi dd { margin: 12px 0 0; font-size: .98rem; font-weight: 600; color: var(--fg); } /* The qualifier. Every figure on this page is a range or a typical case, and the line that says so belongs with the number, not in a footnote. */ .kpi dd span { display: block; margin-top: 6px; font-size: .87rem; font-weight: 400; line-height: 1.55; color: var(--mut); } /* In the demo column the row shares a narrow measure with the form beside it. */ .kpi-row.compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 28px; margin-top: 40px; padding-top: 30px; } .kpi-row.compact dt { font-size: 1.9rem; } .kpi-row.compact dd { font-size: .92rem; } .kpi-row.compact dd span { font-size: .82rem; } /* A KPI row and a role-note block are both closers for their section; when they stack, the second does not need to restate the rule above it. */ .kpi-row + .role-notes { margin-top: 40px; } /* Role notes ------------------------------------------------------------ The seven groups a hospital buys for do not read the same section. Rather than stack them in one grid, each gets a note beside the problem it owns: surgeons and clinicians under the outcomes, owners and finance under the price, compliance under the security question. Same component every time, so the reader learns to spot their own line. */ .role-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px 40px; margin-top: 48px; } /* A lone note should not stretch to the full measure — long lines are what the two-up case avoids for free. */ .role-notes:has(> .role-note:only-child) { grid-template-columns: minmax(0, 62ch); } .role-note { /* Two-up, the tracks run to ~73ch — past comfortable reading. Cap the measure and let the grid take up the slack. */ max-width: 62ch; padding-left: 20px; border-left: 2px solid var(--signal); } .role-note b { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); } .role-note p { margin: 0; color: var(--mut); font-size: .95rem; line-height: 1.7; } /* The demo column is already narrow; the note there sits under the steps. */ .demo-copy .role-notes { margin-top: 40px; } /* Hero role rail --------------------------------------------------------- */ .role-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; } .role-rail-lead { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin-right: 4px; } .role-rail b { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-bg); color: var(--fg-2); font-size: .78rem; font-weight: 500; white-space: nowrap; } /* Risk reversal strip ---------------------------------------------------- */ .risk-reversal { display: flex; align-items: flex-start; gap: 14px; margin-top: 40px; padding: 20px 24px; background: rgba(var(--signal-rgb), .08); border: 1px solid var(--signal-dim); border-radius: var(--radius); } .risk-reversal svg { flex: none; color: var(--signal); width: 20px; height: 20px; margin-top: 2px; } .risk-reversal p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--fg-2); } /* CTA options (low-commitment CTAs) --------------------------------------- */ .cta-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 40px; padding: 32px; background: var(--raise); border-radius: var(--radius-lg); } .cta-primary, .cta-low-commitment, .cta-urgent { text-align: center; } .cta-options h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--fg); } .cta-options > div > p:first-of-type { color: var(--mut); font-size: .9rem; margin: 0 0 14px; } .cta-low-commitment ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .cta-urgent .contact-info { font-size: 1rem; line-height: 1.6; margin: 0; } .link-subtle { color: var(--signal); text-decoration: none; font-weight: 500; } .link-subtle:hover { text-decoration: underline; } /* Closing band ------------------------------------------------------------ */ .close-band { background: linear-gradient(135deg, var(--panel-2) 0%, var(--panel) 100%); padding: 80px 0; position: relative; overflow: hidden; } .close-band-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .close-band-copy { text-align: left; } .close-band-copy h2 { font-size: 2.2rem; line-height: 1.2; margin: 0 0 28px; color: var(--fg); } .close-band-img { position: relative; border-radius: var(--radius-lg); overflow: hidden; height: 300px; } .close-band-img img { width: 100%; height: 100%; object-fit: cover; opacity: .9; } .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ========================================================================== Responsive ========================================================================== */ /* The rail needs a gutter of its own outside the 1200px shell; below this it would sit on top of the content. */ @media (max-width: 1420px) { .rail { display: none; } } @media (max-width: 1040px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-bottom: 72px; } .thesis-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; } .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } .orbit { max-width: 460px; margin-inline: auto; } .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fc-2 { left: 2%; } } /* The header collapses at the width its links stop fitting — one number, so there is no band of viewports with neither the inline links nor the toggle. */ @media (max-width: 900px) { .nav-toggle { display: inline-flex; } /* One panel holding both halves, rather than two separately-positioned boxes. */ .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; /* Fully opaque, not the translucent nav fill: this panel covers page content, and the hero headline showed through the nav's own backdrop blur. */ background: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px -28px var(--shadow-2); } .nav-menu.open { display: flex; } .nav-links { flex-direction: column; align-items: stretch; gap: 0; } .nav-links a { padding: 15px 24px; border-radius: 0; border-bottom: 1px solid var(--line-soft); } .nav-cta { padding: 16px 24px; } .nav-cta .btn { width: 100%; } } @media (max-width: 780px) { :root { --gutter: 20px; } .section { padding: 76px 0; } .section-head { margin-bottom: 40px; } /* minmax(0, 1fr) rather than a bare 1fr: the auto floor lets a wide child (the console tiles, a long table row) push the column past the viewport. */ .bento, .grid-3, .tiers, .timeline { grid-template-columns: minmax(0, 1fr); } .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; } .ticks.two { grid-template-columns: minmax(0, 1fr); } .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; } .hero { padding-top: 56px; } .hero-stats { gap: 18px 28px; } .float-chip { display: none; } .card { padding: 26px 22px; } } @media (max-width: 520px) { body { font-size: 16px; } .tiles { grid-template-columns: minmax(0, 1fr); } .f2 { grid-template-columns: minmax(0, 1fr); } .hero-actions .btn { width: 100%; } .counters { grid-template-columns: minmax(0, 1fr); } .foot-grid { grid-template-columns: minmax(0, 1fr); } .hero-stats { flex-direction: column; align-items: flex-start; } } /* ========================================================================== Reduced motion — every animated affordance on the page, not just the first few ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .live, .float-chip, .ticker-run { animation: none; } .price b.flash { animation: none; } .card:hover, .ptier:hover, .btn:hover { transform: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ========================================================================== Theme toggle ========================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--fg-2); cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); } .theme-toggle:hover { color: var(--signal); border-color: var(--signal-dim); background: rgba(var(--signal-rgb), .07); } .nav-cta { display: flex; align-items: center; gap: 10px; } /* Show the icon for the theme the button would switch *to*, so it reads as an action. Both states are defined at token level; only the display flips. */ .ico-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ico-sun { display: none; } :root:not([data-theme="light"]) .ico-moon { display: block; } } :root[data-theme="dark"] .ico-sun { display: none; } :root[data-theme="dark"] .ico-moon { display: block; } :root[data-theme="light"] .ico-sun { display: block; } :root[data-theme="light"] .ico-moon { display: none; } /* SVG gradient stops are themed here rather than being frozen into the markup. */ .g-from { stop-color: var(--signal); stop-opacity: .34; } .g-to { stop-color: var(--signal); stop-opacity: 0; } #coreGlow .g-from { stop-opacity: .28; } /* On the light ground the console needs a real edge rather than a glow to sit on. */ .console-frame { border-color: var(--line); } /* ========================================================================== Photography ========================================================================== */ .hero-shot { position: relative; margin: 0; } .hero-shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--line); /* The photograph sits on the same dark ground as everything else; a slight desaturation keeps it from fighting the teal accent. */ filter: saturate(.92); box-shadow: 0 40px 90px -44px var(--shadow-2); } /* A real figure from the demonstration database, laid over the photograph so the first thing a visitor sees is people *and* the product. */ .shot-card { position: absolute; right: -10px; bottom: -22px; display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--chip-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 50px -26px var(--shadow-2); } .shot-row { display: flex; align-items: baseline; gap: 7px; } .shot-row b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--signal); font-variant-numeric: tabular-nums; line-height: 1; } .shot-row i { font-style: normal; font-size: .78rem; color: var(--mut); } .shot-foot { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding-top: 8px; border-top: 1px solid var(--line-soft); } /* ========================================================================== Outcomes — a before/after per card. The contrast between the two states is what does the communicating, so the photograph is reduced to a small header band: enough to set a scene, not enough to crowd out the argument. ========================================================================== */ .switches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .switch-card { display: flex; flex-direction: column; padding: 28px 26px 30px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel-2), var(--panel)); transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .switch-card:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: 0 26px 60px -34px var(--shadow); } /* Each mark draws the card's own idea: four things becoming one, two sides agreeing, a trail of changes with one of them picked out. */ .mark { display: block; width: 96px; height: 44px; margin-bottom: 22px; flex: none; } .mark .m-line { stroke: var(--line); stroke-width: 1.5; fill: none; stroke-linecap: round; } /* The baseline a trail is read against needs more presence than a connector line. */ .mark .m-axis { stroke: var(--mut); stroke-width: 1.5; fill: none; stroke-linecap: round; } .mark .m-box { fill: none; stroke: var(--mut); stroke-width: 1.5; } .mark .m-dot { fill: var(--mut); } .mark .m-fill { fill: var(--signal); } .mark .m-check { fill: none; stroke: var(--signal-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .switch-body { display: grid; gap: 10px; align-content: start; } /* The complaint, in the reader's words and set as the biggest thing on the card. It is short on purpose: recognition has to land in about a second, or it becomes the chore the reader scrolls past. */ .pain { font-size: 1.24rem; font-weight: 700; line-height: 1.25; } /* The answer, separated from the complaint by a rule and introduced by an accent label — so the eye can jump straight to it without reading the pain twice. */ .fix { margin-top: 6px; padding-top: 15px; border-top: 1px dashed var(--line); color: var(--fg-2); font-size: .93rem; } .fix span { display: block; margin-bottom: 7px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--signal); } /* ========================================================================== Pricing calculator ========================================================================== */ .calc { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 40px; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel-2), var(--panel)); } .calc-input { display: grid; gap: 12px; } .calc-input label { font-size: .9rem; font-weight: 600; color: var(--fg); } .calc-input input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--line); cursor: pointer; } .calc-input input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--signal); border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--signal-dim), 0 4px 12px -2px rgba(var(--signal-rgb), .5); cursor: pointer; } .calc-input input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--signal); border: 3px solid var(--panel); cursor: pointer; } .calc-beds { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; color: var(--mut); font-variant-numeric: tabular-nums; } .calc-out { text-align: right; border-left: 1px solid var(--line-soft); padding-left: 32px; } .calc-tier { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); margin-bottom: 4px; } .calc-price { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; } .calc-price b { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--fg); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; } .calc-price span { font-size: .82rem; color: var(--mut); } .calc-note { margin-top: 8px; font-size: .78rem; color: var(--faint); font-variant-numeric: tabular-nums; } .tiers.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ========================================================================== Sub-pages: page head, tables, end cap, fill-me blocks ========================================================================== */ .pagehead { padding-top: 116px; padding-bottom: 68px; } .pagehead h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); } .pagehead .lead { max-width: 62ch; } .crumb { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 20px; } .crumb a { color: var(--mut); } .crumb a:hover { color: var(--signal); } .crumb span { margin: 0 8px; } .endcap { text-align: center; } .endcap .section-lead { margin-inline: auto; margin-bottom: 30px; } .metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 28px 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel-2), var(--panel)); } .metrics dt { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--signal); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .metrics dd { margin: 8px 0 0; font-size: .8rem; color: var(--mut); line-height: 1.45; } .table-wrap { overflow-x: auto; } .deck-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; } .deck-table caption { text-align: left; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding-bottom: 14px; } .deck-table th, .deck-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); } .deck-table th { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 500; } .deck-table td { color: var(--fg-2); } .deck-table td:last-child { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; } .deck-table tbody tr:hover { background: var(--raise); } /* Blocks that are deliberately unfinished: they hold the questions only the founder can answer, and they are styled to be impossible to ship by accident. */ .fillme { margin-top: 36px; padding: 26px 30px; border: 1px dashed var(--warm); border-radius: var(--radius); background: rgba(var(--warm-rgb), .05); } .fillme h3 { color: var(--warm); margin-bottom: 12px; } .fillme p { color: var(--fg-2); font-size: .94rem; max-width: 72ch; } .fillme .ticks { margin-top: 16px; } .fillme .ticks li::before { border-color: var(--warm); } .fillme-warn { margin-top: 18px; font-size: .84rem; color: var(--warm); } .fillme code { font-family: var(--font-mono); font-size: .85em; padding: 1px 6px; border-radius: 5px; background: var(--raise-2); } p.todo { border-left: 2px dashed var(--warm); padding-left: 14px; color: var(--warm); } /* ========================================================================== Responsive additions ========================================================================== */ @media (max-width: 1040px) { .switches { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiers.three { grid-template-columns: minmax(0, 1fr); } .calc { grid-template-columns: minmax(0, 1fr); gap: 26px; } .calc-out { text-align: left; border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: 22px; } .calc-price { justify-content: flex-start; } .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .proof-grid { grid-template-columns: minmax(0, 1fr); } .close-band-inner { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 780px) { /* The scrim runs left-to-right on wide screens, where the copy and the console sit side by side. Stacked, that hides the photograph completely — so it becomes vertical instead, heaviest behind the headline and clearing toward the console below it. */ .hero-veil { background: linear-gradient(180deg, transparent 72%, var(--ink) 100%), linear-gradient(180deg, var(--ink) 6%, color-mix(in srgb, var(--ink) 86%, transparent) 42%, color-mix(in srgb, var(--ink) 62%, transparent) 100%); } .hero-bg img { object-position: 62% 30%; } .shot-card { right: 12px; bottom: -18px; padding: 13px 15px; } .shot-row b { font-size: 1.25rem; } .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px 22px; } .switches { grid-template-columns: minmax(0, 1fr); } .pagehead { padding-top: 96px; } .role-notes { grid-template-columns: minmax(0, 1fr); gap: 26px; } /* Two-up leaves the third figure orphaned on its own row; one column reads better and matches the other KPI rows on the same screen. */ .kpi-row, .kpi-row.compact { grid-template-columns: minmax(0, 1fr); gap: 26px; } .shots { grid-template-columns: minmax(0, 1fr); gap: 34px; } .shots.natural { columns: 1; } .shots.natural .shot { margin-bottom: 34px; } .cta-options { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; } .close-band { padding: 60px 0; } .close-band-copy h2 { font-size: 1.8rem; margin-bottom: 22px; } .close-band-img { height: 220px; } }