/* ============================================================
   /tools/ index, page CSS for static/tools/index.html ONLY (2026-10-01).
   Load order: bex-kit-v2.css -> stylist-profit-calculator/fonts/lato-900.css -> THIS -> bex-kit-lux-v1.css.
   Same visual system as /tools/stylist-profit-calculator/ (deep teal stage, one soft spotlight, Lato 900 caps
   headline with an iridescent second line, white card with the iridescent top edge, primary pill), but a
   small file of its own so the calculator's CSS can change without touching this page.
   Every rule is scoped to a tl- class. Colors come from kit tokens (--paper, --tone, --ink, --primary,
   --deep, --mint, --teal-950) and the lux layer's tokens (--lux-*). No local :root, no hex.
   Phone first: 390x844 is the design target.
   ============================================================ */
.tl-body{
  --tl-col:520px;
  --tl-on-2:color-mix(in srgb,var(--paper) 80%,transparent);
  --tl-card-sh:0 2px 4px color-mix(in srgb,var(--teal-950) 18%,transparent),0 30px 60px -18px color-mix(in srgb,var(--teal-950) 70%,transparent);
  margin:0;background:var(--lux-deep);color:var(--paper);overflow-x:hidden}
.tl-app{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:
    radial-gradient(70% 50% at 50% -10%,color-mix(in srgb,var(--mint) 26%,transparent),transparent 68%),
    radial-gradient(45% 30% at 90% 40%,color-mix(in srgb,var(--lux-iris) 10%,transparent),transparent 70%),
    radial-gradient(70% 40% at 50% 106%,color-mix(in srgb,var(--tealbright) 26%,transparent),transparent 70%),
    var(--lux-panel)}
.tl-beam{position:absolute;left:50%;top:-4%;width:min(900px,130vw);height:70%;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 10%,transparent),color-mix(in srgb,var(--mint) 7%,transparent) 70%,transparent);
  clip-path:polygon(41% 0,59% 0,86% 100%,14% 100%);filter:blur(52px)}

.tl-main{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;width:100%;max-width:var(--tl-col);margin:0 auto;
  padding:max(40px,env(safe-area-inset-top)) 16px 28px}
.tl-eyebrow{margin:0 auto 16px;max-width:22em;font-family:var(--sans);font-weight:900;font-size:.8rem;line-height:1.35;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);text-wrap:balance}
.tl-h1{--tl-w:calc(min(100vw,var(--tl-col)) - 32px);margin:0;font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.98;color:var(--paper);
  font-size:clamp(1.6rem,calc(var(--tl-w) / 8.4),3.6rem)}
.tl-h1 span{display:block;white-space:nowrap}
.tl-h1 em{display:table;margin-left:auto;margin-right:auto;padding-inline:.04em;font-style:normal;margin-top:.08em;padding-bottom:.06em;color:transparent;background-image:var(--lux-iridescent);-webkit-background-clip:text;background-clip:text}
.tl-sub{margin:18px auto 0;max-width:22em;font-family:var(--sans);font-weight:700;font-size:1.15rem;line-height:1.35;color:var(--paper);text-wrap:balance}

/* the tool card: the same white ticket surface as the calculator result card */
.tl-list{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px}
.tl-card{position:relative;z-index:0;padding:26px 18px 20px;border-radius:22px;text-align:center;color:var(--ink);
  background:var(--lux-iridescent) top/100% 6px no-repeat,var(--tone);box-shadow:var(--tl-card-sh)}
.tl-glow{position:absolute;z-index:-1;inset:-6px -8px 10px;border-radius:36px;pointer-events:none;
  background:linear-gradient(115deg,color-mix(in srgb,var(--lux-blush) 50%,transparent),color-mix(in srgb,var(--lux-iris) 55%,transparent) 45%,color-mix(in srgb,var(--mint) 45%,transparent));
  filter:blur(38px);opacity:.55}
.tl-card-h{margin:0;font-family:var(--sans);font-weight:900;font-size:1.45rem;line-height:1.15;letter-spacing:-.01em;color:var(--deep);text-wrap:balance}
.tl-card-p{margin:10px auto 18px;max-width:22em;font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.5;color:var(--ink);text-wrap:pretty}
.tl-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;padding:16px 18px;border-radius:999px;text-decoration:none;
  background:var(--primary);color:var(--paper);font-family:var(--sans);font-weight:900;font-size:1.02rem;line-height:1.1;letter-spacing:.11em;text-transform:uppercase;
  box-shadow:0 12px 26px -10px color-mix(in srgb,var(--primary) 75%,transparent);transition:background .2s var(--ease),transform .2s var(--ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tl-cta:focus-visible{outline:3px solid var(--lux-iris);outline-offset:3px}
@media(hover:hover){.tl-cta:hover{background:var(--deep);transform:translateY(-1px)}}

.tl-foot{width:100%;max-width:var(--tl-col);margin:0 auto;padding:8px 16px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px}
.tl-foot-wm{display:block;height:80px;width:auto}
.tl-foot-sws{margin:0;font-family:var(--sans);font-weight:900;font-size:.625rem;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);opacity:.8}
.tl-foot-sws sup{font-size:.7em;letter-spacing:0;vertical-align:top;position:relative;top:-.1em}

/* the small label over each card: which line of the promise it serves (2026-10-02) */
.tl-card-k{margin:0 0 6px;font-family:var(--sans);font-weight:900;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tealbright)}

/* the quiz pop-up (2026-10-02): the quiz page in an iframe. A centered box on desktop, full screen on a phone (Andrew: a pop-up everywhere). */
html.tl-lock{overflow:hidden}
.tl-pop{border:0;padding:0;margin:auto;width:min(440px,calc(100% - 32px));height:min(860px,calc(100dvh - 48px));max-height:none;border-radius:24px;overflow:hidden;
  background:var(--teal-950);box-shadow:0 40px 90px -20px color-mix(in srgb,var(--teal-950) 90%,transparent)}
.tl-pop[open]{display:flex;animation:tl-in .3s cubic-bezier(.3,1.3,.5,1)}
.tl-pop::backdrop{background:color-mix(in srgb,var(--teal-950) 64%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@keyframes tl-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.tl-frame{display:block;flex:1;width:100%;height:100%;border:0;background:var(--teal-950);color-scheme:dark}
@media(max-width:520px){.tl-pop{width:100%;max-width:100%;height:100dvh;border-radius:0}}
@media(prefers-reduced-motion:reduce){.tl-pop[open]{animation:none}}

/* way out of the hub (2026-10-08): the page had no nav, so a stylist from a story could only reach the two tools.
   The em above is display:table so the iridescent fill covers the whole line (block width clipped the last letter). */
.tl-foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:0 auto 18px;font-family:var(--sans);font-weight:700;font-size:.95rem}
.tl-foot-links a{color:var(--paper);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--paper) 45%,transparent);text-underline-offset:4px;padding:6px 2px}
.tl-foot-links a:hover,.tl-foot-links a:focus-visible{text-decoration-color:var(--mint)}
.tl-foot-home{display:inline-block;line-height:0}
.tl-foot-home:focus-visible,.tl-foot-links a:focus-visible{outline:3px solid var(--lux-iris);outline-offset:3px;border-radius:6px}