/* ============================================================
   /tools/stylist-profit-calculator/ (moved from /lp/stylist-calculator/ 2026-10-01) r3 (2026-09-30): 3-line H1, keep/save bridge, stacked Bex quote. r2: the tap-through story layout.
   Page CSS for index.html ONLY. Load order: bex-kit-v2.css -> fonts/lato-900.css
   -> THIS -> bex-kit-lux-v1.css.
   Visual system borrowed from /giveaway/ (bex-site PR 223): the deep lux stage with one
   soft spotlight, Lato 900 caps headline with an iridescent second line, pill buttons,
   the white card with the iridescent top edge.
   Every rule is scoped to an scl- 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. Page-level custom properties live on .scl-body.
   Phone first: 390x844 is the design target. Desktop is the same flow in a ~520px column.
   ============================================================ */

.scl-body{
  --scl-col:520px;
  --scl-on:var(--paper);
  --scl-on-2:color-mix(in srgb,var(--paper) 80%,transparent);
  --scl-hair:color-mix(in srgb,var(--paper) 22%,transparent);
  --scl-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);
  background:var(--teal-950);color:var(--paper);overflow-x:hidden}
.scl-body [hidden]{display:none!important}

/* =========================================================================
   1. THE STAGE: deep teal, one soft spotlight (the giveaway's .stage + .tp-beam)
   ========================================================================= */
.scl-app{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  /* r11 (Andrew 10-01): the /apply/ stage, darker and moodier, for contrast and one look across apply, calculator, giveaway.
     Same base and glow colors as /apply/ (.ap-app + its shade), centered because this layout is centered
     (a corner glow lit one side of the photo wall). The spotlight beam below stays.
     r12 (Andrew 10-01): the giveaway's lighter teal blends up from the bottom left, same as /giveaway/. */
  background:
    radial-gradient(60% 34% at 50% -6%,color-mix(in srgb,var(--lux-iris) 18%,transparent),transparent 70%),
    radial-gradient(70% 30% at 50% 106%,color-mix(in srgb,var(--mint) 16%,transparent),transparent 72%),
    radial-gradient(85% 75% at 0% 100%,color-mix(in srgb,var(--tealbright) 55%,transparent),transparent 70%),
    var(--teal-950)}
.scl-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)}

/* =========================================================================
   2. TOP: story progress bar, back arrow, small wordmark
   ========================================================================= */
.scl-top{width:100%;max-width:var(--scl-col);margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 16px 0}
/* r11 (Andrew 10-01): same bar as /apply/ r6. Instagram-style, one thin segment per question; the current
   question's segment fills all the way (a quick fill-in), never a part-filled stub. Result screen = all full. */
.scl-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.scl-seg{display:block;height:2.5px;border-radius:999px;background:color-mix(in srgb,var(--paper) 30%,transparent);overflow:hidden}
.scl-seg i{display:block;height:100%;width:0;border-radius:inherit;background:var(--paper)}
.scl-seg.is-done i{width:100%}
.scl-seg.is-now i{width:100%;transform-origin:left center;animation:scl-segfill .6s var(--ease) both}
@keyframes scl-segfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.scl-seg.is-now.is-still i{animation:none}
.scl-seg.is-undo i{width:100%;transform-origin:left center;animation:scl-segundo .45s var(--ease) both}
@keyframes scl-segundo{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.scl-toprow{position:relative;display:flex;align-items:center;justify-content:center;height:52px;margin-top:4px}
.scl-wm{display:block;height:24px;width:auto}
.scl-back{position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:var(--paper);cursor:pointer;padding:0;transition:background .2s var(--ease)}
.scl-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================================
   3. SCREENS: one at a time, centered in the phone, a quick slide + fade between
   ========================================================================= */
.scl-stage{flex:1;display:flex;flex-direction:column;width:100%;max-width:var(--scl-col);margin:0 auto;padding:0 16px max(28px,env(safe-area-inset-bottom))}
.scl-screen{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:stretch;text-align:center;padding:12px 0 28px}
.scl-screen.is-in{animation:scl-in .22s var(--ease) both}
.scl-screen.is-in-back{animation:scl-in-back .22s var(--ease) both}
.scl-screen.is-out{animation:scl-out .11s ease-in both}
.scl-screen.is-out-back{animation:scl-out-back .11s ease-in both}
@keyframes scl-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes scl-in-back{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes scl-out{to{opacity:0;transform:translateX(-18px)}}
@keyframes scl-out-back{to{opacity:0;transform:translateX(18px)}}

/* ---------- screen 0: eyebrow, loud headline, sub ---------- */
/* the giveaway's loud line, r3: three lines, Lato 900 caps, only the middle line iridescent.
   All three lines fill the column, so the headline reads as one solid block: font size = column width /
   the line's measured width in em (Chrome, Lato 900, this letter-spacing: 10.42 / 11.0 / 5.93em, plus a
   small safety margin). r4 (Andrew 09-30): question headline, all three lines one size, set by the longest line. Lato 900 caps can.t go bigger
   without breaking the 16px gutter. clamp() floors and caps; white-space:nowrap is the backstop. */
.scl-h1{--scl-w:calc(min(100vw,var(--scl-col)) - 32px);margin:0;font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.98;color:var(--paper);text-wrap:nowrap}
.scl-h1{font-size:clamp(1.4rem,calc(var(--scl-w) / 11.3),3.3rem)}
.scl-h1 .scl-l1,.scl-h1 .scl-l2,.scl-h1 .scl-l3{display:block;white-space:nowrap;font-size:1em}
.scl-h1 .scl-l2,.scl-h1 .scl-l3{margin-top:.08em}
/* r13 (Andrew 10-01): the $$$ is the brand's light italic accent (EB Garamond italic, the "Giveaway" style) in the iridescent gradient. */
.scl-h1 .scl-cash{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.14em;letter-spacing:0;text-transform:none;
  padding:0 .1em 0 .02em;color:transparent;background-image:var(--lux-iridescent);-webkit-background-clip:text;background-clip:text}
.scl-h1 .scl-l3{font-style:normal;font-weight:900;padding-bottom:.06em;color:transparent;background-image:var(--lux-iridescent);-webkit-background-clip:text;background-clip:text}
.scl-sub{margin:18px 0 0;font-family:var(--sans);font-weight:700;font-size:1.15rem;line-height:1.35;color:var(--scl-on)}

/* ---------- questions + helper lines ---------- */
.scl-q{margin:0 auto;max-width:15em;font-family:var(--sans);font-weight:700;font-size:1.75rem;line-height:1.2;letter-spacing:-.01em;color:var(--paper);text-wrap:balance}
.scl-q:focus{outline:none}
.scl-q0{margin-top:40px;font-size:1.625rem}
/* r9: the question + the down arrow are ONE centered group (inline-flex row). The row carries the question's size so the arrow scales with it. */
.scl-qrow{display:flex;align-items:center;justify-content:center;gap:.5em;margin-top:24px;font-size:1.625rem}
.scl-qrow .scl-q0{margin:0;font-size:1em;white-space:nowrap;max-width:none}
.scl-qarr{flex:none;display:block;width:1.2em;height:1.85em;pointer-events:none} /* sized like the /giveaway .btn-arrow (Andrew 10-01: "that cool arrow") */
.scl-qarr svg{display:block;width:100%;height:100%;overflow:visible;animation:scl-bounce 1.3s ease-in-out infinite}
.scl-qarr path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:19}
@keyframes scl-bounce{0%,100%{transform:translateY(-5px)}50%{transform:translateY(6px)}}
.scl-help{margin:12px auto 0;max-width:24em;font-family:var(--sans);font-weight:400;font-size:.9375rem;line-height:1.45;color:var(--scl-on-2)}
.scl-chips + .scl-help{margin-top:18px}

/* ---------- the chips: big tap targets, filled when picked ---------- */
.scl-chips{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px}
.scl-qrow + .scl-chips{margin-top:18px}
.scl-help + .scl-chips{margin-top:24px}
.scl-grid2{grid-template-columns:1fr 1fr}
.scl-grid3{grid-template-columns:1fr 1fr 1fr}
.scl-chip{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:64px;padding:14px 20px;margin:0;
  border-radius:999px;border:1.5px solid var(--scl-hair);background:color-mix(in srgb,var(--paper) 8%,transparent);
  color:var(--paper);font-family:var(--sans);font-weight:700;font-size:1.2rem;line-height:1.2;letter-spacing:0;text-transform:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.scl-chip b{font-weight:900}
.scl-chip-num{min-height:72px;font-weight:900;font-size:1.6rem;letter-spacing:-.01em}
.scl-grid3 .scl-chip-num{font-size:1.45rem;padding:14px 8px}
.scl-emo{font-size:1.45rem;line-height:1}
.scl-chip:active{transform:scale(.97)}
.scl-chip:focus-visible{outline:3px solid var(--lux-iris);outline-offset:3px}
.scl-chip[aria-pressed="true"]{background:var(--lux-iridescent);border-color:transparent;color:var(--lux-deep);
  box-shadow:0 12px 28px -12px color-mix(in srgb,var(--lux-iris) 80%,transparent)}

/* ---------- "Still in school?": one tap, opens the student pop-up (r8). A real link to /giveaway/ when JS is off. ---------- */
.scl-school{display:flex;align-items:center;justify-content:center;width:max-content;max-width:100%;min-height:44px;margin:22px auto 0;padding:0 12px;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:.9375rem;color:var(--scl-on-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--scl-hair);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.scl-alt{display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px;margin:18px auto 0}
.scl-alt .scl-school{margin:0;min-height:40px;font-weight:400;font-size:.8125rem;color:color-mix(in srgb,var(--paper) 62%,transparent);text-underline-offset:3px}
.scl-school:focus-visible{outline:3px solid var(--lux-iris);outline-offset:2px;border-radius:8px}
.scl-ns{margin:22px 0 0}

/* =========================================================================
   4. THE RESULT: one big number, one card, one button
   ========================================================================= */
.scl-res{justify-content:center;padding-top:4px;padding-bottom:4px}
.scl-res-k{margin:0;font-family:var(--sans);font-weight:900;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.scl-res-k:focus{outline:none}
.scl-big{margin:6px 0 0;font-family:var(--sans);font-weight:900;line-height:1;color:var(--paper);display:flex;align-items:baseline;justify-content:center;gap:.28em;flex-wrap:wrap}
.scl-num{font-size:clamp(3.5rem,16vw,4rem);letter-spacing:-.025em;color:transparent;background-image:var(--lux-iridescent);-webkit-background-clip:text;background-clip:text;
  padding:0 .02em .06em;font-variant-numeric:tabular-nums}
.scl-unit{font-size:1.6rem;letter-spacing:-.01em;text-transform:none}
.scl-res-line{margin:10px 0 0;font-family:var(--sans);font-weight:700;font-size:1.15rem;line-height:1.35;color:var(--scl-on-2)}

/* the card: the giveaway's white ticket surface, iridescent top edge, soft glow behind */
.scl-card{position:relative;z-index:0;margin-top:18px;padding:22px 16px 18px;border-radius:22px;text-align:center;color:var(--ink);
  background:var(--lux-iridescent) top/100% 6px no-repeat,var(--tone);box-shadow:var(--scl-card-sh)}
.scl-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}
/* Fit meter (Andrew 10-05): three tiles that each hold a "$", echoing the three dollar signs in the first-screen headline
   (EB Garamond italic, light, the .scl-cash style). Lit = the lux gradient fill with the "$" in deep teal, a thin ring and
   a soft halo (16px max). Unlit = light gray outline with a faded gray "$". Filled by the page script; hidden when be <= 0. */
.scl-fit{margin:0 auto 14px;padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.scl-fit-bars{display:flex;justify-content:center;gap:8px}
.scl-fit-bars i{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;box-sizing:border-box;
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.7rem;line-height:1;
  background:transparent;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);color:color-mix(in srgb,var(--ink) 26%,transparent)}
.scl-fit-bars i.on{background:var(--lux-iridescent);border-color:color-mix(in srgb,var(--primary) 28%,transparent);color:var(--lux-deep);
  box-shadow:0 0 16px color-mix(in srgb,var(--lux-iris) 45%,transparent)}
.scl-fit-k{margin:10px 0 0;font-family:var(--sans);font-weight:900;font-size:.8rem;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--primary)}
.scl-fit-line{margin:6px auto 0;max-width:22em;font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.45;color:var(--ink);text-wrap:balance}
.scl-card-p{margin:0 auto;max-width:22em;font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.5;color:var(--ink);text-wrap:pretty}
.scl-card-p b{font-weight:900;color:var(--primary);white-space:nowrap}
/* r3: a thin rule, then the bridge line that names the gain, then the button */
.scl-rule{height:1px;margin:14px auto 12px;max-width:15em;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.scl-bridge{margin:0 auto 12px;max-width:18em;font-family:var(--sans);font-weight:900;font-size:1.3rem;line-height:1.2;letter-spacing:-.01em;color:var(--deep);text-wrap:balance}

/* the button: the giveaway's primary pill, slow pulse */
.scl-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;padding:16px 18px;border-radius:999px;
  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);
  animation:scl-pulse 2.4s ease-out infinite}
.scl-cta:focus-visible{outline:3px solid var(--lux-iris);outline-offset:3px}
@keyframes scl-pulse{
  0%{box-shadow:0 10px 24px -8px color-mix(in srgb,var(--primary) 55%,transparent),0 0 0 0 color-mix(in srgb,var(--primary) 45%,transparent);transform:scale(1)}
  45%{transform:scale(1.012)}
  70%{box-shadow:0 10px 24px -8px color-mix(in srgb,var(--primary) 55%,transparent),0 0 0 14px color-mix(in srgb,var(--primary) 0%,transparent);transform:scale(1)}
  100%{box-shadow:0 10px 24px -8px color-mix(in srgb,var(--primary) 55%,transparent),0 0 0 0 color-mix(in srgb,var(--primary) 0%,transparent)}}
.scl-cta-sub{margin:10px auto 0;max-width:24em;font-family:var(--sans);font-weight:400;font-size:.9375rem;line-height:1.45;color:var(--secondary)}

/* the two small links */
.scl-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 2px;margin-top:8px}
.scl-fine{margin:6px auto 0;max-width:26em;text-align:center;font-family:var(--sans);font-weight:400;font-size:.8125rem;line-height:1.4;color:var(--scl-on-2)}
.scl-link{min-height:44px;padding:0 10px;border:0;background:none;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:.9375rem;
  color:var(--scl-on-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--scl-hair)}
.scl-link:focus-visible{outline:3px solid var(--lux-iris);outline-offset:2px;border-radius:8px}
.scl-dot{color:var(--scl-on-2)}

/* "How we did the math": a light sheet that opens in place */
.scl-sheet{margin-top:8px;padding:18px 18px 16px;border-radius:18px;text-align:left;background:color-mix(in srgb,var(--tone) 94%,transparent);color:var(--ink);
  font-family:var(--sans);font-size:.9375rem;line-height:1.55;box-shadow:var(--scl-card-sh)}
.scl-sheet p{margin:0 0 10px}
.scl-sheet b{font-weight:900;color:var(--deep)}
.scl-sheet a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.scl-sheet .scl-sheet-fine{margin:0;color:var(--secondary)}

/* r3: Bex, stacked and centered. Round photo with a thin iridescent ring, her line in the serif
   italic below it, then her name. Nothing sits beside the photo. */
.scl-bex{display:flex;flex-direction:column;align-items:center;margin:20px auto 0;padding:0;text-align:center}
.scl-bex-ph{display:block;flex:none;padding:2px;border-radius:50%;background:var(--lux-iridescent)}
.scl-bex-ph img{display:block;width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 18%}
.scl-bex-q{margin:13px auto 0;max-width:30ch;font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.3rem;line-height:1.35;color:color-mix(in srgb,var(--paper) 92%,transparent);text-wrap:balance}
.scl-bex-cap{display:flex;flex-direction:column;align-items:center;gap:3px;margin:10px 0 0}
.scl-bex-name{font-family:var(--sans);font-weight:700;font-size:.75rem;line-height:1.3;letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.scl-bex-role{font-family:var(--sans);font-weight:400;font-size:.8125rem;line-height:1.3;color:var(--scl-on-2)}

/* =========================================================================
   5. WIDER SCREENS: the same flow, centered column, a touch more air
   ========================================================================= */
@media(min-width:768px){
  .scl-top{padding-top:18px}
  .scl-screen{padding:24px 0 48px}
  .scl-q{font-size:1.875rem}
  .scl-qrow{font-size:1.75rem}
  .scl-card{padding:30px 28px 24px}
}

/* hover only where there is a real pointer, so a tap on a phone never leaves a stuck hover */
@media(hover:hover){
  .scl-back:hover{background:color-mix(in srgb,var(--paper) 10%,transparent)}
  .scl-chip:hover{border-color:var(--lux-iris);background:color-mix(in srgb,var(--paper) 13%,transparent)}
  .scl-school:hover{color:var(--paper)}
  .scl-cta:hover{background:var(--deep);transform:translateY(-1px);animation-play-state:paused}
  .scl-link:hover{color:var(--paper)}
  .scl-chip[aria-pressed="true"]:hover{background:var(--lux-iridescent);border-color:transparent}
}

@media(prefers-reduced-motion:reduce){
  .scl-screen.is-in,.scl-screen.is-in-back,.scl-screen.is-out,.scl-screen.is-out-back{animation:none}
  .scl-cta,.scl-qarr svg{animation:none}
  .scl-seg.is-now i{animation:none}
  .scl-seg.is-undo i{animation:none;width:0}
  .scl-chip,.scl-back{transition:none}
}

/* Social proof strip (Andrew 09-30: "not some empty restaurant... it's alive"). Small, bottom of screen 0 and
   the result. One row of real member faces drifting left; never pauses on hover (WEB-LUXE motion rule). */
.scl-proof{margin:34px auto 0;text-align:center;width:100%}
.scl-proof-line{margin:0 0 12px;text-wrap:balance;font-family:var(--sans);font-weight:700;font-size:.9375rem;line-height:1.35;color:var(--scl-on)}
.scl-mq{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 12%,var(--ink) 88%,transparent);mask-image:linear-gradient(90deg,transparent,var(--ink) 12%,var(--ink) 88%,transparent)}
.scl-mq-track{display:flex;gap:10px;width:max-content;animation:scl-mq 48s linear infinite}
.scl-face{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px color-mix(in srgb,var(--paper) 55%,transparent)}
.scl-face img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes scl-mq{to{transform:translateX(calc(-50% - 5px))}}
@media (prefers-reduced-motion:reduce){.scl-mq-track{animation:none}}

/* ---------- r6 (Andrew 10-01): calculator title on top, logo + descriptor at the bottom ---------- */
.scl-title{margin:0;white-space:nowrap;font-family:var(--sans);font-weight:900;font-size:.75rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-align:center;padding:0 44px}
.scl-sub{max-width:21em;margin-left:auto;margin-right:auto;text-wrap:balance}
.scl-sub2{margin:10px 0 0;font-family:var(--sans);font-weight:700;font-size:.9375rem;line-height:1.35;color:var(--mint)}
.scl-foot{width:100%;max-width:var(--scl-col);margin:0 auto;padding:8px 16px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px}
.scl-foot-wm{display:block;height:24px;width:auto;opacity:.95}
.scl-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}
.scl-foot-sws sup{font-size:.7em;letter-spacing:0;vertical-align:top;position:relative;top:-.1em}
/* r6: overflow:hidden still lets focus/scrollIntoView scroll the app sideways (the result screen landed 27px left
   on a 375 phone). clip forbids any scroll; old browsers keep the hidden rule above. */
.scl-app,.scl-mq{overflow:clip}
/* r6.1 (Andrew 10-01): the promise reads as two lines, broken after "rent,". Line one is wider than the
   520px column, so from 640px up the line steps out of the column, centered on it. Phones wrap naturally. */
@media (min-width:640px){
  .scl-sub{width:calc(100vw - 32px);max-width:36rem;margin-left:50%;transform:translateX(-50%)}
  .scl-sub-a,.scl-sub-b{display:block;white-space:nowrap}
}

/* =========================================================================
   r7 (Andrew 10-01): two things from /giveaway/
   A. the faded photo wall on the wide-screen sides  B. "Still in school?" opens the giveaway entry pop-up
   ========================================================================= */

/* ---------- A. the culture wall. Same 24 photos, same opacity and softness as /giveaway/ (.bxg), tuned for the deep teal.
   Two 3-wide grids, one each side, starting just outside the column and running outward, faded toward the column (so the
   tiles next to the text are gone) and toward the top and bottom. Under 960px there is no empty side, so it is display:none
   (lazy images inside a display:none box are never fetched). Behind everything, never clickable. ---------- */
.scl-bxg{display:none}
@media(min-width:960px){
  .scl-bxg{display:block;position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
    --scl-t:clamp(110px,10.5vw,160px);--scl-g:clamp(12px,1.1vw,16px);--scl-r:calc(var(--scl-t) * 1.25 + var(--scl-g));
    /* the column is 520px; the promise line steps out to 576px on desktop, so keep 304px clear of the middle on each side */
    --scl-hole:calc(var(--scl-col) / 2 + 44px);
    -webkit-mask:linear-gradient(180deg,transparent 0,black calc(var(--scl-r) * .8),black calc(var(--scl-r) * 2.9),transparent calc(var(--scl-r) * 4.1));
            mask:linear-gradient(180deg,transparent 0,black calc(var(--scl-r) * .8),black calc(var(--scl-r) * 2.9),transparent calc(var(--scl-r) * 4.1))}
  .scl-bxg-side{position:absolute;top:0;bottom:0;width:560px;display:grid;grid-template-columns:repeat(3,var(--scl-t));grid-auto-rows:auto;gap:var(--scl-g);align-content:start;padding-top:56px}
  .scl-bxg-l{right:calc(50% + var(--scl-hole));justify-content:end;
    -webkit-mask:linear-gradient(270deg,transparent 0,black 200px);mask:linear-gradient(270deg,transparent 0,black 200px)}
  .scl-bxg-r{left:calc(50% + var(--scl-hole));justify-content:start;
    -webkit-mask:linear-gradient(90deg,transparent 0,black 200px);mask:linear-gradient(90deg,transparent 0,black 200px)}
  .scl-bxg img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;opacity:.14;filter:grayscale(.35) blur(.4px)}
}

/* ======================================================================================================================
   r8 (Andrew 10-01: "this is super clunky ... should look more like /giveaway pop up"): the student pop-up IS the /giveaway/
   entry pop-up, ported class for class from static/giveaway/giveaway.css (the #gv-pop block, the .tp ticket, .lp-pill, the
   bouncing arrow). Values copied, not redesigned. Namespaced sp- so nothing here touches the calculator's own scl- rules.
     .gv-pop -> .sp-pop     .gv-pop-in -> .sp-in      .lp-pill -> .sp-pill     .gv-pop-h -> .sp-h        .gv-pop-x -> .sp-x
     .tp-card -> .sp-card   .tp-glow -> .sp-glow     .tk -> .sp-tk            .tk-main -> .sp-main      .tk-stub -> .sp-stub
     .tk-title -> .sp-title .tk-form -> .sp-form     .fld -> .sp-fld          .tk-btn -> .sp-btn        .tk-perks -> .sp-perks
     .tk-fine -> .sp-fine   .tk-err -> .sp-err       .faces -> .sp-faces      .face-plus -> .sp-plus    .faces-cap -> .sp-cap
     .btn-arrow -> .sp-arrow  .gv-hp -> .sp-hp
   Only new rule: .sp-blurb (the one short paragraph to students). Kit tokens only, no hex.
   ====================================================================================================================== */
html.scl-lock{overflow:hidden}
.sp-pop{--sp-notch:16px;--sp-r:26px;--sp-stub:color-mix(in srgb,var(--lux-iris) 34%,var(--tone));
  border:0;padding:0;margin:auto;width:min(820px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow-x:hidden;overflow-y:auto;
  background:transparent;color:var(--paper);font-family:var(--sans)}
.sp-pop::backdrop{background:color-mix(in srgb,var(--teal-950) 95%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* the dialog itself only fades: a transform on it would turn the position:fixed close X into a child of the
   moving box, so the X started beside the form and jumped to the corner when the zoom ended (Andrew 10-01) */
.sp-pop[open]{animation:sp-popfade .3s ease-out}
.sp-pop[open] .sp-in{animation:sp-popin .32s cubic-bezier(.25,1.2,.4,1)}
.sp-pop[open]::backdrop{animation:sp-popfade .3s ease-out}
@keyframes sp-popin{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sp-popfade{from{opacity:0}to{opacity:1}}
.sp-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 0 84px}
.sp-x{all:unset;box-sizing:border-box;position:fixed;top:18px;right:18px;z-index:3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--paper);background:color-mix(in srgb,var(--paper) 14%,transparent)}
.sp-x:hover{background:color-mix(in srgb,var(--paper) 22%,transparent)}
.sp-x:focus-visible{outline:3px solid var(--lux-iris);outline-offset:2px}
.sp-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* the pill, the loud two-line headline (iridescent second line), then the one short blurb */
.sp-pill{display:inline-flex;align-items:center;margin:0 0 14px;padding:12px 20px;border-radius:999px;background:var(--lux-iridescent);color:var(--lux-deep);
  font-family:var(--sans);font-weight:900;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.sp-pill span{display:block;line-height:1;text-box:trim-both cap alphabetic}
.sp-h{margin:0;font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:.95;font-size:2.15rem;color:var(--paper)}
.sp-h span,.sp-h em{display:block}
.sp-h em{font-style:normal;font-weight:900;color:transparent;background-image:var(--lux-iridescent);-webkit-background-clip:text;background-clip:text}
.sp-blurb{margin:14px auto 0;max-width:46em;font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.45;color:color-mix(in srgb,var(--paper) 82%,transparent);text-wrap:balance}

/* the ticket: .tp-card + .tk (white main with the iridescent top edge and bottom notches, dashed perforation, lavender stub) */
.sp-card{position:relative;width:min(540px,100%);margin-top:22px;text-align:left}
.sp-glow{position:absolute;z-index:-1;inset:-6px -10px 0;border-radius:40px;pointer-events:none;
  background:linear-gradient(115deg,color-mix(in srgb,var(--lux-blush) 55%,transparent),color-mix(in srgb,var(--lux-iris) 62%,transparent) 40%,color-mix(in srgb,var(--mint) 50%,transparent));
  filter:blur(46px);opacity:.7}
.sp-tk{position:relative;filter:drop-shadow(0 1px 1.5px color-mix(in srgb,var(--teal-950) 22%,transparent)) drop-shadow(0 30px 44px color-mix(in srgb,var(--teal-950) 42%,transparent))}
.sp-main,.sp-stub{position:relative;color:var(--ink)}
.sp-main{border-radius:var(--sp-r) var(--sp-r) 0 0;padding:32px 36px 22px;
  background:var(--lux-iridescent) top/100% 6px no-repeat,var(--tone);
  -webkit-mask:radial-gradient(circle at 0 100%,transparent var(--sp-notch),black calc(var(--sp-notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--sp-notch),black calc(var(--sp-notch) + .5px)) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 100%,transparent var(--sp-notch),black calc(var(--sp-notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--sp-notch),black calc(var(--sp-notch) + .5px)) right/51% 100% no-repeat}
.sp-stub{display:flex;align-items:center;justify-content:center;gap:16px;border-radius:0 0 var(--sp-r) var(--sp-r);padding:18px 40px 20px;background:var(--sp-stub);
  -webkit-mask:radial-gradient(circle at 0 0,transparent var(--sp-notch),black calc(var(--sp-notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent var(--sp-notch),black calc(var(--sp-notch) + .5px)) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 0,transparent var(--sp-notch),black calc(var(--sp-notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent var(--sp-notch),black calc(var(--sp-notch) + .5px)) right/51% 100% no-repeat}
.sp-stub::before{content:"";position:absolute;top:0;left:calc(var(--sp-notch) + 12px);right:calc(var(--sp-notch) + 12px);border-top:2px dashed color-mix(in srgb,var(--primary) 38%,transparent)}
.sp-title{margin:0 0 20px;font-family:var(--serif);font-size:2.3rem;line-height:1.05;text-align:center;color:var(--deep)}
.sp-title em{font-style:italic;font-weight:500;color:var(--primary)}
.sp-form{display:grid;gap:14px}
.sp-fields{display:grid;grid-template-columns:1fr;gap:12px}
.sp-fld{position:relative;display:grid;gap:7px}
.sp-fld span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp-fld input{display:block;width:100%;min-height:62px;padding:18px 20px;border-radius:14px;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  background:var(--paper);color:var(--ink);font:inherit;font-size:1.06rem;outline:none;transition:.2s var(--ease)}
.sp-fld input::placeholder{color:color-mix(in srgb,var(--ink) 58%,transparent)}
.sp-fld input:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent);background:var(--tone)}
.sp-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden}
.sp-btn{width:100%;margin-top:4px;padding:24px 24px;border-radius:999px;font-size:1.28rem;letter-spacing:.14em;
  box-shadow:0 12px 26px -10px color-mix(in srgb,var(--primary) 75%,transparent);animation:sp-pulse 2.4s ease-out infinite}
.sp-btn:hover{background:var(--deep);transform:translateY(-1px);animation-play-state:paused}
.sp-btn[disabled]{opacity:.7;cursor:progress;animation:none}
@keyframes sp-pulse{
  0%{box-shadow:0 10px 24px -8px color-mix(in srgb,var(--primary) 55%,transparent),0 0 0 0 color-mix(in srgb,var(--primary) 45%,transparent);transform:scale(1)}
  45%{transform:scale(1.015)}
  70%{box-shadow:0 10px 24px -8px color-mix(in srgb,var(--primary) 55%,transparent),0 0 0 16px color-mix(in srgb,var(--primary) 0%,transparent);transform:scale(1)}
  100%{box-shadow:0 10px 24px -8px color-mix(in srgb,var(--primary) 55%,transparent),0 0 0 0 color-mix(in srgb,var(--primary) 0%,transparent)}
}
.sp-perks{list-style:none;margin:4px 0 0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 26px}
.sp-perks li{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:700;color:var(--deep)}
.sp-perks svg{width:17px;height:17px;color:var(--primary)}
.sp-err{margin:0;font-size:.85rem;font-weight:700;text-align:center;color:var(--primary)}
.sp-fine{margin:0 auto;max-width:52ch;font-size:.74rem;line-height:1.5;text-align:center;color:var(--secondary)}
.sp-fine a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.sp-done{margin:0;text-align:center;font-weight:900;font-size:1.2rem;color:var(--deep)}
.sp-done a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.sp-faces{display:flex;align-items:center;flex:none}
.sp-faces img,.sp-plus{width:40px;height:40px;margin-left:-11px;border-radius:50%;border:2.5px solid var(--sp-stub);object-fit:cover;background:var(--sand)}
.sp-faces img:first-child{margin-left:0}
.sp-plus{display:grid;place-items:center;background:var(--primary);color:var(--paper);font-weight:700;font-size:1.1rem;line-height:1}
.sp-cap{margin:0;flex:0 1 auto;width:max-content;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.25;color:var(--deep)}

/* the bouncing arrow at Enter to win: desktop only, level with the button (student-giveaway.js measures it after the pop-up opens) */
.sp-arrow{--aw:78px;display:none;position:absolute;z-index:3;left:calc(-1 * (var(--aw) + 26px));top:50%;width:var(--aw);height:calc(var(--aw) * .6);transform:translateY(-50%);pointer-events:none}
.sp-arrow svg{display:block;width:100%;height:100%;overflow:visible;animation:sp-bounce 1.3s ease-in-out infinite}
.sp-arrow path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:14}
.sp-pg1{stop-color:var(--lux-iris)}.sp-pg2{stop-color:var(--mint)}.sp-pg3{stop-color:var(--lux-blush)}
@keyframes sp-bounce{0%,100%{transform:translateX(-6px)}50%{transform:translateX(8px)}}
@media(min-width:900px){.sp-arrow.is-set{display:block}}

/* phones: full width, the ticket tightened so Enter to win stays on screen (the /giveaway/ phone sheet values) */
@media(max-width:760px){
  .sp-pop{--sp-notch:13px;--sp-r:20px;width:100%;max-width:100%;max-height:calc(100dvh - 16px)}
  .sp-in{padding:46px 12px 40px}
  .sp-x{top:10px;right:10px;width:38px;height:38px}
  .sp-pill{font-size:.64rem;letter-spacing:.12em;padding:8px 14px;margin-bottom:10px}
  .sp-h{font-size:1.65rem}
  .sp-blurb{margin-top:10px;font-size:.9rem;line-height:1.4}
  .sp-card{margin-top:16px}
  .sp-glow{inset:4px;filter:blur(20px);opacity:.5}
  .sp-main{padding:20px 18px 16px}
  .sp-title{font-size:1.65rem;margin-bottom:12px}
  .sp-form{gap:10px}
  .sp-fld input{min-height:54px;padding:14px 16px}
  .sp-btn{padding:18px 18px;font-size:1.15rem}
  .sp-perks{gap:6px 16px}
  .sp-perks li{font-size:.84rem}
  .sp-stub{gap:12px;padding:12px 16px 13px}
  .sp-faces img,.sp-plus{width:34px;height:34px;margin-left:-10px;border-width:2px}
  .sp-faces img:first-child{margin-left:0}
  .sp-cap{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.sp-pop[open],.sp-pop[open] .sp-in,.sp-pop[open]::backdrop,.sp-btn,.sp-arrow svg{animation:none}}
/* the faces' 2px ring sits outside each 40px circle; the strip was exactly 40px tall, so its clip and its fade
   mask shaved the ring off top and bottom (Andrew 10-01: "circles are kinda cut off"). Room for the ring: */
.scl-mq{padding:4px 0}

/* =========================================================================
   EMBED MODE (2026-10-01): the giveaway's pop-up frames this page (?embed=giveaway, see giveaway-bonus.js). html.scl-embed is set in the
   <head> before first paint, and only on a framed page, so none of this touches the standalone calculator.
   Hidden in the pop-up: the footer lockup, the photo wall, both member strips, the Still-in-school and refer links (an entrant is already in),
   and the Bex quote (the pop-up is already a long screen). Kept: the spotlight stage, the progress bar, every question, the money result.
   Nothing giveaway-related appears above or beside the money number. The one trace is .scl-gvq, a single muted line BELOW the estimate line.
   ========================================================================= */
.scl-embed .scl-foot,.scl-embed .scl-bxg,.scl-embed .scl-proof,.scl-embed .scl-alt,.scl-embed .scl-bex{display:none}
/* the close X (pop-up only): the back chevron's mirror image on the right of the top row. Same 48px circle and tap target, same vertical center. */
.scl-x{position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:var(--paper);cursor:pointer;padding:0;transition:background .2s var(--ease)}
.scl-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.scl-x:focus-visible{outline:3px solid var(--lux-iris);outline-offset:-3px}
@media(hover:hover){.scl-x:hover{background:color-mix(in srgb,var(--paper) 10%,transparent)}}
@media(prefers-reduced-motion:reduce){.scl-x{transition:none}}
.scl-gvskip{margin:0 auto 12px;max-width:24em;font-family:var(--sans);font-weight:700;font-size:.875rem;line-height:1.4;color:var(--mint)}
/* quieter than its neighbors on purpose: smaller and dimmer than .scl-fine above it, no color, no icon */
.scl-gvq{margin:8px auto 0;max-width:26em;text-align:center;font-family:var(--sans);font-weight:400;font-size:.75rem;line-height:1.4;color:color-mix(in srgb,var(--paper) 58%,transparent)}
.scl-gvq:empty{display:none}
/* question 1, pop-up only: the quiet way out (13px, paper at 62%, the same muted style as the page's side links) */
.scl-gvn{margin:16px auto 0;max-width:24em;text-align:center;font-family:var(--sans);font-weight:400;font-size:.8125rem;line-height:1.45;color:color-mix(in srgb,var(--paper) 62%,transparent)}
.scl-gvq-b{all:unset;box-sizing:border-box;cursor:pointer;text-decoration:underline;text-underline-offset:2px;color:color-mix(in srgb,var(--paper) 78%,transparent)}
.scl-gvq-b:focus-visible{outline:2px solid var(--lux-iris);outline-offset:3px;border-radius:4px}
@media(hover:hover){.scl-gvq-b:hover{color:var(--paper)}}

/* =========================================================================
   ARTICLE EMBED (2026-10-05, r3 2026-10-05): a blog article frames this page inline (?embed=article&tag=<slug>, see the <head> script and the tail script
   in index.html). html.scl-embed-a is set before first paint, and only on a framed page, so none of this touches the standalone calculator.
   The calculator is the ONE source of truth: the article embeds it instead of copying its logic. The article reads the card's height from a
   postMessage and sizes the frame, so html never scrolls here.
   r3 (Andrew: the trimmed start screen "reads kinda lame and confusing"): the FULL start screen shows, exactly as on the standalone page: the
   Stylist Profit Calculator eyebrow, the loud headline, the promise lines, the question, both buttons and the 100+ stylists face strip. Hidden:
   the page chrome around the card (footer lockup, photo wall), the Still-in-school and refer links (and so the giveaway pop-up), the Bex quote card,
   and the face strip on the result screen (it already showed on the start screen). Only the frame's height differs: it follows the content
   instead of the viewport.
   ========================================================================= */
html.scl-embed-a{overflow:hidden;height:auto}
.scl-embed-a .scl-app{min-height:0}
.scl-embed-a .scl-foot,.scl-embed-a .scl-bxg,.scl-embed-a .scl-alt,.scl-embed-a .scl-bex,.scl-embed-a .scl-res .scl-proof{display:none}
.scl-embed-a .scl-stage{flex:none;padding-bottom:12px}
.scl-embed-a .scl-screen{flex:none;justify-content:flex-start}

/* r4 (2026-10-05, after a desktop Chrome froze on the branch preview): make the embed cheaper to paint and calmer. Embed mode only.
   1. No CSS filters or backdrop filters. The spotlight beam (a clip-path trapezoid under filter:blur(52px)) and the card glow (a gradient under
      filter:blur(38px)) become soft gradients that read the same: an angular cone with a vertical fade, and layered colored box-shadows.
   2. Nothing runs forever. The arrow bounces 4 times and the button pulses 3 times, then both rest; the face strip and everything else
      pauses while the card is off screen or the tab is hidden (html.scl-off, set by the tail script in index.html). Reduced motion still wins.
   3. A stable box: the tail script gives .scl-app a min-height equal to the tallest height seen, so the steps sit centered in it instead of
      the frame changing height on every tap. */
.scl-embed-a .scl-beam{filter:none} /* the trapezoid clip-path already cut the blurred edges hard, so dropping the blur keeps the same cone */
.scl-embed-a .scl-glow{inset:0 0 10px;filter:none;background:none;opacity:1;
  box-shadow:-18px 4px 54px -2px color-mix(in srgb,var(--lux-blush) 16%,transparent),0 8px 54px 0 color-mix(in srgb,var(--lux-iris) 14%,transparent),18px 4px 54px -2px color-mix(in srgb,var(--mint) 12%,transparent)}
.scl-embed-a .sp-pop{display:none!important}
.scl-embed-a .scl-qarr svg{animation-iteration-count:4}
.scl-embed-a .scl-cta{animation-iteration-count:3}
.scl-embed-a.scl-off *,.scl-embed-a.scl-off *::before,.scl-embed-a.scl-off *::after{animation-play-state:paused!important}
.scl-embed-a .scl-stage{flex:1 1 auto}
.scl-embed-a .scl-screen{margin:auto 0}

/* The Instagram handle on the student ticket (Andrew 2026-10-06), the same as the /giveaway/ ticket: an @ inside the box and one quiet line under it. */
.sp-fld-ig .sp-ig-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp-ig-box{position:relative;display:grid}
.sp-ig-at{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:700;font-size:1.06rem;line-height:1;color:color-mix(in srgb,var(--ink) 70%,transparent);pointer-events:none}
.sp-fld-ig input{padding-left:42px}
.sp-ig-help{margin:0 2px;font-size:.78rem;line-height:1.4;color:var(--secondary)}
.sp-fld input[aria-invalid=true]{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
@media(max-width:520px){ .sp-ig-at{left:16px} .sp-fld-ig input{padding-left:36px} }

/* =========================================================================
   Demo 10-06: renter path. Quiet week/month link and a quiet "Not sure" chip, so the price chips stay the loud thing.
   ========================================================================= */
.scl-quiet,.scl-chip.scl-chip-quiet{display:block;width:max-content;max-width:100%;min-height:40px;margin:8px auto 0;padding:0 12px;border:0;border-radius:8px;background:transparent;box-shadow:none;
  font-family:var(--sans);font-weight:400;font-size:.875rem;line-height:40px;color:color-mix(in srgb,var(--paper) 62%,transparent);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--scl-hair);cursor:pointer;touch-action:manipulation}
.scl-chip.scl-chip-quiet[aria-pressed="true"]{background:transparent;color:var(--paper);box-shadow:none}
.scl-quiet:focus-visible,.scl-chip.scl-chip-quiet:focus-visible{outline:3px solid var(--lux-iris);outline-offset:2px}
@media (hover:hover){.scl-chip.scl-chip-quiet:hover,.scl-quiet:hover{background:transparent;color:var(--paper)}}
.scl-src{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--scl-hair)}
.scl-src:focus-visible{outline:3px solid var(--lux-iris);outline-offset:2px;border-radius:4px}