/* ==========================================================
   CLEARANCE — questionnaire styles (extends styles.css tokens)
   Mobile-first. Centred.
   ========================================================== */

.cf-body{
  min-height:100vh;
  display:flex; flex-direction:column;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(124,92,255,.13), transparent 68%),
    var(--void);
}

.cf-main{
  position:relative; z-index:3;
  width:100%; max-width:660px;
  margin-inline:auto;
  padding:1.1rem var(--pad) 3.5rem;
  display:flex; flex-direction:column;
  flex:1;
}

/* ---------- head + progress ---------- */

.cf-head{
  display:flex; align-items:center; gap:1rem;
  margin-bottom:.9rem;
}
.cf-brand{
  display:flex; align-items:center; gap:.5rem;
  text-decoration:none; font-weight:900; font-size:.85rem;
  letter-spacing:-.01em; color:var(--white);
  margin-right:auto;
}
.cf-count{
  font-family:var(--m); font-size:.7rem; font-weight:700;
  letter-spacing:.2em; color:var(--key-hi);
  font-variant-numeric:tabular-nums;
}

.cf-rail{
  height:2px; background:var(--line);
  border-radius:2px; overflow:hidden;
  margin-bottom:1.6rem;
}
.cf-rail i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--key-lo),var(--key-hi));
  box-shadow:0 0 12px var(--key-gl);
  transition:width .45s var(--e);
}

.cf-instruct{
  font-family:var(--m);
  font-size:.72rem; line-height:1.7;
  letter-spacing:.05em;
  color:var(--grey-d);
  margin:0 0 1.9rem;
  padding-left:.7rem;
  border-left:2px solid rgba(124,92,255,.45);
}

/* ---------- question ---------- */

.cf-q{
  flex:1;
  display:flex; flex-direction:column;
  transition:opacity .3s var(--e), transform .3s var(--e);
}
.cf-q.cf-out{ opacity:0; transform:translateY(-14px); }

.cf-prompt{
  font-weight:900;
  font-size:clamp(1.45rem, 5.6vw, 2.1rem);
  line-height:1.15;
  letter-spacing:-.022em;
  margin:0 0 1.8rem;
  min-height:2.4em;
  text-wrap:balance;
}

.cf-opts{ display:grid; gap:.65rem; }

.cf-opt{
  display:flex; align-items:flex-start; gap:.8rem;
  width:100%;
  text-align:left;
  font-family:var(--f); font-size:.97rem; line-height:1.45;
  color:var(--white);
  background:var(--ink1);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1.05rem 1rem;
  min-height:58px;
  cursor:pointer;
  animation:cfIn .42s var(--e) both;
  transition:border-color .18s var(--e), background .18s var(--e), transform .18s var(--e), opacity .3s var(--e);
}
@keyframes cfIn{ from{ opacity:0; transform:translateY(14px); } }
@media (prefers-reduced-motion:reduce){ .cf-opt{ animation:none; } }

.cf-opt:hover:not(.is-dead):not(.is-picked){
  border-color:rgba(124,92,255,.6);
  background:var(--ink2);
}
.cf-opt:active:not(.is-dead){ transform:scale(.995); }

.cf-key{
  font-family:var(--m); font-size:.72rem; font-weight:700;
  letter-spacing:.1em;
  color:var(--key);
  flex:none;
  padding-top:.16rem;
  min-width:1.1rem;
}
.cf-txt{ flex:1; }

/* selected */
.cf-opt.is-picked{
  border-color:var(--key);
  background:rgba(124,92,255,.14);
  box-shadow:0 0 0 1px var(--key), 0 0 34px -10px var(--key-gl);
}
.cf-opt.is-picked .cf-key{ color:var(--key-hi); }

/* the ones you didn't pick — encrypting away */
.cf-opt.is-dead{
  border-color:var(--line);
  opacity:.38;
  cursor:default;
}
/* keep the SAME font metrics when encrypting — changing family or size
   re-wraps the text and makes the layout jump */
.cf-opt.is-dead .cf-txt{
  color:var(--grey-d);
}
.cf-opt.is-dead{ overflow:hidden; }
.cf-opt.is-dead .cf-key{ color:var(--grey-d); }

/* ---------- result ---------- */

.cf-result{ text-align:center; padding-top:1.5rem; }
.cf-stamp{
  font-family:var(--m); font-size:.68rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--key-hi);
  margin:0 0 1.6rem;
}
.cf-match{
  font-family:var(--m); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey-d);
  margin:0 0 .5rem;
}
.cf-name{
  font-weight:900;
  font-size:clamp(2.1rem, 9vw, 3.9rem);
  line-height:1;
  letter-spacing:-.03em;
  margin:0;
  text-shadow:0 0 44px var(--key-gl);
}
.cf-line{
  font-style:italic;
  font-size:clamp(1rem,3.6vw,1.15rem);
  color:var(--grey);
  margin:1rem auto 0;
  max-width:30ch;
}

.cf-locked{
  margin-top:2.6rem;
  padding:1.5rem 1.2rem;
  border:1px solid rgba(124,92,255,.34);
  border-radius:5px;
  background:rgba(124,92,255,.05);
  text-align:left;
}
.cf-locked-t{
  font-family:var(--m); font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--key-hi);
  margin:0 0 1rem;
  text-align:center;
}
.cf-locked ul{
  list-style:none; margin:0 0 1.5rem; padding:0;
  display:grid; gap:.6rem;
}
.cf-locked li{
  font-size:.93rem; color:var(--grey);
  padding-left:1.3rem;
  position:relative;
}
.cf-locked li::before{
  content:"\2588\2588";
  position:absolute; left:0; top:0;
  font-size:.7rem; letter-spacing:-.06em;
  color:var(--key);
  opacity:.8;
}
.cf-cta{ width:100%; }
.cf-fine{
  font-family:var(--m); font-size:.7rem; line-height:1.7;
  letter-spacing:.04em;
  color:var(--grey-d);
  margin:.9rem 0 0;
  text-align:center;
}

@media (min-width:620px){
  .cf-main{ padding-top:1.6rem; }
  .cf-opt{ font-size:1rem; }
}

/* ==========================================================
   ANALYSIS STAGE + STAGED REVEAL
   ========================================================== */

.cf-analysis{
  position:relative;
  padding:2.5rem 0 1rem;
  text-align:left;
  overflow:hidden;
}
.cf-analysis[hidden]{ display:none; }

.cf-an-sweep{
  position:absolute; left:-10%; right:-10%;
  height:38%;
  background:linear-gradient(to bottom, transparent, rgba(124,92,255,.18), transparent);
  animation:cfSweep 2.1s var(--e) infinite;
  pointer-events:none;
}
@keyframes cfSweep{ from{ transform:translateY(-120%); } to{ transform:translateY(360%); } }
@media (prefers-reduced-motion:reduce){ .cf-an-sweep{ display:none; } }

.cf-analysis .cf-stamp{ text-align:left; margin-bottom:1.25rem; }

.cf-an-log{
  list-style:none; margin:0; padding:0;
  font-family:var(--m); font-size:.76rem; line-height:1.5;
  min-height:9.5rem;
  display:flex; flex-direction:column; gap:.45rem;
}
.cf-an-log li{
  display:flex; gap:.5rem; align-items:baseline;
  color:var(--grey);
  animation:cfIn .24s var(--e) both;
}
.cf-an-log b{ color:var(--key-hi); font-weight:700; flex:none; }
.cf-an-log .ok{ color:#6EE7A8; margin-left:auto; flex:none; }
.cf-an-log .wait{ color:var(--grey-d); margin-left:auto; flex:none; }

.cf-an-rail{ margin:1.3rem 0 1rem; }

.cf-an-shuffle{
  font-family:var(--m); font-weight:700;
  font-size:.95rem; letter-spacing:.18em;
  text-align:center;
  color:var(--key);
  min-height:1.4em;
  margin:0;
  opacity:.75;
}

/* ---------- staged reveal ---------- */

.cf-youare{
  font-family:var(--m); font-size:.72rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--grey);
  margin:0 0 .85rem;
}

.cf-name.is-landing{ opacity:.9; }
.cf-name.is-locked{
  animation:cfLock .55s var(--e) both;
}
@keyframes cfLock{
  0%{ transform:scale(1.035); text-shadow:0 0 70px var(--key-gl); }
  55%{ transform:scale(.996); }
  100%{ transform:scale(1); text-shadow:0 0 44px var(--key-gl); }
}
@media (prefers-reduced-motion:reduce){ .cf-name.is-locked{ animation:none; } }

.cf-result .cf-line,
.cf-result .cf-match{
  opacity:0; transform:translateY(9px);
  transition:opacity .5s var(--e), transform .5s var(--e);
}
.cf-result .cf-line.is-in,
.cf-result .cf-match.is-in{ opacity:1; transform:none; }

.cf-result .cf-match{ margin-top:1.15rem; }

/* ==========================================================
   RESULTS STACK — memo, rarity, sealed items
   ========================================================== */

.cf-stack{
  margin-top:2.4rem;
  text-align:left;
  opacity:0; transform:translateY(12px);
  transition:opacity .6s var(--e), transform .6s var(--e);
}
.cf-stack.is-in{ opacity:1; transform:none; }

/* memo from the source */
.cf-memo{
  padding:1.4rem 1.25rem;
  border:1px solid var(--line);
  border-left:2px solid var(--key);
  border-radius:4px;
  background:var(--ink1);
}
.cf-memo-h{
  font-family:var(--m); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--key-hi);
  margin:0 0 1rem;
}
.cf-memo-b{
  font-size:.95rem; line-height:1.62;
  color:var(--grey);
  margin:0 0 .95rem;
}
.cf-memo-line{
  font-size:clamp(1.02rem,3.8vw,1.2rem);
  font-weight:700; font-style:italic;
  line-height:1.45;
  color:var(--white);
  margin:0 0 1.05rem;
  padding:.85rem 1rem;
  background:rgba(124,92,255,.09);
  border-radius:3px;
}
.cf-memo-sig{
  font-family:var(--m); font-size:.7rem;
  letter-spacing:.12em;
  color:var(--grey-d);
  margin:0;
}

/* rarity */
.cf-rare{
  font-family:var(--m); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--key);
  text-align:center;
  margin:1.5rem 0;
  padding:.7rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* sealed boxes */
.cf-sealbox{
  margin-bottom:.9rem;
  padding:1.15rem 1.2rem;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--ink1);
}
.cf-sealbox-h{
  font-family:var(--m); font-size:.64rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey-d);
  margin:0 0 .6rem;
}
.cf-sealbox-b{
  font-size:.95rem; line-height:1.7;
  color:var(--grey);
  margin:0;
}
.cf-em{ color:var(--white); font-weight:700; }

/* the redaction bar itself */
.cf-seal{
  display:inline-block;
  vertical-align:baseline;
  border:0; padding:0;
  cursor:pointer;
  font:inherit;
  background:var(--key);
  border-radius:2px;
  width:min(15rem, 78%);
  height:1.05em;
  position:relative;
  top:.16em;
  transition:transform .12s var(--e), background .2s var(--e);
}
.cf-seal-sm{ width:min(8.5rem, 52%); }
.cf-seal::after{
  content:"SEALED";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--m); font-size:.58rem; font-weight:700;
  letter-spacing:.24em;
  color:rgba(255,255,255,.82);
}
.cf-seal:hover{ background:var(--key-hi); }
.cf-seal.is-knocked{
  animation:cfKnock .4s var(--e);
}
@keyframes cfKnock{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-4px); }
  45%{ transform:translateX(4px); }
  70%{ transform:translateX(-2px); }
}
@media (prefers-reduced-motion:reduce){ .cf-seal.is-knocked{ animation:none; } }

.cf-stack .cf-locked{ margin-top:1.6rem; }

/* ==========================================================
   "NONE OF THESE ARE ME" — quiet reject, ask, replace
   ========================================================== */

/* deliberately low-status: small, plain, under the options */
.cf-reject{
  display:block;
  margin:1.15rem auto 0;
  background:none;
  border:0;
  padding:.5rem .25rem;
  font-family:var(--m);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--grey-d);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  transition:color .18s var(--e);
}
.cf-reject:hover{ color:var(--grey); }
.cf-reject[hidden]{ display:none; }

/* the ask */
.cf-ask{
  margin-top:1.2rem;
  padding:1.1rem 1rem;
  border:1px solid rgba(124,92,255,.36);
  border-left:2px solid var(--key);
  border-radius:4px;
  background:rgba(124,92,255,.06);
  animation:cfIn .3s var(--e) both;
}
.cf-ask[hidden]{ display:none; }
.cf-ask label{
  display:block;
  font-family:var(--m); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--key-hi);
  margin-bottom:.6rem;
}
.cf-ask input{
  width:100%;
  font-family:var(--f); font-size:.95rem;
  color:var(--white);
  background:#000;
  border:1px solid var(--line2);
  border-radius:3px;
  padding:.85rem .8rem;
  min-height:48px;
}
.cf-ask input::placeholder{ color:var(--grey-d); }
.cf-ask input:focus{
  outline:none; border-color:var(--key);
  box-shadow:0 0 0 3px rgba(124,92,255,.16);
}
.cf-ask-row{
  display:flex; gap:.6rem; margin-top:.75rem;
}
.cf-ask-row .dc-btn{ flex:0 0 auto; }
.cf-ask-row .btn{ flex:1; }

/* replacement banner — makes the swap obvious */
.cf-swapped{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--m); font-size:.64rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--key-hi);
  background:rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.42);
  border-radius:100px;
  padding:.38rem .8rem;
  margin:0 0 .95rem;
  animation:cfIn .34s var(--e) both;
}
.cf-swapped[hidden]{ display:none; }
.cf-swapped::before{
  content:"\21BB";
  font-size:.85rem;
  letter-spacing:0;
}

/* why the reject option isn't available right now */
.cf-nomore{
  margin:1.15rem auto 0;
  max-width:34ch;
  text-align:center;
  font-family:var(--m);
  font-size:.68rem; line-height:1.7;
  letter-spacing:.06em;
  color:var(--grey-d);
}
.cf-nomore[hidden]{ display:none; }

/* ---------- auth form + status ---------- */

.cf-form{ margin-bottom:.9rem; }
.cf-fld{ display:block; margin-bottom:.8rem; }
.cf-fld > span{
  display:block;
  font-family:var(--m); font-size:.64rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--key-hi);
  margin-bottom:.4rem;
}
.cf-fld input{
  width:100%;
  font-family:var(--f); font-size:1rem;
  color:var(--white);
  background:#000;
  border:1px solid var(--line2);
  border-radius:3px;
  padding:.9rem .85rem;
  min-height:50px;
}
.cf-fld input::placeholder{ color:var(--grey-d); }
.cf-fld input:focus{
  outline:none; border-color:var(--key);
  box-shadow:0 0 0 3px rgba(124,92,255,.16);
}
.cf-form .btn{ width:100%; margin-top:.3rem; }

.cf-status{
  margin:.85rem 0 0;
  font-family:var(--m); font-size:.74rem; line-height:1.65;
  letter-spacing:.03em;
  padding:.65rem .8rem;
  border-radius:3px;
  border-left:2px solid var(--key);
  background:rgba(124,92,255,.07);
  color:var(--grey);
}
.cf-status[hidden]{ display:none; }
.cf-status.is-bad{ border-left-color:#FF6B6B; color:#FFB4B4; background:rgba(255,107,107,.07); }
.cf-status.is-good{ border-left-color:#6EE7A8; color:#B6F2D2; background:rgba(110,231,168,.07); }

.cf-fine a{ color:var(--key-hi); text-decoration:underline; text-underline-offset:2px; }

/* sign out */
.cf-out-btn{
  background:none; border:1px solid var(--line2);
  border-radius:3px;
  padding:.45rem .8rem;
  font-family:var(--m); font-size:.66rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
  cursor:pointer;
}
.cf-out-btn:hover{ border-color:var(--key); color:var(--white); }

#fFile .cf-sealbox-b strong{ color:var(--white); }

/* already-have-a-file guard */
.cf-already{
  margin:1.5rem 0 0;
  padding:1.3rem 1.2rem;
  border:1px solid rgba(124,92,255,.4);
  border-left:2px solid var(--key);
  border-radius:4px;
  background:rgba(124,92,255,.07);
}
.cf-already[hidden]{ display:none; }
.cf-already-t{
  font-family:var(--m); font-size:.68rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--key-hi);
  margin:0 0 .6rem;
}
.cf-already-b{
  font-size:.95rem; line-height:1.6;
  color:var(--grey);
  margin:0 0 1.1rem;
}
.cf-already-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.cf-already-row .btn{ flex:1 1 auto; }
/* file page already shows the authbar, so its own sign-out is redundant */
body.is-signed-in .cf-out-btn{ display:none; }

/* sign-in page */
.si-wrap{ padding-top:1.5rem; text-align:center; }
.si-lede{ margin-bottom:2rem; }
.si-box{ text-align:left; margin-top:0; }
.si-box .cf-fine{ text-align:center; margin-top:.8rem; }

/* questionnaire: same treatment */
@media (max-width:900px){
  .cf-body{ background:var(--void); }
  .cf-an-sweep{ opacity:.7; }
}
.cf-q, .cf-result, .cf-analysis{ contain:layout paint style; }

/* resume an unfinished file */
.cf-resume{
  margin:1.5rem 0 0;
  padding:1.3rem 1.2rem;
  border:1px solid rgba(124,92,255,.4);
  border-left:2px solid var(--key);
  border-radius:4px;
  background:rgba(124,92,255,.07);
}
.cf-resume[hidden]{ display:none; }
.cf-resume-t{
  font-family:var(--m); font-size:.68rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--key-hi);
  margin:0 0 .6rem;
}
.cf-resume-b{
  font-size:.95rem; line-height:1.6;
  color:var(--grey);
  margin:0 0 1.1rem;
}
.cf-resume-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.cf-resume-row .btn{ flex:1 1 auto; }

/* file page: numbered dossier sections */
#fFile .cf-memo{ margin-bottom:.9rem; }
#fFile .cf-memo-h{ color:var(--grey-d); }
#fFile .cf-memo-b{ color:var(--grey); margin-bottom:0; }

/* the one they won't want to read */
.cf-memo-hot{
  border-left-color:#FF6B6B !important;
  background:rgba(255,107,107,.05) !important;
}
.cf-memo-hot .cf-memo-h{ color:#FFB4B4 !important; }

/* the actionable one */
.cf-memo-key{
  border-left-color:var(--key) !important;
  background:rgba(124,92,255,.09) !important;
}
.cf-memo-key .cf-memo-h{ color:var(--key-hi) !important; }
.cf-memo-key .cf-memo-b{ color:var(--white) !important; }

/* back a question */
.cf-back{
  background:none;
  border:1px solid var(--line2);
  border-radius:3px;
  padding:.4rem .7rem;
  font-family:var(--m); font-size:.66rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey);
  cursor:pointer;
  transition:border-color .18s var(--e), color .18s var(--e);
}
.cf-back:hover{ border-color:var(--key); color:var(--white); }
.cf-back[hidden]{ display:none; }

/* retake, on the file page */
.cf-retake{
  margin-top:1.3rem;
  padding:1.25rem 1.2rem;
  border:1px dashed var(--line2);
  border-radius:4px;
  text-align:center;
}
.cf-retake-t{
  font-family:var(--m); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey-d);
  margin:0 0 .6rem;
}
.cf-retake-b{
  font-size:.9rem; line-height:1.6;
  color:var(--grey-d);
  margin:0 auto 1.1rem;
  max-width:40ch;
}
.cf-retake-go{ display:inline-flex; }

/* shadow codename — moderate detail */
.cf-shadow-name{
  font-weight:900; font-size:1.4rem;
  letter-spacing:-.02em;
  color:var(--white);
  margin:0 0 .3rem;
}
.cf-shadow-line{
  font-style:italic; font-size:.95rem;
  color:var(--key-hi);
  margin:0 0 .8rem;
}

/* hidden M.A.A.S.K. — deliberately minimal */
.cf-hidden{
  margin-top:1.5rem;
  padding:1.6rem 1.2rem;
  border:1px solid var(--line2);
  border-radius:4px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(124,92,255,.12), transparent 70%),
    #000;
  text-align:center;
}
.cf-hidden-h{
  font-family:var(--m); font-size:.64rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--grey-d);
  margin:0 0 1rem;
}
.cf-hidden-name{
  font-weight:900;
  font-size:clamp(1.5rem,6vw,2.1rem);
  letter-spacing:-.025em;
  color:var(--white);
  margin:0 0 .45rem;
  text-shadow:0 0 30px var(--key-gl);
}
.cf-hidden-line{
  font-style:italic; font-size:.98rem;
  color:var(--grey);
  margin:0 0 1.2rem;
}
.cf-hidden-note{
  font-family:var(--m); font-size:.68rem; line-height:1.7;
  letter-spacing:.05em;
  color:var(--grey-d);
  margin:0;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.cf-sealbox-deep{ background:#000 !important; }

/* ==========================================================
   THREE LAYERS — each with its own visual language so they're
   never mistaken for one another
   ========================================================== */

.layer{
  position:relative;
  padding:1.7rem 1.3rem;
  border-radius:5px;
  text-align:center;
  margin-bottom:1.1rem;
}
.layer-tag{
  display:inline-block;
  font-family:var(--m); font-size:.6rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  padding:.34rem .75rem;
  border-radius:100px;
  margin:0 0 1.1rem;
}
.layer .cf-youare{ margin-bottom:.5rem; }
.layer-intro{
  font-size:.96rem; line-height:1.6;
  color:var(--grey);
  margin:1rem auto 0;
  max-width:44ch;
}

/* nested detail blocks (shadow layer) */
.layer-block{
  margin-top:1.1rem;
  padding:1rem 1.05rem;
  border-radius:4px;
  text-align:left;
  background:rgba(255,255,255,.03);
}
.layer-block-h{
  font-family:var(--m); font-size:.62rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 .5rem;
}
.layer-block-b{
  font-size:.93rem; line-height:1.6;
  color:var(--grey);
  margin:0;
}

/* ── LAYER 01 · CODENAME — violet, largest, the headline ── */
.layer-1{
  border:1px solid rgba(124,92,255,.45);
  background:
    radial-gradient(ellipse 90% 120% at 50% 0%, rgba(124,92,255,.16), transparent 72%),
    var(--ink1);
  box-shadow:0 0 60px -30px var(--key-gl);
  padding-block:2.2rem;
}
.layer-1 .layer-tag{
  color:#fff; background:var(--key);
}
.layer-1 .cf-name{ text-shadow:0 0 44px var(--key-gl); }
.layer-1 .cf-line{ color:var(--key-hi); }

/* ── LAYER 02 · SHADOW — steel, mid-size, flat ── */
.layer-2{
  border:1px solid #3A4757;
  border-left:3px solid #6E8CA8;
  background:linear-gradient(180deg, rgba(110,140,168,.09), rgba(110,140,168,.03));
}
.layer-2 .layer-tag{
  color:#BCD2E6; background:rgba(110,140,168,.22);
  border:1px solid rgba(110,140,168,.5);
}
.layer-2 .cf-name{ color:#DCE7F2; text-shadow:0 0 26px rgba(110,140,168,.35); }
.layer-2 .cf-line{ color:#9FB6CC; }
.layer-2 .layer-block-h{ color:#9FB6CC; }
.layer-2 .layer-block{ background:rgba(110,140,168,.07); }

/* ── LAYER 03 · HIDDEN MASK — crimson, smallest, sparse ── */
.layer-3{
  border:1px solid rgba(255,107,107,.38);
  border-top:3px solid #FF6B6B;
  background:
    radial-gradient(ellipse 80% 110% at 50% 0%, rgba(255,107,107,.10), transparent 70%),
    #000;
}
.layer-3 .layer-tag{
  color:#FFC9C9; background:rgba(255,107,107,.16);
  border:1px solid rgba(255,107,107,.45);
}
.layer-3 .cf-name{ color:#fff; text-shadow:0 0 30px rgba(255,107,107,.4); }
.layer-3 .cf-line{ color:#FFB4B4; }
.layer-3 .cf-hidden-note{
  border-top:1px solid rgba(255,107,107,.22);
  color:#C99;
}

/* smaller name for layers 2 and 3 */
.cf-name-sm{
  font-size:clamp(1.5rem,6vw,2.2rem) !important;
  margin:0 0 .35rem;
}
.cf-name.is-absent{
  font-size:clamp(1.1rem,4.4vw,1.5rem) !important;
  color:var(--grey-d) !important;
  text-shadow:none !important;
  letter-spacing:.1em;
}

/* ==========================================================
   THE ADVISOR — the thing they're actually here for
   ========================================================== */

.advisor{
  margin-top:1.6rem;
  padding:1.9rem 1.35rem;
  border:1px solid rgba(124,92,255,.45);
  border-radius:5px;
  background:
    radial-gradient(ellipse 100% 120% at 50% 0%, rgba(124,92,255,.18), transparent 72%),
    var(--ink1);
  box-shadow:0 0 70px -34px var(--key-gl);
  text-align:center;
}
.advisor-tag{
  display:inline-block;
  font-family:var(--m); font-size:.6rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:#fff; background:var(--key);
  padding:.34rem .75rem; border-radius:100px;
  margin:0 0 1.2rem;
}
.advisor-name{
  font-weight:900;
  font-size:clamp(1.9rem,7.5vw,2.8rem);
  letter-spacing:.02em;
  margin:0 0 .45rem;
  text-shadow:0 0 40px var(--key-gl);
}
.advisor-expand{
  font-family:var(--m); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--key-hi);
  margin:0 0 1.3rem;
  line-height:1.8;
}
.advisor-what{
  font-family:var(--m); font-size:.74rem; line-height:1.8;
  letter-spacing:.03em;
  color:var(--grey-d);
  margin:0 auto 1.3rem;
  max-width:42ch;
  padding-bottom:1.2rem;
  border-bottom:1px solid var(--line);
}
.advisor-hook{
  font-size:clamp(1rem,3.8vw,1.12rem);
  line-height:1.6;
  color:var(--white);
  margin:0 auto 1.6rem;
  max-width:42ch;
}
.advisor-hook strong{ color:var(--key-hi); font-weight:900; }
.advisor-ask{
  font-family:var(--m); font-size:.62rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey-d);
  margin:0 0 .75rem;
}
.advisor-prompts{
  list-style:none; margin:0 0 1.6rem; padding:0;
  display:grid; gap:.5rem;
  text-align:left;
}
.advisor-prompts li{
  font-size:.93rem; line-height:1.5;
  color:var(--grey);
  padding:.7rem .85rem;
  border:1px solid var(--line);
  border-left:2px solid rgba(124,92,255,.5);
  border-radius:3px;
  background:rgba(124,92,255,.05);
}
.advisor .cf-cta{ width:100%; }
.advisor-fine{
  font-family:var(--m); font-size:.68rem; line-height:1.7;
  letter-spacing:.05em;
  color:var(--grey-d);
  margin:.9rem 0 0;
}

/* ---------- pre-file intake: age + gender ---------- */

.cf-intake{ padding-top:.5rem; }
.cf-intake[hidden]{ display:none; }
.cf-intake-h{ min-height:auto; margin-bottom:1.8rem; }
.cf-intake-q{
  font-family:var(--m); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--key-hi);
  margin:0 0 .7rem;
}
.cf-chips{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:1.8rem;
}
.cf-chips button{
  font-family:var(--f); font-size:.93rem; font-weight:500;
  color:var(--white);
  background:var(--ink1);
  border:1px solid var(--line);
  border-radius:100px;
  padding:.7rem 1.1rem;
  min-height:46px;
  cursor:pointer;
  transition:border-color .18s var(--e), background .18s var(--e);
}
.cf-chips button:hover{ border-color:rgba(124,92,255,.6); }
.cf-chips button.is-on{
  background:rgba(124,92,255,.18);
  border-color:var(--key);
  box-shadow:0 0 0 1px var(--key);
}
.cf-intake-why{
  font-family:var(--m); font-size:.68rem; line-height:1.7;
  letter-spacing:.05em;
  color:var(--grey-d);
  margin:0 0 1.6rem;
  padding-left:.7rem;
  border-left:2px solid rgba(124,92,255,.4);
}
.cf-intake-go{ width:100%; }
.cf-intake-go:disabled{ opacity:.35; cursor:default; }

/* free-text gender */
.cf-other{
  width:100%;
  font-family:var(--f); font-size:1rem;
  color:var(--white);
  background:#000;
  border:1px solid var(--key);
  border-radius:3px;
  padding:.8rem .85rem;
  min-height:48px;
  margin:-1.2rem 0 1.8rem;
}
.cf-other[hidden]{ display:none; }
.cf-other::placeholder{ color:var(--grey-d); }
.cf-other:focus{ outline:none; box-shadow:0 0 0 3px rgba(124,92,255,.18); }