/* ------------------------------------------------------------
   THE CARE GUIDE — launcher, panel and the note she leaves behind

   Three launchers, one component. The variants differ only in how much
   room they have: a compact badge over the homepage film, a full bar on
   the ink field, a wide bar under the cover copy where the helper in the
   photograph is pointing.
   ------------------------------------------------------------ */

:root {
  --tcw-ink: #1A1A1A;
  --tcw-crimson: #8B0909;
  --tcw-blush: #FFE4E1;
  --tcw-lamp: #FFD583;
}

/* ---------- the drawing ---------- */

/* Navy with gold stars, silver moons and a gold band: the storybook
   wizard's hat, which reads as "wizard" before anything else does. It is
   the only navy on the site, so it is the thing the eye finds. Every
   colour is a variable. */
:root {
  --hat-main:  #2B3272;
  --hat-lit:   #3B4494;
  --hat-fold:  #20275C;
  --hat-brim:  #2E3680;
  --hat-brim-under: #1F2658;
  --hat-band:  #E0B25A;
  --hat-band-dark: #C9923A;
  --hat-band-lit:  #F0CC7A;
  --hat-star:  #F2C04E;
  --hat-moon:  #D9DDE8;
}

.tcw-hat { display: block; width: 100%; height: 100%; overflow: visible; }
.tcw-hat-main  { fill: var(--hat-main); }
.tcw-hat-lit   { fill: var(--hat-lit); }
.tcw-hat-fold  { fill: var(--hat-fold); }
.tcw-hat-brim  { fill: var(--hat-brim); }
.tcw-hat-brim-under { fill: var(--hat-brim-under); }
.tcw-hat-band  { fill: var(--hat-band); }
.tcw-hat-band-dark { fill: var(--hat-band-dark); }
.tcw-hat-band-lit  { fill: var(--hat-band-lit); }
.tcw-hat-moons { fill: var(--hat-moon); }
.tcw-hat-dots  { fill: var(--hat-star); }
.tcw-star      { fill: var(--hat-star); }

/* The hat hangs off the card's top-left corner, so it swings from the
   point where its brim rests on the corner — the crown sways, the brim
   stays put. The stars twinkle out of step with one another. */
.tcw-hat-body, .tcw-star { transform-box: view-box; }
.tcw-hat-body {
  transform-origin: 34px 104px;
  animation: tcw-sway 4.2s ease-in-out infinite;
}
.tcw-star { transform-box: fill-box; transform-origin: center; animation: tcw-twinkle 2.7s ease-in-out infinite; }
.tcw-star--1 { animation-delay: 0s; }
.tcw-star--2 { animation-delay: .6s; }
.tcw-star--3 { animation-delay: 1.2s; }
.tcw-star--4 { animation-delay: 1.8s; }
.tcw-star--5 { animation-delay: 2.3s; }

/* Idle: a slow, even pendulum either side of where it hangs at rest. */
@keyframes tcw-sway {
  0%, 100% { transform: rotate(-2.2deg); }
  50%      { transform: rotate(2.2deg); }
}
@keyframes tcw-twinkle {
  0%, 100% { transform: scale(.6) rotate(-12deg); opacity: .45; }
  45%      { transform: scale(1.18) rotate(8deg); opacity: 1; }
}

/* One larger swing when a launcher first scrolls into view, then back to
   the small idle. Something that performs for as long as it is on screen
   stops being a signal and becomes wallpaper. */
/* Greeting: one nudge, then a damped swing that settles under its own
   weight — each swing smaller than the last and a touch quicker, ending
   at rest instead of stopping dead. */
.tcw-launch.is-greeting .tcw-hat-body { animation: tcw-doff 2.4s linear 1; }
@keyframes tcw-doff {
  0%   { transform: rotate(0);       animation-timing-function: cubic-bezier(.3,0,.5,1); }
  16%  { transform: rotate(-12deg);  animation-timing-function: cubic-bezier(.5,0,.5,1); }
  36%  { transform: rotate(8deg);    animation-timing-function: cubic-bezier(.5,0,.5,1); }
  54%  { transform: rotate(-5deg);   animation-timing-function: cubic-bezier(.5,0,.5,1); }
  70%  { transform: rotate(3deg);    animation-timing-function: cubic-bezier(.5,0,.5,1); }
  84%  { transform: rotate(-1.4deg); animation-timing-function: cubic-bezier(.5,0,.5,1); }
  94%  { transform: rotate(.5deg);   animation-timing-function: cubic-bezier(.5,0,.5,1); }
  100% { transform: rotate(0); }
}

/* ---------- liquid glass ----------

   The launcher is a pane of frosted glass rather than a white card. What
   is behind it stays behind it — blurred, brightened, a little more
   saturated — so the card belongs to the photograph instead of sitting
   on top of it like a sticker. The rim is a hairline of light along the
   top and left, the way a real edge catches it, and a soft sheen runs
   across the top corner. The words go white, with just enough shadow to
   hold on a bright patch of picture. Browsers without backdrop-filter
   get a plainer translucent tint that reads the same way. */
.tcw-launch.tcw-glass {
  color: #fff;
  /* A faint dark tint under the sheen. Over a bright patch of picture —
     a window, a white wall — pure white-on-frost is white-on-white; the
     tint keeps the words readable everywhere without making the pane
     look dark. */
  background:
    linear-gradient(135deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.12) 100%),
    rgba(28,22,34,.34);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 1px 0 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 22px 54px rgba(0,0,0,.30);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tcw-launch.tcw-glass { background: rgba(40,34,44,.78); }
}
.tcw-glass .tcw-launch-eyebrow { color: var(--hat-star); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.tcw-glass .tcw-launch-line { color: rgba(255,255,255,.94); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.tcw-launch.tcw-glass:hover, .tcw-launch.tcw-glass:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 1px 0 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.34),
    0 28px 64px rgba(0,0,0,.36);
}

/* ---------- launcher, shared ----------

   Every launcher is a card with the hat hung on its top-left corner: the
   brim rests across the corner with its left end hanging outside the
   card, and the crown stands up into the space above. The hat is out of
   the card's flow, so the words get the whole width — no slot is kept
   empty beside them for a picture. */
.tcw-launch {
  --hat-w: 176px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  /* The brim reaches about a quarter of the hat's width down into the
     card at its left edge. The words start just below that. */
  padding: calc(var(--hat-w) * 0.265) 22px 18px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(26,26,26,.16);
  font: inherit;
  color: var(--tcw-ink);
  text-align: left;
  cursor: pointer;
  overflow: visible;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tcw-launch:hover, .tcw-launch:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(26,26,26,.24); }

/* --hat-w sets the size and everything else follows from it — where the
   hat sits, how far the brim reaches into the card, and so how much room
   the words leave above themselves. One number makes the hat bigger on
   any card, and the text still clears the brim. */
.tcw-launch-face {
  position: absolute;
  z-index: 3;
  left: calc(var(--hat-w) * -0.226);
  top: calc(var(--hat-w) * -0.643);
  width: var(--hat-w);
  height: calc(var(--hat-w) * 0.9286);
  transform: rotate(-14deg);
  transform-origin: 26% 88%;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.28));
}
.tcw-launch-copy { flex: 1 1 auto; min-width: 0; }
.tcw-launch-eyebrow {
  display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--tcw-crimson); white-space: nowrap;
}
.tcw-launch-line { display: block; margin-top: 4px; font-size: .95rem; line-height: 1.42; color: #3c3c3c; }
.tcw-launch-cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border-radius: 999px;
  background: var(--tcw-crimson); color: #fff;
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.tcw-launch:hover .tcw-launch-cta { background: #A81616; }

/* ---------- variant: over the homepage film ----------

   The home hero is a dark, cinematic frame, and a white pill on it read
   as a cookie banner. This is the same glass as the cover card, so it
   belongs to the frame, and the one thing in colour is the hat. */
.tcw-launch--hero {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: calc(var(--hat-w) * 0.265) 22px 20px;
  border-radius: 22px;
}
.tcw-launch--hero:hover, .tcw-launch--hero:focus-visible { transform: translateY(-2px); }
.tcw-launch--hero .tcw-launch-line { font-size: .94rem; }
.tcw-launch--hero .tcw-launch-cta { align-self: flex-start; margin-top: 6px; min-height: 44px; font-size: .76rem; }

/* Above 960px the landing furniture is placed over the film, so this is
   too: on the logo's own left edge, dropped far enough below the logo
   that the crown of the hat, which stands proud of the card, clears it.
   The logo is sized by a clamp, so the drop is a matching clamp and the
   two move together as the window changes. */
@media (min-width: 961px) {
  .landing-wizard {
    position: absolute;
    z-index: 3;
    top: clamp(262px, calc(180px + 8.5vw), 318px);
    left: calc(clamp(28px, 3.6vw, 62px) + 42px);
    width: min(420px, 36vw);
  }
}
/* Below it the ordinary header takes over, and the card sits inside the
   photograph, pinned to the bottom of the frame with the hat hanging into
   the picture above it. The frame is a little taller to hold it. The hero
   is a column flex here and the photograph carries order: 2, so the
   launcher needs an order too. */
@media (max-width: 960px) {
  .hero.landing { position: relative; }
  .hero.landing:has(.landing-wizard) .hero-image { height: 62vh; min-height: 440px; }
  .landing-wizard { order: 3; position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; margin: 0; }
  .tcw-launch--hero { --hat-w: 128px; padding: calc(var(--hat-w) * 0.265) 18px 16px; }
  .tcw-launch--hero .tcw-launch-face { left: -8px; }
  .tcw-launch--hero .tcw-launch-line { font-size: .9rem; }
  .tcw-launch--hero .tcw-launch-cta { align-self: stretch; min-height: 44px; }
}

/* ---------- variant: on the ink field ---------- */

/* Navy on near-black loses its outline, so on the ink panel the hat is
   lifted a few steps and given a faint rim of light. */
.tcw-launch--strip {
  margin: calc(var(--hat-w) * 0.7) 0 4px;
  padding: calc(var(--hat-w) * 0.265) 22px 20px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  --hat-main:  #3A4398;
  --hat-lit:   #5260BE;
  --hat-fold:  #2B3272;
  --hat-brim:  #4450AC;
  --hat-brim-under: #2E3680;
}
.tcw-launch--strip .tcw-launch-face { filter: drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.tcw-launch--strip .tcw-launch-line { color: rgba(255,255,255,.84); }
.tcw-launch--strip .tcw-launch-eyebrow { color: var(--tcw-lamp); }
.tcw-launch--strip:hover, .tcw-launch--strip:focus-visible { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }

/* ---------- variant: under the cover copy ---------- */

/* ---------- variant: resting on the helper's open palm ----------

   In the cover photograph the helper holds out an open hand. The card is
   anchored by its bottom-centre to the palm — 48.5% across, 43.5% down
   the picture — so whatever size the card comes out at, that point is
   where it stands. It lifts a few pixels off the hand and settles back, a soft shadow
   on the palm rises and falls with it, and a warm glow sits between the
   two: the card is the thing she is holding out, and it is a wizard's
   hat, so it floats. Because the photograph is shown whole and never
   cropped, the two percentages hold at every desktop width.

   It is a stacked card rather than a bar: a card standing in a
   photograph has to be narrow or it stops being a photograph. */
@media (min-width: 961px) {
  /* A zero-width rail spanning exactly the photograph — from the foot of
     the header to the bottom of the cover — so that a percentage on the
     card is a percentage of the picture and not of the cover including
     the strip the header sits over. */
  /* The rail is a point: wizard.js measures where the palm lands in the
     drawn picture and writes it here in pixels. The percentages are the
     fallback for the instant before the script runs. */
  .cover-point {
    position: absolute;
    z-index: 4;
    left: var(--palm-x, 48.5%);
    top: var(--palm-y, calc(var(--header-h, 86px) + 46%));
    width: 0; height: 0;
  }
  .tcw-launch--cover {
    position: absolute;
    left: 0;
    top: 0;
    width: min(250px, 22vw);
    transform: translate(-50%, -100%);
    animation: tcw-float 3.2s ease-in-out infinite;
  }
  /* A hovering card holds still the moment a pointer reaches it. Nobody
     should have to chase a button. The shared hover rule lifts a launcher
     by 2px with its own transform, which here would throw away the anchor
     translate and drop the card into her hand, so the hover transform is
     restated with the anchor kept. */
  .tcw-launch.tcw-launch--cover:hover, .tcw-launch.tcw-launch--cover:focus-visible {
    animation: none;
    transform: translate(-50%, calc(-100% - 6px));
  }
  .cover-point:has(.tcw-launch--cover:hover)::after,
  .cover-point:has(.tcw-launch--cover:focus-visible)::after { animation: none; transform: translateX(-50%) scaleX(.9); opacity: .7; }
  /* The shadow on her palm: at the anchor point, under the card's foot,
     shrinking and fading as the card rises. */
  .cover-point::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: min(150px, 13vw); height: 14px;
    margin-top: -8px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(26,26,26,.38) 0%, rgba(26,26,26,.18) 45%, rgba(26,26,26,0) 72%);
    animation: tcw-float-shadow 3.2s ease-in-out infinite;
    pointer-events: none;
  }
  .tcw-launch--cover {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    --hat-w: 138px;
    padding: calc(var(--hat-w) * 0.265) 18px 16px;
    border-radius: 22px;
  }
  .tcw-launch--cover .tcw-launch-line { font-size: .86rem; line-height: 1.38; }
  .tcw-launch--cover .tcw-launch-cta { width: 100%; justify-content: center; min-height: 40px; padding: 0 12px; font-size: .72rem; }
  /* Warm light between the palm and the card, so the eye reads them as
     one thing: she is holding up something that glows. */
  .tcw-launch--cover::before {
    content: '';
    position: absolute; left: 50%; bottom: -34px;
    width: 150%; height: 120px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,213,131,.34) 0%, rgba(255,213,131,.14) 40%, rgba(255,213,131,0) 70%);
    z-index: -1;
    animation: tcw-halo 3.2s ease-in-out infinite;
    pointer-events: none;
  }
}
@keyframes tcw-halo { 0%,100% { transform: translateX(-50%) scale(1); opacity: .7; } 50% { transform: translateX(-50%) scale(1.08); opacity: 1; } }
@keyframes tcw-float {
  0%, 100% { transform: translate(-50%, calc(-100% - 2px)); }
  50%      { transform: translate(-50%, calc(-100% - 8px)); }
}
@keyframes tcw-float-shadow {
  0%, 100% { transform: translateX(-50%) scaleX(1);   opacity: 1; }
  50%      { transform: translateX(-50%) scaleX(.82); opacity: .55; }
}

/* The photograph is half as tall as the window is wide, so on a narrow
   desktop the frame shrinks while the card's words do not; the card is
   scaled down to match the picture. The anchor is unchanged: bottom
   centre still meets the palm. */
@media (min-width: 961px) and (max-width: 1240px) {
  .tcw-launch--cover { width: min(212px, 21vw); }
  .tcw-launch--cover { --hat-w: 118px; padding: calc(var(--hat-w) * 0.265) 14px 14px; gap: 7px; }
  .tcw-launch--cover .tcw-launch-line { font-size: .79rem; line-height: 1.34; }
  .tcw-launch--cover .tcw-launch-eyebrow { font-size: .62rem; }
  .tcw-launch--cover .tcw-launch-cta { min-height: 36px; font-size: .66rem; }
}

/* On a phone the square crop puts her in the middle of the frame and
   there is no empty half to point into, so the badge goes back to being a
   bar under the words. */
@media (max-width: 960px) {
  .cover-point { width: 100%; margin-top: 96px; }
  .tcw-launch--cover { --hat-w: 128px; max-width: 100%; flex-direction: column; align-items: stretch; gap: 8px;
                       padding: calc(var(--hat-w) * 0.265) 16px 16px; }
  .tcw-launch--cover .tcw-launch-face { left: -8px; }
}

/* ---------- the panel ---------- */

.tcw-sheet { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 16px; }
.tcw-sheet[hidden] { display: none; }
.tcw-backdrop { position: absolute; inset: 0; background: rgba(26,26,26,.6); }
.tcw-panel {
  position: relative;
  width: min(580px, 100%);
  max-height: min(90vh, 880px);
  overflow: auto;
  padding: 28px 28px 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(26,26,26,.32);
  animation: tcw-in .3s ease-out;
}
@keyframes tcw-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.tcw-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; font-size: 1.8rem; line-height: 1; color: var(--tcw-ink); cursor: pointer;
}
.tcw-x:hover, .tcw-x:focus-visible { background: var(--tcw-blush); }

.tcw-head { display: flex; gap: 16px; align-items: flex-start; padding-right: 40px; }
.tcw-face { flex: 0 0 auto; width: 84px; height: 84px; }
.tcw-eyebrow { margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--tcw-crimson); }
.tcw-title {
  margin: 5px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  font-size: 1.62rem; line-height: 1.15; color: var(--tcw-ink);
}
.tcw-note { margin: 7px 0 0; font-size: .92rem; line-height: 1.5; color: #5f5f5f; }

.tcw-dots { display: flex; gap: 6px; margin: 20px 0 16px; padding: 0; list-style: none; }
.tcw-dot { flex: 1 1 0; height: 4px; border-radius: 999px; background: rgba(26,26,26,.12); transition: background .25s ease; }
.tcw-dot.is-done { background: rgba(139,9,9,.4); }
.tcw-dot.is-on { background: var(--tcw-crimson); }

.tcw-options { display: grid; gap: 9px; }
.tcw-opt {
  display: flex; align-items: flex-start; gap: 13px;
  width: 100%; padding: 14px 16px;
  border: 0; border-radius: 14px;
  background: #fff; box-shadow: inset 0 0 0 2px #E6E2DE;
  font: inherit; text-align: left; color: var(--tcw-ink); cursor: pointer;
  transition: box-shadow .16s ease, background .16s ease;
}
.tcw-opt:hover { background: #FFF7F5; box-shadow: inset 0 0 0 2px #D8B7B2; }
.tcw-opt.is-on { background: var(--tcw-blush); box-shadow: inset 0 0 0 2px var(--tcw-crimson); }
.tcw-opt-mark {
  flex: 0 0 auto; width: 21px; height: 21px; margin-top: 1px;
  border-radius: 50%; box-shadow: inset 0 0 0 2px #C9C3BD; background: #fff;
  transition: box-shadow .16s ease;
}
.tcw-opt.is-on .tcw-opt-mark { background: var(--tcw-crimson); box-shadow: inset 0 0 0 2px var(--tcw-crimson), inset 0 0 0 5px #fff; }
.tcw-opt strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.tcw-opt small { display: block; margin-top: 3px; font-size: .85rem; line-height: 1.45; color: #6a6a6a; }

.tcw-foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.tcw-back {
  min-height: 46px; padding: 0 6px; border: 0; background: none;
  font: inherit; font-size: .92rem; color: #5f5f5f;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tcw-back[hidden] { display: none; }
.tcw-back:hover { color: var(--tcw-ink); }
.tcw-next { margin-left: auto; min-width: 190px; }
.tcw-next:disabled { opacity: .38; cursor: not-allowed; }

/* ---------- what she left behind on the results ---------- */

.wiz-note { margin: 0 0 18px; padding: 16px 18px; border-radius: 14px; background: var(--tcw-blush); }
.wiz-note[hidden] { display: none; }
.wiz-note-line { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--tcw-ink); }
.wiz-note-drop { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; color: #6d4a4a; }
.wiz-note-clear {
  margin-top: 10px; padding: 0; border: 0; background: none;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--tcw-crimson);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.wiz-note-clear:hover { color: var(--tcw-ink); }

/* ---------- phones ---------- */

@media (max-width: 760px) {
  .tcw-launch { --hat-w: 128px; flex-direction: column; align-items: stretch; gap: 8px; border-radius: 20px;
                padding: calc(var(--hat-w) * 0.265) 16px 16px; }
  .tcw-launch-face { left: -8px; }
  .tcw-launch-eyebrow { white-space: normal; }
  .tcw-launch-cta { width: 100%; justify-content: center; }
  .landing-wizard { max-width: 100%; }
  .tcw-launch--cover { max-width: 100%; }
  .tcw-sheet { padding: 0; align-items: end; }
  .tcw-panel { width: 100%; max-height: 94vh; border-radius: 20px 20px 0 0; padding: 24px 18px 20px; }
  .tcw-head { gap: 12px; }
  .tcw-face { width: 68px; height: 68px; }
  .tcw-title { font-size: 1.4rem; }
  .tcw-next { min-width: 0; flex: 1 1 auto; }
}

/* ---------- stillness on request ---------- */

@media (prefers-reduced-motion: reduce) {
  .tcw-hat-body, .tcw-star, .tcw-panel, .tcw-launch.is-greeting .tcw-hat-body,
  .tcw-launch--cover::before, .tcw-launch--cover, .cover-point::after { animation: none; }
  @media (min-width: 961px) { .tcw-launch--cover { transform: translate(-50%, calc(-100% - 8px)); } }
  .tcw-star { opacity: .9; }
  .tcw-launch { transition: none; }
}

/* Seven-question version: a single set of options sits in its own
   radiogroup, and the home screen carries two short groups. */
.tcw-options > [role="radiogroup"]:not(.tcw-group) { display: grid; gap: 9px; }
.tcw-group + .tcw-group { margin-top: 18px; }
.tcw-group-title { margin: 0 0 4px; font-size: 1rem; font-weight: 600; color: #1A1A1A; }
.tcw-group-note { margin: 0 0 8px; font-size: .88rem; color: #5f5f5f; }
.tcw-group-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tcw-group-opts .tcw-opt { padding-block: 12px; }
@media (max-width: 340px) { .tcw-group-opts { grid-template-columns: 1fr; } }
.tcw-note[hidden] { display: none; }

/* Homepage: the hat is hooked on the card's top-right corner. The point
   of the brim that rests on the corner (34,104 in the drawing)
   is placed exactly on the corner and is also the point it turns about,
   so the tilt and the swing both pivot on the hook, the way a hat hung on
   a peg does. */
.tcw-launch.tcw-launch--hero .tcw-launch-face {
  left: auto;
  /* The hook is 24.3% across and 80% down the drawing's box. Mirroring
     and tilting about that point leaves it where it is, so the box is
     placed with that point on the corner: 75.7% of the box sticks out. */
  right: calc(var(--hat-w) * -0.757 + 7px);  /* on the rounded corner, not its bounding box */
  top: calc(var(--hat-w) * -0.745 + 7px);
  transform-origin: 24.3% 80.2%;
  transform: scaleX(-1) rotate(-14deg);
}

/* ---------- the shooting star (replaces the hat) ----------

   A white star circles the outside of the card on a soft ellipse, with a
   tail of sparkle fading out behind it. wizard.js measures the card and
   sets --orbit (the ellipse), --mx/--my (how far it reaches past the
   card) and --orbit-dur (an even speed). Every sparkle rides the same
   path a little behind the one before, so the tail follows the star.
   Nothing here uses rotate/translate on the travelling elements except a
   constant nudge: those properties compose outside offset-path, and a
   rotation would swing the whole orbit round. */
.tcw-launch.tcw-launch { --hat-w: 76px !important; }        /* the old hat room, now just padding */
.tcw-launch--strip { margin-top: 12px; }
.tcw-launch-face { display: none; }

.tcw-orbit {
  position: absolute; z-index: 4; pointer-events: none;
  top: calc(-1 * var(--my, 30px)); bottom: calc(-1 * var(--my, 30px));
  left: calc(-1 * var(--mx, 44px)); right: calc(-1 * var(--mx, 44px));
}
.tcw-comet, .tcw-spark {
  position: absolute; top: 0; left: 0;
  offset-path: var(--orbit);
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: tcw-orbit var(--orbit-dur, 9s) linear infinite;
  animation-delay: -1.5s;
}
.tcw-comet {
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px rgba(255,255,255,.9)) drop-shadow(0 0 18px rgba(255,236,170,.6));
}
.tcw-comet svg { display: block; width: 100%; height: 100%; fill: #fff; animation: tcw-pulse 1.1s ease-in-out infinite; }
.tcw-spark {
  /* smaller and fainter the further back in the tail */
  --size: max(1px, calc(3.4px - var(--i) * .04px));
  width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  translate: var(--jx) var(--jy);
  opacity: calc(1.05 - var(--i) * .016);
  /* each grain rides the same path this much behind the star */
  animation-delay: calc(var(--i) * .013s - 1.5s);
}
.tcw-spark b {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: #fff; box-shadow: 0 0 3px rgba(255,255,255,.9);
  animation: tcw-glint var(--tw, 1.2s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -.17s);
}
/* A few of the grains are little four-point glints, like the reference. */
.tcw-spark--cross { --size: 6px; }
.tcw-spark--cross b {
  border-radius: 0; box-shadow: none;
  background:
    linear-gradient(#fff, #fff) center / 1.2px 100% no-repeat,
    linear-gradient(#fff, #fff) center / 100% 1.2px no-repeat;
  transform: rotate(45deg);
}
@keyframes tcw-glint { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes tcw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes tcw-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* On the white card (only where the glass is not used) the star is gold. */
.tcw-launch:not(.tcw-glass):not(.tcw-launch--strip) .tcw-comet svg { fill: #E3A21A; }
.tcw-launch:not(.tcw-glass):not(.tcw-launch--strip) .tcw-spark b { background-color: #E3A21A; }

/* The dialog's badge: one gold star with a soft glow. */
.tcw-star-badge {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #FFF6D8 0 45%, #FFF0F0 72%, transparent 73%);
}
.tcw-star-badge svg { width: 58%; height: 58%; fill: #E3A21A; filter: drop-shadow(0 2px 4px rgba(227,162,26,.45)); animation: tcw-twinkle-badge 2.6s ease-in-out infinite; }
@keyframes tcw-twinkle-badge { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.1) rotate(12deg); } }

@media (prefers-reduced-motion: reduce) {
  .tcw-spark { display: none; }
  .tcw-comet { animation: none; offset-distance: 12%; }
  .tcw-comet svg, .tcw-spark b, .tcw-star-badge svg { animation: none; }
}

/* ---------- progress bar ---------- */
.tcw-progress { margin: 20px 0 16px; }
.tcw-progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font-size: .8rem; }
.tcw-progress-label { font-weight: 700; color: #1A1A1A; letter-spacing: .02em; }
.tcw-progress-pct { color: #8B0909; font-weight: 700; font-variant-numeric: tabular-nums; }
.tcw-progress-track { position: relative; height: 8px; border-radius: 999px; background: #FFE4E1; overflow: hidden; }
.tcw-progress-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #B51A1A, #8B0909);
  transition: width .35s cubic-bezier(.3,.7,.4,1);
}
@media (prefers-reduced-motion: reduce) { .tcw-progress-fill { transition: none; } }