/* ============================================================
   telosyn.co coming-soon page — page styles
   Source: "Telosyn Coming Soon.dc.html" (Claude Design project
   6ac63cbd…, 2026-10-23), archived in design/2026-10-23-coming-soon-v4/.
   Static port: the design's inline styles are carried verbatim as
   generated classes (.s1…) so the page runs under style-src 'self'.
   Tokens: css/telosyn-foundation.css v2.1.0 (identical to the design
   system's tokens/*.css). Do not hand-edit the .sN rules — re-port.
   ============================================================ */

/* Product lockup face: Vortigra (MJType). Wordmarks ONLY. Licence: fonts/LICENSE-Vortigra.md. */
@font-face {
  font-family: 'Vortigra';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Vortigra-latin.woff2') format('woff2');
}

/* ---- From the design's <helmet> ---- */
html, body { margin: 0; background: var(--t-gallery); -webkit-font-smoothing: antialiased; }
a { color: var(--t-ink); text-decoration-color: var(--t-rule); text-underline-offset: 4px; transition: color var(--t-duration) var(--t-ease); }
a:hover { color: var(--t-blue); text-decoration-color: var(--t-blue); }
input::placeholder { color: var(--t-graphite); opacity: 1; }
@keyframes cs-pulse { 0% { box-shadow: 0 0 0 0 rgba(179, 38, 30, .55); } 70% { box-shadow: 0 0 0 8px rgba(179, 38, 30, 0); } 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0); } }
@media (prefers-reduced-motion: reduce) { [data-cs-pulse] { animation: none !important; } }

/* ---- Design runtime state carried into CSS ---- */
.cs-logo { width: 160px; }
@media (max-width: 599px) { .cs-logo { width: 120px; } }   /* logoW: w < 600 ? 120 : 160 */
[hidden] { display: none !important; }
/* Signup wiring (signup.js): honeypot off-screen; Turnstile only takes space when it must ask. */
.cs-trap { position: absolute; left: -5000px; }
.cs-turnstile:empty { display: none; }
.cs-msg a { color: var(--t-blue); }
.cs-submit:disabled, .cs-input:disabled { cursor: default; opacity: .6; }
.cs a:focus-visible, .cs button:focus-visible { outline: 2px solid var(--t-blue); outline-offset: 3px; }

/* ---- Design inline styles, verbatim ---- */
.cs .s1, .cs.s1 { --g: clamp(16px, 6vw, 80px); min-height: 100vh; background: var(--t-gallery); color: var(--t-ink); font-family: var(--t-font-body); font-size: var(--t-size-body); line-height: var(--t-leading-body); }
.cs .s2, .cs.s2 { display: flex; justify-content: space-between; align-items: center; gap: var(--t-space-2); min-height: 56px; padding: var(--t-space-2) var(--g); border-bottom: var(--t-rule-w) solid var(--t-rule); }
.cs .s3, .cs.s3 { display: block; height: auto; }
.cs .s4, .cs.s4 { display: flex; align-items: center; gap: var(--t-space-1); white-space: nowrap; color: #B3261E; }
.cs .s5, .cs.s5 { flex: 0 0 auto; width: 7px; height: 7px; border-radius: var(--t-radius-pill); background: #B3261E; animation: cs-pulse 1.8s ease-out infinite; }
.cs .s6, .cs.s6 { position: relative; isolation: isolate; min-height: clamp(520px, 72vh, 720px); display: flex; align-items: flex-end; border-bottom: var(--t-rule-w) solid var(--t-rule); }
.cs .s7, .cs.s7 { position: absolute; inset: 0; z-index: 0; }
.cs .s8, .cs.s8 { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs .s9, .cs.s9 { position: absolute; inset: 0; z-index: 1; background: var(--t-scrim-light); pointer-events: none; }
.cs .s10, .cs.s10 { position: relative; z-index: 2; width: 100%; box-sizing: border-box; pointer-events: none; padding: clamp(48px, 8vw, 112px) var(--g) clamp(40px, 5vw, 64px); display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.cs .s11, .cs.s11 { color: var(--t-mono-ink); }
.cs .s12, .cs.s12 { margin: 0; max-width: 20ch; font-family: var(--t-font-head-exec); font-weight: var(--t-weight-head); font-size: clamp(40px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.cs .s13, .cs.s13 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--t-space-3) var(--t-space-5); align-items: flex-end; padding-top: var(--t-space-3); border-top: var(--t-rule-w) solid var(--t-ink); }
.cs .s14, .cs.s14 { margin: 0; flex: 1 1 440px; max-width: 64ch; font-size: clamp(15.5px, 1.25vw, 17px); text-wrap: pretty; }
.cs .s15, .cs.s15 { display: flex; flex: 0 0 auto; }
.cs .s16, .cs.s16 { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; white-space: nowrap; text-decoration: none; pointer-events: auto; }
.cs .s17, .cs.s17 { overflow-x: clip; padding: clamp(48px, 7vw, 80px) var(--g); display: flex; flex-direction: column; gap: var(--t-space-4); }
.cs .s18, .cs.s18 { margin: 0; max-width: 760px; font-family: var(--t-font-head-exec); font-weight: var(--t-weight-head); font-size: clamp(21px, 2.6vw, 30px); line-height: var(--t-leading-h2); letter-spacing: var(--t-tracking-h2); text-wrap: balance; }
.cs .s19, .cs.s19 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--t-space-4); }
.cs .s20, .cs.s20 { display: flex; flex-direction: column; gap: var(--t-space-2); padding-top: var(--t-space-2); border-top: var(--t-rule-w) solid var(--t-ink); }
.cs .s21, .cs.s21 { font-family: var(--t-font-head-exec); font-size: var(--t-size-h2); line-height: 1; }
.cs .s22, .cs.s22 { margin: 0; font-family: var(--t-font-head-exec); font-weight: var(--t-weight-head); font-size: var(--t-size-h3); line-height: var(--t-leading-h3); text-wrap: balance; }
.cs .s23, .cs.s23 { margin: 0; color: var(--t-graphite); text-wrap: pretty; }
.cs .s24, .cs.s24 { margin: auto 0 0; padding-top: var(--t-space-2); border-top: var(--t-rule-w) solid var(--t-rule); font-family: var(--t-font-mono); font-size: var(--t-size-meta); letter-spacing: .04em; color: var(--t-mono-ink); }
.cs .s25, .cs.s25 { position: relative; height: 300vh; margin-bottom: calc(-1 * clamp(48px, 7vw, 80px)); }
.cs .s26, .cs.s26 { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: var(--t-space-3); border-top: var(--t-rule-w) solid var(--t-ink); }
.cs .s27, .cs.s27 { display: grid; grid-template-columns: minmax(88px, 220px) minmax(0, 1fr); gap: var(--t-space-4) var(--t-space-5); align-items: start; }
.cs .s28, .cs.s28 { position: relative; overflow: hidden; height: 1em; font-family: var(--t-font-head-exec); font-weight: var(--t-weight-head); font-size: clamp(64px, 8vw, 120px); color: var(--t-navy); font-variant-numeric: lining-nums; }
.cs .s29, .cs.s29 { position: absolute; left: 0; top: 0; line-height: 1; transform: translateY(0%); will-change: transform; }
.cs .s30, .cs.s30 { position: absolute; left: 0; top: 0; line-height: 1; transform: translateY(100%); will-change: transform; }
.cs .s31, .cs.s31 { overflow: hidden; min-width: 0; }
.cs .s32, .cs.s32 { display: flex; width: 300%; will-change: transform; }
.cs .s33, .cs.s33 { flex: 0 0 33.3333%; max-width: 33.3333%; box-sizing: border-box; padding-right: var(--t-space-5); transition: opacity 200ms var(--t-ease); }
.cs .s34, .cs.s34 { display: flex; flex-direction: column; gap: var(--t-space-2); max-width: 640px; }
.cs .s35, .cs.s35 { margin: 0; font-family: var(--t-font-head-exec); font-weight: var(--t-weight-head); font-size: clamp(21px, 2.1vw, 30px); line-height: 1.2; text-wrap: pretty; }
.cs .s36, .cs.s36 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cs .s37, .cs.s37 { margin: 0; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; text-wrap: pretty; }
.cs .s38, .cs.s38 { margin: 0; padding-top: var(--t-space-2); border-top: var(--t-rule-w) solid var(--t-rule); font-family: var(--t-font-mono); font-size: var(--t-size-meta); letter-spacing: .04em; color: var(--t-mono-ink); }
.cs .s39, .cs.s39 { display: grid; grid-template-columns: minmax(88px, 220px) minmax(0, 1fr); gap: var(--t-space-5); align-items: center; }
.cs .s40, .cs.s40 { display: flex; align-items: center; gap: var(--t-space-2); }
.cs .s41, .cs.s41 { min-width: 52px; }
.cs .s42, .cs.s42 { width: 140px; height: 2px; background: var(--t-rule); border-radius: 2px; overflow: hidden; }
.cs .s43, .cs.s43 { height: 100%; width: 0%; background: var(--t-ink); }
.cs .s44, .cs.s44 { background: var(--t-surface); border-top: var(--t-rule-w) solid var(--t-rule); border-bottom: var(--t-rule-w) solid var(--t-rule); padding: clamp(48px, 7vw, 80px) var(--g); display: flex; flex-direction: column; gap: var(--t-space-4); }
.cs .s45, .cs.s45 { display: flex; flex-direction: column; gap: var(--t-space-2); max-width: 760px; }
.cs .s46, .cs.s46 { margin: 0; font-family: var(--t-font-head-exec); font-weight: var(--t-weight-head); font-size: clamp(21px, 2.6vw, 30px); line-height: var(--t-leading-h2); letter-spacing: var(--t-tracking-h2); }
.cs .s47, .cs.s47 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--t-space-4); }
.cs .s48, .cs.s48 { display: flex; flex-direction: column; align-items: flex-start; gap: var(--t-space-2); padding-top: var(--t-space-3); border-top: var(--t-rule-w) solid var(--t-ink); }
.cs .s49, .cs.s49 { display: inline-flex; align-items: center; gap: 7.5px; min-height: 44px; text-decoration: none; }
.cs .s50, .cs.s50 { font-family: 'Vortigra', Georgia, serif; font-size: 18px; line-height: 1; color: #10141C; }
.cs .s51, .cs.s51 { margin: 0; font-family: var(--t-font-mono); font-size: var(--t-size-meta); letter-spacing: .04em; color: var(--t-mono-ink); }
.cs .s52, .cs.s52 { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-size-small); font-weight: var(--t-weight-ui); }
.cs .s53, .cs.s53 { display: inline-flex; align-items: center; gap: 6.3px; min-height: 44px; text-decoration: none; }
.cs .s54, .cs.s54 { font-family: 'Vortigra', Georgia, serif; font-size: 18px; line-height: 1; color: #0F1A2E; letter-spacing: -.01em; }
.cs .s55, .cs.s55 { color: #9E4A28; padding: 0 .04em; }
.cs .s56, .cs.s56 { margin: 0; line-height: 1.6; }
.cs .s57, .cs.s57 { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border: 1px dashed var(--t-rule); border-radius: var(--t-radius); padding: 12px 18px; }
.cs .s58, .cs.s58 { font-family: var(--t-font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-mono-ink); white-space: nowrap; }
.cs .s59, .cs.s59 { font-family: var(--t-font-mono); font-size: 12.5px; color: var(--t-ink); }
.cs .s60, .cs.s60 { padding: clamp(56px, 8vw, 112px) var(--g); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--t-space-4) clamp(32px, 6vw, 96px); align-items: stretch; }
.cs .s61, .cs.s61 { display: flex; flex-direction: column; justify-content: space-between; gap: var(--t-space-4); padding-top: var(--t-space-3); border-top: var(--t-rule-w) solid var(--t-ink); }
.cs .s62, .cs.s62 { display: flex; align-items: center; gap: var(--t-space-1); color: #B3261E; }
.cs .s63, .cs.s63 { width: 7px; height: 7px; border-radius: var(--t-radius-pill); background: #B3261E; animation: cs-pulse 1.8s ease-out infinite; }
.cs .s64, .cs.s64 { margin: 0; font-family: var(--t-font-head-exec); font-weight: var(--t-weight-head); font-size: clamp(38px, 5vw, 76px); line-height: 1.02; letter-spacing: -.025em; color: var(--t-ink); text-wrap: balance; }
.cs .s65, .cs.s65 { background: var(--t-surface); border: var(--t-rule-w) solid var(--t-rule); border-radius: var(--t-radius); padding: clamp(24px, 3.5vw, 48px); display: flex; flex-direction: column; gap: var(--t-space-3); }
.cs .s66, .cs.s66 { margin: 0; font-family: var(--t-font-head-exec); font-weight: var(--t-weight-head); font-size: var(--t-size-h3); line-height: var(--t-leading-h3); }
.cs .s67, .cs.s67 { display: contents; }
.cs .s68, .cs.s68 { display: flex; flex-direction: column; gap: var(--t-space-2); }
.cs .s69, .cs.s69 { min-height: 52px; width: 100%; box-sizing: border-box; border: 0; border-bottom: var(--t-rule-w) solid var(--t-graphite); background: transparent; padding: 0; font-family: var(--t-font-body); font-size: 16px; color: var(--t-ink); outline: none; transition: border-color var(--t-duration) var(--t-ease); }
.cs .s69:focus { border-bottom-color: var(--t-ink) !important; }
.cs .s69:focus { border-bottom-color: var(--t-ink) !important; }
.cs .s70, .cs.s70 { min-height: 52px; width: 100%; border: var(--t-rule-w) solid var(--t-ink); border-radius: var(--t-radius-pill); background: var(--t-ink); color: var(--t-gallery); font-family: var(--t-font-body); font-size: var(--t-size-body); font-weight: var(--t-weight-ui); cursor: pointer; transition: background var(--t-duration) var(--t-ease), color var(--t-duration) var(--t-ease); }
.cs .s70:hover { background: var(--t-surface) !important; color: var(--t-ink) !important; }
.cs .s71, .cs.s71 { margin: 0; min-height: 1.4em; font-size: var(--t-size-small); color: var(--t-graphite); }
.cs .s72, .cs.s72 { padding: var(--t-space-3) var(--g); border-top: var(--t-rule-w) solid var(--t-rule); display: flex; flex-direction: column; gap: var(--t-space-2); }
.cs .s73, .cs.s73 { font-style: normal; display: flex; flex-wrap: wrap; gap: 0 var(--t-space-3); }
.cs .s74, .cs.s74 { display: inline-flex; align-items: center; min-height: 44px; }
.cs .s75, .cs.s75 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--t-space-2) var(--t-space-3); align-items: baseline; }
.cs .s76, .cs.s76 { margin: 0; max-width: 760px; font-size: var(--t-size-small); color: var(--t-graphite); text-wrap: pretty; }