/* ===========================================================================
   close — demo CTA + site footer.
   Every selector is namespaced .cl-* and lives under .close.
   The demo is heading + three points + form, nothing else.
   The footer keeps its dark slab; the columns share one right edge, one
   spacing scale, and one top rail.
   =========================================================================== */

.close{
 --cl-ease:cubic-bezier(.16,1,.3,1);

 --cl-ink:#24202d;
 --cl-ink-2:#2a2438;
 --cl-muted:#91889d;
 --cl-hair:#e8e5ed;
 --cl-line:#ddd7e6;

 --cl-purple:#7c3aed;
 --cl-purple-deep:#6d28d9;
 --cl-red:#d9435e;

 --cl-slab:#29193b;
 --cl-on-slab:#fff;
 --cl-on-slab-dim:#ffffffb0;
 --cl-on-slab-hair:#ffffff1a;

 /* one spacing scale, used by both blocks */
 --cl-s1:8px;
 --cl-s2:14px;
 --cl-s3:22px;
 --cl-s4:30px;
 --cl-s5:44px;

 --cl-max:1180px;
 --cl-lead:34px;      /* height of the first line box in every footer column */
 --cl-gutter:clamp(44px,5.5vw,92px);
 --cl-nav-gutter:clamp(48px,7vw,112px);
}

.close *{box-sizing:border-box}

.cl-sr{
 position:absolute;
 width:1px;height:1px;
 padding:0;margin:-1px;
 overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
 white-space:nowrap;border:0;
}

/* ===========================================================================
   1. Demo
   =========================================================================== */

.cl-demo{
 position:relative;
 z-index:2;
 background:#f6f2fb;
 padding:clamp(72px,9vw,128px) 5vw clamp(64px,7vw,104px);
 overflow:hidden;
 isolation:isolate;
}

.cl-glow{
 position:absolute;
 z-index:0;
 border-radius:50%;
 pointer-events:none;
 filter:blur(26px);
}

.cl-glow-a{
 left:-18%;top:-42%;
 width:62%;height:92%;
 background:radial-gradient(circle,#ffffff8c 0%,transparent 68%);
}

.cl-glow-b{
 right:-14%;bottom:-34%;
 width:48%;height:74%;
 background:radial-gradient(circle,#7c3aed24 0%,transparent 70%);
}

.cl-demo-inner{
 position:relative;
 z-index:1;
 width:100%;
 max-width:var(--cl-max);
 margin:0 auto;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:clamp(40px,5vw,80px);
 align-items:center;
}

/* ---------- left: one heading, three points ---------- */

.cl-say{min-width:0}

.cl-h{
 margin:0;
 font-size:clamp(31px,3.7vw,52px);
 font-weight:600;
 letter-spacing:-.045em;
 line-height:1.04;
 color:var(--cl-ink);
 text-wrap:balance;
}

.cl-points{
 list-style:none;
 margin:clamp(28px,3vw,44px) 0 0;
 padding:0;
}

.cl-point{
 display:flex;
 align-items:baseline;
 gap:var(--cl-s3);
 padding:var(--cl-s3) 0;
 border-top:1px solid var(--cl-hair);
}

.cl-point:last-child{border-bottom:1px solid var(--cl-hair)}

.cl-num{
 flex:0 0 auto;
 font-family:ui-monospace,Menlo,monospace;
 font-size:11px;
 letter-spacing:.12em;
 color:#7c3aed;
}

.cl-pt{
 font-size:clamp(15px,1.25vw,18px);
 line-height:1.45;
 letter-spacing:-.012em;
 color:var(--cl-ink-2);
 text-wrap:pretty;
}

/* ---------- right: the form ---------- */

.cl-card{
 position:relative;
 min-width:0;
 background:#fffffff5;
 border:1px solid #ffffff99;
 border-radius:20px;
 padding:clamp(20px,2vw,28px);
 box-shadow:0 22px 60px -25px #24113840,0 2px 6px -2px #2411381a;
 backdrop-filter:blur(16px);
 -webkit-backdrop-filter:blur(16px);
}

.cl-form{
 display:flex;
 flex-direction:column;
 gap:var(--cl-s2);
 margin:0;
}

.cl-field-row{display:flex;flex-direction:column}

.cl-field{
 width:100%;
 font:inherit;
 font-size:15px;
 color:var(--cl-ink);
 background:#fff;
 border:1px solid var(--cl-line);
 border-radius:12px;
 padding:13px 16px;
 outline:none;
 transition:border-color .2s ease,box-shadow .2s ease;
}

.cl-field::placeholder{color:#918a9e}

.cl-field:hover{border-color:#d2cadf}

.cl-field:focus-visible,
.cl-field:focus{
 border-color:var(--cl-purple);
 box-shadow:0 0 0 3px #7c3aed33;
}

.cl-area{resize:vertical;min-height:84px;line-height:1.5}

.cl-field[aria-invalid="true"]{border-color:var(--cl-red)}

.cl-field[aria-invalid="true"]:focus,
.cl-field[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 3px #d9435e2e}

.cl-err{
 margin:6px 0 0;
 font-size:12.5px;
 line-height:1.35;
 color:var(--cl-red);
}

.cl-err:empty{display:none}

.cl-err-dark{color:#ff9db0}

.cl-submit{
 margin-top:var(--cl-s1);
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 width:100%;
 border:0;
 border-radius:999px;
 padding:15px 20px;
 font-size:15px;
 font-weight:600;
 letter-spacing:-.01em;
 color:#fff;
 background:var(--cl-purple);
 cursor:pointer;
 transition:background .25s ease,transform .25s var(--cl-ease);
}

.cl-submit:hover{background:var(--cl-purple-deep)}
.cl-submit:active{transform:translateY(1px)}

.cl-submit[disabled]{
 background:#a98ede;
 cursor:progress;
}

.cl-submit-arrow{transition:transform .35s var(--cl-ease)}
.cl-submit:hover .cl-submit-arrow{transform:translateX(3px)}

/* success replaces the form */

.cl-done{
 display:flex;
 align-items:center;
 gap:var(--cl-s2);
 padding:var(--cl-s3) var(--cl-s1);
}

.cl-done-mark{
 flex:0 0 auto;
 width:34px;height:34px;
 border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 font-size:15px;
 color:#1e9678;
 background:#e7f6f1;
}

.cl-done-copy{
 margin:0;
 font-size:16px;
 letter-spacing:-.015em;
 color:var(--cl-ink);
}

/* ===========================================================================
   2. Footer
   =========================================================================== */

.cl-footer{
 position:relative;
 z-index:2;
 background:#f6f2fb;
 padding:0 5vw clamp(28px,3.5vw,48px);
}

.cl-slab{
 width:100%;
 max-width:var(--cl-max);
 margin:0 auto;
 background:var(--cl-slab);
 border-radius:28px;
 padding:clamp(40px,4.4vw,60px) clamp(28px,3.6vw,56px) clamp(28px,3vw,40px);
 box-shadow:0 32px 80px -30px #24113880;
}

.cl-fgrid{
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 column-gap:var(--cl-gutter);
 row-gap:var(--cl-s5);
 align-items:start;
}

/* ---------- brand column ---------- */

.cl-brandcol{min-width:0;max-width:400px}

.cl-lockup{
 display:flex;
 align-items:center;
 gap:11px;
 height:var(--cl-lead);
 color:var(--cl-on-slab);
}

.cl-mark{
 width:30px;height:30px;
 flex:0 0 auto;
 border-radius:50%;
 background:#ffffff14;   /* so a missing file never collapses the row */
 object-fit:contain;
}

.cl-wordmark{
 font-size:20px;
 font-weight:700;
 letter-spacing:-.03em;
 line-height:1;
}

.cl-blurb{
 margin:var(--cl-s3) 0 0;
 font-size:14px;
 line-height:1.65;
 color:var(--cl-on-slab-dim);
}

.cl-news{margin:var(--cl-s4) 0 0;display:block}

.cl-news-label{
 display:block;
 font-size:13px;
 font-weight:600;
 letter-spacing:-.01em;
 color:var(--cl-on-slab);
}

.cl-news-row{
 position:relative;
 margin-top:var(--cl-s2);
 max-width:340px;
}

.cl-news-input{
 width:100%;
 font:inherit;
 font-size:13.5px;
 color:var(--cl-ink);
 background:#fff;
 border:0;
 border-radius:999px;
 padding:13px 52px 13px 20px;
 outline:none;
 transition:box-shadow .2s ease;
}

.cl-news-input::placeholder{color:#918a9e}

.cl-news-input:focus-visible,
.cl-news-input:focus{box-shadow:0 0 0 3px #c192ff}

.cl-news-input[aria-invalid="true"]{box-shadow:0 0 0 2px var(--cl-red)}

.cl-news-go{
 position:absolute;
 right:5px;top:50%;
 transform:translateY(-50%);
 width:34px;height:34px;
 border:0;
 border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 font-size:15px;
 color:#fff;
 background:linear-gradient(140deg,#9333ea,#7c3aed);
 cursor:pointer;
 transition:background .25s ease;
}

.cl-news-go:hover{background:var(--cl-purple-deep)}

.cl-news-go[disabled]{background:#6b5a8f;cursor:progress}

.cl-news .cl-err{margin-top:var(--cl-s1)}

.cl-news-done{
 margin:var(--cl-s4) 0 0;
 font-size:13.5px;
 color:var(--cl-on-slab);
}

/* ---------- link columns: one shared left edge per column, headings
   and lists share a baseline grid (--cl-lead) with the brand lockup ---------- */

.cl-fnav{
 display:flex;
 justify-content:flex-end;
 gap:var(--cl-nav-gutter);
}

.cl-fcol{
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 text-align:left;
 min-width:0;
}

.cl-fcol-h{
 display:flex;
 align-items:center;
 height:var(--cl-lead);     /* same first-line box as the brand lockup */
 margin:0;
 font-size:14px;
 font-weight:600;
 letter-spacing:-.015em;
 line-height:1;
 color:var(--cl-on-slab);
}

.cl-flinks{
 list-style:none;
 margin:var(--cl-s2) 0 0;
 padding:0;
 display:flex;
 flex-direction:column;
 gap:var(--cl-s2);
}

.cl-flinks li{display:flex}

.cl-flinks a{
 display:block;
 font-size:14px;
 line-height:1.2;
 color:var(--cl-on-slab-dim);
 transition:color .2s ease;
}

.cl-flinks a:hover{color:var(--cl-on-slab)}

/* ---------- bottom rail, on the same grid ---------- */

.cl-fbottom{
 margin-top:clamp(36px,4vw,56px);
 padding-top:var(--cl-s3);
 border-top:1px solid var(--cl-on-slab-hair);
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:var(--cl-s3);
}

.cl-copy{
 margin:0;
 font-family:ui-monospace,Menlo,monospace;
 font-size:11px;
 letter-spacing:.28em;
 color:#ffffff66;
}

.cl-social{
 display:flex;
 gap:var(--cl-s1);
}

.cl-soc{
 width:36px;height:36px;
 border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 font-size:13px;
 font-weight:700;
 color:var(--cl-on-slab);
 background:#ffffff1f;
 transition:background .25s ease;
}

.cl-soc:hover{background:var(--cl-purple)}

/* ===========================================================================
   3. Entry reveal
   =========================================================================== */

.cl-demo .cl-h,
.cl-demo .cl-point,
.cl-demo .cl-card{
 opacity:0;
 transform:translateY(14px);
 transition:opacity .7s ease var(--cl-d,0s),transform .8s var(--cl-ease) var(--cl-d,0s);
}

.cl-demo.cl-in .cl-h,
.cl-demo.cl-in .cl-point,
.cl-demo.cl-in .cl-card{opacity:1;transform:none}

.cl-demo .cl-point:nth-child(1){--cl-d:.10s}
.cl-demo .cl-point:nth-child(2){--cl-d:.17s}
.cl-demo .cl-point:nth-child(3){--cl-d:.24s}
.cl-demo .cl-card{--cl-d:.14s}

/* ===========================================================================
   4. Responsive
   =========================================================================== */

@media(max-width:920px){
 .cl-demo-inner{grid-template-columns:1fr;gap:clamp(32px,5vw,48px);align-items:start}
 .cl-card{width:100%}
 .cl-h{font-size:clamp(30px,6.2vw,40px)}

 .cl-fgrid{grid-template-columns:1fr;row-gap:var(--cl-s5)}
 .cl-brandcol{max-width:560px}
 .cl-fnav{justify-content:flex-start;gap:clamp(36px,9vw,72px)}
}

@media(max-width:520px){
 .cl-point{gap:var(--cl-s2);padding:var(--cl-s2) 0}
 .cl-slab{border-radius:24px}
 .cl-fnav{flex-direction:column;gap:var(--cl-s4)}
 .cl-fbottom{flex-direction:column;align-items:flex-start;gap:var(--cl-s3)}
 .cl-copy{letter-spacing:.2em}
}

@media(prefers-reduced-motion:reduce){
 .cl-demo .cl-h,
 .cl-demo .cl-point,
 .cl-demo .cl-card{opacity:1;transform:none;transition:none}
 .cl-submit,
 .cl-submit-arrow,
 .cl-soc,
 .cl-news-go,
 .cl-flinks a{transition:none}
}