/* Canless waitlist — Summit concept, production stylesheet */ /* Google Fonts are loaded via in , not @import here — @import blocks render in series. */ :root{ --bg:#10151A; --surface:#171E25; --ink:#E7EEF2; --muted:#8FA3AE; --accent:#FF7A45; --line:rgba(255,255,255,.09); --focus:#FF7A45; --max:720px; } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif; line-height:1.5; } a{color:inherit;} button{font:inherit;} input,select{font:inherit;} img{max-width:100%;} .disp{font-family:'Archivo',sans-serif;} .visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;} a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; } .wrap{max-width:var(--max); margin:0 auto; padding:0 20px;} /* header */ header.top{ max-width:760px; margin:0 auto; padding:26px 20px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; } .brand{display:flex; align-items:center; gap:6px; line-height:1;} .brand-icon{display:block; width:50px; height:50px; border-radius:10px; transform:translateY(-3px);} .wordmark{font-family:'Archivo',sans-serif; font-weight:900; font-size:18px; letter-spacing:-.01em; line-height:1;} .tag{ display:inline-flex; align-items:center; line-height:1; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); padding:5px 10px; border-radius:5px; white-space:nowrap; } /* hero */ .hero{position:relative; padding:44px 0 0; overflow:hidden;} .hero-inner{position:relative; z-index:2;} .hero h1{ font-family:'Archivo',sans-serif; font-weight:900; line-height:1.06; letter-spacing:-.01em; font-size:clamp(30px,7vw,44px); margin:0 0 16px; text-wrap:balance; max-width:600px; } .hero p.sub{font-size:16.5px; color:var(--muted); max-width:460px; margin:0 0 26px; line-height:1.55;} .cta{ display:inline-block; background:var(--accent); color:#191008; font-weight:700; font-size:15.5px; padding:14px 26px; border-radius:7px; text-decoration:none; border:none; cursor:pointer; } .cta:hover{filter:brightness(1.07);} .micro{font-size:12.5px; color:var(--muted); margin-top:12px; font-family:'IBM Plex Mono',monospace;} .ridge{display:block; width:100%; height:auto; margin-top:32px;} /* pillars */ .pillars{padding:44px 0 8px; display:grid; grid-template-columns:1fr; gap:14px;} .pillar{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px 18px;} .pillar .k{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin:0 0 10px;} .pillar .t{font-weight:600; font-size:16.5px; margin:0 0 6px;} .pillar .d{font-size:14px; color:var(--muted); line-height:1.5; margin:0;} /* how it works */ .how{padding:48px 0;} .how h2{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 22px; font-weight:600;} .path{display:flex; flex-direction:column; gap:22px;} .node{position:relative; padding-top:26px;} .node::before{content:"";position:absolute; top:8px; left:0; width:100%; height:1px; background:var(--line);} .node::after{content:"";position:absolute; top:4px; left:0; width:9px; height:9px; border-radius:50%; background:var(--accent);} .node .n{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent); margin:0 0 4px;} .node p{font-size:14px; color:var(--ink); line-height:1.5; margin:0; max-width:340px;} /* form */ form.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:28px 22px; margin:32px 0 44px;} form.card h2{font-family:'Archivo',sans-serif; font-size:19px; font-weight:700; margin:0 0 4px;} form.card > p.lead{font-size:13.5px; color:var(--muted); margin:0 0 22px;} .field{margin-bottom:16px;} label{display:block; font-size:13.5px; font-weight:500; margin-bottom:7px; color:var(--muted);} input[type="email"], select{ width:100%; padding:15px 16px; border-radius:8px; border:1px solid var(--line); background:#0D1216; font-size:16.5px; color:var(--ink); min-height:52px; } select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238FA3AE' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:38px; } .check{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); margin-bottom:12px; line-height:1.45;} .check input{margin-top:3px; width:17px; height:17px; accent-color:var(--accent); flex-shrink:0;} .check-group{margin-bottom:16px;} .check-group .check{margin-bottom:0;} .privacy-link{display:block; margin:5px 0 0 27px; font-size:12.5px; color:var(--accent); text-decoration:underline;} .submit{width:100%; margin-top:6px;} .field-error{color:var(--accent); font-size:12.5px; margin:6px 0 0; display:none;} .field-error.is-visible{display:block;} .form-error{color:var(--accent); font-size:13.5px; margin:14px 0 0; display:none; text-align:center;} .form-error.is-visible{display:block;} .success{display:none; text-align:center; padding:6px 4px 0; font-size:15px; color:var(--accent); font-weight:600;} .success.is-visible{display:block;} .honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;} /* faq */ .faq{padding-bottom:44px;} .faq h2{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 14px; font-weight:600;} details{border-top:1px solid var(--line); padding:14px 0;} details:last-child{border-bottom:1px solid var(--line);} summary{cursor:pointer; font-weight:600; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; gap:12px;} summary::-webkit-details-marker{display:none;} summary::after{content:"+"; color:var(--accent); font-family:'IBM Plex Mono',monospace;} details[open] summary::after{content:"\2013";} details p{font-size:14px; color:var(--muted); margin:10px 0 0; line-height:1.55;} /* footer */ footer.site{border-top:1px solid var(--line); padding:22px 0 50px; text-align:center; font-size:12px; color:var(--muted); font-family:'IBM Plex Mono',monospace;} footer.site .wrap{display:flex; flex-direction:column; gap:6px; align-items:center;} footer.site a{text-decoration:underline;} /* confirmation page */ .confirm-page{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; text-align:center;} .confirm-box{max-width:420px;} .confirm-box h1{font-family:'Archivo',sans-serif; font-size:26px; margin:0 0 12px;} .confirm-box p{color:var(--muted); font-size:15px; line-height:1.6;} .confirm-box a.cta{margin-top:18px;} .back-link{display:inline-block; margin-top:22px; font-size:13.5px; color:var(--muted); text-decoration:none;} .back-link:hover{color:var(--accent);} /* privacy page */ .legal{padding:8px 0 60px;} .legal h1{font-family:'Archivo',sans-serif; font-size:clamp(26px,5vw,34px); margin:26px 0 8px;} .legal .updated{color:var(--muted); font-size:13px; margin:0 0 30px;} .legal h2{font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); margin:30px 0 10px;} .legal p, .legal li{font-size:15px; color:var(--ink); line-height:1.65;} .legal p.muted{color:var(--muted); font-size:13.5px;} .legal ul{padding-left:20px;} /* ============ responsive: tablet ============ */ @media (min-width:700px){ .wrap{padding:0 32px;} header.top{padding:32px 32px 0;} .hero{padding:64px 0 0;} .hero p.sub{font-size:18px;} .pillars{grid-template-columns:repeat(3,1fr); gap:16px;} .path{flex-direction:row; align-items:flex-start; gap:0;} .node{flex:1; padding-right:16px;} .node p{max-width:none;} form.card{padding:34px 30px;} } /* ============ responsive: laptop ============ */ @media (min-width:1024px){ :root{--max:840px;} header.top{max-width:900px;} .hero{padding:84px 0 0;} .hero h1{font-size:clamp(40px,4.4vw,54px);} .hero p.sub{font-size:19px; max-width:520px;} .ridge{margin-top:44px;} .pillars{gap:20px; padding:60px 0 8px;} .pillar{padding:26px 22px;} .how{padding:64px 0;} form.card{padding:40px 38px; margin:40px 0 56px;} .faq{padding-bottom:60px;} } /* ============ responsive: large monitor ============ */ @media (min-width:1440px){ :root{--max:960px;} header.top{max-width:1040px;} .hero h1{font-size:clamp(46px,3.6vw,60px);} body{background-image:radial-gradient(ellipse 900px 500px at 50% -10%, rgba(255,122,69,.06), transparent 60%);} } /* reduced motion */ @media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto !important;} }