/* ============================================================ SITE — Living Systems marketing site Page-level styles shared by index.html (the 14-section page), the shared nav/footer, the brand book, and the thank-you page. Tokens live in tokens.css; component primitives in components.css. ============================================================ */ /* Guard against horizontal overflow on small viewports (full-bleed ticker, etc.). On (not ) so the sticky nav's scroll container is unaffected. */ html { overflow-x: hidden; } body { background: var(--paper); max-width: 100%; } /* Skip link — keyboard accessibility */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .skip-link:focus { left: 8px; top: 8px; } /* Universal visible focus — the chartreuse halo, bound to every interactive element */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(199, 242, 63, 0.4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== TOP NAV (shared partial) ===== */ .site-nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); background: rgba(241, 236, 224, 0.88); border-bottom: 1px solid var(--bone-deep); } .site-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .site-nav .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .site-nav .brand .mark { width: 36px; height: 36px; } .site-nav .brand-name { font-family: var(--font-serif); font-size: 26px; letter-spacing: -0.01em; } .site-nav .links { display: flex; gap: 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .site-nav .links a { text-decoration: none; color: var(--carbon); padding: 4px 0; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; white-space: nowrap; } .site-nav .links a:hover { color: var(--ink); border-bottom-color: var(--ink); } .site-nav .links a.active { color: var(--ink); border-bottom-color: var(--ink); } .site-nav .actions { display: flex; gap: 10px; align-items: center; } .site-nav .brand-cluster { display: flex; align-items: center; gap: 16px; } /* version badge — OpenMed-style */ .ver-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); border: 1px solid var(--bone-deep); padding: 5px 10px; border-radius: 999px; background: var(--paper-soft); white-space: nowrap; } .ver-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(199,242,63,0.25); } /* Mobile nav toggle — hidden on desktop */ .nav-toggle { display: none; background: transparent; border: 1px solid var(--bone-deep); width: 40px; height: 36px; cursor: pointer; border-radius: var(--r-1); align-items: center; justify-content: center; gap: 4px; flex-direction: column; padding: 0; } .nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); } /* HERO — OpenMed layout: copy left, live widget right */ .hero { padding: 72px 0 56px; position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.02fr 1.05fr; gap: 56px; align-items: center; } .hero-eyebrow-pill { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--carbon); border: 1px solid var(--bone-deep); background: var(--paper-soft); padding: 7px 14px; border-radius: 999px; } .hero-eyebrow-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(199,242,63,0.25); } .hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(60px, 6.4vw, 104px); line-height: 0.92; letter-spacing: -0.04em; margin: 28px 0 0; } .hero h1 em { font-style: italic; color: var(--carbon); display: block; } .hero .lede { font-size: 18px; line-height: 1.55; color: var(--carbon); max-width: 46ch; margin: 28px 0 32px; } .hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .hero-trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--bone-deep); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); } .hero-trust span { display: inline-flex; align-items: center; gap: 10px; } .hero-trust span:not(:last-child)::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--bone-deep); margin-left: 10px; } /* HERO DASHBOARD WIDGET — "Today's exchange" */ .hero-dash { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 28px 30px 26px; box-shadow: var(--shadow-3); position: relative; } .hero-dash .hd-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; } .hero-dash .hd-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-soft); } .hero-dash .hd-title { font-family: var(--font-serif); font-size: 32px; line-height: 1.05; margin-top: 6px; } .hero-dash .hd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; padding-bottom: 24px; border-bottom: 1px solid #28323D; } .hero-dash .hd-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-soft); } .hero-dash .hd-v { font-family: var(--font-serif); font-size: 40px; line-height: 1; margin-top: 8px; } .hero-dash .hd-v span { color: var(--slate-soft); font-size: 18px; } .hero-dash .hd-d { font-family: var(--font-mono); font-size: 10px; margin-top: 6px; letter-spacing: 0.04em; } .hero-dash .hd-d.up { color: var(--signal); } .hero-dash .hd-d.mut { color: var(--slate-soft); } .hero-dash .hd-feed { margin-top: 22px; display: flex; flex-direction: column; gap: 11px; font-family: var(--font-mono); font-size: 11px; } .hero-dash .hd-ev { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; } .hero-dash .hd-ev .ts { color: var(--slate-soft); } .hero-dash .hd-ev .amt { color: var(--paper); } .hero-dash .hd-spark { display: flex; align-items: flex-end; gap: 3px; height: 40px; margin-top: 4px; } .hero-dash .hd-spark > i { flex: 1; background: #28323D; display: block; } .hero-dash .hd-spark > i.now { background: var(--signal); } /* STAT BAND — OpenMed full-width number row */ .statband { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); } .statband-inner { display: grid; grid-template-columns: repeat(6, 1fr); } .statband .cell { padding: 36px 24px; border-right: 1px solid var(--bone-deep); display: flex; flex-direction: column; gap: 8px; } .statband .cell:last-child { border-right: 0; } .statband .cell .n { font-family: var(--font-serif); font-size: clamp(40px, 4vw, 56px); line-height: 0.95; letter-spacing: -0.03em; } .statband .cell .n span { color: var(--carbon); font-size: 0.5em; } .statband .cell .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); } /* TICKER */ .ticker { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); overflow: hidden; padding: 18px 0; } .ticker-track { display: flex; gap: 56px; animation: tickerScroll 50s linear infinite; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; will-change: transform; } .ticker-item { display: inline-flex; align-items: center; gap: 14px; color: var(--carbon); } .ticker-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(199,242,63,0.25); } .ticker-item.idle::before { background: var(--slate-soft); box-shadow: none; } .ticker-item.warn::before { background: var(--pulse); box-shadow: 0 0 0 3px rgba(232,93,47,0.18); } .ticker-item .ds { color: var(--ink); } .ticker-item .pr { color: var(--slate); } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* SECTION SHELL */ .sec { padding: 120px 0; position: relative; } .sec-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; margin-bottom: 64px; align-items: end; } .sec-head h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(48px, 6vw, 88px); line-height: 0.95; letter-spacing: -0.03em; margin: 16px 0 0; } .sec-head h2 em { font-style: italic; color: var(--carbon); } .sec-head .lede { font-size: 17px; line-height: 1.55; color: var(--carbon); max-width: 56ch; margin: 0; } /* HOW IT WORKS */ .flow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; position: relative; } .flow-step { background: var(--paper-soft); border: 1px solid var(--bone-deep); padding: 32px; display: flex; flex-direction: column; gap: 16px; min-height: 360px; position: relative; } .flow-step .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--slate); } .flow-step h3 { font-family: var(--font-serif); font-size: 36px; letter-spacing: -0.02em; line-height: 1.05; margin: 0; font-weight: 400; } .flow-step h3 em { font-style: italic; color: var(--carbon); } .flow-step .body { font-size: 14px; line-height: 1.6; color: var(--carbon); } .flow-step .footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--bone-deep); display: flex; justify-content: space-between; align-items: center; } .flow-step .footer .mono { font-size: 11px; color: var(--slate); } /* SPLIT — Producers vs Consumers */ .split { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); } .split-half { padding: 56px 48px; display: flex; flex-direction: column; gap: 24px; min-height: 520px; } .split-half + .split-half { border-left: 1px solid var(--ink); } .split-half.ink { background: var(--ink); color: var(--paper); } .split-half h3 { font-family: var(--font-serif); font-size: 56px; line-height: 1; letter-spacing: -0.025em; margin: 16px 0 0; font-weight: 400; } .split-half h3 em { font-style: italic; color: var(--carbon); } .split-half.ink h3 em { color: var(--slate-soft); } .split-half .features { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .split-half .feature { display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--bone-deep); } .split-half.ink .feature { border-top-color: #28323D; } .split-half .feature:last-child { border-bottom: 1px solid var(--bone-deep); } .split-half.ink .feature:last-child { border-bottom-color: #28323D; } .split-half .feature .ic { width: 24px; height: 24px; } .split-half .feature .t { font-size: 14px; line-height: 1.5; } .split-half .feature .t strong { font-weight: 500; } .split-half .feature .t span { display: block; color: var(--carbon); font-size: 13px; margin-top: 2px; } .split-half.ink .feature .t span { color: var(--slate-soft); } /* DATASETS GRID */ .datasets-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .dataset-tile { border: 1px solid var(--bone-deep); background: var(--paper-soft); padding: 24px; display: flex; flex-direction: column; gap: 14px; min-height: 280px; transition: border-color .15s, background .15s; } .dataset-tile:hover { border-color: var(--ink); background: var(--paper); } .dataset-tile .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .dataset-tile .producer { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); } .dataset-tile h4 { font-family: var(--font-serif); font-weight: 400; font-size: 24px; letter-spacing: -0.01em; line-height: 1.1; margin: 0; } .dataset-tile h4 em { font-style: italic; color: var(--carbon); } .dataset-tile .desc { font-size: 13px; color: var(--carbon); line-height: 1.5; flex: 1; } .dataset-tile .meta { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--bone-deep); font-family: var(--font-mono); font-size: 11px; color: var(--slate); } .dataset-tile .meta strong { color: var(--ink); font-weight: 500; } /* SECURITY */ .security { background: var(--ink); color: var(--paper); padding: 120px 0; } .security .sec-head h2 em { color: var(--slate-soft); } .security .sec-head .lede { color: var(--bone); } .sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .sec-card { border: 1px solid #28323D; padding: 28px; display: flex; flex-direction: column; gap: 14px; } .sec-card .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--signal); } .sec-card h4 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; letter-spacing: -0.015em; line-height: 1.1; margin: 0; } .sec-card p { font-size: 14px; line-height: 1.55; color: var(--bone); margin: 0; } .sec-card .footer { margin-top: auto; padding-top: 14px; border-top: 1px solid #28323D; font-family: var(--font-mono); font-size: 11px; color: var(--slate-soft); display: flex; justify-content: space-between; } .compliance-row { display: flex; gap: 48px; justify-content: center; margin-top: 72px; padding-top: 32px; border-top: 1px solid #28323D; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-soft); flex-wrap: wrap; } .compliance-row span { display: flex; align-items: center; gap: 10px; } .compliance-row span::before { content: ""; width: 6px; height: 6px; background: var(--signal); border-radius: 50%; } /* PRICING */ .pricing { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--ink); } .tier { padding: 48px 36px; display: flex; flex-direction: column; gap: 20px; position: relative; } .tier + .tier { border-left: 1px solid var(--ink); } .tier.featured { background: var(--paper-soft); } .tier .name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); } .tier .price { font-family: var(--font-serif); font-size: 72px; line-height: 0.95; letter-spacing: -0.03em; } .tier .price span { font-size: 18px; color: var(--carbon); margin-left: 4px; font-family: var(--font-sans); letter-spacing: 0; } .tier .desc { font-size: 14px; line-height: 1.55; color: var(--carbon); } .tier ul { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; } .tier li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--bone-deep); } .tier li::before { content: "+"; font-family: var(--font-mono); color: var(--signal-deep); font-weight: 500; } .tier .cta { margin-top: auto; padding-top: 12px; } .tier-badge { position: absolute; top: 16px; right: 16px; } /* SDK / CODE SECTION */ .sdk { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; } .sdk-tabs { display: flex; gap: 0; margin-bottom: 0; background: #28323D; padding: 4px 4px 0; } .sdk-tab { padding: 10px 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-soft); cursor: pointer; border: none; background: transparent; } .sdk-tab.active { background: var(--ink); color: var(--paper); } .sdk-code { background: var(--ink); color: var(--paper); padding: 28px 32px; font-family: var(--font-mono); font-size: 13px; line-height: 1.75; overflow-x: auto; margin: 0; } /* CTA */ .cta { padding: 160px 0; text-align: center; position: relative; overflow: hidden; } .cta .strand-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.08; pointer-events: none; } .cta .strand-bg > div { width: 500px; } .cta h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(64px, 9vw, 144px); line-height: 0.92; letter-spacing: -0.04em; margin: 0; max-width: 18ch; margin-left: auto; margin-right: auto; position: relative; } .cta h2 em { font-style: italic; color: var(--carbon); } .cta .actions { display: flex; gap: 12px; justify-content: center; margin-top: 48px; position: relative; flex-wrap: wrap; } /* FOOTER (ink — shared partial) */ footer.site-foot { background: var(--ink); color: var(--paper); padding: 80px 0 40px; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; } .foot-col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); margin: 0 0 20px; font-weight: 500; } .foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .foot-col li a { text-decoration: none; color: var(--bone); font-size: 14px; } .foot-col li a:hover { color: var(--paper); } .foot-brand .brand-name { font-family: var(--font-serif); font-size: 56px; letter-spacing: -0.02em; line-height: 1; } .foot-brand p { color: var(--bone); font-size: 14px; line-height: 1.55; max-width: 36ch; margin: 16px 0 0; } .foot-bot { border-top: 1px solid #28323D; padding-top: 24px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-soft); gap: 16px; flex-wrap: wrap; } /* ===================== PROBLEM (before / after) ===================== */ .problem { background: var(--paper); } .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; } .panel { border: 1px solid var(--bone-deep); background: var(--paper-soft); overflow: hidden; } .panel.after { border-color: var(--ink); } .panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--bone-deep); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; } .panel.after .panel-head { border-bottom-color: var(--ink); } .panel-head .pdot { width: 7px; height: 7px; border-radius: 50%; } .panel-head.bad { color: var(--error); } .panel-head.bad .pdot { background: var(--error); } .panel-head.good { color: var(--ok); } .panel-head.good .pdot { background: var(--signal); box-shadow: 0 0 0 3px rgba(199,242,63,0.25); } .term { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.95; padding: 22px; overflow-x: auto; background: var(--ink); color: var(--bone); } .term .dim { color: var(--slate-soft); } .term .red { color: #FF9B82; } .term .grn { color: var(--signal); } .term .tl { color: var(--signal); } .term .bl { color: #9AC8FF; } .panel-foot { padding: 16px 20px; border-top: 1px solid var(--bone-deep); font-size: 14px; color: var(--carbon); } .panel.after .panel-foot { border-top-color: var(--ink); } .panel-foot b { color: var(--ink); font-weight: 600; } .problem-kicker { margin-top: 28px; font-size: 15px; color: var(--slate); } .problem-kicker b { color: var(--ink); font-weight: 600; } /* ===================== FAN-OUT FLOW ===================== */ .flow-wrap { margin: 0 0 48px; border: 1px solid var(--bone-deep); background: var(--paper-soft); padding: 36px 20px; overflow-x: auto; } .flow-svg { min-width: 760px; margin: 0 auto; display: block; } .flow-line { stroke-dasharray: 5 8; animation: flowdash 1.3s linear infinite; } @keyframes flowdash { to { stroke-dashoffset: -26; } } /* ===================== AGENT GOVERNANCE ===================== */ .agents { background: var(--ink); color: var(--paper); } .agents .sec-head h2 { color: var(--paper); } .agents .sec-head h2 em { color: var(--slate-soft); } .agents .sec-head .lede { color: var(--bone); } .agents-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; } .gov-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .gov-list li { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #28323D; padding: 14px 16px; background: rgba(255,255,255,0.02); font-size: 13.5px; color: var(--bone); line-height: 1.5; } .gov-list li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; stroke: var(--signal); } .gov-list li b { color: var(--paper); font-weight: 600; } .agents-kicker { margin-top: 28px; font-size: 14px; color: var(--slate-soft); border-left: 2px solid var(--signal); padding-left: 16px; line-height: 1.6; } .agents-kicker b { color: var(--bone); font-weight: 600; } /* credential card */ .agent-card { border: 1px solid #28323D; background: #0a131c; position: sticky; top: 100px; } .agent-card-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #28323D; } .agent-card-head .aid { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--paper); } .agent-card-head .aid small { display: block; font-weight: 400; font-size: 10.5px; color: var(--slate-soft); margin-top: 3px; letter-spacing: 0.04em; } .agent-card-body { padding: 20px 22px; font-family: var(--font-mono); font-size: 12.5px; line-height: 2.1; color: var(--bone); } .agent-card-body .k { color: var(--slate-soft); } .agent-card-body .scope { display: inline-block; background: rgba(199,242,63,0.12); color: var(--signal); padding: 1px 9px; margin-right: 6px; font-size: 11.5px; } .kill-row { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #28323D; padding: 16px 22px; } .kill-row span { font-size: 13px; color: var(--bone); font-weight: 500; } .kill-switch { width: 46px; height: 25px; border-radius: 99px; background: rgba(199,242,63,0.2); border: 1px solid var(--signal-deep); position: relative; } .kill-switch::after { content: ""; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; border-radius: 50%; background: var(--signal); } .audit-line { border-top: 1px solid #28323D; padding: 14px 22px; font-family: var(--font-mono); font-size: 10.5px; color: var(--slate-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .audit-line b { color: var(--signal); font-weight: 500; } /* ===================== CASE STUDY ===================== */ .case { border: 1px solid var(--ink); padding: 40px 44px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; background: var(--paper-soft); } .case h3 { font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; margin: 12px 0 16px; } .case h3 em { font-style: italic; color: var(--carbon); } .case p { font-size: 15px; line-height: 1.6; color: var(--carbon); margin: 0; } .case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .case-stats .n { font-family: var(--font-serif); font-size: 48px; line-height: 1; letter-spacing: -0.03em; } .case-stats .n span { color: var(--carbon); font-size: 0.5em; } .case-stats .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-top: 8px; } /* ===================== CONTACT FORM (restyled — exact behavioral regression) ===================== */ .contact { background: var(--paper); } .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; } .contact-copy h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(48px, 6vw, 88px); line-height: 0.95; letter-spacing: -0.03em; margin: 16px 0 0; } .contact-copy h2 em { font-style: italic; color: var(--carbon); } .contact-copy .lede { font-size: 17px; line-height: 1.55; color: var(--carbon); max-width: 48ch; margin: 24px 0 0; } .contact-copy .trust { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--bone-deep); display: flex; flex-direction: column; gap: 14px; } .contact-copy .trust .row { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; } .contact-copy .trust .ic { width: 22px; height: 22px; } .contact-copy .trust .t { font-size: 14px; line-height: 1.5; } .contact-copy .trust .t strong { font-weight: 500; } .contact-copy .trust .t span { display: block; color: var(--carbon); font-size: 13px; margin-top: 2px; } .contact-form { border: 1px solid var(--ink); background: var(--paper-soft); padding: 40px; display: flex; flex-direction: column; gap: 20px; } .contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .contact-form .form-group { display: flex; flex-direction: column; gap: 6px; } .contact-form .form-group label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); } .contact-form .form-group input, .contact-form .form-group textarea, .contact-form .form-group select { font-family: var(--font-sans); font-size: 14px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--bone-deep); color: var(--ink); border-radius: var(--r-1); transition: border-color .15s ease; width: 100%; } .contact-form .form-group textarea { resize: vertical; min-height: 96px; } .contact-form .form-group input::placeholder, .contact-form .form-group textarea::placeholder { color: var(--slate-soft); } .contact-form .form-group input:focus, .contact-form .form-group textarea:focus, .contact-form .form-group select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(199,242,63,0.4); } .contact-form .form-group select option { background: var(--paper); color: var(--ink); } .contact-submit { width: 100%; justify-content: center; } .contact-submit:disabled { opacity: 0.55; cursor: not-allowed; } #contactMessages:empty { display: none; } #contactMessages .success-message { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; border: 1px solid var(--ok); border-left-width: 3px; background: rgba(47,122,85,0.08); color: var(--ink); padding: 12px 14px; border-radius: var(--r-1); } #contactMessages .error-message { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; border: 1px solid var(--error); border-left-width: 3px; background: var(--pulse-wash); color: var(--ink); padding: 12px 14px; border-radius: var(--r-1); } .cf-turnstile { min-height: 65px; } /* ===================== RESPONSIVE ===================== */ @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .statband-inner { grid-template-columns: repeat(3, 1fr); } .statband .cell:nth-child(3) { border-right: 0; } .statband .cell:nth-child(1), .statband .cell:nth-child(2), .statband .cell:nth-child(3) { border-bottom: 1px solid var(--bone-deep); } .sec { padding: 80px 0; } .sec-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; } .flow { grid-template-columns: 1fr; } .flow-step { min-height: 0; } .split { grid-template-columns: 1fr; } .split-half { min-height: 0; padding: 40px 28px; } .split-half + .split-half { border-left: 0; border-top: 1px solid var(--ink); } .datasets-grid { grid-template-columns: 1fr 1fr; } .sec-grid { grid-template-columns: 1fr; } .cmp { grid-template-columns: 1fr; } .agents-grid { grid-template-columns: 1fr; gap: 40px; } .gov-list { grid-template-columns: 1fr; } .agent-card { position: static; } .case { grid-template-columns: 1fr; gap: 32px; } .case-stats { grid-template-columns: repeat(3, 1fr); } .sdk { grid-template-columns: 1fr; gap: 40px; } .pricing { grid-template-columns: 1fr; } .tier + .tier { border-left: 0; border-top: 1px solid var(--ink); } .contact-grid { grid-template-columns: 1fr; gap: 40px; } .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; } .foot-brand { grid-column: 1 / -1; } /* Mobile nav: collapse links behind a toggle */ .nav-toggle { display: flex; } .site-nav .links { position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--bone-deep); padding: 8px var(--gutter); display: none; } .site-nav .links.open { display: flex; } .site-nav .links a { padding: 12px 0; border-bottom: 1px solid var(--bone); } .site-nav .actions .btn { padding: 6px 10px; } .ver-badge { display: none; } } @media (max-width: 620px) { .statband-inner { grid-template-columns: 1fr 1fr; } .statband .cell { border-right: 1px solid var(--bone-deep) !important; border-bottom: 1px solid var(--bone-deep); } .statband .cell:nth-child(2n) { border-right: 0 !important; } .datasets-grid { grid-template-columns: 1fr; } .case-stats { grid-template-columns: 1fr; gap: 16px; } .compliance-row { gap: 16px 24px; } .contact-form { padding: 24px; } .contact-form .form-row { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr; } .cta { padding: 96px 0; } } /* ===================== REDUCED MOTION ===================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ticker-track { animation: none; } .flow-line { animation: none; } .chip-1, .chip-2, .chip-3 { animation: none; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }