/* StableSend — coming-soon page styles.
   Reproduced from design-source/ComingSoon.dc.html (Claude Design artboard).
   All styling lives here so the CSP can use style-src 'self' (no inline style attributes). */

/* ---- Self-hosted fonts (IBM Plex, SIL OFL 1.1 — see fonts/LICENSE-*.txt) ---- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

/* ---- Base (verbatim from the artboard helmet) ---- */
html{background:#0B1626}
body{margin:0;background:#0B1626}
*,*::before,*::after{box-sizing:border-box}
a{color:#5FD3C1}
a:hover{color:#8FE6D8}
a:focus-visible,button:focus-visible{outline:3px solid #5FD3C1;outline-offset:3px}

/* ---- Animations ---- */
/* Note: the artboard animated translateX(-10%..105%), which is relative to the 9px dot
   itself (≈10px of travel). The intent (keyframe "flow" along the rail) is reproduced by
   animating `left`, which is relative to the rail. */
@keyframes ss-flow{0%{left:-2%;opacity:0}12%{opacity:1}78%{opacity:1}100%{left:100%;opacity:0}}
@keyframes ss-pulse{0%,100%{box-shadow:0 0 0 0 rgba(95,211,193,0.45)}50%{box-shadow:0 0 0 14px rgba(95,211,193,0)}}
@keyframes ss-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ss-sweep{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes cs-drift{from{transform:scale(1)}to{transform:scale(1.08) translateX(-1.5%)}}

.ss-dot{position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:#5FD3C1;box-shadow:0 0 12px 2px rgba(95,211,193,0.55);animation:ss-flow 4.2s linear infinite}
.ss-dot--d1{animation-delay:1.3s}
.ss-dot--d2{animation-delay:.6s;width:12px;height:12px;top:-5px}
.ss-dot--d3{animation-delay:2.1s}
.ss-dot--d4{animation-delay:3s}
.ss-rail{background:linear-gradient(90deg,rgba(95,211,193,0) 0%,rgba(95,211,193,0.9) 50%,rgba(95,211,193,0) 100%);background-size:200% 100%;animation:ss-sweep 3.2s linear infinite}
.ss-rise{animation:ss-rise .9s cubic-bezier(.2,.7,.2,1) both}
.ss-pulse{animation:ss-pulse 2.6s ease-in-out infinite}

/* ---- Background image layer ----
   The image is a decorative cover layer, never part of layout flow, so it cannot shift
   content; the page wrapper fixes its own min-height. Image source: 1536×1024 (3:2) webp. */
.cs-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(11,22,38,0.96) 0%,rgba(11,22,38,0.7) 40%,rgba(11,22,38,0.15) 100%),url(/assets/hero-industries.webp) right center/cover no-repeat;animation:cs-drift 26s ease-in-out infinite alternate;transform-origin:70% 50%}
@media (max-width:760px){.cs-bg{background:linear-gradient(180deg,rgba(11,22,38,0.9),rgba(11,22,38,0.97)),url(/assets/hero-industries.webp) center/cover no-repeat}}

/* ---- Page shell ---- */
.cs-page{position:relative;min-height:100vh;min-height:100svh;font-family:'IBM Plex Sans',system-ui,sans-serif;color:#E7EDF3;background:#0B1626;display:flex;flex-direction:column;overflow:hidden}

.cs-header{position:relative;z-index:1;padding:22px 24px}
.cs-header__row{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cs-logo{display:flex;align-items:center;gap:10px;color:#FFFFFF;text-decoration:none}
.cs-logo__mark{width:38px;height:38px;border-radius:10px;background:#16263D;display:flex;align-items:center;justify-content:center;flex:none}
.cs-logo__word{font-size:19px;font-weight:700;letter-spacing:-0.01em}
.cs-logo__accent{color:#5FD3C1}

.cs-main{position:relative;z-index:1;flex:1;padding:40px 24px 64px;display:flex;flex-direction:column;justify-content:center}
.cs-main__col{max-width:1200px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:44px}
.cs-hero{display:flex;flex-direction:column;gap:20px;max-width:760px}
.cs-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:#5FD3C1;display:inline-flex;align-items:center;gap:8px}
.cs-h1{margin:0;font-size:clamp(40px,6vw,72px);line-height:1.02;font-weight:700;letter-spacing:-0.03em;color:#FFFFFF;text-wrap:balance;overflow-wrap:anywhere}
.cs-lead{margin:0;font-size:19px;line-height:1.6;color:#B9C6D4;max-width:600px}

.cs-rails{position:relative;height:150px;max-width:980px;display:flex;flex-direction:column;justify-content:space-between}
.cs-rail{position:relative;height:1px;background:#1F3150}
.cs-rail--inset{margin-left:6%}
.cs-rail--live{position:relative;height:3px;border-radius:3px}

/* Replaces the early-access form (Step 2). Same panel look as the artboard's form card. */
.cs-note{max-width:760px;background:#12223A;border:1px solid #22344F;border-radius:16px;padding:20px 24px;display:flex;gap:14px;align-items:center}
.cs-note__icon{width:44px;height:44px;flex:none;border-radius:50%;background:#16352F;display:flex;align-items:center;justify-content:center}
.cs-note__text{margin:0;font-size:16px;line-height:1.5;color:#C9D3DF}
.cs-note__strong{font-weight:600;color:#FFFFFF}

.cs-footer{position:relative;z-index:1;padding:22px 24px;background:#0B1626;border-top:1px solid #16263D;font-size:12px;color:#8EA1B6}
.cs-footer__row{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.cs-footer__row p{margin:0}
.cs-footer__fine{max-width:1200px;margin:10px auto 0;font-size:11px;line-height:1.5;color:#7F93A8}

/* 404 page button (styled like the artboard's primary button) */
.cs-btn{min-height:48px;padding:0 22px;border:0;border-radius:10px;background:#5FD3C1;color:#0B1626;font:inherit;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.cs-btn:hover{background:#8FE6D8;color:#0B1626}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .ss-dot,.ss-rail,.ss-rise,.ss-pulse,.cs-bg{animation:none}
  .ss-dot{opacity:1;left:40%}
}

/* =====================================================================
   Step 2 — early-access form (dark panel, from the ComingSoon artboard form state)
   ===================================================================== */
.ea-panel{max-width:760px}
.ea-form{background:#12223A;border:1px solid #22344F;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px}
.ea-h{margin:0;font-size:18px;color:#FFFFFF}
.ea-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px}
.ea-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ea-label{font-size:13px;font-weight:600;color:#C9D3DF}
.ea-label__opt{font-weight:400;color:#8EA1B6}
.ea-input{width:100%;min-width:0;height:44px;padding:0 12px;border-radius:8px;font:inherit;font-size:15px;color:#FFFFFF;background:#0B1626;border:1px solid #2A3C57}
.ea-input::placeholder{color:#6E8299}
.ea-select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C9D3DF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.ea-select option{color:#142033;background:#FFFFFF}
.ea-textarea{height:auto;min-height:88px;padding:10px 12px;resize:vertical;line-height:1.5;overflow-wrap:anywhere}
.ea-input:focus-visible,.ea-check:focus-visible{outline:3px solid #5FD3C1;outline-offset:2px}
.ea-input[aria-invalid="true"],.ea-field--bad{border:2px solid #FF8A7A}
.ea-err{margin:0;font-size:13px;line-height:1.4;color:#FFB4A9}
.ea-err::before{content:"\26A0\00A0"}
.ea-err--indent{padding-left:30px}
.ea-count{font-size:12px;color:#8EA1B6;align-self:flex-end}
.ea-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:#C9D3DF}
.ea-check{width:20px;height:20px;margin:0;flex:none;accent-color:#5FD3C1}
.ea-consent__label{cursor:pointer}
.ea-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ea-hint{font-size:12px;color:#8EA1B6}
.cs-btn:disabled{opacity:.55;cursor:not-allowed}
.cs-btn[aria-busy="true"]{opacity:.8;cursor:progress}
.ea-summary{margin:0;background:#3A1F22;border:1px solid #7A2E2E;border-radius:10px;padding:12px 14px;color:#FFD6CF;font-size:14px}
.ea-summary:focus-visible{outline:3px solid #FF8A7A;outline-offset:2px}
.ea-summary__text{margin:0;font-weight:600}
.ea-summary__list{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.ea-summary__list a{color:#FFD6CF}
.ea-summary__list:empty{display:none}
.ea-nojs{margin:0;background:#3A2F1F;border:1px solid #7A5A2E;border-radius:10px;padding:12px 14px;color:#FFE1B3;font-size:14px}
/* Honeypot: off-screen, not display:none (humans never see it; it is also aria-hidden and out of the tab order). */
.ea-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.ea-success{max-width:760px;background:#12223A;border:1px solid #22344F;border-radius:16px;padding:24px;display:flex;gap:14px;align-items:center}
.ea-success:focus-visible{outline:3px solid #5FD3C1;outline-offset:3px}
.ea-success__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.ea-success__strong{font-size:17px;font-weight:600;color:#FFFFFF}
.ea-success__sub{font-size:14px;color:#B9C6D4;overflow-wrap:anywhere}
.cs-footer__link{color:#B9C6D4}
.cs-footer__link:hover{color:#FFFFFF}
[hidden]{display:none !important}

/* =====================================================================
   Step 2 — privacy notice (light page, from the Privacy artboard)
   ===================================================================== */
.pv-body{background:#F6F8F9}
.pv-page{min-height:100vh;min-height:100svh;font-family:'IBM Plex Sans',system-ui,sans-serif;color:#142033;background:#F6F8F9;display:flex;flex-direction:column}
.pv-page a{color:#0B6E63}
.pv-page a:hover{color:#08544B}
.pv-page a:focus-visible{outline:3px solid #0B6E63;outline-offset:2px}
.pv-header{background:#0B1626;color:#E7EDF3;padding:18px 24px}
.pv-header__row{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pv-header .cs-logo{color:#FFFFFF}
.pv-header .cs-logo:hover{color:#FFFFFF}
.pv-header .cs-logo:focus-visible{outline-color:#5FD3C1}
.cs-logo__mark--sm{width:36px;height:36px;border-radius:9px}
.cs-logo__word--sm{font-size:18px}
.pv-cta{min-height:44px;padding:0 18px;border-radius:8px;background:#5FD3C1;color:#0B1626 !important;font-weight:600;font-size:15px;text-decoration:none;display:inline-flex;align-items:center}
.pv-cta:hover{background:#8FE6D8}
.pv-cta:focus-visible{outline-color:#5FD3C1}
.pv-main{flex:1;padding:64px 24px 96px}
.pv-article{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:28px;font-size:16px;line-height:1.7;color:#26324A}
.pv-article p{margin:0;overflow-wrap:anywhere}
.pv-intro{display:flex;flex-direction:column;gap:10px}
.pv-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:#0B6E63}
.pv-h1{margin:0;font-size:40px;line-height:1.1;letter-spacing:-0.02em;color:#142033}
.pv-lead{font-size:18px;color:#3A4556}
.pv-section{display:flex;flex-direction:column;gap:10px}
.pv-h2{margin:0;font-size:22px;color:#142033}
.pv-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.pv-small{font-size:14px;color:#5A6577}
.pv-footer{background:#0B1626;color:#8EA1B6;padding:28px 24px;font-size:13px}
.pv-footer .cs-footer__row p{margin:0}
.cs-footer__fine{max-width:1200px;margin:10px auto 0;font-size:11px;line-height:1.5;color:#7F93A8}
@media (max-width:480px){.pv-main{padding:40px 16px 64px}.pv-h1{font-size:32px}}