/**
 * /index-new.php — the Workshopr 2.0 homepage, one workshop start to finish.
 *
 * The page is a rail: one workshop walked through its five real moments, each
 * handled by one phase of the app. The .tue- prefix is left over from the
 * "A Tuesday with a workshop" mockup this grew out of, whose clock stamps the
 * page has since retired; it is kept because it is unique and cheap to grep,
 * not because the page is still about a Tuesday. The header and footer are
 * the platform composites and bring their own styles.
 */

.tue-page {
  color: var(--color-ink);
  background-color: var(--bg-page);
  background-image: var(--paper-grid-image);
  background-size: var(--paper-grid-size);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
.tue-page ::selection { background: var(--phase-learn-dark); color: var(--text-inverse); }
.tue-page main a:focus-visible, .tue-page main button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.tue-page main h1, .tue-page main h2, .tue-page main h3 { font-family: var(--font-heading); font-weight: var(--font-semibold); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
/* The prefix sits in :where() so the reset weighs one element and nothing
   else: every .tue-* paragraph below sets its own margins, and the plain
   `.tue-page main p` form outweighed all of them. The page shipped with its
   lede, stop text and shelf lede margins collapsed to zero. */
:where(.tue-page main) p { margin: 0; }
.tue-page main img { max-width: 100%; display: block; }
.tue-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.tue-em { font-style: italic; color: var(--phase-learn-dark); box-shadow: inset 0 -8px 0 var(--phase-learn-light); }

/* Page-load reveal (motion.md page-reveal regime). The first viewport arrives
   as one orchestrated sequence; already visible under reduced motion. */
@keyframes tue-reveal { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.tue-rv { animation: tue-reveal var(--duration-reveal) var(--ease-reveal) both; }
.tue-rv-2 { animation-delay: var(--stagger-reveal); }
.tue-rv-3 { animation-delay: calc(var(--stagger-reveal) * 2); }
.tue-rv-4 { animation-delay: calc(var(--stagger-reveal) * 3); }

/* app screenshot frame */
.tue-shot { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); box-shadow: var(--shadow-xl), 0 30px 60px -20px color-mix(in srgb, var(--color-ink) 25%, transparent); background: var(--bg-surface); }
.tue-shot img { width: 100%; height: auto; }

/* hero */
.tue-hero { padding: var(--space-16) 0 var(--space-10); }
.tue-hero h1 { font-size: clamp(44px, 5.4vw, 72px); line-height: 1.02; max-width: 16ch; padding-bottom: var(--space-3); }
.tue-hero__lede { margin-top: var(--space-8); font-size: 19px; line-height: 1.55; color: var(--color-ink-secondary); max-width: 52ch; }
/* ── The day starts here ───────────────────────────────────────────────
   The fold's action and its promise ride the same 2px ink rail the hours
   below are strung on, one stop early. Everything here is the page's own
   vocabulary at full strength: the rail, the ringed stamp, the ink. The
   button is the only thing that gets louder, because it is the only thing
   being asked for. */
.tue-hero__start { position: relative; margin-top: var(--space-8); }

/* The rail. It overshoots the hero's own bottom padding so it meets the
   08:40 stamp with no seam; .tue-stop::before picks it up from there. */
.tue-hero__start::before {
  content: "";
  position: absolute;
  left: 7px;
  /* Starts at the centre of the start stamp, not above it. */
  top: 31px;
  bottom: calc(-1 * var(--space-10));
  width: 2px;
  background: var(--color-ink);
  opacity: .18;
}

/* The card: the day's first stop, lifted off the drafting paper so the one
   thing being asked for on the fold is an object rather than a line of
   furniture. It sits in the stops' content column, past the rail, with the
   stamp on the rail beside it exactly as every hour below is marked. */
.tue-hero__startcard {
  position: relative;
  margin-left: var(--space-8);
  /* px, not rem: this page renders under html { font-size: 80% }, so a rem
     max-width comes out a fifth short. Wide enough to keep the button and
     the scroll cue on one line; the assurance still reads near 60ch. */
  max-width: 560px;
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--gray-200);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-lg);
}

/* The hairline that ties the card back to the rail it hangs from. */
.tue-hero__startcard::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-8));
  top: 31px;
  width: var(--space-8);
  height: 2px;
  background: var(--color-ink);
  opacity: .18;
}

.tue-hero__cta { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }

/* Solid where the hours are hollow: the day's start is a different kind of
   mark from the hours it precedes, and filling it says so without spending
   red, which is already carried by the button beside it. The page-coloured
   ring keeps the rail from running through the stamp. */
.tue-hero__start::after {
  content: "";
  position: absolute;
  left: 0;
  /* On the same axis as the card's tie line. */
  top: 23px;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-ink);
  box-shadow: 0 0 0 4px var(--bg-page);
}

/* No button overrides here on purpose. ws_button('…', ['size' => 'lg']) already
   carries this geometry, and .ws-btn--primary already lifts on hover with
   --button-shadow-primary-hover behind it. The fold's emphasis comes from the
   card and the stamp around the button, not from a second, hand-tuned copy of
   the component's own styles. The one thing the page adds is a resting shadow,
   from the same token the hover state uses, so the button reads as an object on
   the paper before it is touched. */
.tue-hero__cta .ws-btn--primary {
  box-shadow: var(--button-shadow-primary-hover);
}

/* The scroll cue: a rail marker, not a second button. The rule under it is the
   same hairline the day is built from, and it draws in from the left on hover
   rather than switching on, so the link moves the way the page does. */
.tue-hero__jump { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-1); font-size: 17px; font-weight: var(--font-medium); color: var(--color-ink); text-decoration: none; }
.tue-hero__jump::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out); }
.tue-hero__jump:hover::after, .tue-hero__jump:focus-visible::after { transform: scaleX(1); }
.tue-hero__jump .material-symbols-outlined { font-size: 20px; color: var(--phase-learn-dark); transition: transform var(--duration-base) var(--ease-out); }
.tue-hero__jump:hover .material-symbols-outlined { transform: translateY(3px); }

/* No stamp of its own any more: inside the card this is the card's second
   line, and a ringed dot here would claim to be a stop on a rail it no
   longer touches. A rule separates it instead, the same hairline the day is
   built from. */
.tue-hero__assure { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--gray-200); max-width: 56ch; font-size: 15px; line-height: 1.55; color: var(--color-ink-secondary); }
.tue-hero__assure b { color: var(--color-ink); font-weight: var(--font-semibold); }

/* the day: each stop is its own grid so a sticky clock stamp is scoped to its
   own row (sticky sticks inside its containing block; one shared grid pinned
   every stamp to the top until the whole day had scrolled past). */
/* ── Before the clock ──────────────────────────────────────────────────
   Making the case happens weeks out, so it sits above the day with no stamp
   and no rail. It keeps the stops' second column so the page still reads as
   one measure, and the empty first column is the visible argument that this
   one is not on the clock. */
/* .tue-before is retired: Strategize used to sit in its own passage above the
   clock because a clock could not stamp "three weeks earlier". Relative-time
   stamps can, so it is a .tue-stop like the other four and the rail carries
   the whole engagement. */

/* The day, announced. Sits in the stops' own two-column measure so the
   heading starts where every hour's heading starts. */
.tue-day { display: grid; grid-template-columns: 200px 1fr; column-gap: var(--space-10); padding: var(--space-10) 0 var(--space-12); border-top: 1px solid var(--color-border); }
.tue-day h2 { grid-column: 2; font-size: 38px; line-height: 1.08; }

.tue-stop { display: grid; grid-template-columns: 200px 1fr; column-gap: var(--space-10); position: relative; }
.tue-stop::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--color-ink); opacity: .18; }
.tue-stop:last-of-type::before { bottom: auto; height: 24px; }
/* top clears the 64px sticky platform header */
.tue-stop__time { position: sticky; top: calc(64px + var(--space-6)); align-self: start; padding: 0 0 var(--space-3) var(--space-6); background: var(--bg-page); font-family: var(--font-heading); font-size: 40px; font-weight: var(--font-semibold); letter-spacing: -0.03em; line-height: 1; }
.tue-stop__time::before { content: ""; position: absolute; left: 0; top: 14px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-page); border: 3px solid var(--color-ink); }
/* A stamp of words needs a different size than a stamp of digits: "08:40" was
   five glyphs at 40px in a 200px column, "The Monday after" is sixteen and
   would set three ragged lines at that size. Smaller, tighter leading, and a
   measure that breaks it in two. */
.tue-stop__time--rel { font-size: 26px; line-height: 1.12; letter-spacing: -0.02em; max-width: 9ch; }
.tue-stop__time small { display: block; margin-top: var(--space-2); font-family: var(--font-body); font-size: 12px; font-weight: var(--font-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--phase-learn-dark); }
.tue-stop__body { padding: 0 0 var(--space-16); }
.tue-stop__body h2 { font-size: 38px; line-height: 1.08; max-width: 18ch; }
.tue-stop__txt { margin: var(--space-4) 0 var(--space-6); font-size: 17px; line-height: 1.6; color: var(--color-ink-secondary); max-width: 58ch; }
.tue-stop__txt b { color: var(--color-ink); font-weight: var(--font-semibold); }
.tue-stop .tue-shot { transform: rotate(-.4deg); }
.tue-stop:nth-of-type(even) .tue-shot { transform: rotate(.4deg); }

/* the red hour */
.tue-stop--live .tue-stop__body { background: var(--phase-learn); color: var(--text-inverse); padding: var(--space-10); border-radius: var(--radius-2xl); margin-bottom: var(--space-16); box-shadow: var(--mainsite-shadow); }
.tue-stop--live .tue-stop__body h2, .tue-stop--live .tue-stop__txt b { color: var(--text-inverse); }
.tue-stop--live .tue-stop__txt { color: color-mix(in srgb, var(--text-inverse) 88%, var(--phase-learn)); }
.tue-stop--live .tue-shot { transform: none; border-color: color-mix(in srgb, var(--text-inverse) 30%, transparent); }
/* The two thinking stops take the same card shape as the live hour, in the
   tint rather than the full field: making the case going in, and making sense
   of it coming out. They bracket the doing (white to build, the full field
   for the room), so the rail reads tint, white, field, tint. The field stays
   reserved for the room: that is the only place on this page where red is
   allowed to be a surface rather than a tint. */
.tue-stop--case .tue-stop__body { background: var(--phase-learn-very-light); border: 1px solid var(--phase-learn-light); padding: var(--space-10); border-radius: var(--radius-2xl); margin-bottom: var(--space-16); }
.tue-stop--case .tue-shot { transform: none; border-color: var(--phase-learn-light); }
/* The build stop takes the same card, in white: the three cards step from the
   tint through white to the full field as the workshop gets closer, so the
   rail reads as rising temperature rather than three unrelated panels. */
.tue-stop--plan .tue-stop__body { background: var(--card-bg); border: 1px solid var(--gray-200); padding: var(--space-10); border-radius: var(--radius-2xl); margin-bottom: var(--space-16); box-shadow: var(--shadow-sm); }
.tue-stop--plan .tue-shot { transform: none; border-color: var(--gray-200); }
.tue-cards { display: flex; gap: var(--space-2); margin-top: var(--space-6); flex-wrap: wrap; }
.tue-cards span { padding: var(--space-1-5) var(--space-3); border: 1px solid color-mix(in srgb, var(--text-inverse) 45%, transparent); border-radius: var(--radius-full); font-size: 13px; font-weight: var(--font-medium); }

/* the following monday: prove */
/* .tue-stop--prove and .tue-report are retired with the sample impact report
   they styled. The rail now ends on .tue-stop--end: a stop with an empty
   stamp, so the spine runs its full length and stops under the button rather
   than a few hundred pixels short of it. */
.tue-stop--end .tue-stop__body { padding-bottom: var(--space-16); }
.tue-stop--end .tue-stop__time { min-height: var(--space-8); }
/* No ringed stamp here. Every other dot on the rail marks a moment in the
   workshop; this row is the way out of the page, and a stamp on it would
   promise a sixth stop that does not exist. */
.tue-stop--end .tue-stop__time::before { display: none; }

/* shelf: the other apps, in the launcher's grouped-list form so the three
   places that list the tools read the same (includes/components/app-shelf.php) */
/* ── What facilitators say ──────────────────────────────────────────── */
.tue-say { padding: var(--space-12) 0 0; }
.tue-say h2 { font-size: 34px; line-height: 1.1; }
.tue-say__grid { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
/* Cards, like the shelf below and the start card above: on this page a
   surface lifted off the drafting paper is what an object looks like. The
   ink rule each quote used to hang from stays, as a short mark over the
   opening line, so the card still carries the page's hairline. */
.tue-say__q {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--gray-200);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out);
}

.tue-say__q:hover { box-shadow: var(--shadow-md); }

.tue-say__q::before {
  content: "";
  width: 32px;
  height: 2px;
  margin-bottom: var(--space-4);
  background: var(--phase-learn);
}
.tue-say__txt { margin: 0; font-family: var(--font-heading); font-size: 19px; line-height: 1.42; letter-spacing: -0.01em; color: var(--color-ink); }
/* The opening mark hangs in the margin, so the quote's first line still
   starts on the column edge the rule above it sets. */
.tue-say__txt::before { content: "\201C"; margin-left: -0.42em; color: var(--phase-learn-dark); }
.tue-say__txt::after { content: "\201D"; color: var(--phase-learn-dark); }
.tue-say__who { display: block; margin-top: auto; padding-top: var(--space-4); }
.tue-say__name { display: block; font-size: 14px; font-weight: var(--font-semibold); color: var(--color-ink); }
.tue-say__role { display: block; margin-top: 2px; font-size: 13px; color: var(--color-ink-secondary); line-height: 1.4; }

.tue-shelf { margin-top: var(--space-10); padding: var(--space-12) 0; border-top: 1px solid var(--color-border); }
.tue-shelf h2 { font-size: 34px; }
.tue-shelf__lede { margin-top: var(--space-2); color: var(--color-ink-secondary); max-width: 60ch; }
/* One column per phase, so the whole shelf is one screenful and the platform's
   four-part shape is legible without scrolling. Two columns put two phases
   below the fold and made the cards tall enough to read as four unrelated
   lists. `1fr` rather than `auto`: equal columns keep the phase labels on one
   baseline even though the groups hold 2-4 rows each. */
.tue-shelf__groups { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: stretch; }
.tue-shelf__phase { margin: 0 0 var(--space-3); font-family: var(--font-body); font-size: 11px; font-weight: var(--font-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--phase-learn-dark); }
/* Each phase is a card. The rule that used to head the group did the same
   job with less: these are four separate shelves, and giving each one its
   own surface says so before a word is read. The phase label sits on the
   card's own top edge rather than above it. */
.tue-shelf__group {
  padding: var(--space-4);
  background: var(--card-bg);
  border: 1px solid var(--gray-200);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out);
}

.tue-shelf__group:hover { box-shadow: var(--shadow-md); }
/* Two columns, not three: at a quarter of the wrap there is no room for a
   trailing arrow next to a name and a description, and the arrow was the
   least load-bearing of the three. The whole row is the target, so nothing
   is lost by dropping it. `align-items: start` keeps the icon level with the
   name once the description wraps to two lines, which it now usually does. */
.tue-shelf__app { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-2); margin: 0 calc(-1 * var(--space-1)); border-radius: var(--radius-md); color: inherit; text-decoration: none; transition: background-color var(--duration-base) var(--ease-out); }
.tue-shelf__app + .tue-shelf__app { margin-top: var(--space-1); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.tue-shelf__app:hover { background: var(--phase-learn-very-light); }
.tue-shelf__app:hover .tue-shelf__name { color: var(--phase-learn-dark); }
/* The consolidated app, above the phase columns rather than inside one. It is
   the destination the phases are parts of, so it gets the full width and a
   rule beneath it instead of a column and a heading. */
.tue-shelf__app--featured { margin-bottom: var(--space-5); padding: var(--space-3); background: var(--phase-learn-very-light); border: 1px solid var(--color-border); align-items: center; }
.tue-shelf__app--featured .tue-shelf__name { font-size: var(--text-lg); }
.tue-shelf__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--phase-learn-light); color: var(--phase-learn-dark); }
.tue-shelf__icon .material-symbols-outlined { font-size: 19px; }
.tue-shelf__meta { min-width: 0; }
.tue-shelf__name { display: block; font-family: var(--font-heading); font-size: var(--text-body); font-weight: var(--font-semibold); line-height: 1.3; }
.tue-shelf__d { display: block; margin-top: var(--space-0-5); font-size: var(--text-meta); color: var(--color-ink-secondary); line-height: 1.4; }
.tue-shelf__arrow { display: none; }

/* plans — a summary of /pricing/, not a second copy of it. Two cards, Pro
   carrying the ink field so the eye lands on the paid plan without the page
   raising its voice. */
.tue-price { padding: var(--space-12) 0; border-top: 1px solid var(--color-border); }
.tue-price h2 { font-size: 34px; line-height: 1.1; }
.tue-price__lede { margin-top: var(--space-2); color: var(--color-ink-secondary); max-width: 60ch; }
.tue-price__cards { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); align-items: stretch; }
.tue-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--card-bg);
  border: 1px solid var(--gray-200);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
}
.tue-plan--pro { background: var(--color-ink); border-color: var(--color-ink); color: var(--bg-page); }
.tue-plan__flag { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-6); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--phase-learn); color: #fff; font-size: var(--text-caption); font-weight: var(--font-semibold); letter-spacing: .04em; text-transform: uppercase; }
.tue-plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.tue-plan__name { margin: 0; font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--font-semibold); }
.tue-plan__cost { margin: 0; text-align: right; font-size: var(--text-meta); color: var(--color-ink-secondary); }
.tue-plan--pro .tue-plan__cost { color: var(--gray-200); }
.tue-plan__cost b { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--font-semibold); color: var(--color-ink); }
.tue-plan--pro .tue-plan__cost b { color: var(--bg-page); }
.tue-plan__cost span { display: block; }
.tue-plan__line { margin: var(--space-3) 0 var(--space-4); font-size: var(--text-ui); color: var(--color-ink-secondary); }
.tue-plan--pro .tue-plan__line { color: var(--gray-200); }
.tue-plan__list { margin: 0 0 var(--space-6); padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.tue-plan__list li { position: relative; padding-left: var(--space-6); font-size: var(--text-small); line-height: 1.5; }
.tue-plan__list li::before { content: "check"; position: absolute; left: 0; top: 1px; font-family: 'Material Symbols Outlined'; font-size: 17px; line-height: 1.3; color: var(--phase-learn); }
.tue-plan--pro .tue-plan__list li::before { color: var(--phase-learn-light); }
/* The CTA sits on the card's floor whatever the lists weigh, so both buttons
   share a baseline even though Free carries a longer library line. */
.tue-plan__cta { margin-top: auto; align-self: start; }
.tue-price__more { margin-top: var(--space-6); font-size: var(--text-ui); }
.tue-price__more a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--phase-learn-dark); font-weight: var(--font-semibold); text-decoration: none; }
.tue-price__more a:hover { text-decoration: underline; }
.tue-price__more .material-symbols-outlined { font-size: 18px; transition: transform var(--duration-base) var(--ease-out); }
.tue-price__more a:hover .material-symbols-outlined { transform: translateX(3px); }

/* film modal — the video fills the dialog body and carries the ink behind it
   so the letterbox bars match the frame rather than the page. */
.tue-film-modal video { width: 100%; display: block; border-radius: var(--radius-lg); background: var(--color-ink); }

/* close */
.tue-close { padding: var(--space-16) 0 var(--space-12); text-align: center; }
.tue-close h2 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; }
.tue-close__cta { margin-top: var(--space-6); display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }

@media (max-width: 900px) {
  .tue-stop { grid-template-columns: 1fr; }
  .tue-stop::before { display: none; }
  /* The rail is gone at this width, so its hero segment and both stamps go
     with it; indenting past a rail that is not there just loses 32px. */
  .tue-hero__start::before,
  .tue-hero__start::after,
  .tue-hero__startcard::before { display: none; }
  .tue-hero__startcard { margin-left: 0; padding: var(--space-5); }
  .tue-stop__time { position: static; padding-left: 0; font-size: 28px; margin-bottom: var(--space-3); }
  .tue-stop__time::before { display: none; }
  .tue-stop--live .tue-stop__body,
  .tue-stop--case .tue-stop__body,
  .tue-stop--plan .tue-stop__body { padding: var(--space-6); }
  .tue-day { grid-template-columns: 1fr; }
  .tue-day h2 { grid-column: 1; font-size: 28px; }
  /* The stamp is a plain line above its stop at this width, so the measure
     that broke it into two lines in the rail would now break it for nothing. */
  .tue-stop__time--rel { font-size: 24px; max-width: none; }
  .tue-say__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .tue-price__cards { grid-template-columns: 1fr; gap: var(--space-6); }
  .tue-price h2 { font-size: 28px; }
}
/* The shelf steps down on its own ladder: four phases side by side need more
   width than the rest of the page does, and one column is only right once a
   card is too narrow for an icon beside two lines of text. */
@media (max-width: 1080px) {
  .tue-shelf__groups { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 560px) {
  .tue-shelf__groups { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tue-rv { animation: none; }
  .tue-hero__jump::after, .tue-hero__jump .material-symbols-outlined { transition: none; }
  .tue-hero__jump:hover .material-symbols-outlined { transform: none; }
  .tue-shelf__app, .tue-shelf__app:hover, .tue-shelf__group, .tue-say__q { transition: none; }
}

/* --- The account modal (#tueSigninModal) ----------------------------------
   The /start/ card in a branded ws_modal body; the header carries the
   mode-swapped title. Grid gap does all the rhythm: the page resets heading
   and paragraph margins inside main (see the top of this file), and
   per-child margins would lose that fight anyway, so no child here carries
   one. Hidden rows leave no empty gap track behind. */
.ws-modal.tue-signin-modal { max-width: 440px; }
.tue-signin__card, .tue-signin__done { display: grid; gap: var(--space-4); }
/* display:grid on the class outweighs the UA's [hidden] rule, so the pane
   swap needs the attribute restated at author level. */
.tue-signin__card[hidden], .tue-signin__done[hidden] { display: none; }
/* A refused sign-in is the one thing here a user must not miss, so the
   message sits above the form rather than under the button. */
.tue-signin__error {
  background: var(--phase-learn-very-light, #FDF0F0);
  border: 1px solid var(--phase-learn-light, #F5B5B5);
  color: var(--phase-learn-dark, #C73E3E);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  font-size: var(--text-small, 14px);
}
.tue-signin__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  color: var(--color-ink-secondary, #5C5242);
  font-size: var(--text-small, 14px);
}
.tue-signin__divider::before,
.tue-signin__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200, #E7E5E4);
}
.tue-signin__form { display: grid; gap: var(--space-4); }
.tue-signin__alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  font-size: var(--text-small, 14px);
  color: var(--color-ink-secondary, #5C5242);
}
.tue-signin__forgot {
  text-align: center;
  font-size: var(--text-small, 14px);
}
.tue-signin__forgot a { color: var(--color-ink-secondary, #5C5242); }
.tue-signin__done { text-align: center; padding: var(--space-4) 0; }