/* ============================================================
   Cognuum — REQUEST ACCESS
   A front-end application layer. Three columns mirroring the lens
   system (35% context · 15% steps · 50% question). Frosted, calm,
   serious. Theme-aware. Not a form — an application.
   ============================================================ */
.access-layer{
  position:fixed; inset:0; z-index:200;
  visibility:hidden; pointer-events:none;
  --access-accent:#e9eaee;
}
.access-layer.open{ visibility:visible; pointer-events:auto; }

.al-dim{
  position:absolute; inset:0;
  background:rgba(5,6,9,0.66);
  -webkit-backdrop-filter:blur(34px) saturate(118%); backdrop-filter:blur(34px) saturate(118%);
  opacity:0; transition:opacity .55s ease;
}
.access-layer.is-revealed .al-dim{ opacity:1; }

.al-stage{ position:absolute; inset:0; overflow:hidden; }

.al-grid{
  position:absolute; inset:0;
  display:grid; grid-template-columns:35% 15% 50%;
  --al-top:clamp(48px,8vh,96px);
}
/* INTENTIONAL ASYMMETRY (desktop): the question is the anchor; progress sits
   lower (near the answer area); context lowest, like editorial marginalia.
   Eye reads Why ← Where ← What as a staircase, not a grid. */
@media (min-width:1101px){
  .al-context{ align-items:flex-start; }
  .al-context-in{ padding-top:calc(var(--al-top) + 132px); }
  .al-steps{ justify-content:flex-start; padding-top:calc(var(--al-top) + 64px); }
}

.al-close{
  position:absolute; top:clamp(18px,2.4vh,30px); right:clamp(20px,2.6vw,40px); z-index:5;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  background:rgba(20,21,25,0.42); border:1px solid var(--border-strong); border-radius:50%;
  color:var(--text-muted); cursor:pointer; opacity:0; transform:scale(.85);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .25s ease, color .25s ease, opacity .45s ease .3s, transform .45s ease .3s;
}
.access-layer.is-revealed .al-close{ opacity:1; transform:none; }
.al-close:hover{ border-color:var(--border-accent); color:var(--text-primary); }
.al-close svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }

/* persistent COGNUUM wordmark — matches the top bar EXACTLY (same gutter,
   same 128px bar height + vertical centring, same type) so it never shifts. */
.al-mark{
  position:absolute; top:0; left:0; height:128px; z-index:5;
  display:flex; align-items:center; padding-left:var(--pad-x);
  font-size:21px; font-weight:400; letter-spacing:0.42em; color:var(--ink-wordmark);
  opacity:0; transition:opacity .6s ease .15s; pointer-events:none;
}
.access-layer.is-revealed .al-mark{ opacity:1; }
@media (max-width:1199px){ .al-mark{ height:88px; padding-left:44px; } }
@media (max-width:767px){ .al-mark{ height:72px; padding-left:26px; font-size:17px; letter-spacing:0.34em;
  left:0; right:0; width:100%;
  background:linear-gradient(180deg, rgba(8,9,12,0.97) 0%, rgba(8,9,12,0.92) 64%, rgba(8,9,12,0) 100%);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } }
body.light .al-mark{ background:none; }
@media (max-width:767px){ body.light .al-mark{
  background:linear-gradient(180deg, rgba(240,238,233,0.97) 0%, rgba(240,238,233,0.92) 64%, rgba(240,238,233,0) 100%); } }

/* ---- column 1 : context (travels with the step; whitespace separates, no divider) ---- */
.al-context{ position:relative; display:flex; align-items:center; min-width:0; }
.al-context-in{
  padding:clamp(48px,8vh,96px) clamp(40px,3.4vw,64px) clamp(48px,8vh,96px) clamp(40px,5vw,84px);
  opacity:0; transform:translateY(8px); filter:blur(6px);
  transition:opacity .8s ease .1s, transform .9s cubic-bezier(.22,.61,.18,1) .1s, filter .8s ease .1s;
}
.access-layer.is-revealed .al-context-in{ opacity:1; transform:none; filter:none; }
/* per-step context change */
.al-context-in.al-ctx-in{ animation:al-ctx-in .42s cubic-bezier(.22,.61,.18,1) both; }
@keyframes al-ctx-in{ from{ opacity:0; transform:translateY(8px); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
.al-eyebrow{ font-size:13px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--access-accent); margin-bottom:22px; }
.al-title{ font-size:clamp(28px,2.8vw,40px); line-height:1.08; font-weight:400; letter-spacing:-0.022em; color:var(--text-primary); margin-bottom:22px; text-wrap:balance; }
.al-lead{ font-size:clamp(14px,1.15vw,16px); line-height:1.6; color:var(--text-secondary); max-width:34em; }
.al-fineprint{ margin-top:26px; font-size:13px; line-height:1.7; letter-spacing:0.02em; color:var(--text-disabled); }

/* ---- column 2 : steps ---- */
.al-steps{
  position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:clamp(20px,3vh,34px); padding:clamp(40px,6vh,90px) clamp(12px,1.4vw,26px);
  opacity:0; transform:translateY(8px); filter:blur(6px);
  transition:opacity .8s ease .3s, transform .85s cubic-bezier(.22,.61,.18,1) .3s, filter .8s ease .3s;
}
.access-layer.is-revealed .al-steps{ opacity:1; transform:none; filter:none; }
.al-step{ display:flex; align-items:baseline; gap:11px; cursor:default; text-decoration:none; opacity:0.28; transition:opacity .4s ease, color .4s ease; }
.al-step.is-done{ cursor:pointer; opacity:0.55; }
.al-step-n{ font-size:12px; font-weight:500; letter-spacing:0.14em; color:var(--text-secondary); transition:color .35s ease; }
.al-step-l{ font-size:clamp(14px,1vw,16px); font-weight:400; letter-spacing:-0.006em; color:var(--text-primary); line-height:1.2; transition:color .35s ease, font-size .35s ease; }
.al-step.is-active{ opacity:1; }
.al-step.is-active .al-step-n{ color:var(--access-accent); }
.al-step.is-active .al-step-l{ color:var(--access-accent); font-size:clamp(15px,1.15vw,17px); }

/* ---- column 3 : question ---- */
.al-panel{ position:relative; min-width:0; overflow:hidden; }
.al-panel-in{
  position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(48px,8vh,96px) clamp(40px,4vw,78px) clamp(40px,5vh,64px) clamp(34px,3vw,56px);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(10px); filter:blur(6px);
  transition:opacity .8s ease .42s, transform .9s cubic-bezier(.22,.61,.18,1) .42s, filter .8s ease .42s;
}
.access-layer.is-revealed .al-panel-in{ opacity:1; transform:none; filter:none; }

/* CLOSING — content fades out first (fast), then the frosted background recedes */
.access-layer.is-closing .al-context-in,
.access-layer.is-closing .al-steps,
.access-layer.is-closing .al-panel-in,
.access-layer.is-closing .al-close{
  opacity:0 !important; transform:translateY(-6px); filter:blur(2px);
  animation:none !important;
  transition:opacity .3s ease, transform .35s cubic-bezier(.22,.61,.18,1), filter .3s ease !important;
}
.access-layer.is-closing .al-success,
.access-layer.is-closing .al-success *{ animation:none !important; }
/* kill EVERY entrance animation while closing so opacity:0 wins (animations
   otherwise override !important and pin content visible on the result screen) */
.access-layer.is-closing *{ animation:none !important; }
/* per-step transition */
.al-panel-in.al-in{ animation:al-q-in .34s cubic-bezier(.22,.61,.18,1) both; }
@keyframes al-q-in{ from{ opacity:0; transform:translateY(10px); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
.al-panel-in.al-fade{ opacity:0; transform:translateY(-8px); transition:opacity .4s ease, transform .4s ease; }

.al-q-k{ font-size:12px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--access-accent); margin-bottom:18px; }
.al-q{ font-size:clamp(22px,2.15vw,30px); line-height:1.14; font-weight:400; letter-spacing:-0.018em; color:var(--text-primary); margin-bottom:clamp(22px,2.6vh,32px); text-wrap:balance; }
.al-hint{ margin-top:-14px; margin-bottom:22px; font-size:13px; letter-spacing:0.04em; color:var(--text-disabled); }

/* options — quiet rows, subtle selection (no loud fill) */
.al-options{ display:flex; flex-direction:column; gap:10px; }
.al-opt{
  text-align:left; font-family:inherit; font-size:16px; font-weight:450; letter-spacing:0.004em;
  color:var(--text-muted); background:transparent;
  border:1px solid var(--border-default); border-radius:4px;
  padding:16px 20px; cursor:pointer; min-height:50px;
  transition:border-color .25s ease, color .25s ease, background .25s ease, box-shadow .3s ease;
}
.al-opt:hover{ border-color:var(--border-strong); color:var(--text-primary); }
/* premium selection: border + faint accent tint + very light glow (no loud fill) */
.al-opt.is-sel{
  border-color:var(--access-accent); color:var(--text-primary);
  background:color-mix(in srgb, var(--access-accent) 7%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--access-accent) 30%, transparent),
             0 0 22px -8px color-mix(in srgb, var(--access-accent) 45%, transparent);
}

/* textarea + fields */
.al-textarea{
  width:100%; min-height:140px; resize:vertical; font-family:inherit; font-size:16px; line-height:1.5;
  color:var(--text-primary); background:rgba(255,255,255,0.02);
  border:1px solid var(--border-default); border-radius:3px; padding:16px 18px;
  transition:border-color .25s ease;
}
.al-textarea:focus{ outline:none; border-color:var(--access-accent); }
.al-fields{ display:flex; flex-direction:column; gap:20px; }
.al-field{ display:flex; flex-direction:column; gap:9px; }
.al-field span{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.al-field span em{ font-style:normal; text-transform:none; letter-spacing:0.02em; opacity:0.7; }
.al-field input{
  font-family:inherit; font-size:16px; color:var(--text-primary);
  background:rgba(255,255,255,0.02); border:1px solid var(--border-default); border-radius:3px;
  padding:13px 16px; min-height:48px; transition:border-color .25s ease;
}
.al-field input:focus{ outline:none; border-color:var(--access-accent); }

/* inline warn */
.al-warn{ margin-top:18px; font-size:13px; letter-spacing:0.02em; color:var(--text-disabled); opacity:0; transition:opacity .3s ease; }
.al-warn.show{ opacity:1; }

/* actions */
.al-actions{ margin-top:auto; padding-top:clamp(30px,4vh,48px); display:flex; align-items:center; justify-content:space-between; gap:18px; }
/* auto-advance steps show only Back — it sits right beneath the options, not pinned to the foot */
.al-actions.is-back-only{ margin-top:0; padding-top:clamp(16px,2.4vh,26px); justify-content:flex-start; }
.al-back{ font-family:inherit; font-size:14px; letter-spacing:0.04em; color:var(--text-secondary); background:none; border:0; cursor:pointer; padding:8px 2px; transition:color .25s ease; }
.al-back:hover{ color:var(--text-primary); }
.al-next{ margin:0; }

/* success */
.al-success{ display:flex; flex-direction:column; }
.al-success-h{ font-size:clamp(26px,2.6vw,36px); line-height:1.1; font-weight:400; letter-spacing:-0.022em; color:var(--text-primary); margin-bottom:18px; text-wrap:balance; }
.al-success-p{ font-size:16px; line-height:1.6; color:var(--text-secondary); max-width:34em; }
.al-success-note{ margin-top:22px; font-size:14px; letter-spacing:0.02em; color:var(--text-disabled); }
.al-success-cycle{ margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.08);
  font-size:clamp(17px,1.5vw,20px); font-weight:400; letter-spacing:-0.01em; color:var(--text-primary); }
.al-success-cycle span{ display:block; font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-disabled); margin-bottom:8px; }
body.light .al-success-cycle{ border-top-color:rgba(0,0,0,0.1); color:#1c1d21; }

/* ---- assessment result: lens relevance rows ---- */
.as-insight{ margin-bottom:clamp(20px,2.6vh,30px); color:var(--text-primary); }

/* fragmentation score — editorial, not gamified */
.as-score{ padding:clamp(22px,3vh,30px) 0; border-top:1px solid rgba(255,255,255,0.08); }
.as-score-top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.as-score-k{ font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-disabled); }
.as-score-v{ font-size:clamp(30px,3.4vw,46px); font-weight:400; letter-spacing:-0.02em; color:var(--text-primary); line-height:1; }
.as-score-v em{ font-style:normal; font-size:0.4em; letter-spacing:0.04em; color:var(--text-disabled); }
.as-score-bar{ position:relative; height:2px; margin:14px 0 14px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; }
.as-score-bar i{ position:absolute; inset:0 auto 0 0; background:var(--magenta); border-radius:2px; box-shadow:0 0 14px -2px var(--magenta);
  transform-origin:left; animation:as-bar 1s cubic-bezier(.22,.61,.18,1) both; }
.as-score-p{ font-size:14px; line-height:1.55; color:var(--text-secondary); max-width:42em; }

/* recommended starting point */
.as-rec{ --rc:var(--text-muted); margin-top:clamp(22px,3vh,32px); padding-top:clamp(22px,3vh,30px); border-top:1px solid rgba(255,255,255,0.08); }
.as-rec-k{ font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-disabled); margin-bottom:12px; }
.as-rec-n{ font-size:clamp(22px,2.2vw,28px); font-weight:400; letter-spacing:-0.018em; color:var(--rc); margin-bottom:12px; }
.as-rec-p{ font-size:15px; line-height:1.55; color:var(--text-secondary); max-width:42em; }

body.light .as-score{ border-top-color:rgba(0,0,0,0.1); }
body.light .as-score-v{ color:#1c1d21; }
body.light .as-score-bar{ background:rgba(0,0,0,0.08); }
body.light .as-rec{ border-top-color:rgba(0,0,0,0.1); }
.as-rels{ display:flex; flex-direction:column; gap:clamp(18px,2.4vh,26px); margin:clamp(24px,3vh,34px) 0 clamp(8px,1vh,14px); }
.as-rel{ --rc:var(--text-muted); }
.as-rel-cyan{ --rc:var(--cyan); }
.as-rel-pink{ --rc:var(--magenta); }
.as-rel-white{ --rc:var(--reality); }
.as-rel-amber{ --rc:var(--amber); }
.as-rel-top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.as-rel-name{ font-size:17px; font-weight:400; letter-spacing:0.01em; color:var(--text-primary); }
.as-rel-tag{ font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--rc); }
.as-rel-bar{ position:relative; height:2px; margin:10px 0 9px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; }
.as-rel-bar i{ position:absolute; left:0; top:0; bottom:0; background:var(--rc); border-radius:2px; box-shadow:0 0 12px -2px var(--rc);
  transform-origin:left; animation:as-bar .8s cubic-bezier(.22,.61,.18,1) both; }
@keyframes as-bar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.as-rel-p{ font-size:14px; line-height:1.5; color:var(--text-secondary); max-width:42em; }
.as-final{ margin-top:clamp(20px,2.6vh,30px); padding-top:clamp(20px,2.6vh,28px); border-top:1px solid rgba(255,255,255,0.08); }
body.light .as-rel-bar{ background:rgba(0,0,0,0.08); }
body.light .as-rel-name{ color:#1c1d21; }
body.light .as-final{ border-top-color:rgba(0,0,0,0.1); }

/* ---- light theme ---- */
body.light .access-layer{ --access-accent:#26272c; }
body.light .al-dim{ background:rgba(236,233,227,0.62); }
body.light .al-context{ border-right-color:rgba(0,0,0,0.07); }
body.light .al-close{ background:rgba(255,255,255,0.5); border-color:rgba(0,0,0,0.16); color:#42434a; }
body.light .al-close:hover{ border-color:rgba(0,0,0,0.42); color:#1c1d21; }
body.light .al-title, body.light .al-q, body.light .al-success-h{ color:#1c1d21; }
body.light .al-lead, body.light .al-success-p{ color:#56565d; }
body.light .al-opt{ border-color:rgba(0,0,0,0.14); color:#56565d; }
body.light .al-opt:hover{ border-color:rgba(0,0,0,0.3); color:#1c1d21; }
body.light .al-opt.is-sel{ border-color:#26272c; color:#1c1d21; background:rgba(0,0,0,0.02); }
body.light .al-textarea, body.light .al-field input{ background:rgba(0,0,0,0.02); border-color:rgba(0,0,0,0.14); color:#1c1d21; }
body.light .al-step-l{ color:#26272c; }

/* ---- tablet : stacked, generous ---- */
@media (max-width:1100px){
  .al-grid{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr; position:absolute; inset:0; overflow-y:auto; }
  .al-context{ border-right:0; border-bottom:1px solid rgba(255,255,255,0.07); display:block; }
  .al-context-in{ padding:clamp(56px,8vh,84px) clamp(28px,6vw,56px) clamp(28px,4vh,40px); }
  .al-steps{ flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:16px 26px;
    padding:18px clamp(28px,6vw,56px); border-bottom:1px solid rgba(255,255,255,0.07); }
  .al-step-l{ display:none; }
  .al-step.is-active .al-step-l{ display:none; }
  .al-panel{ overflow:visible; }
  .al-panel-in{ position:relative; inset:auto; padding:clamp(32px,5vh,52px) clamp(28px,6vw,56px) clamp(40px,6vh,64px); }
  body.light .al-context{ border-bottom-color:rgba(0,0,0,0.07); }
  body.light .al-steps{ border-bottom-color:rgba(0,0,0,0.07); }
}

/* ---- mobile : single column, editorial ---- */
@media (max-width:767px){
  /* start content below the (now-backed) sticky logo so the first line isn't hidden */
  .al-context-in{ padding:96px 24px 26px; text-align:left; }
  .al-steps{ gap:14px 20px; padding:16px 24px; }
  .al-step{ opacity:0.4; }
  .al-step-n{ font-size:13px; }
  .al-panel-in{ padding:28px 24px 44px; }
  .al-q{ font-size:24px; }
  .al-opt{ font-size:16px; padding:16px 18px; }
  .al-actions{ padding-top:30px; }
}