/* ==========================================================================
   experience.css — the "Experience Intellicamp" flow.

   Nine screens in one centred card: welcome, setup, generating, assessment,
   evaluating, result, insights, unlock, trial. Everything is drawn from the
   site's own tokens, so it follows whatever accent and theme the visitor has
   chosen in Appearance.

   TO REMOVE: delete this file, assets/js/experience.js, and the two lines
   that link them.
   ========================================================================== */
/* ===================== shared flow furniture ===================== */
.fw{position:fixed;inset:0;z-index:98000;display:none;place-items:center;padding:1.2rem}
.fw.is-open{display:grid}
.fw__veil{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(6px)}
.fw__x{position:absolute;top:1rem;right:1rem;z-index:5;width:34px;height:34px;display:grid;place-items:center;
  border-radius:10px;border:1px solid var(--line-soft);background:rgba(var(--ink-rgb),.7);color:var(--muted);
  cursor:pointer;transition:color .25s ease,transform .3s var(--ease)}
.fw__x:hover{color:var(--paper);transform:rotate(90deg)}

/* the shell each variation supplies */
.fw__box{position:relative;background:var(--ink-2);border:1px solid var(--line);overflow:hidden}

/* --- screens --- */
.sc{display:none;animation:sc-in .45s var(--ease)}
.sc.is-on{display:block}
@keyframes sc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sc__k{display:inline-flex;align-items:center;gap:.45rem;padding:.24rem .7rem;border-radius:999px;
  background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.45);
  color:var(--accent-ink);font-family:var(--font-display);font-size:.64rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.sc h3{margin:.8rem 0 .5rem;font-family:var(--font-display);font-size:clamp(1.3rem,1.1rem+.9vw,1.9rem);
  line-height:1.15;letter-spacing:-.02em}
.sc p.lede{margin:0 0 1.4rem;font-size:.95rem;line-height:1.6;color:var(--muted);max-width:56ch}

/* benefit chips */
.ben{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));margin-bottom:1.6rem}
.ben div{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;border-radius:12px;
  border:1px solid var(--line-soft);background:rgba(var(--ink-rgb),.45);font-size:.86rem}
.ben i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(var(--c-rgb),.16);border:1px solid rgba(var(--c-rgb),.5);color:var(--c);
  font-style:normal;font-size:.72rem;font-weight:700}

/* form controls */
.fg{display:grid;gap:.75rem;grid-template-columns:1fr 1fr;margin-bottom:1.1rem}
.fl{display:block;margin-bottom:.35rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-3)}
.fs{position:relative;display:block}
.fs::after{content:"";position:absolute;right:.85rem;top:50%;width:6px;height:6px;margin-top:-4px;
  border-right:1.6px solid var(--muted-2);border-bottom:1.6px solid var(--muted-2);transform:rotate(45deg);pointer-events:none}
.fs select{width:100%;appearance:none;-webkit-appearance:none;padding:.72rem 2rem .72rem .85rem;border-radius:10px;
  border:1px solid var(--line-soft);background:rgba(var(--ink-rgb),.5);color:var(--paper);font:inherit;font-size:.92rem;cursor:pointer}
.fs select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16)}
.diff{display:grid;gap:.5rem;grid-template-columns:repeat(4,1fr);margin-bottom:1.1rem}
.diff button{padding:.7rem .5rem;border-radius:12px;border:1px solid var(--line-soft);background:rgba(var(--ink-rgb),.45);
  color:var(--muted);font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;transition:all .25s ease}
.diff button:hover{color:var(--paper);border-color:var(--accent)}
.diff button.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.sum{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;padding:.9rem;border-radius:12px;
  border:1px dashed rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.05);margin-bottom:1.3rem}
.sum div{text-align:center}
.sum b{display:block;font-family:var(--font-display);font-size:1.15rem;color:var(--paper)}
.sum span{display:block;margin-top:.15rem;font-size:.7rem;color:var(--muted-3)}

/* loading */
.load{display:grid;place-items:center;gap:1.2rem;padding:2.4rem 0;text-align:center}
.load__d{position:relative;width:96px;height:96px}
.load__d svg{width:100%;height:100%;transform:rotate(-90deg)}
.load__d circle{fill:none;stroke-width:5}
.load__t{stroke:rgba(var(--line-rgb),.6)}
.load__p{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;
  transition:stroke-dashoffset .5s linear;filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.7))}
.load__c{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);
  font-size:1.1rem;color:var(--accent)}
.load__msg{font-size:.95rem;color:var(--paper);min-height:1.5em}
.load__sub{font-size:.8rem;color:var(--muted-3)}
.load__orb{position:absolute;inset:-26px;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.2);
  animation:fl-spin 6s linear infinite}
.load__orb::after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 12px 2px rgba(var(--accent-rgb),.9)}
@keyframes fl-spin{to{transform:rotate(360deg)}}

/* exam */
.ex__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.8rem;
  margin-bottom:1rem;border-bottom:1px solid var(--line-soft)}
.ex__meta{font-size:.82rem;color:var(--muted-2)}
.ex__timer{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.08);
  font-family:var(--font-display);font-size:.85rem;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.ex__prog{height:4px;border-radius:2px;background:rgba(var(--line-rgb),.6);overflow:hidden;margin-bottom:1.1rem}
.ex__prog i{display:block;height:100%;background:var(--accent);width:0;transition:width .5s var(--ease);
  box-shadow:0 0 12px 1px rgba(var(--accent-rgb),.6)}
.ex__q{font-size:1.02rem;line-height:1.55;margin:0 0 1rem;color:var(--paper)}
.ex__opts{display:grid;gap:.5rem;margin-bottom:1.2rem}
.ex__o{display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;border-radius:12px;
  border:1px solid var(--line-soft);background:rgba(var(--ink-rgb),.45);color:var(--muted);
  font:inherit;font-size:.92rem;text-align:left;cursor:pointer;transition:all .25s ease}
.ex__o:hover{color:var(--paper);border-color:var(--accent)}
.ex__o.is-on{border-color:var(--accent);background:rgba(var(--accent-rgb),.1);color:var(--paper)}
.ex__o b{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--line);font-size:.72rem;color:var(--muted-3)}
.ex__o.is-on b{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ex__pal{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem}
.ex__pal i{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-style:normal;
  font-size:.7rem;border:1px solid var(--line-soft);color:var(--muted-3);cursor:pointer;
  font-variant-numeric:tabular-nums;transition:all .25s ease}
.ex__pal i.done{background:rgba(var(--accent-rgb),.18);border-color:rgba(var(--accent-rgb),.5);color:var(--accent-ink)}
.ex__pal i.mark{border-color:var(--p4);color:var(--p4)}
.ex__pal i.now{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.ex__nav{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}

/* result */
.res{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center;margin-bottom:1.3rem}
.res__d{position:relative;width:132px;height:132px}
.res__d svg{width:100%;height:100%;transform:rotate(-90deg)}
.res__d circle{fill:none;stroke-width:9}
.res__t{stroke:rgba(var(--line-rgb),.55)}
.res__p{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:352;stroke-dashoffset:352;
  transition:stroke-dashoffset 1.2s var(--ease);filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.6))}
.res__c{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.res__c b{display:block;font-family:var(--font-display);font-size:1.9rem;line-height:1}
.res__c span{display:block;font-size:.7rem;color:var(--muted-3);margin-top:.2rem}
.res__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.res__i{padding:.65rem .8rem;border-radius:10px;border:1px solid var(--line-soft);background:rgba(var(--ink-rgb),.45)}
.res__i b{display:block;font-family:var(--font-display);font-size:1.05rem}
.res__i span{display:block;font-size:.72rem;color:var(--muted-3);margin-top:.1rem}

/* insights */
.ins{display:grid;gap:.7rem;grid-template-columns:1fr 1fr;margin-bottom:1rem}
.ins__c{padding:.85rem .95rem;border-radius:12px;border:1px solid var(--line-soft);background:rgba(var(--ink-rgb),.45)}
.ins__c b{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.55rem;color:var(--c)}
.ins__c ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.85rem;color:var(--muted-2)}
.ins__c li{display:grid;grid-template-columns:14px 1fr;gap:.45rem}
.ins__c li::before{content:"";width:6px;height:6px;margin-top:.42rem;margin-left:4px;border-radius:50%;background:var(--c)}
.lock{position:relative;margin-top:.4rem;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft)}
.lock__b{filter:blur(5px);opacity:.5;padding:.9rem;display:grid;gap:.5rem}
.lock__b i{display:block;height:9px;border-radius:4px;background:rgba(var(--line-rgb),.9)}
.lock__b i:nth-child(2){width:74%}.lock__b i:nth-child(3){width:88%}.lock__b i:nth-child(4){width:60%}
.lock__o{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:.8rem;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.35),rgba(var(--ink-rgb),.85))}
.lock__o b{display:block;font-family:var(--font-display);font-size:.92rem}
.lock__o span{display:block;font-size:.76rem;color:var(--muted-2);margin-top:.15rem}

/* conversion + trial */
.conv{padding:1.3rem;border-radius:16px;position:relative;overflow:hidden;
  border:1px solid rgba(var(--accent-rgb),.5);
  background:linear-gradient(150deg,rgba(var(--accent-rgb),.14),transparent 62%),rgba(var(--ink-rgb),.5)}
.conv::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(var(--accent-rgb),.18) 50%,transparent 64%);
  background-size:250% 100%;animation:fl-sheen 5s var(--ease) infinite}
@keyframes fl-sheen{0%,60%{background-position:150% 0}100%{background-position:-150% 0}}
.conv ul{list-style:none;margin:.9rem 0 1.2rem;padding:0;display:grid;gap:.45rem;
  grid-template-columns:1fr 1fr;font-size:.86rem;color:var(--muted-2)}
.conv li{display:grid;grid-template-columns:15px 1fr;gap:.45rem}
.conv li::before{content:"";width:7px;height:7px;margin-top:.4rem;margin-left:4px;border-radius:50%;background:var(--accent)}
.roles{display:grid;gap:.6rem;grid-template-columns:repeat(3,1fr);margin-top:1rem}
.role{padding:.85rem;border-radius:12px;border:1px solid var(--line-soft);background:rgba(var(--ink-rgb),.45)}
.role b{display:block;font-family:var(--font-display);font-size:.92rem;margin-bottom:.4rem}
.role span{display:block;font-size:.78rem;color:var(--muted-3);line-height:1.45}
.fbtns{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

@media(max-width:720px){.fg,.res,.ins,.conv ul,.roles{grid-template-columns:1fr}
  .diff,.sum{grid-template-columns:1fr 1fr}.res{justify-items:center;text-align:center}}

/* ============ the shell: a centred card ============
   Chosen over a side rail and a full-screen takeover. The rail costs 236px
   the questions want, and a takeover makes a ten-minute commitment feel
   heavier than it is. Segment dots along the top carry the progress instead. */
.fw__box {
  width: min(720px, 100%);
  max-height: min(88vh, 720px);
  border-radius: 22px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  box-shadow: 0 40px 100px -40px #000;
  opacity: 0;
  transform: translateY(18px) scale(.975);
  transition: opacity .4s ease, transform .5s var(--ease);
}

.fw.is-open .fw__box { opacity: 1; transform: none; }

.fw__top { padding: 1.1rem 1.3rem .9rem; }

.fw__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .7rem;
}

.fw__k {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.fw__n { font-size: .76rem; color: var(--muted-2); }

.fw__dots { display: flex; gap: 4px; }

.fw__dots u {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--line-rgb), .6);
  text-decoration: none;
  transition: background .4s ease, box-shadow .4s ease;
}

.fw__dots u.done { background: rgba(var(--accent-rgb), .55); }
.fw__dots u.now { background: var(--accent); box-shadow: 0 0 10px 1px rgba(var(--accent-rgb), .7); }

.fw__stage { padding: 0 1.3rem 1.4rem; overflow-y: auto; min-height: 0; }

body.fw-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sc, .fw__box, .conv::after, .load__orb { animation: none; transition: none; }
}