.reflection-survey-body.exit-ticket-flow-body {
  --flow-header-height: 3.25rem;
  --flow-page-padding: clamp(1.25rem, 3.5vw, 4.5rem);
  --flow-page-padding-block: clamp(1.5rem, 3.5svh, 3rem);
  --flow-section-padding-block: clamp(5rem, 6vw, 6rem);
  --flow-section-gap: clamp(3rem, 4vw, 4rem);
  --flow-heading-gap: 0.75rem;
  --flow-question-card-width: 17rem;
  /* Ease the workflow gaps on smaller desktops so the side columns remain readable. */
  --routine-gap: clamp(2.5rem, calc(12.5vw - 6.75rem), 4.5rem);
  --routine-share-width: var(--routine-email-width);
  --routine-email-width: 18rem;
  --routine-tickets-width: calc(2 * var(--flow-question-card-width) + 0.875rem);
  --flow-content-max-width: calc(var(--routine-share-width) + var(--routine-tickets-width) + var(--routine-email-width) + 2 * var(--routine-gap));
  --flow-connector-width: 1.5px;
  --timeline-rule-opacity: 0.25;
  --timeline-rule-color: rgb(168 208 247 / var(--timeline-rule-opacity));
  --timeline-line-width: var(--flow-connector-width);
  --flow-background-tint:
    linear-gradient(180deg,
      rgb(30 144 255 / 30%) 0%,
      rgb(30 144 255 / 15%) 50%,
      rgb(30 144 255 / 6%) 100%);
  background-image:
    var(--flow-background-tint),
    url("exit-ticket-demo-background.svg");
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.exit-ticket-header-band {
  position: sticky;
  top: 0;
  z-index: 10;
  box-sizing: border-box;
  min-height: var(--flow-header-height);
  border-bottom: 1px solid color-mix(in srgb, var(--exit-ticket-light-blue) 25%, transparent);
}

.exit-ticket-header-band::before,
.exit-ticket-header-band::after {
  content: "";
}

.exit-ticket-header-band::before,
.exit-ticket-header-band::after,
.exit-ticket-header-brand::before,
.exit-ticket-header-brand::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.exit-ticket-header-band::before,
.exit-ticket-header-brand::before {
  z-index: -2;
  /* Keep the viewport-aligned crop translucent without fading the header content. */
  background-image:
    var(--flow-background-tint),
    url("exit-ticket-header-background.svg");
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.88;
}

.exit-ticket-header-band::after,
.exit-ticket-header-brand::after {
  z-index: -1;
  /* Soften the painted background while leaving header content sharp. */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.exit-ticket-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: calc(100% - 2 * var(--flow-page-padding));
  min-height: var(--flow-header-height);
  margin-inline: auto;
}

.exit-ticket-header-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  color: #f2f6fa;
  text-decoration: none;
  white-space: nowrap;
}

.exit-ticket-header-brand:focus-visible,
.exit-ticket-header-action:focus-visible {
  outline: 2px solid var(--exit-ticket-light-blue);
  outline-offset: 3px;
}

.exit-ticket-header-logo {
  display: block;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  filter: drop-shadow(0 1px 1.5px rgb(4 24 46 / 50%));
}

.exit-ticket-header-wordmark {
  font: 650 1.5rem/1.2 "DM Sans", sans-serif;
  letter-spacing: -0.5px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.exit-ticket-header-actions {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
  margin-inline-start: auto;
}

.exit-ticket-header-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  color: #DCEFFD;
  font: 600 0.875rem/1.2 "DM Sans", sans-serif;
  text-align: center;
  text-decoration: none;
  text-underline-offset: 0.25em;
}

.exit-ticket-header-action + .exit-ticket-header-action::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-0.25rem - 0.5px);
  top: 50%;
  width: 1px;
  height: 1rem;
  background: color-mix(in srgb, var(--exit-ticket-light-blue) 40%, transparent);
  transform: translateY(-50%);
  pointer-events: none;
}

.exit-ticket-header-action:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 36rem) {
  .exit-ticket-header-inner {
    gap: 0.5rem;
  }

  .exit-ticket-header-brand {
    gap: 0.25rem;
  }

  .exit-ticket-header-logo {
    width: 1.75rem;
    height: 1.75rem;
  }

  .exit-ticket-header-wordmark {
    font-size: 1.125rem;
  }

  .exit-ticket-header-action {
    padding: 0.125rem 0.5rem;
    font-size: 0.8125rem;
  }
}

.exit-ticket-flow-body :is(#classroom-routine, #classroom-routine-heading, #course-timeline-intro, #course-timeline-heading, #flow-heading) {
  scroll-margin-top: calc(var(--flow-header-height) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.exit-ticket-flow-body #classroom-routine:target) {
    scroll-behavior: smooth;
  }
}

.reflection-survey-body.exit-ticket-flow-body .reflect-inner {
  padding: 0 var(--flow-page-padding);
}

.reflection-survey-body.exit-ticket-flow-body main {
  flex-direction: column;
  padding: 0;
}

.exit-ticket-flow-body .exit-ticket-legal-links {
  margin-block-start: 8rem;
}

.exit-ticket-flow-body main > section {
  box-sizing: border-box;
  flex: none;
  scroll-margin-top: var(--flow-header-height);
}

.classroom-routine,
.question-flow,
.course-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--flow-section-gap);
  padding-block: var(--flow-section-padding-block);
}

.flow-heading-block {
  position: relative;
}

.flow-intro .flow-heading-block {
  --flow-heading-inset: clamp(1.25rem, 2vw, 2rem);
  --flow-subheading-inset: clamp(0.75rem, 1vw, 1rem);
  display: grid;
  grid-template-columns: var(--flow-heading-inset) minmax(0, 1fr);
  row-gap: var(--flow-heading-gap);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.flow-intro .flow-heading-block > .flow-wordmark {
  grid-area: 1 / 2;
  margin: 0;
  color: var(--exit-ticket-light-blue);
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
}

.flow-intro .flow-heading-block > h2 {
  grid-area: 2 / 2;
}

.flow-intro .flow-heading-block > .flow-intro-copy {
  grid-area: 3 / 2;
  margin-block-start: 0;
  padding-inline-start: var(--flow-subheading-inset);
}

.flow-heading-connector {
  position: absolute;
  grid-area: 1 / 1 / 3 / 2;
  inset: 0;
  /* Composite the strokes together so overlapping ends stay the same shade. */
  opacity: var(--timeline-rule-opacity);
  pointer-events: none;
}

.flow-heading-rule,
.flow-heading-rule-entry {
  --flow-accent: var(--exit-ticket-light-blue);
  --flow-heading-extension: calc(var(--flow-heading-gap) + 0.5lh);
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

.flow-heading-rule {
  /* Start level with the eyebrow; end at the subheading's first line. */
  inset-block-start: 8px;
  inset-inline-start: calc(var(--timeline-line-width) / 2);
  inline-size: calc(var(--flow-heading-inset) + var(--flow-subheading-inset) - 1rem - var(--timeline-line-width) / 2);
  block-size: calc(100% + var(--flow-heading-extension) - 16px);
}

.flow-heading-rule-entry {
  inset-block-start: 0;
  inset-inline-start: calc(var(--timeline-line-width) / 2 - var(--flow-page-padding));
  inline-size: calc(var(--flow-page-padding) - 8px);
  block-size: 1px;
}

/* Hero styles stay separate from the two demos. */
.signature-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  width: 100%;
  max-width: 76rem;
  min-height: calc(100vh - var(--flow-header-height));
  min-height: calc(100dvh - var(--flow-header-height));
  margin-inline: auto;
  padding-block-start: calc(var(--flow-page-padding-block) + clamp(2rem, 5svh, 4rem));
  padding-block-end: max(var(--flow-section-padding-block), clamp(4rem, 8svh, 6rem));
  color: #f2f6fa;
}

.signature-hero > * {
  min-width: 0;
}

.signature-hero-copy > .flow-wordmark {
  position: relative;
  font-family: "DM Mono", monospace;
  width: fit-content;
  max-width: 100%;
  margin-top: -2.5rem;
  margin-bottom: 3.3rem;
}

.signature-hero-eyebrow-rule {
  --flow-accent: var(--exit-ticket-light-blue);
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 0;
  width: 100%;
  height: 4px;
  overflow: visible;
  pointer-events: none;
}

.signature-hero-eyebrow-rule .flow-empty-connector {
  stroke-width: 1px;
  opacity: 0.35;
}

@keyframes signature-eyebrow-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 -1px 0 -1px); }
}

@media (prefers-reduced-motion: no-preference) {
  .signature-hero-eyebrow-rule {
    /* Reveal the existing dashes without stretching or shifting their pattern. */
    animation: signature-eyebrow-draw 850ms cubic-bezier(0.22, 0.7, 0.28, 1) 120ms backwards;
  }
}

.signature-hero h1 {
  margin: 0;
  color: #fff;
  font-family: "DM Serif Display", serif;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

.signature-hero-ticket-word {
  white-space: nowrap;
}

.signature-hero-ticket-letter {
  display: inline-block;
  position: relative;
  height: 0;
  line-height: 0;
  /* Keep the native advance width, with the zero-height box on the baseline. */
  contain: layout;
}

.signature-hero-ticket-native-i {
  opacity: 0;
}

.signature-hero-ticket-i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /* The body spans 33.7 of 52.4 units: match its top to the font's x-height. */
  height: 1.555ex;
  overflow: visible;
}

.flow-intro-copy {
  max-width: 80ch;
  margin: var(--flow-heading-gap) 0 0;
  color: var(--exit-ticket-light-blue);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: balance;
}

.signature-hero-copy .flow-heading-block {
  margin-block-end: 2rem;
}

.signature-hero-copy .flow-intro-copy {
  font-size: 1.125rem;
}

.signature-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-radius: 0.3rem;
  background: #DCEFFD;
  color: var(--deep-blue);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.signature-hero-cta:hover {
  background: #f2f6fa;
}

.signature-hero-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.signature-hero-cta-arrow {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.signature-hero-ticket-stack {
  --signature-ticket-header-padding: 1.5rem;
  --signature-ticket-title-line-height: 2.3rem;
  --signature-ticket-byline-line-height: 1.05rem;
  --signature-ticket-byline-gap: 0.35rem;
  --signature-ticket-notch-radius: 5px;
  display: grid;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  padding: 1.25rem;
}

.signature-hero-sheet {
  grid-area: 1 / 1;
  position: relative;
  isolation: isolate;
  border-radius: 0.75rem;
  background: var(--signature-ticket-fill);
  transform-origin: 50% 85%;
  box-shadow: 0 2px 5px rgb(7 44 76 / 12%);
}

/* The broad survey shadow sits beneath every sheet, aligned with the front. */
.signature-hero-sheet--shadow {
  --signature-ticket-fill: transparent;
  z-index: -1;
  box-shadow: 0 1.5rem 3rem rgb(2 12 24 / 30%);
  pointer-events: none;
}

.signature-hero-sheet--shadow,
.signature-hero-ticket {
  transform: rotate(1.25deg);
}

/* A typed value keeps the fan in paint: direct transform animation also
   composites the overlapping front ticket and blurs its stationary text. */
@property --signature-fan-transform {
  syntax: "<transform-list>";
  inherits: false;
  initial-value: translateY(0px) rotate(1.25deg);
}

.signature-hero-sheet--back {
  --signature-ticket-fill: #AACFE9;
  --signature-fan-transform: translateY(-0.45rem) rotate(-3deg);
  z-index: 0;
  transform: var(--signature-fan-transform);
}

.signature-hero-sheet--middle {
  --signature-ticket-fill: #C5E1F4;
  --signature-fan-transform: translateY(-0.2rem) rotate(-0.75deg);
  z-index: 1;
  transform: var(--signature-fan-transform);
}

.signature-hero-ticket {
  --signature-ticket-fill: #DCEFFD;
  z-index: 2;
  color: var(--deep-blue);
}

@keyframes signature-ticket-fan {
  from { --signature-fan-transform: translateY(0px) rotate(1.25deg); }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .signature-hero-sheet--back,
  .signature-hero-sheet--middle {
    animation: signature-ticket-fan 900ms cubic-bezier(0.22, 0.7, 0.28, 1) 100ms backwards;
    animation-play-state: paused;
  }

  .signature-hero-sheet--middle {
    animation-delay: 180ms;
  }

  .signature-hero-ticket-stack[data-signature-ticket-ready] :is(.signature-hero-sheet--back, .signature-hero-sheet--middle) {
    animation-play-state: running;
  }

  .signature-hero-ticket-stack[data-signature-fan-static] :is(.signature-hero-sheet--back, .signature-hero-sheet--middle) {
    animation: none;
  }
}

.signature-hero-ticket-surface {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.signature-hero-ticket-outline {
  fill: var(--signature-ticket-fill);
}

/* Shadows are separate shapes; the ticket edges and text remain unfiltered. */
.signature-hero-ticket-shadow {
  fill: rgb(7 44 76 / 12%);
  filter: blur(2.5px);
  transform: translateY(2px);
}

.signature-hero-ticket-shadow--ambient {
  fill: rgb(2 12 24 / 30%);
  filter: blur(1.5rem);
  transform: translateY(1.5rem);
}

.signature-hero-ticket-perforation {
  fill: none;
  stroke: var(--exit-ticket-light-blue);
  stroke-width: 1px;
  stroke-dasharray: var(--exit-ticket-rule-dash) var(--exit-ticket-rule-gap);
}

/* Keep the ordinary backgrounds visible until the SVGs have their dimensions. */
.signature-hero-ticket-stack[data-signature-ticket-ready] .signature-hero-sheet {
  background: transparent;
  box-shadow: none;
}

.signature-hero-ticket-stack[data-signature-ticket-ready] .signature-hero-ticket-surface {
  display: block;
}

.signature-hero-ticket-stack[data-signature-ticket-ready] .signature-hero-ticket > header::after {
  display: none;
}

.signature-hero-ticket > header {
  position: relative;
  display: grid;
  /* Preserve the original title space while centering its trimmed lettering. */
  grid-template-rows: minmax(var(--signature-ticket-title-line-height), auto);
  align-items: center;
  padding: var(--signature-ticket-header-padding) clamp(1.1rem, 2vw, 2rem);
  /* Balance the byline's height and gap above the title. */
  padding-block-start: calc(var(--signature-ticket-header-padding) + var(--signature-ticket-byline-line-height) + var(--signature-ticket-byline-gap));
  border-bottom: 1px solid transparent;
}

.signature-hero-ticket > header::after {
  content: "";
  position: absolute;
  inset-inline: calc(var(--signature-ticket-notch-radius) + 5px);
  bottom: -1px;
  border-bottom: 1px dashed var(--exit-ticket-light-blue);
}

.signature-hero-ticket h2 {
  color: inherit;
  font: 700 2rem/var(--signature-ticket-title-line-height) "DM Sans", sans-serif;
  letter-spacing: -0.5px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.signature-hero-byline {
  margin: var(--signature-ticket-byline-gap) 0 0;
  color: #356A9C;
  font: 400 0.75rem/var(--signature-ticket-byline-line-height) "DM Mono", monospace;
}

.signature-hero-ticket ul {
  margin: 0;
  padding: 0.25rem clamp(1.1rem, 2vw, 2rem) 0.75rem;
  list-style: none;
}

.signature-hero-ticket li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 0.75rem;
  padding-block: calc(1rem + 3px) calc(1rem - 3px);
}

.signature-hero-row-icon {
  position: absolute;
  inset-inline-end: calc(100% + 0.75rem);
  /* One line height anchors the icon to the first line even when the heading wraps. */
  inset-block-start: 0.5lh;
  transform: translateY(-50%);
  inline-size: 2rem;
  block-size: 2rem;
  background-color: currentColor;
  -webkit-mask: var(--row-icon) center / contain no-repeat;
  mask: var(--row-icon) center / contain no-repeat;
}

.signature-hero-ticket li + li {
  /* Keep the divider's layout space while drawing it only beside the text. */
  border-top: 1px solid transparent;
}

.signature-hero-ticket li + li::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 2.75rem 0;
  border-top: 1px solid rgb(11 62 114 / 10%);
}

.signature-hero-ticket h3 {
  position: relative;
  grid-column: 2;
  color: inherit;
  font-size: 1rem;
  font-weight: 600;
}

.signature-hero-ticket li p {
  grid-column: 2;
  margin: 0.35rem 0 0;
  color: #3B73A7;
  font-size: 0.875rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.classroom-routine {
  --flow-accent: var(--exit-ticket-light-blue);
  --routine-columns: minmax(0, var(--routine-share-width)) var(--routine-tickets-width) minmax(0, var(--routine-email-width));
  --routine-line: rgb(168 208 247 / 55%);
  width: 100%;
  margin: 0 auto;
  /* Use the hero's bottom space; keep the connector stroke below its edge. */
  padding-block-start: calc(var(--flow-connector-width) / 2);
  color: #f2f6fa;
}

.flow-intro .flow-wordmark,
.routine-step-label {
  font-family: "DM Mono", monospace;
}

.routine-diagram {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 100%;
  max-width: var(--flow-content-max-width);
  margin-inline: auto;
}

.routine-outline {
  fill: none;
  stroke: var(--routine-line);
  stroke-width: var(--flow-connector-width);
}

.routine-diagram[data-routine-outlines-ready] :is(.routine-link, .routine-email) {
  border-color: transparent;
}

.routine-diagram [data-routine-connection] {
  opacity: var(--timeline-rule-opacity);
}

.routine-steps {
  display: grid;
  grid-template-columns: var(--routine-columns);
  grid-template-rows: auto auto;
  gap: 1.5rem var(--routine-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.routine-step {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  min-width: 0;
}

.routine-step-label {
  margin: 0 0 0.65rem;
  color: var(--exit-ticket-light-blue);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  /* Align the visible label tops with the section's content edge. */
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
}

.routine-step h3 {
  margin: 0;
  color: #f2f6fa;
  font: 600 clamp(1.125rem, 1.6vw, 1.375rem)/1.25 "DM Sans", sans-serif;
  letter-spacing: -0.015em;
}

.routine-step-copy {
  max-width: 42ch;
  margin: 0.65rem 0 0;
}

.routine-step-copy,
.routine-return-label {
  color: #b9d7f2;
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.routine-step-visual {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  min-width: 0;
}

.routine-link,
.routine-email {
  grid-row: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--flow-question-card-width);
  margin-inline: auto;
}

.routine-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  width: calc(100% - 2rem);
  /* Keep the course link clear of the circular border on narrower screens. */
  min-width: min(100%, 14rem);
  max-width: var(--routine-share-width);
  aspect-ratio: 1;
  padding: 1rem;
  border: var(--flow-connector-width) solid var(--routine-line);
  border-radius: 50%;
  color: #dceffd;
  font: 400 0.8125rem/1.4 "DM Mono", monospace;
}

.routine-qr-icon {
  flex: none;
  width: 7rem;
  height: 7rem;
  background: currentColor;
  -webkit-mask: url("qr-code.svg") center / contain no-repeat;
  mask: url("qr-code.svg") center / contain no-repeat;
}

.routine-step--students .routine-step-visual {
  display: block;
}

.routine-tickets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  max-width: var(--routine-tickets-width);
  margin: 0;
  padding: 0;
  list-style: none;
}

.exit-ticket-flow-body .routine-tickets > [data-reflection-survey-step]:not([hidden]) {
  display: block;
  min-width: 0;
}

.exit-ticket-flow-body .routine-ticket[data-ticket-ready] > .reflection-survey-frame,
.exit-ticket-flow-body .routine-tickets [data-reflection-survey-step] .routine-ticket:not([data-ticket-ready]) > :is(.feedback-report-question-header, .feedback-report-body) {
  filter: drop-shadow(0 2px 3px rgb(2 12 24 / 8%));
}

.routine-ticket h4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: inherit;
  font-family: "DM Sans", sans-serif;
}

.routine-ticket-title {
  grid-area: 1 / 1;
}

.routine-ticket-number {
  grid-area: 1 / 2;
  justify-self: end;
  transform: translate(0.25rem, -0.25rem);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid rgb(66 118 165 / 35%);
  border-radius: 50%;
  color: #4276a5;
  font: 400 0.6875rem/1 "DM Mono", monospace;
}

.routine-response-mark {
  display: block;
  width: 100%;
  height: 4.25rem;
  margin: 0;
  fill: none;
  stroke: #90b3cc;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.routine-response-mark line {
  stroke-width: 3;
}

.routine-choice-selected circle {
  fill: #246fa8;
  stroke: #246fa8;
}

.routine-choice-selected .routine-choice-center {
  fill: #f2f7fc;
  stroke: none;
}

.routine-choice-selected line {
  stroke: #4d86b0;
}

.routine-writing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  height: 4.25rem;
  padding: 0.5rem;
  border: 1px solid #bfd7e9;
  border-radius: 0.3rem;
  background: #f0f7fc;
}

.routine-writing span {
  height: 3px;
  border-radius: 999px;
  background: #85aac8;
}

.routine-writing span:last-child {
  width: 60%;
}

.routine-email {
  max-width: var(--routine-email-width);
  overflow: hidden;
  border: var(--flow-connector-width) solid var(--routine-line);
  border-radius: 0.5rem;
}

.routine-email-sender {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgb(168 208 247 / 30%);
  color: #dceffd;
  font-size: 0.8125rem;
}

.routine-email-sender svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.routine-email-time {
  margin-inline-start: auto;
  color: var(--exit-ticket-light-blue);
  font-size: 0.75rem;
}

.routine-email-body {
  padding: 1rem 1rem 1.5rem;
}

.routine-email-body p {
  margin: 0 0 1rem;
  color: #dceffd;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}

.routine-email-line {
  display: grid;
  grid-template-columns: 0.1875rem minmax(0, 1fr);
  align-items: center;
  gap: 0.4375rem;
  color: #85b4d9;
}

.routine-email-line + .routine-email-line {
  margin-top: 1.25rem;
}

.routine-email-line::before,
.routine-email-line::after {
  content: "";
  height: 0.1875rem;
  border-radius: 999px;
  background: currentColor;
}

.routine-email-line:first-of-type::after {
  width: 84%;
}

.routine-email-line:last-child::after {
  width: 64%;
}

.routine-return {
  display: grid;
  grid-template-columns: var(--routine-columns);
  column-gap: var(--routine-gap);
  padding-block-start: 2.5rem;
}

.routine-return-label {
  grid-column: 2;
  justify-self: center;
  max-width: 52ch;
  margin: 1rem 0 0;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 74rem) {
  .reflection-survey-body.exit-ticket-flow-body {
    --flow-section-padding-block: clamp(3.5rem, 6vw, 5rem);
    --flow-section-gap: clamp(2rem, 4vw, 3rem);
  }

  .routine-intro-break {
    display: none;
  }

  .routine-diagram [data-routine-connection="return"] {
    display: none;
  }

  .routine-diagram {
    box-sizing: border-box;
    max-width: 38rem;
    margin-inline: auto;
    padding-left: 1.75rem;
  }

  .routine-steps {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .routine-step {
    position: relative;
    grid-template-rows: auto auto;
    gap: 1rem;
    width: 100%;
    margin-inline: auto;
  }

  .routine-step--share {
    max-width: var(--routine-share-width);
  }

  .routine-step--students {
    max-width: var(--routine-tickets-width);
  }

  .routine-step--takeaways {
    max-width: var(--routine-email-width);
  }

  .routine-step h3 {
    font-size: 1.25rem;
  }

  .routine-step-visual {
    position: static;
    display: block;
  }

  .routine-return {
    display: block;
  }

  .routine-return-label {
    text-align: left;
  }
}

.question-flow {
  --flow-accent: var(--exit-ticket-light-blue);
  --flow-question-font-size: 1.25rem;
  --flow-option-font-size: 1.0625rem;
  --flow-answer-font-size: 1rem;
  --flow-ticket-padding-inline: clamp(1rem, 1.5vw, 1.75rem);
  --flow-written-padding-inline: clamp(1rem, 1.4vw, 1.5rem);
  --flow-example-gap: clamp(2rem, 4vw, 4rem);
  min-width: 0;
  color: #f2f6fa;
  font-family: "DM Sans", sans-serif;
}

.flow-intro {
  display: flex;
  flex: none;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}

.flow-wordmark {
  margin: 0 0 0.8rem;
  color: #d9eafa;
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.flow-intro h1,
.flow-intro h2 {
  margin: 0;
  color: #fff;
  font-family: "DM Serif Display", serif;
  font-size: clamp(2rem, 3vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.flow-workspace {
  display: grid;
  gap: 3rem;
  width: 100%;
  max-width: var(--flow-content-max-width);
  /* The tabs' padded hit areas start above their visible labels and icons. */
  margin-block-start: -0.75rem;
  margin-inline: auto;
}

.flow-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  box-shadow: inset 0 -1px 0 rgb(168 208 247 / 25%);
}

.flow-controls[hidden] {
  display: none;
}

.flow-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  scroll-margin-top: calc(var(--flow-header-height) + 1rem);
}

.flow-progress {
  margin: 0;
  color: var(--exit-ticket-light-blue);
  font-size: 0.875rem;
}

.question-flow .flow-restart {
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--exit-ticket-light-blue);
  border-radius: 0.3rem;
  background: transparent;
  color: #f2f6fa;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.flow-restart:focus-visible {
  outline: 2px solid var(--exit-ticket-light-blue);
  outline-offset: 3px;
}

.question-flow .flow-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  max-width: 100%;
  margin: 0;
  padding: 0.5rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #a8c7e0;
  font: 500 0.875rem/1.4 "DM Sans", sans-serif;
  text-align: center;
  cursor: pointer;
  scroll-margin-block-start: calc(var(--flow-header-height) + 1rem);
}

.question-flow .flow-tab[aria-selected="true"] {
  border-bottom-color: var(--flow-accent);
  color: #fff;
}

.question-flow .flow-tab:hover {
  color: #fff;
}

.question-flow .flow-tab:focus-visible {
  outline: 2px solid var(--flow-accent);
  outline-offset: 3px;
}

.flow-category-icon {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  background-color: var(--exit-ticket-light-blue);
  -webkit-mask: var(--category-icon) center / contain no-repeat;
  mask: var(--category-icon) center / contain no-repeat;
}

.flow-example {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: var(--flow-example-gap);
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
}

.exit-ticket-flow-body .flow-column-heading {
  grid-row: 1;
  margin: 0 0 1.25rem;
  color: var(--exit-ticket-light-blue);
  font-size: 1rem;
  font-weight: 550;
  line-height: 1.4;
  text-align: center;
}

#flow-pulse-heading {
  grid-column: 1;
}

#flow-written-heading {
  grid-column: 2;
}

.flow-conversation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  grid-column: 2;
  grid-row: 2;
}

.flow-measurement {
  position: absolute;
  inset: 0 auto auto 0;
  width: 0;
  height: 0;
  overflow: hidden;
  contain: strict;
  visibility: hidden;
  pointer-events: none;
}

.flow-measurement-options {
  display: grid;
  align-items: start;
}

.flow-measurement-options > * {
  grid-area: 1 / 1;
}

.question-flow[data-flow-enhanced] [data-flow-pending] {
  visibility: hidden;
}

.flow-connections {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  pointer-events: none;
}

.flow-link,
.flow-reply,
.flow-thread,
.flow-arrowhead {
  fill: none;
  stroke: var(--flow-accent);
  stroke-width: var(--flow-connector-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.35;
}

.flow-link-selected {
  stroke-width: var(--flow-connector-width);
  opacity: 1;
}

.flow-example .flow-port {
  fill: var(--flow-accent);
  stroke: none;
}

.flow-reply,
.flow-thread {
  opacity: 1;
}

.flow-thread {
  stroke-linecap: butt;
}

.flow-thread-mask .flow-reply {
  stroke: #fff;
  stroke-width: 4;
}

/* Match the survey's trimmed answer text: outer padding starts at the cap line
   and baseline, while wrapped lines retain their existing line height. */
.flow-agreement,
.exit-ticket-flow-body .flow-question [data-flow-question-text],
.flow-written p {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.flow-agreement {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  opacity: 0.8;
}

.exit-ticket-flow-body .flow-ticket-stage[data-reflection-survey-step]:not([hidden]) {
  display: block;
  flex: 0 0 auto;
  grid-column: 1;
  grid-row: 2;
  width: 100%;
}

.exit-ticket-flow-body [data-reflection-survey-step] .flow-ticket {
  --feedback-report-card-padding-inline: var(--flow-ticket-padding-inline);
  --reflection-survey-card-padding-block: var(--feedback-report-card-padding-inline);
  --ticket-perforation-color: #bfd3e4;
  display: grid;
  grid-template-rows: auto auto auto;
  width: 100%;
  color: var(--deep-blue);
}

.exit-ticket-flow-body .flow-ticket > .feedback-report-question-header {
  font-size: 0.875rem;
}

.exit-ticket-flow-body .flow-question [data-flow-question-text] {
  margin: 0;
  color: var(--deep-blue);
  font-size: var(--flow-question-font-size);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

.exit-ticket-flow-body [data-reflection-survey-step] .flow-question {
  --flow-answer-min-height: 2.75rem;
  --reflection-survey-answer-padding-block: var(--feedback-report-card-padding-inline);
}

.exit-ticket-flow-body.respond-survey-body [data-reflection-survey-step] .flow-question [data-flow-list="answer"] {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exit-ticket-flow-body.respond-survey-body .flow-question [data-reflection-tap-option] {
  min-block-size: 0;
}

/* Keep the divider's layout space, but stop its paint at the ticket surface. */
.exit-ticket-flow-body.respond-survey-body .flow-question [data-reflection-tap-option] + [data-reflection-tap-option] {
  position: relative;
  border-block-start-color: transparent;
}

.exit-ticket-flow-body.respond-survey-body .flow-question [data-reflection-tap-option] + [data-reflection-tap-option]::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: var(--reflection-survey-row-fill-inset, 0px);
  border-block-start: 1px solid var(--feedback-report-card-border);
  pointer-events: none;
}

.exit-ticket-flow-body.respond-survey-body .flow-question [data-reflection-tap-option] label {
  min-height: var(--flow-answer-min-height);
  padding-inline: var(--feedback-report-card-padding-inline);
  color: var(--deep-blue);
  font-size: var(--flow-option-font-size);
  font-weight: 400;
  line-height: 1.5;
}

/* The lower half of the notch is part of the first answer's visible height. */
.exit-ticket-flow-body.respond-survey-body .flow-question [data-reflection-tap-option]:first-child label {
  min-height: calc(var(--flow-answer-min-height) - var(--report-notch-half-height));
}

/* Center the indicator without letting it add height to the trimmed text row. */
.exit-ticket-flow-body .flow-question .reflection-radio-circle {
  margin-block: -0.5rem;
}

/* Keep the other choices visible while the selected check animates. */
.question-flow .reflection-survey-radio:not(:checked) ~ .reflection-radio-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 2px solid var(--feedback-report-card-border);
  border-radius: 50%;
}

.question-flow label:hover .reflection-survey-radio:not(:checked) ~ .reflection-radio-circle::after {
  border-color: var(--reflection-survey-answer-hover-border);
}

@media (prefers-reduced-motion: no-preference) {
  .question-flow .reflection-survey-radio:not(:checked) ~ .reflection-radio-circle::after {
    transition: border-color 200ms ease-out;
  }
}

.flow-empty-connector {
  fill: none;
  stroke: var(--flow-accent);
  stroke-width: var(--flow-connector-width);
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}

.flow-written {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: var(--flow-written-padding-inline);
  border-inline-start: 2px solid var(--flow-accent);
  border-radius: 0 0.4rem 0.4rem 0;
  background: rgb(7 44 76 / 30%);
  font-size: var(--flow-question-font-size);
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}

.flow-written p {
  margin: 0;
}

.flow-reflections {
  padding-block-start: clamp(1.5rem, 3svh, 2rem);
}

.flow-responses-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  color: #d0e2f2;
  font-size: 0.6875rem;
  font-weight: 550;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.flow-responses-icon {
  display: grid;
  flex: 0 0 1.5rem;
  height: 1.5rem;
  margin-block: -0.75rem;
  place-items: center;
}

.flow-responses-icon::before {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  background-color: var(--exit-ticket-light-blue);
  -webkit-mask: url("person-circle.svg") center / contain no-repeat;
  mask: url("person-circle.svg") center / contain no-repeat;
}

.flow-comments {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-inline-start: var(--flow-reflection-inset, 2.5rem);
}

.flow-comment {
  margin: 0;
  padding: 0;
  color: var(--exit-ticket-light-blue);
  font-size: var(--flow-answer-font-size);
  font-weight: 350;
  line-height: 1.5;
  text-wrap: pretty;
}

.flow-comment p {
  position: relative;
  margin: 0;
}

.flow-quote-mark {
  position: absolute;
  inset-inline-end: calc(100% + 0.05em);
  top: 0;
}

.flow-comment strong {
  color: #f2f6fa;
  font-weight: 500;
}

.course-timeline {
  --timeline-stem: calc(1.5rem + 12px);
  --timeline-line-width: 1px;
  --timeline-content-width: calc(var(--flow-question-card-width) + 2rem);
  --timeline-label-size: 0.75rem;
  --timeline-icon-size: 1.25rem;
  --timeline-info-badge-size: 1.875rem;
  --timeline-info-badge-inset: 0.625rem;
  min-width: 0;
  color: var(--exit-ticket-light-blue);
  font-family: "DM Sans", sans-serif;
}

.get-started {
  --pricing-card-background: rgb(7 44 76 / 30%);
  width: 100%;
  padding-block: clamp(2rem, 4vw, 3rem);
  color: #f2f6fa;
}

.get-started-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  max-width: 68rem;
  margin: var(--flow-section-gap) auto 0;
}

.get-started-account {
  --report-notch-radius: 5px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1rem 1fr;
  min-width: 0;
  border-radius: 0.75rem;
  background: var(--pricing-card-background);
}

.get-started-account > .feedback-report-question-header {
  /* The upper half of the notch adds another 0.5rem below the price details. */
  padding: 1.625rem 1.5rem 0.75rem;
  background: none;
  font-size: 1.25rem;
}

.get-started-account > .feedback-report-notch {
  height: 1rem;
  margin: 0;
  background: none;
}

.get-started-account > .feedback-report-notch::after {
  content: none;
}

.get-started-account-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.5rem 1.5rem 1.5rem;
}

.get-started-account .get-started-sign-in-help {
  margin: 0.625rem 0 0;
  color: var(--exit-ticket-light-blue);
  font-size: 0.875rem;
  font-weight: 350;
}

.get-started-features {
  display: grid;
  gap: 0.75rem;
  margin: 0.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
  font-weight: 350;
}

.get-started-features li {
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr);
  gap: 0.75rem;
  line-height: 1.5;
}

.get-started-feature-icon {
  width: 1.375rem;
  height: 1.375rem;
  margin-block-start: 0.0625rem;
  background: var(--exit-ticket-light-blue);
  -webkit-mask: url("circle-check.svg") center / contain no-repeat;
  mask: url("circle-check.svg") center / contain no-repeat;
}

.get-started-account-copy .signature-hero-cta {
  display: inline-flex;
  justify-content: flex-start;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-height: 3rem;
  margin-block-start: 0;
  padding: 0.75rem 1.25rem;
  background: #dceffd;
  color: #072c4c;
  overflow-wrap: anywhere;
}

.get-started-account-copy .signature-hero-cta:hover {
  background: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .signature-hero-cta-arrow {
    transition: transform 160ms ease;
  }

  .signature-hero-cta:hover .signature-hero-cta-arrow {
    transform: translateX(4px);
  }
}

.get-started-account[data-ticket-ready] {
  background: none;
}

.get-started-account[data-ticket-ready]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--reflection-survey-ticket-clip);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.get-started-account[data-ticket-ready] > .reflection-survey-frame {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.get-started-account .reflection-survey-frame > :is(use, path) {
  display: none;
}

.get-started-account .reflection-survey-frame > :is(.reflection-survey-frame-outline, .reflection-survey-frame-perforation) {
  display: block;
  fill: none;
}

.get-started-account .reflection-survey-frame > .reflection-survey-frame-outline {
  fill: var(--pricing-card-background);
  stroke: color-mix(in srgb, var(--exit-ticket-light-blue) 35%, transparent);
  stroke-width: 1.5px;
}

.get-started-account .reflection-survey-frame > .reflection-survey-frame-perforation {
  stroke: var(--exit-ticket-light-blue);
  stroke-width: 1px;
  opacity: 0.25;
}

.get-started-account h3 {
  color: var(--exit-ticket-light-blue);
  font-weight: 600;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.get-started-account p {
  margin-block: 0.5rem 0;
  line-height: 1.5;
}

.get-started-price-section {
  margin-block-start: 1.5rem;
  font-size: 1rem;
}

.get-started-price {
  display: grid;
  gap: 0;
  color: var(--exit-ticket-light-blue);
}

.get-started-condition {
  color: #dceffd;
  font-size: 0.875rem;
  font-weight: 350;
}

.get-started-price strong {
  color: #fff;
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1.25;
}

.get-started-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--exit-ticket-light-blue);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
}

@media (width > 44rem) {
  .get-started-content {
    row-gap: 0;
  }

  /* Shared content rows align actions even when prices, lists or help wrap. */
  .get-started-account {
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .get-started-account-copy {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: start;
    justify-items: start;
  }

  .get-started-note {
    margin-block-start: 1.5rem;
  }
}

@media (max-width: 44rem) {
  .get-started-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

.course-timeline-body {
  display: grid;
  grid-template-columns: minmax(0, 68rem);
  row-gap: 3.5rem;
  justify-content: center;
  align-items: start;
  flex: none;
}

.course-timeline-cta {
  justify-self: center;
}

.course-timeline-note {
  margin: 0;
  color: rgb(168 208 247 / 75%);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Hold the first paint until every entrance effect is installed. Keep layout
   measurable, and show the static story if the script is slow or unavailable. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-course-timeline][data-timeline-pending] {
    visibility: hidden;
    animation: course-timeline-fallback 0s 1.5s forwards;
  }
}

@keyframes course-timeline-fallback {
  to { visibility: visible; }
}

.course-timeline-story {
  --timeline-response-inset: 3rem;
  /* Two equal session intervals and the final endpoint. */
  --timeline-columns: repeat(2, minmax(0, 1fr)) 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto var(--timeline-stem) calc(var(--timeline-label-size) * 1.5 + 0.75rem);
}

.course-timeline-rule {
  display: grid;
  grid-template-columns: var(--timeline-columns);
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  height: 12px;
  margin-bottom: -6px;
  padding-inline: calc(var(--timeline-content-width) / 2);
  color: var(--timeline-rule-color);
  background: linear-gradient(currentColor, currentColor) center / 100% var(--timeline-line-width) no-repeat;
}

.course-timeline-rule > span {
  position: relative;
}

.course-timeline-rule > span::before,
.course-timeline-rule > span:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--timeline-line-width);
  height: 12px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.course-timeline-rule > span:not(:last-child)::after {
  left: 50%;
  height: 8px;
}

.course-timeline-events {
  display: grid;
  grid-template-columns: var(--timeline-columns);
  grid-template-rows: subgrid;
  grid-column: 1;
  grid-row: 1 / 4;
  margin: 0;
  padding: 0 calc(var(--timeline-content-width) / 2);
  list-style: none;
}

.course-event {
  --event-node-size: 7px;
  --timeline-event-width: var(--timeline-content-width);
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  min-width: 0;
  width: var(--timeline-event-width);
  margin-left: calc(var(--timeline-event-width) / -2);
}

.course-event--responses {
  /* Give the quotes extra reading width beyond their branch gutter. */
  --timeline-event-width: calc(var(--timeline-content-width) + var(--timeline-response-inset) + 4rem);
}

.course-event--insight {
  /* Add room for the wider side padding while retaining the text width. */
  --timeline-event-width: calc(var(--timeline-content-width) + 1rem);
}

.course-event:nth-child(2) { grid-column: 2; }
.course-event:nth-child(3) { grid-column: 3; }

.course-event-connector {
  position: absolute;
  bottom: calc(-1 * var(--timeline-stem));
  left: calc(50% - var(--event-node-size) / 2);
  width: var(--event-node-size);
  height: var(--timeline-connector-length, var(--timeline-stem));
  overflow: visible;
  pointer-events: none;
  shape-rendering: geometricPrecision;
  transform-origin: center;
  color: rgb(168 208 247 / 50%);
}

.course-event-connector line {
  stroke: currentColor;
  stroke-width: var(--timeline-line-width);
}

.course-event-connector circle {
  fill: currentColor;
}

.course-event-connector--horizontal {
  display: none;
}

.course-event-session {
  position: absolute;
  top: calc(100% + var(--timeline-stem) + 0.75rem);
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  color: rgb(168 208 247 / 65%);
  font-family: "DM Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.course-event-content {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  width: 100%;
  max-width: var(--timeline-event-width);
  margin-inline: auto;
  padding: 1rem;
  border-left: 2px solid transparent;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
  text-align: left;
  text-wrap: balance;
}

.course-event-content > * {
  translate: var(--timeline-copy-offset, 0px) 0;
}

.course-event-content--shaded {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.course-event-content--insight {
  padding-inline: 1.5rem;
}

.course-event-content--shaded::before {
  content: "";
  position: absolute;
  inset: 0 var(--timeline-background-right, 0px) 0 var(--timeline-background-left, -2px);
  z-index: -1;
  border-left: 2px solid var(--exit-ticket-light-blue);
  border-radius: 0 0.4rem 0.4rem 0;
  background: rgb(7 44 76 / 30%);
  background-clip: padding-box;
}

.course-event-icon {
  flex: none;
  width: var(--timeline-icon-size);
  height: var(--timeline-icon-size);
  background: var(--exit-ticket-light-blue);
  mask: var(--event-icon) center / contain no-repeat;
}

.course-event--responses { --event-icon: url("person-circle.svg"); }
.course-event--insight { --event-icon: url("ai-insights.svg"); }

.course-event-content p,
.course-event-content blockquote {
  margin: 0;
}

.course-event-session,
.course-event-content .course-event-kind {
  font-size: var(--timeline-label-size);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.course-event-content .course-event-kind {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.625rem;
  margin-bottom: 1rem;
  color: #d0e2f2;
}

.course-event-content strong {
  color: #f2f6fa;
  font-weight: 500;
}

.course-event-content h3 {
  margin: 0 0 0.75rem;
  color: #f2f6fa;
  font: inherit;
  font-weight: 500;
}

.course-event-content .course-insight-detail {
  margin-top: 0.75rem;
  text-wrap: pretty;
}

.course-event-content .course-insight-lead {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

.course-event-content--question {
  overflow: visible;
  padding-block: 0;
  border: 0;
}

.exit-ticket-flow-body .course-event [data-reflection-survey-step]:not([hidden]) {
  display: block;
}

.exit-ticket-flow-body [data-reflection-survey-step] .course-question {
  --feedback-report-card-padding-inline: 0.875rem;
  --reflection-survey-card-padding-block: 0.875rem;
  --report-notch-radius: 4.375px;
  --report-notch-circle-center: -1px;
  --report-notch-half-height: 5px;
  --report-notch-edge-width: 5.625px;
  --card-radius: 0.5rem;
  --ticket-perforation-color: #bfd3e4;
  width: 100%;
  color: var(--deep-blue);
  text-wrap: pretty;
}

.course-event-content .course-question h3,
.routine-ticket h4 {
  margin: 0;
  color: var(--deep-blue);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

.course-question-results {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.course-question-answer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.course-question-percentage {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.course-question-bar {
  display: block;
  height: 0.375rem;
  margin-top: 0.375rem;
  border-radius: 999px;
  background: var(--feedback-report-chart-track);
}

.course-question-bar-fill {
  display: block;
  width: var(--answer-share);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--feedback-report-blue), color-mix(in srgb, var(--feedback-report-blue) 60%, var(--deep-blue)));
  filter: drop-shadow(0 1.5px 1.5px rgb(11 62 114 / 20%));
  transform-origin: left center;
}

.course-responses {
  position: relative;
}

.course-response-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: var(--exit-ticket-light-blue);
}

.course-response-lines path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--timeline-line-width);
}

.course-response-lines .course-response-reveal {
  stroke: #fff;
  stroke-width: 6;
}

.course-response-lines:not(:has(path[d])) {
  visibility: hidden;
}

.course-response-lines circle {
  fill: currentColor;
}

.course-response-quotes {
  display: grid;
  gap: 1.25rem;
  padding-left: var(--timeline-response-inset);
  font-size: 1.125rem;
  line-height: 1.5;
}

.course-response-quotes strong {
  font-weight: 600;
}

.course-response-quotes p {
  position: relative;
}

.course-response-quote-mark {
  position: absolute;
  inset-inline-end: calc(100% + 0.05em);
  top: 0;
}

/* Original faces keep their natural size, including while an explanation is
   showing. Only the faces change; the timeline's layout never participates. */
.course-example-front,
.course-example-explanation {
  transition: opacity 220ms ease, visibility 0s 220ms;
}

.course-example-front {
  opacity: 1;
  visibility: inherit;
  transition-delay: 0s;
}

.course-example-explanation {
  position: absolute;
  inset: 1rem;
  opacity: 0;
  visibility: hidden;
  text-wrap: pretty;
}

.course-info-badge {
  position: absolute;
  top: calc(var(--timeline-info-badge-inset) - 1rem);
  right: calc(var(--timeline-info-badge-inset) - 1rem);
  display: grid;
  place-items: center;
  width: var(--timeline-info-badge-size);
  height: var(--timeline-info-badge-size);
  border-radius: 50%;
  background: var(--exit-ticket-light-blue);
  color: var(--deep-blue);
  font: 500 1.125rem/1 "DM Mono", monospace;
  letter-spacing: normal;
  pointer-events: none;
}

.course-info-badge::before {
  content: "i";
}

.course-event-content.is-explained > .course-example-front {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 220ms;
}

.course-event-content.is-explained > .course-example-explanation {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.course-event-content .course-explanation-title {
  margin: 0 0 0.625rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.course-event-content .course-explanation-detail {
  font-size: 0.875rem;
  line-height: 1.45;
}

.course-event-content--insight > .course-example-explanation {
  /* Include the accent rule so both faces share the icon and label origin. */
  inset-inline: calc(var(--timeline-background-left, -2px) + 2px + 1.5rem)
    calc(var(--timeline-background-right, 0px) + 1.5rem);
  translate: none;
}

.course-event-content--insight > :is(.course-example-front, .course-example-explanation) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

/* Switch the identical labels immediately so their antialiased edges never
   double up while the two text blocks slide past each other. */
.course-event-content--insight.is-explained > .course-example-front .course-event-kind,
.course-event-content--insight:not(.is-explained) > .course-example-explanation .course-event-kind {
  visibility: hidden;
}

/* Both copies share a viewport below the stationary feature label. The front
   retains its natural height, so changing the copy cannot move the panel. */
.course-insight-window {
  display: grid;
  overflow: clip;
}

.course-insight-copy {
  grid-area: 1 / 1;
}

.course-event-content--insight .course-info-badge {
  right: calc(var(--timeline-info-badge-inset) - 1.5rem);
}

.course-event-content--responses .course-explanation-detail {
  font-size: 1rem;
  line-height: 1.5;
}

.course-event-content--question {
  perspective: 900px;
}

.course-event-content--question > :is(.course-example-front, .course-example-explanation) {
  opacity: 1;
  backface-visibility: hidden;
  transition: transform 220ms ease, visibility 0s 220ms;
}

.course-event-content--question > .course-example-front {
  transform: rotateY(var(--course-turn, 0deg));
  transition-delay: 0s;
}

.course-event-content--question > .course-example-explanation {
  inset: 0 1rem;
  color: var(--deep-blue);
  transform: rotateY(calc(var(--course-turn, 0deg) - 180deg));
}

.course-event-content--question > .course-example-explanation > [data-reflection-survey-step],
.course-event-content--question .course-question-explanation {
  height: 100%;
}

.course-event-content--question .course-question-explanation {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.course-event-content .course-question-explanation .course-explanation-title {
  margin: 0;
  padding-right: calc(var(--timeline-info-badge-size) + var(--timeline-info-badge-inset) + 0.625rem - var(--feedback-report-card-padding-inline));
  color: var(--deep-blue);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}

.course-question-explanation .feedback-report-question-header {
  position: relative;
}

.course-question-explanation .course-info-badge {
  top: var(--timeline-info-badge-inset);
  right: var(--timeline-info-badge-inset);
  background: var(--deep-blue);
  color: var(--feedback-report-question-header-background);
}

.course-event-content--question.is-explained > .course-example-front {
  opacity: 1;
}

.course-event-content--question.is-explained > .course-example-explanation {
  transition-delay: 0s;
}

.course-event-content--question.is-crossfading > :is(.course-example-front, .course-example-explanation) {
  transition: none;
}

/* The original ticket supplies one solid surface throughout the content fade. */
.course-event-content--question.is-crossfading .course-example-explanation .reflection-survey-frame {
  visibility: hidden;
}

.course-timeline .course-example-toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  box-shadow: none;
  translate: none;
  cursor: pointer;
  touch-action: manipulation;
}

.course-event-content--question > .course-example-toggle {
  inset-inline: 1rem;
}

.course-event-content--insight > .course-example-toggle {
  inset-inline: var(--timeline-background-left, -2px) var(--timeline-background-right, 0px);
}

.course-timeline .course-example-toggle:focus-visible {
  outline: 2px solid #d0eaff;
  outline-offset: 5px;
}

@media (prefers-reduced-motion: no-preference) {
  .course-event-content--insight > :is(.course-example-front, .course-example-explanation) {
    opacity: 1;
    transition: none;
  }

  .course-event-content--insight.is-explained > .course-example-front,
  .course-event-content--insight:not(.is-explained) > .course-example-explanation {
    opacity: 1;
    transition: visibility 0s 220ms;
  }

  .course-insight-copy {
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .course-event-content--insight > .course-example-explanation .course-insight-copy {
    transform: translateY(100%);
  }

  .course-event-content--insight.is-explained > .course-example-front .course-insight-copy {
    transform: translateY(-100%);
  }

  .course-event-content--insight.is-explained > .course-example-explanation .course-insight-copy {
    transform: none;
  }

  .course-event-content--insight.is-crossfading > :is(.course-example-front, .course-example-explanation),
  .course-event-content--insight.is-crossfading .course-insight-copy {
    transition: none;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .course-event-content--question[data-example-ready]:hover:not(.is-explained) > .course-example-front {
    transform: rotateY(calc(var(--course-turn, 0deg) + 6deg));
  }

  .course-event-content--question[data-example-ready]:hover.is-explained > .course-example-explanation {
    transform: rotateY(calc(var(--course-turn, 0deg) - 180deg + 6deg));
  }

  .course-event-content--insight[data-example-ready]::before {
    transition: border-color 220ms ease, box-shadow 220ms ease;
  }

  .course-event-content--insight[data-example-ready]:hover::before {
    border-left-color: #e4f2ff;
    box-shadow: 0 4px 14px rgb(3 22 42 / 24%);
  }

  :is(.course-event-content--responses, .course-event-content--insight)[data-example-ready] .course-event-icon {
    transition: background-color 220ms ease;
  }

  :is(.course-event-content--responses, .course-event-content--insight)[data-example-ready] .course-event-kind {
    transition: color 220ms ease;
  }

  .course-event-content--responses[data-example-ready] .course-response-lines {
    transition: color 220ms ease;
  }

  .course-event-content--responses[data-example-ready] .course-response-quotes {
    transition: translate 220ms ease;
  }

  :is(.course-event-content--responses, .course-event-content--insight)[data-example-ready]:hover .course-event-icon {
    background-color: #e4f2ff;
  }

  :is(.course-event-content--responses, .course-event-content--insight)[data-example-ready]:hover .course-event-kind {
    color: #e4f2ff;
  }

  .course-event-content--responses[data-example-ready]:hover .course-response-lines {
    color: #d0eaff;
  }

  .course-event-content--responses[data-example-ready]:hover .course-response-quotes {
    translate: 3px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-event-content > :is(.course-example-front, .course-example-explanation) {
    transition: none;
  }
}

@media (max-width: 74rem) {
  .course-timeline-intro {
    align-items: start;
    flex-direction: column;
    gap: 1.25rem;
  }

  .course-timeline-note {
    margin-top: 1.5rem;
  }

  .course-timeline-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-timeline-story {
    display: block;
    max-width: calc(var(--timeline-content-width) + var(--timeline-response-inset));
    margin-inline: auto;
    padding-left: 2rem;
  }

  .course-timeline-rule {
    display: block;
    position: absolute;
    align-self: stretch;
    inset: 0 auto 0 3px;
    width: 7px;
    height: auto;
    margin-bottom: 0;
    padding-inline: 0;
    background: linear-gradient(currentColor, currentColor) center / var(--timeline-line-width) 100% no-repeat;
  }

  .course-timeline-rule > span {
    display: none;
  }

  .course-timeline-events {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 2.5rem;
    padding: 0;
  }

  .course-timeline-events > .course-event {
    grid-column: auto;
    grid-row: auto;
    align-self: start;
    width: auto;
    margin-left: 0;
  }

  .course-event-connector {
    top: calc(var(--timeline-label-size) * 0.75 - var(--event-node-size) / 2);
    bottom: auto;
    left: calc(-2rem + 6.5px);
    width: calc(2rem - 1rem);
    height: var(--event-node-size);
    transform: none;
  }

  .course-event-connector--vertical {
    display: none;
  }

  .course-event-connector--horizontal {
    display: inline;
  }

  .course-event-session {
    position: static;
    display: block;
    width: auto;
    margin-bottom: 0.75rem;
    transform: none;
  }

  .course-event:not(:last-child) .course-event-session::before {
    content: "";
    position: absolute;
    top: calc(50% + 1.25rem + var(--timeline-label-size) * 0.75 - var(--timeline-line-width) / 2);
    left: calc(-2rem + 1.5px);
    width: 10px;
    height: var(--timeline-line-width);
    background: var(--timeline-rule-color);
  }

  .course-event-content {
    width: 100%;
    margin-inline: 0;
  }
}

@media (max-width: 48rem) {
  .reflection-survey-body.exit-ticket-flow-body {
    --flow-section-padding-block: 3rem;
    --flow-section-gap: 2rem;
  }

  .flow-intro {
    align-items: start;
    gap: 1rem;
  }
}

@media (max-width: 74rem) {
  .routine-diagram {
    max-width: 54rem;
  }

  .routine-step {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 2rem;
    max-width: none;
  }

  .course-timeline-story {
    box-sizing: border-box;
    width: 100%;
    max-width: 36rem;
  }
}

@media (max-width: 64rem) {
  .signature-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    max-width: 40rem;
    min-height: 0;
    padding-block-start: 3rem;
  }

  .signature-hero .signature-hero-cta {
    display: none;
  }

  .signature-hero-copy .flow-heading-block {
    margin-block-end: 0;
  }

  .signature-hero h1 {
    max-width: none;
  }

  .signature-hero-copy > .flow-wordmark {
    margin-top: 0;
    margin-bottom: 2rem;
  }

  .signature-hero-copy .flow-intro-copy {
    max-width: none;
    text-wrap: pretty;
  }

  .signature-hero-ticket-stack {
    max-width: none;
  }

  .signature-hero-ticket,
  .signature-hero-sheet--shadow {
    transform: none;
  }
}

@media (max-width: 44rem) {
  .reflection-survey-body.exit-ticket-flow-body {
    --flow-page-padding: 1.25rem;
  }

  .flow-intro .flow-heading-block {
    display: flex;
    flex-direction: column;
  }

  .flow-heading-connector,
  .flow-intro h2 br {
    display: none;
  }

  .flow-intro .flow-heading-block > .flow-intro-copy {
    padding-inline-start: 0;
    text-wrap: pretty;
  }

  .signature-hero-ticket-stack {
    padding: 0;
  }

  .signature-hero-sheet--back,
  .signature-hero-sheet--middle,
  .signature-hero-sheet--shadow {
    display: none;
  }

  .routine-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
  }

  .routine-tickets {
    max-width: var(--flow-question-card-width);
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .question-flow .flow-tab {
    flex: 0 1 calc(50% - 0.375rem);
    min-width: min(100%, 9rem);
  }

  .flow-example {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    row-gap: 1.25rem;
    max-width: 32rem;
    padding-inline-end: 2.25rem;
  }

  .exit-ticket-flow-body .flow-column-heading {
    margin: 0;
  }

  #flow-written-heading {
    grid-column: 1;
    grid-row: 3;
    margin-block-start: 1rem;
  }

  .flow-conversation {
    grid-column: 1;
    grid-row: 4;
  }

  .course-timeline-story {
    --timeline-response-inset: 2.25rem;
    padding-left: 1.5rem;
  }

  .course-event-content {
    padding-inline: 0.75rem;
    text-wrap: pretty;
  }

  .course-event-connector {
    left: calc(-1.5rem + 6.5px);
    width: calc(1.5rem - 0.75rem);
  }

  .course-event:not(:last-child) .course-event-session::before {
    left: calc(-1.5rem + 1.5px);
  }
}

@media (max-width: 80rem) {
  .question-flow[data-flow-enhanced] {
    --flow-question-font-size: clamp(1.125rem, 1.8vw, 1.25rem);
    --flow-option-font-size: 1rem;
  }

  .question-flow[data-flow-enhanced] .flow-workspace {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 1.5rem;
    max-width: 32rem;
    margin-block-start: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid rgb(203 228 249 / 32%);
    border-radius: 0.8rem;
    background: rgb(7 44 76 / 30%);
  }

  .question-flow[data-flow-enhanced] .flow-controls {
    grid-area: 1 / 1;
    padding-block-end: 0.75rem;
    border-bottom: 1px solid rgb(168 208 247 / 18%);
  }

  .question-flow[data-flow-enhanced] .flow-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: none;
  }

  .question-flow[data-flow-enhanced] .flow-tab {
    flex: none;
    justify-content: flex-start;
    gap: 0.75rem;
    min-width: 0;
    min-height: 3.25rem;
    padding: 0.875rem 0.5rem;
    border-bottom: 1px solid rgb(168 208 247 / 18%);
    font-size: 1rem;
    text-align: start;
  }

  .question-flow[data-flow-enhanced] .flow-tab:last-child {
    border-bottom: 0;
  }

  .question-flow[data-flow-enhanced] .flow-category-icon {
    flex-basis: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
  }

  .question-flow[data-flow-enhanced] :is(.flow-categories, .flow-example) {
    grid-area: 2 / 1;
    align-self: start;
  }

  .question-flow[data-flow-enhanced] .flow-example {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0;
    padding-inline-end: 0;
  }

  .question-flow[data-flow-enhanced] :is(#flow-pulse-heading, #flow-written-heading) {
    grid-area: 1 / 1;
    margin: 0 0 1.25rem;
  }

  .question-flow[data-flow-enhanced] :is(#flow-category-heading, #flow-pulse-heading, #flow-written-heading) {
    margin-block-end: 1.25rem;
    font-size: 1.0625rem;
    text-align: start;
  }

  .question-flow[data-flow-enhanced] .flow-example > [data-flow-step] {
    grid-area: 2 / 1;
  }

  /* The compact explorer has one plain panel, without a ticket inside it. */
  .exit-ticket-flow-body.respond-survey-body .question-flow[data-flow-enhanced] .flow-question {
    --feedback-report-card-border: rgb(168 208 247 / 24%);
    --reflection-survey-answer-accent: var(--exit-ticket-light-blue);
    --reflection-survey-answer-hover-border: #fff;
    --reflection-survey-answer-hover-start: rgb(168 208 247 / 5%);
    --reflection-survey-answer-hover-end: rgb(168 208 247 / 10%);
    --report-notch-half-height: 0px;
    grid-template-rows: auto auto;
    row-gap: 1.25rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: #f2f6fa;
  }

  .question-flow[data-flow-enhanced] .flow-question > :is(.reflection-survey-frame, .feedback-report-notch) {
    display: none;
  }

  .exit-ticket-flow-body.respond-survey-body .question-flow[data-flow-enhanced] .flow-question > :is(.feedback-report-question-header, .feedback-report-body) {
    grid-row: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    filter: none;
    clip-path: none;
  }

  .question-flow[data-flow-enhanced] .flow-question [data-flow-question-text] {
    color: #f2f6fa;
    line-height: 1.5;
  }

  .exit-ticket-flow-body.respond-survey-body .question-flow[data-flow-enhanced] .flow-question [data-reflection-tap-options] {
    filter: none;
  }

  .exit-ticket-flow-body.respond-survey-body .question-flow[data-flow-enhanced] .flow-question [data-reflection-tap-option] label {
    min-height: 3rem;
    padding: 0.875rem 0.5rem;
    border-radius: 0.25rem;
    background-color: transparent;
    color: #f2f6fa;
    box-shadow: none;
    clip-path: none;
  }

  .exit-ticket-flow-body.respond-survey-body .question-flow[data-flow-enhanced] .flow-question [data-reflection-tap-option] label:is(:hover, :has(.reflection-survey-radio:checked)) {
    background-image: linear-gradient(135deg,
      var(--reflection-survey-answer-hover-start), var(--reflection-survey-answer-hover-end));
  }

  .question-flow[data-flow-enhanced] .flow-question [data-reflection-tap-confirming] label {
    animation: none;
  }

  .exit-ticket-flow-body.respond-survey-body .question-flow[data-flow-enhanced] .flow-question .reflection-radio-circle::after {
    border-color: rgb(168 208 247 / 70%);
  }

  /* Keep every step in the shared panel's layout while only exposing one. */
  .question-flow[data-flow-enhanced] :is([data-flow-step], [data-flow-step-heading]):not([data-flow-active]) {
    visibility: hidden;
  }

  .question-flow[data-flow-enhanced]:not([data-flow-compact-step="written"]) .flow-connections {
    visibility: hidden;
  }
}

@media (max-width: 36rem) {
  .exit-ticket-header-band {
    position: static;
    border-bottom: 0;
  }

  .exit-ticket-header-band::before,
  .exit-ticket-header-band::after {
    content: none;
  }

  .exit-ticket-header-inner {
    flex-wrap: wrap;
    gap: 0;
    padding-block: var(--flow-header-height) 0.375rem;
    min-height: 0;
  }

  .exit-ticket-header-brand {
    position: fixed;
    inset: 0 0 auto;
    z-index: 10;
    isolation: isolate;
    box-sizing: border-box;
    min-height: var(--flow-header-height);
    padding: 0.375rem var(--flow-page-padding);
    border-bottom: 1px solid color-mix(in srgb, var(--exit-ticket-light-blue) 25%, transparent);
  }

  .exit-ticket-header-brand::before,
  .exit-ticket-header-brand::after {
    content: "";
  }

  .exit-ticket-header-actions {
    width: 100%;
    margin-inline-start: 0;
  }

  .exit-ticket-header-action {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    font-size: 0.875rem;
  }
}