/*
 * TrueLine Assessment — front-end styles
 *
 * Every rule is scoped under .tl-assessment and every class is prefixed "tl-",
 * so nothing here can collide with (or be overridden by) the host WordPress theme.
 * State classes use the is-* convention (is-active, is-selected, is-open ...).
 */

/* ------------------------------------------------------------------ */
/* Root, tokens and resets                                             */
/* ------------------------------------------------------------------ */
.tl-assessment{
  --tl-navy: #0f3566;
  --tl-navy-deep: #0a2447;
  --tl-navy-soft: #16407e;
  --tl-yellow: #ffd500;
  --tl-blue: #4ab7ff;
  --tl-white: #ffffff;
  --tl-muted: rgba(255,255,255,0.68);
  --tl-font-head: 'Space Grotesk', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tl-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(20px, 5vw, 56px) clamp(14px, 4vw, 24px);
  background: #0f3566;
  color: var(--tl-white);
  font-family: var(--tl-font-body);
  font-size:16px;
  line-height:1.5;
  text-align:left;
  -webkit-tap-highlight-color: transparent;
}
.tl-assessment.tl-fullwidth{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.tl-assessment *,
.tl-assessment *::before,
.tl-assessment *::after{ box-sizing:border-box; }

.tl-assessment h2,
.tl-assessment h3,
.tl-assessment p{
  margin:0; padding:0; border:0;
  color:inherit; text-transform:none; letter-spacing:normal; text-decoration:none;
}
.tl-assessment button{
  margin:0; text-transform:none; letter-spacing:normal; text-shadow:none;
  -webkit-appearance:none; appearance:none; line-height:1.2; min-height:0;
}
.tl-assessment svg{ max-width:none; display:block; }
.tl-assessment [hidden]{ display:none !important; }

/* ------------------------------------------------------------------ */
/* Decorative blobs + sonar rings                                      */
/* ------------------------------------------------------------------ */
.tl-assessment .tl-blob{ position:absolute; border-radius:50%; filter: blur(60px); opacity:0; pointer-events:none; z-index:0; }
.tl-assessment .tl-blob--1{ width:340px; height:340px; background: var(--tl-blue); top:-80px; left:-100px;
  animation: tl-floatA 12s ease-in-out infinite, tl-blob1In .9s ease .1s both; }
.tl-assessment .tl-blob--2{ width:280px; height:280px; background: var(--tl-yellow); bottom:-90px; right:-80px;
  animation: tl-floatB 14s ease-in-out infinite, tl-blob2In .9s ease .25s both; }
@keyframes tl-floatA{ 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(30px,25px) } }
@keyframes tl-floatB{ 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(-25px,-20px) } }
@keyframes tl-blob1In{ from{ opacity:0; } to{ opacity:.45; } }
@keyframes tl-blob2In{ from{ opacity:0; } to{ opacity:.28; } }

.tl-assessment .tl-ping{
  position:absolute; top:50%; left:50%; width:220px; height:220px; border-radius:50%;
  border:2px solid var(--tl-yellow); transform:translate(-50%,-50%) scale(.3); opacity:0;
  pointer-events:none; z-index:0;
  animation: tl-pingOut 1.6s ease-out 2 both;
}
.tl-assessment .tl-ping--2{ border-color: var(--tl-blue); animation-delay:.3s; }
@keyframes tl-pingOut{
  0%{ transform:translate(-50%,-50%) scale(.35); opacity:.55; }
  100%{ transform:translate(-50%,-50%) scale(2.6); opacity:0; }
}

/* ------------------------------------------------------------------ */
/* Glass card                                                          */
/* ------------------------------------------------------------------ */
.tl-assessment .tl-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width: 760px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border-radius: 26px;
  padding: clamp(22px, 4vw, 44px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
  overflow:hidden;
  animation: tl-cardEntrance .85s cubic-bezier(.22,1.5,.36,1) both,
             tl-glowPulse 2.2s ease-in-out .85s 1 both;
}
@keyframes tl-cardEntrance{
  0%{ opacity:0; transform: scale(.8) translateY(46px); filter: blur(12px); }
  55%{ filter: blur(0); }
  100%{ opacity:1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes tl-glowPulse{
  0%{ box-shadow: 0 30px 80px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 rgba(255,213,0,0); }
  40%{ box-shadow: 0 30px 80px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25), 0 0 55px 8px rgba(255,213,0,.4); }
  100%{ box-shadow: 0 30px 80px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 rgba(255,213,0,0); }
}
.tl-assessment .tl-card::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255,0.04);
  pointer-events:none;
}

/* ------------------------------------------------------------------ */
/* Header: eyebrow, title, progress                                    */
/* ------------------------------------------------------------------ */
.tl-assessment .tl-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--tl-yellow); font-weight:700; margin:0 0 10px;
  opacity:0; animation: tl-headerUp .6s ease .5s both;
}
.tl-assessment .tl-dot{ width:7px; height:7px; border-radius:50%; background: var(--tl-yellow); box-shadow:0 0 0 4px rgba(255,213,0,0.25); animation: tl-pulseDot 1.6s infinite; }
@keyframes tl-pulseDot{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.4); opacity:.6 } }

.tl-assessment h2.tl-title{
  font-family: var(--tl-font-head);
  font-size: clamp(22px, 3.4vw, 32px);
  line-height:1.15;
  margin:0 0 22px;
  font-weight:700;
  color: var(--tl-white);
  opacity:0; animation: tl-headerUp .6s ease .6s both;
}
.tl-assessment .tl-title span{ color: var(--tl-blue); }
@keyframes tl-headerUp{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

.tl-assessment .tl-progress{
  display:flex; align-items:center; gap:8px; margin-bottom:30px;
  opacity:0; animation: tl-headerUp .6s ease .7s both;
}
.tl-assessment .tl-seg{
  flex:1; height:6px; border-radius:99px; background: rgba(255,255,255,0.14); overflow:hidden; position:relative;
}
.tl-assessment .tl-seg i{
  position:absolute; inset:0; width:0%; border-radius:99px;
  background: linear-gradient(90deg, var(--tl-blue), var(--tl-yellow));
  box-shadow: 0 0 12px rgba(255,213,0,0.5);
  transition: width .55s cubic-bezier(.65,0,.35,1);
}
.tl-assessment .tl-steplabel{ font-size:12px; color: var(--tl-muted); font-weight:600; white-space:nowrap; }

/* ------------------------------------------------------------------ */
/* Step panels + transitions                                           */
/* ------------------------------------------------------------------ */
.tl-assessment .tl-panels{ position:relative; min-height:360px; perspective:1400px; }
.tl-assessment .tl-step{ display:none; }
.tl-assessment .tl-step.is-active{ display:block; animation: tl-stepInFwd .62s cubic-bezier(.22,1,.36,1); transform-origin:center; }
.tl-assessment .tl-step.is-active.is-back{ animation: tl-stepInBack .62s cubic-bezier(.22,1,.36,1); }
.tl-assessment .tl-step.is-leaving{ display:block; animation: tl-stepOutFwd .34s cubic-bezier(.5,0,.75,0) forwards; }
.tl-assessment .tl-step.is-leaving.is-back{ animation: tl-stepOutBack .34s cubic-bezier(.5,0,.75,0) forwards; }

@keyframes tl-stepInFwd{
  0%{ opacity:0; transform: translateX(56px) rotateY(-10deg) scale(.94); filter: blur(8px); }
  60%{ filter: blur(0); }
  100%{ opacity:1; transform: translateX(0) rotateY(0) scale(1); filter: blur(0); }
}
@keyframes tl-stepInBack{
  0%{ opacity:0; transform: translateX(-56px) rotateY(10deg) scale(.94); filter: blur(8px); }
  60%{ filter: blur(0); }
  100%{ opacity:1; transform: translateX(0) rotateY(0) scale(1); filter: blur(0); }
}
@keyframes tl-stepOutFwd{
  0%{ opacity:1; transform: translateX(0) rotateY(0) scale(1); filter: blur(0); }
  100%{ opacity:0; transform: translateX(-48px) rotateY(8deg) scale(.93); filter: blur(6px); }
}
@keyframes tl-stepOutBack{
  0%{ opacity:1; transform: translateX(0) rotateY(0) scale(1); filter: blur(0); }
  100%{ opacity:0; transform: translateX(48px) rotateY(-8deg) scale(.93); filter: blur(6px); }
}

.tl-assessment .tl-step.is-active > *{ animation: tl-childUp .5s cubic-bezier(.22,1,.36,1) both; }
.tl-assessment .tl-step.is-active > *:nth-child(1){ animation-delay:.08s; }
.tl-assessment .tl-step.is-active > *:nth-child(2){ animation-delay:.15s; }
.tl-assessment .tl-step.is-active > *:nth-child(3){ animation-delay:.22s; }
.tl-assessment .tl-step.is-active > *:nth-child(4){ animation-delay:.29s; }
.tl-assessment .tl-step.is-active > *:nth-child(5){ animation-delay:.36s; }
@keyframes tl-childUp{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

.tl-assessment p.tl-q-label{ font-family: var(--tl-font-head); font-size: clamp(18px,2.6vw,24px); font-weight:600; margin:0 0 6px; color: var(--tl-white); }
.tl-assessment p.tl-q-sub{ color: var(--tl-muted); font-size:14px; margin:0 0 26px; max-width:520px; }

/* ------------------------------------------------------------------ */
/* Step 1: locations / skyline                                         */
/* ------------------------------------------------------------------ */
.tl-assessment .tl-loc-controls{ display:flex; align-items:center; gap:18px; margin-bottom:22px; }
.tl-assessment button.tl-loc-btn{
  width:46px; height:46px; padding:0; border-radius:14px; border:1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06); color: var(--tl-white); font-size:22px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease, background .2s ease;
}
.tl-assessment button.tl-loc-btn:hover{ background: rgba(74,183,255,0.22); border-color: var(--tl-blue); color: var(--tl-white); }
.tl-assessment button.tl-loc-btn:active{ transform: scale(.9); }
.tl-assessment .tl-loc-num{
  font-family: var(--tl-font-head); font-size:40px; font-weight:700; min-width:64px; text-align:center;
  color: var(--tl-yellow); line-height:1;
}
.tl-assessment .tl-loc-word{ color: var(--tl-muted); font-size:13px; }

.tl-assessment .tl-skyline{
  display:flex; align-items:flex-end; gap:6px; height:150px;
  padding:10px 6px 0; margin-bottom:6px;
  border-bottom:2px solid rgba(255,255,255,0.18);
  overflow-x:auto; overflow-y:hidden;
  scroll-behavior:smooth;
}
.tl-assessment .tl-bldg{
  flex:0 0 auto; width:34px; border-radius:5px 5px 0 0;
  background: linear-gradient(180deg, var(--tl-navy-soft), var(--tl-navy));
  border:1px solid rgba(74,183,255,0.4);
  position:relative;
  display:grid; grid-template-columns:repeat(2,1fr); gap:3px; padding:5px;
  align-content:start;
  animation: tl-popIn .38s cubic-bezier(.34,1.56,.64,1);
}
.tl-assessment .tl-bldg i{ display:block; width:100%; aspect-ratio:1; border-radius:2px; background: rgba(255,213,0,0.55); }
.tl-assessment .tl-bldg i:nth-child(odd){ background: rgba(74,183,255,0.55); }
@keyframes tl-popIn{
  0%{ transform: scaleY(0); opacity:0; }
  60%{ transform: scaleY(1.08); opacity:1; }
  100%{ transform: scaleY(1); }
}

.tl-assessment .tl-chips{ display:flex; gap:10px; margin-top:34px; flex-wrap:wrap; }
.tl-assessment button.tl-chip{
  padding:9px 16px; border-radius:99px; border:1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05); color: var(--tl-white); font-weight:600; font-size:13px;
  cursor:pointer; transition: all .2s ease;
}
.tl-assessment button.tl-chip:hover{ border-color: var(--tl-blue); background: rgba(74,183,255,0.15); color: var(--tl-white); }
.tl-assessment button.tl-chip.is-active{ background: var(--tl-yellow); color: var(--tl-navy-deep); border-color: var(--tl-yellow); }

/* ------------------------------------------------------------------ */
/* Step 2: lines per location                                          */
/* ------------------------------------------------------------------ */
.tl-assessment .tl-loclines{
  display:flex; flex-direction:column; gap:14px;
  max-height:360px; overflow-y:auto; padding:4px 6px 4px 2px; margin:-4px -6px -4px -2px;
}
.tl-assessment .tl-lcard{
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14);
  border-radius:14px; padding:14px 16px;
}
.tl-assessment .tl-lcard-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.tl-assessment .tl-lcard-lbl{ font-weight:700; font-size:13px; }
.tl-assessment .tl-lcard-val{
  font-family: var(--tl-font-head); font-weight:800; font-size:18px;
  background: linear-gradient(90deg, var(--tl-blue), var(--tl-yellow));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.tl-assessment .tl-pins{ display:flex; align-items:flex-end; gap:3px; height:40px; touch-action:pan-y; cursor:pointer; user-select:none; -webkit-user-select:none; }
.tl-assessment .tl-pin{
  flex:1 0 auto; width:8px; min-width:6px; height:55%;
  border-radius:6px;
  background: rgba(255,255,255,0.14);
  transition: background .2s ease, transform .15s cubic-bezier(.2,.9,.3,1.4), box-shadow .2s ease, height .2s ease;
  position:relative; cursor:pointer;
}
.tl-assessment .tl-pin.is-on{
  background: linear-gradient(180deg, var(--tl-yellow), var(--tl-blue));
  box-shadow: 0 6px 14px -4px rgba(74,183,255,0.55);
  height:100%;
}
.tl-assessment .tl-pin.is-tip{
  background: linear-gradient(180deg,#fff, var(--tl-yellow));
  box-shadow: 0 8px 18px -4px rgba(255,213,0,0.6);
}
.tl-assessment .tl-pin:hover{ transform: translateY(-4px) scale(1.18); }

/* ------------------------------------------------------------------ */
/* Step 3: rent vs purchase                                            */
/* ------------------------------------------------------------------ */
.tl-assessment .tl-plan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:22px; }
@media (max-width:520px){ .tl-assessment .tl-plan-grid{ grid-template-columns:1fr; } }
.tl-assessment button.tl-plan{
  border:1px solid rgba(255,255,255,0.18); border-radius:18px; padding:20px 18px;
  background: rgba(255,255,255,0.04); cursor:pointer; transition: all .25s ease;
  position:relative; overflow:hidden; text-align:left; color: var(--tl-white);
  font-family: var(--tl-font-body); width:100%; display:block; font-size:16px; font-weight:400;
}
.tl-assessment button.tl-plan:hover{ transform: translateY(-3px); border-color: var(--tl-blue); color: var(--tl-white); background: rgba(255,255,255,0.04); }
.tl-assessment button.tl-plan.is-selected{
  border-color: var(--tl-yellow);
  background: linear-gradient(160deg, rgba(255,213,0,0.14), rgba(74,183,255,0.08));
  box-shadow: 0 14px 30px -12px rgba(255,213,0,0.35);
}
.tl-assessment .tl-plan-icon{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
  background: var(--tl-navy-deep);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 6px 16px -6px rgba(0,0,0,0.55);
}
.tl-assessment .tl-plan-icon svg{ width:22px; height:22px; }
.tl-assessment .tl-plan[data-plan="rent"] .tl-plan-icon svg{ stroke: var(--tl-blue); }
.tl-assessment .tl-plan[data-plan="purchase"] .tl-plan-icon svg{ stroke: var(--tl-yellow); }
.tl-assessment .tl-plan-title{ display:block; margin:0 0 6px; font-family: var(--tl-font-head); font-size:17px; font-weight:700; color: var(--tl-white); line-height:1.25; }
.tl-assessment .tl-plan-desc{ display:block; margin:0; color: var(--tl-muted); font-size:13px; font-weight:400; line-height:1.5; }
.tl-assessment .tl-plan-check{
  position:absolute; top:14px; right:14px; width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center;
  font-size:12px; transition: all .2s ease; line-height:1;
}
.tl-assessment .tl-plan.is-selected .tl-plan-check{ background: var(--tl-yellow); border-color: var(--tl-yellow); color: var(--tl-navy-deep); }

.tl-assessment .tl-tier-panel{ max-height:0; opacity:0; overflow:hidden; transition: max-height .5s ease, opacity .4s ease; }
.tl-assessment .tl-tier-panel.is-open{ max-height:520px; opacity:1; }
.tl-assessment .tl-tier-inner{ padding-top:8px; border-top:1px dashed rgba(255,255,255,0.18); margin-top:4px; }
.tl-assessment .tl-tier-title{ font-size:13px; color: var(--tl-muted); margin:14px 0 10px; }

.tl-assessment .tl-dv{
  display:flex; flex-direction:column; gap:12px;
  padding:14px 16px; border-radius:16px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14);
  opacity:0; transform: translateY(16px) scale(.96); max-height:280px; overflow-y:auto;
  transition: opacity .5s cubic-bezier(.22,1.6,.36,1), transform .5s cubic-bezier(.22,1.6,.36,1);
}
.tl-assessment .tl-dv.is-shown{ opacity:1; transform: translateY(0) scale(1); }
.tl-assessment .tl-dv-row{ display:flex; align-items:center; gap:14px; }
.tl-assessment .tl-dv-row:not(:last-child){ padding-bottom:12px; border-bottom:1px dashed rgba(255,255,255,0.12); }
.tl-assessment .tl-dv-icon{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background: linear-gradient(135deg, var(--tl-navy-soft), var(--tl-navy-deep));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 8px 20px -6px rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center;
}
.tl-assessment .tl-dv-icon svg{ width:32px; height:22px; }
.tl-assessment .tl-dv-info{ flex:1; min-width:0; }
.tl-assessment .tl-dv-name{ font-family: var(--tl-font-head); font-weight:700; font-size:14px; margin-bottom:2px; }
.tl-assessment .tl-dv-meta{ font-size:11.5px; color: var(--tl-muted); }
.tl-assessment .tl-dv-price{ font-family: var(--tl-font-head); font-weight:800; font-size:15px; color: var(--tl-yellow); white-space:nowrap; }

/* ------------------------------------------------------------------ */
/* Circular navigation + progress ring                                 */
/* ------------------------------------------------------------------ */
.tl-assessment .tl-nav{ display:flex; justify-content:space-between; align-items:flex-start; margin-top:34px; gap:12px; }
.tl-assessment .tl-nav-item{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.tl-assessment .tl-fab-caption{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:800;
  color: var(--tl-muted); transition: color .2s ease;
}
.tl-assessment .tl-nav-item:hover .tl-fab-caption{ color: var(--tl-white); }

.tl-assessment button.tl-fab{
  border:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .22s ease;
}
.tl-assessment button.tl-fab--back{
  width:50px; height:50px; border-radius:50%;
  background: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.24); color: var(--tl-white);
}
.tl-assessment button.tl-fab--back:hover{ background: rgba(74,183,255,0.2); border-color: var(--tl-blue); transform: translateX(-5px) scale(1.05); color: var(--tl-white); }
.tl-assessment button.tl-fab--back:active{ transform: translateX(-3px) scale(.92); }
.tl-assessment .tl-fab--back svg{ width:18px; height:18px; }

.tl-assessment .tl-next-wrap{ position:relative; width:76px; height:76px; }
.tl-assessment .tl-ring{ position:absolute; inset:0; width:100%; height:100%; transform: rotate(-90deg); pointer-events:none; }
.tl-assessment .tl-ring-bg{ fill:none; stroke: rgba(255,255,255,0.14); stroke-width:4; }
.tl-assessment .tl-ring-fg{
  fill:none; stroke-width:4; stroke-linecap:round;
  stroke-dasharray:219.9; stroke-dashoffset:219.9;
  transition: stroke-dashoffset .55s cubic-bezier(.22,1,.36,1), stroke .2s ease;
}
.tl-assessment .tl-ring-fg.is-disabled{ stroke: rgba(255,255,255,0.2) !important; }

.tl-assessment button.tl-fab--next{
  position:absolute; inset:9px; border-radius:50%;
  background: linear-gradient(135deg, var(--tl-yellow), #ffea70); color: var(--tl-navy-deep);
  box-shadow: 0 10px 26px -8px rgba(255,213,0,0.6);
}
.tl-assessment button.tl-fab--next:hover{ transform: scale(1.08); box-shadow: 0 14px 32px -8px rgba(255,213,0,0.75); color: var(--tl-navy-deep); }
.tl-assessment button.tl-fab--next:active{ transform: scale(.92); }
.tl-assessment button.tl-fab--next:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; transform:none; }
.tl-assessment .tl-fab--next svg{ width:22px; height:22px; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.tl-assessment button.tl-fab--next:hover:not(:disabled) svg{ transform: translateX(3px); }

/* ------------------------------------------------------------------ */
/* Pill buttons (result screen + contact form)                         */
/* ------------------------------------------------------------------ */
.tl-assessment button.tl-btn{
  border:none; border-radius:13px; padding:13px 22px; font-weight:700; font-size:14px;
  cursor:pointer; transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease; font-family: var(--tl-font-body);
}
.tl-assessment button.tl-btn:active{ transform: scale(.96); }
.tl-assessment button.tl-btn--primary{
  background: linear-gradient(90deg, var(--tl-yellow), #ffea70);
  color: var(--tl-navy-deep);
  box-shadow: 0 10px 24px -8px rgba(255,213,0,0.55);
}
.tl-assessment button.tl-btn--primary:hover{ color: var(--tl-navy-deep); }
.tl-assessment button.tl-btn--primary:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.tl-assessment button.tl-btn--ghost{
  background: transparent; color: var(--tl-muted); border:1px solid rgba(255,255,255,0.2);
}
.tl-assessment button.tl-btn--ghost:hover{ color: var(--tl-white); border-color: var(--tl-blue); background: transparent; }

/* ------------------------------------------------------------------ */
/* Result screen                                                       */
/* ------------------------------------------------------------------ */
.tl-assessment .tl-result{ text-align:center; padding-top:6px; }
.tl-assessment .tl-badge{
  width:76px; height:76px; margin:0 auto 16px; border-radius:50%;
  background: linear-gradient(135deg, var(--tl-blue), var(--tl-yellow));
  display:flex; align-items:center; justify-content:center; font-size:34px;
  box-shadow: 0 16px 40px -14px rgba(74,183,255,0.7);
  animation: tl-badgeIn .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tl-badgeIn{ 0%{ transform: scale(0) rotate(-30deg); opacity:0 } 100%{ transform: scale(1) rotate(0); opacity:1 } }
.tl-assessment .tl-result h2{ font-family: var(--tl-font-head); font-size: clamp(20px,3vw,26px); margin:0 0 6px; font-weight:700; color: var(--tl-white); }
.tl-assessment .tl-result p.tl-result-sub{ color: var(--tl-muted); font-size:14px; margin-bottom:26px; }

.tl-assessment .tl-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
@media (max-width:560px){ .tl-assessment .tl-stats{ grid-template-columns:1fr 1fr; } }
.tl-assessment .tl-stat{
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:14px;
  padding:14px 10px; text-align:left;
}
.tl-assessment .tl-stat-k{ font-size:11px; color: var(--tl-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.tl-assessment .tl-stat-v{ font-family: var(--tl-font-head); font-size:19px; font-weight:700; color: var(--tl-white); }
.tl-assessment .tl-stat-v em{ color: var(--tl-yellow); font-style:normal; }

.tl-assessment .tl-order{
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:18px; padding:4px 0 0; text-align:left; margin-bottom:22px;
  overflow:hidden;
}
.tl-assessment .tl-order-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}
.tl-assessment .tl-order-title{ font-family: var(--tl-font-head); font-weight:700; font-size:14px; }
.tl-assessment .tl-order-id{ font-size:11px; color: var(--tl-muted); letter-spacing:.04em; }

.tl-assessment .tl-order-items{ padding:6px 18px; }
.tl-assessment .tl-order-item{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px dashed rgba(255,255,255,0.14);
  opacity:0; transform: translateX(-14px);
  animation: tl-itemSlideIn .45s cubic-bezier(.22,1,.36,1) forwards;
}
.tl-assessment .tl-order-item:last-child{ border-bottom:none; }
@keyframes tl-itemSlideIn{ to{ opacity:1; transform: translateX(0); } }

.tl-assessment .tl-oi-icon{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  background: linear-gradient(135deg, var(--tl-navy-soft), var(--tl-navy-deep));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
}
.tl-assessment .tl-oi-icon svg{ width:22px; height:22px; }
.tl-assessment .tl-oi-body{ flex:1; min-width:0; }
.tl-assessment .tl-oi-name{ font-size:13.5px; font-weight:700; }
.tl-assessment .tl-oi-meta{ font-size:11.5px; color: var(--tl-muted); margin-top:2px; }
.tl-assessment .tl-oi-amt{ font-family: var(--tl-font-head); font-weight:800; font-size:14px; white-space:nowrap; }

.tl-assessment .tl-order-totals{ padding:14px 18px 18px; }
.tl-assessment .tl-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:13.5px; color: var(--tl-muted); }
.tl-assessment .tl-row--grand{
  margin-top:8px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.16);
  color: var(--tl-white); font-size:15px; font-weight:700;
}
.tl-assessment .tl-row--grand .tl-amt{ font-family: var(--tl-font-head); font-size:22px; color: var(--tl-yellow); }
.tl-assessment .tl-row .tl-amt{ font-weight:700; }

.tl-assessment .tl-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.tl-assessment canvas.tl-confetti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }

/* ------------------------------------------------------------------ */
/* Contact capture (inline, opens from the result screen)              */
/* ------------------------------------------------------------------ */
.tl-assessment .tl-contact{
  max-height:0; opacity:0; overflow:hidden; text-align:left; visibility:hidden;
  transition: max-height .55s ease, opacity .4s ease, margin .4s ease, visibility 0s linear .55s;
}
.tl-assessment .tl-contact.is-open{
  max-height:900px; opacity:1; margin-top:4px; visibility:visible;
  transition: max-height .55s ease, opacity .4s ease, margin .4s ease, visibility 0s linear 0s;
}
.tl-assessment .tl-contact-inner{
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16);
  border-radius:18px; padding:20px 18px;
}
.tl-assessment p.tl-contact-title{ font-family: var(--tl-font-head); font-weight:700; font-size:16px; margin:0 0 4px; }
.tl-assessment p.tl-contact-sub{ color: var(--tl-muted); font-size:13px; margin:0 0 16px; }
.tl-assessment .tl-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .tl-assessment .tl-field-row{ grid-template-columns:1fr; } }
.tl-assessment .tl-field{ margin-bottom:12px; }
.tl-assessment .tl-field label{ display:block; font-size:12px; font-weight:700; color: var(--tl-muted); margin:0 0 6px; letter-spacing:.02em; }
.tl-assessment .tl-field label .tl-opt{ font-weight:500; opacity:.75; }
.tl-assessment .tl-field input.tl-input,
.tl-assessment .tl-field textarea.tl-input{
  display:block; width:100%; margin:0; padding:12px 14px;
  background: rgba(255,255,255,0.07); color: var(--tl-white);
  border:1px solid rgba(255,255,255,0.22); border-radius:12px;
  font-family: var(--tl-font-body); font-size:14px; line-height:1.4; box-shadow:none; outline:none;
  height:auto; min-height:0;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.tl-assessment .tl-field textarea.tl-input{ resize:vertical; min-height:84px; }
.tl-assessment .tl-field input.tl-input::placeholder,
.tl-assessment .tl-field textarea.tl-input::placeholder{ color: rgba(255,255,255,0.4); }
.tl-assessment .tl-field input.tl-input:focus,
.tl-assessment .tl-field textarea.tl-input:focus{
  border-color: var(--tl-blue); background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 3px rgba(74,183,255,0.25);
}
.tl-assessment .tl-field input.tl-input.is-invalid,
.tl-assessment .tl-field textarea.tl-input.is-invalid{ border-color:#ff8a8a; box-shadow:0 0 0 3px rgba(255,138,138,0.2); }
.tl-assessment .tl-error{ color:#ffb3b3; font-size:13px; min-height:0; margin:2px 0 12px; }
.tl-assessment .tl-error:empty{ display:none; }
.tl-assessment .tl-contact-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Honeypot: invisible to people, tempting to bots */
.tl-assessment .tl-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; opacity:0; }

/* Success state */
.tl-assessment .tl-success{
  text-align:center; padding:8px 4px 4px;
  animation: tl-childUp .5s cubic-bezier(.22,1,.36,1) both;
}
.tl-assessment .tl-success .tl-badge{ width:64px; height:64px; font-size:28px; margin-bottom:14px; }
.tl-assessment .tl-success h3{ font-family: var(--tl-font-head); font-size:20px; font-weight:700; margin:0 0 8px; color: var(--tl-white); }
.tl-assessment .tl-success p{ color: var(--tl-muted); font-size:14px; max-width:460px; margin:0 auto 18px; }
.tl-assessment .tl-success p strong{ color: var(--tl-yellow); }

/* ------------------------------------------------------------------ */
/* Focus + reduced motion                                              */
/* ------------------------------------------------------------------ */
.tl-assessment button:focus-visible,
.tl-assessment .tl-pins:focus-visible{ outline:2px solid var(--tl-yellow); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .tl-assessment *,
  .tl-assessment *::before,
  .tl-assessment *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .tl-assessment .tl-eyebrow,
  .tl-assessment h2.tl-title,
  .tl-assessment .tl-progress{ opacity:1; }
}