/* ===========================================================================
   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:transparent;  /* the site ground is the fixed .gv-aurora field */
 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;
 /* the one glass recipe, from shell.css — this card used to be 96% white under a
    16px blur, which is fog: nothing of the aurora came through it */
 background:var(--gl-l-bg);
 border:1px solid var(--gl-l-border);
 border-radius:20px;
 padding:clamp(20px,2vw,28px);
 box-shadow:var(--gl-l-shadow);
 backdrop-filter:var(--gl-blur);
 -webkit-backdrop-filter:var(--gl-blur);
}

.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:transparent;  /* the site ground is the fixed .gv-aurora field */
 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}
}

/* ===========================================================================
   Review round: the demo form loses its phone field and its always-on text
   box in favour of selectable chips, and the footer slab goes full-bleed on
   near-black.
   =========================================================================== */

.cl-chips-set{border:0;margin:0;padding:0;min-width:0}
.cl-chips-legend{
  padding:0;
  margin:0 0 var(--cl-s2, 14px);
  font-size:12.5px;
  color:var(--cl-muted,#91889d);
}
.cl-chips{display:flex;flex-wrap:wrap;gap:8px}

/* the native control stays in the DOM for keyboard and form semantics; the
   label is what gets painted */
.cl-chip{position:relative;display:inline-flex}
.cl-chip input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.cl-chip span{
  display:inline-block;
  padding:10px 14px;
  border:1px solid var(--cl-line,#ddd7e6);
  border-radius:999px;
  background:#fff;
  font-size:13.5px;
  line-height:1;
  color:#5f566f;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.cl-chip:hover span{border-color:#c9bfda}
.cl-chip input:checked + span{
  border-color:var(--cl-purple,#7c3aed);
  background:#f4edff;
  color:#5b2b90;
  font-weight:550;
}
.cl-chip input:focus-visible + span{
  outline:2px solid var(--cl-purple,#7c3aed);
  outline-offset:2px;
}

.cl-other-row{margin-top:var(--cl-s2,14px)}

/* ---- footer: full-bleed, near-black ---- */

.cl-footer{padding:0}

.cl-slab{
  max-width:none;
  width:100%;
  margin:0;
  border-radius:0;
  background:#131217;          /* the colour the client specified */
  box-shadow:none;
  padding:clamp(48px,5.4vw,84px) 5vw clamp(32px,3.4vw,48px);
}

/* the slab is darker than the old #29193b, so the ink is re-weighted rather
   than left to ride on a lighter purple */
.cl-slab .cl-blurb{color:#ffffffa8}
.cl-slab .cl-fcol-h{color:#ffffff}
.cl-slab .cl-flinks a{color:#ffffffa3}
.cl-slab .cl-flinks a:hover{color:#fff}
.cl-slab .cl-copy{color:#ffffff7a}
.cl-slab .cl-news-label{color:#ffffffb5}
.cl-slab .cl-news-input{background:#ffffff0f;border-color:#ffffff24;color:#fff}
.cl-slab .cl-news-input::placeholder{color:#ffffff63}
.cl-slab .cl-soc{border-color:#ffffff24;color:#ffffffb5}
.cl-slab .cl-soc:hover{border-color:#ffffff45;color:#fff}

@media (max-width:820px){
  .cl-slab{border-radius:0;padding-inline:24px}
}

/* .cl-mark was written for an <img> and sets a faint placeholder background.
   The mark is now a masked shape painted with `background:currentColor`, so
   that placeholder was filling the glyph at 8% white. Same specificity, later
   file — it needs an explicit win here. */
.cl-slab .cl-mark.gv-mark{background:currentColor;color:#fff;border-radius:0}

/* RD round 7: one header size across the page (--gv-h2). The alignment stays
   left here — this heading is one half of a two-column form, not a section
   title standing on its own. */
.cl-h{font-size:var(--gv-h2)}